Edit Mode

components/LinkViews/Layouts/CardView.tsx

@@ -4,9 +4,11 @@ import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
 export default function CardView({
   links,
   showCheckbox = true,
+  editMode
 }: {
   links: LinkIncludingShortenedCollectionAndTags[];
   showCheckbox?: boolean;
+  editMode?: boolean;
 }) {
   return (
     <div className="grid min-[1900px]:grid-cols-4 xl:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-5">
@@ -18,6 +20,7 @@ export default function CardView({
             count={i}
             flipDropdown={i === links.length - 1}
             showCheckbox={showCheckbox}
+            editMode={editMode}
           />
         );
       })}

components/LinkViews/Layouts/ListView.tsx

@@ -4,9 +4,11 @@ import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
 export default function ListView({
   links,
   showCheckbox = true,
+  editMode
 }: {
   links: LinkIncludingShortenedCollectionAndTags[];
   showCheckbox?: boolean;
+  editMode?: boolean;
 }) {
   return (
     <div className="flex flex-col">
@@ -18,6 +20,8 @@ export default function ListView({
             count={i}
             showCheckbox={showCheckbox}
             flipDropdown={i === links.length - 1}
+            editMode={editMode}
+
           />
         );
       })}

components/LinkViews/LinkCard.tsx

@@ -25,12 +25,14 @@ type Props = {
   className?: string;
   flipDropdown?: boolean;
   showCheckbox?: boolean;
+  editMode?: boolean;
 };
 
 export default function LinkCard({
   link,
   flipDropdown,
   showCheckbox = true,
+  editMode
 }: Props) {
   const { collections } = useCollectionStore();
   const { account } = useAccountStore();
@@ -101,7 +103,7 @@ export default function LinkCard({
       ref={ref}
       className="border border-solid border-neutral-content bg-base-200 shadow-md hover:shadow-none duration-100 rounded-2xl relative"
     >
-      {showCheckbox &&
+      {showCheckbox && editMode &&
         (permissions === true ||
           permissions?.canCreate ||
           permissions?.canDelete) && (

components/LinkViews/LinkList.tsx

@@ -22,12 +22,14 @@ type Props = {
   className?: string;
   flipDropdown?: boolean;
   showCheckbox?: boolean;
+  editMode?: boolean;
 };
 
 export default function LinkCardCompact({
   link,
   flipDropdown,
   showCheckbox = true,
+  editMode,
 }: Props) {
   const { collections } = useCollectionStore();
   const { account } = useAccountStore();
@@ -73,11 +75,10 @@ export default function LinkCardCompact({
   return (
     <>
       <div
-        className={`border-neutral-content relative items-center flex ${
-          !showInfo && !isPWA() ? "hover:bg-base-300 p-3" : "py-3"
+        className={`border-neutral-content relative items-center flex ${!showInfo && !isPWA() ? "hover:bg-base-300 p-3" : "py-3"
           } duration-200 rounded-lg`}
       >
-        {showCheckbox &&
+        {showCheckbox && editMode &&
           (permissions === true ||
             permissions?.canCreate ||
             permissions?.canDelete) && (

components/SortDropdown.tsx

@@ -14,7 +14,7 @@ export default function SortDropdown({ sortBy, setSort }: Props) {
         tabIndex={0}
         role="button"
         onMouseDown={dropdownTriggerer}
-        className="btn btn-sm btn-square btn-ghost"
+        className="btn btn-sm btn-square btn-ghost border-none"
       >
         <i className="bi-chevron-expand text-neutral text-2xl"></i>
       </div>

components/ViewDropdown.tsx

@@ -1,4 +1,4 @@
-import React, { Dispatch, SetStateAction, useEffect, useState } from "react";
+import React, { Dispatch, SetStateAction, useEffect } from "react";
 import useLocalSettingsStore from "@/store/localSettings";
 
 import { ViewMode } from "@/types/global";
@@ -26,8 +26,7 @@ export default function ViewDropdown({ viewMode, setViewMode }: Props) {
     <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
+        className={`btn btn-square btn-sm btn-ghost ${viewMode == ViewMode.Card
           ? "bg-primary/20 hover:bg-primary/20"
           : "hover:bg-neutral/20"
           }`}
@@ -37,8 +36,7 @@ export default function ViewDropdown({ viewMode, setViewMode }: Props) {
 
       <button
         onClick={(e) => onChangeViewMode(e, ViewMode.List)}
-        className={`btn btn-square btn-sm btn-ghost ${
-          viewMode == ViewMode.List
+        className={`btn btn-square btn-sm btn-ghost ${viewMode == ViewMode.List
           ? "bg-primary/20 hover:bg-primary/20"
           : "hover:bg-neutral/20"
           }`}

pages/collections/[id].tsx

@@ -96,6 +96,7 @@ export default function Index() {
   const [deleteCollectionModal, setDeleteCollectionModal] = useState(false);
   const [bulkDeleteLinksModal, setBulkDeleteLinksModal] = useState(false);
   const [bulkEditLinksModal, setBulkEditLinksModal] = useState(false);
+  const [editMode, setEditMode] = useState(false);
 
   const [viewMode, setViewMode] = useState<string>(
     localStorage.getItem("viewMode") || ViewMode.Card
@@ -120,8 +121,7 @@ export default function Index() {
 
   const bulkDeleteLinks = async () => {
     const load = toast.loading(
-      `Deleting ${selectedLinks.length} Link${
-        selectedLinks.length > 1 ? "s" : ""
+      `Deleting ${selectedLinks.length} Link${selectedLinks.length > 1 ? "s" : ""
       }...`
     );
 
@@ -133,8 +133,7 @@ export default function Index() {
 
     response.ok &&
       toast.success(
-        `Deleted ${selectedLinks.length} Link${
-          selectedLinks.length > 1 ? "s" : ""
+        `Deleted ${selectedLinks.length} Link${selectedLinks.length > 1 ? "s" : ""
         }!`
       );
   };
@@ -144,8 +143,7 @@ export default function Index() {
       <div
         className="h-[60rem] p-5 flex gap-3 flex-col"
         style={{
-          backgroundImage: `linear-gradient(${activeCollection?.color}20 10%, ${
-            settings.theme === "dark" ? "#262626" : "#f3f4f6"
+          backgroundImage: `linear-gradient(${activeCollection?.color}20 10%, ${settings.theme === "dark" ? "#262626" : "#f3f4f6"
             } 13rem, ${settings.theme === "dark" ? "#171717" : "#ffffff"} 100%)`,
         }}
       >
@@ -309,14 +307,25 @@ export default function Index() {
 
         <div className="divider my-0"></div>
 
-        <div className="flex justify-between items-end gap-5">
+        <div className="flex justify-between items-center gap-5">
           <p>Showing {activeCollection?._count?.links} results</p>
           <div className="flex items-center gap-2">
+            <div
+              role="button"
+              onClick={() => setEditMode(!editMode)}
+              className={`btn btn-square btn-sm btn-ghost ${editMode
+                ? "bg-primary/20 hover:bg-primary/20"
+                : "hover:bg-neutral/20"
+                }`}
+            >
+              <i className="bi-pencil-fill text-neutral text-xl"></i>
+            </div>
             <SortDropdown sortBy={sortBy} setSort={setSortBy} />
             <ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
           </div>
         </div>
 
+        {editMode && (
           <div className="w-full flex justify-between items-center min-h-[32px]">
             {links.length > 0 && (
               <div className="flex gap-3 ml-3">
@@ -363,8 +372,12 @@ export default function Index() {
             </div>
           </div>
 
+        )}
+
+
         {links.some((e) => e.collectionId === Number(router.query.id)) ? (
           <LinkComponent
+            editMode={editMode}
             links={links.filter(
               (e) => e.collection.id === activeCollection?.id
             )}