feat: layout by pathname (close alist-org/alist#4651)

src/app/App.tsx

@@ -2,6 +2,7 @@ import { Progress, ProgressIndicator } from "@hope-ui/solid"
 import { Route, Routes, useIsRouting } from "@solidjs/router"
 import {
   Component,
+  createEffect,
   createSignal,
   lazy,
   Match,
@@ -30,7 +31,7 @@ const App: Component = () => {
   globalStyles()
   const [, { add }] = useI18n()
   const isRouting = useIsRouting()
-  const { to } = useRouter()
+  const { to, pathname } = useRouter()
   const onTo = (path: string) => {
     to(path)
   }
@@ -39,6 +40,10 @@ const App: Component = () => {
     bus.off("to", onTo)
   })
 
+  createEffect(() => {
+    bus.emit("pathname", pathname())
+  })
+
   const [err, setErr] = createSignal<string>()
   const [loading, data] = useLoading(() =>
     Promise.all([

src/hooks/useLink.ts

@@ -21,8 +21,8 @@ export const getLinkByDirAndObj = (
   let host = api
   let prefix = type === "direct" ? "/d" : "/p"
   if (type === "preview") {
-    if (!api.startsWith(location.origin)) host = location.origin
     prefix = ""
+    if (!api.startsWith(location.origin)) host = location.origin
   }
   let ans = `${host}${prefix}${path}`
   if (type !== "preview" && obj.sign) {

src/store/obj.ts

@@ -3,7 +3,7 @@ import { cookieStorage, createStorageSignal } from "@solid-primitives/storage"
 import { createSignal } from "solid-js"
 import { createStore, produce } from "solid-js/store"
 import { Obj, StoreObj } from "~/types"
-import { log } from "~/utils"
+import { bus, log } from "~/utils"
 import { keyPressed } from "./key-event"
 
 export enum State {
@@ -174,7 +174,29 @@ export const isIndeterminate = () => {
 }
 
 export type LayoutType = "list" | "grid" | "image"
-const [layout, setLayout] = createStorageSignal<LayoutType>("layout", "list")
+const [pathname, setPathname] = createSignal<string>(location.pathname)
+const layoutRecord: Record<string, LayoutType> = (() => {
+  try {
+    return JSON.parse(localStorage.getItem("layoutRecord") || "{}")
+  } catch (e) {
+    return {}
+  }
+})()
+
+bus.on("pathname", (p) => setPathname(p))
+const [_layout, _setLayout] = createSignal<LayoutType>(
+  layoutRecord[pathname()] || "list"
+)
+export const layout = () => {
+  const layout = layoutRecord[pathname()]
+  _setLayout(layout || "list")
+  return _layout()
+}
+export const setLayout = (layout: LayoutType) => {
+  layoutRecord[pathname()] = layout
+  localStorage.setItem("layoutRecord", JSON.stringify(layoutRecord))
+  _setLayout(layout)
+}
 
 const [_checkboxOpen, setCheckboxOpen] = createStorageSignal<string>(
   "checkbox-open",
@@ -186,7 +208,7 @@ export const toggleCheckbox = () => {
   setCheckboxOpen(checkboxOpen() ? "false" : "true")
 }
 
-export { objStore, layout, setLayout }
+export { objStore }
 // browser password
 const [_password, _setPassword] = createSignal<string>(
   cookieStorage.getItem("browser-password") || ""

src/utils/bus.ts

@@ -4,6 +4,7 @@ type Events = {
   to: string
   gallery: string
   tool: string
+  pathname: string
 }
 
 export const bus = mitt<Events>()