优化

web/src/hooks/useLibraryListSort.ts

@@ -0,0 +1,38 @@
+import { useCallback, useEffect, useState } from 'react'
+
+import {
+  readLibraryListSort,
+  writeLibraryListSort,
+  type LibraryListSortField,
+  type LibraryListSortOrder,
+} from '../utils/libraryListSort'
+
+export type UseLibraryListSortResult = {
+  field: LibraryListSortField
+  order: LibraryListSortOrder
+  setSort: (field: LibraryListSortField, order: LibraryListSortOrder) => void
+}
+
+/**
+ * 媒体库列表的排序偏好（localStorage 持久化）。
+ *
+ * 首页和 /libraries 读的是同一份偏好，这样在 /libraries 改了排序后回到首页
+ * 顺序也一致；默认「库名倒序」。另外监听 storage 事件，多标签页同时打开时
+ * 一边改动另一边也能跟上。
+ */
+export function useLibraryListSort(): UseLibraryListSortResult {
+  const [sort, setSort] = useState(() => readLibraryListSort())
+
+  useEffect(() => {
+    const sync = () => setSort(readLibraryListSort())
+    window.addEventListener('storage', sync)
+    return () => window.removeEventListener('storage', sync)
+  }, [])
+
+  const update = useCallback((field: LibraryListSortField, order: LibraryListSortOrder) => {
+    writeLibraryListSort(field, order)
+    setSort({ field, order })
+  }, [])
+
+  return { field: sort.field, order: sort.order, setSort: update }
+}