From 42d6bf1c025069ccbedfdcb953268b822be1b313 Mon Sep 17 00:00:00 2001
From: Andy Hsu <i@nn.ci>
Date: Sun, 18 Feb 2024 15:39:54 +0800
Subject: [PATCH] feat: customize grid item size (close alist-org/alist#6051)

---
 src/pages/home/folder/Grid.tsx     |  6 ++++--
 src/pages/home/folder/GridItem.tsx | 16 +++++++++++++---
 src/store/local_settings.ts        |  5 +++++
 3 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/pages/home/folder/Grid.tsx b/src/pages/home/folder/Grid.tsx
index 470a9b7c0b..e7a6d027e9 100644
--- a/src/pages/home/folder/Grid.tsx
+++ b/src/pages/home/folder/Grid.tsx
@@ -2,14 +2,16 @@ import { Grid } from "@hope-ui/solid"
 import { For } from "solid-js"
 import { GridItem } from "./GridItem"
 import "lightgallery/css/lightgallery-bundle.css"
-import { objStore } from "~/store"
+import { local, objStore } from "~/store"
 
 const GridLayout = () => {
   return (
     <Grid
       w="$full"
       gap="$1"
-      templateColumns="repeat(auto-fill, minmax(100px,1fr))"
+      templateColumns={`repeat(auto-fill, minmax(${
+        parseInt(local["grid_item_size"]) + 20
+      }px,1fr))`}
     >
       <For each={objStore.objs}>
         {(obj, i) => {
diff --git a/src/pages/home/folder/GridItem.tsx b/src/pages/home/folder/GridItem.tsx
index 20928a04b2..c05bc942c4 100644
--- a/src/pages/home/folder/GridItem.tsx
+++ b/src/pages/home/folder/GridItem.tsx
@@ -4,7 +4,13 @@ import { useContextMenu } from "solid-contextmenu"
 import { batch, createMemo, createSignal, Show } from "solid-js"
 import { CenterLoading, LinkWithPush, ImageWithError } from "~/components"
 import { usePath, useUtil } from "~/hooks"
-import { checkboxOpen, getMainColor, selectAll, selectIndex } from "~/store"
+import {
+  checkboxOpen,
+  getMainColor,
+  local,
+  selectAll,
+  selectIndex,
+} from "~/store"
 import { ObjType, StoreObj } from "~/types"
 import { bus, hoverColor } from "~/utils"
 import { getIconByObj } from "~/utils/icon"
@@ -16,7 +22,11 @@ export const GridItem = (props: { obj: StoreObj; index: number }) => {
   }
   const { setPathAs } = usePath()
   const objIcon = (
-    <Icon color={getMainColor()} boxSize="$12" as={getIconByObj(props.obj)} />
+    <Icon
+      color={getMainColor()}
+      boxSize={`${parseInt(local["grid_item_size"]) - 30}px`}
+      as={getIconByObj(props.obj)}
+    />
   )
   const [hover, setHover] = createSignal(false)
   const showCheckbox = createMemo(
@@ -65,7 +75,7 @@ export const GridItem = (props: { obj: StoreObj; index: number }) => {
       >
         <Center
           class="item-thumbnail"
-          h="70px"
+          h={`${parseInt(local["grid_item_size"])}px`}
           w="$full"
           // @ts-ignore
           on:click={(e) => {
diff --git a/src/store/local_settings.ts b/src/store/local_settings.ts
index dd12d67613..e8b865ef97 100644
--- a/src/store/local_settings.ts
+++ b/src/store/local_settings.ts
@@ -41,6 +41,11 @@ export const initialLocalSettings = [
     type: "select",
     options: ["static", "sticky", "only_navbar_sticky"],
   },
+  {
+    key: "grid_item_size",
+    default: "90",
+    type: "number",
+  },
 ]
 export type LocalSetting = (typeof initialLocalSettings)[number]
 for (const setting of initialLocalSettings) {