feat(options): persist list sort mode in settings

Author: itaober

src/core/defaults.ts

@@ -1,4 +1,4 @@
-import type { FolioStore } from './types';
+import { DEFAULT_SORT_MODE, type FolioStore } from './types';
 import { DEFAULT_THEME } from '../shared/theme';
 
 export const FOLIO_STORE_KEY = 'folio-store';
@@ -14,6 +14,7 @@ export function createDefaultStore(): FolioStore {
       iconVariant: 'classic',
       theme: DEFAULT_THEME,
       defaultStatus: 'unread',
+      sortMode: DEFAULT_SORT_MODE,
       syncDirectory: null,
       lastSyncedAt: null,
       lastSyncError: null

src/core/repository.ts

@@ -7,6 +7,7 @@ import type {
   FolioStatus,
   FolioStore
 } from './types';
+import { resolveSortMode } from './types';
 import { extractDomain, normalizeUrl } from './url';
 import { isSupportedLocale, writeStoredLocale } from '../shared/i18n/localeStore';
 import { getThemeIconVariant, resolveFolioTheme } from '../shared/theme';
@@ -59,6 +60,7 @@ function normalizeStore(store: FolioStore): FolioStore {
     theme,
     defaultStatus:
       store.settings.defaultStatus === 'reading' ? 'reading' : 'unread',
+    sortMode: resolveSortMode(store.settings.sortMode),
     syncDirectory:
       typeof store.settings.syncDirectory === 'string'
         ? store.settings.syncDirectory
@@ -173,6 +175,7 @@ function sanitizeImportedStore(raw: unknown, current: FolioStore): FolioStore |
     rawSettings.defaultStatus === 'unread' || rawSettings.defaultStatus === 'reading'
       ? rawSettings.defaultStatus
       : current.settings.defaultStatus;
+  const sortMode = resolveSortMode(rawSettings.sortMode ?? current.settings.sortMode);
   const theme = resolveFolioTheme(rawSettings.theme ?? current.settings.theme);
   const iconVariant = getThemeIconVariant(theme);
 
@@ -186,6 +189,7 @@ function sanitizeImportedStore(raw: unknown, current: FolioStore): FolioStore |
       iconVariant,
       theme,
       defaultStatus,
+      sortMode,
       syncDirectory:
         typeof current.settings.syncDirectory === 'string'
           ? current.settings.syncDirectory
@@ -241,6 +245,7 @@ export async function getStore(): Promise<FolioStore> {
       'iconVariant',
       'theme',
       'defaultStatus',
+      'sortMode',
       'syncDirectory',
       'lastSyncedAt',
       'lastSyncError'
@@ -439,6 +444,9 @@ export async function commit(mutation: FolioMutation): Promise<CommitResult> {
         if (mutation.payload.defaultStatus !== undefined) {
           next.settings.defaultStatus = mutation.payload.defaultStatus;
         }
+        if (mutation.payload.sortMode !== undefined) {
+          next.settings.sortMode = mutation.payload.sortMode;
+        }
 
         break;
       }

src/core/selectors.ts

@@ -1,12 +1,7 @@
-import type { FolioItem, FolioStatus, FolioStore } from './types';
+import type { FolioItem, FolioStatus, FolioStore, SortMode } from './types';
 import { normalizeUrl } from './url';
 
-export type SortMode =
-  | 'saved_desc'
-  | 'saved_asc'
-  | 'domain_asc'
-  | 'title_asc'
-  | 'status';
+export type { SortMode } from './types';
 
 export interface StatusCounts {
   total: number;

src/core/sync/types.ts

@@ -73,6 +73,7 @@ export const BACKUP_JSON_SCHEMA: Record<string, unknown> = {
         'iconVariant',
         'theme',
         'defaultStatus',
+        'sortMode',
         'syncDirectory',
         'lastSyncedAt',
         'lastSyncError'
@@ -82,6 +83,9 @@ export const BACKUP_JSON_SCHEMA: Record<string, unknown> = {
         iconVariant: { enum: ['classic', 'mono'] },
         theme: { enum: FOLIO_THEMES },
         defaultStatus: { enum: ['unread', 'reading'] },
+        sortMode: {
+          enum: ['saved_desc', 'saved_asc', 'domain_asc', 'title_asc', 'status']
+        },
         syncDirectory: { type: ['string', 'null'] },
         lastSyncedAt: { type: ['number', 'null'] },
         lastSyncError: { type: ['string', 'null'] }

src/core/types.ts

@@ -3,6 +3,28 @@ import type { FolioIconVariant } from '../shared/icons';
 import type { FolioTheme } from '../shared/theme';
 
 export type FolioStatus = 'unread' | 'reading' | 'done';
+export type SortMode =
+  | 'saved_desc'
+  | 'saved_asc'
+  | 'domain_asc'
+  | 'title_asc'
+  | 'status';
+
+export const DEFAULT_SORT_MODE: SortMode = 'saved_desc';
+
+export function isSortMode(value: unknown): value is SortMode {
+  return (
+    value === 'saved_desc' ||
+    value === 'saved_asc' ||
+    value === 'domain_asc' ||
+    value === 'title_asc' ||
+    value === 'status'
+  );
+}
+
+export function resolveSortMode(value: unknown): SortMode {
+  return isSortMode(value) ? value : DEFAULT_SORT_MODE;
+}
 
 export interface FolioItem {
   id: string;
@@ -23,6 +45,7 @@ export interface FolioSettings {
   iconVariant: FolioIconVariant;
   theme: FolioTheme;
   defaultStatus: 'unread' | 'reading';
+  sortMode: SortMode;
   syncDirectory: string | null;
   lastSyncedAt: number | null;
   lastSyncError: string | null;
@@ -95,6 +118,7 @@ export type FolioMutation =
         iconVariant?: FolioIconVariant;
         theme?: FolioTheme;
         defaultStatus?: 'unread' | 'reading';
+        sortMode?: SortMode;
       };
     }
   | {

src/options/App.tsx

@@ -63,7 +63,13 @@ import {
   clearBackupDirectoryHandle,
   saveBackupDirectoryHandle
 } from '../core/sync/handleStore';
-import type { FolioItem, FolioMutation, FolioStatus, FolioStore } from '../core/types';
+import {
+  isSortMode,
+  type FolioItem,
+  type FolioMutation,
+  type FolioStatus,
+  type FolioStore
+} from '../core/types';
 
 type ViewKey = 'all' | FolioStatus | 'settings';
 
@@ -309,9 +315,33 @@ export default function App(): ReactElement {
     setLocale(nextLocale);
     setThemeInput(nextTheme);
     setDefaultStatusInput(nextStore.settings.defaultStatus);
+    setSortMode(nextStore.settings.sortMode);
     applyDocumentTheme(nextTheme);
   }
 
+  async function handleSortModeChange(value: string): Promise<void> {
+    if (!isSortMode(value)) {
+      return;
+    }
+
+    if (value === sortMode) {
+      return;
+    }
+
+    setSortMode(value);
+    const settingsResult = await commit({
+      type: 'updateSettings',
+      payload: {
+        sortMode: value
+      }
+    });
+
+    if (!settingsResult.ok) {
+      setNotice({ level: 'error', text: t('options.updateFailed') });
+      await refresh();
+    }
+  }
+
   const displayItems = useMemo(() => {
     if (!store) return [];
 
@@ -1282,7 +1312,7 @@ export default function App(): ReactElement {
                   wrapperClassName="w-[min(22vw,180px)] min-w-[140px]"
                   leftIcon={<ArrowUpDown className="h-4 w-4" strokeWidth={1.9} />}
                   value={sortMode}
-                  onChange={(event) => setSortMode(event.target.value as SortMode)}
+                  onChange={(event) => void handleSortModeChange(event.target.value)}
                 >
                     <option value="saved_desc">{t('options.sortNewest')}</option>
                     <option value="saved_asc">{t('options.sortOldest')}</option>