Add files

src/renderer/store/app.store.ts

@@ -0,0 +1,200 @@
+import merge from 'lodash/merge';
+import { nanoid } from 'nanoid/non-secure';
+import create from 'zustand';
+import { devtools, persist } from 'zustand/middleware';
+import { immer } from 'zustand/middleware/immer';
+import { AlbumListSort, SongListSort, SortOrder } from '/@/renderer/api/types';
+import { AdvancedFilterGroup, CardDisplayType, Platform, FilterGroupType } from '/@/renderer/types';
+
+type SidebarProps = {
+  expanded: string[];
+  image: boolean;
+  leftWidth: string;
+  rightExpanded: boolean;
+  rightWidth: string;
+};
+
+type LibraryPageProps<TSort> = {
+  list: ListProps<TSort>;
+};
+
+type ListFilter<TSort> = {
+  musicFolderId?: string;
+  sortBy: TSort;
+  sortOrder: SortOrder;
+};
+
+type ListAdvancedFilter = {
+  enabled: boolean;
+  filter: AdvancedFilterGroup;
+};
+
+type ListProps<T> = {
+  advancedFilter: ListAdvancedFilter;
+  display: CardDisplayType;
+  filter: ListFilter<T>;
+  gridScrollOffset: number;
+  listScrollOffset: number;
+  size: number;
+  type: 'list' | 'grid';
+};
+
+type TitlebarProps = {
+  backgroundColor: string;
+  outOfView: boolean;
+};
+
+export interface AppState {
+  albums: LibraryPageProps<AlbumListSort>;
+  isReorderingQueue: boolean;
+  platform: Platform;
+  sidebar: {
+    expanded: string[];
+    image: boolean;
+    leftWidth: string;
+    rightExpanded: boolean;
+    rightWidth: string;
+  };
+  songs: LibraryPageProps<SongListSort>;
+  titlebar: TitlebarProps;
+}
+
+const DEFAULT_ADVANCED_FILTERS = {
+  group: [],
+  rules: [
+    {
+      field: '',
+      operator: '',
+      uniqueId: nanoid(),
+      value: '',
+    },
+  ],
+  type: FilterGroupType.AND,
+  uniqueId: nanoid(),
+};
+
+export interface AppSlice extends AppState {
+  actions: {
+    resetServerDefaults: () => void;
+    setAppStore: (data: Partial<AppSlice>) => void;
+    setPage: (
+      page: 'albums' | 'songs',
+      options: Partial<LibraryPageProps<AlbumListSort | SongListSort>>,
+    ) => void;
+    setSidebar: (options: Partial<SidebarProps>) => void;
+    setTitlebar: (options: Partial<TitlebarProps>) => void;
+  };
+}
+
+export const useAppStore = create<AppSlice>()(
+  persist(
+    devtools(
+      immer((set, get) => ({
+        actions: {
+          resetServerDefaults: () => {
+            set((state) => {
+              state.albums.list = {
+                ...state.albums.list,
+                filter: {
+                  ...state.albums.list.filter,
+                  musicFolderId: undefined,
+                },
+                gridScrollOffset: 0,
+                listScrollOffset: 0,
+              };
+            });
+          },
+          setAppStore: (data) => {
+            set({ ...get(), ...data });
+          },
+          setPage: (page: 'albums' | 'songs', data: any) => {
+            set((state) => {
+              state[page] = { ...state[page], ...data };
+            });
+          },
+          setSidebar: (options) => {
+            set((state) => {
+              state.sidebar = { ...state.sidebar, ...options };
+            });
+          },
+          setTitlebar: (options) => {
+            set((state) => {
+              state.titlebar = { ...state.titlebar, ...options };
+            });
+          },
+        },
+        albums: {
+          list: {
+            advancedFilter: {
+              enabled: false,
+              filter: DEFAULT_ADVANCED_FILTERS,
+            },
+            display: CardDisplayType.CARD,
+            filter: {
+              musicFolderId: undefined,
+              sortBy: AlbumListSort.RECENTLY_ADDED,
+              sortOrder: SortOrder.ASC,
+            },
+            gridScrollOffset: 0,
+            listScrollOffset: 0,
+            size: 50,
+            type: 'grid',
+          },
+        },
+        isReorderingQueue: false,
+        platform: Platform.WINDOWS,
+        sidebar: {
+          expanded: [],
+          image: false,
+          leftWidth: '230px',
+          rightExpanded: false,
+          rightWidth: '400px',
+        },
+        songs: {
+          list: {
+            advancedFilter: {
+              enabled: false,
+              filter: DEFAULT_ADVANCED_FILTERS,
+            },
+            display: CardDisplayType.CARD,
+            filter: {
+              musicFolderId: undefined,
+              sortBy: SongListSort.NAME,
+              sortOrder: SortOrder.ASC,
+            },
+            gridScrollOffset: 0,
+            listScrollOffset: 0,
+            size: 50,
+            type: 'grid',
+          },
+        },
+        titlebar: {
+          backgroundColor: '#000000',
+          outOfView: false,
+        },
+      })),
+      { name: 'store_app' },
+    ),
+    {
+      merge: (persistedState, currentState) => {
+        return merge(currentState, persistedState);
+      },
+      name: 'store_app',
+      version: 1,
+    },
+  ),
+);
+
+export const useAppStoreActions = () => useAppStore((state) => state.actions);
+
+export const useAlbumRouteStore = () => useAppStore((state) => state.albums);
+
+export const useSongRouteStore = () => useAppStore((state) => state.songs);
+
+export const useSidebarStore = () => useAppStore((state) => state.sidebar);
+
+export const useSidebarRightExpanded = () => useAppStore((state) => state.sidebar.rightExpanded);
+
+export const useSetTitlebar = () => useAppStore((state) => state.actions.setTitlebar);
+
+export const useTitlebarStore = () => useAppStore((state) => state.titlebar);