improved iconPicker component + other improvements

components/Icon.tsx

@@ -0,0 +1,16 @@
+import React, { forwardRef } from "react";
+import * as Icons from "@phosphor-icons/react";
+
+type Props = {
+  icon: string;
+} & Icons.IconProps;
+
+const Icon = forwardRef<SVGSVGElement, Props>(({ icon, ...rest }) => {
+  const IconComponent: any = Icons[icon as keyof typeof Icons];
+
+  if (!IconComponent) {
+    return <></>;
+  } else return <IconComponent {...rest} />;
+});
+
+export default Icon;

components/IconPicker.tsx

@@ -2,6 +2,9 @@ import { icons } from "@/lib/client/icons";
 import React, { useMemo, useState } from "react";
 import Fuse from "fuse.js";
 import TextInput from "./TextInput";
+import Popover from "./Popover";
+import { HexColorPicker } from "react-colorful";
+import Icon from "./Icon";
 
 const fuse = new Fuse(icons, {
   keys: [{ name: "name", weight: 4 }, "tags", "categories"],
@@ -9,9 +12,29 @@ const fuse = new Fuse(icons, {
   useExtendedSearch: true,
 });
 
-type Props = {};
+type Props = {
+  onClose: Function;
+  alignment?: "left" | "right" | "bottom" | "top";
+  color: string;
+  setColor: Function;
+  iconName: string;
+  setIconName: Function;
+  weight: "light" | "regular" | "bold" | "fill" | "duotone";
+  setWeight: Function;
+  className?: string;
+};
 
-const IconPicker = (props: Props) => {
+const IconPicker = ({
+  onClose,
+  alignment,
+  color,
+  setColor,
+  iconName,
+  setIconName,
+  weight,
+  setWeight,
+  className,
+}: Props) => {
   const [query, setQuery] = useState("");
 
   const filteredQueryResultsSelector = useMemo(() => {
@@ -22,24 +45,67 @@ const IconPicker = (props: Props) => {
   }, [query]);
 
   return (
-    <div className="w-fit">
+    <Popover
-      <TextInput
+      onClose={onClose}
-        className="p-2 rounded w-full mb-5"
+      className={
-        placeholder="Search icons"
+        className +
-        value={query}
+        " bg-base-200 border border-neutral-content p-3 h-72 w-72 overflow-y-auto rounded-lg"
-        onChange={(e) => setQuery(e.target.value)}
+      }
-      />
+    >
-      <div className="grid grid-cols-6 gap-5 w-fit">
+      <div>
-        {filteredQueryResultsSelector.map((icon) => {
+        <div className="mb-3 flex gap-3">
-          const IconComponent = icon.Icon;
+          <div className="w-full flex flex-col justify-between">
-          return (
+            <Icon
-            <div key={icon.name} onClick={() => console.log(icon.name)}>
+              icon={iconName}
-              <IconComponent size={32} weight="fill" />
+              size={80}
-            </div>
+              weight={weight as any}
-          );
+              color={color}
-        })}
+              className="mx-auto"
+            />
+
+            <select
+              className="border border-neutral-content bg-base-100 focus:outline-none focus:border-primary duration-100 w-full rounded-[0.375rem] h-7"
+              value={weight}
+              onChange={(e) => setWeight(e.target.value)}
+            >
+              <option value="regular">Regular</option>
+              <option value="thin">Thin</option>
+              <option value="light">Light</option>
+              <option value="bold">Bold</option>
+              <option value="fill">Fill</option>
+              <option value="duotone">Duotone</option>
+            </select>
+          </div>
+          <HexColorPicker color={color} onChange={(e) => setColor(e)} />
+        </div>
+
+        <TextInput
+          className="p-2 rounded w-full mb-3 h-7 text-sm"
+          placeholder="Search icons"
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+        />
+
+        <div className="grid grid-cols-5 gap-1 w-full">
+          {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 ${
+                  icon.pascal_name === iconName
+                    ? "outline outline-1 outline-primary"
+                    : ""
+                }`}
+              >
+                <IconComponent size={32} weight={weight} color={color} />
+              </div>
+            );
+          })}
+        </div>
       </div>
-    </div>
+    </Popover>
   );
 };
 

components/LinkViews/LinkComponents/LinkActions.tsx

@@ -105,24 +105,23 @@ export default function LinkActions({
               alignToTop ? "" : "translate-y-10"
             }`}
           >
-            {permissions === true ||
+            {(permissions === true || permissions?.canUpdate) && (
-              (permissions?.canUpdate && (
+              <li>
-                <li>
+                <div
-                  <div
+                  role="button"
-                    role="button"
+                  tabIndex={0}
-                    tabIndex={0}
+                  onClick={() => {
-                    onClick={() => {
+                    (document?.activeElement as HTMLElement)?.blur();
-                      (document?.activeElement as HTMLElement)?.blur();
+                    pinLink();
-                      pinLink();
+                  }}
-                    }}
+                  className="whitespace-nowrap"
-                    className="whitespace-nowrap"
+                >
-                  >
+                  {link?.pinnedBy && link.pinnedBy[0]
-                    {link?.pinnedBy && link.pinnedBy[0]
+                    ? t("unpin")
-                      ? t("unpin")
+                    : t("pin_to_dashboard")}
-                      : t("pin_to_dashboard")}
+                </div>
-                  </div>
+              </li>
-                </li>
+            )}
-              ))}
             <li>
               <div
                 role="button"
@@ -173,8 +172,9 @@ export default function LinkActions({
                   tabIndex={0}
                   onClick={async (e) => {
                     (document?.activeElement as HTMLElement)?.blur();
+                    console.log(e.shiftKey);
                     e.shiftKey
-                      ? async () => {
+                      ? (async () => {
                           const load = toast.loading(t("deleting"));
 
                           await deleteLink.mutateAsync(link.id as number, {
@@ -188,7 +188,7 @@ export default function LinkActions({
                               }
                             },
                           });
-                        }
+                        })()
                       : setDeleteLinkModal(true);
                   }}
                   className="whitespace-nowrap"

components/ModalContent/EditCollectionModal.tsx

@@ -6,6 +6,8 @@ import Modal from "../Modal";
 import { useTranslation } from "next-i18next";
 import { useUpdateCollection } from "@/hooks/store/collections";
 import toast from "react-hot-toast";
+import IconPicker from "../IconPicker";
+import Icon from "../Icon";
 
 type Props = {
   onClose: Function;
@@ -20,6 +22,7 @@ export default function EditCollectionModal({
   const [collection, setCollection] =
     useState<CollectionIncludingMembersAndLinkCount>(activeCollection);
 
+  const [iconPicker, setIconPicker] = useState(false);
   const [submitLoader, setSubmitLoader] = useState(false);
   const updateCollection = useUpdateCollection();
 
@@ -71,17 +74,32 @@ export default function EditCollectionModal({
               <div>
                 <p className="w-full mb-2">{t("color")}</p>
                 <div className="color-picker flex justify-between items-center">
-                  <HexColorPicker
+                  <div className="flex flex-col gap-2 items-center w-32 relative">
-                    color={collection.color}
+                    <Icon
-                    onChange={(color) =>
+                      icon={collection.icon as string}
-                      setCollection({ ...collection, color })
+                      size={80}
-                    }
+                      weight={collection.iconWeight as any}
-                  />
+                      color={collection.color as string}
-                  <div className="flex flex-col gap-2 items-center w-32">
+                      onClick={() => setIconPicker(true)}
-                    <i
+                    />
-                      className="bi-folder-fill text-5xl"
+                    {iconPicker && (
-                      style={{ color: collection.color }}
+                      <IconPicker
-                    ></i>
+                        onClose={() => setIconPicker(false)}
+                        className="top-20"
+                        color={collection.color as string}
+                        setColor={(color: string) =>
+                          setCollection({ ...collection, color })
+                        }
+                        weight={collection.iconWeight as any}
+                        setWeight={(iconWeight: string) =>
+                          setCollection({ ...collection, iconWeight })
+                        }
+                        iconName={collection.icon as string}
+                        setIconName={(icon: string) =>
+                          setCollection({ ...collection, icon })
+                        }
+                      />
+                    )}
                     <div
                       className="btn btn-ghost btn-xs"
                       onClick={() =>

components/ModalContent/LinkDetailModal.tsx

@@ -120,25 +120,24 @@ export default function LinkDetailModal({ onClose, onEdit, link }: Props) {
       <div className="sm:m-auto p-10 w-full max-w-xl">
         <LinkDetails link={link} />
 
-        {permissions === true ||
+        {(permissions === true || permissions?.canUpdate) && (
-          (permissions?.canUpdate && (
+          <>
-            <>
+            <br />
-              <br />
+            <br />
-              <br />
 
-              <div className="mx-auto text-center">
+            <div className="mx-auto text-center">
-                <div
+              <div
-                  className="btn btn-sm btn-ghost"
+                className="btn btn-sm btn-ghost"
-                  onClick={() => {
+                onClick={() => {
-                    onEdit();
+                  onEdit();
-                    onClose();
+                  onClose();
-                  }}
+                }}
-                >
+              >
-                  {t("edit_link")}
+                {t("edit_link")}
-                </div>
               </div>
-            </>
+            </div>
-          ))}
+          </>
+        )}
       </div>
     </Drawer>
   );

components/ModalContent/NewCollectionModal.tsx

@@ -88,7 +88,7 @@ export default function NewCollectionModal({ onClose, parent }: Props) {
                 <p className="w-full mb-2">{t("color")}</p>
                 <div className="color-picker flex justify-between items-center">
                   <HexColorPicker
-                    color={collection.color}
+                    color={collection.color as string}
                     onChange={(color) =>
                       setCollection({ ...collection, color })
                     }
@@ -96,7 +96,7 @@ export default function NewCollectionModal({ onClose, parent }: Props) {
                   <div className="flex flex-col gap-2 items-center w-32">
                     <i
                       className={"bi-folder-fill text-5xl"}
-                      style={{ color: collection.color }}
+                      style={{ color: collection.color as string }}
                     ></i>
                     <div
                       className="btn btn-ghost btn-xs"

components/ModalContent/NewLinkModal.tsx

@@ -31,6 +31,9 @@ export default function NewLinkModal({ onClose }: Props) {
     readable: "",
     monolith: "",
     textContent: "",
+    icon: "",
+    iconWeight: "",
+    color: "",
     collection: {
       name: "",
       ownerId: data?.user.id as number,

components/ModalContent/UploadFileModal.tsx

@@ -35,6 +35,9 @@ export default function UploadFileModal({ onClose }: Props) {
     readable: "",
     monolith: "",
     textContent: "",
+    icon: "",
+    iconWeight: "",
+    color: "",
     collection: {
       name: "",
       ownerId: data?.user.id as number,

components/Popover.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import ClickAwayHandler from "./ClickAwayHandler";
+
+type Props = {
+  children: React.ReactNode;
+  onClose: Function;
+  className?: string;
+};
+
+const Popover = ({ children, className, onClose }: Props) => {
+  return (
+    <ClickAwayHandler
+      onClickOutside={() => onClose()}
+      className={`absolute z-50 ${className || ""}`}
+    >
+      {children}
+    </ClickAwayHandler>
+  );
+};
+
+export default Popover;

components/ReadableView.tsx

@@ -205,7 +205,7 @@ export default function ReadableView({ link }: Props) {
             >
               <i
                 className="bi-folder-fill drop-shadow text-2xl"
-                style={{ color: link?.collection.color }}
+                style={{ color: link?.collection.color as string }}
               ></i>
               <p
                 title={link?.collection.name}

pages/collections/[id].tsx

@@ -112,7 +112,7 @@ export default function Index() {
             <div className="flex items-center gap-2">
               <i
                 className="bi-folder-fill text-3xl drop-shadow"
-                style={{ color: activeCollection?.color }}
+                style={{ color: activeCollection?.color as string }}
               ></i>
 
               <p className="sm:text-3xl text-2xl capitalize w-full py-1 break-words hyphens-auto font-thin">

prisma/migrations/20240819003838_add_icon_related_fields_to_link_and_collection_model/migration.sql

@@ -0,0 +1,8 @@
+-- AlterTable
+ALTER TABLE "Collection" ADD COLUMN     "icon" TEXT,
+ADD COLUMN     "iconWeight" TEXT;
+
+-- AlterTable
+ALTER TABLE "Link" ADD COLUMN     "color" TEXT,
+ADD COLUMN     "icon" TEXT,
+ADD COLUMN     "iconWeight" TEXT;

prisma/migrations/20240819005010_remove_collection_model_default_color/migration.sql

@@ -0,0 +1,3 @@
+-- AlterTable
+ALTER TABLE "Collection" ALTER COLUMN "color" DROP NOT NULL,
+ALTER COLUMN "color" DROP DEFAULT;

prisma/schema.prisma

@@ -94,7 +94,9 @@ model Collection {
   id              Int                   @id @default(autoincrement())
   name            String
   description     String                @default("")
-  color           String                @default("#0ea5e9")
+  icon            String?
+  iconWeight      String?
+  color           String?
   parentId        Int?
   parent          Collection?           @relation("SubCollections", fields: [parentId], references: [id])
   subCollections  Collection[]          @relation("SubCollections")
@@ -133,6 +135,9 @@ model Link {
   collection    Collection @relation(fields: [collectionId], references: [id])
   collectionId  Int
   tags          Tag[]
+  icon          String?
+  iconWeight    String?
+  color         String?
   url           String?
   textContent   String?
   preview       String?

styles/globals.css

@@ -36,6 +36,14 @@
   scrollbar-width: none;
 }
 
+.hide-color-picker {
+  opacity: 0;
+  display: block;
+  width: 32px;
+  height: 32px;
+  border: none;
+}
+
 .hyphens {
   hyphens: auto;
 }