Revert "undo commit"

This reverts commit 9103f67db5.

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>
   );
 }