refactor: extract various constants

frontend/src/app/PanelManagerContext.tsx

@@ -10,13 +10,16 @@ import React, {
 } from 'react';
 import type { CSSProperties, PointerEvent as ReactPointerEvent, RefObject } from 'react';
 import { useSidebarContext } from '../sidebar/SidebarContext';
-
-type PanelKey = 'sidebar' | 'detail';
-
-interface PanelLimits {
-  maxRatio: number;
-  minPx: number;
-}
+import {
+  DEFAULT_DETAIL_WIDTH,
+  DEFAULT_SIDEBAR_WIDTH,
+  MINIMAL_FREE_RATIO,
+  MINIMUM_MAIN_CONTENT_WIDTH,
+  PANEL_LIMITS,
+  PANEL_STORAGE_KEYS,
+  SIDEBAR_SOLO_THRESHOLD,
+  type PanelKey,
+} from '../constants/layout';
 
 interface SetPanelWidthOptions {
   commit?: boolean;
@@ -50,29 +53,6 @@ type PanelResizeBindings = {
 
 const PanelManagerContext = createContext<PanelManagerContextValue | null>(null);
 
-const PANEL_LIMITS: Record<PanelKey, PanelLimits> = {
-  sidebar: {
-    maxRatio: 1 / 3,
-    minPx: 280,
-  },
-  detail: {
-    maxRatio: 2 / 3,
-    minPx: 320,
-  },
-};
-
-const STORAGE_KEYS: Record<PanelKey, string> = {
-  sidebar: 'papercrate_sidebar_width',
-  detail: 'papercrate_detail_width',
-};
-
-const DEFAULT_SIDEBAR_WIDTH = 320;
-const DEFAULT_DETAIL_WIDTH = 420;
-
-const MINIMAL_FREE_RATIO = 1 / 3;
-const SIDEBAR_SOLO_THRESHOLD = 1 / 2;
-const MINIMUM_MAIN_CONTENT_WIDTH = 160;
-
 const clampPanelWidth = (panel: PanelKey, value: number): number => {
   const numeric = Number(value);
   const limits = PANEL_LIMITS[panel];
@@ -86,7 +66,7 @@ const clampPanelWidth = (panel: PanelKey, value: number): number => {
 };
 
 const readStoredWidth = (panel: PanelKey, fallback: number): number => {
-  const raw = window.localStorage.getItem(STORAGE_KEYS[panel]);
+  const raw = window.localStorage.getItem(PANEL_STORAGE_KEYS[panel]);
   if (!raw) {
     return fallback;
   }
@@ -95,7 +75,7 @@ const readStoredWidth = (panel: PanelKey, fallback: number): number => {
 };
 
 const persistWidth = (panel: PanelKey, value: number): void => {
-  window.localStorage.setItem(STORAGE_KEYS[panel], String(Math.round(value)));
+  window.localStorage.setItem(PANEL_STORAGE_KEYS[panel], String(Math.round(value)));
 };
 
 const applyPanelWidthToRoot = (panel: PanelKey, width: number, active: boolean): void => {

frontend/src/app/appState.tsx

@@ -2,6 +2,7 @@ import React, { useContext, useEffect, useMemo, useReducer } from 'react';
 import { clearAuthToken, setAuthToken, setAuthRefreshHandlers } from '../lib/apiClient';
 import { ApiProvider } from './ApiContext';
 import { listTenants } from '../lib/apiClient';
+import { STORED_TOKEN_KEY } from '../constants/app';
 
 type Tenant = Record<string, unknown> | null;
 
@@ -47,7 +48,7 @@ type AppAction =
 
 const storage = window.sessionStorage;
 
-const STORED_TOKEN = storage?.getItem('papercrate_token') ?? '';
+const storedToken = storage?.getItem(STORED_TOKEN_KEY) ?? '';
 let STORED_TENANT: Tenant = null;
 
 if (storage) {
@@ -61,13 +62,13 @@ if (storage) {
   }
 }
 
-if (STORED_TOKEN) {
-  setAuthToken(STORED_TOKEN);
+if (storedToken) {
+  setAuthToken(storedToken);
 }
 
 const initialAppState: AppState = {
-  status: STORED_TOKEN ? 'authenticated' : 'logged-out',
-  token: STORED_TOKEN,
+  status: storedToken ? 'authenticated' : 'logged-out',
+  token: storedToken,
   error: null,
   isRefreshing: false,
   tenantSelection: null,

frontend/src/app/entryKey.ts

@@ -1,10 +1,9 @@
 import type { DocumentId, FolderId } from '../types/identifiers';
+import { ENTRY_KEY_SEPARATOR } from '../constants/app';
 
 // Entry key utilities for workspace selection
 // Entry keys are strings in the format "document:id" or "folder:id"
 
-const ENTRY_KEY_SEPARATOR = ':';
-
 // Create entry key strings
 export const createDocumentEntryKey = (documentId: DocumentId): string =>
     `document${ENTRY_KEY_SEPARATOR}${documentId}`;

frontend/src/app/useDocumentsPreferences.ts

@@ -4,11 +4,12 @@ import {
   DEFAULT_SORT_FIELD,
   SORT_FIELD_VALUES,
 } from './workspaceUtils';
-
-const VIEW_MODE_STORAGE_KEY = 'papercrate_view_mode';
-const SORT_FIELD_STORAGE_KEY = 'papercrate_sort_field';
-const SORT_DIRECTION_STORAGE_KEY = 'papercrate_sort_direction';
-const INCLUDE_DESCENDANTS_STORAGE_KEY = 'papercrate_include_descendants';
+import {
+  INCLUDE_DESCENDANTS_STORAGE_KEY,
+  SORT_DIRECTION_STORAGE_KEY,
+  SORT_FIELD_STORAGE_KEY,
+  VIEW_MODE_STORAGE_KEY,
+} from '../constants/workspace';
 
 const readSessionStorage = (key: string): string | null => {
   try {

frontend/src/app/useManagementModals.tsx

@@ -4,9 +4,7 @@ import TagsPanel from '../tags/TagsPanel';
 import CorrespondentsPanel, { CorrespondentsPanelProps } from '../correspondents/CorrespondentsPanel';
 import PanelHeader from '../ui/PanelHeader';
 import { CloseIcon } from '../ui/icons';
-
-const TAGS_MODAL = 'tags';
-const CORRESPONDENTS_MODAL = 'correspondents';
+import { CORRESPONDENTS_MODAL, TAGS_MODAL } from '../constants/app';
 
 interface TagRecord {
   id?: string;

frontend/src/app/workspaceUtils.ts

@@ -1,8 +1,18 @@
-export const DEFAULT_FOLDER_NAME = 'Documents';
-export const DEFAULT_SORT_FIELD = 'title';
-export const DEFAULT_SORT_DIRECTION = 'asc';
-export const SORT_FIELD_VALUES = ['title', 'issued_at', 'created_at', 'updated_at'];
-export const TAG_FILTER_UNTAGGED = '__UNTAGGED__';
+import {
+  DEFAULT_FOLDER_NAME,
+  DEFAULT_SORT_DIRECTION,
+  DEFAULT_SORT_FIELD,
+  SORT_FIELD_VALUES,
+  TAG_FILTER_UNTAGGED,
+} from '../constants/workspace';
+
+export {
+  DEFAULT_FOLDER_NAME,
+  DEFAULT_SORT_DIRECTION,
+  DEFAULT_SORT_FIELD,
+  SORT_FIELD_VALUES,
+  TAG_FILTER_UNTAGGED,
+};
 
 export const hasFiles = (event) =>
   Array.from(event.dataTransfer?.types || []).includes('Files');