first commit

src/pages/SettingsPage.tsx

@@ -0,0 +1,381 @@
+import React, { useEffect, useState } from 'react'
+import {
+  Box,
+  FormControl,
+  InputLabel,
+  Grid,
+  Typography,
+  List,
+  ListItem,
+  ListItemText,
+  Button,
+  IconButton,
+  TextField,
+  Switch,
+  FormControlLabel,
+  Chip,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  MenuItem,
+  Select
+} from '@mui/material'
+import ArrowBackIcon from '@mui/icons-material/ArrowBack'
+import DeleteIcon from '@mui/icons-material/Delete'
+import PlayArrowIcon from '@mui/icons-material/PlayArrow'
+import EditIcon from '@mui/icons-material/Edit'
+import AddIcon from '@mui/icons-material/Add'
+import CloudDownloadIcon from '@mui/icons-material/CloudDownload'
+import type { Server } from '../context/ServersContext'
+import { useServers } from '../context/ServersContext'
+import { HydrusClient, extractTitleFromTags } from '../api/hydrusClient'
+import { buildLibraryCacheKey, loadLibraryCache, saveLibraryCache } from '../libraryCache'
+import type { MediaSection, ServerSyncSummary, Track } from '../types'
+
+const SYNC_SECTION_LIMIT = 2000
+const DEFAULT_SERVER_FORM = { name: '', host: '', port: undefined, apiKey: '', ssl: false, forceApiKeyInQuery: false }
+const SYNC_SECTIONS: Array<{ id: MediaSection; label: string; predicate: string }> = [
+  { id: 'audio', label: 'Audio', predicate: 'system:filetype = audio' },
+  { id: 'video', label: 'Video', predicate: 'system:filetype = video' },
+  { id: 'image', label: 'Image', predicate: 'system:filetype = image' },
+  { id: 'application', label: 'Applications', predicate: 'system:filetype = application' },
+]
+
+type SettingsPageProps = {
+  onClose?: () => void
+  devOverlayEnabled: boolean
+  onDevOverlayEnabledChange: (enabled: boolean) => void
+  libraryDisplayMode: 'grid' | 'table'
+  onLibraryDisplayModeChange: (mode: 'grid' | 'table') => void
+}
+
+export default function SettingsPage({ onClose, devOverlayEnabled, onDevOverlayEnabledChange, libraryDisplayMode, onLibraryDisplayModeChange }: SettingsPageProps) {
+  const { servers, addServer, updateServer, removeServer, testServerById, testServerConfig, setActiveServerId, activeServerId } = useServers()
+  const [editing, setEditing] = useState<Server | null>(null)
+  const [form, setForm] = useState<Omit<Server, 'id' | 'lastTest'>>(DEFAULT_SERVER_FORM)
+  const [testing, setTesting] = useState(false)
+  const [syncingServerId, setSyncingServerId] = useState<string | null>(null)
+  const [lastTest, setLastTest] = useState<string | null>(null)
+  const [detailsOpen, setDetailsOpen] = useState(false)
+  const [detailsText, setDetailsText] = useState<string | null>(null)
+
+  const extractNamespaceValue = (tags: string[] | null | undefined, ns: string) => {
+    if (!tags || !Array.isArray(tags)) return null
+    const prefix = `${ns.toLowerCase()}:`
+    const values = tags
+      .filter((tag) => typeof tag === 'string' && tag.toLowerCase().startsWith(prefix))
+      .map((tag) => tag.slice(prefix.length).replace(/_/g, ' ').trim())
+      .filter(Boolean)
+    return values.sort((a, b) => b.length - a.length)[0] || null
+  }
+
+  const buildTrackCacheKey = (serverId?: string, fileId?: number) => (serverId && fileId != null ? `${serverId}:${fileId}` : '')
+
+  useEffect(() => {
+    setEditing(null)
+    setForm(DEFAULT_SERVER_FORM)
+    setLastTest(null)
+    setDetailsText(null)
+    setDetailsOpen(false)
+  }, [])
+
+  const startAdd = () => {
+    setEditing(null)
+    setForm(DEFAULT_SERVER_FORM)
+  }
+
+  const startEdit = (s: Server) => {
+    setEditing(s)
+    setForm({ name: s.name || '', host: s.host, port: s.port, apiKey: s.apiKey || '', ssl: !!s.ssl, forceApiKeyInQuery: !!s.forceApiKeyInQuery })
+    setLastTest(s.lastTest ? `${s.lastTest.message} (${new Date(s.lastTest.timestamp).toLocaleString()})` : null)
+  }
+
+  const handleSave = () => {
+    if (editing) {
+      updateServer(editing.id, form)
+    } else {
+      const srv = addServer(form)
+      setActiveServerId(srv.id)
+    }
+    onClose && onClose()
+  }
+
+  const handleDelete = (s: Server) => {
+    if (confirm(`Delete server ${s.name || s.host}?`)) {
+      removeServer(s.id)
+    }
+  }
+
+  const handleTestExisting = async (s: Server) => {
+    setTesting(true)
+    try {
+      const res = await testServerById(s.id)
+      setLastTest(`${res.message}`)
+    } catch (e: any) {
+      setLastTest(`Error: ${e?.message ?? String(e)}`)
+    } finally {
+      setTesting(false)
+    }
+  }
+
+  const handleTestForm = async () => {
+    setTesting(true)
+    try {
+      const res = await testServerConfig(form)
+      setLastTest(`${res.message}`)
+    } catch (e: any) {
+      setLastTest(`Error: ${e?.message ?? String(e)}`)
+    } finally {
+      setTesting(false)
+    }
+  }
+
+  const handleSyncServer = async (server: Server) => {
+    setSyncingServerId(server.id)
+
+    try {
+      const client = new HydrusClient(server)
+      const cacheKey = buildLibraryCacheKey(servers)
+      const snapshot = await loadLibraryCache(cacheKey)
+      const mergedSearchCache = { ...(snapshot?.searchCache ?? {}) }
+      const mergedTrackMap: Record<string, Track> = {}
+
+      let localCounter = Date.now()
+      for (const track of snapshot?.tracks ?? []) {
+        const hydratedTrack: Track = { ...track, id: ++localCounter }
+        const key = buildTrackCacheKey(hydratedTrack.serverId, hydratedTrack.fileId)
+        if (key) mergedTrackMap[key] = hydratedTrack
+      }
+
+      const counts: ServerSyncSummary['counts'] = {}
+
+      for (const section of SYNC_SECTIONS) {
+        const searchTags = [section.predicate]
+        const ids = await client.searchFiles(searchTags, SYNC_SECTION_LIMIT)
+        counts[section.id] = ids.length
+        mergedSearchCache[`${server.id}|${section.id}|tracks|${JSON.stringify(searchTags)}`] = ids
+
+        if (ids.length === 0) continue
+
+        const tagMap = await client.getFilesTags(ids, 8)
+        const mediaInfoMap = section.id === 'application' ? await client.getFilesMediaInfo(ids, 6) : {}
+        for (const fileId of ids) {
+          const tags = tagMap[fileId] || []
+          const key = buildTrackCacheKey(server.id, fileId)
+          if (!key) continue
+
+          mergedTrackMap[key] = {
+            id: ++localCounter,
+            fileId,
+            serverId: server.id,
+            serverName: server.name || server.host,
+            title: extractTitleFromTags(tags) || '',
+            artist: extractNamespaceValue(tags, 'artist') || undefined,
+            album: extractNamespaceValue(tags, 'album') || undefined,
+            tags: tags.length ? tags : undefined,
+            url: client.getFileUrl(fileId),
+            thumbnail: client.getThumbnailUrl(fileId),
+            mimeType: mediaInfoMap[fileId]?.mimeType,
+            isVideo: mediaInfoMap[fileId]?.isVideo ?? (section.id === 'video' ? true : undefined),
+            mediaKind: section.id,
+          }
+        }
+      }
+
+      await saveLibraryCache(cacheKey, Object.values(mergedTrackMap), mergedSearchCache)
+
+      const total = Object.values(counts).reduce((sum, value) => sum + (value || 0), 0)
+      const summary: ServerSyncSummary = {
+        updatedAt: Date.now(),
+        total,
+        counts,
+        message: `Synced ${total} cached items`,
+      }
+
+      updateServer(server.id, { syncSummary: summary })
+      setLastTest(summary.message ?? `Synced ${total} cached items`)
+    } catch (error: any) {
+      const message = error?.message ?? String(error)
+      updateServer(server.id, {
+        syncSummary: {
+          updatedAt: Date.now(),
+          total: 0,
+          counts: {},
+          message: `Sync failed: ${message}`,
+        },
+      })
+      setLastTest(`Sync failed: ${message}`)
+    } finally {
+      setSyncingServerId(null)
+    }
+  }
+
+  return (
+    <Box sx={{ p: { xs: 1, sm: 2, lg: 3 }, minHeight: '100%', bgcolor: 'background.default' }}>
+      <Box sx={{ width: '100%', maxWidth: 1280, mx: 'auto' }}>
+        <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 1, mb: 3 }}>
+          <Box sx={{ display: 'flex', alignItems: 'center' }}>
+            <IconButton onClick={() => onClose && onClose()} aria-label="back" size="large" sx={{ mr: 1 }}>
+              <ArrowBackIcon />
+            </IconButton>
+            <Typography variant="h6">Hydrus Servers</Typography>
+          </Box>
+        </Box>
+
+        {import.meta.env.DEV && (
+          <Box sx={{ border: '1px solid rgba(255,255,255,0.08)', borderRadius: 2, bgcolor: 'background.paper', p: { xs: 1.5, sm: 2 }, mb: { xs: 2, lg: 3 } }}>
+            <Typography variant="subtitle1" sx={{ mb: 0.5 }}>Library display</Typography>
+            <Typography variant="body2" color="text.secondary" sx={{ mb: 1.5 }}>
+              Choose the default Library layout so browsing controls can stay compact.
+            </Typography>
+            <FormControl size="small" sx={{ minWidth: 180, maxWidth: 240, mb: 2 }}>
+              <InputLabel id="settings-library-display-mode-label">Display</InputLabel>
+              <Select
+                labelId="settings-library-display-mode-label"
+                value={libraryDisplayMode}
+                label="Display"
+                onChange={(event) => onLibraryDisplayModeChange(event.target.value as 'grid' | 'table')}
+              >
+                <MenuItem value="grid">Grid</MenuItem>
+                <MenuItem value="table">Table</MenuItem>
+              </Select>
+            </FormControl>
+
+            <Typography variant="subtitle1" sx={{ mb: 0.5 }}>Developer tools</Typography>
+            <Typography variant="body2" color="text.secondary" sx={{ mb: 1.5 }}>
+              Control development-only UI that can get in the way on smaller screens.
+            </Typography>
+            <FormControlLabel
+              control={<Switch checked={devOverlayEnabled} onChange={(event) => onDevOverlayEnabledChange(event.target.checked)} />}
+              label={devOverlayEnabled ? 'Floating dev overlay enabled' : 'Floating dev overlay disabled'}
+              sx={{ alignItems: 'flex-start', m: 0 }}
+            />
+          </Box>
+        )}
+
+        {!import.meta.env.DEV && (
+          <Box sx={{ border: '1px solid rgba(255,255,255,0.08)', borderRadius: 2, bgcolor: 'background.paper', p: { xs: 1.5, sm: 2 }, mb: { xs: 2, lg: 3 } }}>
+            <Typography variant="subtitle1" sx={{ mb: 0.5 }}>Library display</Typography>
+            <Typography variant="body2" color="text.secondary" sx={{ mb: 1.5 }}>
+              Choose the default Library layout so browsing controls can stay compact.
+            </Typography>
+            <FormControl size="small" sx={{ minWidth: 180, maxWidth: 240 }}>
+              <InputLabel id="settings-library-display-mode-label">Display</InputLabel>
+              <Select
+                labelId="settings-library-display-mode-label"
+                value={libraryDisplayMode}
+                label="Display"
+                onChange={(event) => onLibraryDisplayModeChange(event.target.value as 'grid' | 'table')}
+              >
+                <MenuItem value="grid">Grid</MenuItem>
+                <MenuItem value="table">Table</MenuItem>
+              </Select>
+            </FormControl>
+          </Box>
+        )}
+
+        <Grid container spacing={{ xs: 2, lg: 3 }} alignItems="flex-start">
+          <Grid item xs={12} lg={5}>
+            <Box sx={{ border: '1px solid rgba(255,255,255,0.08)', borderRadius: 2, bgcolor: 'background.paper', p: { xs: 1.5, sm: 2 } }}>
+              <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 1 }}>
+                <Typography variant="subtitle1">Configured servers</Typography>
+                <Button startIcon={<AddIcon />} onClick={startAdd} size="large" className="touch-target">
+                  Add
+                </Button>
+              </Box>
+
+              <List>
+                {servers.length === 0 && <Typography color="text.secondary">No servers configured yet</Typography>}
+                {servers.map((s) => (
+                  <ListItem key={s.id} sx={{ flexWrap: 'wrap', alignItems: 'flex-start', px: 0, py: 1.25, borderBottom: '1px solid rgba(255,255,255,0.06)' }}>
+                    <ListItemText primary={s.name || s.host} secondary={s.host} sx={{ mr: 2 }} />
+                    <Box sx={{ display: 'flex', gap: 1, mt: { xs: 1, md: 0 }, flexWrap: 'wrap', width: { xs: '100%', md: 'auto' } }}>
+                      <Button size="large" onClick={() => setActiveServerId(s.id)} className="touch-target" sx={{ flexGrow: { xs: 1, sm: 0 } }}>
+                        {s.id === activeServerId ? 'Active' : 'Set active'}
+                      </Button>
+                      <Button variant="outlined" size="large" onClick={() => handleTestExisting(s)} startIcon={<PlayArrowIcon />} className="touch-target" sx={{ flexGrow: { xs: 1, sm: 0 } }}>
+                        Test
+                      </Button>
+                      <Button variant="outlined" size="large" onClick={() => handleSyncServer(s)} startIcon={<CloudDownloadIcon />} disabled={syncingServerId === s.id} className="touch-target" sx={{ flexGrow: { xs: 1, sm: 0 } }}>
+                        {syncingServerId === s.id ? 'Syncing...' : 'Sync cache'}
+                      </Button>
+                      <IconButton size="large" aria-label="edit" onClick={() => startEdit(s)}>
+                        <EditIcon />
+                      </IconButton>
+                      <IconButton size="large" aria-label="delete" onClick={() => handleDelete(s)}>
+                        <DeleteIcon />
+                      </IconButton>
+                    </Box>
+                    <Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap', width: '100%', mt: 1 }}>
+                      {s.lastTest && s.lastTest.message && <Chip label={s.lastTest.message} size="small" />}
+                      {s.syncSummary?.message && <Chip label={s.syncSummary.message} size="small" color="primary" variant="outlined" />}
+                      {s.syncSummary?.counts && Object.entries(s.syncSummary.counts).map(([section, count]) => (
+                        <Chip key={`${s.id}-${section}`} label={`${section}: ${count}`} size="small" variant="outlined" />
+                      ))}
+                      {s.forceApiKeyInQuery && <Chip label="API key in query" size="small" />}
+                    </Box>
+                    {s.syncSummary?.updatedAt && (
+                      <Typography variant="caption" color="text.secondary" sx={{ width: '100%', mt: 1 }}>
+                        Last sync: {new Date(s.syncSummary.updatedAt).toLocaleString()}
+                      </Typography>
+                    )}
+                  </ListItem>
+                ))}
+              </List>
+            </Box>
+          </Grid>
+
+          <Grid item xs={12} lg={7}>
+            <Box sx={{ border: '1px solid rgba(255,255,255,0.08)', borderRadius: 2, bgcolor: 'background.paper', p: { xs: 1.5, sm: 2 } }}>
+              <Typography variant="subtitle1">{editing ? 'Edit server' : 'Add new server'}</Typography>
+              <Box sx={{ mt: 2, display: 'flex', flexDirection: 'column', gap: 2 }}>
+                <TextField label="Name (optional)" value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} fullWidth />
+                <TextField label="Host (IP or host, e.g. 192.168.1.128)" value={form.host} onChange={(e) => setForm({ ...form, host: e.target.value })} fullWidth />
+                <TextField label="Port (optional)" value={form.port as any ?? ''} onChange={(e) => setForm({ ...form, port: e.target.value })} fullWidth />
+                <TextField label="API Key (optional)" value={form.apiKey} onChange={(e) => setForm({ ...form, apiKey: e.target.value })} fullWidth />
+                <FormControlLabel control={<Switch checked={!!form.ssl} onChange={(e) => setForm({ ...form, ssl: e.target.checked })} />} label="Use HTTPS (SSL)" />
+                <FormControlLabel control={<Switch checked={!!form.forceApiKeyInQuery} onChange={(e) => setForm({ ...form, forceApiKeyInQuery: e.target.checked })} />} label="Send API key in query parameter" />
+
+                <Box sx={{ display: 'flex', gap: 1, mt: 1, flexWrap: 'wrap' }}>
+                  <Button variant="contained" onClick={handleSave} disabled={!form.host} size="large" className="touch-target" sx={{ flexGrow: { xs: 1, sm: 0 } }}>
+                    Save
+                  </Button>
+                  <Button variant="outlined" onClick={handleTestForm} disabled={!form.host || testing} startIcon={<PlayArrowIcon />} size="large" className="touch-target" sx={{ flexGrow: { xs: 1, sm: 0 } }}>
+                    {testing ? 'Testing...' : 'Test connection'}
+                  </Button>
+                  <Button onClick={() => { setEditing(null); setForm(DEFAULT_SERVER_FORM); setLastTest(null) }} size="large" className="touch-target" sx={{ flexGrow: { xs: 1, sm: 0 } }}>
+                    Reset
+                  </Button>
+                </Box>
+
+                {lastTest && (
+                  <Box sx={{ mt: 1 }}>
+                    <Typography variant="caption">Last test: {lastTest}</Typography>
+                    <Box sx={{ mt: 1 }}>
+                      <Button size="small" onClick={() => {
+                        const obj = editing?.lastTest ?? servers.find((s) => s.id === editing?.id)?.lastTest ?? null
+                        setDetailsText(obj ? JSON.stringify(obj, null, 2) : lastTest)
+                        setDetailsOpen(true)
+                      }}>Show details</Button>
+                    </Box>
+                  </Box>
+                )}
+
+                <Dialog open={detailsOpen} onClose={() => setDetailsOpen(false)} fullWidth maxWidth="md">
+                  <DialogTitle>Connection details</DialogTitle>
+                  <DialogContent>
+                    <Box component="pre" sx={{ whiteSpace: 'pre-wrap', fontFamily: 'monospace', fontSize: 12 }}>{detailsText}</Box>
+                  </DialogContent>
+                  <DialogActions>
+                    <Button onClick={() => setDetailsOpen(false)}>Close</Button>
+                  </DialogActions>
+                </Dialog>
+                </Box>
+            </Box>
+          </Grid>
+        </Grid>
+      </Box>
+    </Box>
+  )
+}