Revert "undo commit"

This reverts commit 9103f67db5.

components/CollectionCard.tsx

@@ -1,8 +1,5 @@
 import Link from "next/link";
-import {
-  AccountSettings,
-  CollectionIncludingMembersAndLinkCount,
-} from "@/types/global";
+import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
 import React, { useEffect, useState } from "react";
 import ProfilePhoto from "./ProfilePhoto";
 import usePermissions from "@/hooks/usePermissions";
@@ -15,11 +12,12 @@ import { dropdownTriggerer } from "@/lib/client/utils";
 import { useTranslation } from "next-i18next";
 import { useUser } from "@/hooks/store/user";
 
-export default function CollectionCard({
-  collection,
-}: {
+type Props = {
   collection: CollectionIncludingMembersAndLinkCount;
-}) {
+  className?: string;
+};
+
+export default function CollectionCard({ collection, className }: Props) {
   const { t } = useTranslation();
   const { settings } = useLocalSettingsStore();
   const { data: user = {} } = useUser();
@@ -35,9 +33,15 @@ export default function CollectionCard({
 
   const permissions = usePermissions(collection.id as number);
 
-  const [collectionOwner, setCollectionOwner] = useState<
-    Partial<AccountSettings>
-  >({});
+  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 () => {
@@ -128,12 +132,12 @@ export default function CollectionCard({
         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) => {
@@ -147,13 +151,13 @@ export default function CollectionCard({
             );
           })
           .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}`}
@@ -177,12 +181,12 @@ export default function CollectionCard({
           <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."
@@ -202,24 +206,24 @@ export default function CollectionCard({
           </div>
         </div>
       </Link>
-      {editCollectionModal && (
+      {editCollectionModal ? (
         <EditCollectionModal
           onClose={() => setEditCollectionModal(false)}
           activeCollection={collection}
         />
-      )}
-      {editCollectionSharingModal && (
+      ) : undefined}
+      {editCollectionSharingModal ? (
         <EditCollectionSharingModal
           onClose={() => setEditCollectionSharingModal(false)}
           activeCollection={collection}
         />
-      )}
-      {deleteCollectionModal && (
+      ) : undefined}
+      {deleteCollectionModal ? (
         <DeleteCollectionModal
           onClose={() => setDeleteCollectionModal(false)}
           activeCollection={collection}
         />
-      )}
+      ) : undefined}
     </div>
   );
 }

components/CollectionListing.tsx

@@ -17,8 +17,6 @@ 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;
@@ -45,7 +43,6 @@ const CollectionListing = () => {
       return buildTreeFromCollections(
         collections,
         router,
-        tree,
         user.collectionOrder
       );
     } else return undefined;
@@ -259,7 +256,7 @@ const renderItem = (
             : "hover:bg-neutral/20"
         } duration-100 flex gap-1 items-center pr-2 pl-1 rounded-md`}
       >
-        {Dropdown(item as ExtendedTreeItem, onExpand, onCollapse)}
+        {Icon(item as ExtendedTreeItem, onExpand, onCollapse)}
 
         <Link
           href={`/collections/${collection.id}`}
@@ -269,29 +266,18 @@ const renderItem = (
           <div
             className={`py-1 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize`}
           >
-            {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>
-            )}
-
+            <i
+              className="bi-folder-fill text-2xl drop-shadow"
+              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>
@@ -302,7 +288,7 @@ const renderItem = (
   );
 };
 
-const Dropdown = (
+const Icon = (
   item: ExtendedTreeItem,
   onExpand: (id: ItemId) => void,
   onCollapse: (id: ItemId) => void
@@ -325,7 +311,6 @@ const Dropdown = (
 const buildTreeFromCollections = (
   collections: CollectionIncludingMembersAndLinkCount[],
   router: ReturnType<typeof useRouter>,
-  tree?: TreeData,
   order?: number[]
 ): TreeData => {
   if (order) {
@@ -340,15 +325,13 @@ const buildTreeFromCollections = (
         id: collection.id,
         children: [],
         hasChildren: false,
-        isExpanded: tree?.items[collection.id as number]?.isExpanded || false,
+        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

@@ -1,32 +0,0 @@
-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 || 0}</p>
+        <p className="font-thin text-5xl text-primary mt-0.5">{value}</p>
       </div>
     </div>
   );

components/Drawer.tsx

@@ -1,88 +0,0 @@
-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,49 +60,47 @@ 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>
-              </div>
+  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>
+        );
 
-          return e && e.href ? (
-            <Link key={i} href={e.href}>
+        return e && e.href ? (
+          <Link key={i} href={e.href}>
+            {inner}
+          </Link>
+        ) : (
+          e && (
+            <div key={i} onClick={e.onClick}>
               {inner}
-            </Link>
-          ) : (
-            e && (
-              <div key={i} onClick={e.onClick}>
-                {inner}
-              </div>
-            )
-          );
-        })}
-      </ClickAwayHandler>
-    )
-  );
+            </div>
+          )
+        );
+      })}
+    </ClickAwayHandler>
+  ) : null;
 }

components/Icon.tsx

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

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

components/IconPicker.tsx

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

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

@@ -7,19 +7,12 @@ import { useTags } from "@/hooks/store/tags";
 type Props = {
   onChange: any;
   defaultValue?: {
-    value?: number;
+    value: number;
     label: string;
   }[];
-  autoFocus?: boolean;
-  onBlur?: any;
 };
 
-export default function TagSelection({
-  onChange,
-  defaultValue,
-  autoFocus,
-  onBlur,
-}: Props) {
+export default function TagSelection({ onChange, defaultValue }: Props) {
   const { data: tags = [] } = useTags();
 
   const [options, setOptions] = useState<Options[]>([]);
@@ -41,9 +34,8 @@ export default function TagSelection({
       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 100ms",
+    transition: "all 50ms",
   }),
   control: (styles, state) => ({
     ...styles,
@@ -50,28 +50,19 @@ export const styles: StylesConfig = {
   multiValue: (styles) => {
     return {
       ...styles,
-      backgroundColor: "oklch(var(--b2))",
-      color: "oklch(var(--bc))",
-      display: "flex",
-      alignItems: "center",
-      gap: "0.1rem",
-      marginRight: "0.4rem",
+      backgroundColor: "#0ea5e9",
+      color: "white",
     };
   },
   multiValueLabel: (styles) => ({
     ...styles,
-    color: "oklch(var(--bc))",
+    color: "white",
   }),
   multiValueRemove: (styles) => ({
     ...styles,
-    height: "1.2rem",
-    width: "1.2rem",
-    borderRadius: "100px",
-    transition: "all 100ms",
-    color: "oklch(var(--w))",
     ":hover": {
-      color: "red",
-      backgroundColor: "oklch(var(--nc))",
+      color: "white",
+      backgroundColor: "#38bdf8",
     },
   }),
   menuPortal: (base) => ({ ...base, zIndex: 9999 }),

components/LinkDetails.tsx

@@ -1,663 +0,0 @@
-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,205 +4,207 @@ 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 { useDeleteLink, useGetLink } from "@/hooks/store/links";
+import { useUser } from "@/hooks/store/user";
+import { useDeleteLink, useUpdateLink } 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;
-  btnStyle?: string;
+  position?: string;
+  toggleShowInfo?: () => void;
+  linkInfo?: boolean;
+  alignToTop?: boolean;
+  flipDropdown?: boolean;
 };
 
-export default function LinkActions({ link, btnStyle }: Props) {
+export default function LinkActions({
+  link,
+  toggleShowInfo,
+  position,
+  linkInfo,
+  alignToTop,
+  flipDropdown,
+}: 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 updateArchive = async () => {
-    const load = toast.loading(t("sending_request"));
+  const pinLink = async () => {
+    const isAlreadyPinned = link?.pinnedBy && link.pinnedBy[0] ? true : false;
 
-    const response = await fetch(`/api/v1/links/${link?.id}/archive`, {
-      method: "PUT",
-    });
+    const load = toast.loading(t("updating"));
 
-    const data = await response.json();
-    toast.dismiss(load);
+    await updateLink.mutateAsync(
+      {
+        ...link,
+        pinnedBy: isAlreadyPinned ? undefined : [{ id: user.id }],
+      },
+      {
+        onSettled: (data, error) => {
+          toast.dismiss(load);
 
-    if (response.ok) {
-      await getLink.mutateAsync({ id: link.id as number });
-
-      toast.success(t("link_being_archived"));
-    } else toast.error(data.response);
+          if (error) {
+            toast.error(error.message);
+          } else {
+            toast.success(
+              isAlreadyPinned ? t("link_unpinned") : t("link_pinned")
+            );
+          }
+        },
+      }
+    );
   };
 
-  const router = useRouter();
-
-  const isPublicRoute = router.pathname.startsWith("/public") ? true : false;
-
   return (
     <>
-      {isPublicRoute ? (
+      <div
+        className={`dropdown dropdown-left absolute ${
+          position || "top-3 right-3"
+        } ${alignToTop ? "" : "dropdown-end"} z-20`}
+      >
         <div
-          className="absolute top-3 right-3 group-hover:opacity-100 group-focus-within:opacity-100 opacity-0 duration-100"
+          tabIndex={0}
+          role="button"
           onMouseDown={dropdownTriggerer}
-          onClick={() => setLinkModal(true)}
+          className="btn btn-ghost btn-sm btn-square text-neutral"
         >
-          <div className={clsx("btn btn-sm btn-square text-neutral", btnStyle)}>
-            <i title="More" className="bi-three-dots text-xl" />
-          </div>
+          <i title="More" className="bi-three-dots text-xl" />
         </div>
-      ) : (
-        <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`}
+        <ul
+          className={`dropdown-content z-[20] menu shadow bg-base-200 border border-neutral-content rounded-box mr-1 ${
+            alignToTop ? "" : "translate-y-10"
+          }`}
         >
-          <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();
+                pinLink();
+              }}
+              className="whitespace-nowrap"
+            >
+              {link?.pinnedBy && link.pinnedBy[0]
+                ? t("unpin")
+                : t("pin_to_dashboard")}
+            </div>
+          </li>
+          {linkInfo !== undefined && toggleShowInfo ? (
             <li>
               <div
                 role="button"
                 tabIndex={0}
                 onClick={() => {
                   (document?.activeElement as HTMLElement)?.blur();
-                  pinLink(link);
+                  toggleShowInfo();
                 }}
                 className="whitespace-nowrap"
               >
-                {link?.pinnedBy && link.pinnedBy[0]
-                  ? t("unpin")
-                  : t("pin_to_dashboard")}
+                {!linkInfo ? t("show_link_details") : t("hide_link_details")}
               </div>
             </li>
+          ) : undefined}
+          {permissions === true || permissions?.canUpdate ? (
             <li>
               <div
                 role="button"
                 tabIndex={0}
                 onClick={() => {
                   (document?.activeElement as HTMLElement)?.blur();
-                  setLinkModal(true);
+                  setEditLinkModal(true);
                 }}
                 className="whitespace-nowrap"
               >
-                {t("show_link_details")}
+                {t("edit_link")}
               </div>
             </li>
-            {(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"));
+          ) : 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"));
 
-                          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>
-            )}
-          </ul>
-        </div>
-      )}
-      {editLinkModal && (
-        <LinkModal
+                            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
           onClose={() => setEditLinkModal(false)}
-          onPin={() => pinLink(link)}
-          onUpdateArchive={updateArchive}
-          onDelete={() => setDeleteLinkModal(true)}
-          link={link}
-          activeMode="edit"
+          activeLink={link}
         />
-      )}
-      {deleteLinkModal && (
+      ) : undefined}
+      {deleteLinkModal ? (
         <DeleteLinkModal
           onClose={() => setDeleteLinkModal(false)}
           activeLink={link}
         />
-      )}
-      {linkModal && (
-        <LinkModal
-          onClose={() => setLinkModal(false)}
-          onPin={() => pinLink(link)}
-          onUpdateArchive={updateArchive}
-          onDelete={() => setDeleteLinkModal(true)}
+      ) : undefined}
+      {preservedFormatsModal ? (
+        <PreservedFormatsModal
+          onClose={() => setPreservedFormatsModal(false)}
           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, useMemo, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import useLinkStore from "@/store/links";
 import unescapeString from "@/lib/client/unescapeString";
 import LinkActions from "@/components/LinkViews/LinkComponents/LinkActions";
@@ -11,6 +11,7 @@ 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";
@@ -21,47 +22,24 @@ 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, columns, editMode }: Props) {
+export default function LinkCard({ link, flipDropdown, 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();
@@ -112,12 +90,8 @@ export default function LinkCard({ link, columns, 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: NodeJS.Timeout | null = null;
+    let interval: any;
 
     if (
       isVisible &&
@@ -125,7 +99,7 @@ export default function LinkCard({ link, columns, editMode }: Props) {
       link.preview !== "unavailable"
     ) {
       interval = setInterval(async () => {
-        getLink.mutateAsync({ id: link.id as number, isPublicRoute: isPublic });
+        getLink.mutateAsync(link.id as number);
       }, 5000);
     }
 
@@ -136,6 +110,8 @@ export default function LinkCard({ link, columns, editMode }: Props) {
     };
   }, [isVisible, link.preview]);
 
+  const [showInfo, setShowInfo] = useState(false);
+
   const selectedStyle = selectedLinks.some(
     (selectedLink) => selectedLink.id === link.id
   )
@@ -149,7 +125,7 @@ export default function LinkCard({ link, columns, 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 group`}
+      className={`${selectedStyle} border border-solid border-neutral-content bg-base-200 shadow-md hover:shadow-none duration-100 rounded-2xl relative`}
       onClick={() =>
         selectable
           ? handleCheckboxClick(link)
@@ -164,76 +140,121 @@ export default function LinkCard({ link, columns, editMode }: Props) {
           !editMode && window.open(generateLinkHref(link, user), "_blank")
         }
       >
-        {show.image && (
-          <div>
-            <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>
+        <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>
 
-            {show.link && <LinkTypeBadge link={link} />}
+        <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.collection || show.date) && (
-            <div>
-              <hr className="divider mt-2 mb-1 last:hidden border-t border-neutral-content h-[1px]" />
+          <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>
+            <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} />
                 )}
-                {show.date && <LinkDate link={link} />}
               </div>
+              <LinkDate link={link} />
             </div>
-          )}
+          </div>
         </div>
       </div>
 
-      {/* 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} />
+      {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}
+      />
     </div>
   );
 }

components/LinkViews/LinkComponents/LinkCollection.tsx

@@ -1,9 +1,7 @@
-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";
 
@@ -24,19 +22,10 @@ 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}
       >
-        {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>
-        )}
+        <i
+          className="bi-folder-fill text-lg drop-shadow"
+          style={{ color: collection?.color }}
+        ></i>
         <p className="truncate capitalize">{collection?.name}</p>
       </Link>
     </>

components/LinkViews/LinkComponents/LinkIcon.tsx

@@ -2,26 +2,34 @@ 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,
-  hideBackground,
-  onClick,
+  size,
 }: {
   link: LinkIncludingShortenedCollectionAndTags;
   className?: string;
-  hideBackground?: boolean;
-  onClick?: Function;
+  size?: "small" | "medium";
 }) {
-  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
-  );
+  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;
+  }
 
   const url =
     isValidUrl(link.url || "") && link.url ? new URL(link.url) : undefined;
@@ -29,41 +37,37 @@ export default function LinkIcon({
   const [showFavicon, setShowFavicon] = React.useState<boolean>(true);
 
   return (
-    <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 ? (
+    <>
+      {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}
+            className={iconClasses + dimension}
             draggable="false"
             onError={() => {
               setShowFavicon(false);
             }}
           />
         ) : (
-          <LinkPlaceholderIcon iconClasses={iconClasses} icon="bi-link-45deg" />
+          <LinkPlaceholderIcon
+            iconClasses={iconClasses + dimension}
+            size={size}
+            icon="bi-link-45deg"
+          />
         )
       ) : link.type === "pdf" ? (
         <LinkPlaceholderIcon
-          iconClasses={iconClasses}
+          iconClasses={iconClasses + dimension}
+          size={size}
           icon="bi-file-earmark-pdf"
         />
       ) : link.type === "image" ? (
         <LinkPlaceholderIcon
-          iconClasses={iconClasses}
+          iconClasses={iconClasses + dimension}
+          size={size}
           icon="bi-file-earmark-image"
         />
       ) : // : link.type === "monolith" ? (
@@ -74,19 +78,25 @@ export default function LinkIcon({
       //   />
       // )
       undefined}
-    </div>
+    </>
   );
 }
 
 const LinkPlaceholderIcon = ({
   iconClasses,
+  size,
   icon,
 }: {
   iconClasses: string;
+  size?: "small" | "medium";
   icon: string;
 }) => {
   return (
-    <div className={clsx(iconClasses, "aspect-square text-4xl text-[#006796]")}>
+    <div
+      className={`${
+        size === "small" ? "text-2xl" : "text-4xl"
+      } text-black aspect-square ${iconClasses}`}
+    >
       <i className={`${icon} m-auto`}></i>
     </div>
   );

components/LinkViews/LinkComponents/LinkList.tsx

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

components/LinkViews/LinkComponents/LinkMasonry.tsx

@@ -3,7 +3,7 @@ import {
   CollectionIncludingMembersAndLinkCount,
   LinkIncludingShortenedCollectionAndTags,
 } from "@/types/global";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import useLinkStore from "@/store/links";
 import unescapeString from "@/lib/client/unescapeString";
 import LinkActions from "@/components/LinkViews/LinkComponents/LinkActions";
@@ -22,44 +22,23 @@ 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;
-  columns: number;
+  count: number;
+  className?: string;
+  flipDropdown?: boolean;
   editMode?: boolean;
 };
 
-export default function LinkMasonry({ link, editMode, columns }: Props) {
+export default function LinkMasonry({ link, flipDropdown, 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 { links } = useLinks();
   const getLink = useGetLink();
 
@@ -109,7 +88,7 @@ export default function LinkMasonry({ link, editMode, columns }: Props) {
   const permissions = usePermissions(collection?.id as number);
 
   useEffect(() => {
-    let interval: NodeJS.Timeout | null = null;
+    let interval: any;
 
     if (
       isVisible &&
@@ -117,7 +96,7 @@ export default function LinkMasonry({ link, editMode, columns }: Props) {
       link.preview !== "unavailable"
     ) {
       interval = setInterval(async () => {
-        getLink.mutateAsync({ id: link.id as number });
+        getLink.mutateAsync(link.id as number);
       }, 5000);
     }
 
@@ -128,6 +107,8 @@ export default function LinkMasonry({ link, editMode, columns }: Props) {
     };
   }, [isVisible, link.preview]);
 
+  const [showInfo, setShowInfo] = useState(false);
+
   const selectedStyle = selectedLinks.some(
     (selectedLink) => selectedLink.id === link.id
   )
@@ -141,7 +122,7 @@ export default function LinkMasonry({ link, editMode, columns }: 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 group`}
+      className={`${selectedStyle} border border-solid border-neutral-content bg-base-200 shadow-md hover:shadow-none duration-100 rounded-2xl relative`}
       onClick={() =>
         selectable
           ? handleCheckboxClick(link)
@@ -150,61 +131,57 @@ export default function LinkMasonry({ link, editMode, columns }: Props) {
             : undefined
       }
     >
-      <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
+        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>
+          )}
+        </div>
 
-            <hr className="divider my-0 border-t border-neutral-content h-[1px]" />
-          </div>
+        {link.preview !== "unavailable" && (
+          <hr className="divider my-0 last:hidden border-t border-neutral-content h-[1px]" />
         )}
 
-        <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>
-          )}
+        <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>
 
-          {show.link && <LinkTypeBadge link={link} />}
+          <LinkTypeBadge link={link} />
 
-          {show.description && link.description && (
-            <p className={clsx("hyphens-auto text-sm w-full")}>
+          {link.description && (
+            <p className="hyphens-auto text-sm">
               {unescapeString(link.description)}
             </p>
           )}
 
-          {show.tags && link.tags && link.tags[0] && (
+          {link.tags && link.tags[0] && (
             <div className="flex gap-1 items-center flex-wrap">
               {link.tags.map((e, i) => (
                 <Link
@@ -222,26 +199,77 @@ export default function LinkMasonry({ link, editMode, columns }: Props) {
           )}
         </div>
 
-        {(show.collection || show.date) && (
-          <div>
-            <hr className="divider mt-2 mb-1 last:hidden border-t border-neutral-content h-[1px]" />
+        <hr className="divider mt-2 mb-1 last:hidden border-t border-neutral-content h-[1px]" />
 
-            <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 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>
 
-      {/* 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} />
+      {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}
+      />
     </div>
   );
 }

components/LinkViews/LinkComponents/LinkPin.tsx

@@ -1,34 +0,0 @@
-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, useState } from "react";
+import { useEffect } from "react";
 import { useInView } from "react-intersection-observer";
 import LinkMasonry from "@/components/LinkViews/LinkComponents/LinkMasonry";
 import Masonry from "react-masonry-css";
@@ -11,7 +11,6 @@ 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,
@@ -28,68 +27,16 @@ 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={`${gridColClass} grid gap-5 pb-5`}>
+    <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">
       {links?.map((e, i) => {
         return (
           <LinkCard
             key={i}
             link={e}
             count={i}
+            flipDropdown={i === links.length - 1}
             editMode={editMode}
-            columns={columnCount}
           />
         );
       })}
@@ -129,58 +76,6 @@ 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(() => {
@@ -195,19 +90,18 @@ export function MasonryView({
 
   return (
     <Masonry
-      breakpointCols={
-        settings.columns === 0 ? breakpointColumnsObj : columnCount
-      }
+      breakpointCols={breakpointColumnsObj}
       columnClassName="flex flex-col gap-5 !w-full"
-      className={`${gridColClass} grid gap-5 pb-5`}
+      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"
     >
       {links?.map((e, i) => {
         return (
           <LinkMasonry
             key={i}
             link={e}
+            count={i}
+            flipDropdown={i === links.length - 1}
             editMode={editMode}
-            columns={columnCount}
           />
         );
       })}
@@ -248,9 +142,17 @@ export function ListView({
   placeHolderRef?: any;
 }) {
   return (
-    <div className="flex flex-col">
+    <div className="flex gap-1 flex-col">
       {links?.map((e, i) => {
-        return <LinkList key={i} link={e} count={i} editMode={editMode} />;
+        return (
+          <LinkList
+            key={i}
+            link={e}
+            count={i}
+            flipDropdown={i === links.length - 1}
+            editMode={editMode}
+          />
+        );
       })}
 
       {(hasNextPage || isLoading) &&
@@ -259,13 +161,13 @@ export function ListView({
             <div
               ref={e === 1 ? placeHolderRef : undefined}
               key={i}
-              className="flex gap-2 py-2 px-1"
+              className="flex gap-4 p-4"
             >
-              <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 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>
             </div>
           );

components/MobileNavigation.tsx

@@ -87,13 +87,15 @@ export default function MobileNavigation({}: Props) {
           <MobileNavigationButton href={`/collections`} icon={"bi-folder"} />
         </div>
       </div>
-      {newLinkModal && <NewLinkModal onClose={() => setNewLinkModal(false)} />}
-      {newCollectionModal && (
+      {newLinkModal ? (
+        <NewLinkModal onClose={() => setNewLinkModal(false)} />
+      ) : undefined}
+      {newCollectionModal ? (
         <NewCollectionModal onClose={() => setNewCollectionModal(false)} />
-      )}
-      {uploadFileModal && (
+      ) : undefined}
+      {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(), 350)}
+        onClose={() => dismissible && setTimeout(() => toggleModal(), 100)}
         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 h-[90%] mt-24 fixed bottom-0 left-0 right-0 z-30">
+            <Drawer.Content className="flex flex-col rounded-t-2xl min-h-max 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/BulkEditLinksModal.tsx

@@ -46,7 +46,6 @@ export default function BulkEditLinksModal({ onClose }: Props) {
         },
         {
           onSettled: (data, error) => {
-            setSubmitLoader(false);
             toast.dismiss(load);
 
             if (error) {
@@ -59,6 +58,8 @@ export default function BulkEditLinksModal({ onClose }: Props) {
           },
         }
       );
+
+      setSubmitLoader(false);
     }
   };
 

components/ModalContent/DeleteCollectionModal.tsx

@@ -44,7 +44,6 @@ export default function DeleteCollectionModal({
 
       deleteCollection.mutateAsync(collection.id as number, {
         onSettled: (data, error) => {
-          setSubmitLoader(false);
           toast.dismiss(load);
 
           if (error) {
@@ -56,6 +55,8 @@ export default function DeleteCollectionModal({
           }
         },
       });
+
+      setSubmitLoader(false);
     }
   };
 

components/ModalContent/DeleteUserModal.tsx

@@ -3,7 +3,6 @@ import Button from "../ui/Button";
 import { useTranslation } from "next-i18next";
 import { useDeleteUser } from "@/hooks/store/admin/users";
 import { useState } from "react";
-import { useSession } from "next-auth/react";
 
 type Props = {
   onClose: Function;
@@ -24,40 +23,31 @@ export default function DeleteUserModal({ onClose, userId }: Props) {
         onSuccess: () => {
           onClose();
         },
-        onSettled: (data, error) => {
-          setSubmitLoader(false);
-        },
       });
+
+      setSubmitLoader(false);
     }
   };
 
-  const { data } = useSession();
-  const isAdmin = data?.user?.id === Number(process.env.NEXT_PUBLIC_ADMIN);
-
   return (
     <Modal toggleModal={onClose}>
-      <p className="text-xl font-thin text-red-500">
-        {isAdmin ? t("delete_user") : t("remove_user")}
-      </p>
+      <p className="text-xl font-thin text-red-500">{t("delete_user")}</p>
 
       <div className="divider mb-3 mt-1"></div>
 
       <div className="flex flex-col gap-3">
         <p>{t("confirm_user_deletion")}</p>
-        <p>{t("confirm_user_removal_desc")}</p>
 
-        {isAdmin && (
-          <div role="alert" className="alert alert-warning">
-            <i className="bi-exclamation-triangle text-xl" />
-            <span>
-              <b>{t("warning")}:</b> {t("irreversible_action_warning")}
-            </span>
-          </div>
-        )}
+        <div role="alert" className="alert alert-warning">
+          <i className="bi-exclamation-triangle text-xl" />
+          <span>
+            <b>{t("warning")}:</b> {t("irreversible_action_warning")}
+          </span>
+        </div>
 
         <Button className="ml-auto" intent="destructive" onClick={submit}>
           <i className="bi-trash text-xl" />
-          {isAdmin ? t("delete_confirmation") : t("confirm")}
+          {t("delete_confirmation")}
         </Button>
       </div>
     </Modal>

components/ModalContent/EditCollectionModal.tsx

@@ -1,12 +1,11 @@
 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;
@@ -35,7 +34,6 @@ export default function EditCollectionModal({
 
       await updateCollection.mutateAsync(collection, {
         onSettled: (data, error) => {
-          setSubmitLoader(false);
           toast.dismiss(load);
 
           if (error) {
@@ -46,6 +44,8 @@ export default function EditCollectionModal({
           }
         },
       });
+
+      setSubmitLoader(false);
     }
   };
 
@@ -56,32 +56,10 @@ export default function EditCollectionModal({
       <div className="divider mb-3 mt-1"></div>
 
       <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>
+        <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">
               <TextInput
                 className="bg-base-200"
                 value={collection.name}
@@ -90,13 +68,38 @@ 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-32 resize-none border rounded-md duration-100 bg-base-200 p-2 outline-none border-neutral-content focus:border-primary"
+              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"
               placeholder={t("collection_description_placeholder")}
               value={collection.description}
               onChange={(e) =>

components/ModalContent/EditCollectionSharingModal.tsx

@@ -1,11 +1,7 @@
 import React, { useEffect, useState } from "react";
 import TextInput from "@/components/TextInput";
 import toast from "react-hot-toast";
-import {
-  AccountSettings,
-  CollectionIncludingMembersAndLinkCount,
-  Member,
-} from "@/types/global";
+import { CollectionIncludingMembersAndLinkCount, Member } from "@/types/global";
 import getPublicUserData from "@/lib/client/getPublicUserData";
 import usePermissions from "@/hooks/usePermissions";
 import ProfilePhoto from "../ProfilePhoto";
@@ -15,7 +11,6 @@ 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;
@@ -45,7 +40,6 @@ export default function EditCollectionSharingModal({
 
       await updateCollection.mutateAsync(collection, {
         onSettled: (data, error) => {
-          setSubmitLoader(false);
           toast.dismiss(load);
 
           if (error) {
@@ -56,6 +50,8 @@ export default function EditCollectionSharingModal({
           }
         },
       });
+
+      setSubmitLoader(false);
     }
   };
 
@@ -66,11 +62,17 @@ export default function EditCollectionSharingModal({
 
   const publicCollectionURL = `${currentURL.origin}/public/collections/${collection.id}`;
 
-  const [memberIdentifier, setMemberIdentifier] = useState("");
+  const [memberUsername, setMemberUsername] = useState("");
 
-  const [collectionOwner, setCollectionOwner] = useState<
-    Partial<AccountSettings>
-  >({});
+  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 () => {
@@ -91,7 +93,7 @@ export default function EditCollectionSharingModal({
       members: [...collection.members, newMember],
     });
 
-    setMemberIdentifier("");
+    setMemberUsername("");
   };
 
   return (
@@ -130,15 +132,25 @@ export default function EditCollectionSharingModal({
           </div>
         )}
 
-        {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">
+        {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"
+            >
               {publicCollectionURL}
-              <CopyButton text={publicCollectionURL} />
             </div>
           </div>
-        )}
+        ) : null}
 
         {permissions === true && <div className="divider my-3"></div>}
 
@@ -148,15 +160,15 @@ export default function EditCollectionSharingModal({
 
             <div className="flex items-center gap-2">
               <TextInput
-                value={memberIdentifier || ""}
+                value={memberUsername || ""}
                 className="bg-base-200"
-                placeholder={t("add_member_placeholder")}
-                onChange={(e) => setMemberIdentifier(e.target.value)}
+                placeholder={t("members_username_placeholder")}
+                onChange={(e) => setMemberUsername(e.target.value)}
                 onKeyDown={(e) =>
                   e.key === "Enter" &&
                   addMemberToCollection(
-                    user,
-                    memberIdentifier.replace(/^@/, "") || "",
+                    user.username as string,
+                    memberUsername || "",
                     collection,
                     setMemberState,
                     t
@@ -167,8 +179,8 @@ export default function EditCollectionSharingModal({
               <div
                 onClick={() =>
                   addMemberToCollection(
-                    user,
-                    memberIdentifier.replace(/^@/, "") || "",
+                    user.username as string,
+                    memberUsername || "",
                     collection,
                     setMemberState,
                     t

components/ModalContent/EditLinkModal.tsx

@@ -0,0 +1,154 @@
+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/InviteModal.tsx

@@ -1,125 +0,0 @@
-import toast from "react-hot-toast";
-import Modal from "../Modal";
-import TextInput from "../TextInput";
-import { FormEvent, useState } from "react";
-import { useTranslation, Trans } from "next-i18next";
-import { useAddUser } from "@/hooks/store/admin/users";
-import Link from "next/link";
-import { signIn } from "next-auth/react";
-
-type Props = {
-  onClose: Function;
-};
-
-type FormData = {
-  username?: string;
-  email?: string;
-  invite: boolean;
-};
-
-const emailEnabled = process.env.NEXT_PUBLIC_EMAIL_PROVIDER === "true";
-
-export default function InviteModal({ onClose }: Props) {
-  const { t } = useTranslation();
-
-  const addUser = useAddUser();
-
-  const [form, setForm] = useState<FormData>({
-    username: emailEnabled ? undefined : "",
-    email: emailEnabled ? "" : undefined,
-    invite: true,
-  });
-  const [submitLoader, setSubmitLoader] = useState(false);
-
-  async function submit(event: FormEvent<HTMLFormElement>) {
-    event.preventDefault();
-
-    if (!submitLoader) {
-      const checkFields = () => {
-        if (emailEnabled) {
-          return form.email !== "";
-        } else {
-          return form.username !== "";
-        }
-      };
-
-      if (checkFields()) {
-        setSubmitLoader(true);
-
-        await addUser.mutateAsync(form, {
-          onSettled: () => {
-            setSubmitLoader(false);
-          },
-          onSuccess: async () => {
-            await signIn("invite", {
-              email: form.email,
-              callbackUrl: "/member-onboarding",
-              redirect: false,
-            });
-            onClose();
-          },
-        });
-      } else {
-        toast.error(t("fill_all_fields_error"));
-      }
-    }
-  }
-
-  return (
-    <Modal toggleModal={onClose}>
-      <p className="text-xl font-thin">{t("invite_user")}</p>
-      <div className="divider mb-3 mt-1"></div>
-      <p className="mb-3">{t("invite_user_desc")}</p>
-      <form onSubmit={submit}>
-        {emailEnabled ? (
-          <div>
-            <TextInput
-              placeholder={t("placeholder_email")}
-              className="bg-base-200"
-              onChange={(e) => setForm({ ...form, email: e.target.value })}
-              value={form.email}
-            />
-          </div>
-        ) : (
-          <div>
-            <p className="mb-2">
-              {t("username")}{" "}
-              {emailEnabled && (
-                <span className="text-xs text-neutral">{t("optional")}</span>
-              )}
-            </p>
-            <TextInput
-              placeholder={t("placeholder_john")}
-              className="bg-base-200"
-              onChange={(e) => setForm({ ...form, username: e.target.value })}
-              value={form.username}
-            />
-          </div>
-        )}
-
-        <div role="note" className="alert alert-note mt-5">
-          <i className="bi-exclamation-triangle text-xl" />
-          <span>
-            <p className="mb-1">{t("invite_user_note")}</p>
-            <Link
-              href=""
-              className="font-semibold whitespace-nowrap hover:opacity-80 duration-100"
-              target="_blank"
-            >
-              {t("learn_more")} <i className="bi-box-arrow-up-right"></i>
-            </Link>
-          </span>
-        </div>
-
-        <div className="flex justify-between items-center mt-5">
-          <button
-            className="btn btn-accent dark:border-violet-400 text-white ml-auto"
-            type="submit"
-          >
-            {t("send_invitation")}
-          </button>
-        </div>
-      </form>
-    </Modal>
-  );
-}

components/ModalContent/LinkModal.tsx

@@ -1,183 +0,0 @@
-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,13 +1,12 @@
 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;
@@ -43,7 +42,6 @@ export default function NewCollectionModal({ onClose, parent }: Props) {
 
     await createCollection.mutateAsync(collection, {
       onSettled: (data, error) => {
-        setSubmitLoader(false);
         toast.dismiss(load);
 
         if (error) {
@@ -54,6 +52,8 @@ export default function NewCollectionModal({ onClose, parent }: Props) {
         }
       },
     });
+
+    setSubmitLoader(false);
   };
 
   return (
@@ -72,32 +72,10 @@ 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 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>
+        <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">
               <TextInput
                 className="bg-base-200"
                 value={collection.name}
@@ -106,13 +84,38 @@ 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-32 resize-none border rounded-md duration-100 bg-base-200 p-2 outline-none border-neutral-content focus:border-primary"
+              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"
               placeholder={t("collection_description_placeholder")}
               value={collection.description}
               onChange={(e) =>

components/ModalContent/NewLinkModal.tsx

@@ -3,13 +3,14 @@ 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 { useSession } from "next-auth/react";
 import { useRouter } from "next/router";
 import Modal from "../Modal";
 import { useTranslation } from "next-i18next";
 import { useCollections } from "@/hooks/store/collections";
 import { useAddLink } from "@/hooks/store/links";
 import toast from "react-hot-toast";
-import { PostLinkSchemaType } from "@/lib/shared/schemaValidation";
 
 type Props = {
   onClose: Function;
@@ -17,19 +18,27 @@ type Props = {
 
 export default function NewLinkModal({ onClose }: Props) {
   const { t } = useTranslation();
+  const { data } = useSession();
   const initial = {
     name: "",
     url: "",
     description: "",
     type: "url",
     tags: [],
+    preview: "",
+    image: "",
+    pdf: "",
+    readable: "",
+    monolith: "",
+    textContent: "",
     collection: {
-      id: undefined,
       name: "",
+      ownerId: data?.user.id as number,
     },
-  } as PostLinkSchemaType;
+  } as LinkIncludingShortenedCollectionAndTags;
 
-  const [link, setLink] = useState<PostLinkSchemaType>(initial);
+  const [link, setLink] =
+    useState<LinkIncludingShortenedCollectionAndTags>(initial);
 
   const addLink = useAddLink();
 
@@ -39,10 +48,10 @@ export default function NewLinkModal({ onClose }: Props) {
   const { data: collections = [] } = useCollections();
 
   const setCollection = (e: any) => {
-    if (e?.__isNew__) e.value = undefined;
+    if (e?.__isNew__) e.value = null;
     setLink({
       ...link,
-      collection: { id: e?.value, name: e?.label },
+      collection: { id: e?.value, name: e?.label, ownerId: e?.ownerId },
     });
   };
 
@@ -52,23 +61,27 @@ export default function NewLinkModal({ onClose }: Props) {
   };
 
   useEffect(() => {
-    if (router.pathname.startsWith("/collections/") && router.query.id) {
+    if (router.query.id) {
       const currentCollection = collections.find(
         (e) => e.id == Number(router.query.id)
       );
-
-      if (currentCollection && currentCollection.ownerId)
+      if (
+        currentCollection &&
+        currentCollection.ownerId &&
+        router.asPath.startsWith("/collections/")
+      )
         setLink({
           ...initial,
           collection: {
             id: currentCollection.id,
             name: currentCollection.name,
+            ownerId: currentCollection.ownerId,
           },
         });
     } else
       setLink({
         ...initial,
-        collection: { name: "Unorganized" },
+        collection: { name: "Unorganized", ownerId: data?.user.id as number },
       });
   }, []);
 
@@ -80,17 +93,18 @@ export default function NewLinkModal({ onClose }: Props) {
 
       await addLink.mutateAsync(link, {
         onSettled: (data, error) => {
-          setSubmitLoader(false);
           toast.dismiss(load);
 
           if (error) {
-            toast.error(t(error.message));
+            toast.error(error.message);
           } else {
             onClose();
             toast.success(t("link_created"));
           }
         },
       });
+
+      setSubmitLoader(false);
     }
   };
 
@@ -110,19 +124,19 @@ 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={{
-                value: link.collection?.id,
-                label: link.collection?.name || "Unorganized",
+                label: link.collection.name,
+                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>
@@ -138,7 +152,7 @@ export default function NewLinkModal({ onClose }: Props) {
                 <p className="mb-2">{t("tags")}</p>
                 <TagSelection
                   onChange={setTags}
-                  defaultValue={link.tags?.map((e) => ({
+                  defaultValue={link.tags.map((e) => ({
                     label: e.name,
                     value: e.id,
                   }))}
@@ -147,17 +161,17 @@ export default function NewLinkModal({ onClose }: Props) {
               <div className="sm:col-span-2">
                 <p className="mb-2">{t("description")}</p>
                 <textarea
-                  value={unescapeString(link.description || "") || ""}
+                  value={unescapeString(link.description) as string}
                   onChange={(e) =>
                     setLink({ ...link, description: e.target.value })
                   }
                   placeholder={t("link_description_placeholder")}
-                  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"
+                  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"
                 />
               </div>
             </div>
           </div>
-        )}
+        ) : undefined}
       </div>
       <div className="flex justify-between items-center mt-5">
         <div

components/ModalContent/NewTokenModal.tsx

@@ -7,7 +7,6 @@ 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;
@@ -34,7 +33,6 @@ export default function NewTokenModal({ onClose }: Props) {
 
       await addToken.mutateAsync(token, {
         onSettled: (data, error) => {
-          setSubmitLoader(false);
           toast.dismiss(load);
 
           if (error) {
@@ -44,6 +42,8 @@ export default function NewTokenModal({ onClose }: Props) {
           }
         },
       });
+
+      setSubmitLoader(false);
     }
   };
 
@@ -68,14 +68,21 @@ 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>
-          <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>
+          <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>
       ) : (
         <>

components/ModalContent/NewUserModal.tsx

@@ -35,9 +35,6 @@ export default function NewUserModal({ onClose }: Props) {
     event.preventDefault();
 
     if (!submitLoader) {
-      if (form.password.length < 8)
-        return toast.error(t("password_length_error"));
-
       const checkFields = () => {
         if (emailEnabled) {
           return form.name !== "" && form.email !== "" && form.password !== "";
@@ -55,10 +52,9 @@ export default function NewUserModal({ onClose }: Props) {
           onSuccess: () => {
             onClose();
           },
-          onSettled: () => {
-            setSubmitLoader(false);
-          },
         });
+
+        setSubmitLoader(false);
       } else {
         toast.error(t("fill_all_fields_error"));
       }
@@ -83,7 +79,7 @@ export default function NewUserModal({ onClose }: Props) {
             />
           </div>
 
-          {emailEnabled && (
+          {emailEnabled ? (
             <div>
               <p className="mb-2">{t("email")}</p>
               <TextInput
@@ -93,7 +89,7 @@ export default function NewUserModal({ onClose }: Props) {
                 value={form.email}
               />
             </div>
-          )}
+          ) : undefined}
 
           <div>
             <p className="mb-2">

components/ModalContent/PreservedFormatsModal.tsx

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

@@ -14,7 +14,6 @@ import Modal from "../Modal";
 import { useTranslation } from "next-i18next";
 import { useCollections } from "@/hooks/store/collections";
 import { useUploadFile } from "@/hooks/store/links";
-import { PostLinkSchemaType } from "@/lib/shared/schemaValidation";
 
 type Props = {
   onClose: Function;
@@ -26,16 +25,24 @@ export default function UploadFileModal({ onClose }: Props) {
 
   const initial = {
     name: "",
+    url: "",
     description: "",
     type: "url",
     tags: [],
+    preview: "",
+    image: "",
+    pdf: "",
+    readable: "",
+    monolith: "",
+    textContent: "",
     collection: {
-      id: undefined,
       name: "",
+      ownerId: data?.user.id as number,
     },
-  } as PostLinkSchemaType;
+  } as LinkIncludingShortenedCollectionAndTags;
 
-  const [link, setLink] = useState<PostLinkSchemaType>(initial);
+  const [link, setLink] =
+    useState<LinkIncludingShortenedCollectionAndTags>(initial);
   const [file, setFile] = useState<File>();
 
   const uploadFile = useUploadFile();
@@ -45,11 +52,11 @@ export default function UploadFileModal({ onClose }: Props) {
   const { data: collections = [] } = useCollections();
 
   const setCollection = (e: any) => {
-    if (e?.__isNew__) e.value = undefined;
+    if (e?.__isNew__) e.value = null;
 
     setLink({
       ...link,
-      collection: { id: e?.value, name: e?.label },
+      collection: { id: e?.value, name: e?.label, ownerId: e?.ownerId },
     });
   };
 
@@ -63,11 +70,10 @@ export default function UploadFileModal({ onClose }: Props) {
 
   useEffect(() => {
     setOptionsExpanded(false);
-    if (router.pathname.startsWith("/collections/") && router.query.id) {
+    if (router.query.id) {
       const currentCollection = collections.find(
         (e) => e.id == Number(router.query.id)
       );
-
       if (
         currentCollection &&
         currentCollection.ownerId &&
@@ -78,12 +84,13 @@ export default function UploadFileModal({ onClose }: Props) {
           collection: {
             id: currentCollection.id,
             name: currentCollection.name,
+            ownerId: currentCollection.ownerId,
           },
         });
     } else
       setLink({
         ...initial,
-        collection: { name: "Unorganized" },
+        collection: { name: "Unorganized", ownerId: data?.user.id as number },
       });
   }, [router, collections]);
 
@@ -115,7 +122,6 @@ export default function UploadFileModal({ onClose }: Props) {
         { link, file },
         {
           onSettled: (data, error) => {
-            setSubmitLoader(false);
             toast.dismiss(load);
 
             if (error) {
@@ -127,6 +133,8 @@ export default function UploadFileModal({ onClose }: Props) {
           },
         }
       );
+
+      setSubmitLoader(false);
     }
   };
 
@@ -142,7 +150,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"
+              accept=".pdf,.png,.jpg,.jpeg,.html"
               className="cursor-pointer custom-file-input"
               onChange={(e) => e.target.files && setFile(e.target.files[0])}
             />
@@ -155,18 +163,18 @@ 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={{
-                value: link.collection?.id,
-                label: link.collection?.name || "Unorganized",
+                label: link.collection.name,
+                value: link.collection.id,
               }}
             />
-          )}
+          ) : null}
         </div>
       </div>
-      {optionsExpanded && (
+      {optionsExpanded ? (
         <div className="mt-5">
           <div className="grid sm:grid-cols-2 gap-3">
             <div>
@@ -182,26 +190,26 @@ export default function UploadFileModal({ onClose }: Props) {
               <p className="mb-2">{t("tags")}</p>
               <TagSelection
                 onChange={setTags}
-                defaultValue={link.tags?.map((e) => ({
-                  value: e.id,
+                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 || "") || ""}
+                value={unescapeString(link.description) as string}
                 onChange={(e) =>
                   setLink({ ...link, description: e.target.value })
                 }
                 placeholder={t("description_placeholder")}
-                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"
+                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>
-      )}
+      ) : 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,14 +122,16 @@ export default function Navbar() {
             </div>
           </ClickAwayHandler>
         </div>
-      )}
-      {newLinkModal && <NewLinkModal onClose={() => setNewLinkModal(false)} />}
-      {newCollectionModal && (
+      ) : null}
+      {newLinkModal ? (
+        <NewLinkModal onClose={() => setNewLinkModal(false)} />
+      ) : undefined}
+      {newCollectionModal ? (
         <NewCollectionModal onClose={() => setNewCollectionModal(false)} />
-      )}
-      {uploadFileModal && (
+      ) : undefined}
+      {uploadFileModal ? (
         <UploadFileModal onClose={() => setUploadFileModal(false)} />
-      )}
+      ) : undefined}
     </div>
   );
 }

components/NoLinksFound.tsx

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

components/Popover.tsx

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

components/ProfileDropdown.tsx

@@ -6,8 +6,6 @@ import { signOut } from "next-auth/react";
 import { useTranslation } from "next-i18next";
 import { useUser } from "@/hooks/store/user";
 
-const stripeEnabled = process.env.NEXT_PUBLIC_STRIPE === "true";
-
 export default function ProfileDropdown() {
   const { t } = useTranslation();
   const { settings, updateSettings } = useLocalSettingsStore();
@@ -62,7 +60,7 @@ export default function ProfileDropdown() {
             })}
           </div>
         </li>
-        {isAdmin && (
+        {isAdmin ? (
           <li>
             <Link
               href="/admin"
@@ -74,20 +72,7 @@ export default function ProfileDropdown() {
               {t("server_administration")}
             </Link>
           </li>
-        )}
-        {!user.parentSubscriptionId && stripeEnabled && (
-          <li>
-            <Link
-              href="/settings/billing"
-              onClick={() => (document?.activeElement as HTMLElement)?.blur()}
-              tabIndex={0}
-              role="button"
-              className="whitespace-nowrap"
-            >
-              {t("invite_users")}
-            </Link>
-          </li>
-        )}
+        ) : null}
         <li>
           <div
             onClick={() => {

components/ProfilePhoto.tsx

@@ -5,7 +5,7 @@ type Props = {
   src?: string;
   className?: string;
   priority?: boolean;
-  name?: string | null;
+  name?: string;
   large?: boolean;
 };
 

components/ReadableView.tsx

@@ -3,6 +3,7 @@ import { readabilityAvailable } from "@/lib/shared/getArchiveValidity";
 import isValidUrl from "@/lib/shared/isValidUrl";
 import {
   ArchivedFormat,
+  CollectionIncludingMembersAndLinkCount,
   LinkIncludingShortenedCollectionAndTags,
 } from "@/types/global";
 import ColorThief, { RGBColor } from "colorthief";
@@ -10,11 +11,11 @@ import DOMPurify from "dompurify";
 import Image from "next/image";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
+import LinkActions from "./LinkViews/LinkComponents/LinkActions";
 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;
@@ -45,6 +46,13 @@ 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 () => {
@@ -65,9 +73,9 @@ export default function ReadableView({ link }: Props) {
   }, [link]);
 
   useEffect(() => {
-    if (link) getLink.mutateAsync({ id: link.id as number });
+    if (link) getLink.mutateAsync(link?.id as number);
 
-    let interval: NodeJS.Timeout | null = null;
+    let interval: any;
     if (
       link &&
       (link?.image === "pending" ||
@@ -80,10 +88,7 @@ export default function ReadableView({ link }: Props) {
         !link?.monolith)
     ) {
       interval = setInterval(
-        () =>
-          getLink.mutateAsync({
-            id: link.id as number,
-          }),
+        () => getLink.mutateAsync(link.id as number),
         5000
       );
     } else {
@@ -181,7 +186,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}
@@ -190,10 +195,11 @@ export default function ReadableView({ link }: Props) {
                 >
                   <i className="bi-link-45deg"></i>
 
-                  {isValidUrl(link?.url || "") &&
-                    new URL(link?.url as string).host}
+                  {isValidUrl(link?.url || "")
+                    ? new URL(link?.url as string).host
+                    : undefined}
                 </Link>
-              )}
+              ) : undefined}
             </div>
           </div>
 
@@ -202,21 +208,10 @@ 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"
             >
-              {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>
-              )}
+              <i
+                className="bi-folder-fill drop-shadow text-2xl"
+                style={{ color: link?.collection.color }}
+              ></i>
               <p
                 title={link?.collection.name}
                 className="text-lg truncate max-w-[12rem]"
@@ -248,6 +243,13 @@ 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/SettingsSidebar.tsx

@@ -2,14 +2,11 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "next-i18next";
-import { useUser } from "@/hooks/store/user";
 
 export default function SettingsSidebar({ className }: { className?: string }) {
   const { t } = useTranslation();
   const LINKWARDEN_VERSION = process.env.version;
 
-  const { data: user } = useUser();
-
   const router = useRouter();
   const [active, setActive] = useState("");
 
@@ -76,7 +73,7 @@ export default function SettingsSidebar({ className }: { className?: string }) {
           </div>
         </Link>
 
-        {process.env.NEXT_PUBLIC_STRIPE && !user.parentSubscriptionId && (
+        {process.env.NEXT_PUBLIC_STRIPE && (
           <Link href="/settings/billing">
             <div
               className={`${

components/ToggleDarkMode.tsx

@@ -1,34 +1,28 @@
 import useLocalSettingsStore from "@/store/localSettings";
-import { useEffect, useState, ChangeEvent } from "react";
+import { useEffect, useState } from "react";
 import { useTranslation } from "next-i18next";
-import clsx from "clsx";
 
 type Props = {
   className?: string;
-  align?: "left" | "right";
 };
 
-export default function ToggleDarkMode({ className, align }: Props) {
+export default function ToggleDarkMode({ className }: Props) {
   const { t } = useTranslation();
   const { settings, updateSettings } = useLocalSettingsStore();
 
-  const [theme, setTheme] = useState<string | null>(
-    localStorage.getItem("theme")
-  );
+  const [theme, setTheme] = useState(localStorage.getItem("theme"));
 
-  const handleToggle = (e: ChangeEvent<HTMLInputElement>) => {
+  const handleToggle = (e: any) => {
     setTheme(e.target.checked ? "dark" : "light");
   };
 
   useEffect(() => {
-    if (theme) {
-      updateSettings({ theme });
-    }
+    updateSettings({ theme: theme as string });
   }, [theme]);
 
   return (
     <div
-      className={clsx("tooltip", align ? `tooltip-${align}` : "tooltip-bottom")}
+      className="tooltip tooltip-bottom"
       data-tip={t("switch_to", {
         theme: settings.theme === "light" ? "Dark" : "Light",
       })}
@@ -40,7 +34,7 @@ export default function ToggleDarkMode({ className, align }: Props) {
           type="checkbox"
           onChange={handleToggle}
           className="theme-controller"
-          checked={theme === "dark"}
+          checked={localStorage.getItem("theme") === "light" ? false : true}
         />
         <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,8 +1,7 @@
 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;
@@ -10,141 +9,64 @@ type Props = {
 };
 
 export default function ViewDropdown({ viewMode, setViewMode }: Props) {
-  const { settings, updateSettings } = useLocalSettingsStore((state) => state);
-  const { t } = useTranslation();
+  const { updateSettings } = useLocalSettingsStore();
+
+  const onChangeViewMode = (
+    e: React.MouseEvent<HTMLButtonElement>,
+    viewMode: ViewMode
+  ) => {
+    setViewMode(viewMode);
+  };
 
   useEffect(() => {
     updateSettings({ 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) });
-  };
+  }, [viewMode]);
 
   return (
-    <div className="dropdown dropdown-bottom dropdown-end">
-      <div
-        tabIndex={0}
-        role="button"
-        onMouseDown={dropdownTriggerer}
-        className="btn btn-sm btn-square btn-ghost border-none"
+    <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"
+        }`}
       >
-        {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-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"
+        }`}
       >
-        <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>
+        <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> */}
     </div>
   );
 }

components/ui/Divider.tsx

@@ -1,12 +0,0 @@
-import clsx from "clsx";
-import React from "react";
-
-type Props = {
-  className?: string;
-};
-
-function Divider({ className }: Props) {
-  return <hr className={clsx("border-neutral-content border-t", className)} />;
-}
-
-export default Divider;