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"
-        } duration-200 rounded-lg`}
+        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) && (
@@ -128,8 +129,8 @@ export default function LinkCardCompact({
           collection={collection}
           position="top-3 right-3"
           flipDropdown={flipDropdown}
-          // toggleShowInfo={() => setShowInfo(!showInfo)}
-          // linkInfo={showInfo}
+        // toggleShowInfo={() => setShowInfo(!showInfo)}
+        // linkInfo={showInfo}
         />
         {showInfo ? (
           <div>

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,22 +26,20 @@ 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
-            ? "bg-primary/20 hover:bg-primary/20"
-            : "hover:bg-neutral/20"
-        }`}
+        className={`btn btn-square btn-sm btn-ghost ${viewMode == ViewMode.Card
+          ? "bg-primary/20 hover:bg-primary/20"
+          : "hover:bg-neutral/20"
+          }`}
       >
         <i className="bi-grid 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"
-        }`}
+        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>