import and clear nicknames

bff-gui/src/App.tsx

@@ -26,6 +26,7 @@ function App() {
         nicknames={nicknames}
         setResourcePreview={setResourcePreview}
         setBigfile={setBigfile}
+        setNicknames={setNicknames}
       />
       <div className="main">
         <Explorer

bff-gui/src/components/Explorer.tsx

@@ -75,27 +75,27 @@ function ResourceList({
   setOpenTab: React.Dispatch<React.SetStateAction<ViewTab>>;
   setCurrentNickname: React.Dispatch<React.SetStateAction<string>>;
 }) {
-  let objectsCopy = [...resources];
-  if (sort != Sort.Default) objectsCopy.sort((a, b) => a.name - b.name);
+  let resourcesCopy = [...resources];
+  if (sort != Sort.Default) resourcesCopy.sort((a, b) => a.name - b.name);
   if (sort == Sort.Extension)
-    objectsCopy.sort((a, b) => {
+    resourcesCopy.sort((a, b) => {
       if (a.class_name !== null) {
         if (b.class_name !== null)
           return a.class_name.localeCompare(b.class_name);
         else return -1;
       } else if (b.class_name !== null) return 1;
       else return 0;
     });
-  if (sortBackward) objectsCopy.reverse();
+  if (sortBackward) resourcesCopy.reverse();
 
   const Row = ({ index, style }: { index: any; style: any }) => (
     <ResourceButton
       key={index}
-      name={objectsCopy[index].name}
-      classN={objectsCopy[index].class_name}
+      name={resourcesCopy[index].name}
+      classN={resourcesCopy[index].class_name}
       nickname={
         nicknames.find((nickname: Nickname) => {
-          return nickname.name === objectsCopy[index].name;
+          return nickname.name == resourcesCopy[index].name;
         })?.nickname ?? ""
       }
       selected={false}
@@ -115,7 +115,7 @@ function ResourceList({
         <List
           width={width}
           height={height}
-          itemCount={objectsCopy.length}
+          itemCount={resourcesCopy.length}
           itemSize={() => 25}
         >
           {Row}

bff-gui/src/components/Menubar.tsx

@@ -8,19 +8,17 @@ import {
 
 import "./Menubar.css";
 
+import { exportAll, exportOne, exportPreview } from "../functions/export";
+import { selectBigfile } from "../functions/bigfile";
 import {
-  exportAll,
+  clearNicknames,
   exportNicknames,
-  exportOne,
-  exportPreview,
-} from "../functions/export";
-import { selectBigfile } from "../functions/bigfile";
+  importNicknames,
+} from "../functions/nicknames";
 
 function ExportMenu({
   bigfileLoaded,
-  bigfileName,
   resourcePreview,
-  nicknames,
 }: {
   bigfileLoaded: boolean;
   bigfileName: string;
@@ -76,6 +74,48 @@ function ExportMenu({
         >
           Export preview...
         </button>
+      </div>
+    </div>
+  );
+}
+
+function NicknameMenu({
+  bigfileLoaded,
+  bigfileName,
+  nicknames,
+  setNicknames,
+}: {
+  bigfileLoaded: boolean;
+  bigfileName: string;
+  nicknames: Nickname[];
+  setNicknames: React.Dispatch<React.SetStateAction<Nickname[]>>;
+}) {
+  const { ref, isComponentVisible, setIsComponentVisible } =
+    useComponentVisible(false);
+  return (
+    <div ref={ref}>
+      <button
+        onClick={() => {
+          setIsComponentVisible(!isComponentVisible);
+        }}
+        disabled={!bigfileLoaded}
+      >
+        Nicknames
+      </button>
+      <div
+        className="submenu"
+        style={{
+          display: isComponentVisible ? "flex" : "none",
+        }}
+      >
+        <button
+          onClick={() => {
+            setIsComponentVisible(false);
+            importNicknames(setNicknames);
+          }}
+        >
+          Import nicknames...
+        </button>
         <button
           onClick={() => {
             setIsComponentVisible(false);
@@ -85,6 +125,15 @@ function ExportMenu({
         >
           Export nicknames...
         </button>
+        <button
+          onClick={() => {
+            setIsComponentVisible(false);
+            clearNicknames(setNicknames);
+          }}
+          disabled={nicknames.length == 0}
+        >
+          Clear nicknames
+        </button>
       </div>
     </div>
   );
@@ -97,6 +146,7 @@ export function Menubar({
   nicknames,
   setResourcePreview,
   setBigfile,
+  setNicknames,
 }: {
   bigfileLoaded: boolean;
   bigfileName: string;
@@ -106,6 +156,7 @@ export function Menubar({
     React.SetStateAction<ResourcePreview | null>
   >;
   setBigfile: React.Dispatch<React.SetStateAction<BigFileData>>;
+  setNicknames: React.Dispatch<React.SetStateAction<Nickname[]>>;
 }) {
   return (
     <div className="menubar">
@@ -118,6 +169,12 @@ export function Menubar({
         resourcePreview={resourcePreview}
         nicknames={nicknames}
       />
+      <NicknameMenu
+        bigfileLoaded={bigfileLoaded}
+        bigfileName={bigfileName}
+        nicknames={nicknames}
+        setNicknames={setNicknames}
+      />
     </div>
   );
 }

bff-gui/src/functions/export.ts

@@ -50,48 +50,3 @@ export async function exportPreview(resourceName: number, dataType: DataType) {
       );
   });
 }
-
-export async function exportNicknames(
-  bigfileName: string,
-  nicknames: Nickname[]
-) {
-  let extInfo = EXTENSIONS.get(DataType.Json) as string[];
-  let bfBasename = await basename(bigfileName);
-  save({
-    defaultPath: `${bfBasename}-nicknames.${extInfo[0]}`,
-    filters: [
-      {
-        name: extInfo[1],
-        extensions: [extInfo[0]],
-      },
-    ],
-  }).then((path) => {
-    if (path !== null)
-      invoke("export_nicknames", {
-        path: path,
-        nicknames: new Map(nicknames.map((v) => [v.name, v.nickname] as const)),
-      }).catch((e) => message(e, { type: "warning" }));
-  });
-}
-
-export async function importNicknames(
-  setNicknames: React.Dispatch<React.SetStateAction<Nickname[]>>
-) {
-  let extInfo = EXTENSIONS.get(DataType.Json) as string[];
-  open({
-    multiple: false,
-    filters: [
-      {
-        name: extInfo[1],
-        extensions: [extInfo[0]],
-      },
-    ],
-  }).then((path) => {
-    if (path !== null)
-      invoke("import_nicknames", {
-        path: path,
-      })
-        .then((nicknames) => setNicknames(nicknames as Nickname[]))
-        .catch((e) => message(e, { type: "warning" }));
-  });
-}

bff-gui/src/functions/nicknames.ts

@@ -0,0 +1,56 @@
+import { basename } from "@tauri-apps/api/path";
+import { EXTENSIONS } from "../constants/constants";
+import { DataType, Nickname } from "../types/types";
+import { message, save, open } from "@tauri-apps/api/dialog";
+import { invoke } from "@tauri-apps/api";
+
+export async function exportNicknames(
+  bigfileName: string,
+  nicknames: Nickname[]
+) {
+  let extInfo = EXTENSIONS.get(DataType.Json) as string[];
+  let bfBasename = await basename(bigfileName);
+  save({
+    defaultPath: `${bfBasename}-nicknames.${extInfo[0]}`,
+    filters: [
+      {
+        name: extInfo[1],
+        extensions: [extInfo[0]],
+      },
+    ],
+  }).then((path) => {
+    if (path !== null)
+      invoke("export_nicknames", {
+        path: path,
+        nicknames: new Map(nicknames.map((v) => [v.name, v.nickname] as const)),
+      }).catch((e) => message(e, { type: "warning" }));
+  });
+}
+
+export async function importNicknames(
+  setNicknames: React.Dispatch<React.SetStateAction<Nickname[]>>
+) {
+  let extInfo = EXTENSIONS.get(DataType.Json) as string[];
+  open({
+    multiple: false,
+    filters: [
+      {
+        name: extInfo[1],
+        extensions: [extInfo[0]],
+      },
+    ],
+  }).then((path) => {
+    if (path !== null)
+      invoke("import_nicknames", {
+        path: path as string,
+      })
+        .then((nicknames) => setNicknames(nicknames as Nickname[]))
+        .catch((e) => message(e, { type: "warning" }));
+  });
+}
+
+export async function clearNicknames(
+  setNicknames: React.Dispatch<React.SetStateAction<Nickname[]>>
+) {
+  setNicknames([]);
+}