added translation to icon picker component + other fixes and improvements

components/IconGrid.tsx

@@ -0,0 +1,45 @@
+import { icons } from "@/lib/client/icons";
+import Fuse from "fuse.js";
+import { useMemo } from "react";
+
+const fuse = new Fuse(icons, {
+  keys: [{ name: "name", weight: 4 }, "tags", "categories"],
+  threshold: 0.2,
+  useExtendedSearch: true,
+});
+
+type Props = {
+  query: string;
+  color: string;
+  weight: "light" | "regular" | "bold" | "fill" | "duotone" | "thin";
+  iconName?: string;
+  setIconName: Function;
+};
+
+const IconGrid = ({ query, color, weight, iconName, setIconName }: Props) => {
+  const filteredQueryResultsSelector = useMemo(() => {
+    if (!query) {
+      return icons;
+    }
+    return fuse.search(query).map((result) => result.item);
+  }, [query]);
+
+  return filteredQueryResultsSelector.map((icon) => {
+    const IconComponent = icon.Icon;
+    return (
+      <div
+        key={icon.pascal_name}
+        onClick={() => setIconName(icon.pascal_name)}
+        className={`cursor-pointer btn p-1 box-border bg-base-100 border-none w-full ${
+          icon.pascal_name === iconName
+            ? "outline outline-1 outline-primary"
+            : ""
+        }`}
+      >
+        <IconComponent size={32} weight={weight} color={color} />
+      </div>
+    );
+  });
+};
+
+export default IconGrid;

components/IconPicker.tsx

@@ -1,12 +1,11 @@
-import { icons } from "@/lib/client/icons";
+import React, { useState } from "react";
-import React, { useMemo, useState, lazy, Suspense } from "react";
-import Fuse from "fuse.js";
 import TextInput from "./TextInput";
 import Popover from "./Popover";
 import { HexColorPicker } from "react-colorful";
 import { useTranslation } from "next-i18next";
 import Icon from "./Icon";
 import { IconWeight } from "@phosphor-icons/react";
+import IconGrid from "./IconGrid";
 
 type Props = {
   alignment?: "left" | "right";
@@ -31,23 +30,10 @@ const IconPicker = ({
   className,
   reset,
 }: Props) => {
-  const fuse = new Fuse(icons, {
-    keys: [{ name: "name", weight: 4 }, "tags", "categories"],
-    threshold: 0.2,
-    useExtendedSearch: true,
-  });
-
   const { t } = useTranslation();
   const [query, setQuery] = useState("");
   const [iconPicker, setIconPicker] = useState(false);
 
-  const filteredQueryResultsSelector = useMemo(() => {
-    if (!query) {
-      return icons;
-    }
-    return fuse.search(query).map((result) => result.item);
-  }, [query]);
-
   return (
     <div className="relative">
       <div
@@ -89,41 +75,32 @@ const IconPicker = ({
                 value={weight}
                 onChange={(e) => setWeight(e.target.value)}
               >
-                <option value="regular">Regular</option>
+                <option value="regular">{t("regular")}</option>
-                <option value="thin">Thin</option>
+                <option value="thin">{t("thin")}</option>
-                <option value="light">Light</option>
+                <option value="light">{t("light_icon")}</option>
-                <option value="bold">Bold</option>
+                <option value="bold">{t("bold")}</option>
-                <option value="fill">Fill</option>
+                <option value="fill">{t("fill")}</option>
-                <option value="duotone">Duotone</option>
+                <option value="duotone">{t("duotone")}</option>
               </select>
               <HexColorPicker color={color} onChange={(e) => setColor(e)} />
             </div>
 
-            <div className="flex flex-col gap-2 w-fit">
+            <div className="flex flex-col gap-2 w-full">
               <TextInput
                 className="p-2 rounded w-full h-7 text-sm"
-                placeholder="Search icons"
+                placeholder={t("search")}
                 value={query}
                 onChange={(e) => setQuery(e.target.value)}
               />
 
               <div className="grid grid-cols-4 gap-1 w-full overflow-y-auto h-32 border border-neutral-content bg-base-100 rounded-md p-2">
-                {filteredQueryResultsSelector.map((icon) => {
+                <IconGrid
-                  const IconComponent = icon.Icon;
+                  query={query}
-                  return (
+                  color={color}
-                    <div
+                  weight={weight}
-                      key={icon.pascal_name}
+                  iconName={iconName}
-                      onClick={() => setIconName(icon.pascal_name)}
+                  setIconName={setIconName}
-                      className={`cursor-pointer btn p-1 box-border bg-base-100 border-none aspect-square ${
+                />
-                        icon.pascal_name === iconName
-                          ? "outline outline-1 outline-primary"
-                          : ""
-                      }`}
-                    >
-                      <IconComponent size={32} weight={weight} color={color} />
-                    </div>
-                  );
-                })}
               </div>
             </div>
           </div>

public/locales/en/common.json

@@ -372,5 +372,12 @@
   "demo_desc": "This is only a demo instance of Linkwarden and uploads are disabled.",
   "demo_desc_2": "If you want to try out the full version, you can sign up for a free trial at:",
   "demo_button": "Login as demo user",
-  "notes": "Notes"
+  "notes": "Notes",
+  "regular": "Regular",
+  "thin": "Thin",
+  "bold": "Bold",
+  "fill": "Fill",
+  "duotone": "Duotone",
+  "light_icon": "Light",
+  "search": "Search"
 }