feat: show folders also in image view (close AlistGo/alist#4776)

src/lang/en/home.json

@@ -91,7 +91,13 @@
   "local_settings": {
     "aria2_rpc_url": "Aria2 RPC URL",
     "aria2_rpc_secret": "Aria2 RPC secret",
-    "aria2_dir": "Aria2 download directory"
+    "aria2_dir": "Aria2 download directory",
+    "show_folder_in_image_view": "Show folder in image view",
+    "show_folder_in_image_view_options": {
+      "top": "Top",
+      "bottom": "Bottom",
+      "none": "None"
+    }
   },
   "package_download": {
     "current_status": "Current Status",

src/pages/home/folder/Images.tsx

@@ -1,18 +1,41 @@
-import { Flex } from "@hope-ui/solid"
-import { For } from "solid-js"
+import { Flex, Grid, VStack } from "@hope-ui/solid"
+import { For, Show, createMemo } from "solid-js"
 import { ImageItem } from "./ImageItem"
-import { objStore } from "~/store"
+import { local, objStore } from "~/store"
+import { GridItem } from "./GridItem"
 
-const GridLayout = () => {
-  return (
-    <Flex w="$full" gap="$1" flexWrap="wrap">
-      <For each={objStore.objs}>
+const ImageLayout = () => {
+  const folders = createMemo(() => (
+    <Grid
+      w="$full"
+      gap="$1"
+      templateColumns="repeat(auto-fill, minmax(100px,1fr))"
+      class="image-folders"
+    >
+      <For each={objStore.objs.filter((obj) => obj.is_dir)}>
         {(obj, i) => {
-          return <ImageItem obj={obj} index={i()} />
+          return <GridItem obj={obj} index={i()} />
         }}
       </For>
-    </Flex>
+    </Grid>
+  ))
+  return (
+    <VStack spacing="$2" w="$full">
+      <Show when={local["show_folder_in_image_view"] === "top"}>
+        {folders()}
+      </Show>
+      <Flex w="$full" gap="$1" flexWrap="wrap" class="image-images">
+        <For each={objStore.objs}>
+          {(obj, i) => {
+            return <ImageItem obj={obj} index={i()} />
+          }}
+        </For>
+      </Flex>
+      <Show when={local["show_folder_in_image_view"] === "bottom"}>
+        {folders()}
+      </Show>
+    </VStack>
   )
 }
 
-export default GridLayout
+export default ImageLayout

src/pages/home/toolbar/LocalSettings.tsx

@@ -11,25 +11,67 @@ import {
   FormLabel,
   HStack,
   Input,
+  Select,
+  SelectContent,
+  SelectIcon,
+  SelectListbox,
+  SelectOption,
+  SelectOptionIndicator,
+  SelectOptionText,
+  SelectPlaceholder,
+  SelectTrigger,
+  SelectValue,
   VStack,
 } from "@hope-ui/solid"
-import { For, onCleanup } from "solid-js"
+import { For, Match, onCleanup, Switch } from "solid-js"
 import { SwitchLanguageWhite, SwitchColorMode } from "~/components"
 import { useT } from "~/hooks"
-import { initialLocalSettings, local, setLocal } from "~/store"
+import { initialLocalSettings, local, LocalSetting, setLocal } from "~/store"
 import { bus } from "~/utils"
 
-const LocalSettingsInput = (props: { name: string }) => {
+function LocalSettingEdit(props: LocalSetting) {
   const t = useT()
   return (
     <FormControl>
-      <FormLabel>{t(`home.local_settings.${props.name}`)}</FormLabel>
-      <Input
-        value={local[props.name]}
-        onInput={(e) => {
-          setLocal(props.name, e.currentTarget.value)
-        }}
-      />
+      <FormLabel>{t(`home.local_settings.${props.key}`)}</FormLabel>
+      <Switch
+        fallback={
+          <Input
+            value={local[props.key]}
+            onInput={(e) => {
+              setLocal(props.key, e.currentTarget.value)
+            }}
+          />
+        }
+      >
+        <Match when={props.type === "select"}>
+          <Select
+            id={props.key}
+            defaultValue={local[props.key]}
+            onChange={(v) => setLocal(props.key, v)}
+          >
+            <SelectTrigger>
+              <SelectPlaceholder>{t("global.choose")}</SelectPlaceholder>
+              <SelectValue />
+              <SelectIcon />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectListbox>
+                <For each={props.options}>
+                  {(item) => (
+                    <SelectOption value={item}>
+                      <SelectOptionText>
+                        {t(`home.local_settings.${props.key}_options.${item}`)}
+                      </SelectOptionText>
+                      <SelectOptionIndicator />
+                    </SelectOption>
+                  )}
+                </For>
+              </SelectListbox>
+            </SelectContent>
+          </Select>
+        </Match>
+      </Switch>
     </FormControl>
   )
 }
@@ -56,8 +98,8 @@ export const LocalSettings = () => {
         </DrawerHeader>
         <DrawerBody>
           <VStack spacing="$2">
-            <For each={Object.keys(initialLocalSettings)}>
-              {(name) => <LocalSettingsInput name={name} />}
+            <For each={initialLocalSettings}>
+              {(setting) => <LocalSettingEdit {...setting} />}
             </For>
           </VStack>
           <Center mt="$4">

src/store/local_settings.ts

@@ -1,21 +1,33 @@
 import { createLocalStorage } from "@solid-primitives/storage"
 
 const [local, setLocal, { remove, clear, toJSON }] = createLocalStorage()
-export function isValidKey(
-  key: string | number | symbol,
-  object: object
-): key is keyof typeof object {
-  return key in object
-}
+// export function isValidKey(
+//   key: string | number | symbol,
+//   object: object
+// ): key is keyof typeof object {
+//   return key in object
+// }
 
-export const initialLocalSettings = {
-  aria2_rpc_url: "http://localhost:6800/jsonrpc",
-  aria2_rpc_secret: "",
-  // aria2_dir: "/downloads/alist",
-}
-for (const key in initialLocalSettings) {
-  if (!local[key] && isValidKey(key, initialLocalSettings)) {
-    setLocal(key, initialLocalSettings[key])
+export const initialLocalSettings = [
+  {
+    key: "aria2_rpc_url",
+    default: "http://localhost:6800/jsonrpc",
+  },
+  {
+    key: "aria2_rpc_secret",
+    default: "",
+  },
+  {
+    key: "show_folder_in_image_view",
+    default: "top",
+    type: "select",
+    options: ["top", "bottom", "none"],
+  },
+]
+export type LocalSetting = (typeof initialLocalSettings)[number]
+for (const setting of initialLocalSettings) {
+  if (!local[setting.key]) {
+    setLocal(setting.key, setting.default)
   }
 }