Merge branch 'dev' into main

components/CollectionCard.tsx

@@ -1,5 +1,8 @@
 import Link from "next/link";
-import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
+import {
+  AccountSettings,
+  CollectionIncludingMembersAndLinkCount,
+} from "@/types/global";
 import React, { useEffect, useState } from "react";
 import ProfilePhoto from "./ProfilePhoto";
 import usePermissions from "@/hooks/usePermissions";
@@ -12,12 +15,11 @@ import { dropdownTriggerer } from "@/lib/client/utils";
 import { useTranslation } from "next-i18next";
 import { useUser } from "@/hooks/store/user";
 
-type Props = {
+export default function CollectionCard({
+  collection,
+}: {
   collection: CollectionIncludingMembersAndLinkCount;
-  className?: string;
-};
-
-export default function CollectionCard({ collection, className }: Props) {
+}) {
   const { t } = useTranslation();
   const { settings } = useLocalSettingsStore();
   const { data: user = {} } = useUser();
@@ -33,15 +35,9 @@ export default function CollectionCard({ collection, className }: Props) {
 
   const permissions = usePermissions(collection.id as number);
 
-  const [collectionOwner, setCollectionOwner] = useState({
-    id: null as unknown as number,
-    name: "",
-    username: "",
-    image: "",
-    archiveAsScreenshot: undefined as unknown as boolean,
-    archiveAsMonolith: undefined as unknown as boolean,
-    archiveAsPDF: undefined as unknown as boolean,
-  });
+  const [collectionOwner, setCollectionOwner] = useState<
+    Partial<AccountSettings>
+  >({});
 
   useEffect(() => {
     const fetchOwner = async () => {
@@ -132,12 +128,12 @@ export default function CollectionCard({ collection, className }: Props) {
         className="flex items-center absolute bottom-3 left-3 z-10 btn px-2 btn-ghost rounded-full"
         onClick={() => setEditCollectionSharingModal(true)}
       >
-        {collectionOwner.id ? (
+        {collectionOwner.id && (
           <ProfilePhoto
             src={collectionOwner.image || undefined}
             name={collectionOwner.name}
           />
-        ) : undefined}
+        )}
         {collection.members
           .sort((a, b) => (a.userId as number) - (b.userId as number))
           .map((e, i) => {
@@ -151,13 +147,13 @@ export default function CollectionCard({ collection, className }: Props) {
             );
           })
           .slice(0, 3)}
-        {collection.members.length - 3 > 0 ? (
+        {collection.members.length - 3 > 0 && (
           <div className={`avatar drop-shadow-md placeholder -ml-3`}>
             <div className="bg-base-100 text-neutral rounded-full w-8 h-8 ring-2 ring-neutral-content">
               <span>+{collection.members.length - 3}</span>
             </div>
           </div>
-        ) : null}
+        )}
       </div>
       <Link
         href={`/collections/${collection.id}`}
@@ -181,12 +177,12 @@ export default function CollectionCard({ collection, className }: Props) {
           <div className="flex justify-end items-center">
             <div className="text-right">
               <div className="font-bold text-sm flex justify-end gap-1 items-center">
-                {collection.isPublic ? (
+                {collection.isPublic && (
                   <i
                     className="bi-globe2 drop-shadow text-neutral"
                     title="This collection is being shared publicly."
                   ></i>
-                ) : undefined}
+                )}
                 <i
                   className="bi-link-45deg text-lg text-neutral"
                   title="This collection is being shared publicly."
@@ -206,24 +202,24 @@ export default function CollectionCard({ collection, className }: Props) {
           </div>
         </div>
       </Link>
-      {editCollectionModal ? (
+      {editCollectionModal && (
         <EditCollectionModal
           onClose={() => setEditCollectionModal(false)}
           activeCollection={collection}
         />
-      ) : undefined}
-      {editCollectionSharingModal ? (
+      )}
+      {editCollectionSharingModal && (
         <EditCollectionSharingModal
           onClose={() => setEditCollectionSharingModal(false)}
           activeCollection={collection}
         />
-      ) : undefined}
-      {deleteCollectionModal ? (
+      )}
+      {deleteCollectionModal && (
         <DeleteCollectionModal
           onClose={() => setDeleteCollectionModal(false)}
           activeCollection={collection}
         />
-      ) : undefined}
+      )}
     </div>
   );
 }

components/CollectionListing.tsx

@@ -17,6 +17,8 @@ import toast from "react-hot-toast";
 import { useTranslation } from "next-i18next";
 import { useCollections, useUpdateCollection } from "@/hooks/store/collections";
 import { useUpdateUser, useUser } from "@/hooks/store/user";
+import Icon from "./Icon";
+import { IconWeight } from "@phosphor-icons/react";
 
 interface ExtendedTreeItem extends TreeItem {
   data: Collection;
@@ -43,6 +45,7 @@ const CollectionListing = () => {
       return buildTreeFromCollections(
         collections,
         router,
+        tree,
         user.collectionOrder
       );
     } else return undefined;
@@ -256,7 +259,7 @@ const renderItem = (
             : "hover:bg-neutral/20"
         } duration-100 flex gap-1 items-center pr-2 pl-1 rounded-md`}
       >
-        {Icon(item as ExtendedTreeItem, onExpand, onCollapse)}
+        {Dropdown(item as ExtendedTreeItem, onExpand, onCollapse)}
 
         <Link
           href={`/collections/${collection.id}`}
@@ -266,18 +269,29 @@ const renderItem = (
           <div
             className={`py-1 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize`}
           >
-            <i
-              className="bi-folder-fill text-2xl drop-shadow"
-              style={{ color: collection.color }}
-            ></i>
+            {collection.icon ? (
+              <Icon
+                icon={collection.icon}
+                size={30}
+                weight={(collection.iconWeight || "regular") as IconWeight}
+                color={collection.color}
+                className="-mr-[0.15rem]"
+              />
+            ) : (
+              <i
+                className="bi-folder-fill text-2xl"
+                style={{ color: collection.color }}
+              ></i>
+            )}
+
             <p className="truncate w-full">{collection.name}</p>
 
-            {collection.isPublic ? (
+            {collection.isPublic && (
               <i
                 className="bi-globe2 text-sm text-black/50 dark:text-white/50 drop-shadow"
                 title="This collection is being shared publicly."
               ></i>
-            ) : undefined}
+            )}
             <div className="drop-shadow text-neutral text-xs">
               {collection._count?.links}
             </div>
@@ -288,7 +302,7 @@ const renderItem = (
   );
 };
 
-const Icon = (
+const Dropdown = (
   item: ExtendedTreeItem,
   onExpand: (id: ItemId) => void,
   onCollapse: (id: ItemId) => void
@@ -311,6 +325,7 @@ const Icon = (
 const buildTreeFromCollections = (
   collections: CollectionIncludingMembersAndLinkCount[],
   router: ReturnType<typeof useRouter>,
+  tree?: TreeData,
   order?: number[]
 ): TreeData => {
   if (order) {
@@ -325,13 +340,15 @@ const buildTreeFromCollections = (
         id: collection.id,
         children: [],
         hasChildren: false,
-        isExpanded: false,
+        isExpanded: tree?.items[collection.id as number]?.isExpanded || false,
         data: {
           id: collection.id,
           parentId: collection.parentId,
           name: collection.name,
           description: collection.description,
           color: collection.color,
+          icon: collection.icon,
+          iconWeight: collection.iconWeight,
           isPublic: collection.isPublic,
           ownerId: collection.ownerId,
           createdAt: collection.createdAt,

components/CopyButton.tsx

@@ -0,0 +1,32 @@
+import React, { useState } from "react";
+
+type Props = {
+  text: string;
+};
+
+const CopyButton: React.FC<Props> = ({ text }) => {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      setTimeout(() => {
+        setCopied(false);
+      }, 1000);
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
+  return (
+    <div
+      className={`text-xl text-neutral btn btn-sm btn-square btn-ghost ${
+        copied ? "bi-check2 text-success" : "bi-copy"
+      }`}
+      onClick={handleCopy}
+    ></div>
+  );
+};
+
+export default CopyButton;

components/DashboardItem.tsx

@@ -14,7 +14,7 @@ export default function dashboardItem({
       </div>
       <div className="ml-4 flex flex-col justify-center">
         <p className="text-neutral text-xs tracking-wider">{name}</p>
-        <p className="font-thin text-5xl text-primary mt-0.5">{value}</p>
+        <p className="font-thin text-5xl text-primary mt-0.5">{value || 0}</p>
       </div>
     </div>
   );

components/Drawer.tsx

@@ -0,0 +1,88 @@
+import React, { ReactNode, useEffect } from "react";
+import ClickAwayHandler from "@/components/ClickAwayHandler";
+import { Drawer as D } from "vaul";
+
+type Props = {
+  toggleDrawer: Function;
+  children: ReactNode;
+  className?: string;
+  dismissible?: boolean;
+};
+
+export default function Drawer({
+  toggleDrawer,
+  className,
+  children,
+  dismissible = true,
+}: Props) {
+  const [drawerIsOpen, setDrawerIsOpen] = React.useState(true);
+
+  useEffect(() => {
+    if (window.innerWidth >= 640) {
+      document.body.style.overflow = "hidden";
+      document.body.style.position = "relative";
+      return () => {
+        document.body.style.overflow = "auto";
+        document.body.style.position = "";
+      };
+    }
+  }, []);
+
+  if (window.innerWidth < 640) {
+    return (
+      <D.Root
+        open={drawerIsOpen}
+        onClose={() => dismissible && setTimeout(() => toggleDrawer(), 350)}
+        dismissible={dismissible}
+      >
+        <D.Portal>
+          <D.Overlay className="fixed inset-0 bg-black/40" />
+          <ClickAwayHandler
+            onClickOutside={() => dismissible && setDrawerIsOpen(false)}
+          >
+            <D.Content className="flex flex-col rounded-t-2xl mt-24 fixed bottom-0 left-0 right-0 z-30 h-[90%]">
+              <div
+                className="p-4 bg-base-100 rounded-t-2xl flex-1 border-neutral-content border-t overflow-y-auto"
+                data-testid="mobile-modal-container"
+              >
+                <div
+                  className="mx-auto w-12 h-1.5 flex-shrink-0 rounded-full bg-neutral mb-5 relative z-20"
+                  data-testid="mobile-modal-slider"
+                />
+                {children}
+              </div>
+            </D.Content>
+          </ClickAwayHandler>
+        </D.Portal>
+      </D.Root>
+    );
+  } else {
+    return (
+      <D.Root
+        open={drawerIsOpen}
+        onClose={() => dismissible && setTimeout(() => toggleDrawer(), 350)}
+        dismissible={dismissible}
+        direction="right"
+      >
+        <D.Portal>
+          <D.Overlay className="fixed inset-0 bg-black/10 z-20" />
+          <ClickAwayHandler
+            onClickOutside={() => dismissible && setDrawerIsOpen(false)}
+            className="z-30"
+          >
+            <D.Content className="bg-white flex flex-col h-full w-2/5 min-w-[30rem] mt-24 fixed bottom-0 right-0 z-40 !select-auto">
+              <div
+                className={
+                  "p-4 bg-base-100 flex-1 border-neutral-content border-l overflow-y-auto " +
+                  className
+                }
+              >
+                {children}
+              </div>
+            </D.Content>
+          </ClickAwayHandler>
+        </D.Portal>
+      </D.Root>
+    );
+  }
+}

components/Dropdown.tsx

@@ -60,47 +60,49 @@ export default function Dropdown({
     }
   }, [points, dropdownHeight]);
 
-  return !points || pos ? (
-    <ClickAwayHandler
-      onMount={(e) => {
-        setDropdownHeight(e.height);
-        setDropdownWidth(e.width);
-      }}
-      style={
-        points
-          ? {
-              position: "fixed",
-              top: `${pos?.y}px`,
-              left: `${pos?.x}px`,
-            }
-          : undefined
-      }
-      onClickOutside={onClickOutside}
-      className={`${
-        className || ""
-      } py-1 shadow-md border border-neutral-content bg-base-200 rounded-md flex flex-col z-20`}
-    >
-      {items.map((e, i) => {
-        const inner = e && (
-          <div className="cursor-pointer rounded-md">
-            <div className="flex items-center gap-2 py-1 px-2 hover:bg-base-100 duration-100">
-              <p className="select-none">{e.name}</p>
+  return (
+    (!points || pos) && (
+      <ClickAwayHandler
+        onMount={(e) => {
+          setDropdownHeight(e.height);
+          setDropdownWidth(e.width);
+        }}
+        style={
+          points
+            ? {
+                position: "fixed",
+                top: `${pos?.y}px`,
+                left: `${pos?.x}px`,
+              }
+            : undefined
+        }
+        onClickOutside={onClickOutside}
+        className={`${
+          className || ""
+        } py-1 shadow-md border border-neutral-content bg-base-200 rounded-md flex flex-col z-20`}
+      >
+        {items.map((e, i) => {
+          const inner = e && (
+            <div className="cursor-pointer rounded-md">
+              <div className="flex items-center gap-2 py-1 px-2 hover:bg-base-100 duration-100">
+                <p className="select-none">{e.name}</p>
+              </div>
             </div>
-          </div>
-        );
+          );
 
-        return e && e.href ? (
-          <Link key={i} href={e.href}>
-            {inner}
-          </Link>
-        ) : (
-          e && (
-            <div key={i} onClick={e.onClick}>
+          return e && e.href ? (
+            <Link key={i} href={e.href}>
               {inner}
-            </div>
-          )
-        );
-      })}
-    </ClickAwayHandler>
-  ) : null;
+            </Link>
+          ) : (
+            e && (
+              <div key={i} onClick={e.onClick}>
+                {inner}
+              </div>
+            )
+          );
+        })}
+      </ClickAwayHandler>
+    )
+  );
 }

components/Icon.tsx

@@ -0,0 +1,18 @@
+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 }, ref) => {
+  const IconComponent: any = Icons[icon as keyof typeof Icons];
+
+  if (!IconComponent) {
+    return null;
+  } else return <IconComponent ref={ref} {...rest} />;
+});
+
+Icon.displayName = "Icon";
+
+export default Icon;

components/IconGrid.tsx

@@ -0,0 +1,49 @@
+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

@@ -0,0 +1,83 @@
+import React, { useState } from "react";
+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";
+import IconPopover from "./IconPopover";
+import clsx from "clsx";
+
+type Props = {
+  alignment?: string;
+  color: string;
+  setColor: Function;
+  iconName?: string;
+  setIconName: Function;
+  weight: "light" | "regular" | "bold" | "fill" | "duotone" | "thin";
+  setWeight: Function;
+  hideDefaultIcon?: boolean;
+  reset: Function;
+  className?: string;
+};
+
+const IconPicker = ({
+  alignment,
+  color,
+  setColor,
+  iconName,
+  setIconName,
+  weight,
+  setWeight,
+  hideDefaultIcon,
+  className,
+  reset,
+}: Props) => {
+  const { t } = useTranslation();
+  const [iconPicker, setIconPicker] = useState(false);
+
+  return (
+    <div className="relative">
+      <div
+        onClick={() => setIconPicker(!iconPicker)}
+        className="btn btn-square w-20 h-20"
+      >
+        {iconName ? (
+          <Icon
+            icon={iconName}
+            size={60}
+            weight={(weight || "regular") as IconWeight}
+            color={color || "#0ea5e9"}
+          />
+        ) : !iconName && hideDefaultIcon ? (
+          <p className="p-1">{t("set_custom_icon")}</p>
+        ) : (
+          <i
+            className="bi-folder-fill text-6xl"
+            style={{ color: color || "#0ea5e9" }}
+          ></i>
+        )}
+      </div>
+      {iconPicker && (
+        <IconPopover
+          alignment={alignment}
+          color={color}
+          setColor={setColor}
+          iconName={iconName}
+          setIconName={setIconName}
+          weight={weight}
+          setWeight={setWeight}
+          reset={reset}
+          onClose={() => setIconPicker(false)}
+          className={clsx(
+            className,
+            alignment || "lg:-translate-x-1/3 top-20 left-0"
+          )}
+        />
+      )}
+    </div>
+  );
+};
+
+export default IconPicker;

components/IconPopover.tsx

@@ -0,0 +1,142 @@
+import React, { useState } from "react";
+import TextInput from "./TextInput";
+import Popover from "./Popover";
+import { HexColorPicker } from "react-colorful";
+import { useTranslation } from "next-i18next";
+import IconGrid from "./IconGrid";
+import clsx from "clsx";
+
+type Props = {
+  alignment?: string;
+  color: string;
+  setColor: Function;
+  iconName?: string;
+  setIconName: Function;
+  weight: "light" | "regular" | "bold" | "fill" | "duotone" | "thin";
+  setWeight: Function;
+  reset: Function;
+  className?: string;
+  onClose: Function;
+};
+
+const IconPopover = ({
+  alignment,
+  color,
+  setColor,
+  iconName,
+  setIconName,
+  weight,
+  setWeight,
+  reset,
+  className,
+  onClose,
+}: Props) => {
+  const { t } = useTranslation();
+  const [query, setQuery] = useState("");
+
+  return (
+    <Popover
+      onClose={() => onClose()}
+      className={clsx(
+        className,
+        "fade-in bg-base-200 border border-neutral-content p-2 w-[22.5rem] rounded-lg shadow-md"
+      )}
+    >
+      <div className="flex gap-2 h-full w-full">
+        <div className="flex flex-col gap-2 w-full">
+          <TextInput
+            className="p-2 rounded w-full h-7 text-sm"
+            placeholder={t("search")}
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+          />
+
+          <div className="grid grid-cols-6 gap-1 w-full overflow-y-auto h-44 border border-neutral-content bg-base-100 rounded-md p-2">
+            <IconGrid
+              query={query}
+              color={color}
+              weight={weight}
+              iconName={iconName}
+              setIconName={setIconName}
+            />
+          </div>
+
+          <div className="flex gap-2 color-picker w-full">
+            <HexColorPicker color={color} onChange={(e) => setColor(e)} />
+
+            <div className="grid grid-cols-2 gap-1 text-sm">
+              <label className="flex items-center cursor-pointer">
+                <input
+                  type="radio"
+                  className="radio radio-primary mr-2"
+                  value="regular"
+                  checked={weight === "regular"}
+                  onChange={() => setWeight("regular")}
+                />
+                {t("regular")}
+              </label>
+              <label className="flex items-center cursor-pointer">
+                <input
+                  type="radio"
+                  className="radio radio-primary mr-2"
+                  value="thin"
+                  checked={weight === "thin"}
+                  onChange={() => setWeight("thin")}
+                />
+                {t("thin")}
+              </label>
+              <label className="flex items-center cursor-pointer">
+                <input
+                  type="radio"
+                  className="radio radio-primary mr-2"
+                  value="light"
+                  checked={weight === "light"}
+                  onChange={() => setWeight("light")}
+                />
+                {t("light_icon")}
+              </label>
+              <label className="flex items-center cursor-pointer">
+                <input
+                  type="radio"
+                  className="radio radio-primary mr-2"
+                  value="bold"
+                  checked={weight === "bold"}
+                  onChange={() => setWeight("bold")}
+                />
+                {t("bold")}
+              </label>
+              <label className="flex items-center cursor-pointer">
+                <input
+                  type="radio"
+                  className="radio radio-primary mr-2"
+                  value="fill"
+                  checked={weight === "fill"}
+                  onChange={() => setWeight("fill")}
+                />
+                {t("fill")}
+              </label>
+              <label className="flex items-center cursor-pointer">
+                <input
+                  type="radio"
+                  className="radio radio-primary mr-2"
+                  value="duotone"
+                  checked={weight === "duotone"}
+                  onChange={() => setWeight("duotone")}
+                />
+                {t("duotone")}
+              </label>
+            </div>
+          </div>
+          <div
+            className="btn btn-ghost btn-sm mt-2 w-fit mx-auto"
+            onClick={reset as React.MouseEventHandler<HTMLDivElement>}
+          >
+            {t("reset_defaults")}
+          </div>
+        </div>
+      </div>
+    </Popover>
+  );
+};
+
+export default IconPopover;

components/InputSelect/CollectionSelection.tsx

@@ -16,6 +16,8 @@ type Props = {
       }
     | undefined;
   creatable?: boolean;
+  autoFocus?: boolean;
+  onBlur?: any;
 };
 
 export default function CollectionSelection({
@@ -23,6 +25,8 @@ export default function CollectionSelection({
   defaultValue,
   showDefaultValue = true,
   creatable = true,
+  autoFocus,
+  onBlur,
 }: Props) {
   const { data: collections = [] } = useCollections();
 
@@ -76,7 +80,7 @@ export default function CollectionSelection({
     return (
       <div
         {...innerProps}
-        className="px-2 py-2 last:border-0 border-b border-neutral-content hover:bg-neutral-content cursor-pointer"
+        className="px-2 py-2 last:border-0 border-b border-neutral-content hover:bg-neutral-content duration-100 cursor-pointer"
       >
         <div className="flex w-full justify-between items-center">
           <span>{data.label}</span>
@@ -104,6 +108,8 @@ export default function CollectionSelection({
         onChange={onChange}
         options={options}
         styles={styles}
+        autoFocus={autoFocus}
+        onBlur={onBlur}
         defaultValue={showDefaultValue ? defaultValue : null}
         components={{
           Option: customOption,
@@ -120,7 +126,9 @@ export default function CollectionSelection({
         onChange={onChange}
         options={options}
         styles={styles}
+        autoFocus={autoFocus}
         defaultValue={showDefaultValue ? defaultValue : null}
+        onBlur={onBlur}
         components={{
           Option: customOption,
         }}

components/InputSelect/TagSelection.tsx

@@ -10,9 +10,16 @@ type Props = {
     value: number;
     label: string;
   }[];
+  autoFocus?: boolean;
+  onBlur?: any;
 };
 
-export default function TagSelection({ onChange, defaultValue }: Props) {
+export default function TagSelection({
+  onChange,
+  defaultValue,
+  autoFocus,
+  onBlur,
+}: Props) {
   const { data: tags = [] } = useTags();
 
   const [options, setOptions] = useState<Options[]>([]);
@@ -34,8 +41,9 @@ export default function TagSelection({ onChange, defaultValue }: Props) {
       options={options}
       styles={styles}
       defaultValue={defaultValue}
-      // menuPosition="fixed"
       isMulti
+      autoFocus={autoFocus}
+      onBlur={onBlur}
     />
   );
 }

components/InputSelect/styles.ts

@@ -14,7 +14,7 @@ export const styles: StylesConfig = {
         ? "oklch(var(--p))"
         : "oklch(var(--nc))",
     },
-    transition: "all 50ms",
+    transition: "all 100ms",
   }),
   control: (styles, state) => ({
     ...styles,
@@ -50,19 +50,28 @@ export const styles: StylesConfig = {
   multiValue: (styles) => {
     return {
       ...styles,
-      backgroundColor: "#0ea5e9",
-      color: "white",
+      backgroundColor: "oklch(var(--b2))",
+      color: "oklch(var(--bc))",
+      display: "flex",
+      alignItems: "center",
+      gap: "0.1rem",
+      marginRight: "0.4rem",
     };
   },
   multiValueLabel: (styles) => ({
     ...styles,
-    color: "white",
+    color: "oklch(var(--bc))",
   }),
   multiValueRemove: (styles) => ({
     ...styles,
+    height: "1.2rem",
+    width: "1.2rem",
+    borderRadius: "100px",
+    transition: "all 100ms",
+    color: "oklch(var(--w))",
     ":hover": {
-      color: "white",
-      backgroundColor: "#38bdf8",
+      color: "red",
+      backgroundColor: "oklch(var(--nc))",
     },
   }),
   menuPortal: (base) => ({ ...base, zIndex: 9999 }),

components/LinkDetails.tsx

@@ -0,0 +1,663 @@
+import React, { useEffect, useState } from "react";
+import {
+  LinkIncludingShortenedCollectionAndTags,
+  ArchivedFormat,
+} from "@/types/global";
+import Link from "next/link";
+import {
+  pdfAvailable,
+  readabilityAvailable,
+  monolithAvailable,
+  screenshotAvailable,
+  previewAvailable,
+} from "@/lib/shared/getArchiveValidity";
+import PreservedFormatRow from "@/components/PreserverdFormatRow";
+import getPublicUserData from "@/lib/client/getPublicUserData";
+import { useTranslation } from "next-i18next";
+import { BeatLoader } from "react-spinners";
+import { useUser } from "@/hooks/store/user";
+import {
+  useGetLink,
+  useUpdateLink,
+  useUpdatePreview,
+} from "@/hooks/store/links";
+import LinkIcon from "./LinkViews/LinkComponents/LinkIcon";
+import CopyButton from "./CopyButton";
+import { useRouter } from "next/router";
+import Icon from "./Icon";
+import { IconWeight } from "@phosphor-icons/react";
+import Image from "next/image";
+import clsx from "clsx";
+import toast from "react-hot-toast";
+import CollectionSelection from "./InputSelect/CollectionSelection";
+import TagSelection from "./InputSelect/TagSelection";
+import unescapeString from "@/lib/client/unescapeString";
+import IconPopover from "./IconPopover";
+import TextInput from "./TextInput";
+import usePermissions from "@/hooks/usePermissions";
+
+type Props = {
+  className?: string;
+  activeLink: LinkIncludingShortenedCollectionAndTags;
+  standalone?: boolean;
+  mode?: "view" | "edit";
+  setMode?: Function;
+};
+
+export default function LinkDetails({
+  className,
+  activeLink,
+  standalone,
+  mode = "view",
+  setMode,
+}: Props) {
+  const [link, setLink] =
+    useState<LinkIncludingShortenedCollectionAndTags>(activeLink);
+
+  useEffect(() => {
+    setLink(activeLink);
+  }, [activeLink]);
+
+  const permissions = usePermissions(link.collection.id as number);
+
+  const { t } = useTranslation();
+  const getLink = useGetLink();
+  const { data: user = {} } = useUser();
+
+  const [collectionOwner, setCollectionOwner] = useState({
+    id: null as unknown as number,
+    name: "",
+    username: "",
+    image: "",
+    archiveAsScreenshot: undefined as unknown as boolean,
+    archiveAsMonolith: undefined as unknown as boolean,
+    archiveAsPDF: undefined as unknown as boolean,
+  });
+
+  useEffect(() => {
+    const fetchOwner = async () => {
+      if (link.collection.ownerId !== user.id) {
+        const owner = await getPublicUserData(
+          link.collection.ownerId as number
+        );
+        setCollectionOwner(owner);
+      } else if (link.collection.ownerId === user.id) {
+        setCollectionOwner({
+          id: user.id as number,
+          name: user.name,
+          username: user.username as string,
+          image: user.image as string,
+          archiveAsScreenshot: user.archiveAsScreenshot as boolean,
+          archiveAsMonolith: user.archiveAsScreenshot as boolean,
+          archiveAsPDF: user.archiveAsPDF as boolean,
+        });
+      }
+    };
+
+    fetchOwner();
+  }, [link.collection.ownerId]);
+
+  const isReady = () => {
+    return (
+      link &&
+      (collectionOwner.archiveAsScreenshot === true
+        ? link.pdf && link.pdf !== "pending"
+        : true) &&
+      (collectionOwner.archiveAsMonolith === true
+        ? link.monolith && link.monolith !== "pending"
+        : true) &&
+      (collectionOwner.archiveAsPDF === true
+        ? link.pdf && link.pdf !== "pending"
+        : true) &&
+      link.readable &&
+      link.readable !== "pending"
+    );
+  };
+
+  const atLeastOneFormatAvailable = () => {
+    return (
+      screenshotAvailable(link) ||
+      pdfAvailable(link) ||
+      readabilityAvailable(link) ||
+      monolithAvailable(link)
+    );
+  };
+
+  useEffect(() => {
+    (async () => {
+      await getLink.mutateAsync({
+        id: link.id as number,
+      });
+    })();
+
+    let interval: any;
+
+    if (!isReady()) {
+      interval = setInterval(async () => {
+        await getLink.mutateAsync({
+          id: link.id as number,
+        });
+      }, 5000);
+    } else {
+      if (interval) {
+        clearInterval(interval);
+      }
+    }
+
+    return () => {
+      if (interval) {
+        clearInterval(interval);
+      }
+    };
+  }, [link.monolith]);
+
+  const router = useRouter();
+
+  const isPublicRoute = router.pathname.startsWith("/public") ? true : false;
+
+  const updateLink = useUpdateLink();
+  const updatePreview = useUpdatePreview();
+
+  const submit = async (e?: any) => {
+    e?.preventDefault();
+
+    const { updatedAt: b, ...oldLink } = activeLink;
+    const { updatedAt: a, ...newLink } = link;
+
+    if (JSON.stringify(oldLink) === JSON.stringify(newLink)) {
+      return;
+    }
+
+    const load = toast.loading(t("updating"));
+
+    await updateLink.mutateAsync(link, {
+      onSettled: (data, error) => {
+        toast.dismiss(load);
+
+        if (error) {
+          toast.error(error.message);
+        } else {
+          toast.success(t("updated"));
+          setMode && setMode("view");
+          setLink(data);
+        }
+      },
+    });
+  };
+
+  const setCollection = (e: any) => {
+    if (e?.__isNew__) e.value = null;
+    setLink({
+      ...link,
+      collection: { id: e?.value, name: e?.label, ownerId: e?.ownerId },
+    });
+  };
+
+  const setTags = (e: any) => {
+    const tagNames = e.map((e: any) => ({ name: e.label }));
+    setLink({ ...link, tags: tagNames });
+  };
+
+  const [iconPopover, setIconPopover] = useState(false);
+
+  return (
+    <div className={clsx(className)} data-vaul-no-drag>
+      <div
+        className={clsx(
+          standalone && "sm:border sm:border-neutral-content sm:rounded-2xl p-5"
+        )}
+      >
+        <div
+          className={clsx(
+            "overflow-hidden select-none relative group h-40 opacity-80",
+            standalone
+              ? "sm:max-w-xl -mx-5 -mt-5 sm:rounded-t-2xl"
+              : "-mx-4 -mt-4"
+          )}
+        >
+          {previewAvailable(link) ? (
+            <Image
+              src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.jpeg}&preview=true&updatedAt=${link.updatedAt}`}
+              width={1280}
+              height={720}
+              alt=""
+              className="object-cover scale-105 object-center h-full"
+              style={{
+                filter: "blur(1px)",
+              }}
+              onError={(e) => {
+                const target = e.target as HTMLElement;
+                target.style.display = "none";
+              }}
+            />
+          ) : link.preview === "unavailable" ? (
+            <div className="bg-gray-50 duration-100 h-40"></div>
+          ) : (
+            <div className="duration-100 h-40 skeleton rounded-none"></div>
+          )}
+
+          {!standalone && (permissions === true || permissions?.canUpdate) && (
+            <div className="absolute top-0 bottom-0 left-0 right-0 opacity-0 group-hover:opacity-100 duration-100 flex justify-end items-end">
+              <label className="btn btn-xs mb-2 mr-3 opacity-50 hover:opacity-100">
+                {t("upload_preview_image")}
+                <input
+                  type="file"
+                  accept="image/jpg, image/jpeg, image/png"
+                  onChange={async (e) => {
+                    const file = e.target.files?.[0];
+                    if (!file) return;
+
+                    const load = toast.loading(t("updating"));
+
+                    await updatePreview.mutateAsync(
+                      {
+                        linkId: link.id as number,
+                        file,
+                      },
+                      {
+                        onSettled: (data, error) => {
+                          toast.dismiss(load);
+
+                          if (error) {
+                            toast.error(error.message);
+                          } else {
+                            toast.success(t("updated"));
+                            setLink({ updatedAt: data.updatedAt, ...link });
+                          }
+                        },
+                      }
+                    );
+                  }}
+                  className="hidden"
+                />
+              </label>
+            </div>
+          )}
+        </div>
+
+        {!standalone && (permissions === true || permissions?.canUpdate) ? (
+          <div className="-mt-14 ml-8 relative w-fit pb-2">
+            <div className="tooltip tooltip-bottom" data-tip={t("change_icon")}>
+              <LinkIcon
+                link={link}
+                className="hover:bg-opacity-70 duration-100 cursor-pointer"
+                onClick={() => setIconPopover(true)}
+              />
+            </div>
+            {iconPopover && (
+              <IconPopover
+                color={link.color || "#006796"}
+                setColor={(color: string) => setLink({ ...link, color })}
+                weight={(link.iconWeight || "regular") as IconWeight}
+                setWeight={(iconWeight: string) =>
+                  setLink({ ...link, iconWeight })
+                }
+                iconName={link.icon as string}
+                setIconName={(icon: string) => setLink({ ...link, icon })}
+                reset={() =>
+                  setLink({
+                    ...link,
+                    color: "",
+                    icon: "",
+                    iconWeight: "",
+                  })
+                }
+                className="top-12"
+                onClose={() => {
+                  setIconPopover(false);
+                  submit();
+                }}
+              />
+            )}
+          </div>
+        ) : (
+          <div className="-mt-14 ml-8 relative w-fit pb-2">
+            <LinkIcon link={link} onClick={() => setIconPopover(true)} />
+          </div>
+        )}
+
+        <div className="max-w-xl sm:px-8 p-5 pb-8 pt-2">
+          {mode === "view" && (
+            <div className="text-xl mt-2 pr-7">
+              <p
+                className={clsx("relative w-fit", !link.name && "text-neutral")}
+              >
+                {link.name || t("untitled")}
+              </p>
+            </div>
+          )}
+
+          {mode === "edit" && (
+            <>
+              <br />
+
+              <div>
+                <p className="text-sm mb-2 text-neutral relative w-fit flex justify-between">
+                  {t("name")}
+                </p>
+                <TextInput
+                  value={link.name}
+                  onChange={(e) => setLink({ ...link, name: e.target.value })}
+                  placeholder={t("placeholder_example_link")}
+                  className="bg-base-200"
+                />
+              </div>
+            </>
+          )}
+
+          {link.url && mode === "view" ? (
+            <>
+              <br />
+
+              <p className="text-sm mb-2 text-neutral">{t("link")}</p>
+
+              <div className="relative">
+                <div className="rounded-md p-2 bg-base-200 hide-scrollbar overflow-x-auto whitespace-nowrap flex justify-between items-center gap-2 pr-14">
+                  <Link href={link.url} title={link.url} target="_blank">
+                    {link.url}
+                  </Link>
+                  <div className="absolute right-0 px-2 bg-base-200">
+                    <CopyButton text={link.url} />
+                  </div>
+                </div>
+              </div>
+            </>
+          ) : activeLink.url ? (
+            <>
+              <br />
+
+              <div>
+                <p className="text-sm mb-2 text-neutral relative w-fit flex justify-between">
+                  {t("link")}
+                </p>
+                <TextInput
+                  value={link.url || ""}
+                  onChange={(e) => setLink({ ...link, url: e.target.value })}
+                  placeholder={t("placeholder_example_link")}
+                  className="bg-base-200"
+                />
+              </div>
+            </>
+          ) : undefined}
+
+          <br />
+
+          <div className="relative">
+            <p className="text-sm mb-2 text-neutral relative w-fit flex justify-between">
+              {t("collection")}
+            </p>
+
+            {mode === "view" ? (
+              <div className="relative">
+                <Link
+                  href={
+                    isPublicRoute
+                      ? `/public/collections/${link.collection.id}`
+                      : `/collections/${link.collection.id}`
+                  }
+                  className="rounded-md p-2 bg-base-200 border border-base-200 hide-scrollbar overflow-x-auto whitespace-nowrap flex justify-between items-center gap-2 pr-14"
+                >
+                  <p>{link.collection.name}</p>
+                  <div className="absolute right-0 px-2 bg-base-200">
+                    {link.collection.icon ? (
+                      <Icon
+                        icon={link.collection.icon}
+                        size={30}
+                        weight={
+                          (link.collection.iconWeight ||
+                            "regular") as IconWeight
+                        }
+                        color={link.collection.color}
+                      />
+                    ) : (
+                      <i
+                        className="bi-folder-fill text-2xl"
+                        style={{ color: link.collection.color }}
+                      ></i>
+                    )}
+                  </div>
+                </Link>
+              </div>
+            ) : (
+              <CollectionSelection
+                onChange={setCollection}
+                defaultValue={
+                  link.collection.id
+                    ? { value: link.collection.id, label: link.collection.name }
+                    : { value: null as unknown as number, label: "Unorganized" }
+                }
+                creatable={false}
+              />
+            )}
+          </div>
+
+          <br />
+
+          <div className="relative">
+            <p className="text-sm mb-2 text-neutral relative w-fit flex justify-between">
+              {t("tags")}
+            </p>
+
+            {mode === "view" ? (
+              <div className="flex gap-2 flex-wrap rounded-md p-2 bg-base-200 border border-base-200 w-full text-xs">
+                {link.tags && link.tags[0] ? (
+                  link.tags.map((tag) =>
+                    isPublicRoute ? (
+                      <div
+                        key={tag.id}
+                        className="bg-base-200 p-1 hover:bg-neutral-content rounded-md duration-100"
+                      >
+                        {tag.name}
+                      </div>
+                    ) : (
+                      <Link
+                        href={"/tags/" + tag.id}
+                        key={tag.id}
+                        className="bg-base-200 p-1 hover:bg-neutral-content btn btn-xs btn-ghost rounded-md"
+                      >
+                        {tag.name}
+                      </Link>
+                    )
+                  )
+                ) : (
+                  <div className="text-neutral text-base">{t("no_tags")}</div>
+                )}
+              </div>
+            ) : (
+              <TagSelection
+                onChange={setTags}
+                defaultValue={link.tags.map((e) => ({
+                  label: e.name,
+                  value: e.id,
+                }))}
+              />
+            )}
+          </div>
+
+          <br />
+
+          <div className="relative">
+            <p className="text-sm mb-2 text-neutral relative w-fit flex justify-between">
+              {t("description")}
+            </p>
+
+            {mode === "view" ? (
+              <div className="rounded-md p-2 bg-base-200 hyphens-auto">
+                {link.description ? (
+                  <p>{link.description}</p>
+                ) : (
+                  <p className="text-neutral">{t("no_description_provided")}</p>
+                )}
+              </div>
+            ) : (
+              <textarea
+                value={unescapeString(link.description) as string}
+                onChange={(e) =>
+                  setLink({ ...link, description: e.target.value })
+                }
+                placeholder={t("link_description_placeholder")}
+                className="resize-none w-full rounded-md p-2 h-32 border-neutral-content bg-base-200 focus:border-primary border-solid border outline-none duration-100"
+              />
+            )}
+          </div>
+
+          {mode === "view" && (
+            <div>
+              <br />
+
+              <p
+                className="text-sm mb-2 text-neutral"
+                title={t("available_formats")}
+              >
+                {link.url ? t("preserved_formats") : t("file")}
+              </p>
+
+              <div className={`flex flex-col rounded-md p-3 bg-base-200`}>
+                {monolithAvailable(link) ? (
+                  <>
+                    <PreservedFormatRow
+                      name={t("webpage")}
+                      icon={"bi-filetype-html"}
+                      format={ArchivedFormat.monolith}
+                      link={link}
+                      downloadable={true}
+                    />
+                    <hr className="m-3 border-t border-neutral-content" />
+                  </>
+                ) : undefined}
+
+                {screenshotAvailable(link) ? (
+                  <>
+                    <PreservedFormatRow
+                      name={t("screenshot")}
+                      icon={"bi-file-earmark-image"}
+                      format={
+                        link?.image?.endsWith("png")
+                          ? ArchivedFormat.png
+                          : ArchivedFormat.jpeg
+                      }
+                      link={link}
+                      downloadable={true}
+                    />
+                    <hr className="m-3 border-t border-neutral-content" />
+                  </>
+                ) : undefined}
+
+                {pdfAvailable(link) ? (
+                  <>
+                    <PreservedFormatRow
+                      name={t("pdf")}
+                      icon={"bi-file-earmark-pdf"}
+                      format={ArchivedFormat.pdf}
+                      link={link}
+                      downloadable={true}
+                    />
+                    <hr className="m-3 border-t border-neutral-content" />
+                  </>
+                ) : undefined}
+
+                {readabilityAvailable(link) ? (
+                  <>
+                    <PreservedFormatRow
+                      name={t("readable")}
+                      icon={"bi-file-earmark-text"}
+                      format={ArchivedFormat.readability}
+                      link={link}
+                    />
+                    <hr className="m-3 border-t border-neutral-content" />
+                  </>
+                ) : undefined}
+
+                {!isReady() && !atLeastOneFormatAvailable() ? (
+                  <div
+                    className={`w-full h-full flex flex-col justify-center p-10`}
+                  >
+                    <BeatLoader
+                      color="oklch(var(--p))"
+                      className="mx-auto mb-3"
+                      size={30}
+                    />
+
+                    <p className="text-center text-2xl">
+                      {t("preservation_in_queue")}
+                    </p>
+                    <p className="text-center text-lg">
+                      {t("check_back_later")}
+                    </p>
+                  </div>
+                ) : link.url && !isReady() && atLeastOneFormatAvailable() ? (
+                  <div
+                    className={`w-full h-full flex flex-col justify-center p-5`}
+                  >
+                    <BeatLoader
+                      color="oklch(var(--p))"
+                      className="mx-auto mb-3"
+                      size={20}
+                    />
+                    <p className="text-center">{t("there_are_more_formats")}</p>
+                    <p className="text-center text-sm">
+                      {t("check_back_later")}
+                    </p>
+                  </div>
+                ) : undefined}
+
+                {link.url && (
+                  <Link
+                    href={`https://web.archive.org/web/${link?.url?.replace(
+                      /(^\w+:|^)\/\//,
+                      ""
+                    )}`}
+                    target="_blank"
+                    className="text-neutral mx-auto duration-100 hover:opacity-60 flex gap-2 w-1/2 justify-center items-center text-sm"
+                  >
+                    <p className="whitespace-nowrap">
+                      {t("view_latest_snapshot")}
+                    </p>
+                    <i className="bi-box-arrow-up-right" />
+                  </Link>
+                )}
+              </div>
+            </div>
+          )}
+
+          {mode === "view" ? (
+            <>
+              <br />
+
+              <p className="text-neutral text-xs text-center">
+                {t("saved")}{" "}
+                {new Date(link.createdAt || "").toLocaleDateString("en-US", {
+                  month: "short",
+                  day: "numeric",
+                  year: "numeric",
+                })}{" "}
+                at{" "}
+                {new Date(link.createdAt || "").toLocaleTimeString("en-US", {
+                  hour: "numeric",
+                  minute: "numeric",
+                })}
+              </p>
+            </>
+          ) : (
+            <>
+              <br />
+              <div className="flex justify-end items-center">
+                <button
+                  className={clsx(
+                    "btn btn-accent text-white",
+                    JSON.stringify(activeLink) === JSON.stringify(link)
+                      ? "btn-disabled"
+                      : "dark:border-violet-400"
+                  )}
+                  onClick={submit}
+                >
+                  {t("save_changes")}
+                </button>
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

components/LinkViews/LinkComponents/LinkActions.tsx

@@ -4,207 +4,205 @@ import {
   LinkIncludingShortenedCollectionAndTags,
 } from "@/types/global";
 import usePermissions from "@/hooks/usePermissions";
-import EditLinkModal from "@/components/ModalContent/EditLinkModal";
 import DeleteLinkModal from "@/components/ModalContent/DeleteLinkModal";
-import PreservedFormatsModal from "@/components/ModalContent/PreservedFormatsModal";
 import { dropdownTriggerer } from "@/lib/client/utils";
 import { useTranslation } from "next-i18next";
-import { useUser } from "@/hooks/store/user";
-import { useDeleteLink, useUpdateLink } from "@/hooks/store/links";
+import { useDeleteLink, useGetLink } from "@/hooks/store/links";
 import toast from "react-hot-toast";
+import LinkModal from "@/components/ModalContent/LinkModal";
+import { useRouter } from "next/router";
+import clsx from "clsx";
+import usePinLink from "@/lib/client/pinLink";
 
 type Props = {
   link: LinkIncludingShortenedCollectionAndTags;
   collection: CollectionIncludingMembersAndLinkCount;
-  position?: string;
-  toggleShowInfo?: () => void;
-  linkInfo?: boolean;
-  alignToTop?: boolean;
-  flipDropdown?: boolean;
+  btnStyle?: string;
 };
 
-export default function LinkActions({
-  link,
-  toggleShowInfo,
-  position,
-  linkInfo,
-  alignToTop,
-  flipDropdown,
-}: Props) {
+export default function LinkActions({ link, btnStyle }: Props) {
   const { t } = useTranslation();
 
   const permissions = usePermissions(link.collection.id as number);
+  const getLink = useGetLink();
+
+  const pinLink = usePinLink();
 
   const [editLinkModal, setEditLinkModal] = useState(false);
+  const [linkModal, setLinkModal] = useState(false);
   const [deleteLinkModal, setDeleteLinkModal] = useState(false);
-  const [preservedFormatsModal, setPreservedFormatsModal] = useState(false);
 
-  const { data: user = {} } = useUser();
-
-  const updateLink = useUpdateLink();
   const deleteLink = useDeleteLink();
 
-  const pinLink = async () => {
-    const isAlreadyPinned = link?.pinnedBy && link.pinnedBy[0] ? true : false;
+  const updateArchive = async () => {
+    const load = toast.loading(t("sending_request"));
 
-    const load = toast.loading(t("updating"));
+    const response = await fetch(`/api/v1/links/${link?.id}/archive`, {
+      method: "PUT",
+    });
 
-    await updateLink.mutateAsync(
-      {
-        ...link,
-        pinnedBy: isAlreadyPinned ? undefined : [{ id: user.id }],
-      },
-      {
-        onSettled: (data, error) => {
-          toast.dismiss(load);
+    const data = await response.json();
+    toast.dismiss(load);
 
-          if (error) {
-            toast.error(error.message);
-          } else {
-            toast.success(
-              isAlreadyPinned ? t("link_unpinned") : t("link_pinned")
-            );
-          }
-        },
-      }
-    );
+    if (response.ok) {
+      await getLink.mutateAsync({ id: link.id as number });
+
+      toast.success(t("link_being_archived"));
+    } else toast.error(data.response);
   };
 
+  const router = useRouter();
+
+  const isPublicRoute = router.pathname.startsWith("/public") ? true : false;
+
   return (
     <>
-      <div
-        className={`dropdown dropdown-left absolute ${
-          position || "top-3 right-3"
-        } ${alignToTop ? "" : "dropdown-end"} z-20`}
-      >
+      {isPublicRoute ? (
         <div
-          tabIndex={0}
-          role="button"
+          className="absolute top-3 right-3 group-hover:opacity-100 group-focus-within:opacity-100 opacity-0 duration-100"
           onMouseDown={dropdownTriggerer}
-          className="btn btn-ghost btn-sm btn-square text-neutral"
+          onClick={() => setLinkModal(true)}
         >
-          <i title="More" className="bi-three-dots text-xl" />
+          <div className={clsx("btn btn-sm btn-square text-neutral", btnStyle)}>
+            <i title="More" className="bi-three-dots text-xl" />
+          </div>
         </div>
-        <ul
-          className={`dropdown-content z-[20] menu shadow bg-base-200 border border-neutral-content rounded-box mr-1 ${
-            alignToTop ? "" : "translate-y-10"
-          }`}
+      ) : (
+        <div
+          className={`dropdown dropdown-end absolute top-3 right-3 group-hover:opacity-100 group-focus-within:opacity-100 opacity-0 duration-100 z-20`}
         >
-          <li>
-            <div
-              role="button"
-              tabIndex={0}
-              onClick={() => {
-                (document?.activeElement as HTMLElement)?.blur();
-                pinLink();
-              }}
-              className="whitespace-nowrap"
-            >
-              {link?.pinnedBy && link.pinnedBy[0]
-                ? t("unpin")
-                : t("pin_to_dashboard")}
-            </div>
-          </li>
-          {linkInfo !== undefined && toggleShowInfo ? (
+          <div
+            tabIndex={0}
+            role="button"
+            onMouseDown={dropdownTriggerer}
+            className={clsx("btn btn-sm btn-square text-neutral", btnStyle)}
+          >
+            <i title="More" className="bi-three-dots text-xl" />
+          </div>
+          <ul
+            className={
+              "dropdown-content z-[20] menu shadow bg-base-200 border border-neutral-content rounded-box mt-1"
+            }
+          >
             <li>
               <div
                 role="button"
                 tabIndex={0}
                 onClick={() => {
                   (document?.activeElement as HTMLElement)?.blur();
-                  toggleShowInfo();
+                  pinLink(link);
                 }}
                 className="whitespace-nowrap"
               >
-                {!linkInfo ? t("show_link_details") : t("hide_link_details")}
+                {link?.pinnedBy && link.pinnedBy[0]
+                  ? t("unpin")
+                  : t("pin_to_dashboard")}
               </div>
             </li>
-          ) : undefined}
-          {permissions === true || permissions?.canUpdate ? (
             <li>
               <div
                 role="button"
                 tabIndex={0}
                 onClick={() => {
                   (document?.activeElement as HTMLElement)?.blur();
-                  setEditLinkModal(true);
+                  setLinkModal(true);
                 }}
                 className="whitespace-nowrap"
               >
-                {t("edit_link")}
+                {t("show_link_details")}
               </div>
             </li>
-          ) : undefined}
-          {link.type === "url" && (
-            <li>
-              <div
-                role="button"
-                tabIndex={0}
-                onClick={() => {
-                  (document?.activeElement as HTMLElement)?.blur();
-                  setPreservedFormatsModal(true);
-                }}
-                className="whitespace-nowrap"
-              >
-                {t("preserved_formats")}
-              </div>
-            </li>
-          )}
-          {permissions === true || permissions?.canDelete ? (
-            <li>
-              <div
-                role="button"
-                tabIndex={0}
-                onClick={async (e) => {
-                  (document?.activeElement as HTMLElement)?.blur();
-                  e.shiftKey
-                    ? async () => {
-                        const load = toast.loading(t("deleting"));
+            {(permissions === true || permissions?.canUpdate) && (
+              <li>
+                <div
+                  role="button"
+                  tabIndex={0}
+                  onClick={() => {
+                    (document?.activeElement as HTMLElement)?.blur();
+                    setEditLinkModal(true);
+                  }}
+                  className="whitespace-nowrap"
+                >
+                  {t("edit_link")}
+                </div>
+              </li>
+            )}
+            {link.type === "url" &&
+              (permissions === true || permissions?.canUpdate) && (
+                <li>
+                  <div
+                    role="button"
+                    tabIndex={0}
+                    onClick={() => {
+                      (document?.activeElement as HTMLElement)?.blur();
+                      updateArchive();
+                    }}
+                    className="whitespace-nowrap"
+                  >
+                    {t("refresh_preserved_formats")}
+                  </div>
+                </li>
+              )}
+            {(permissions === true || permissions?.canDelete) && (
+              <li>
+                <div
+                  role="button"
+                  tabIndex={0}
+                  onClick={async (e) => {
+                    (document?.activeElement as HTMLElement)?.blur();
+                    console.log(e.shiftKey);
+                    e.shiftKey
+                      ? (async () => {
+                          const load = toast.loading(t("deleting"));
 
-                        await deleteLink.mutateAsync(link.id as number, {
-                          onSettled: (data, error) => {
-                            toast.dismiss(load);
+                          await deleteLink.mutateAsync(link.id as number, {
+                            onSettled: (data, error) => {
+                              toast.dismiss(load);
 
-                            if (error) {
-                              toast.error(error.message);
-                            } else {
-                              toast.success(t("deleted"));
-                            }
-                          },
-                        });
-                      }
-                    : setDeleteLinkModal(true);
-                }}
-                className="whitespace-nowrap"
-              >
-                {t("delete")}
-              </div>
-            </li>
-          ) : undefined}
-        </ul>
-      </div>
-
-      {editLinkModal ? (
-        <EditLinkModal
+                              if (error) {
+                                toast.error(error.message);
+                              } else {
+                                toast.success(t("deleted"));
+                              }
+                            },
+                          });
+                        })()
+                      : setDeleteLinkModal(true);
+                  }}
+                  className="whitespace-nowrap"
+                >
+                  {t("delete")}
+                </div>
+              </li>
+            )}
+          </ul>
+        </div>
+      )}
+      {editLinkModal && (
+        <LinkModal
           onClose={() => setEditLinkModal(false)}
-          activeLink={link}
+          onPin={() => pinLink(link)}
+          onUpdateArchive={updateArchive}
+          onDelete={() => setDeleteLinkModal(true)}
+          link={link}
+          activeMode="edit"
         />
-      ) : undefined}
-      {deleteLinkModal ? (
+      )}
+      {deleteLinkModal && (
         <DeleteLinkModal
           onClose={() => setDeleteLinkModal(false)}
           activeLink={link}
         />
-      ) : undefined}
-      {preservedFormatsModal ? (
-        <PreservedFormatsModal
-          onClose={() => setPreservedFormatsModal(false)}
+      )}
+      {linkModal && (
+        <LinkModal
+          onClose={() => setLinkModal(false)}
+          onPin={() => pinLink(link)}
+          onUpdateArchive={updateArchive}
+          onDelete={() => setDeleteLinkModal(true)}
           link={link}
         />
-      ) : undefined}
-      {/* {expandedLink ? (
-                <ExpandedLink onClose={() => setExpandedLink(false)} link={link} />
-              ) : undefined} */}
+      )}
     </>
   );
 }

components/LinkViews/LinkComponents/LinkCard.tsx

@@ -3,7 +3,7 @@ import {
   CollectionIncludingMembersAndLinkCount,
   LinkIncludingShortenedCollectionAndTags,
 } from "@/types/global";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import useLinkStore from "@/store/links";
 import unescapeString from "@/lib/client/unescapeString";
 import LinkActions from "@/components/LinkViews/LinkComponents/LinkActions";
@@ -11,7 +11,6 @@ import LinkDate from "@/components/LinkViews/LinkComponents/LinkDate";
 import LinkCollection from "@/components/LinkViews/LinkComponents/LinkCollection";
 import Image from "next/image";
 import { previewAvailable } from "@/lib/shared/getArchiveValidity";
-import Link from "next/link";
 import LinkIcon from "./LinkIcon";
 import useOnScreen from "@/hooks/useOnScreen";
 import { generateLinkHref } from "@/lib/client/generateLinkHref";
@@ -22,24 +21,47 @@ import { useTranslation } from "next-i18next";
 import { useCollections } from "@/hooks/store/collections";
 import { useUser } from "@/hooks/store/user";
 import { useGetLink, useLinks } from "@/hooks/store/links";
+import { useRouter } from "next/router";
+import useLocalSettingsStore from "@/store/localSettings";
+import LinkPin from "./LinkPin";
 
 type Props = {
   link: LinkIncludingShortenedCollectionAndTags;
   count: number;
+  columns: number;
   className?: string;
-  flipDropdown?: boolean;
   editMode?: boolean;
 };
 
-export default function LinkCard({ link, flipDropdown, editMode }: Props) {
+export default function LinkCard({ link, columns, editMode }: Props) {
   const { t } = useTranslation();
 
+  const heightMap = {
+    1: "h-44",
+    2: "h-40",
+    3: "h-36",
+    4: "h-32",
+    5: "h-28",
+    6: "h-24",
+    7: "h-20",
+    8: "h-20",
+  };
+
+  const imageHeightClass = useMemo(
+    () => (columns ? heightMap[columns as keyof typeof heightMap] : "h-40"),
+    [columns]
+  );
+
   const { data: collections = [] } = useCollections();
 
   const { data: user = {} } = useUser();
 
   const { setSelectedLinks, selectedLinks } = useLinkStore();
 
+  const {
+    settings: { show },
+  } = useLocalSettingsStore();
+
   const {
     data: { data: links = [] },
   } = useLinks();
@@ -90,8 +112,12 @@ export default function LinkCard({ link, flipDropdown, editMode }: Props) {
   const isVisible = useOnScreen(ref);
   const permissions = usePermissions(collection?.id as number);
 
+  const router = useRouter();
+
+  let isPublic = router.pathname.startsWith("/public") ? true : undefined;
+
   useEffect(() => {
-    let interval: any;
+    let interval: NodeJS.Timeout | null = null;
 
     if (
       isVisible &&
@@ -99,7 +125,7 @@ export default function LinkCard({ link, flipDropdown, editMode }: Props) {
       link.preview !== "unavailable"
     ) {
       interval = setInterval(async () => {
-        getLink.mutateAsync(link.id as number);
+        getLink.mutateAsync({ id: link.id as number, isPublicRoute: isPublic });
       }, 5000);
     }
 
@@ -110,8 +136,6 @@ export default function LinkCard({ link, flipDropdown, editMode }: Props) {
     };
   }, [isVisible, link.preview]);
 
-  const [showInfo, setShowInfo] = useState(false);
-
   const selectedStyle = selectedLinks.some(
     (selectedLink) => selectedLink.id === link.id
   )
@@ -125,7 +149,7 @@ export default function LinkCard({ link, flipDropdown, editMode }: Props) {
   return (
     <div
       ref={ref}
-      className={`${selectedStyle} border border-solid border-neutral-content bg-base-200 shadow-md hover:shadow-none duration-100 rounded-2xl relative`}
+      className={`${selectedStyle} border border-solid border-neutral-content bg-base-200 shadow-md hover:shadow-none duration-100 rounded-2xl relative group`}
       onClick={() =>
         selectable
           ? handleCheckboxClick(link)
@@ -140,121 +164,76 @@ export default function LinkCard({ link, flipDropdown, editMode }: Props) {
           !editMode && window.open(generateLinkHref(link, user), "_blank")
         }
       >
-        <div>
-          <div className="relative rounded-t-2xl h-40 overflow-hidden">
-            {previewAvailable(link) ? (
-              <Image
-                src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.jpeg}&preview=true`}
-                width={1280}
-                height={720}
-                alt=""
-                className="rounded-t-2xl select-none object-cover z-10 h-40 w-full shadow opacity-80 scale-105"
-                style={
-                  link.type !== "image" ? { filter: "blur(1px)" } : undefined
-                }
-                draggable="false"
-                onError={(e) => {
-                  const target = e.target as HTMLElement;
-                  target.style.display = "none";
-                }}
-              />
-            ) : link.preview === "unavailable" ? (
-              <div className="bg-gray-50 duration-100 h-40 bg-opacity-80"></div>
-            ) : (
-              <div className="duration-100 h-40 bg-opacity-80 skeleton rounded-none"></div>
-            )}
-            {link.type !== "image" && (
-              <div className="absolute top-0 left-0 right-0 bottom-0 rounded-t-2xl flex items-center justify-center shadow rounded-md">
-                <LinkIcon link={link} />
-              </div>
-            )}
-          </div>
-          <hr className="divider my-0 border-t border-neutral-content h-[1px]" />
-        </div>
-
-        <div className="flex flex-col justify-between h-full">
-          <div className="p-3 flex flex-col gap-2">
-            <p className="truncate w-full pr-9 text-primary text-sm">
-              {unescapeString(link.name)}
-            </p>
-
-            <LinkTypeBadge link={link} />
-          </div>
-
+        {show.image && (
           <div>
-            <hr className="divider mt-2 mb-1 last:hidden border-t border-neutral-content h-[1px]" />
-
-            <div className="flex justify-between text-xs text-neutral px-3 pb-1 gap-2">
-              <div className="cursor-pointer truncate">
-                {collection && (
-                  <LinkCollection link={link} collection={collection} />
-                )}
-              </div>
-              <LinkDate link={link} />
+            <div
+              className={`relative rounded-t-2xl ${imageHeightClass} overflow-hidden`}
+            >
+              {previewAvailable(link) ? (
+                <Image
+                  src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.jpeg}&preview=true&updatedAt=${link.updatedAt}`}
+                  width={1280}
+                  height={720}
+                  alt=""
+                  className={`rounded-t-2xl select-none object-cover z-10 ${imageHeightClass} w-full shadow opacity-80 scale-105`}
+                  style={show.icon ? { filter: "blur(1px)" } : undefined}
+                  draggable="false"
+                  onError={(e) => {
+                    const target = e.target as HTMLElement;
+                    target.style.display = "none";
+                  }}
+                />
+              ) : link.preview === "unavailable" ? (
+                <div
+                  className={`bg-gray-50 ${imageHeightClass} bg-opacity-80`}
+                ></div>
+              ) : (
+                <div
+                  className={`${imageHeightClass} bg-opacity-80 skeleton rounded-none`}
+                ></div>
+              )}
+              {show.icon && (
+                <div className="absolute top-0 left-0 right-0 bottom-0 rounded-t-2xl flex items-center justify-center rounded-md">
+                  <LinkIcon link={link} />
+                </div>
+              )}
             </div>
+            <hr className="divider my-0 border-t border-neutral-content h-[1px]" />
           </div>
+        )}
+
+        <div className="flex flex-col justify-between h-full min-h-24">
+          <div className="p-3 flex flex-col gap-2">
+            {show.name && (
+              <p className="truncate w-full text-primary text-sm">
+                {unescapeString(link.name)}
+              </p>
+            )}
+
+            {show.link && <LinkTypeBadge link={link} />}
+          </div>
+
+          {(show.collection || show.date) && (
+            <div>
+              <hr className="divider mt-2 mb-1 last:hidden border-t border-neutral-content h-[1px]" />
+
+              <div className="flex justify-between items-center text-xs text-neutral px-3 pb-1 gap-2">
+                {show.collection && (
+                  <div className="cursor-pointer truncate">
+                    <LinkCollection link={link} collection={collection} />
+                  </div>
+                )}
+                {show.date && <LinkDate link={link} />}
+              </div>
+            </div>
+          )}
         </div>
       </div>
 
-      {showInfo && (
-        <div className="p-3 absolute z-30 top-0 left-0 right-0 bottom-0 bg-base-200 rounded-[0.9rem] fade-in overflow-y-auto">
-          <div
-            onClick={() => setShowInfo(!showInfo)}
-            className=" float-right btn btn-sm outline-none btn-circle btn-ghost z-10"
-          >
-            <i className="bi-x text-neutral text-2xl"></i>
-          </div>
-          <p className="text-neutral text-lg font-semibold">
-            {t("description")}
-          </p>
-
-          <hr className="divider my-2 border-t border-neutral-content h-[1px]" />
-          <p>
-            {link.description ? (
-              unescapeString(link.description)
-            ) : (
-              <span className="text-neutral text-sm">
-                {t("no_description")}
-              </span>
-            )}
-          </p>
-          {link.tags && link.tags[0] && (
-            <>
-              <p className="text-neutral text-lg mt-3 font-semibold">
-                {t("tags")}
-              </p>
-
-              <hr className="divider my-2 border-t border-neutral-content h-[1px]" />
-
-              <div className="flex gap-3 items-center flex-wrap mt-2 truncate relative">
-                <div className="flex gap-1 items-center flex-wrap">
-                  {link.tags.map((e, i) => (
-                    <Link
-                      href={"/tags/" + e.id}
-                      key={i}
-                      onClick={(e) => {
-                        e.stopPropagation();
-                      }}
-                      className="btn btn-xs btn-ghost truncate max-w-[19rem]"
-                    >
-                      #{e.name}
-                    </Link>
-                  ))}
-                </div>
-              </div>
-            </>
-          )}
-        </div>
-      )}
-
-      <LinkActions
-        link={link}
-        collection={collection}
-        position="top-[10.75rem] right-3"
-        toggleShowInfo={() => setShowInfo(!showInfo)}
-        linkInfo={showInfo}
-        flipDropdown={flipDropdown}
-      />
+      {/* Overlay on hover */}
+      <div className="absolute pointer-events-none top-0 left-0 right-0 bottom-0 bg-base-100 bg-opacity-0 group-hover:bg-opacity-20 group-focus-within:opacity-20 rounded-2xl duration-100"></div>
+      <LinkActions link={link} collection={collection} />
+      <LinkPin link={link} />
     </div>
   );
 }

components/LinkViews/LinkComponents/LinkCollection.tsx

@@ -1,7 +1,9 @@
+import Icon from "@/components/Icon";
 import {
   CollectionIncludingMembersAndLinkCount,
   LinkIncludingShortenedCollectionAndTags,
 } from "@/types/global";
+import { IconWeight } from "@phosphor-icons/react";
 import Link from "next/link";
 import React from "react";
 
@@ -22,10 +24,19 @@ export default function LinkCollection({
         className="flex items-center gap-1 max-w-full w-fit hover:opacity-70 duration-100 select-none"
         title={collection?.name}
       >
-        <i
-          className="bi-folder-fill text-lg drop-shadow"
-          style={{ color: collection?.color }}
-        ></i>
+        {link.collection.icon ? (
+          <Icon
+            icon={link.collection.icon}
+            size={20}
+            weight={(link.collection.iconWeight || "regular") as IconWeight}
+            color={link.collection.color}
+          />
+        ) : (
+          <i
+            className="bi-folder-fill text-lg"
+            style={{ color: link.collection.color }}
+          ></i>
+        )}
         <p className="truncate capitalize">{collection?.name}</p>
       </Link>
     </>

components/LinkViews/LinkComponents/LinkIcon.tsx

@@ -2,34 +2,26 @@ import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
 import Image from "next/image";
 import isValidUrl from "@/lib/shared/isValidUrl";
 import React from "react";
+import Icon from "@/components/Icon";
+import { IconWeight } from "@phosphor-icons/react";
+import clsx from "clsx";
 
 export default function LinkIcon({
   link,
   className,
-  size,
+  hideBackground,
+  onClick,
 }: {
   link: LinkIncludingShortenedCollectionAndTags;
   className?: string;
-  size?: "small" | "medium";
+  hideBackground?: boolean;
+  onClick?: Function;
 }) {
-  let iconClasses: string =
-    "bg-white shadow rounded-md border-[2px] flex item-center justify-center border-white select-none z-10 " +
-    (className || "");
-
-  let dimension;
-
-  switch (size) {
-    case "small":
-      dimension = " w-8 h-8";
-      break;
-    case "medium":
-      dimension = " w-12 h-12";
-      break;
-    default:
-      size = "medium";
-      dimension = " w-12 h-12";
-      break;
-  }
+  let iconClasses: string = clsx(
+    "rounded flex item-center justify-center shadow select-none z-10 w-12 h-12",
+    !hideBackground && "rounded-md bg-white backdrop-blur-lg bg-opacity-50 p-1",
+    className
+  );
 
   const url =
     isValidUrl(link.url || "") && link.url ? new URL(link.url) : undefined;
@@ -37,37 +29,41 @@ export default function LinkIcon({
   const [showFavicon, setShowFavicon] = React.useState<boolean>(true);
 
   return (
-    <>
-      {link.type === "url" && url ? (
+    <div onClick={() => onClick && onClick()}>
+      {link.icon ? (
+        <div className={iconClasses}>
+          <Icon
+            icon={link.icon}
+            size={30}
+            weight={(link.iconWeight || "regular") as IconWeight}
+            color={link.color || "#006796"}
+            className="m-auto"
+          />
+        </div>
+      ) : link.type === "url" && url ? (
         showFavicon ? (
           <Image
             src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${link.url}&size=32`}
             width={64}
             height={64}
             alt=""
-            className={iconClasses + dimension}
+            className={iconClasses}
             draggable="false"
             onError={() => {
               setShowFavicon(false);
             }}
           />
         ) : (
-          <LinkPlaceholderIcon
-            iconClasses={iconClasses + dimension}
-            size={size}
-            icon="bi-link-45deg"
-          />
+          <LinkPlaceholderIcon iconClasses={iconClasses} icon="bi-link-45deg" />
         )
       ) : link.type === "pdf" ? (
         <LinkPlaceholderIcon
-          iconClasses={iconClasses + dimension}
-          size={size}
+          iconClasses={iconClasses}
           icon="bi-file-earmark-pdf"
         />
       ) : link.type === "image" ? (
         <LinkPlaceholderIcon
-          iconClasses={iconClasses + dimension}
-          size={size}
+          iconClasses={iconClasses}
           icon="bi-file-earmark-image"
         />
       ) : // : link.type === "monolith" ? (
@@ -78,25 +74,19 @@ export default function LinkIcon({
       //   />
       // )
       undefined}
-    </>
+    </div>
   );
 }
 
 const LinkPlaceholderIcon = ({
   iconClasses,
-  size,
   icon,
 }: {
   iconClasses: string;
-  size?: "small" | "medium";
   icon: string;
 }) => {
   return (
-    <div
-      className={`${
-        size === "small" ? "text-2xl" : "text-4xl"
-      } text-black aspect-square ${iconClasses}`}
-    >
+    <div className={clsx(iconClasses, "aspect-square text-4xl text-[#006796]")}>
       <i className={`${icon} m-auto`}></i>
     </div>
   );

components/LinkViews/LinkComponents/LinkList.tsx

@@ -18,20 +18,17 @@ import { useTranslation } from "next-i18next";
 import { useCollections } from "@/hooks/store/collections";
 import { useUser } from "@/hooks/store/user";
 import { useLinks } from "@/hooks/store/links";
+import useLocalSettingsStore from "@/store/localSettings";
+import LinkPin from "./LinkPin";
 
 type Props = {
   link: LinkIncludingShortenedCollectionAndTags;
   count: number;
   className?: string;
-  flipDropdown?: boolean;
   editMode?: boolean;
 };
 
-export default function LinkCardCompact({
-  link,
-  flipDropdown,
-  editMode,
-}: Props) {
+export default function LinkCardCompact({ link, editMode }: Props) {
   const { t } = useTranslation();
 
   const { data: collections = [] } = useCollections();
@@ -39,6 +36,10 @@ export default function LinkCardCompact({
   const { data: user = {} } = useUser();
   const { setSelectedLinks, selectedLinks } = useLinkStore();
 
+  const {
+    settings: { show },
+  } = useLocalSettingsStore();
+
   const { links } = useLinks();
 
   useEffect(() => {
@@ -80,8 +81,6 @@ export default function LinkCardCompact({
 
   const permissions = usePermissions(collection?.id as number);
 
-  const [showInfo, setShowInfo] = useState(false);
-
   const selectedStyle = selectedLinks.some(
     (selectedLink) => selectedLink.id === link.id
   )
@@ -95,9 +94,9 @@ export default function LinkCardCompact({
   return (
     <>
       <div
-        className={`${selectedStyle} border relative items-center flex ${
-          !showInfo && !isPWA() ? "hover:bg-base-300 p-3" : "py-3"
-        } duration-200 rounded-lg w-full`}
+        className={`${selectedStyle} rounded-md border relative group items-center flex ${
+          !isPWA() ? "hover:bg-base-300 px-2 py-1" : "py-1"
+        } duration-200 w-full`}
         onClick={() =>
           selectable
             ? handleCheckboxClick(link)
@@ -106,67 +105,40 @@ export default function LinkCardCompact({
               : undefined
         }
       >
-        {/* {showCheckbox &&
-          editMode &&
-          (permissions === true ||
-            permissions?.canCreate ||
-            permissions?.canDelete) && (
-            <input
-              type="checkbox"
-              className="checkbox checkbox-primary my-auto mr-2"
-              checked={selectedLinks.some(
-                (selectedLink) => selectedLink.id === link.id
-              )}
-              onChange={() => handleCheckboxClick(link)}
-            />
-          )} */}
         <div
-          className="flex items-center cursor-pointer w-full"
+          className="flex items-center cursor-pointer w-full min-h-12"
           onClick={() =>
             !editMode && window.open(generateLinkHref(link, user), "_blank")
           }
         >
-          <div className="shrink-0">
-            <LinkIcon link={link} className="w-12 h-12 text-4xl" />
-          </div>
+          {show.icon && (
+            <div className="shrink-0">
+              <LinkIcon link={link} hideBackground />
+            </div>
+          )}
 
           <div className="w-[calc(100%-56px)] ml-2">
-            <p className="line-clamp-1 mr-8 text-primary select-none">
-              {link.name ? (
-                unescapeString(link.name)
-              ) : (
-                <div className="mt-2">
-                  <LinkTypeBadge link={link} />
-                </div>
-              )}
-            </p>
+            {show.name && (
+              <p className="line-clamp-1 mr-8 text-primary select-none">
+                {unescapeString(link.name)}
+              </p>
+            )}
 
             <div className="mt-1 flex flex-col sm:flex-row sm:items-center gap-2 text-xs text-neutral">
               <div className="flex items-center gap-x-3 text-neutral flex-wrap">
-                {collection ? (
+                {show.link && <LinkTypeBadge link={link} />}
+                {show.collection && (
                   <LinkCollection link={link} collection={collection} />
-                ) : undefined}
-                {link.name && <LinkTypeBadge link={link} />}
-                <LinkDate link={link} />
+                )}
+                {show.date && <LinkDate link={link} />}
               </div>
             </div>
           </div>
         </div>
-        <LinkActions
-          link={link}
-          collection={collection}
-          position="top-3 right-3"
-          flipDropdown={flipDropdown}
-          // toggleShowInfo={() => setShowInfo(!showInfo)}
-          // linkInfo={showInfo}
-        />
+        <LinkPin link={link} btnStyle="btn-ghost" />
+        <LinkActions link={link} collection={collection} btnStyle="btn-ghost" />
       </div>
-      <div
-        className="last:hidden rounded-none"
-        style={{
-          borderTop: "1px solid var(--fallback-bc,oklch(var(--bc)/0.1))",
-        }}
-      ></div>
+      <div className="last:hidden rounded-none my-0 mx-1 border-t border-base-300 h-[1px]"></div>
     </>
   );
 }

components/LinkViews/LinkComponents/LinkMasonry.tsx

@@ -3,7 +3,7 @@ import {
   CollectionIncludingMembersAndLinkCount,
   LinkIncludingShortenedCollectionAndTags,
 } from "@/types/global";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import useLinkStore from "@/store/links";
 import unescapeString from "@/lib/client/unescapeString";
 import LinkActions from "@/components/LinkViews/LinkComponents/LinkActions";
@@ -22,23 +22,44 @@ import { useTranslation } from "next-i18next";
 import { useCollections } from "@/hooks/store/collections";
 import { useUser } from "@/hooks/store/user";
 import { useGetLink, useLinks } from "@/hooks/store/links";
+import useLocalSettingsStore from "@/store/localSettings";
+import clsx from "clsx";
+import LinkPin from "./LinkPin";
 
 type Props = {
   link: LinkIncludingShortenedCollectionAndTags;
-  count: number;
-  className?: string;
-  flipDropdown?: boolean;
+  columns: number;
   editMode?: boolean;
 };
 
-export default function LinkMasonry({ link, flipDropdown, editMode }: Props) {
+export default function LinkMasonry({ link, editMode, columns }: Props) {
   const { t } = useTranslation();
 
+  const heightMap = {
+    1: "h-44",
+    2: "h-40",
+    3: "h-36",
+    4: "h-32",
+    5: "h-28",
+    6: "h-24",
+    7: "h-20",
+    8: "h-20",
+  };
+
+  const imageHeightClass = useMemo(
+    () => (columns ? heightMap[columns as keyof typeof heightMap] : "h-40"),
+    [columns]
+  );
+
   const { data: collections = [] } = useCollections();
   const { data: user = {} } = useUser();
 
   const { setSelectedLinks, selectedLinks } = useLinkStore();
 
+  const {
+    settings: { show },
+  } = useLocalSettingsStore();
+
   const { links } = useLinks();
   const getLink = useGetLink();
 
@@ -88,7 +109,7 @@ export default function LinkMasonry({ link, flipDropdown, editMode }: Props) {
   const permissions = usePermissions(collection?.id as number);
 
   useEffect(() => {
-    let interval: any;
+    let interval: NodeJS.Timeout | null = null;
 
     if (
       isVisible &&
@@ -96,7 +117,7 @@ export default function LinkMasonry({ link, flipDropdown, editMode }: Props) {
       link.preview !== "unavailable"
     ) {
       interval = setInterval(async () => {
-        getLink.mutateAsync(link.id as number);
+        getLink.mutateAsync({ id: link.id as number });
       }, 5000);
     }
 
@@ -107,8 +128,6 @@ export default function LinkMasonry({ link, flipDropdown, editMode }: Props) {
     };
   }, [isVisible, link.preview]);
 
-  const [showInfo, setShowInfo] = useState(false);
-
   const selectedStyle = selectedLinks.some(
     (selectedLink) => selectedLink.id === link.id
   )
@@ -122,7 +141,7 @@ export default function LinkMasonry({ link, flipDropdown, editMode }: Props) {
   return (
     <div
       ref={ref}
-      className={`${selectedStyle} border border-solid border-neutral-content bg-base-200 shadow-md hover:shadow-none duration-100 rounded-2xl relative`}
+      className={`${selectedStyle} border border-solid border-neutral-content bg-base-200 shadow-md hover:shadow-none duration-100 rounded-2xl relative group`}
       onClick={() =>
         selectable
           ? handleCheckboxClick(link)
@@ -131,57 +150,61 @@ export default function LinkMasonry({ link, flipDropdown, editMode }: Props) {
             : undefined
       }
     >
-      <div
-        className="rounded-2xl cursor-pointer"
-        onClick={() =>
-          !editMode && window.open(generateLinkHref(link, user), "_blank")
-        }
-      >
-        <div className="relative rounded-t-2xl overflow-hidden">
-          {previewAvailable(link) ? (
-            <Image
-              src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.jpeg}&preview=true`}
-              width={1280}
-              height={720}
-              alt=""
-              className="rounded-t-2xl select-none object-cover z-10 h-40 w-full shadow opacity-80 scale-105"
-              style={
-                link.type !== "image" ? { filter: "blur(1px)" } : undefined
-              }
-              draggable="false"
-              onError={(e) => {
-                const target = e.target as HTMLElement;
-                target.style.display = "none";
-              }}
-            />
-          ) : link.preview === "unavailable" ? null : (
-            <div className="duration-100 h-40 bg-opacity-80 skeleton rounded-none"></div>
-          )}
-          {link.type !== "image" && (
-            <div className="absolute top-0 left-0 right-0 bottom-0 rounded-t-2xl flex items-center justify-center shadow rounded-md">
-              <LinkIcon link={link} />
+      <div>
+        {show.image && previewAvailable(link) && (
+          <div
+            className="rounded-2xl cursor-pointer"
+            onClick={() =>
+              !editMode && window.open(generateLinkHref(link, user), "_blank")
+            }
+          >
+            <div className="relative rounded-t-2xl overflow-hidden">
+              {previewAvailable(link) ? (
+                <Image
+                  src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.jpeg}&preview=true&updatedAt=${link.updatedAt}`}
+                  width={1280}
+                  height={720}
+                  alt=""
+                  className={`rounded-t-2xl select-none object-cover z-10 ${imageHeightClass} w-full shadow opacity-80 scale-105`}
+                  style={show.icon ? { filter: "blur(1px)" } : undefined}
+                  draggable="false"
+                  onError={(e) => {
+                    const target = e.target as HTMLElement;
+                    target.style.display = "none";
+                  }}
+                />
+              ) : link.preview === "unavailable" ? null : (
+                <div
+                  className={`duration-100 ${imageHeightClass} bg-opacity-80 skeleton rounded-none`}
+                ></div>
+              )}
+              {show.icon && (
+                <div className="absolute top-0 left-0 right-0 bottom-0 rounded-t-2xl flex items-center justify-center rounded-md">
+                  <LinkIcon link={link} />
+                </div>
+              )}
             </div>
-          )}
-        </div>
 
-        {link.preview !== "unavailable" && (
-          <hr className="divider my-0 last:hidden border-t border-neutral-content h-[1px]" />
+            <hr className="divider my-0 border-t border-neutral-content h-[1px]" />
+          </div>
         )}
 
-        <div className="p-3 flex flex-col gap-2">
-          <p className="hyphens-auto w-full pr-9 text-primary text-sm">
-            {unescapeString(link.name)}
-          </p>
+        <div className="p-3 flex flex-col gap-2 h-full min-h-14">
+          {show.name && (
+            <p className="hyphens-auto w-full text-primary text-sm">
+              {unescapeString(link.name)}
+            </p>
+          )}
 
-          <LinkTypeBadge link={link} />
+          {show.link && <LinkTypeBadge link={link} />}
 
-          {link.description && (
-            <p className="hyphens-auto text-sm">
+          {show.description && link.description && (
+            <p className={clsx("hyphens-auto text-sm w-full")}>
               {unescapeString(link.description)}
             </p>
           )}
 
-          {link.tags && link.tags[0] && (
+          {show.tags && link.tags && link.tags[0] && (
             <div className="flex gap-1 items-center flex-wrap">
               {link.tags.map((e, i) => (
                 <Link
@@ -199,77 +222,26 @@ export default function LinkMasonry({ link, flipDropdown, editMode }: Props) {
           )}
         </div>
 
-        <hr className="divider mt-2 mb-1 last:hidden border-t border-neutral-content h-[1px]" />
+        {(show.collection || show.date) && (
+          <div>
+            <hr className="divider mt-2 mb-1 last:hidden border-t border-neutral-content h-[1px]" />
 
-        <div className="flex flex-wrap justify-between text-xs text-neutral px-3 pb-1 w-full gap-x-2">
-          {collection && <LinkCollection link={link} collection={collection} />}
-          <LinkDate link={link} />
-        </div>
+            <div className="flex flex-wrap justify-between items-center text-xs text-neutral px-3 pb-1 w-full gap-x-2">
+              {show.collection && (
+                <div className="cursor-pointer truncate">
+                  <LinkCollection link={link} collection={collection} />
+                </div>
+              )}
+              {show.date && <LinkDate link={link} />}
+            </div>
+          </div>
+        )}
       </div>
 
-      {showInfo && (
-        <div className="p-3 absolute z-30 top-0 left-0 right-0 bottom-0 bg-base-200 rounded-2xl fade-in overflow-y-auto">
-          <div
-            onClick={() => setShowInfo(!showInfo)}
-            className=" float-right btn btn-sm outline-none btn-circle btn-ghost z-10"
-          >
-            <i className="bi-x text-neutral text-2xl"></i>
-          </div>
-          <p className="text-neutral text-lg font-semibold">
-            {t("description")}
-          </p>
-
-          <hr className="divider my-2 last:hidden border-t border-neutral-content h-[1px]" />
-          <p>
-            {link.description ? (
-              unescapeString(link.description)
-            ) : (
-              <span className="text-neutral text-sm">
-                {t("no_description")}
-              </span>
-            )}
-          </p>
-          {link.tags && link.tags[0] && (
-            <>
-              <p className="text-neutral text-lg mt-3 font-semibold">
-                {t("tags")}
-              </p>
-
-              <hr className="divider my-2 last:hidden border-t border-neutral-content h-[1px]" />
-
-              <div className="flex gap-3 items-center flex-wrap mt-2 truncate relative">
-                <div className="flex gap-1 items-center flex-wrap">
-                  {link.tags.map((e, i) => (
-                    <Link
-                      href={"/tags/" + e.id}
-                      key={i}
-                      onClick={(e) => {
-                        e.stopPropagation();
-                      }}
-                      className="btn btn-xs btn-ghost truncate max-w-[19rem]"
-                    >
-                      #{e.name}
-                    </Link>
-                  ))}
-                </div>
-              </div>
-            </>
-          )}
-        </div>
-      )}
-
-      <LinkActions
-        link={link}
-        collection={collection}
-        position={
-          link.preview !== "unavailable"
-            ? "top-[10.75rem] right-3"
-            : "top-[.75rem] right-3"
-        }
-        toggleShowInfo={() => setShowInfo(!showInfo)}
-        linkInfo={showInfo}
-        flipDropdown={flipDropdown}
-      />
+      {/* Overlay on hover */}
+      <div className="absolute pointer-events-none top-0 left-0 right-0 bottom-0 bg-base-100 bg-opacity-0 group-hover:bg-opacity-20 group-focus-within:opacity-20 rounded-2xl duration-100"></div>
+      <LinkActions link={link} collection={collection} />
+      <LinkPin link={link} />
     </div>
   );
 }

components/LinkViews/LinkComponents/LinkPin.tsx

@@ -0,0 +1,34 @@
+import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
+import { useRouter } from "next/router";
+import clsx from "clsx";
+import usePinLink from "@/lib/client/pinLink";
+
+type Props = {
+  link: LinkIncludingShortenedCollectionAndTags;
+  btnStyle?: string;
+};
+
+export default function LinkPin({ link, btnStyle }: Props) {
+  const pinLink = usePinLink();
+  const router = useRouter();
+
+  const isPublicRoute = router.pathname.startsWith("/public") ? true : false;
+  const isAlreadyPinned = link?.pinnedBy && link.pinnedBy[0] ? true : false;
+
+  return (
+    <div
+      className="absolute top-3 right-[3.25rem] group-hover:opacity-100 group-focus-within:opacity-100 opacity-0 duration-100"
+      onClick={() => pinLink(link)}
+    >
+      <div className={clsx("btn btn-sm btn-square text-neutral", btnStyle)}>
+        <i
+          title="Pin"
+          className={clsx(
+            "text-xl",
+            isAlreadyPinned ? "bi-pin-fill" : "bi-pin"
+          )}
+        />
+      </div>
+    </div>
+  );
+}

components/LinkViews/Links.tsx

@@ -3,7 +3,7 @@ import {
   LinkIncludingShortenedCollectionAndTags,
   ViewMode,
 } from "@/types/global";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useInView } from "react-intersection-observer";
 import LinkMasonry from "@/components/LinkViews/LinkComponents/LinkMasonry";
 import Masonry from "react-masonry-css";
@@ -11,6 +11,7 @@ import resolveConfig from "tailwindcss/resolveConfig";
 import tailwindConfig from "../../tailwind.config.js";
 import { useMemo } from "react";
 import LinkList from "@/components/LinkViews/LinkComponents/LinkList";
+import useLocalSettingsStore from "@/store/localSettings";
 
 export function CardView({
   links,
@@ -27,16 +28,68 @@ export function CardView({
   hasNextPage?: boolean;
   placeHolderRef?: any;
 }) {
+  const settings = useLocalSettingsStore((state) => state.settings);
+
+  const gridMap = {
+    1: "grid-cols-1",
+    2: "grid-cols-2",
+    3: "grid-cols-3",
+    4: "grid-cols-4",
+    5: "grid-cols-5",
+    6: "grid-cols-6",
+    7: "grid-cols-7",
+    8: "grid-cols-8",
+  };
+
+  const getColumnCount = () => {
+    const width = window.innerWidth;
+    if (width >= 1901) return 5;
+    if (width >= 1501) return 4;
+    if (width >= 881) return 3;
+    if (width >= 551) return 2;
+    return 1;
+  };
+
+  const [columnCount, setColumnCount] = useState(
+    settings.columns || getColumnCount()
+  );
+
+  const gridColClass = useMemo(
+    () => gridMap[columnCount as keyof typeof gridMap],
+    [columnCount]
+  );
+
+  useEffect(() => {
+    const handleResize = () => {
+      if (settings.columns === 0) {
+        // Only recalculate if zustandColumns is zero
+        setColumnCount(getColumnCount());
+      }
+    };
+
+    if (settings.columns === 0) {
+      window.addEventListener("resize", handleResize);
+    }
+
+    setColumnCount(settings.columns || getColumnCount());
+
+    return () => {
+      if (settings.columns === 0) {
+        window.removeEventListener("resize", handleResize);
+      }
+    };
+  }, [settings.columns]);
+
   return (
-    <div className="grid min-[1901px]:grid-cols-5 min-[1501px]:grid-cols-4 min-[881px]:grid-cols-3 min-[551px]:grid-cols-2 grid-cols-1 gap-5 pb-5">
+    <div className={`${gridColClass} grid gap-5 pb-5`}>
       {links?.map((e, i) => {
         return (
           <LinkCard
             key={i}
             link={e}
             count={i}
-            flipDropdown={i === links.length - 1}
             editMode={editMode}
+            columns={columnCount}
           />
         );
       })}
@@ -76,6 +129,58 @@ export function MasonryView({
   hasNextPage?: boolean;
   placeHolderRef?: any;
 }) {
+  const settings = useLocalSettingsStore((state) => state.settings);
+
+  const gridMap = {
+    1: "grid-cols-1",
+    2: "grid-cols-2",
+    3: "grid-cols-3",
+    4: "grid-cols-4",
+    5: "grid-cols-5",
+    6: "grid-cols-6",
+    7: "grid-cols-7",
+    8: "grid-cols-8",
+  };
+
+  const getColumnCount = () => {
+    const width = window.innerWidth;
+    if (width >= 1901) return 5;
+    if (width >= 1501) return 4;
+    if (width >= 881) return 3;
+    if (width >= 551) return 2;
+    return 1;
+  };
+
+  const [columnCount, setColumnCount] = useState(
+    settings.columns || getColumnCount()
+  );
+
+  const gridColClass = useMemo(
+    () => gridMap[columnCount as keyof typeof gridMap],
+    [columnCount]
+  );
+
+  useEffect(() => {
+    const handleResize = () => {
+      if (settings.columns === 0) {
+        // Only recalculate if zustandColumns is zero
+        setColumnCount(getColumnCount());
+      }
+    };
+
+    if (settings.columns === 0) {
+      window.addEventListener("resize", handleResize);
+    }
+
+    setColumnCount(settings.columns || getColumnCount());
+
+    return () => {
+      if (settings.columns === 0) {
+        window.removeEventListener("resize", handleResize);
+      }
+    };
+  }, [settings.columns]);
+
   const fullConfig = resolveConfig(tailwindConfig as any);
 
   const breakpointColumnsObj = useMemo(() => {
@@ -90,18 +195,19 @@ export function MasonryView({
 
   return (
     <Masonry
-      breakpointCols={breakpointColumnsObj}
+      breakpointCols={
+        settings.columns === 0 ? breakpointColumnsObj : columnCount
+      }
       columnClassName="flex flex-col gap-5 !w-full"
-      className="grid min-[1901px]:grid-cols-5 min-[1501px]:grid-cols-4 min-[881px]:grid-cols-3 min-[551px]:grid-cols-2 grid-cols-1 gap-5 pb-5"
+      className={`${gridColClass} grid gap-5 pb-5`}
     >
       {links?.map((e, i) => {
         return (
           <LinkMasonry
             key={i}
             link={e}
-            count={i}
-            flipDropdown={i === links.length - 1}
             editMode={editMode}
+            columns={columnCount}
           />
         );
       })}
@@ -142,17 +248,9 @@ export function ListView({
   placeHolderRef?: any;
 }) {
   return (
-    <div className="flex gap-1 flex-col">
+    <div className="flex flex-col">
       {links?.map((e, i) => {
-        return (
-          <LinkList
-            key={i}
-            link={e}
-            count={i}
-            flipDropdown={i === links.length - 1}
-            editMode={editMode}
-          />
-        );
+        return <LinkList key={i} link={e} count={i} editMode={editMode} />;
       })}
 
       {(hasNextPage || isLoading) &&
@@ -161,13 +259,13 @@ export function ListView({
             <div
               ref={e === 1 ? placeHolderRef : undefined}
               key={i}
-              className="flex gap-4 p-4"
+              className="flex gap-2 py-2 px-1"
             >
-              <div className="skeleton h-16 w-16"></div>
-              <div className="flex flex-col gap-4 w-full">
-                <div className="skeleton h-3 w-2/3"></div>
-                <div className="skeleton h-3 w-full"></div>
-                <div className="skeleton h-3 w-1/3"></div>
+              <div className="skeleton h-12 w-12"></div>
+              <div className="flex flex-col gap-3 w-full">
+                <div className="skeleton h-2 w-2/3"></div>
+                <div className="skeleton h-2 w-full"></div>
+                <div className="skeleton h-2 w-1/3"></div>
               </div>
             </div>
           );

components/MobileNavigation.tsx

@@ -87,15 +87,13 @@ export default function MobileNavigation({}: Props) {
           <MobileNavigationButton href={`/collections`} icon={"bi-folder"} />
         </div>
       </div>
-      {newLinkModal ? (
-        <NewLinkModal onClose={() => setNewLinkModal(false)} />
-      ) : undefined}
-      {newCollectionModal ? (
+      {newLinkModal && <NewLinkModal onClose={() => setNewLinkModal(false)} />}
+      {newCollectionModal && (
         <NewCollectionModal onClose={() => setNewCollectionModal(false)} />
-      ) : undefined}
-      {uploadFileModal ? (
+      )}
+      {uploadFileModal && (
         <UploadFileModal onClose={() => setUploadFileModal(false)} />
-      ) : undefined}
+      )}
     </>
   );
 }

components/Modal.tsx

@@ -32,7 +32,7 @@ export default function Modal({
     return (
       <Drawer.Root
         open={drawerIsOpen}
-        onClose={() => dismissible && setTimeout(() => toggleModal(), 100)}
+        onClose={() => dismissible && setTimeout(() => toggleModal(), 350)}
         dismissible={dismissible}
       >
         <Drawer.Portal>
@@ -40,7 +40,7 @@ export default function Modal({
           <ClickAwayHandler
             onClickOutside={() => dismissible && setDrawerIsOpen(false)}
           >
-            <Drawer.Content className="flex flex-col rounded-t-2xl min-h-max mt-24 fixed bottom-0 left-0 right-0 z-30">
+            <Drawer.Content className="flex flex-col rounded-t-2xl h-[90%] mt-24 fixed bottom-0 left-0 right-0 z-30">
               <div
                 className="p-4 bg-base-100 rounded-t-2xl flex-1 border-neutral-content border-t overflow-y-auto"
                 data-testid="mobile-modal-container"

components/ModalContent/EditCollectionModal.tsx

@@ -1,11 +1,12 @@
 import React, { useState } from "react";
 import TextInput from "@/components/TextInput";
-import { HexColorPicker } from "react-colorful";
 import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
 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 { IconWeight } from "@phosphor-icons/react";
 
 type Props = {
   onClose: Function;
@@ -56,10 +57,32 @@ export default function EditCollectionModal({
       <div className="divider mb-3 mt-1"></div>
 
       <div className="flex flex-col gap-3">
-        <div className="flex flex-col sm:flex-row gap-3">
-          <div className="w-full">
-            <p className="mb-2">{t("name")}</p>
-            <div className="flex flex-col gap-3">
+        <div className="flex flex-col gap-3">
+          <div className="flex gap-3 items-end">
+            <IconPicker
+              color={collection.color}
+              setColor={(color: string) =>
+                setCollection({ ...collection, color })
+              }
+              weight={(collection.iconWeight || "regular") as IconWeight}
+              setWeight={(iconWeight: string) =>
+                setCollection({ ...collection, iconWeight })
+              }
+              iconName={collection.icon as string}
+              setIconName={(icon: string) =>
+                setCollection({ ...collection, icon })
+              }
+              reset={() =>
+                setCollection({
+                  ...collection,
+                  color: "#0ea5e9",
+                  icon: "",
+                  iconWeight: "",
+                })
+              }
+            />
+            <div className="w-full">
+              <p className="mb-2">{t("name")}</p>
               <TextInput
                 className="bg-base-200"
                 value={collection.name}
@@ -68,38 +91,13 @@ export default function EditCollectionModal({
                   setCollection({ ...collection, name: e.target.value })
                 }
               />
-              <div>
-                <p className="w-full mb-2">{t("color")}</p>
-                <div className="color-picker flex justify-between items-center">
-                  <HexColorPicker
-                    color={collection.color}
-                    onChange={(color) =>
-                      setCollection({ ...collection, color })
-                    }
-                  />
-                  <div className="flex flex-col gap-2 items-center w-32">
-                    <i
-                      className="bi-folder-fill text-5xl"
-                      style={{ color: collection.color }}
-                    ></i>
-                    <div
-                      className="btn btn-ghost btn-xs"
-                      onClick={() =>
-                        setCollection({ ...collection, color: "#0ea5e9" })
-                      }
-                    >
-                      {t("reset")}
-                    </div>
-                  </div>
-                </div>
-              </div>
             </div>
           </div>
 
           <div className="w-full">
             <p className="mb-2">{t("description")}</p>
             <textarea
-              className="w-full h-[13rem] resize-none border rounded-md duration-100 bg-base-200 p-2 outline-none border-neutral-content focus:border-primary"
+              className="w-full h-32 resize-none border rounded-md duration-100 bg-base-200 p-2 outline-none border-neutral-content focus:border-primary"
               placeholder={t("collection_description_placeholder")}
               value={collection.description}
               onChange={(e) =>

components/ModalContent/EditCollectionSharingModal.tsx

@@ -1,7 +1,11 @@
 import React, { useEffect, useState } from "react";
 import TextInput from "@/components/TextInput";
 import toast from "react-hot-toast";
-import { CollectionIncludingMembersAndLinkCount, Member } from "@/types/global";
+import {
+  AccountSettings,
+  CollectionIncludingMembersAndLinkCount,
+  Member,
+} from "@/types/global";
 import getPublicUserData from "@/lib/client/getPublicUserData";
 import usePermissions from "@/hooks/usePermissions";
 import ProfilePhoto from "../ProfilePhoto";
@@ -11,6 +15,7 @@ import { dropdownTriggerer } from "@/lib/client/utils";
 import { useTranslation } from "next-i18next";
 import { useUpdateCollection } from "@/hooks/store/collections";
 import { useUser } from "@/hooks/store/user";
+import CopyButton from "../CopyButton";
 
 type Props = {
   onClose: Function;
@@ -64,15 +69,9 @@ export default function EditCollectionSharingModal({
 
   const [memberUsername, setMemberUsername] = useState("");
 
-  const [collectionOwner, setCollectionOwner] = useState({
-    id: null as unknown as number,
-    name: "",
-    username: "",
-    image: "",
-    archiveAsScreenshot: undefined as unknown as boolean,
-    archiveAsMonolith: undefined as unknown as boolean,
-    archiveAsPDF: undefined as unknown as boolean,
-  });
+  const [collectionOwner, setCollectionOwner] = useState<
+    Partial<AccountSettings>
+  >({});
 
   useEffect(() => {
     const fetchOwner = async () => {
@@ -132,25 +131,15 @@ export default function EditCollectionSharingModal({
           </div>
         )}
 
-        {collection.isPublic ? (
-          <div className={permissions === true ? "pl-5" : ""}>
-            <p className="mb-2">{t("sharable_link_guide")}</p>
-            <div
-              onClick={() => {
-                try {
-                  navigator.clipboard
-                    .writeText(publicCollectionURL)
-                    .then(() => toast.success(t("copied")));
-                } catch (err) {
-                  console.log(err);
-                }
-              }}
-              className="w-full hide-scrollbar overflow-x-auto whitespace-nowrap rounded-md p-2 bg-base-200 border-neutral-content border-solid border outline-none hover:border-primary dark:hover:border-primary duration-100 cursor-text"
-            >
+        {collection.isPublic && (
+          <div>
+            <p className="mb-2">{t("sharable_link")}</p>
+            <div className="w-full hide-scrollbar overflow-x-auto whitespace-nowrap rounded-md p-2 bg-base-200 border-neutral-content border-solid border flex items-center gap-2 justify-between">
               {publicCollectionURL}
+              <CopyButton text={publicCollectionURL} />
             </div>
           </div>
-        ) : null}
+        )}
 
         {permissions === true && <div className="divider my-3"></div>}
 

components/ModalContent/EditLinkModal.tsx

@@ -1,154 +0,0 @@
-import React, { useEffect, useState } from "react";
-import CollectionSelection from "@/components/InputSelect/CollectionSelection";
-import TagSelection from "@/components/InputSelect/TagSelection";
-import TextInput from "@/components/TextInput";
-import unescapeString from "@/lib/client/unescapeString";
-import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
-import Link from "next/link";
-import Modal from "../Modal";
-import { useTranslation } from "next-i18next";
-import { useUpdateLink } from "@/hooks/store/links";
-import toast from "react-hot-toast";
-
-type Props = {
-  onClose: Function;
-  activeLink: LinkIncludingShortenedCollectionAndTags;
-};
-
-export default function EditLinkModal({ onClose, activeLink }: Props) {
-  const { t } = useTranslation();
-  const [link, setLink] =
-    useState<LinkIncludingShortenedCollectionAndTags>(activeLink);
-
-  let shortenedURL;
-  try {
-    shortenedURL = new URL(link.url || "").host.toLowerCase();
-  } catch (error) {
-    console.log(error);
-  }
-
-  const [submitLoader, setSubmitLoader] = useState(false);
-
-  const updateLink = useUpdateLink();
-
-  const setCollection = (e: any) => {
-    if (e?.__isNew__) e.value = null;
-    setLink({
-      ...link,
-      collection: { id: e?.value, name: e?.label, ownerId: e?.ownerId },
-    });
-  };
-
-  const setTags = (e: any) => {
-    const tagNames = e.map((e: any) => ({ name: e.label }));
-    setLink({ ...link, tags: tagNames });
-  };
-
-  useEffect(() => {
-    setLink(activeLink);
-  }, []);
-
-  const submit = async () => {
-    if (!submitLoader) {
-      setSubmitLoader(true);
-
-      const load = toast.loading(t("updating"));
-
-      await updateLink.mutateAsync(link, {
-        onSettled: (data, error) => {
-          toast.dismiss(load);
-
-          if (error) {
-            toast.error(error.message);
-          } else {
-            onClose();
-            toast.success(t("updated"));
-          }
-        },
-      });
-
-      setSubmitLoader(false);
-    }
-  };
-
-  return (
-    <Modal toggleModal={onClose}>
-      <p className="text-xl font-thin">{t("edit_link")}</p>
-
-      <div className="divider mb-3 mt-1"></div>
-
-      {link.url ? (
-        <Link
-          href={link.url}
-          className="truncate text-neutral flex gap-2 mb-5 w-fit max-w-full"
-          title={link.url}
-          target="_blank"
-        >
-          <i className="bi-link-45deg text-xl" />
-          <p>{shortenedURL}</p>
-        </Link>
-      ) : undefined}
-
-      <div className="w-full">
-        <p className="mb-2">{t("name")}</p>
-        <TextInput
-          value={link.name}
-          onChange={(e) => setLink({ ...link, name: e.target.value })}
-          placeholder={t("placeholder_example_link")}
-          className="bg-base-200"
-        />
-      </div>
-
-      <div className="mt-5">
-        <div className="grid sm:grid-cols-2 gap-3">
-          <div>
-            <p className="mb-2">{t("collection")}</p>
-            {link.collection.name ? (
-              <CollectionSelection
-                onChange={setCollection}
-                defaultValue={
-                  link.collection.id
-                    ? { value: link.collection.id, label: link.collection.name }
-                    : { value: null as unknown as number, label: "Unorganized" }
-                }
-                creatable={false}
-              />
-            ) : null}
-          </div>
-
-          <div>
-            <p className="mb-2">{t("tags")}</p>
-            <TagSelection
-              onChange={setTags}
-              defaultValue={link.tags.map((e) => ({
-                label: e.name,
-                value: e.id,
-              }))}
-            />
-          </div>
-
-          <div className="sm:col-span-2">
-            <p className="mb-2">{t("description")}</p>
-            <textarea
-              value={unescapeString(link.description) as string}
-              onChange={(e) =>
-                setLink({ ...link, description: e.target.value })
-              }
-              placeholder={t("link_description_placeholder")}
-              className="resize-none w-full rounded-md p-2 border-neutral-content bg-base-200 focus:border-sky-300 dark:focus:border-sky-600 border-solid border outline-none duration-100"
-            />
-          </div>
-        </div>
-      </div>
-
-      <div className="flex justify-end items-center mt-5">
-        <button
-          className="btn btn-accent dark:border-violet-400 text-white"
-          onClick={submit}
-        >
-          {t("save_changes")}
-        </button>
-      </div>
-    </Modal>
-  );
-}

components/ModalContent/LinkModal.tsx

@@ -0,0 +1,183 @@
+import React, { useState } from "react";
+import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
+import { useTranslation } from "next-i18next";
+import { useDeleteLink } from "@/hooks/store/links";
+import Drawer from "../Drawer";
+import LinkDetails from "../LinkDetails";
+import Link from "next/link";
+import usePermissions from "@/hooks/usePermissions";
+import { useRouter } from "next/router";
+import { dropdownTriggerer } from "@/lib/client/utils";
+import toast from "react-hot-toast";
+import clsx from "clsx";
+
+type Props = {
+  onClose: Function;
+  onDelete: Function;
+  onUpdateArchive: Function;
+  onPin: Function;
+  link: LinkIncludingShortenedCollectionAndTags;
+  activeMode?: "view" | "edit";
+};
+
+export default function LinkModal({
+  onClose,
+  onDelete,
+  onUpdateArchive,
+  onPin,
+  link,
+  activeMode,
+}: Props) {
+  const { t } = useTranslation();
+
+  const permissions = usePermissions(link.collection.id as number);
+
+  const router = useRouter();
+
+  const isPublicRoute = router.pathname.startsWith("/public") ? true : false;
+
+  const deleteLink = useDeleteLink();
+
+  const [mode, setMode] = useState<"view" | "edit">(activeMode || "view");
+
+  return (
+    <Drawer
+      toggleDrawer={onClose}
+      className="sm:h-screen items-center relative"
+    >
+      <div className="absolute top-3 left-0 right-0 flex justify-between px-3">
+        <div
+          className="bi-x text-xl btn btn-sm btn-circle text-base-content opacity-50 hover:opacity-100 z-10"
+          onClick={() => onClose()}
+        ></div>
+
+        {(permissions === true || permissions?.canUpdate) && (
+          <div className="flex gap-1 h-8 rounded-full bg-neutral-content bg-opacity-50 text-base-content p-1 text-xs duration-100 select-none z-10">
+            <div
+              className={clsx(
+                "py-1 px-2 cursor-pointer duration-100 rounded-full font-semibold",
+                mode === "view" && "bg-primary bg-opacity-50"
+              )}
+              onClick={() => {
+                setMode("view");
+              }}
+            >
+              View
+            </div>
+            <div
+              className={clsx(
+                "py-1 px-2 cursor-pointer duration-100 rounded-full font-semibold",
+                mode === "edit" && "bg-primary bg-opacity-50"
+              )}
+              onClick={() => {
+                setMode("edit");
+              }}
+            >
+              Edit
+            </div>
+          </div>
+        )}
+
+        <div className="flex gap-2">
+          <div className={`dropdown dropdown-end z-20`}>
+            <div
+              tabIndex={0}
+              role="button"
+              onMouseDown={dropdownTriggerer}
+              className="btn btn-sm btn-circle text-base-content opacity-50 hover:opacity-100 z-10"
+            >
+              <i title="More" className="bi-three-dots text-xl" />
+            </div>
+            <ul
+              className={`dropdown-content z-[20] menu shadow bg-base-200 border border-neutral-content rounded-box`}
+            >
+              {
+                <li>
+                  <div
+                    role="button"
+                    tabIndex={0}
+                    onClick={() => {
+                      (document?.activeElement as HTMLElement)?.blur();
+                      onPin();
+                    }}
+                    className="whitespace-nowrap"
+                  >
+                    {link?.pinnedBy && link.pinnedBy[0]
+                      ? t("unpin")
+                      : t("pin_to_dashboard")}
+                  </div>
+                </li>
+              }
+              {link.type === "url" &&
+                (permissions === true || permissions?.canUpdate) && (
+                  <li>
+                    <div
+                      role="button"
+                      tabIndex={0}
+                      onClick={() => {
+                        (document?.activeElement as HTMLElement)?.blur();
+                        onUpdateArchive();
+                      }}
+                      className="whitespace-nowrap"
+                    >
+                      {t("refresh_preserved_formats")}
+                    </div>
+                  </li>
+                )}
+              {(permissions === true || permissions?.canDelete) && (
+                <li>
+                  <div
+                    role="button"
+                    tabIndex={0}
+                    onClick={async (e) => {
+                      (document?.activeElement as HTMLElement)?.blur();
+                      console.log(e.shiftKey);
+                      if (e.shiftKey) {
+                        const load = toast.loading(t("deleting"));
+
+                        await deleteLink.mutateAsync(link.id as number, {
+                          onSettled: (data, error) => {
+                            toast.dismiss(load);
+
+                            if (error) {
+                              toast.error(error.message);
+                            } else {
+                              toast.success(t("deleted"));
+                            }
+                          },
+                        });
+                        onClose();
+                      } else {
+                        onDelete();
+                        onClose();
+                      }
+                    }}
+                    className="whitespace-nowrap"
+                  >
+                    {t("delete")}
+                  </div>
+                </li>
+              )}
+            </ul>
+          </div>
+          {link.url && (
+            <Link
+              href={link.url}
+              target="_blank"
+              className="bi-box-arrow-up-right btn-circle text-base-content opacity-50 hover:opacity-100 btn btn-sm select-none z-10"
+            ></Link>
+          )}
+        </div>
+      </div>
+
+      <div className="w-full">
+        <LinkDetails
+          activeLink={link}
+          className="sm:mt-0 -mt-11"
+          mode={mode}
+          setMode={(mode: "view" | "edit") => setMode(mode)}
+        />
+      </div>
+    </Drawer>
+  );
+}

components/ModalContent/NewCollectionModal.tsx

@@ -1,12 +1,13 @@
 import React, { useEffect, useState } from "react";
 import TextInput from "@/components/TextInput";
-import { HexColorPicker } from "react-colorful";
 import { Collection } from "@prisma/client";
 import Modal from "../Modal";
 import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
 import { useTranslation } from "next-i18next";
 import { useCreateCollection } from "@/hooks/store/collections";
 import toast from "react-hot-toast";
+import IconPicker from "../IconPicker";
+import { IconWeight } from "@phosphor-icons/react";
 
 type Props = {
   onClose: Function;
@@ -72,10 +73,32 @@ export default function NewCollectionModal({ onClose, parent }: Props) {
       <div className="divider mb-3 mt-1"></div>
 
       <div className="flex flex-col gap-3">
-        <div className="flex flex-col sm:flex-row gap-3">
-          <div className="w-full">
-            <p className="mb-2">{t("name")}</p>
-            <div className="flex flex-col gap-2">
+        <div className="flex flex-col gap-3">
+          <div className="flex gap-3 items-end">
+            <IconPicker
+              color={collection.color || "#0ea5e9"}
+              setColor={(color: string) =>
+                setCollection({ ...collection, color })
+              }
+              weight={(collection.iconWeight || "regular") as IconWeight}
+              setWeight={(iconWeight: string) =>
+                setCollection({ ...collection, iconWeight })
+              }
+              iconName={collection.icon as string}
+              setIconName={(icon: string) =>
+                setCollection({ ...collection, icon })
+              }
+              reset={() =>
+                setCollection({
+                  ...collection,
+                  color: "#0ea5e9",
+                  icon: "",
+                  iconWeight: "",
+                })
+              }
+            />
+            <div className="w-full">
+              <p className="mb-2">{t("name")}</p>
               <TextInput
                 className="bg-base-200"
                 value={collection.name}
@@ -84,38 +107,13 @@ export default function NewCollectionModal({ onClose, parent }: Props) {
                   setCollection({ ...collection, name: e.target.value })
                 }
               />
-              <div>
-                <p className="w-full mb-2">{t("color")}</p>
-                <div className="color-picker flex justify-between items-center">
-                  <HexColorPicker
-                    color={collection.color}
-                    onChange={(color) =>
-                      setCollection({ ...collection, color })
-                    }
-                  />
-                  <div className="flex flex-col gap-2 items-center w-32">
-                    <i
-                      className={"bi-folder-fill text-5xl"}
-                      style={{ color: collection.color }}
-                    ></i>
-                    <div
-                      className="btn btn-ghost btn-xs"
-                      onClick={() =>
-                        setCollection({ ...collection, color: "#0ea5e9" })
-                      }
-                    >
-                      {t("reset")}
-                    </div>
-                  </div>
-                </div>
-              </div>
             </div>
           </div>
 
           <div className="w-full">
             <p className="mb-2">{t("description")}</p>
             <textarea
-              className="w-full h-[13rem] resize-none border rounded-md duration-100 bg-base-200 p-2 outline-none border-neutral-content focus:border-primary"
+              className="w-full h-32 resize-none border rounded-md duration-100 bg-base-200 p-2 outline-none border-neutral-content focus:border-primary"
               placeholder={t("collection_description_placeholder")}
               value={collection.description}
               onChange={(e) =>

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,
@@ -61,7 +64,7 @@ export default function NewLinkModal({ onClose }: Props) {
   };
 
   useEffect(() => {
-    if (router.query.id) {
+    if (router.pathname.startsWith("/collections/") && router.query.id) {
       const currentCollection = collections.find(
         (e) => e.id == Number(router.query.id)
       );
@@ -124,7 +127,7 @@ export default function NewLinkModal({ onClose }: Props) {
         </div>
         <div className="sm:col-span-2 col-span-5">
           <p className="mb-2">{t("collection")}</p>
-          {link.collection.name ? (
+          {link.collection.name && (
             <CollectionSelection
               onChange={setCollection}
               defaultValue={{
@@ -132,11 +135,11 @@ export default function NewLinkModal({ onClose }: Props) {
                 value: link.collection.id,
               }}
             />
-          ) : null}
+          )}
         </div>
       </div>
       <div className={"mt-2"}>
-        {optionsExpanded ? (
+        {optionsExpanded && (
           <div className="mt-5">
             <div className="grid sm:grid-cols-2 gap-3">
               <div>
@@ -166,12 +169,12 @@ export default function NewLinkModal({ onClose }: Props) {
                     setLink({ ...link, description: e.target.value })
                   }
                   placeholder={t("link_description_placeholder")}
-                  className="resize-none w-full rounded-md p-2 border-neutral-content bg-base-200 focus:border-primary border-solid border outline-none duration-100"
+                  className="resize-none w-full h-32 rounded-md p-2 border-neutral-content bg-base-200 focus:border-primary border-solid border outline-none duration-100"
                 />
               </div>
             </div>
           </div>
-        ) : undefined}
+        )}
       </div>
       <div className="flex justify-between items-center mt-5">
         <div

components/ModalContent/NewTokenModal.tsx

@@ -7,6 +7,7 @@ import { dropdownTriggerer } from "@/lib/client/utils";
 import Button from "../ui/Button";
 import { useTranslation } from "next-i18next";
 import { useAddToken } from "@/hooks/store/tokens";
+import CopyButton from "../CopyButton";
 
 type Props = {
   onClose: Function;
@@ -68,21 +69,14 @@ export default function NewTokenModal({ onClose }: Props) {
         <div className="flex flex-col justify-center space-y-4">
           <p className="text-xl font-thin">{t("access_token_created")}</p>
           <p>{t("token_creation_notice")}</p>
-          <TextInput
-            spellCheck={false}
-            value={newToken}
-            onChange={() => {}}
-            className="w-full"
-          />
-          <button
-            onClick={() => {
-              navigator.clipboard.writeText(newToken);
-              toast.success(t("copied_to_clipboard"));
-            }}
-            className="btn btn-primary w-fit mx-auto"
-          >
-            {t("copy_to_clipboard")}
-          </button>
+          <div className="relative">
+            <div className="w-full hide-scrollbar overflow-x-auto whitespace-nowrap rounded-md p-2 bg-base-200 border-neutral-content border-solid border flex items-center gap-2 justify-between pr-14">
+              {newToken}
+              <div className="absolute right-0 px-2 border-neutral-content border-solid border-r bg-base-200">
+                <CopyButton text={newToken} />
+              </div>
+            </div>
+          </div>
         </div>
       ) : (
         <>

components/ModalContent/NewUserModal.tsx

@@ -79,7 +79,7 @@ export default function NewUserModal({ onClose }: Props) {
             />
           </div>
 
-          {emailEnabled ? (
+          {emailEnabled && (
             <div>
               <p className="mb-2">{t("email")}</p>
               <TextInput
@@ -89,7 +89,7 @@ export default function NewUserModal({ onClose }: Props) {
                 value={form.email}
               />
             </div>
-          ) : undefined}
+          )}
 
           <div>
             <p className="mb-2">

components/ModalContent/PreservedFormatsModal.tsx

@@ -1,248 +0,0 @@
-import React, { useEffect, useState } from "react";
-import {
-  LinkIncludingShortenedCollectionAndTags,
-  ArchivedFormat,
-} from "@/types/global";
-import toast from "react-hot-toast";
-import Link from "next/link";
-import Modal from "../Modal";
-import { useRouter } from "next/router";
-import { useSession } from "next-auth/react";
-import {
-  pdfAvailable,
-  readabilityAvailable,
-  monolithAvailable,
-  screenshotAvailable,
-} from "@/lib/shared/getArchiveValidity";
-import PreservedFormatRow from "@/components/PreserverdFormatRow";
-import getPublicUserData from "@/lib/client/getPublicUserData";
-import { useTranslation } from "next-i18next";
-import { BeatLoader } from "react-spinners";
-import { useUser } from "@/hooks/store/user";
-import { useGetLink } from "@/hooks/store/links";
-
-type Props = {
-  onClose: Function;
-  link: LinkIncludingShortenedCollectionAndTags;
-};
-
-export default function PreservedFormatsModal({ onClose, link }: Props) {
-  const { t } = useTranslation();
-  const session = useSession();
-  const getLink = useGetLink();
-  const { data: user = {} } = useUser();
-  const router = useRouter();
-
-  let isPublic = router.pathname.startsWith("/public") ? true : undefined;
-
-  const [collectionOwner, setCollectionOwner] = useState({
-    id: null as unknown as number,
-    name: "",
-    username: "",
-    image: "",
-    archiveAsScreenshot: undefined as unknown as boolean,
-    archiveAsMonolith: undefined as unknown as boolean,
-    archiveAsPDF: undefined as unknown as boolean,
-  });
-
-  useEffect(() => {
-    const fetchOwner = async () => {
-      if (link.collection.ownerId !== user.id) {
-        const owner = await getPublicUserData(
-          link.collection.ownerId as number
-        );
-        setCollectionOwner(owner);
-      } else if (link.collection.ownerId === user.id) {
-        setCollectionOwner({
-          id: user.id as number,
-          name: user.name,
-          username: user.username as string,
-          image: user.image as string,
-          archiveAsScreenshot: user.archiveAsScreenshot as boolean,
-          archiveAsMonolith: user.archiveAsScreenshot as boolean,
-          archiveAsPDF: user.archiveAsPDF as boolean,
-        });
-      }
-    };
-
-    fetchOwner();
-  }, [link.collection.ownerId]);
-
-  const isReady = () => {
-    return (
-      link &&
-      (collectionOwner.archiveAsScreenshot === true
-        ? link.pdf && link.pdf !== "pending"
-        : true) &&
-      (collectionOwner.archiveAsMonolith === true
-        ? link.monolith && link.monolith !== "pending"
-        : true) &&
-      (collectionOwner.archiveAsPDF === true
-        ? link.pdf && link.pdf !== "pending"
-        : true) &&
-      link.readable &&
-      link.readable !== "pending"
-    );
-  };
-
-  const atLeastOneFormatAvailable = () => {
-    return (
-      screenshotAvailable(link) ||
-      pdfAvailable(link) ||
-      readabilityAvailable(link) ||
-      monolithAvailable(link)
-    );
-  };
-
-  useEffect(() => {
-    (async () => {
-      await getLink.mutateAsync(link.id as number);
-    })();
-
-    let interval: any;
-
-    if (!isReady()) {
-      interval = setInterval(async () => {
-        await getLink.mutateAsync(link.id as number);
-      }, 5000);
-    } else {
-      if (interval) {
-        clearInterval(interval);
-      }
-    }
-
-    return () => {
-      if (interval) {
-        clearInterval(interval);
-      }
-    };
-  }, [link?.monolith]);
-
-  const updateArchive = async () => {
-    const load = toast.loading(t("sending_request"));
-
-    const response = await fetch(`/api/v1/links/${link?.id}/archive`, {
-      method: "PUT",
-    });
-
-    const data = await response.json();
-    toast.dismiss(load);
-
-    if (response.ok) {
-      await getLink.mutateAsync(link?.id as number);
-
-      toast.success(t("link_being_archived"));
-    } else toast.error(data.response);
-  };
-
-  return (
-    <Modal toggleModal={onClose}>
-      <p className="text-xl font-thin">{t("preserved_formats")}</p>
-      <div className="divider mb-2 mt-1"></div>
-      {screenshotAvailable(link) ||
-      pdfAvailable(link) ||
-      readabilityAvailable(link) ||
-      monolithAvailable(link) ? (
-        <p className="mb-3">{t("available_formats")}</p>
-      ) : (
-        ""
-      )}
-
-      <div className={`flex flex-col gap-3`}>
-        {monolithAvailable(link) ? (
-          <PreservedFormatRow
-            name={t("webpage")}
-            icon={"bi-filetype-html"}
-            format={ArchivedFormat.monolith}
-            link={link}
-            downloadable={true}
-          />
-        ) : undefined}
-
-        {screenshotAvailable(link) ? (
-          <PreservedFormatRow
-            name={t("screenshot")}
-            icon={"bi-file-earmark-image"}
-            format={
-              link?.image?.endsWith("png")
-                ? ArchivedFormat.png
-                : ArchivedFormat.jpeg
-            }
-            link={link}
-            downloadable={true}
-          />
-        ) : undefined}
-
-        {pdfAvailable(link) ? (
-          <PreservedFormatRow
-            name={t("pdf")}
-            icon={"bi-file-earmark-pdf"}
-            format={ArchivedFormat.pdf}
-            link={link}
-            downloadable={true}
-          />
-        ) : undefined}
-
-        {readabilityAvailable(link) ? (
-          <PreservedFormatRow
-            name={t("readable")}
-            icon={"bi-file-earmark-text"}
-            format={ArchivedFormat.readability}
-            link={link}
-          />
-        ) : undefined}
-
-        {!isReady() && !atLeastOneFormatAvailable() ? (
-          <div className={`w-full h-full flex flex-col justify-center p-10`}>
-            <BeatLoader
-              color="oklch(var(--p))"
-              className="mx-auto mb-3"
-              size={30}
-            />
-
-            <p className="text-center text-2xl">{t("preservation_in_queue")}</p>
-            <p className="text-center text-lg">{t("check_back_later")}</p>
-          </div>
-        ) : !isReady() && atLeastOneFormatAvailable() ? (
-          <div className={`w-full h-full flex flex-col justify-center p-5`}>
-            <BeatLoader
-              color="oklch(var(--p))"
-              className="mx-auto mb-3"
-              size={20}
-            />
-            <p className="text-center">{t("there_are_more_formats")}</p>
-            <p className="text-center text-sm">{t("check_back_later")}</p>
-          </div>
-        ) : undefined}
-
-        <div
-          className={`flex flex-col sm:flex-row gap-3 items-center justify-center ${
-            isReady() ? "sm:mt " : ""
-          }`}
-        >
-          <Link
-            href={`https://web.archive.org/web/${link?.url?.replace(
-              /(^\w+:|^)\/\//,
-              ""
-            )}`}
-            target="_blank"
-            className="text-neutral duration-100 hover:opacity-60 flex gap-2 w-1/2 justify-center items-center text-sm"
-          >
-            <p className="whitespace-nowrap">{t("view_latest_snapshot")}</p>
-            <i className="bi-box-arrow-up-right" />
-          </Link>
-          {link?.collection.ownerId === session.data?.user.id && (
-            <div className="btn btn-outline" onClick={updateArchive}>
-              <div>
-                <p>{t("refresh_preserved_formats")}</p>
-                <p className="text-xs">
-                  {t("this_deletes_current_preservations")}
-                </p>
-              </div>
-            </div>
-          )}
-        </div>
-      </div>
-    </Modal>
-  );
-}

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,
@@ -70,7 +73,7 @@ export default function UploadFileModal({ onClose }: Props) {
 
   useEffect(() => {
     setOptionsExpanded(false);
-    if (router.query.id) {
+    if (router.pathname.startsWith("/collections/") && router.query.id) {
       const currentCollection = collections.find(
         (e) => e.id == Number(router.query.id)
       );
@@ -150,7 +153,7 @@ export default function UploadFileModal({ onClose }: Props) {
           <label className="btn h-10 btn-sm w-full border border-neutral-content hover:border-neutral-content flex justify-between">
             <input
               type="file"
-              accept=".pdf,.png,.jpg,.jpeg,.html"
+              accept=".pdf,.png,.jpg,.jpeg"
               className="cursor-pointer custom-file-input"
               onChange={(e) => e.target.files && setFile(e.target.files[0])}
             />
@@ -163,7 +166,7 @@ export default function UploadFileModal({ onClose }: Props) {
         </div>
         <div className="sm:col-span-2 col-span-5">
           <p className="mb-2">{t("collection")}</p>
-          {link.collection.name ? (
+          {link.collection.name && (
             <CollectionSelection
               onChange={setCollection}
               defaultValue={{
@@ -171,10 +174,10 @@ export default function UploadFileModal({ onClose }: Props) {
                 value: link.collection.id,
               }}
             />
-          ) : null}
+          )}
         </div>
       </div>
-      {optionsExpanded ? (
+      {optionsExpanded && (
         <div className="mt-5">
           <div className="grid sm:grid-cols-2 gap-3">
             <div>
@@ -204,12 +207,12 @@ export default function UploadFileModal({ onClose }: Props) {
                   setLink({ ...link, description: e.target.value })
                 }
                 placeholder={t("description_placeholder")}
-                className="resize-none w-full rounded-md p-2 border-neutral-content bg-base-200 focus:border-sky-300 dark:focus:border-sky-600 border-solid border outline-none duration-100"
+                className="resize-none w-full h-32 rounded-md p-2 border-neutral-content bg-base-200 focus:border-primary border-solid border outline-none duration-100"
               />
             </div>
           </div>
         </div>
-      ) : undefined}
+      )}
       <div className="flex justify-between items-center mt-5">
         <div
           onClick={() => setOptionsExpanded(!optionsExpanded)}

components/Navbar.tsx

@@ -114,7 +114,7 @@ export default function Navbar() {
 
       <MobileNavigation />
 
-      {sidebar ? (
+      {sidebar && (
         <div className="fixed top-0 bottom-0 right-0 left-0 bg-black bg-opacity-10 backdrop-blur-sm flex items-center fade-in z-40">
           <ClickAwayHandler className="h-full" onClickOutside={toggleSidebar}>
             <div className="slide-right h-full shadow-lg">
@@ -122,16 +122,14 @@ export default function Navbar() {
             </div>
           </ClickAwayHandler>
         </div>
-      ) : null}
-      {newLinkModal ? (
-        <NewLinkModal onClose={() => setNewLinkModal(false)} />
-      ) : undefined}
-      {newCollectionModal ? (
+      )}
+      {newLinkModal && <NewLinkModal onClose={() => setNewLinkModal(false)} />}
+      {newCollectionModal && (
         <NewCollectionModal onClose={() => setNewCollectionModal(false)} />
-      ) : undefined}
-      {uploadFileModal ? (
+      )}
+      {uploadFileModal && (
         <UploadFileModal onClose={() => setUploadFileModal(false)} />
-      ) : undefined}
+      )}
     </div>
   );
 }

components/NoLinksFound.tsx

@@ -39,9 +39,7 @@ export default function NoLinksFound({ text }: Props) {
           </span>
         </div>
       </div>
-      {newLinkModal ? (
-        <NewLinkModal onClose={() => setNewLinkModal(false)} />
-      ) : undefined}
+      {newLinkModal && <NewLinkModal onClose={() => setNewLinkModal(false)} />}
     </div>
   );
 }

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/PreserverdFormatRow.tsx

@@ -4,7 +4,6 @@ import {
 } from "@/types/global";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { useGetLink } from "@/hooks/store/links";
 
 type Props = {
   name: string;
@@ -21,8 +20,6 @@ export default function PreservedFormatRow({
   link,
   downloadable,
 }: Props) {
-  const getLink = useGetLink();
-
   const router = useRouter();
 
   let isPublic = router.pathname.startsWith("/public") ? true : undefined;
@@ -52,11 +49,9 @@ export default function PreservedFormatRow({
   };
 
   return (
-    <div className="flex justify-between items-center pr-1 border border-neutral-content rounded-md">
+    <div className="flex justify-between items-center">
       <div className="flex gap-2 items-center">
-        <div className="bg-primary text-primary-content p-2 rounded-l-md">
-          <i className={`${icon} text-2xl`} />
-        </div>
+        <i className={`${icon} text-2xl text-primary`} />
         <p>{name}</p>
       </div>
 
@@ -64,7 +59,7 @@ export default function PreservedFormatRow({
         {downloadable || false ? (
           <div
             onClick={() => handleDownload()}
-            className="btn btn-sm btn-square"
+            className="btn btn-sm btn-square btn-ghost"
           >
             <i className="bi-cloud-arrow-down text-xl text-neutral" />
           </div>
@@ -75,9 +70,9 @@ export default function PreservedFormatRow({
             isPublic ? "/public" : ""
           }/preserved/${link?.id}?format=${format}`}
           target="_blank"
-          className="btn btn-sm btn-square"
+          className="btn btn-sm btn-square btn-ghost"
         >
-          <i className="bi-box-arrow-up-right text-xl text-neutral" />
+          <i className="bi-box-arrow-up-right text-lg text-neutral" />
         </Link>
       </div>
     </div>

components/ProfileDropdown.tsx

@@ -60,7 +60,7 @@ export default function ProfileDropdown() {
             })}
           </div>
         </li>
-        {isAdmin ? (
+        {isAdmin && (
           <li>
             <Link
               href="/admin"
@@ -72,7 +72,7 @@ export default function ProfileDropdown() {
               {t("server_administration")}
             </Link>
           </li>
-        ) : null}
+        )}
         <li>
           <div
             onClick={() => {

components/ReadableView.tsx

@@ -3,7 +3,6 @@ import { readabilityAvailable } from "@/lib/shared/getArchiveValidity";
 import isValidUrl from "@/lib/shared/isValidUrl";
 import {
   ArchivedFormat,
-  CollectionIncludingMembersAndLinkCount,
   LinkIncludingShortenedCollectionAndTags,
 } from "@/types/global";
 import ColorThief, { RGBColor } from "colorthief";
@@ -11,11 +10,11 @@ import DOMPurify from "dompurify";
 import Image from "next/image";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import React, { useEffect, useMemo, useState } from "react";
-import LinkActions from "./LinkViews/LinkComponents/LinkActions";
+import React, { useEffect, useState } from "react";
 import { useTranslation } from "next-i18next";
-import { useCollections } from "@/hooks/store/collections";
 import { useGetLink } from "@/hooks/store/links";
+import { IconWeight } from "@phosphor-icons/react";
+import Icon from "./Icon";
 
 type LinkContent = {
   title: string;
@@ -46,13 +45,6 @@ export default function ReadableView({ link }: Props) {
   const router = useRouter();
 
   const getLink = useGetLink();
-  const { data: collections = [] } = useCollections();
-
-  const collection = useMemo(() => {
-    return collections.find(
-      (e) => e.id === link.collection.id
-    ) as CollectionIncludingMembersAndLinkCount;
-  }, [collections, link]);
 
   useEffect(() => {
     const fetchLinkContent = async () => {
@@ -73,9 +65,9 @@ export default function ReadableView({ link }: Props) {
   }, [link]);
 
   useEffect(() => {
-    if (link) getLink.mutateAsync(link?.id as number);
+    if (link) getLink.mutateAsync({ id: link.id as number });
 
-    let interval: any;
+    let interval: NodeJS.Timeout | null = null;
     if (
       link &&
       (link?.image === "pending" ||
@@ -88,7 +80,10 @@ export default function ReadableView({ link }: Props) {
         !link?.monolith)
     ) {
       interval = setInterval(
-        () => getLink.mutateAsync(link.id as number),
+        () =>
+          getLink.mutateAsync({
+            id: link.id as number,
+          }),
         5000
       );
     } else {
@@ -186,7 +181,7 @@ export default function ReadableView({ link }: Props) {
                   link?.name || link?.description || link?.url || ""
                 )}
               </p>
-              {link?.url ? (
+              {link?.url && (
                 <Link
                   href={link?.url || ""}
                   title={link?.url}
@@ -195,11 +190,10 @@ export default function ReadableView({ link }: Props) {
                 >
                   <i className="bi-link-45deg"></i>
 
-                  {isValidUrl(link?.url || "")
-                    ? new URL(link?.url as string).host
-                    : undefined}
+                  {isValidUrl(link?.url || "") &&
+                    new URL(link?.url as string).host}
                 </Link>
-              ) : undefined}
+              )}
             </div>
           </div>
 
@@ -208,10 +202,21 @@ export default function ReadableView({ link }: Props) {
               href={`/collections/${link?.collection.id}`}
               className="flex items-center gap-1 cursor-pointer hover:opacity-60 duration-100 mr-2 z-10"
             >
-              <i
-                className="bi-folder-fill drop-shadow text-2xl"
-                style={{ color: link?.collection.color }}
-              ></i>
+              {link.collection.icon ? (
+                <Icon
+                  icon={link.collection.icon}
+                  size={30}
+                  weight={
+                    (link.collection.iconWeight || "regular") as IconWeight
+                  }
+                  color={link.collection.color}
+                />
+              ) : (
+                <i
+                  className="bi-folder-fill text-2xl"
+                  style={{ color: link.collection.color }}
+                ></i>
+              )}
               <p
                 title={link?.collection.name}
                 className="text-lg truncate max-w-[12rem]"
@@ -243,13 +248,6 @@ export default function ReadableView({ link }: Props) {
 
           {link?.name ? <p>{unescapeString(link?.description)}</p> : undefined}
         </div>
-
-        <LinkActions
-          link={link}
-          collection={collection}
-          position="top-3 right-3"
-          alignToTop
-        />
       </div>
 
       <div className="flex flex-col gap-5 h-full">

components/ToggleDarkMode.tsx

@@ -1,28 +1,34 @@
 import useLocalSettingsStore from "@/store/localSettings";
-import { useEffect, useState } from "react";
+import { useEffect, useState, ChangeEvent } from "react";
 import { useTranslation } from "next-i18next";
+import clsx from "clsx";
 
 type Props = {
   className?: string;
+  align?: "left" | "right";
 };
 
-export default function ToggleDarkMode({ className }: Props) {
+export default function ToggleDarkMode({ className, align }: Props) {
   const { t } = useTranslation();
   const { settings, updateSettings } = useLocalSettingsStore();
 
-  const [theme, setTheme] = useState(localStorage.getItem("theme"));
+  const [theme, setTheme] = useState<string | null>(
+    localStorage.getItem("theme")
+  );
 
-  const handleToggle = (e: any) => {
+  const handleToggle = (e: ChangeEvent<HTMLInputElement>) => {
     setTheme(e.target.checked ? "dark" : "light");
   };
 
   useEffect(() => {
-    updateSettings({ theme: theme as string });
+    if (theme) {
+      updateSettings({ theme });
+    }
   }, [theme]);
 
   return (
     <div
-      className="tooltip tooltip-bottom"
+      className={clsx("tooltip", align ? `tooltip-${align}` : "tooltip-bottom")}
       data-tip={t("switch_to", {
         theme: settings.theme === "light" ? "Dark" : "Light",
       })}
@@ -34,7 +40,7 @@ export default function ToggleDarkMode({ className }: Props) {
           type="checkbox"
           onChange={handleToggle}
           className="theme-controller"
-          checked={localStorage.getItem("theme") === "light" ? false : true}
+          checked={theme === "dark"}
         />
         <i className="bi-sun-fill text-xl swap-on"></i>
         <i className="bi-moon-fill text-xl swap-off"></i>

components/UserListing.tsx

@@ -74,12 +74,12 @@ const UserListing = (
         </tbody>
       </table>
 
-      {deleteUserModal.isOpen && deleteUserModal.userId ? (
+      {deleteUserModal.isOpen && deleteUserModal.userId && (
         <DeleteUserModal
           onClose={() => setDeleteUserModal({ isOpen: false, userId: null })}
           userId={deleteUserModal.userId}
         />
-      ) : null}
+      )}
     </div>
   );
 };

components/ViewDropdown.tsx

@@ -1,7 +1,8 @@
 import React, { Dispatch, SetStateAction, useEffect } from "react";
 import useLocalSettingsStore from "@/store/localSettings";
-
 import { ViewMode } from "@/types/global";
+import { dropdownTriggerer } from "@/lib/client/utils";
+import { useTranslation } from "next-i18next";
 
 type Props = {
   viewMode: ViewMode;
@@ -9,64 +10,141 @@ type Props = {
 };
 
 export default function ViewDropdown({ viewMode, setViewMode }: Props) {
-  const { updateSettings } = useLocalSettingsStore();
-
-  const onChangeViewMode = (
-    e: React.MouseEvent<HTMLButtonElement>,
-    viewMode: ViewMode
-  ) => {
-    setViewMode(viewMode);
-  };
+  const { settings, updateSettings } = useLocalSettingsStore((state) => state);
+  const { t } = useTranslation();
 
   useEffect(() => {
     updateSettings({ viewMode });
-  }, [viewMode]);
+  }, [viewMode, updateSettings]);
+
+  const onChangeViewMode = (mode: ViewMode) => {
+    setViewMode(mode);
+    updateSettings({ viewMode });
+  };
+
+  const toggleShowSetting = (setting: keyof typeof settings.show) => {
+    const newShowSettings = {
+      ...settings.show,
+      [setting]: !settings.show[setting],
+    };
+    updateSettings({ show: newShowSettings });
+  };
+
+  const onColumnsChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    updateSettings({ columns: Number(e.target.value) });
+  };
 
   return (
-    <div className="p-1 flex flex-row gap-1 border border-neutral-content rounded-[0.625rem]">
-      <button
-        onClick={(e) => onChangeViewMode(e, ViewMode.Card)}
-        className={`btn btn-square btn-sm btn-ghost ${
-          viewMode == ViewMode.Card
-            ? "bg-primary/20 hover:bg-primary/20"
-            : "hover:bg-neutral/20"
-        }`}
+    <div className="dropdown dropdown-bottom dropdown-end">
+      <div
+        tabIndex={0}
+        role="button"
+        onMouseDown={dropdownTriggerer}
+        className="btn btn-sm btn-square btn-ghost border-none"
       >
-        <i className="bi-grid w-4 h-4 text-neutral"></i>
-      </button>
-
-      <button
-        onClick={(e) => onChangeViewMode(e, ViewMode.Masonry)}
-        className={`btn btn-square btn-sm btn-ghost ${
-          viewMode == ViewMode.Masonry
-            ? "bg-primary/20 hover:bg-primary/20"
-            : "hover:bg-neutral/20"
-        }`}
+        {viewMode === ViewMode.Card ? (
+          <i className="bi-grid w-4 h-4 text-neutral"></i>
+        ) : viewMode === ViewMode.Masonry ? (
+          <i className="bi-columns-gap w-4 h-4 text-neutral"></i>
+        ) : (
+          <i className="bi-view-stacked w-4 h-4 text-neutral"></i>
+        )}
+      </div>
+      <ul
+        tabIndex={0}
+        className="dropdown-content z-[30] menu shadow bg-base-200 min-w-52 border border-neutral-content rounded-xl mt-1"
       >
-        <i className="bi bi-columns-gap w-4 h-4 text-neutral"></i>
-      </button>
-
-      <button
-        onClick={(e) => onChangeViewMode(e, ViewMode.List)}
-        className={`btn btn-square btn-sm btn-ghost ${
-          viewMode == ViewMode.List
-            ? "bg-primary/20 hover:bg-primary/20"
-            : "hover:bg-neutral/20"
-        }`}
-      >
-        <i className="bi bi-view-stacked w-4 h-4 text-neutral"></i>
-      </button>
-
-      {/* <button
-        onClick={(e) => onChangeViewMode(e, ViewMode.Grid)}
-        className={`btn btn-square btn-sm btn-ghost ${
-          viewMode == ViewMode.Grid
-            ? "bg-primary/20 hover:bg-primary/20"
-            : "hover:bg-neutral/20"
-        }`}
-      >
-        <i className="bi-columns-gap w-4 h-4 text-neutral"></i>
-      </button> */}
+        <p className="mb-1 text-sm text-neutral">{t("view")}</p>
+        <div className="p-1 flex w-full justify-between gap-1 border border-neutral-content rounded-[0.625rem]">
+          <button
+            onClick={(e) => onChangeViewMode(ViewMode.Card)}
+            className={`btn w-[31%] btn-sm btn-ghost ${
+              viewMode === ViewMode.Card
+                ? "bg-primary/20 hover:bg-primary/20"
+                : "hover:bg-neutral/20"
+            }`}
+          >
+            <i className="bi-grid text-lg text-neutral"></i>
+          </button>
+          <button
+            onClick={(e) => onChangeViewMode(ViewMode.Masonry)}
+            className={`btn w-[31%] btn-sm btn-ghost ${
+              viewMode === ViewMode.Masonry
+                ? "bg-primary/20 hover:bg-primary/20"
+                : "hover:bg-neutral/20"
+            }`}
+          >
+            <i className="bi-columns-gap text-lg text-neutral"></i>
+          </button>
+          <button
+            onClick={(e) => onChangeViewMode(ViewMode.List)}
+            className={`btn w-[31%] btn-sm btn-ghost ${
+              viewMode === ViewMode.List
+                ? "bg-primary/20 hover:bg-primary/20"
+                : "hover:bg-neutral/20"
+            }`}
+          >
+            <i className="bi-view-stacked text-lg text-neutral"></i>
+          </button>
+        </div>
+        <p className="mb-1 mt-2 text-sm text-neutral">{t("show")}</p>
+        {Object.entries(settings.show)
+          .filter((e) =>
+            settings.viewMode === ViewMode.List // Hide tags, image, icon, and description checkboxes in list view
+              ? e[0] !== "tags" &&
+                e[0] !== "image" &&
+                e[0] !== "icon" &&
+                e[0] !== "description"
+              : settings.viewMode === ViewMode.Card // Hide tags and description checkboxes in card view
+                ? e[0] !== "tags" && e[0] !== "description"
+                : true
+          )
+          .map(([key, value]) => (
+            <li key={key}>
+              <label className="label cursor-pointer flex justify-start">
+                <input
+                  type="checkbox"
+                  className="checkbox checkbox-primary"
+                  checked={value}
+                  onChange={() =>
+                    toggleShowSetting(key as keyof typeof settings.show)
+                  }
+                />
+                <span className="label-text whitespace-nowrap">{t(key)}</span>
+              </label>
+            </li>
+          ))}
+        {settings.viewMode !== ViewMode.List && (
+          <>
+            <p className="mb-1 mt-2 text-sm text-neutral">
+              {t("columns")}:{" "}
+              {settings.columns === 0 ? t("default") : settings.columns}
+            </p>
+            <div>
+              <input
+                type="range"
+                min={0}
+                max="8"
+                value={settings.columns}
+                onChange={(e) => onColumnsChange(e)}
+                className="range range-xs range-primary"
+                step="1"
+              />
+              <div className="flex w-full justify-between px-2 text-xs text-neutral select-none">
+                <span>|</span>
+                <span>|</span>
+                <span>|</span>
+                <span>|</span>
+                <span>|</span>
+                <span>|</span>
+                <span>|</span>
+                <span>|</span>
+                <span>|</span>
+              </div>
+            </div>
+          </>
+        )}
+      </ul>
     </div>
   );
 }

e2e/data/user.ts

@@ -2,19 +2,17 @@ import axios, { AxiosError } from "axios"
 
 axios.defaults.baseURL = "http://localhost:3000"
 
-export async function seedUser (username?: string, password?: string, name?: string) {
+export async function seedUser(username?: string, password?: string, name?: string) {
   try {
     return await axios.post("/api/v1/users", {
       username: username || "test",
       password: password || "password",
       name: name || "Test User",
     })
-  } catch (e: any) {
-    if (e instanceof AxiosError) {
-      if (e.response?.status === 400) {
-        return
-      }
-    }
-    throw e
+  } catch (error) {
+    const axiosError = error as AxiosError;
+    if (axiosError && axiosError.response?.status === 400) return
+
+    throw error
   }
 }

hooks/store/dashboardData.tsx

@@ -1,4 +1,3 @@
-import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
 import { useQuery } from "@tanstack/react-query";
 import { useSession } from "next-auth/react";
 
@@ -7,11 +6,11 @@ const useDashboardData = () => {
 
   return useQuery({
     queryKey: ["dashboardData"],
-    queryFn: async (): Promise<LinkIncludingShortenedCollectionAndTags[]> => {
-      const response = await fetch("/api/v1/dashboard");
+    queryFn: async () => {
+      const response = await fetch("/api/v2/dashboard");
       const data = await response.json();
 
-      return data.response;
+      return data.data;
     },
     enabled: status === "authenticated",
   });

hooks/store/links.tsx

@@ -13,6 +13,7 @@ import {
 } from "@/types/global";
 import { useRouter } from "next/router";
 import { useSession } from "next-auth/react";
+import Jimp from "jimp";
 
 const useLinks = (params: LinkRequestQuery = {}) => {
   const router = useRouter();
@@ -120,8 +121,11 @@ const useAddLink = () => {
     },
     onSuccess: (data) => {
       queryClient.setQueryData(["dashboardData"], (oldData: any) => {
-        if (!oldData) return undefined;
-        return [data, ...oldData];
+        if (!oldData?.links) return undefined;
+        return {
+          ...oldData,
+          links: [data, ...oldData.links],
+        };
       });
 
       queryClient.setQueriesData({ queryKey: ["links"] }, (oldData: any) => {
@@ -160,8 +164,8 @@ const useUpdateLink = () => {
     },
     onSuccess: (data) => {
       // queryClient.setQueryData(["dashboardData"], (oldData: any) => {
-      //   if (!oldData) return undefined;
-      //   return oldData.map((e: any) => (e.id === data.id ? data : e));
+      //   if (!oldData?.links) return undefined;
+      //   return oldData.links.map((e: any) => (e.id === data.id ? data : e));
       // });
 
       // queryClient.setQueriesData({ queryKey: ["links"] }, (oldData: any) => {
@@ -201,8 +205,11 @@ const useDeleteLink = () => {
     },
     onSuccess: (data) => {
       queryClient.setQueryData(["dashboardData"], (oldData: any) => {
-        if (!oldData) return undefined;
-        return oldData.filter((e: any) => e.id !== data.id);
+        if (!oldData?.links) return undefined;
+        return {
+          ...oldData,
+          links: oldData.links.filter((e: any) => e.id !== data.id),
+        };
       });
 
       queryClient.setQueriesData({ queryKey: ["links"] }, (oldData: any) => {
@@ -225,9 +232,21 @@ const useDeleteLink = () => {
 const useGetLink = () => {
   const queryClient = useQueryClient();
 
+  const router = useRouter();
+
   return useMutation({
-    mutationFn: async (id: number) => {
-      const response = await fetch(`/api/v1/links/${id}`);
+    mutationFn: async ({
+      id,
+      isPublicRoute = router.pathname.startsWith("/public") ? true : undefined,
+    }: {
+      id: number;
+      isPublicRoute?: boolean;
+    }) => {
+      const path = isPublicRoute
+        ? `/api/v1/public/links/${id}`
+        : `/api/v1/links/${id}`;
+
+      const response = await fetch(path);
       const data = await response.json();
 
       if (!response.ok) throw new Error(data.response);
@@ -236,8 +255,11 @@ const useGetLink = () => {
     },
     onSuccess: (data) => {
       queryClient.setQueryData(["dashboardData"], (oldData: any) => {
-        if (!oldData) return undefined;
-        return oldData.map((e: any) => (e.id === data.id ? data : e));
+        if (!oldData?.links) return undefined;
+        return {
+          ...oldData,
+          links: oldData.links.map((e: any) => (e.id === data.id ? data : e)),
+        };
       });
 
       queryClient.setQueriesData({ queryKey: ["links"] }, (oldData: any) => {
@@ -250,7 +272,20 @@ const useGetLink = () => {
         };
       });
 
-      queryClient.invalidateQueries({ queryKey: ["publicLinks"] });
+      queryClient.setQueriesData(
+        { queryKey: ["publicLinks"] },
+        (oldData: any) => {
+          if (!oldData) return undefined;
+          return {
+            pages: oldData.pages.map((page: any) =>
+              page.map((item: any) => (item.id === data.id ? data : item))
+            ),
+            pageParams: oldData.pageParams,
+          };
+        }
+      );
+
+      // queryClient.invalidateQueries({ queryKey: ["publicLinks"] });
     },
   });
 };
@@ -276,8 +311,8 @@ const useBulkDeleteLinks = () => {
     },
     onSuccess: (data) => {
       queryClient.setQueryData(["dashboardData"], (oldData: any) => {
-        if (!oldData) return undefined;
-        return oldData.filter((e: any) => !data.includes(e.id));
+        if (!oldData.links) return undefined;
+        return oldData.links.filter((e: any) => !data.includes(e.id));
       });
 
       queryClient.setQueriesData({ queryKey: ["links"] }, (oldData: any) => {
@@ -351,8 +386,11 @@ const useUploadFile = () => {
     },
     onSuccess: (data) => {
       queryClient.setQueryData(["dashboardData"], (oldData: any) => {
-        if (!oldData) return undefined;
-        return [data, ...oldData];
+        if (!oldData?.links) return undefined;
+        return {
+          ...oldData,
+          links: [data, ...oldData.links],
+        };
       });
 
       queryClient.setQueriesData({ queryKey: ["links"] }, (oldData: any) => {
@@ -370,6 +408,67 @@ const useUploadFile = () => {
   });
 };
 
+const useUpdatePreview = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({ linkId, file }: { linkId: number; file: File }) => {
+      const formBody = new FormData();
+
+      if (!linkId || !file)
+        throw new Error("Error generating preview: Invalid parameters");
+
+      formBody.append("file", file);
+
+      const res = await fetch(
+        `/api/v1/archives/${linkId}?format=` + ArchivedFormat.jpeg,
+        {
+          body: formBody,
+          method: "PUT",
+        }
+      );
+
+      const data = res.json();
+
+      return data;
+    },
+    onSuccess: (data) => {
+      queryClient.setQueryData(["dashboardData"], (oldData: any) => {
+        if (!oldData?.links) return undefined;
+        return {
+          ...oldData,
+          links: oldData.links.map((e: any) =>
+            e.id === data.response.id
+              ? {
+                  ...e,
+                  preview: `archives/preview/${e.collectionId}/${e.id}.jpeg`,
+                }
+              : e
+          ),
+        };
+      });
+
+      queryClient.setQueriesData({ queryKey: ["links"] }, (oldData: any) => {
+        if (!oldData) return undefined;
+        return {
+          pages: oldData.pages.map((page: any) =>
+            page.map((item: any) =>
+              item.id === data.response.id
+                ? {
+                    ...item,
+                    preview: `archives/preview/${item.collectionId}/${item.id}.jpeg`,
+                    updatedAt: new Date().toISOString(),
+                  }
+                : item
+            )
+          ),
+          pageParams: oldData.pageParams,
+        };
+      });
+    },
+  });
+};
+
 const useBulkEditLinks = () => {
   const queryClient = useQueryClient();
 
@@ -403,8 +502,8 @@ const useBulkEditLinks = () => {
     onSuccess: (data, { links, newData, removePreviousTags }) => {
       // TODO: Fix these
       // queryClient.setQueryData(["dashboardData"], (oldData: any) => {
-      //   if (!oldData) return undefined;
-      //   return oldData.map((e: any) =>
+      //   if (!oldData?.links) return undefined;
+      //   return oldData.links.map((e: any) =>
       //     data.find((d: any) => d.id === e.id) ? data : e
       //   );
       // });
@@ -454,4 +553,5 @@ export {
   useGetLink,
   useBulkEditLinks,
   resetInfiniteQueryPagination,
+  useUpdatePreview,
 };

layouts/CenteredForm.tsx

@@ -23,7 +23,7 @@ export default function CenteredForm({
       data-testid={dataTestId}
     >
       <div className="m-auto flex flex-col gap-2 w-full">
-        {settings.theme ? (
+        {settings.theme && (
           <Image
             src={`/linkwarden_${
               settings.theme === "dark" ? "dark" : "light"
@@ -33,12 +33,12 @@ export default function CenteredForm({
             alt="Linkwarden"
             className="h-12 w-fit mx-auto"
           />
-        ) : undefined}
-        {text ? (
+        )}
+        {text && (
           <p className="text-lg max-w-[30rem] min-w-80 w-full mx-auto font-semibold px-2 text-center">
             {text}
           </p>
-        ) : undefined}
+        )}
         {children}
         <p className="text-center text-xs text-neutral mb-5">
           <Trans

layouts/MainLayout.tsx

@@ -34,9 +34,9 @@ export default function MainLayout({ children }: Props) {
 
   return (
     <div className="flex" data-testid="dashboard-wrapper">
-      {showAnnouncement ? (
+      {showAnnouncement && (
         <Announcement toggleAnnouncementBar={toggleAnnouncementBar} />
-      ) : undefined}
+      )}
       <div className="hidden lg:block">
         <Sidebar className={`fixed top-0`} />
       </div>

layouts/SettingsLayout.tsx

@@ -54,7 +54,7 @@ export default function SettingsLayout({ children }: Props) {
 
           {children}
 
-          {sidebar ? (
+          {sidebar && (
             <div className="fixed top-0 bottom-0 right-0 left-0 bg-black bg-opacity-10 backdrop-blur-sm flex items-center fade-in z-30">
               <ClickAwayHandler
                 className="h-full"
@@ -65,7 +65,7 @@ export default function SettingsLayout({ children }: Props) {
                 </div>
               </ClickAwayHandler>
             </div>
-          ) : null}
+          )}
         </div>
       </div>
     </>

lib/api/controllers/collections/collectionId/deleteCollectionById.ts

@@ -57,8 +57,8 @@ export default async function deleteCollection(
       },
     });
 
-    await removeFolder({ filePath: `archives/${collectionId}` });
-    await removeFolder({ filePath: `archives/preview/${collectionId}` });
+    removeFolder({ filePath: `archives/${collectionId}` });
+    removeFolder({ filePath: `archives/preview/${collectionId}` });
 
     await removeFromOrders(userId, collectionId);
 
@@ -100,8 +100,8 @@ async function deleteSubCollections(collectionId: number) {
       where: { id: subCollection.id },
     });
 
-    await removeFolder({ filePath: `archives/${subCollection.id}` });
-    await removeFolder({ filePath: `archives/preview/${subCollection.id}` });
+    removeFolder({ filePath: `archives/${subCollection.id}` });
+    removeFolder({ filePath: `archives/preview/${subCollection.id}` });
   }
 }
 

lib/api/controllers/collections/collectionId/updateCollectionById.ts

@@ -18,8 +18,6 @@ export default async function updateCollection(
   if (!(collectionIsAccessible?.ownerId === userId))
     return { response: "Collection is not accessible.", status: 401 };
 
-  console.log(data);
-
   if (data.parentId) {
     if (data.parentId !== ("root" as any)) {
       const findParentCollection = await prisma.collection.findUnique({
@@ -61,6 +59,8 @@ export default async function updateCollection(
         name: data.name.trim(),
         description: data.description,
         color: data.color,
+        icon: data.icon,
+        iconWeight: data.iconWeight,
         isPublic: data.isPublic,
         parent:
           data.parentId && data.parentId !== ("root" as any)

lib/api/controllers/collections/postCollection.ts

@@ -42,6 +42,8 @@ export default async function postCollection(
       name: collection.name.trim(),
       description: collection.description,
       color: collection.color,
+      icon: collection.icon,
+      iconWeight: collection.iconWeight,
       parent: collection.parentId
         ? {
             connect: {

lib/api/controllers/dashboard/getDashboardData.ts

@@ -1,11 +1,11 @@
 import { prisma } from "@/lib/api/db";
-import { LinkRequestQuery, Sort } from "@/types/global";
+import { LinkRequestQuery, Order, Sort } from "@/types/global";
 
 export default async function getDashboardData(
   userId: number,
   query: LinkRequestQuery
 ) {
-  let order: any = { id: "desc" };
+  let order: Order = { id: "desc" };
   if (query.sort === Sort.DateNewestFirst) order = { id: "desc" };
   else if (query.sort === Sort.DateOldestFirst) order = { id: "asc" };
   else if (query.sort === Sort.NameAZ) order = { name: "asc" };

lib/api/controllers/dashboard/getDashboardDataV2.ts

@@ -1,5 +1,5 @@
 import { prisma } from "@/lib/api/db";
-import { LinkRequestQuery, Sort } from "@/types/global";
+import { LinkRequestQuery, Order, Sort } from "@/types/global";
 
 type Response<D> =
   | {
@@ -17,7 +17,7 @@ export default async function getDashboardData(
   userId: number,
   query: LinkRequestQuery
 ): Promise<Response<any>> {
-  let order: any;
+  let order: Order = { id: "desc" };
   if (query.sort === Sort.DateNewestFirst) order = { id: "desc" };
   else if (query.sort === Sort.DateOldestFirst) order = { id: "asc" };
   else if (query.sort === Sort.NameAZ) order = { name: "asc" };
@@ -48,7 +48,7 @@ export default async function getDashboardData(
   });
 
   const pinnedLinks = await prisma.link.findMany({
-    take: 10,
+    take: 16,
     where: {
       AND: [
         {
@@ -80,7 +80,7 @@ export default async function getDashboardData(
   });
 
   const recentlyAddedLinks = await prisma.link.findMany({
-    take: 10,
+    take: 16,
     where: {
       collection: {
         OR: [
@@ -105,12 +105,17 @@ export default async function getDashboardData(
   });
 
   const links = [...recentlyAddedLinks, ...pinnedLinks].sort(
-    (a, b) => (new Date(b.id) as any) - (new Date(a.id) as any)
+    (a, b) => new Date(b.id).getTime() - new Date(a.id).getTime()
+  );
+
+  // Make sure links are unique
+  const uniqueLinks = links.filter(
+    (link, index, self) => index === self.findIndex((t) => t.id === link.id)
   );
 
   return {
     data: {
-      links,
+      links: uniqueLinks,
       numberOfPinnedLinks,
     },
     message: "Dashboard data fetched successfully.",

lib/api/controllers/links/getLinks.ts

@@ -1,11 +1,11 @@
 import { prisma } from "@/lib/api/db";
-import { LinkRequestQuery, Sort } from "@/types/global";
+import { LinkRequestQuery, Order, Sort } from "@/types/global";
 
 export default async function getLink(userId: number, query: LinkRequestQuery) {
   const POSTGRES_IS_ENABLED =
     process.env.DATABASE_URL?.startsWith("postgresql");
 
-  let order: any = { id: "desc" };
+  let order: Order = { id: "desc" };
   if (query.sort === Sort.DateNewestFirst) order = { id: "desc" };
   else if (query.sort === Sort.DateOldestFirst) order = { id: "asc" };
   else if (query.sort === Sort.NameAZ) order = { name: "asc" };

lib/api/controllers/links/linkId/updateLinkById.ts

@@ -2,7 +2,8 @@ import { prisma } from "@/lib/api/db";
 import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
 import { UsersAndCollections } from "@prisma/client";
 import getPermission from "@/lib/api/getPermission";
-import { moveFiles } from "@/lib/api/manageLinkFiles";
+import { moveFiles, removeFiles } from "@/lib/api/manageLinkFiles";
+import isValidUrl from "@/lib/shared/isValidUrl";
 
 export default async function updateLinkById(
   userId: number,
@@ -25,15 +26,15 @@ export default async function updateLinkById(
     (e: UsersAndCollections) => e.userId === userId
   );
 
-  // If the user is able to create a link, they can pin it to their dashboard only.
-  if (canPinPermission) {
+  // If the user is part of a collection, they can pin it to their dashboard
+  if (canPinPermission && data.pinnedBy && data.pinnedBy[0]) {
     const updatedLink = await prisma.link.update({
       where: {
         id: linkId,
       },
       data: {
         pinnedBy:
-          data?.pinnedBy && data.pinnedBy[0]
+          data?.pinnedBy && data.pinnedBy[0].id === userId
             ? { connect: { id: userId } }
             : { disconnect: { id: userId } },
       },
@@ -48,7 +49,7 @@ export default async function updateLinkById(
       },
     });
 
-    // return { response: updatedLink, status: 200 };
+    return { response: updatedLink, status: 200 };
   }
 
   const targetCollectionIsAccessible = await getPermission({
@@ -89,13 +90,41 @@ export default async function updateLinkById(
       status: 401,
     };
   else {
+    const oldLink = await prisma.link.findUnique({
+      where: {
+        id: linkId,
+      },
+    });
+
+    if (
+      data.url &&
+      oldLink &&
+      oldLink?.url !== data.url &&
+      isValidUrl(data.url)
+    ) {
+      await removeFiles(oldLink.id, oldLink.collectionId);
+    } else
+      return {
+        response: "Invalid URL.",
+        status: 401,
+      };
+
     const updatedLink = await prisma.link.update({
       where: {
         id: linkId,
       },
       data: {
         name: data.name,
+        url: data.url,
         description: data.description,
+        icon: data.icon,
+        iconWeight: data.iconWeight,
+        color: data.color,
+        image: oldLink?.url !== data.url ? null : undefined,
+        pdf: oldLink?.url !== data.url ? null : undefined,
+        readable: oldLink?.url !== data.url ? null : undefined,
+        monolith: oldLink?.url !== data.url ? null : undefined,
+        preview: oldLink?.url !== data.url ? null : undefined,
         collection: {
           connect: {
             id: data.collection.id,
@@ -121,7 +150,7 @@ export default async function updateLinkById(
           })),
         },
         pinnedBy:
-          data?.pinnedBy && data.pinnedBy[0]
+          data?.pinnedBy && data.pinnedBy[0]?.id === userId
             ? { connect: { id: userId } }
             : { disconnect: { id: userId } },
       },

lib/api/controllers/migration/exportData.ts

@@ -22,18 +22,5 @@ export default async function exportData(userId: number) {
 
   const { password, id, ...userData } = user;
 
-  function redactIds(obj: any) {
-    if (Array.isArray(obj)) {
-      obj.forEach((o) => redactIds(o));
-    } else if (obj !== null && typeof obj === "object") {
-      delete obj.id;
-      for (let key in obj) {
-        redactIds(obj[key]);
-      }
-    }
-  }
-
-  redactIds(userData);
-
   return { response: userData, status: 200 };
 }

lib/api/controllers/migration/importFromWallabag.ts

@@ -1,5 +1,4 @@
 import { prisma } from "@/lib/api/db";
-import { Backup } from "@/types/global";
 import createFolder from "@/lib/api/storage/createFolder";
 
 const MAX_LINKS_PER_USER = Number(process.env.MAX_LINKS_PER_USER) || 30000;

lib/api/controllers/public/links/getPublicLinksUnderCollection.ts

@@ -1,5 +1,5 @@
 import { prisma } from "@/lib/api/db";
-import { LinkRequestQuery, Sort } from "@/types/global";
+import { LinkRequestQuery, Order, Sort } from "@/types/global";
 
 export default async function getLink(
   query: Omit<LinkRequestQuery, "tagId" | "pinnedOnly">
@@ -7,7 +7,7 @@ export default async function getLink(
   const POSTGRES_IS_ENABLED =
     process.env.DATABASE_URL?.startsWith("postgresql");
 
-  let order: any;
+  let order: Order = { id: "desc" };
   if (query.sort === Sort.DateNewestFirst) order = { id: "desc" };
   else if (query.sort === Sort.DateOldestFirst) order = { id: "asc" };
   else if (query.sort === Sort.NameAZ) order = { name: "asc" };

lib/api/controllers/session/createSession.ts

@@ -29,7 +29,7 @@ export default async function createSession(
     secret: process.env.NEXTAUTH_SECRET as string,
   });
 
-  const createToken = await prisma.accessToken.create({
+  await prisma.accessToken.create({
     data: {
       name: sessionName || "Unknown Device",
       userId,

lib/api/controllers/users/userId/deleteUserById.ts

@@ -24,10 +24,7 @@ export default async function deleteUserById(
 
   if (!isServerAdmin) {
     if (user.password) {
-      const isPasswordValid = bcrypt.compareSync(
-        body.password,
-        user.password as string
-      );
+      const isPasswordValid = bcrypt.compareSync(body.password, user.password);
 
       if (!isPasswordValid && !isServerAdmin) {
         return {

lib/api/generatePreview.ts

@@ -16,7 +16,7 @@ const generatePreview = async (
         return;
       }
 
-      image.resize(1280, Jimp.AUTO).quality(20);
+      image.resize(1000, Jimp.AUTO).quality(20);
       const processedBuffer = await image.getBufferAsync(Jimp.MIME_JPEG);
 
       if (

lib/api/storage/moveFile.ts

@@ -14,7 +14,7 @@ export default async function moveFile(from: string, to: string) {
     };
 
     try {
-      s3Client.copyObject(copyParams, async (err: any) => {
+      s3Client.copyObject(copyParams, async (err: unknown) => {
         if (err) {
           console.error("Error copying the object:", err);
         } else {

lib/client/icons.ts

@@ -0,0 +1,18 @@
+import * as Icons from "@phosphor-icons/react";
+import { icons as iconData } from "@phosphor-icons/core";
+import { IconEntry as CoreEntry } from "@phosphor-icons/core";
+
+interface IconEntry extends CoreEntry {
+  Icon: Icons.Icon;
+}
+
+export const icons: ReadonlyArray<IconEntry> = iconData.map((entry) => ({
+  ...entry,
+  Icon: Icons[entry.pascal_name as keyof typeof Icons] as Icons.Icon,
+}));
+
+// if (process.env.NODE_ENV === "development") {
+//   console.log(`${icons.length} icons`);
+// }
+
+export const iconCount = Intl.NumberFormat("en-US").format(icons.length * 6);

lib/client/pinLink.ts

@@ -0,0 +1,47 @@
+import { useUpdateLink } from "@/hooks/store/links";
+import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
+import toast from "react-hot-toast";
+import { useTranslation } from "next-i18next";
+import { useUser } from "@/hooks/store/user";
+
+const usePinLink = () => {
+  const { t } = useTranslation();
+  const updateLink = useUpdateLink();
+  const { data: user = {} } = useUser();
+
+  // Return a function that can be used to pin/unpin the link
+  const pinLink = async (link: LinkIncludingShortenedCollectionAndTags) => {
+    const isAlreadyPinned = link?.pinnedBy && link.pinnedBy[0] ? true : false;
+
+    const load = toast.loading(t("updating"));
+
+    try {
+      await updateLink.mutateAsync(
+        {
+          ...link,
+          pinnedBy: isAlreadyPinned ? [{ id: undefined }] : [{ id: user.id }],
+        },
+        {
+          onSettled: (data, error) => {
+            toast.dismiss(load);
+
+            if (error) {
+              toast.error(error.message);
+            } else {
+              toast.success(
+                isAlreadyPinned ? t("link_unpinned") : t("link_pinned")
+              );
+            }
+          },
+        }
+      );
+    } catch (e) {
+      toast.dismiss(load);
+      console.error(e);
+    }
+  };
+
+  return pinLink;
+};
+
+export default usePinLink;

lib/client/resizeImage.ts

@@ -9,7 +9,7 @@ export const resizeImage = (file: File): Promise<Blob> =>
       "JPEG", // output format
       100, // quality
       0, // rotation
-      (uri: any) => {
+      (uri) => {
         resolve(uri as Blob);
       },
       "blob" // output type

lib/client/utils.ts

@@ -7,10 +7,15 @@ export function isPWA() {
 }
 
 export function isIphone() {
-  return /iPhone/.test(navigator.userAgent) && !(window as any).MSStream;
+  return (
+    /iPhone/.test(navigator.userAgent) &&
+    !(window as unknown as { MSStream?: any }).MSStream
+  );
 }
 
-export function dropdownTriggerer(e: any) {
+export function dropdownTriggerer(
+  e: React.FocusEvent<HTMLElement> | React.MouseEvent<HTMLElement>
+) {
   let targetEl = e.currentTarget;
   if (targetEl && targetEl.matches(":focus")) {
     setTimeout(function () {

lib/shared/getArchiveValidity.ts

@@ -39,7 +39,9 @@ export function monolithAvailable(
   );
 }
 
-export function previewAvailable(link: any) {
+export function previewAvailable(
+  link: LinkIncludingShortenedCollectionAndTags
+) {
   return (
     link &&
     link.preview &&

next-i18next.config.js

@@ -2,7 +2,7 @@
 module.exports = {
   i18n: {
     defaultLocale: "en",
-    locales: ["en", "it", "fr", "zh", "uk"],
+    locales: ["en", "it", "fr", "zh", "uk", "pt-BR"],
   },
   reloadOnPrerender: process.env.NODE_ENV === "development",
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "linkwarden",
-  "version": "v2.7.1",
+  "version": "v2.8.0",
   "main": "index.js",
   "repository": "https://github.com/linkwarden/linkwarden.git",
   "author": "Daniel31X13 <daniel31x13@gmail.com>",
@@ -25,6 +25,8 @@
     "@aws-sdk/client-s3": "^3.379.1",
     "@headlessui/react": "^1.7.15",
     "@mozilla/readability": "^0.4.4",
+    "@phosphor-icons/core": "^2.1.1",
+    "@phosphor-icons/react": "^2.1.7",
     "@prisma/client": "^4.16.2",
     "@stripe/stripe-js": "^1.54.1",
     "@tanstack/react-query": "^5.51.15",
@@ -50,6 +52,7 @@
     "eslint-config-next": "13.4.9",
     "formidable": "^3.5.1",
     "framer-motion": "^10.16.4",
+    "fuse.js": "^7.0.0",
     "handlebars": "^4.7.8",
     "himalaya": "^1.1.0",
     "i18next": "^23.11.5",
@@ -76,7 +79,7 @@
     "socks-proxy-agent": "^8.0.2",
     "stripe": "^12.13.0",
     "tailwind-merge": "^2.3.0",
-    "vaul": "^0.8.8",
+    "vaul": "^0.9.1",
     "zustand": "^4.3.8"
   },
   "devDependencies": {
@@ -92,7 +95,7 @@
     "postcss": "^8.4.26",
     "prettier": "3.1.1",
     "prisma": "^4.16.2",
-    "tailwindcss": "^3.3.3",
+    "tailwindcss": "^3.4.10",
     "ts-node": "^10.9.2",
     "typescript": "4.9.4"
   }

pages/_app.tsx

@@ -88,13 +88,10 @@ function App({
                     {icon}
                     <span data-testid="toast-message">{message}</span>
                     {t.type !== "loading" && (
-                      <button
-                        className="btn btn-xs outline-none btn-circle btn-ghost"
+                      <div
                         data-testid="close-toast-button"
                         onClick={() => toast.dismiss(t.id)}
-                      >
-                        <i className="bi bi-x"></i>
-                      </button>
+                      ></div>
                     )}
                   </div>
                 )}

pages/admin.tsx

@@ -100,9 +100,7 @@ export default function Admin() {
         <p>{t("no_users_found")}</p>
       )}
 
-      {newUserModal ? (
-        <NewUserModal onClose={() => setNewUserModal(false)} />
-      ) : null}
+      {newUserModal && <NewUserModal onClose={() => setNewUserModal(false)} />}
     </div>
   );
 }

pages/api/v1/archives/[linkId].ts

@@ -105,8 +105,6 @@ export default async function Index(req: NextApiRequest, res: NextApiResponse) {
         response: "Collection is not accessible.",
       });
 
-    // await uploadHandler(linkId, )
-
     const MAX_LINKS_PER_USER = Number(process.env.MAX_LINKS_PER_USER || 30000);
 
     const numberOfLinksTheUserHas = await prisma.link.count({
@@ -119,8 +117,7 @@ export default async function Index(req: NextApiRequest, res: NextApiResponse) {
 
     if (numberOfLinksTheUserHas > MAX_LINKS_PER_USER)
       return res.status(400).json({
-        response:
-          "Each collection owner can only have a maximum of ${MAX_LINKS_PER_USER} Links.",
+        response: `Each collection owner can only have a maximum of ${MAX_LINKS_PER_USER} Links.`,
       });
 
     const NEXT_PUBLIC_MAX_FILE_BUFFER = Number(
@@ -166,8 +163,12 @@ export default async function Index(req: NextApiRequest, res: NextApiResponse) {
           where: { id: linkId },
         });
 
-        if (linkStillExists && files.file[0].mimetype?.includes("image")) {
-          const collectionId = collectionPermissions.id as number;
+        const { mimetype } = files.file[0];
+        const isPDF = mimetype?.includes("pdf");
+        const isImage = mimetype?.includes("image");
+
+        if (linkStillExists && isImage) {
+          const collectionId = collectionPermissions.id;
           createFolder({
             filePath: `archives/preview/${collectionId}`,
           });
@@ -184,13 +185,11 @@ export default async function Index(req: NextApiRequest, res: NextApiResponse) {
           await prisma.link.update({
             where: { id: linkId },
             data: {
-              preview: files.file[0].mimetype?.includes("pdf")
-                ? "unavailable"
-                : undefined,
-              image: files.file[0].mimetype?.includes("image")
+              preview: isPDF ? "unavailable" : undefined,
+              image: isImage
                 ? `archives/${collectionPermissions.id}/${linkId + suffix}`
                 : null,
-              pdf: files.file[0].mimetype?.includes("pdf")
+              pdf: isPDF
                 ? `archives/${collectionPermissions.id}/${linkId + suffix}`
                 : null,
               lastPreserved: new Date().toISOString(),
@@ -206,4 +205,94 @@ export default async function Index(req: NextApiRequest, res: NextApiResponse) {
       });
     });
   }
+  // To update the link preview
+  else if (req.method === "PUT") {
+    if (process.env.NEXT_PUBLIC_DEMO === "true")
+      return res.status(400).json({
+        response:
+          "This action is disabled because this is a read-only demo of Linkwarden.",
+      });
+
+    const user = await verifyUser({ req, res });
+    if (!user) return;
+
+    const collectionPermissions = await getPermission({
+      userId: user.id,
+      linkId,
+    });
+
+    if (!collectionPermissions)
+      return res.status(400).json({
+        response: "Collection is not accessible.",
+      });
+
+    const memberHasAccess = collectionPermissions.members.some(
+      (e: UsersAndCollections) => e.userId === user.id && e.canCreate
+    );
+
+    if (!(collectionPermissions.ownerId === user.id || memberHasAccess))
+      return res.status(400).json({
+        response: "Collection is not accessible.",
+      });
+
+    const NEXT_PUBLIC_MAX_FILE_BUFFER = Number(
+      process.env.NEXT_PUBLIC_MAX_FILE_BUFFER || 10
+    );
+
+    const form = formidable({
+      maxFields: 1,
+      maxFiles: 1,
+      maxFileSize: NEXT_PUBLIC_MAX_FILE_BUFFER * 1024 * 1024,
+    });
+
+    form.parse(req, async (err, fields, files) => {
+      const allowedMIMETypes = ["image/png", "image/jpg", "image/jpeg"];
+
+      if (
+        err ||
+        !files.file ||
+        !files.file[0] ||
+        !allowedMIMETypes.includes(files.file[0].mimetype || "")
+      ) {
+        // Handle parsing error
+        return res.status(400).json({
+          response: `Sorry, we couldn't process your file. Please ensure it's a PDF, PNG, or JPG format and doesn't exceed ${NEXT_PUBLIC_MAX_FILE_BUFFER}MB.`,
+        });
+      } else {
+        const fileBuffer = fs.readFileSync(files.file[0].filepath);
+
+        if (
+          Buffer.byteLength(fileBuffer) >
+          1024 * 1024 * Number(NEXT_PUBLIC_MAX_FILE_BUFFER)
+        )
+          return res.status(400).json({
+            response: `Sorry, we couldn't process your file. Please ensure it's a PNG, or JPG format and doesn't exceed ${NEXT_PUBLIC_MAX_FILE_BUFFER}MB.`,
+          });
+
+        const linkStillExists = await prisma.link.update({
+          where: { id: linkId },
+          data: {
+            updatedAt: new Date(),
+          },
+        });
+
+        if (linkStillExists) {
+          const collectionId = collectionPermissions.id;
+          createFolder({
+            filePath: `archives/preview/${collectionId}`,
+          });
+
+          await generatePreview(fileBuffer, collectionId, linkId);
+        }
+
+        fs.unlinkSync(files.file[0].filepath);
+
+        if (linkStillExists)
+          return res.status(200).json({
+            response: linkStillExists,
+          });
+        else return res.status(400).json({ response: "Link not found." });
+      }
+    });
+  }
 }

pages/api/v1/links/[id]/archive/index.ts

@@ -2,8 +2,10 @@ import type { NextApiRequest, NextApiResponse } from "next";
 import { prisma } from "@/lib/api/db";
 import verifyUser from "@/lib/api/verifyUser";
 import isValidUrl from "@/lib/shared/isValidUrl";
-import { Collection, Link } from "@prisma/client";
-import { removeFiles } from "@/lib/api/manageLinkFiles";
+import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
+import { UsersAndCollections } from "@prisma/client";
+import getPermission from "@/lib/api/getPermission";
+import { moveFiles, removeFiles } from "@/lib/api/manageLinkFiles";
 
 const RE_ARCHIVE_LIMIT = Number(process.env.RE_ARCHIVE_LIMIT) || 5;
 
@@ -23,7 +25,16 @@ export default async function links(req: NextApiRequest, res: NextApiResponse) {
       response: "Link not found.",
     });
 
-  if (link.collection.ownerId !== user.id)
+  const collectionIsAccessible = await getPermission({
+    userId: user.id,
+    collectionId: link.collectionId,
+  });
+
+  const memberHasAccess = collectionIsAccessible?.members.some(
+    (e: UsersAndCollections) => e.userId === user.id && e.canUpdate
+  );
+
+  if (!(collectionIsAccessible?.ownerId === user.id || memberHasAccess))
     return res.status(401).json({
       response: "Permission denied.",
     });
@@ -54,7 +65,20 @@ export default async function links(req: NextApiRequest, res: NextApiResponse) {
         response: "Invalid URL.",
       });
 
-    await deleteArchivedFiles(link);
+    await prisma.link.update({
+      where: {
+        id: link.id,
+      },
+      data: {
+        image: null,
+        pdf: null,
+        readable: null,
+        monolith: null,
+        preview: null,
+      },
+    });
+
+    await removeFiles(link.id, link.collection.id);
 
     return res.status(200).json({
       response: "Link is being archived.",
@@ -72,20 +96,3 @@ const getTimezoneDifferenceInMinutes = (future: Date, past: Date) => {
 
   return diffInMinutes;
 };
-
-const deleteArchivedFiles = async (link: Link & { collection: Collection }) => {
-  await prisma.link.update({
-    where: {
-      id: link.id,
-    },
-    data: {
-      image: null,
-      pdf: null,
-      readable: null,
-      monolith: null,
-      preview: null,
-    },
-  });
-
-  await removeFiles(link.id, link.collection.id);
-};

pages/collections/[id].tsx

@@ -1,4 +1,5 @@
 import {
+  AccountSettings,
   CollectionIncludingMembersAndLinkCount,
   Sort,
   ViewMode,
@@ -23,6 +24,8 @@ import { useCollections } from "@/hooks/store/collections";
 import { useUser } from "@/hooks/store/user";
 import { useLinks } from "@/hooks/store/links";
 import Links from "@/components/LinkViews/Links";
+import Icon from "@/components/Icon";
+import { IconWeight } from "@phosphor-icons/react";
 
 export default function Index() {
   const { t } = useTranslation();
@@ -54,15 +57,9 @@ export default function Index() {
 
   const { data: user = {} } = useUser();
 
-  const [collectionOwner, setCollectionOwner] = useState({
-    id: null as unknown as number,
-    name: "",
-    username: "",
-    image: "",
-    archiveAsScreenshot: undefined as unknown as boolean,
-    archiveAsMonolith: undefined as unknown as boolean,
-    archiveAsPDF: undefined as unknown as boolean,
-  });
+  const [collectionOwner, setCollectionOwner] = useState<
+    Partial<AccountSettings>
+  >({});
 
   useEffect(() => {
     const fetchOwner = async () => {
@@ -115,10 +112,21 @@ export default function Index() {
         {activeCollection && (
           <div className="flex gap-3 items-start justify-between">
             <div className="flex items-center gap-2">
-              <i
-                className="bi-folder-fill text-3xl drop-shadow"
-                style={{ color: activeCollection?.color }}
-              ></i>
+              {activeCollection.icon ? (
+                <Icon
+                  icon={activeCollection.icon}
+                  size={45}
+                  weight={
+                    (activeCollection.iconWeight || "regular") as IconWeight
+                  }
+                  color={activeCollection.color}
+                />
+              ) : (
+                <i
+                  className="bi-folder-fill text-3xl"
+                  style={{ color: activeCollection.color }}
+                ></i>
+              )}
 
               <p className="sm:text-3xl text-2xl capitalize w-full py-1 break-words hyphens-auto font-thin">
                 {activeCollection?.name}
@@ -207,14 +215,14 @@ export default function Index() {
                 className="flex items-center btn px-2 btn-ghost rounded-full w-fit"
                 onClick={() => setEditCollectionSharingModal(true)}
               >
-                {collectionOwner.id ? (
+                {collectionOwner.id && (
                   <ProfilePhoto
                     src={collectionOwner.image || undefined}
                     name={collectionOwner.name}
                   />
-                ) : undefined}
+                )}
                 {activeCollection.members
-                  .sort((a, b) => (a.userId as number) - (b.userId as number))
+                  .sort((a, b) => a.userId - b.userId)
                   .map((e, i) => {
                     return (
                       <ProfilePhoto
@@ -226,13 +234,13 @@ export default function Index() {
                     );
                   })
                   .slice(0, 3)}
-                {activeCollection.members.length - 3 > 0 ? (
+                {activeCollection.members.length - 3 > 0 && (
                   <div className={`avatar drop-shadow-md placeholder -ml-3`}>
                     <div className="bg-base-100 text-neutral rounded-full w-8 h-8 ring-2 ring-neutral-content">
                       <span>+{activeCollection.members.length - 3}</span>
                     </div>
                   </div>
-                ) : null}
+                )}
               </div>
 
               <p className="text-neutral text-sm">

pages/collections/index.tsx

@@ -10,6 +10,7 @@ import PageHeader from "@/components/PageHeader";
 import getServerSideProps from "@/lib/client/getServerSideProps";
 import { useTranslation } from "next-i18next";
 import { useCollections } from "@/hooks/store/collections";
+import { dropdownTriggerer } from "@/lib/client/utils";
 
 export default function Collections() {
   const { t } = useTranslation();
@@ -29,12 +30,37 @@ export default function Collections() {
     <MainLayout>
       <div className="p-5 flex flex-col gap-5 w-full h-full">
         <div className="flex justify-between">
-          <PageHeader
-            icon={"bi-folder"}
-            title={t("collections")}
-            description={t("collections_you_own")}
-          />
-
+          <div className="flex items-center gap-3">
+            <PageHeader
+              icon={"bi-folder"}
+              title={t("collections")}
+              description={t("collections_you_own")}
+            />
+            <div className="relative">
+              <div className={"dropdown dropdown-bottom font-normal"}>
+                <div
+                  tabIndex={0}
+                  role="button"
+                  onMouseDown={dropdownTriggerer}
+                  className="btn btn-ghost btn-sm btn-square text-neutral"
+                >
+                  <i className={"bi-three-dots text-neutral text-2xl"}></i>
+                </div>
+                <ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-box mt-1">
+                  <li>
+                    <div
+                      role="button"
+                      tabIndex={0}
+                      onClick={() => setNewCollectionModal(true)}
+                      className="whitespace-nowrap"
+                    >
+                      {t("new_collection")}
+                    </div>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
           <div className="flex gap-3 justify-end">
             <div className="relative mt-2">
               <SortDropdown sortBy={sortBy} setSort={setSortBy} t={t} />
@@ -60,7 +86,7 @@ export default function Collections() {
           </div>
         </div>
 
-        {sortedCollections.filter((e) => e.ownerId !== data?.user.id)[0] ? (
+        {sortedCollections.filter((e) => e.ownerId !== data?.user.id)[0] && (
           <>
             <PageHeader
               icon={"bi-folder"}
@@ -76,11 +102,11 @@ export default function Collections() {
                 })}
             </div>
           </>
-        ) : undefined}
+        )}
       </div>
-      {newCollectionModal ? (
+      {newCollectionModal && (
         <NewCollectionModal onClose={() => setNewCollectionModal(false)} />
-      ) : undefined}
+      )}
     </MainLayout>
   );
 }

pages/dashboard.tsx

@@ -1,7 +1,6 @@
 import MainLayout from "@/layouts/MainLayout";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import Link from "next/link";
-import useWindowDimensions from "@/hooks/useWindowDimensions";
 import React from "react";
 import { toast } from "react-hot-toast";
 import { MigrationFormat, MigrationRequest, ViewMode } from "@/types/global";
@@ -16,16 +15,20 @@ import { useCollections } from "@/hooks/store/collections";
 import { useTags } from "@/hooks/store/tags";
 import { useDashboardData } from "@/hooks/store/dashboardData";
 import Links from "@/components/LinkViews/Links";
+import useLocalSettingsStore from "@/store/localSettings";
 
 export default function Dashboard() {
   const { t } = useTranslation();
   const { data: collections = [] } = useCollections();
-  const dashboardData = useDashboardData();
+  const {
+    data: { links = [], numberOfPinnedLinks } = { links: [] },
+    ...dashboardData
+  } = useDashboardData();
   const { data: tags = [] } = useTags();
 
   const [numberOfLinks, setNumberOfLinks] = useState(0);
 
-  const [showLinks, setShowLinks] = useState(3);
+  const { settings } = useLocalSettingsStore();
 
   useEffect(() => {
     setNumberOfLinks(
@@ -37,29 +40,28 @@ export default function Dashboard() {
     );
   }, [collections]);
 
-  const handleNumberOfLinksToShow = () => {
+  const numberOfLinksToShow = useMemo(() => {
     if (window.innerWidth > 1900) {
-      setShowLinks(10);
+      return 10;
     } else if (window.innerWidth > 1500) {
-      setShowLinks(8);
+      return 8;
     } else if (window.innerWidth > 880) {
-      setShowLinks(6);
+      return 6;
     } else if (window.innerWidth > 550) {
-      setShowLinks(4);
-    } else setShowLinks(2);
-  };
+      return 4;
+    } else {
+      return 2;
+    }
+  }, []);
 
-  const { width } = useWindowDimensions();
-
-  useEffect(() => {
-    handleNumberOfLinksToShow();
-  }, [width]);
-
-  const importBookmarks = async (e: any, format: MigrationFormat) => {
-    const file: File = e.target.files[0];
+  const importBookmarks = async (
+    e: React.ChangeEvent<HTMLInputElement>,
+    format: MigrationFormat
+  ) => {
+    const file: File | null = e.target.files && e.target.files[0];
 
     if (file) {
-      var reader = new FileReader();
+      const reader = new FileReader();
       reader.readAsText(file, "UTF-8");
       reader.onload = async function (e) {
         const load = toast.loading("Importing...");
@@ -110,32 +112,30 @@ export default function Dashboard() {
           <ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
         </div>
 
-        <div>
-          <div className="flex justify-evenly flex-col xl:flex-row xl:items-center gap-2 xl:w-full h-full rounded-2xl p-8 border border-neutral-content bg-base-200">
-            <DashboardItem
-              name={numberOfLinks === 1 ? t("link") : t("links")}
-              value={numberOfLinks}
-              icon={"bi-link-45deg"}
-            />
+        <div className="xl:flex flex flex-col sm:grid grid-cols-2 gap-5 xl:flex-row xl:justify-evenly xl:w-full h-full rounded-2xl p-5 bg-base-200 border border-neutral-content">
+          <DashboardItem
+            name={numberOfLinks === 1 ? t("link") : t("links")}
+            value={numberOfLinks}
+            icon={"bi-link-45deg"}
+          />
 
-            <div className="divider xl:divider-horizontal"></div>
+          <DashboardItem
+            name={collections.length === 1 ? t("collection") : t("collections")}
+            value={collections.length}
+            icon={"bi-folder"}
+          />
 
-            <DashboardItem
-              name={
-                collections.length === 1 ? t("collection") : t("collections")
-              }
-              value={collections.length}
-              icon={"bi-folder"}
-            />
+          <DashboardItem
+            name={tags.length === 1 ? t("tag") : t("tags")}
+            value={tags.length}
+            icon={"bi-hash"}
+          />
 
-            <div className="divider xl:divider-horizontal"></div>
-
-            <DashboardItem
-              name={tags.length === 1 ? t("tag") : t("tags")}
-              value={tags.length}
-              icon={"bi-hash"}
-            />
-          </div>
+          <DashboardItem
+            name={t("pinned")}
+            value={numberOfPinnedLinks}
+            icon={"bi-pin-angle"}
+          />
         </div>
 
         <div className="flex justify-between items-center">
@@ -157,10 +157,7 @@ export default function Dashboard() {
 
         <div
           style={{
-            flex:
-              dashboardData.data || dashboardData.isLoading
-                ? "0 1 auto"
-                : "1 1 auto",
+            flex: links || dashboardData.isLoading ? "0 1 auto" : "1 1 auto",
           }}
           className="flex flex-col 2xl:flex-row items-start 2xl:gap-2"
         >
@@ -168,16 +165,17 @@ export default function Dashboard() {
             <div className="w-full">
               <Links
                 layout={viewMode}
-                placeholderCount={showLinks / 2}
+                placeholderCount={settings.columns || 1}
                 useData={dashboardData}
               />
             </div>
-          ) : dashboardData.data &&
-            dashboardData.data[0] &&
-            !dashboardData.isLoading ? (
+          ) : links && links[0] && !dashboardData.isLoading ? (
             <div className="w-full">
               <Links
-                links={dashboardData.data.slice(0, showLinks)}
+                links={links.slice(
+                  0,
+                  settings.columns ? settings.columns * 2 : numberOfLinksToShow
+                )}
                 layout={viewMode}
               />
             </div>
@@ -310,16 +308,21 @@ export default function Dashboard() {
             <div className="w-full">
               <Links
                 layout={viewMode}
-                placeholderCount={showLinks / 2}
+                placeholderCount={settings.columns || 1}
                 useData={dashboardData}
               />
             </div>
-          ) : dashboardData.data?.some((e) => e.pinnedBy && e.pinnedBy[0]) ? (
+          ) : links?.some((e: any) => e.pinnedBy && e.pinnedBy[0]) ? (
             <div className="w-full">
               <Links
-                links={dashboardData.data
-                  .filter((e) => e.pinnedBy && e.pinnedBy[0])
-                  .slice(0, showLinks)}
+                links={links
+                  .filter((e: any) => e.pinnedBy && e.pinnedBy[0])
+                  .slice(
+                    0,
+                    settings.columns
+                      ? settings.columns * 2
+                      : numberOfLinksToShow
+                  )}
                 layout={viewMode}
               />
             </div>
@@ -339,9 +342,7 @@ export default function Dashboard() {
           )}
         </div>
       </div>
-      {newLinkModal ? (
-        <NewLinkModal onClose={() => setNewLinkModal(false)} />
-      ) : undefined}
+      {newLinkModal && <NewLinkModal onClose={() => setNewLinkModal(false)} />}
     </MainLayout>
   );
 }

pages/links/[id].tsx

@@ -0,0 +1,42 @@
+import LinkDetails from "@/components/LinkDetails";
+import { useGetLink } from "@/hooks/store/links";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+import getServerSideProps from "@/lib/client/getServerSideProps";
+
+const Index = () => {
+  const router = useRouter();
+  const { id } = router.query;
+
+  useState;
+
+  const getLink = useGetLink();
+
+  useEffect(() => {
+    getLink.mutate({ id: Number(id) });
+  }, []);
+
+  return (
+    <div className="flex h-screen">
+      {getLink.data ? (
+        <LinkDetails
+          activeLink={getLink.data}
+          className="sm:max-w-xl sm:m-auto sm:p-5 w-full"
+          standalone
+        />
+      ) : (
+        <div className="max-w-xl p-5 m-auto w-full flex flex-col items-center gap-5">
+          <div className="w-20 h-20 skeleton rounded-xl"></div>
+          <div className="w-full h-10 skeleton rounded-xl"></div>
+          <div className="w-full h-10 skeleton rounded-xl"></div>
+          <div className="w-full h-10 skeleton rounded-xl"></div>
+          <div className="w-full h-10 skeleton rounded-xl"></div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Index;
+
+export { getServerSideProps };

pages/login.tsx

@@ -203,9 +203,9 @@ export default function Login({
             {t("login")}
           </Button>
 
-          {availableLogins.buttonAuths.length > 0 ? (
+          {availableLogins.buttonAuths.length > 0 && (
             <div className="divider my-1">{t("or_continue_with")}</div>
-          ) : undefined}
+          )}
         </>
       );
     }
@@ -224,9 +224,9 @@ export default function Login({
             loading={submitLoader}
           >
             {value.name.toLowerCase() === "google" ||
-            value.name.toLowerCase() === "apple" ? (
-              <i className={"bi-" + value.name.toLowerCase()}></i>
-            ) : undefined}
+              (value.name.toLowerCase() === "apple" && (
+                <i className={"bi-" + value.name.toLowerCase()}></i>
+              ))}
             {value.name}
           </Button>
         </React.Fragment>

pages/preserved/[id].tsx

@@ -20,7 +20,7 @@ export default function Index() {
   useEffect(() => {
     const fetchLink = async () => {
       if (router.query.id) {
-        await getLink.mutateAsync(Number(router.query.id));
+        await getLink.mutateAsync({ id: Number(router.query.id) });
       }
     };
 

pages/public/collections/[id].tsx

@@ -1,6 +1,7 @@
 "use client";
 import getPublicCollectionData from "@/lib/client/getPublicCollectionData";
 import {
+  AccountSettings,
   CollectionIncludingMembersAndLinkCount,
   Sort,
   ViewMode,
@@ -29,15 +30,9 @@ export default function PublicCollections() {
 
   const router = useRouter();
 
-  const [collectionOwner, setCollectionOwner] = useState({
-    id: null as unknown as number,
-    name: "",
-    username: "",
-    image: "",
-    archiveAsScreenshot: undefined as unknown as boolean,
-    archiveAsMonolith: undefined as unknown as boolean,
-    archiveAsPDF: undefined as unknown as boolean,
-  });
+  const [collectionOwner, setCollectionOwner] = useState<
+    Partial<AccountSettings>
+  >({});
 
   const [searchFilter, setSearchFilter] = useState({
     name: true,
@@ -93,160 +88,162 @@ export default function PublicCollections() {
     (localStorage.getItem("viewMode") as ViewMode) || ViewMode.Card
   );
 
-  return collection ? (
-    <div
-      className="h-96"
-      style={{
-        backgroundImage: `linear-gradient(${collection?.color}30 10%, ${
-          settings.theme === "dark" ? "#262626" : "#f3f4f6"
-        } 13rem, ${settings.theme === "dark" ? "#171717" : "#ffffff"} 100%)`,
-      }}
-    >
-      {collection ? (
-        <Head>
-          <title>{collection.name} | Linkwarden</title>
-          <meta
-            property="og:title"
-            content={`${collection.name} | Linkwarden`}
-            key="title"
-          />
-        </Head>
-      ) : undefined}
-      <div className="lg:w-3/4 w-full mx-auto p-5 bg">
-        <div className="flex items-center justify-between">
-          <p className="text-4xl font-thin mb-2 capitalize mt-10">
-            {collection.name}
-          </p>
-          <div className="flex gap-2 items-center mt-8 min-w-fit">
-            <ToggleDarkMode />
+  if (!collection) return <></>;
+  else
+    return (
+      <div
+        className="h-96"
+        style={{
+          backgroundImage: `linear-gradient(${collection?.color}30 10%, ${
+            settings.theme === "dark" ? "#262626" : "#f3f4f6"
+          } 13rem, ${settings.theme === "dark" ? "#171717" : "#ffffff"} 100%)`,
+        }}
+      >
+        {collection && (
+          <Head>
+            <title>{collection.name} | Linkwarden</title>
+            <meta
+              property="og:title"
+              content={`${collection.name} | Linkwarden`}
+              key="title"
+            />
+          </Head>
+        )}
+        <div className="lg:w-3/4 w-full mx-auto p-5 bg">
+          <div className="flex items-center justify-between">
+            <p className="text-4xl font-thin mb-2 capitalize mt-10">
+              {collection.name}
+            </p>
+            <div className="flex gap-2 items-center mt-8 min-w-fit">
+              <ToggleDarkMode />
 
-            <Link href="https://linkwarden.app/" target="_blank">
-              <Image
-                src={`/icon.png`}
-                width={551}
-                height={551}
-                alt="Linkwarden"
-                title={t("list_created_with_linkwarden")}
-                className="h-8 w-fit mx-auto rounded"
-              />
-            </Link>
+              <Link href="https://linkwarden.app/" target="_blank">
+                <Image
+                  src={`/icon.png`}
+                  width={551}
+                  height={551}
+                  alt="Linkwarden"
+                  title={t("list_created_with_linkwarden")}
+                  className="h-8 w-fit mx-auto rounded"
+                />
+              </Link>
+            </div>
           </div>
-        </div>
 
-        <div className="mt-3">
-          <div className={`min-w-[15rem]`}>
-            <div className="flex gap-1 justify-center sm:justify-end items-center w-fit">
-              <div
-                className="flex items-center btn px-2 btn-ghost rounded-full"
-                onClick={() => setEditCollectionSharingModal(true)}
-              >
-                {collectionOwner.id ? (
-                  <ProfilePhoto
-                    src={collectionOwner.image || undefined}
-                    name={collectionOwner.name}
-                  />
-                ) : undefined}
-                {collection.members
-                  .sort((a, b) => (a.userId as number) - (b.userId as number))
-                  .map((e, i) => {
-                    return (
-                      <ProfilePhoto
-                        key={i}
-                        src={e.user.image ? e.user.image : undefined}
-                        className="-ml-3"
-                        name={e.user.name}
-                      />
-                    );
-                  })
-                  .slice(0, 3)}
-                {collection.members.length - 3 > 0 ? (
-                  <div className={`avatar drop-shadow-md placeholder -ml-3`}>
-                    <div className="bg-base-100 text-neutral rounded-full w-8 h-8 ring-2 ring-neutral-content">
-                      <span>+{collection.members.length - 3}</span>
-                    </div>
-                  </div>
-                ) : null}
-              </div>
-
-              <p className="text-neutral text-sm">
-                {collection.members.length > 0 &&
-                collection.members.length === 1
-                  ? t("by_author_and_other", {
-                      author: collectionOwner.name,
-                      count: collection.members.length,
+          <div className="mt-3">
+            <div className={`min-w-[15rem]`}>
+              <div className="flex gap-1 justify-center sm:justify-end items-center w-fit">
+                <div
+                  className="flex items-center btn px-2 btn-ghost rounded-full"
+                  onClick={() => setEditCollectionSharingModal(true)}
+                >
+                  {collectionOwner.id && (
+                    <ProfilePhoto
+                      src={collectionOwner.image || undefined}
+                      name={collectionOwner.name}
+                    />
+                  )}
+                  {collection.members
+                    .sort((a, b) => (a.userId as number) - (b.userId as number))
+                    .map((e, i) => {
+                      return (
+                        <ProfilePhoto
+                          key={i}
+                          src={e.user.image ? e.user.image : undefined}
+                          className="-ml-3"
+                          name={e.user.name}
+                        />
+                      );
                     })
-                  : collection.members.length > 0 &&
-                      collection.members.length !== 1
-                    ? t("by_author_and_others", {
+                    .slice(0, 3)}
+                  {collection.members.length - 3 > 0 && (
+                    <div className={`avatar drop-shadow-md placeholder -ml-3`}>
+                      <div className="bg-base-100 text-neutral rounded-full w-8 h-8 ring-2 ring-neutral-content">
+                        <span>+{collection.members.length - 3}</span>
+                      </div>
+                    </div>
+                  )}
+                </div>
+
+                <p className="text-neutral text-sm">
+                  {collection.members.length > 0 &&
+                  collection.members.length === 1
+                    ? t("by_author_and_other", {
                         author: collectionOwner.name,
                         count: collection.members.length,
                       })
-                    : t("by_author", {
-                        author: collectionOwner.name,
-                      })}
-              </p>
+                    : collection.members.length > 0 &&
+                        collection.members.length !== 1
+                      ? t("by_author_and_others", {
+                          author: collectionOwner.name,
+                          count: collection.members.length,
+                        })
+                      : t("by_author", {
+                          author: collectionOwner.name,
+                        })}
+                </p>
+              </div>
             </div>
           </div>
-        </div>
 
-        <p className="mt-5">{collection.description}</p>
+          <p className="mt-5">{collection.description}</p>
 
-        <div className="divider mt-5 mb-0"></div>
+          <div className="divider mt-5 mb-0"></div>
 
-        <div className="flex mb-5 mt-10 flex-col gap-5">
-          <LinkListOptions
-            t={t}
-            viewMode={viewMode}
-            setViewMode={setViewMode}
-            sortBy={sortBy}
-            setSortBy={setSortBy}
-            searchFilter={searchFilter}
-            setSearchFilter={setSearchFilter}
-          >
-            <SearchBar
-              placeholder={
-                collection._count?.links === 1
-                  ? t("search_count_link", {
-                      count: collection._count?.links,
-                    })
-                  : t("search_count_links", {
-                      count: collection._count?.links,
-                    })
+          <div className="flex mb-5 mt-10 flex-col gap-5">
+            <LinkListOptions
+              t={t}
+              viewMode={viewMode}
+              setViewMode={setViewMode}
+              sortBy={sortBy}
+              setSortBy={setSortBy}
+              searchFilter={searchFilter}
+              setSearchFilter={setSearchFilter}
+            >
+              <SearchBar
+                placeholder={
+                  collection._count?.links === 1
+                    ? t("search_count_link", {
+                        count: collection._count?.links,
+                      })
+                    : t("search_count_links", {
+                        count: collection._count?.links,
+                      })
+                }
+              />
+            </LinkListOptions>
+
+            <Links
+              links={
+                links?.map((e, i) => {
+                  const linkWithCollectionData = {
+                    ...e,
+                    collection: collection, // Append collection data
+                  };
+                  return linkWithCollectionData;
+                }) as any
               }
+              layout={viewMode}
+              placeholderCount={1}
+              useData={data}
             />
-          </LinkListOptions>
+            {!data.isLoading && links && !links[0] && (
+              <p>{t("nothing_found")}</p>
+            )}
 
-          <Links
-            links={
-              links?.map((e, i) => {
-                const linkWithCollectionData = {
-                  ...e,
-                  collection: collection, // Append collection data
-                };
-                return linkWithCollectionData;
-              }) as any
-            }
-            layout={viewMode}
-            placeholderCount={1}
-            useData={data}
-          />
-          {!data.isLoading && links && !links[0] && <p>{t("nothing_found")}</p>}
-
-          {/* <p className="text-center text-neutral">
+            {/* <p className="text-center text-neutral">
         List created with <span className="text-black">Linkwarden.</span>
         </p> */}
+          </div>
         </div>
+        {editCollectionSharingModal && (
+          <EditCollectionSharingModal
+            onClose={() => setEditCollectionSharingModal(false)}
+            activeCollection={collection}
+          />
+        )}
       </div>
-      {editCollectionSharingModal ? (
-        <EditCollectionSharingModal
-          onClose={() => setEditCollectionSharingModal(false)}
-          activeCollection={collection}
-        />
-      ) : undefined}
-    </div>
-  ) : (
-    <></>
-  );
+    );
 }
 
 export { getServerSideProps };

pages/public/links/[id].tsx

@@ -0,0 +1,40 @@
+import LinkDetails from "@/components/LinkDetails";
+import { useGetLink } from "@/hooks/store/links";
+import { useRouter } from "next/router";
+import { useEffect } from "react";
+import getServerSideProps from "@/lib/client/getServerSideProps";
+
+const Index = () => {
+  const router = useRouter();
+  const { id } = router.query;
+
+  const getLink = useGetLink();
+
+  useEffect(() => {
+    getLink.mutate({ id: Number(id) });
+  }, []);
+
+  return (
+    <div className="flex h-screen">
+      {getLink.data ? (
+        <LinkDetails
+          activeLink={getLink.data}
+          className="sm:max-w-xl sm:m-auto sm:p-5 w-full"
+          standalone
+        />
+      ) : (
+        <div className="max-w-xl p-5 m-auto w-full flex flex-col items-center gap-5">
+          <div className="w-20 h-20 skeleton rounded-xl"></div>
+          <div className="w-full h-10 skeleton rounded-xl"></div>
+          <div className="w-full h-10 skeleton rounded-xl"></div>
+          <div className="w-full h-10 skeleton rounded-xl"></div>
+          <div className="w-full h-10 skeleton rounded-xl"></div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Index;
+
+export { getServerSideProps };

pages/public/preserved/[id].tsx

@@ -6,10 +6,9 @@ import {
 } from "@/types/global";
 import ReadableView from "@/components/ReadableView";
 import getServerSideProps from "@/lib/client/getServerSideProps";
-import { useGetLink, useLinks } from "@/hooks/store/links";
+import { useGetLink } from "@/hooks/store/links";
 
 export default function Index() {
-  const { links } = useLinks();
   const getLink = useGetLink();
 
   const [link, setLink] = useState<LinkIncludingShortenedCollectionAndTags>();
@@ -19,18 +18,14 @@ export default function Index() {
   useEffect(() => {
     const fetchLink = async () => {
       if (router.query.id) {
-        await getLink.mutateAsync(Number(router.query.id));
+        const get = await getLink.mutateAsync({ id: Number(router.query.id) });
+        setLink(get);
       }
     };
 
     fetchLink();
   }, []);
 
-  useEffect(() => {
-    if (links && links[0])
-      setLink(links.find((e) => e.id === Number(router.query.id)));
-  }, [links]);
-
   return (
     <div className="relative">
       {/* <div className="fixed left-1/2 transform -translate-x-1/2 w-fit py-1 px-3 bg-base-200 border border-neutral-content rounded-md">
@@ -39,6 +34,12 @@ export default function Index() {
       {link && Number(router.query.format) === ArchivedFormat.readability && (
         <ReadableView link={link} />
       )}
+      {link && Number(router.query.format) === ArchivedFormat.monolith && (
+        <iframe
+          src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.monolith}`}
+          className="w-full h-screen border-none"
+        ></iframe>
+      )}
       {link && Number(router.query.format) === ArchivedFormat.pdf && (
         <iframe
           src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.pdf}`}

pages/register.tsx

@@ -133,9 +133,9 @@ export default function Register({
             loading={submitLoader}
           >
             {value.name.toLowerCase() === "google" ||
-            value.name.toLowerCase() === "apple" ? (
-              <i className={"bi-" + value.name.toLowerCase()}></i>
-            ) : undefined}
+              (value.name.toLowerCase() === "apple" && (
+                <i className={"bi-" + value.name.toLowerCase()}></i>
+              ))}
             {value.name}
           </Button>
         </React.Fragment>
@@ -201,7 +201,7 @@ export default function Register({
               </div>
             )}
 
-            {emailEnabled ? (
+            {emailEnabled && (
               <div>
                 <p className="text-sm w-fit font-semibold mb-1">{t("email")}</p>
 
@@ -214,7 +214,7 @@ export default function Register({
                   onChange={(e) => setForm({ ...form, email: e.target.value })}
                 />
               </div>
-            ) : undefined}
+            )}
 
             <div className="w-full">
               <p className="text-sm w-fit font-semibold  mb-1">
@@ -248,7 +248,7 @@ export default function Register({
               />
             </div>
 
-            {process.env.NEXT_PUBLIC_STRIPE ? (
+            {process.env.NEXT_PUBLIC_STRIPE && (
               <div className="text-xs text-neutral mb-3">
                 <p>
                   <Trans
@@ -270,7 +270,7 @@ export default function Register({
                   />
                 </p>
               </div>
-            ) : undefined}
+            )}
 
             <Button
               type="submit"
@@ -282,9 +282,9 @@ export default function Register({
               {t("sign_up")}
             </Button>
 
-            {availableLogins.buttonAuths.length > 0 ? (
+            {availableLogins.buttonAuths.length > 0 && (
               <div className="divider my-1">{t("or_continue_with")}</div>
-            ) : undefined}
+            )}
 
             {displayLoginExternalButton()}
             <div>
@@ -298,7 +298,7 @@ export default function Register({
                   {t("login")}
                 </Link>
               </div>
-              {process.env.NEXT_PUBLIC_STRIPE ? (
+              {process.env.NEXT_PUBLIC_STRIPE && (
                 <div className="text-neutral text-center flex items-baseline gap-1 justify-center">
                   <p>{t("need_help")}</p>
                   <Link
@@ -309,7 +309,7 @@ export default function Register({
                     {t("get_in_touch")}
                   </Link>
                 </div>
-              ) : undefined}
+              )}
             </div>
           </div>
         </form>

pages/settings/access-tokens.tsx

@@ -40,7 +40,7 @@ export default function AccessTokens() {
           {t("new_token")}
         </button>
 
-        {tokens.length > 0 ? (
+        {tokens.length > 0 && (
           <table className="table mt-2 overflow-x-auto">
             <thead>
               <tr>
@@ -85,12 +85,12 @@ export default function AccessTokens() {
               ))}
             </tbody>
           </table>
-        ) : undefined}
+        )}
       </div>
 
-      {newTokenModal ? (
+      {newTokenModal && (
         <NewTokenModal onClose={() => setNewTokenModal(false)} />
-      ) : undefined}
+      )}
       {revokeTokenModal && selectedToken && (
         <RevokeTokenModal
           onClose={() => {

pages/settings/account.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, ChangeEvent } from "react";
 import { AccountSettings } from "@/types/global";
 import { toast } from "react-hot-toast";
 import SettingsLayout from "@/layouts/SettingsLayout";
@@ -55,8 +55,10 @@ export default function Account() {
     if (!objectIsEmpty(account)) setUser({ ...account });
   }, [account]);
 
-  const handleImageUpload = async (e: any) => {
-    const file: File = e.target.files[0];
+  const handleImageUpload = async (e: ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return toast.error(t("image_upload_no_file_error"));
+
     const fileExtension = file.name.split(".").pop()?.toLowerCase();
     const allowedExtensions = ["png", "jpeg", "jpg"];
     if (allowedExtensions.includes(fileExtension as string)) {
@@ -114,9 +116,13 @@ export default function Account() {
     setSubmitLoader(false);
   };
 
-  const importBookmarks = async (e: any, format: MigrationFormat) => {
+  const importBookmarks = async (
+    e: ChangeEvent<HTMLInputElement>,
+    format: MigrationFormat
+  ) => {
     setSubmitLoader(true);
-    const file: File = e.target.files[0];
+    const file = e.target.files?.[0];
+
     if (file) {
       var reader = new FileReader();
       reader.readAsText(file, "UTF-8");
@@ -190,7 +196,7 @@ export default function Account() {
                 onChange={(e) => setUser({ ...user, username: e.target.value })}
               />
             </div>
-            {emailEnabled ? (
+            {emailEnabled && (
               <div>
                 <p className="mb-2">{t("email")}</p>
                 <TextInput
@@ -199,7 +205,7 @@ export default function Account() {
                   onChange={(e) => setUser({ ...user, email: e.target.value })}
                 />
               </div>
-            ) : undefined}
+            )}
             <div>
               <p className="mb-2">{t("language")}</p>
               <select
@@ -437,9 +443,8 @@ export default function Account() {
 
           <p>
             {t("delete_account_warning")}
-            {process.env.NEXT_PUBLIC_STRIPE
-              ? " " + t("cancel_subscription_notice")
-              : undefined}
+            {process.env.NEXT_PUBLIC_STRIPE &&
+              " " + t("cancel_subscription_notice")}
           </p>
         </div>
 
@@ -448,14 +453,14 @@ export default function Account() {
         </Link>
       </div>
 
-      {emailChangeVerificationModal ? (
+      {emailChangeVerificationModal && (
         <EmailChangeVerificationModal
           onClose={() => setEmailChangeVerificationModal(false)}
           onSubmit={submit}
           oldEmail={account.email || ""}
           newEmail={user.email || ""}
         />
-      ) : undefined}
+      )}
     </SettingsLayout>
   );
 }

pages/settings/delete.tsx

@@ -83,7 +83,7 @@ export default function Delete() {
           />
         </div>
 
-        {process.env.NEXT_PUBLIC_STRIPE ? (
+        {process.env.NEXT_PUBLIC_STRIPE && (
           <fieldset className="border rounded-md p-2 border-primary">
             <legend className="px-3 py-1 text-sm sm:text-base border rounded-md border-primary">
               <b>{t("optional")}</b> <i>{t("feedback_help")}</i>
@@ -123,7 +123,7 @@ export default function Delete() {
               />
             </div>
           </fieldset>
-        ) : undefined}
+        )}
 
         <Button
           className="mx-auto"

pages/tags/[id].tsx

@@ -146,31 +146,29 @@ export default function Index() {
               <i className={"bi-hash text-primary text-3xl"} />
 
               {renameTag ? (
-                <>
-                  <form onSubmit={submit} className="flex items-center gap-2">
-                    <input
-                      type="text"
-                      autoFocus
-                      className="sm:text-3xl text-2xl bg-transparent h-10 w-3/4 outline-none border-b border-b-neutral-content"
-                      value={newTagName}
-                      onChange={(e) => setNewTagName(e.target.value)}
-                    />
-                    <div
-                      onClick={() => submit()}
-                      id="expand-dropdown"
-                      className="btn btn-ghost btn-square btn-sm"
-                    >
-                      <i className={"bi-check text-neutral text-2xl"}></i>
-                    </div>
-                    <div
-                      onClick={() => cancelUpdateTag()}
-                      id="expand-dropdown"
-                      className="btn btn-ghost btn-square btn-sm"
-                    >
-                      <i className={"bi-x text-neutral text-2xl"}></i>
-                    </div>
-                  </form>
-                </>
+                <form onSubmit={submit} className="flex items-center gap-2">
+                  <input
+                    type="text"
+                    autoFocus
+                    className="sm:text-3xl text-2xl bg-transparent h-10 w-3/4 outline-none border-b border-b-neutral-content"
+                    value={newTagName}
+                    onChange={(e) => setNewTagName(e.target.value)}
+                  />
+                  <div
+                    onClick={() => submit()}
+                    id="expand-dropdown"
+                    className="btn btn-ghost btn-square btn-sm"
+                  >
+                    <i className={"bi-check2 text-neutral text-2xl"}></i>
+                  </div>
+                  <div
+                    onClick={() => cancelUpdateTag()}
+                    id="expand-dropdown"
+                    className="btn btn-ghost btn-square btn-sm"
+                  >
+                    <i className={"bi-x text-neutral text-2xl"}></i>
+                  </div>
+                </form>
               ) : (
                 <>
                   <p className="sm:text-3xl text-2xl capitalize">

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/migrations/20240820230618_add_default_value_for_collection_color/migration.sql

@@ -0,0 +1,9 @@
+/*
+  Warnings:
+
+  - Made the column `color` on table `Collection` required. This step will fail if there are existing NULL values in that column.
+
+*/
+-- AlterTable
+ALTER TABLE "Collection" ALTER COLUMN "color" SET NOT NULL,
+ALTER COLUMN "color" SET DEFAULT '#0ea5e9';

prisma/schema.prisma

@@ -94,6 +94,8 @@ model Collection {
   id              Int                   @id @default(autoincrement())
   name            String
   description     String                @default("")
+  icon            String?
+  iconWeight      String?
   color           String                @default("#0ea5e9")
   parentId        Int?
   parent          Collection?           @relation("SubCollections", fields: [parentId], references: [id])
@@ -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?

public/locales/en/common.json

@@ -117,6 +117,7 @@
   "applying_settings": "Applying settings...",
   "settings_applied": "Settings Applied!",
   "email_change_request": "Email change request sent. Please verify the new email address.",
+  "image_upload_no_file_error": "No file selected. Please choose an image to upload.",
   "image_upload_size_error": "Please select a PNG or JPEG file that's less than 1MB.",
   "image_upload_format_error": "Invalid file format.",
   "importing_bookmarks": "Importing bookmarks...",
@@ -296,7 +297,7 @@
   "for_collection": "For {{name}}",
   "create_new_collection": "Create a New Collection",
   "color": "Color",
-  "reset": "Reset",
+  "reset_defaults": "Reset to Defaults",
   "updating_collection": "Updating Collection...",
   "collection_name_placeholder": "e.g. Example Collection",
   "collection_description_placeholder": "The purpose of this Collection...",
@@ -314,7 +315,7 @@
   "make_collection_public": "Make Collection Public",
   "make_collection_public_checkbox": "Make this a public collection",
   "make_collection_public_desc": "This will allow anyone to view this collection and it's users.",
-  "sharable_link_guide": "Sharable Link (Click to copy)",
+  "sharable_link": "Sharable Link",
   "copied": "Copied!",
   "members": "Members",
   "members_username_placeholder": "Username (without the '@')",
@@ -361,7 +362,6 @@
   "unpin": "Unpin",
   "pin_to_dashboard": "Pin to Dashboard",
   "show_link_details": "Show Link Details",
-  "hide_link_details": "Hide Link Details",
   "link_pinned": "Link Pinned!",
   "link_unpinned": "Link Unpinned!",
   "webpage": "Webpage",
@@ -371,5 +371,27 @@
   "demo_title": "Demo Only",
   "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"
+  "demo_button": "Login as demo user",
+  "regular": "Regular",
+  "thin": "Thin",
+  "bold": "Bold",
+  "fill": "Fill",
+  "duotone": "Duotone",
+  "light_icon": "Light",
+  "search": "Search",
+  "set_custom_icon": "Set Custom Icon",
+  "view": "View",
+  "show": "Show",
+  "image": "Image",
+  "icon": "Icon",
+  "date": "Date",
+  "preview_unavailable": "Preview Unavailable",
+  "saved": "Saved",
+  "untitled": "Untitled",
+  "no_tags": "No tags.",
+  "no_description_provided": "No description provided.",
+  "change_icon": "Change Icon",
+  "upload_preview_image": "Upload Preview Image",
+  "columns": "Columns",
+  "default": "Default"
 }

public/locales/it/common.json

@@ -117,6 +117,7 @@
   "applying_settings": "Applicazione delle impostazioni in corso...",
   "settings_applied": "Impostazioni Applicate!",
   "email_change_request": "Richiesta di cambio email inviata. Per favore verifica il nuovo indirizzo email.",
+  "image_upload_no_file_error": "Nessun file selezionato. Scegli un'immagine da caricare.",
   "image_upload_size_error": "Per favore seleziona un file PNG o JPEG di dimensioni inferiori a 1MB.",
   "image_upload_format_error": "Formato file non valido.",
   "importing_bookmarks": "Importazione dei segnalibri in corso...",
@@ -367,4 +368,4 @@
   "server_administration": "Amministrazione Server",
   "all_collections": "Tutte le Collezioni",
   "dashboard": "Dashboard"
-}
+}

public/locales/pt-BR/common.json

@@ -0,0 +1,376 @@
+{
+  "user_administration": "Administração de Usuários",
+  "search_users": "Pesquisar por Usuários",
+  "no_users_found": "Nenhum usuário encontrado.",
+  "no_user_found_in_search": "Nenhum usuário encontrado com a consulta de pesquisa fornecida.",
+  "username": "Nome de Usuário",
+  "email": "E-mail",
+  "subscribed": "Inscrito",
+  "created_at": "Criado Em",
+  "not_available": "N/D",
+  "check_your_email": "Por favor, verifique seu E-mail",
+  "authenticating": "Autenticando...",
+  "verification_email_sent": "E-mail de verificação enviado.",
+  "verification_email_sent_desc": "Um link de login foi enviado para seu endereço de e-mail. Se você não vir o e-mail, verifique sua pasta de spam.",
+  "resend_email": "Reenviar E-mail",
+  "invalid_credentials": "Credenciais inválidas.",
+  "fill_all_fields": "Por favor, preencha todos os campos.",
+  "enter_credentials": "Digite suas credenciais",
+  "username_or_email": "Nome de Usuário ou E-mail",
+  "password": "Senha",
+  "confirm_password": "Confirmar Senha",
+  "forgot_password": "Esqueceu a Senha?",
+  "login": "Login",
+  "or_continue_with": "Ou continue com",
+  "new_here": "Novo por aqui?",
+  "sign_up": "Inscrever-se",
+  "sign_in_to_your_account": "Faça login na sua conta",
+  "dashboard_desc": "Uma breve visão geral dos seus dados",
+  "link": "Link",
+  "links": "Links",
+  "collection": "Coleção",
+  "collections": "Coleções",
+  "tag": "Tag",
+  "tags": "Tags",
+  "recent": "Recentes",
+  "recent_links_desc": "Links adicionados recentemente",
+  "view_all": "Ver Todos",
+  "view_added_links_here": "Veja Seus Links Adicionados Recentemente Aqui!",
+  "view_added_links_here_desc": "Esta seção exibirá seus Links adicionados mais recentemente em todas as Coleções às quais você tem acesso.",
+  "add_link": "Adicionar Novo Link",
+  "import_links": "Importar Links",
+  "from_linkwarden": "Do Linkwarden",
+  "from_html": "Do arquivo HTML de Favoritos",
+  "from_wallabag": "Do Wallabag (arquivo JSON)",
+  "pinned": "Fixados",
+  "pinned_links_desc": "Seus Links fixados",
+  "pin_favorite_links_here": "Fixe Seus Links Favoritos Aqui!",
+  "pin_favorite_links_here_desc": "Você pode Fixar seus Links favoritos clicando nos três pontos em cada Link e clicando em Fixar no Painel.",
+  "sending_password_link": "Enviando link de recuperação de senha...",
+  "password_email_prompt": "Digite seu e-mail para que possamos enviar um link para criar uma nova senha.",
+  "send_reset_link": "Enviar Link de Redefinição",
+  "reset_email_sent_desc": "Verifique seu e-mail para obter um link para redefinir sua senha. Se não aparecer em alguns minutos, verifique sua pasta 1  de spam.",
+  "back_to_login": "Voltar para o Login",
+  "email_sent": "E-mail Enviado!",
+  "passwords_mismatch": "As senhas não coincidem.",
+  "password_too_short": "As senhas devem ter pelo menos 8 caracteres.",
+  "creating_account": "Criando Conta...",
+  "account_created": "Conta Criada!",
+  "trial_offer_desc": "Desbloqueie {{count}} dias de Serviço Premium sem custo!",
+  "register_desc": "Criar uma nova conta",
+  "registration_disabled_desc": "O registro está desativado para esta instância, entre em contato com o administrador em caso de problemas.",
+  "enter_details": "Digite seus dados",
+  "display_name": "Nome de Exibição",
+  "sign_up_agreement": "Ao se inscrever, você concorda com nossos Termos de Serviço 1  e Política de Privacidade.",
+  "need_help": "Precisa de ajuda?",
+  "get_in_touch": "Entre em contato",
+  "already_registered": "Já tem uma conta?",
+  "deleting_selections": "Excluindo seleções...",
+  "links_deleted": "{{count}} Links excluídos.",
+  "link_deleted": "1 Link excluído.",
+  "links_selected": "{{count}} Links selecionados",
+  "link_selected": "1 Link selecionado",
+  "nothing_selected": "Nada selecionado",
+  "edit": "Editar",
+  "delete": "Excluir",
+  "nothing_found": "Nada encontrado.",
+  "redirecting_to_stripe": "Redirecionando para o Stripe...",
+  "subscribe_title": "Assine o Linkwarden!",
+  "subscribe_desc": "Você será redirecionado para o Stripe, sinta-se à vontade para nos contatar em support@linkwarden.app 1  em caso de qualquer problema.",
+  "monthly": "Mensal",
+  "yearly": "Anual",
+  "discount_percent": "{{percent}}% de Desconto",
+  "billed_monthly": "Cobrado Mensalmente",
+  "billed_yearly": "Cobrado Anualmente",
+  "total": "Total",
+  "total_annual_desc": "Teste grátis de {{count}} dias, depois ${{annualPrice}} anualmente",
+  "total_monthly_desc": "Teste grátis de {{count}} dias, depois ${{monthlyPrice}} por mês",
+  "plus_tax": "+ IVA se aplicável",
+  "complete_subscription": "Concluir Assinatura",
+  "sign_out": "Sair",
+  "access_tokens": "Tokens de Acesso",
+  "access_tokens_description": "Os Tokens de Acesso podem ser usados para acessar o Linkwarden de outros aplicativos e serviços sem fornecer seu Nome de Usuário e Senha.",
+  "new_token": "Novo Token de Acesso",
+  "name": "Nome",
+  "created_success": "Criado!",
+  "created": "Criado",
+  "expires": "Expira",
+  "accountSettings": "Configurações da Conta",
+  "language": "Idioma",
+  "profile_photo": "Foto de Perfil",
+  "upload_new_photo": "Carregar uma nova foto...",
+  "remove_photo": "Remover Foto",
+  "make_profile_private": "Tornar o perfil privado",
+  "profile_privacy_info": "Isso limitará quem pode encontrar e adicionar você a novas Coleções.",
+  "whitelisted_users": "Usuários da Lista de Permissões",
+  "whitelisted_users_info": "Forneça o Nome de Usuário dos usuários aos quais você deseja conceder visibilidade ao seu perfil. Separados por vírgula.",
+  "whitelisted_users_placeholder": "Seu perfil está oculto de todos agora...",
+  "save_changes": "Salvar Alterações",
+  "import_export": "Importar e Exportar",
+  "import_data": "Importe seus dados de outras plataformas.",
+  "download_data": "Baixe seus dados instantaneamente.",
+  "export_data": "Exportar Dados",
+  "delete_account": "Excluir Conta",
+  "delete_account_warning": "Isso excluirá permanentemente TODOS os Links, Coleções, Tags e dados arquivados que você possui.",
+  "cancel_subscription_notice": "Também cancelará sua assinatura.",
+  "account_deletion_page": "Página de exclusão de conta",
+  "applying_settings": "Aplicando configurações...",
+  "settings_applied": "Configurações Aplicadas!",
+  "email_change_request": "Solicitação de alteração de e-mail enviada. Por favor, verifique o novo endereço de e-mail.",
+  "image_upload_no_file_error": "Nenhum arquivo selecionado. Por favor, escolha uma imagem para carregar.",
+  "image_upload_size_error": "Por favor, selecione um arquivo PNG ou JPEG com menos de 1MB.",
+  "image_upload_format_error": "Formato de arquivo inválido.",
+  "importing_bookmarks": "Importando favoritos...",
+  "import_success": "Favoritos importados! Recarregando a página...",
+  "more_coming_soon": "Mais em breve!",
+  "billing_settings": "Configurações de Cobrança",
+  "manage_subscription_intro": "Para gerenciar/cancelar sua assinatura, visite o",
+  "billing_portal": "Portal de Faturamento",
+  "help_contact_intro": "Se você ainda precisar de ajuda ou encontrar algum problema, sinta-se à vontade para nos contatar em:",
+  "fill_required_fields": "Por favor, preencha os campos obrigatórios.",
+  "deleting_message": "Excluindo tudo, por favor aguarde...",
+  "delete_warning": "Isso excluirá permanentemente todos os Links, Coleções, Tags e dados arquivados que você possui. Também irá desconectá-lo. Esta ação é irreversível!",
+  "optional": "Opcional",
+  "feedback_help": "(mas realmente nos ajuda a melhorar!)",
+  "reason_for_cancellation": "Motivo do cancelamento",
+  "please_specify": "Por favor, especifique",
+  "customer_service": "Atendimento ao Cliente",
+  "low_quality": "Baixa Qualidade",
+  "missing_features": "Recursos Faltando",
+  "switched_service": "Serviço Trocado",
+  "too_complex": "Muito Complexo",
+  "too_expensive": "Muito Caro",
+  "unused": "Não Utilizado",
+  "other": "Outro",
+  "more_information": "Mais informações (quanto mais detalhes, mais útil será)",
+  "feedback_placeholder": "por exemplo, eu precisava de um recurso que...",
+  "delete_your_account": "Excluir sua conta",
+  "change_password": "Alterar senha",
+  "password_length_error": "As senhas devem ter pelo menos 8 caracteres.",
+  "applying_changes": "Aplicando...",
+  "password_change_instructions": "Para alterar sua senha, preencha os seguintes campos. Sua senha deve ter pelo menos 8 caracteres.",
+  "old_password": "Senha Antiga",
+  "new_password": "Nova Senha",
+  "preference": "Preferência",
+  "select_theme": "Selecionar Tema",
+  "dark": "Escuro",
+  "light": "Claro",
+  "archive_settings": "Configurações de Arquivo",
+  "formats_to_archive": "Formatos para Arquivar/Preservar páginas da web:",
+  "screenshot": "Captura de Tela",
+  "pdf": "PDF",
+  "archive_org_snapshot": "Instantâneo do Archive.org",
+  "link_settings": "Configurações de Link",
+  "prevent_duplicate_links": "Prevenir links duplicados",
+  "clicking_on_links_should": "Clicar em Links deve:",
+  "open_original_content": "Abrir o conteúdo original",
+  "open_pdf_if_available": "Abrir PDF, se disponível",
+  "open_readable_if_available": "Abrir Legível, se disponível",
+  "open_screenshot_if_available": "Abrir Captura de Tela, se disponível",
+  "open_webpage_if_available": "Abrir cópia da página da Web, se disponível",
+  "tag_renamed": "Tag renomeada!",
+  "tag_deleted": "Tag excluída!",
+  "rename_tag": "Renomear Tag",
+  "delete_tag": "Excluir Tag",
+  "list_created_with_linkwarden": "Lista criada com Linkwarden",
+  "by_author": "Por {{author}}.",
+  "by_author_and_other": "Por {{author}} e {{count}} outro.",
+  "by_author_and_others": "Por {{author}} e {{count}} outros.",
+  "search_count_link": "Pesquisar {{count}} Link",
+  "search_count_links": "Pesquisar {{count}} Links",
+  "collection_is_empty": "Esta Coleção está vazia...",
+  "all_links": "Todos os Links",
+  "all_links_desc": "Links de todas as Coleções",
+  "you_have_not_added_any_links": "Você ainda não criou nenhum Link",
+  "collections_you_own": "Coleções que você possui",
+  "new_collection": "Nova Coleção",
+  "other_collections": "Outras Coleções",
+  "other_collections_desc": "Coleções compartilhadas das quais você é membro",
+  "showing_count_results": "Mostrando {{count}} resultados",
+  "showing_count_result": "Mostrando {{count}} resultado",
+  "edit_collection_info": "Editar Informações da Coleção",
+  "share_and_collaborate": "Compartilhar e Colaborar",
+  "view_team": "Ver Equipe",
+  "team": "Equipe",
+  "create_subcollection": "Criar Subcoleção",
+  "delete_collection": "Excluir Coleção",
+  "leave_collection": "Sair da Coleção",
+  "email_verified_signing_out": "E-mail verificado. Saindo...",
+  "invalid_token": "Token inválido.",
+  "sending_password_recovery_link": "Enviando link de recuperação de senha...",
+  "please_fill_all_fields": "Por favor, preencha todos os campos.",
+  "password_updated": "Senha Atualizada!",
+  "reset_password": "Redefinir Senha",
+  "enter_email_for_new_password": "Digite seu e-mail para que possamos enviar um link para criar uma nova senha.",
+  "update_password": "Atualizar Senha",
+  "password_successfully_updated": "Sua senha foi atualizada com sucesso.",
+  "user_already_member": "O usuário já existe.",
+  "you_are_already_collection_owner": "Você já é o proprietário da coleção.",
+  "date_newest_first": "Data (Mais Recente Primeiro)",
+  "date_oldest_first": "Data (Mais Antigo Primeiro)",
+  "name_az": "Nome (A-Z)",
+  "name_za": "Nome (Z-A)",
+  "description_az": "Descrição (A-Z)",
+  "description_za": "Descrição (Z-A)",
+  "all_rights_reserved": "© {{date}} Linkwarden. Todos os direitos reservados.",
+  "you_have_no_collections": "Você não tem Coleções...",
+  "you_have_no_tags": "Você não tem Tags...",
+  "cant_change_collection_you_dont_own": "Você não pode fazer alterações em uma coleção que você não possui.",
+  "account": "Conta",
+  "billing": "Faturamento",
+  "linkwarden_version": "Linkwarden {{version}}",
+  "help": "Ajuda",
+  "github": "GitHub",
+  "twitter": "Twitter",
+  "mastodon": "Mastodon",
+  "link_preservation_in_queue": "A preservação do Link está atualmente na fila",
+  "check_back_later": "Por favor, verifique mais tarde para ver o resultado",
+  "there_are_more_formats": "Há mais formatos preservados na fila",
+  "settings": "Configurações",
+  "switch_to": "Mudar para {{theme}}",
+  "logout": "Sair",
+  "start_journey": "Comece sua jornada criando um novo Link!",
+  "create_new_link": "Criar Novo Link",
+  "new_link": "Novo Link",
+  "create_new": "Criar Novo...",
+  "pwa_install_prompt": "Instale o Linkwarden na sua tela inicial para um acesso mais rápido e uma experiência aprimorada. Saiba mais",
+  "full_content": "Conteúdo Completo",
+  "slower": "Mais Lento",
+  "new_version_announcement": "Veja as novidades em Linkwarden {{version}}!",
+  "creating": "Criando...",
+  "upload_file": "Enviar Arquivo",
+  "file": "Arquivo",
+  "file_types": "PDF, PNG, JPG (Até {{size}} MB)",
+  "description": "Descrição",
+  "auto_generated": "Será gerado automaticamente se nada for fornecido.",
+  "example_link": "por exemplo, Link de Exemplo",
+  "hide": "Ocultar",
+  "more": "Mais",
+  "options": "Opções",
+  "description_placeholder": "Notas, pensamentos, etc.",
+  "deleting": "Excluindo...",
+  "token_revoked": "Token Revogado.",
+  "revoke_token": "Revogar Token",
+  "revoke_confirmation": "Tem certeza de que deseja revogar este Token de Acesso? Quaisquer aplicativos ou serviços que usem este token não poderão mais acessar o Linkwarden usando-o.",
+  "revoke": "Revogar",
+  "sending_request": "Enviando solicitação...",
+  "link_being_archived": "O link está sendo arquivado...",
+  "preserved_formats": "Formatos Preservados",
+  "available_formats": "Os seguintes formatos estão disponíveis para este link:",
+  "readable": "Legível",
+  "preservation_in_queue": "A preservação do link está na fila",
+  "view_latest_snapshot": "Ver o último snapshot em archive.org",
+  "refresh_preserved_formats": "Atualizar Formatos Preservados",
+  "this_deletes_current_preservations": "Isso exclui as preservações atuais",
+  "create_new_user": "Criar Novo Usuário",
+  "placeholder_johnny": "Johnny",
+  "placeholder_email": "johnny@example.com",
+  "placeholder_john": "john",
+  "user_created": "Usuário Criado!",
+  "fill_all_fields_error": "Por favor, preencha todos os campos.",
+  "password_change_note": "Nota: Certifique-se de informar o usuário que ele precisa alterar sua senha.",
+  "create_user": "Criar Usuário",
+  "creating_token": "Criando Token...",
+  "token_created": "Token Criado!",
+  "access_token_created": "Token de Acesso Criado",
+  "token_creation_notice": "Seu novo token foi criado. Por favor, copie-o e guarde-o em um local seguro. Você não poderá vê-lo novamente.",
+  "copied_to_clipboard": "Copiado para a área de transferência!",
+  "copy_to_clipboard": "Copiar para a Área de Transferência",
+  "create_access_token": "Criar um Token de Acesso",
+  "expires_in": "Expira em",
+  "token_name_placeholder": "por exemplo, Para o atalho do iOS",
+  "create_token": "Criar Token de Acesso",
+  "7_days": "7 Dias",
+  "30_days": "30 Dias",
+  "60_days": "60 Dias",
+  "90_days": "90 Dias",
+  "no_expiration": "Sem Expiração",
+  "creating_link": "Criando link...",
+  "link_created": "Link criado!",
+  "link_name_placeholder": "Será gerado automaticamente se deixado em branco.",
+  "link_url_placeholder": "por exemplo, http://example.com/",
+  "link_description_placeholder": "Notas, pensamentos, etc.",
+  "more_options": "Mais Opções",
+  "hide_options": "Ocultar Opções",
+  "create_link": "Criar Link",
+  "new_sub_collection": "Nova Subcoleção",
+  "for_collection": "Para {{name}}",
+  "create_new_collection": "Criar uma Nova Coleção",
+  "color": "Cor",
+  "reset": "Redefinir",
+  "updating_collection": "Atualizando Coleção...",
+  "collection_name_placeholder": "por exemplo, Coleção de Exemplo",
+  "collection_description_placeholder": "O propósito desta Coleção...",
+  "create_collection_button": "Criar Coleção",
+  "password_change_warning": "Por favor, confirme sua senha antes de alterar seu endereço de e-mail.",
+  "stripe_update_note": " Atualizar este campo também alterará seu e-mail de cobrança no Stripe.",
+  "sso_will_be_removed_warning": "Se você alterar seu endereço de e-mail, todas as conexões SSO {{service}} existentes serão removidas.",
+  "old_email": "E-mail Antigo",
+  "new_email": "Novo E-mail",
+  "confirm": "Confirmar",
+  "edit_link": "Editar Link",
+  "updating": "Atualizando...",
+  "updated": "Atualizado!",
+  "placeholder_example_link": "por exemplo, Link de Exemplo",
+  "make_collection_public": "Tornar a Coleção Pública",
+  "make_collection_public_checkbox": "Tornar esta uma coleção pública",
+  "make_collection_public_desc": "Isso permitirá que qualquer pessoa visualize esta coleção e seus usuários.",
+  "sharable_link_guide": "Link Compartilhável (Clique para copiar)",
+  "copied": "Copiado!",
+  "members": "Membros",
+  "members_username_placeholder": "Nome de usuário (sem o '@')",
+  "owner": "Proprietário",
+  "admin": "Administrador",
+  "contributor": "Colaborador",
+  "viewer": "Visualizador",
+  "viewer_desc": "Acesso somente leitura",
+  "contributor_desc": "Pode visualizar e criar Links",
+  "admin_desc": "Acesso total a todos os Links",
+  "remove_member": "Remover Membro",
+  "placeholder_example_collection": "por exemplo, Coleção de Exemplo",
+  "placeholder_collection_purpose": "O propósito desta Coleção...",
+  "deleting_user": "Excluindo...",
+  "user_deleted": "Usuário Excluído.",
+  "delete_user": "Excluir Usuário",
+  "confirm_user_deletion": "Tem certeza de que deseja remover este usuário?",
+  "irreversible_action_warning": "Esta ação é irreversível!",
+  "delete_confirmation": "Excluir, eu sei o que estou fazendo",
+  "delete_link": "Excluir Link",
+  "deleted": "Excluído.",
+  "link_deletion_confirmation_message": "Tem certeza de que deseja excluir este Link?",
+  "warning": "Aviso",
+  "irreversible_warning": "Esta ação é irreversível!",
+  "shift_key_tip": "Mantenha a tecla Shift pressionada enquanto clica em 'Excluir' para ignorar esta confirmação no futuro.",
+  "deleting_collection": "Excluindo...",
+  "collection_deleted": "Coleção Excluída.",
+  "confirm_deletion_prompt": "Para confirmar, digite \"{{name}}\" na caixa abaixo:",
+  "type_name_placeholder": "Digite \"{{name}}\" Aqui.",
+  "deletion_warning": "Excluir esta coleção apagará permanentemente todo o seu conteúdo e ela se tornará inacessível para todos, incluindo membros com acesso anterior.",
+  "leave_prompt": "Clique no botão abaixo para sair da coleção atual.",
+  "leave": "Sair",
+  "edit_links": "Editar {{count}} Links",
+  "move_to_collection": "Mover para a Coleção",
+  "add_tags": "Adicionar Tags",
+  "remove_previous_tags": "Remover tags anteriores",
+  "delete_links": "Excluir {{count}} Links",
+  "links_deletion_confirmation_message": "Tem certeza de que deseja excluir {{count}} Links? ",
+  "warning_irreversible": "Aviso: Esta ação é irreversível!",
+  "shift_key_instruction": "Mantenha a tecla 'Shift' pressionada enquanto clica em 'Excluir' para ignorar esta confirmação no futuro.",
+  "link_selection_error": "Você não tem permissão para editar ou excluir este item.",
+  "no_description": "Nenhuma descrição fornecida.",
+  "applying": "Aplicando...",
+  "unpin": "Desafixar",
+  "pin_to_dashboard": "Fixar no Painel",
+  "show_link_details": "Mostrar Detalhes do Link",
+  "link_pinned": "Link Fixado!",
+  "link_unpinned": "Link Desafixado!",
+  "webpage": "Página da Web",
+  "server_administration": "Administração do Servidor",
+  "all_collections": "Todas as Coleções",
+  "dashboard": "Painel",
+  "demo_title": "Apenas Demonstração",
+  "demo_desc": "Esta é apenas uma instância de demonstração do Linkwarden e os uploads estão desativados.",
+  "demo_desc_2": "Se você quiser experimentar a versão completa, você pode se inscrever para um teste gratuito em:",
+  "demo_button": "Entrar como usuário de demonstração",
+  "notes": "Notas"
+  }

store/localSettings.ts

@@ -2,14 +2,25 @@ import { Sort } from "@/types/global";
 import { create } from "zustand";
 
 type LocalSettings = {
-  theme?: string;
-  viewMode?: string;
+  theme: string;
+  viewMode: string;
+  show: {
+    link: boolean;
+    name: boolean;
+    description: boolean;
+    image: boolean;
+    tags: boolean;
+    icon: boolean;
+    collection: boolean;
+    date: boolean;
+  };
+  columns: number;
   sortBy?: Sort;
 };
 
 type LocalSettingsStore = {
   settings: LocalSettings;
-  updateSettings: (settings: LocalSettings) => void;
+  updateSettings: (settings: Partial<LocalSettings>) => void;
   setSettings: () => void;
 };
 
@@ -17,50 +28,93 @@ const useLocalSettingsStore = create<LocalSettingsStore>((set) => ({
   settings: {
     theme: "",
     viewMode: "",
+    show: {
+      link: true,
+      name: true,
+      description: true,
+      image: true,
+      tags: true,
+      icon: true,
+      collection: true,
+      date: true,
+    },
+    columns: 0,
     sortBy: Sort.DateNewestFirst,
   },
-  updateSettings: async (newSettings) => {
-    if (
-      newSettings.theme !== undefined &&
-      newSettings.theme !== localStorage.getItem("theme")
-    ) {
-      localStorage.setItem("theme", newSettings.theme);
+  updateSettings: (newSettings) => {
+    const { theme, viewMode, sortBy, show, columns } = newSettings;
 
-      const localTheme = localStorage.getItem("theme") || "";
-
-      document.querySelector("html")?.setAttribute("data-theme", localTheme);
+    if (theme !== undefined && theme !== localStorage.getItem("theme")) {
+      localStorage.setItem("theme", theme);
+      document.querySelector("html")?.setAttribute("data-theme", theme);
     }
 
     if (
-      newSettings.viewMode !== undefined &&
-      newSettings.viewMode !== localStorage.getItem("viewMode")
+      viewMode !== undefined &&
+      viewMode !== localStorage.getItem("viewMode")
     ) {
-      localStorage.setItem("viewMode", newSettings.viewMode);
-
-      // const localTheme = localStorage.getItem("viewMode") || "";
+      localStorage.setItem("viewMode", viewMode);
     }
 
-    if (
-      newSettings.sortBy !== undefined &&
-      newSettings.sortBy !== Number(localStorage.getItem("sortBy"))
-    ) {
-      localStorage.setItem("sortBy", newSettings.sortBy.toString());
+    if (sortBy !== undefined) {
+      localStorage.setItem("sortBy", sortBy.toString());
     }
 
-    set((state) => ({ settings: { ...state.settings, ...newSettings } }));
-  },
-  setSettings: async () => {
-    if (!localStorage.getItem("theme")) {
-      localStorage.setItem("theme", "dark");
+    if (columns !== undefined) {
+      localStorage.setItem("columns", columns.toString());
     }
 
-    const localTheme = localStorage.getItem("theme") || "";
+    const currentShowString = localStorage.getItem("show");
+    const newShowString = show ? JSON.stringify(show) : currentShowString;
+
+    if (newShowString !== currentShowString) {
+      localStorage.setItem("show", newShowString || "");
+    }
 
     set((state) => ({
-      settings: { ...state.settings, theme: localTheme },
+      settings: {
+        ...state.settings,
+        ...newSettings,
+        show: show ? { ...state.settings.show, ...show } : state.settings.show,
+      },
     }));
+  },
+  setSettings: () => {
+    const theme = localStorage.getItem("theme") || "dark";
+    localStorage.setItem("theme", theme);
 
-    document.querySelector("html")?.setAttribute("data-theme", localTheme);
+    const viewMode = localStorage.getItem("viewMode") || "card";
+    localStorage.setItem("viewMode", viewMode);
+
+    const columns = parseInt(localStorage.getItem("columns") || "0");
+    localStorage.setItem("columns", columns.toString());
+
+    const storedShow = localStorage.getItem("show");
+    const show = storedShow
+      ? JSON.parse(storedShow)
+      : {
+          link: true,
+          name: true,
+          description: true,
+          image: true,
+          tags: true,
+          icon: true,
+          collection: true,
+          date: true,
+        };
+    localStorage.setItem("show", JSON.stringify(show));
+
+    set({
+      settings: {
+        theme,
+        viewMode,
+        show,
+        columns,
+        sortBy: useLocalSettingsStore.getState().settings.sortBy,
+      },
+    });
+
+    document.querySelector("html")?.setAttribute("data-theme", theme);
   },
 }));
 

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;
 }
@@ -136,15 +144,16 @@
 
 /* For react-colorful */
 .color-picker .react-colorful {
-  width: 100%;
-  height: 7.5rem;
+  height: 7rem;
+  width: 7rem;
 }
 .color-picker .react-colorful__hue {
   height: 1rem;
 }
 .color-picker .react-colorful__pointer {
-  width: 1.3rem;
-  height: 1.3rem;
+  width: 1rem;
+  height: 1rem;
+  border-width: 1px;
 }
 
 /* For the Link banner */
@@ -153,6 +162,19 @@
   height: fit-content;
 }
 
+.react-select__indicator-separator {
+  display: none;
+}
+
+.react-select__control--is-focused .react-select__dropdown-indicator,
+.react-select__control .react-select__dropdown-indicator,
+.react-select__control .react-select__dropdown-indicator:hover,
+.react-select__control .react-select__dropdown-indicator:focus,
+.react-select__control--is-focused .react-select__dropdown-indicator:hover,
+.react-select__control--is-focused .react-select__dropdown-indicator:focus {
+  color: oklch(var(--n));
+}
+
 /* Theme */
 
 @layer components {
@@ -160,13 +182,13 @@
     @apply bg-base-200 hover:border-neutral-content;
   }
 
+  .react-select-container .react-select__control--is-focused {
+    @apply border-primary hover:border-primary;
+  }
+
   .react-select-container .react-select__menu {
     @apply bg-base-100 border-neutral-content border rounded-md;
   }
-  /* 
-  .react-select-container .react-select__menu-list {
-    @apply h-20;
-  } */
 
   .react-select-container .react-select__input-container,
   .react-select-container .react-select__single-value {

types/global.ts

@@ -22,6 +22,7 @@ export interface LinkIncludingShortenedCollectionAndTags
   pinnedBy?: {
     id: number;
   }[];
+  updatedAt?: string;
   collection: OptionalExcluding<Collection, "name" | "ownerId">;
 }
 
@@ -80,6 +81,8 @@ export enum Sort {
   DescriptionZA,
 }
 
+export type Order = { [key: string]: "asc" | "desc" };
+
 export type LinkRequestQuery = {
   sort?: Sort;
   cursor?: number;

yarn.lock

@@ -1281,6 +1281,16 @@
   resolved "https://registry.yarnpkg.com/@panva/hkdf/-/hkdf-1.1.1.tgz#ab9cd8755d1976e72fc77a00f7655a64efe6cd5d"
   integrity sha512-dhPeilub1NuIG0X5Kvhh9lH4iW3ZsHlnzwgwbOlgwQ2wG1IqFzsgHqmKPk3WzsdWAeaxKJxgM0+W433RmN45GA==
 
+"@phosphor-icons/core@^2.1.1":
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/@phosphor-icons/core/-/core-2.1.1.tgz#62a4cfbec9772f1a613a647da214fbb96f3ad39d"
+  integrity sha512-v4ARvrip4qBCImOE5rmPUylOEK4iiED9ZyKjcvzuezqMaiRASCHKcRIuvvxL/twvLpkfnEODCOJp5dM4eZilxQ==
+
+"@phosphor-icons/react@^2.1.7":
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/@phosphor-icons/react/-/react-2.1.7.tgz#b11a4b25849b7e3849970b688d9fe91e5d4fd8d7"
+  integrity sha512-g2e2eVAn1XG2a+LI09QU3IORLhnFNAFkNbo2iwbX6NOKSLOwvEMmTa7CgOzEbgNWR47z8i8kwjdvYZ5fkGx1mQ==
+
 "@pkgr/utils@^2.3.1":
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/@pkgr/utils/-/utils-2.3.1.tgz#0a9b06ffddee364d6642b3cd562ca76f55b34a03"
@@ -3369,7 +3379,7 @@ fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
-fast-glob@^3.2.11, fast-glob@^3.2.12, fast-glob@^3.2.9:
+fast-glob@^3.2.11, fast-glob@^3.2.9:
   version "3.2.12"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.12.tgz#7f39ec99c2e6ab030337142da9e0c18f37afae80"
   integrity sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==
@@ -3380,6 +3390,17 @@ fast-glob@^3.2.11, fast-glob@^3.2.12, fast-glob@^3.2.9:
     merge2 "^1.3.0"
     micromatch "^4.0.4"
 
+fast-glob@^3.3.0:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.2.tgz#a904501e57cfdd2ffcded45e99a54fef55e46129"
+  integrity sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==
+  dependencies:
+    "@nodelib/fs.stat" "^2.0.2"
+    "@nodelib/fs.walk" "^1.2.3"
+    glob-parent "^5.1.2"
+    merge2 "^1.3.0"
+    micromatch "^4.0.4"
+
 fast-json-stable-stringify@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
@@ -3553,6 +3574,11 @@ functions-have-names@^1.2.2:
   resolved "https://registry.yarnpkg.com/functions-have-names/-/functions-have-names-1.2.3.tgz#0404fe4ee2ba2f607f0e0ec3c80bae994133b834"
   integrity sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==
 
+fuse.js@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/fuse.js/-/fuse.js-7.0.0.tgz#6573c9fcd4c8268e403b4fc7d7131ffcf99a9eb2"
+  integrity sha512-14F4hBIxqKvD4Zz/XjDc3y94mNZN6pRv3U13Udo0lNLCWRBUsrMv2xwcF/y/Z5sV6+FQW+/ow68cHpm4sunt8Q==
+
 gauge@^3.0.0:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/gauge/-/gauge-3.0.2.tgz#03bf4441c044383908bcfa0656ad91803259b395"
@@ -4253,10 +4279,10 @@ jimp@^0.22.10:
     "@jimp/types" "^0.22.10"
     regenerator-runtime "^0.13.3"
 
-jiti@^1.18.2:
-  version "1.18.2"
-  resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.18.2.tgz#80c3ef3d486ebf2450d9335122b32d121f2a83cd"
-  integrity sha512-QAdOptna2NYiSSpv0O/BwoHBSmz4YhpzJHyi+fnMRTXFjp7B8i/YG5Z8IfusxB1ufjcD2Sre1F3R+nX3fvy7gg==
+jiti@^1.21.0:
+  version "1.21.6"
+  resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.21.6.tgz#6c7f7398dd4b3142767f9a168af2f317a428d268"
+  integrity sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==
 
 jose@^4.11.1, jose@^4.11.4, jose@^4.14.1:
   version "4.14.4"
@@ -5861,20 +5887,20 @@ tailwind-merge@^2.3.0:
   dependencies:
     "@babel/runtime" "^7.24.1"
 
-tailwindcss@^3.3.3:
-  version "3.3.3"
-  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.3.3.tgz#90da807393a2859189e48e9e7000e6880a736daf"
-  integrity sha512-A0KgSkef7eE4Mf+nKJ83i75TMyq8HqY3qmFIJSWy8bNt0v1lG7jUcpGpoTFxAwYcWOphcTBLPPJg+bDfhDf52w==
+tailwindcss@^3.4.10:
+  version "3.4.10"
+  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.4.10.tgz#70442d9aeb78758d1f911af29af8255ecdb8ffef"
+  integrity sha512-KWZkVPm7yJRhdu4SRSl9d4AK2wM3a50UsvgHZO7xY77NQr2V+fIrEuoDGQcbvswWvFGbS2f6e+jC/6WJm1Dl0w==
   dependencies:
     "@alloc/quick-lru" "^5.2.0"
     arg "^5.0.2"
     chokidar "^3.5.3"
     didyoumean "^1.2.2"
     dlv "^1.1.3"
-    fast-glob "^3.2.12"
+    fast-glob "^3.3.0"
     glob-parent "^6.0.2"
     is-glob "^4.0.3"
-    jiti "^1.18.2"
+    jiti "^1.21.0"
     lilconfig "^2.1.0"
     micromatch "^4.0.5"
     normalize-path "^3.0.0"
@@ -6239,10 +6265,10 @@ v8-compile-cache-lib@^3.0.1:
   resolved "https://registry.yarnpkg.com/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz#6336e8d71965cb3d35a1bbb7868445a7c05264bf"
   integrity sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==
 
-vaul@^0.8.8:
-  version "0.8.8"
-  resolved "https://registry.yarnpkg.com/vaul/-/vaul-0.8.8.tgz#c5edc041825fdeaddf0a89e326abcc7ac7449a2d"
-  integrity sha512-Z9K2b90M/LtY/sRyM1yfA8Y4mHC/5WIqhO2u7Byr49r5LQXkLGdVXiehsnjtws9CL+DyknwTuRMJXlCOHTqg/g==
+vaul@^0.9.1:
+  version "0.9.1"
+  resolved "https://registry.yarnpkg.com/vaul/-/vaul-0.9.1.tgz#3640198e04636b209b1f907fcf3079bec6ecc66b"
+  integrity sha512-fAhd7i4RNMinx+WEm6pF3nOl78DFkAazcN04ElLPFF9BMCNGbY/kou8UMhIcicm0rJCNePJP0Yyza60gGOD0Jw==
   dependencies:
     "@radix-ui/react-dialog" "^1.0.4"