Settings reorganization

frontend/src/app/stories/[id]/page.tsx

@@ -20,6 +20,7 @@ export default function StoryReadingPage() {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [readingProgress, setReadingProgress] = useState(0);
+  const [readingPercentage, setReadingPercentage] = useState(0);
   const [sanitizedContent, setSanitizedContent] = useState<string>('');
   const [hasScrolledToPosition, setHasScrolledToPosition] = useState(false);
   const [showToc, setShowToc] = useState(false);
@@ -52,28 +53,38 @@ export default function StoryReadingPage() {
     return Math.floor(scrollRatio * textLength);
   }, [story]);
 
+  // Calculate reading percentage from character position
+  const calculateReadingPercentage = useCallback((currentPosition: number): number => {
+    if (!story) return 0;
+
+    const totalLength = story.contentPlain?.length || story.contentHtml.length;
+    if (totalLength === 0) return 0;
+
+    return Math.round((currentPosition / totalLength) * 100);
+  }, [story]);
+
   // Convert character position back to scroll position for auto-scroll
   const scrollToCharacterPosition = useCallback((position: number) => {
     if (!contentRef.current || !story || hasScrolledToPosition) return;
-    
+
     const textLength = story.contentPlain?.length || story.contentHtml.length;
     if (textLength === 0 || position === 0) return;
-    
+
     const ratio = position / textLength;
     const content = contentRef.current;
     const contentTop = content.offsetTop;
     const contentHeight = content.scrollHeight;
     const windowHeight = window.innerHeight;
-    
+
     // Calculate target scroll position
     const targetScroll = contentTop + (ratio * contentHeight) - (windowHeight * 0.3);
-    
+
     // Smooth scroll to position
     window.scrollTo({
       top: Math.max(0, targetScroll),
       behavior: 'smooth'
     });
-    
+
     setHasScrolledToPosition(true);
   }, [story, hasScrolledToPosition]);
 
@@ -188,17 +199,20 @@ export default function StoryReadingPage() {
         // Otherwise, use saved reading position
         if (story.readingPosition && story.readingPosition > 0) {
           console.log('Auto-scrolling to saved position:', story.readingPosition);
+          const initialPercentage = calculateReadingPercentage(story.readingPosition);
+          setReadingPercentage(initialPercentage);
           scrollToCharacterPosition(story.readingPosition);
         } else {
           // Even if there's no saved position, mark as ready for tracking
           console.log('No saved position, starting fresh tracking');
+          setReadingPercentage(0);
           setHasScrolledToPosition(true);
         }
       }, 500);
       
       return () => clearTimeout(timeout);
     }
-  }, [story, sanitizedContent, scrollToCharacterPosition, hasScrolledToPosition]);
+  }, [story, sanitizedContent, scrollToCharacterPosition, calculateReadingPercentage, hasScrolledToPosition]);
 
   // Track reading progress and save position
   useEffect(() => {
@@ -244,10 +258,12 @@ export default function StoryReadingPage() {
           setShowEndOfStoryPopup(true);
         }
 
-        // Save reading position (debounced)
+        // Save reading position and update percentage (debounced)
         if (hasScrolledToPosition) { // Only save after initial auto-scroll
           const characterPosition = getCharacterPositionFromScroll();
-          console.log('Scroll detected, character position:', characterPosition);
+          const percentage = calculateReadingPercentage(characterPosition);
+          console.log('Scroll detected, character position:', characterPosition, 'percentage:', percentage);
+          setReadingPercentage(percentage);
           debouncedSavePosition(characterPosition);
         } else {
           console.log('Scroll detected but not ready for tracking yet');
@@ -263,7 +279,7 @@ export default function StoryReadingPage() {
         clearTimeout(saveTimeoutRef.current);
       }
     };
-  }, [story, hasScrolledToPosition, getCharacterPositionFromScroll, debouncedSavePosition, hasReachedEnd]);
+  }, [story, hasScrolledToPosition, getCharacterPositionFromScroll, calculateReadingPercentage, debouncedSavePosition, hasReachedEnd]);
 
   const handleRatingUpdate = async (newRating: number) => {
     if (!story) return;
@@ -359,6 +375,11 @@ export default function StoryReadingPage() {
           </div>
           
           <div className="flex items-center gap-4">
+            {/* Reading percentage indicator */}
+            <div className="text-sm theme-text font-mono bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded">
+              {readingPercentage}%
+            </div>
+
             {hasHeadings && (
               <button
                 onClick={() => setShowToc(!showToc)}
@@ -368,12 +389,12 @@ export default function StoryReadingPage() {
                 📋 TOC
               </button>
             )}
-            
+
             <StoryRating
               rating={story.rating || 0}
               onRatingChange={handleRatingUpdate}
             />
-            
+
             <Link href={`/stories/${story.id}/edit`}>
               <Button size="sm" variant="ghost">
                 Edit

frontend/src/components/collections/CollectionReadingView.tsx

@@ -20,6 +20,7 @@ export default function CollectionReadingView({
 }: CollectionReadingViewProps) {
   const { story, collection } = data;
   const [hasScrolledToPosition, setHasScrolledToPosition] = useState(false);
+  const [readingPercentage, setReadingPercentage] = useState(0);
   const contentRef = useRef<HTMLDivElement>(null);
   const saveTimeoutRef = useRef<NodeJS.Timeout | null>(null);
 
@@ -43,28 +44,38 @@ export default function CollectionReadingView({
     return Math.floor(scrollRatio * textLength);
   }, [story]);
 
+  // Calculate reading percentage from character position
+  const calculateReadingPercentage = useCallback((currentPosition: number): number => {
+    if (!story) return 0;
+
+    const totalLength = story.contentPlain?.length || story.contentHtml.length;
+    if (totalLength === 0) return 0;
+
+    return Math.round((currentPosition / totalLength) * 100);
+  }, [story]);
+
   // Convert character position back to scroll position for auto-scroll
   const scrollToCharacterPosition = useCallback((position: number) => {
     if (!contentRef.current || !story || hasScrolledToPosition) return;
-    
+
     const textLength = story.contentPlain?.length || story.contentHtml.length;
     if (textLength === 0 || position === 0) return;
-    
+
     const ratio = position / textLength;
     const content = contentRef.current;
     const contentTop = content.offsetTop;
     const contentHeight = content.scrollHeight;
     const windowHeight = window.innerHeight;
-    
+
     // Calculate target scroll position
     const targetScroll = contentTop + (ratio * contentHeight) - (windowHeight * 0.3);
-    
+
     // Smooth scroll to position
     window.scrollTo({
       top: Math.max(0, targetScroll),
       behavior: 'smooth'
     });
-    
+
     setHasScrolledToPosition(true);
   }, [story, hasScrolledToPosition]);
 
@@ -102,23 +113,28 @@ export default function CollectionReadingView({
         console.log('Collection view - initializing reading position tracking, saved position:', story.readingPosition);
         if (story.readingPosition && story.readingPosition > 0) {
           console.log('Collection view - auto-scrolling to saved position:', story.readingPosition);
+          const initialPercentage = calculateReadingPercentage(story.readingPosition);
+          setReadingPercentage(initialPercentage);
           scrollToCharacterPosition(story.readingPosition);
         } else {
           console.log('Collection view - no saved position, starting fresh tracking');
+          setReadingPercentage(0);
           setHasScrolledToPosition(true);
         }
       }, 500);
       
       return () => clearTimeout(timeout);
     }
-  }, [story, scrollToCharacterPosition, hasScrolledToPosition]);
+  }, [story, scrollToCharacterPosition, calculateReadingPercentage, hasScrolledToPosition]);
 
   // Track reading progress and save position
   useEffect(() => {
     const handleScroll = () => {
       if (hasScrolledToPosition) {
         const characterPosition = getCharacterPositionFromScroll();
-        console.log('Collection view - scroll detected, character position:', characterPosition);
+        const percentage = calculateReadingPercentage(characterPosition);
+        console.log('Collection view - scroll detected, character position:', characterPosition, 'percentage:', percentage);
+        setReadingPercentage(percentage);
         debouncedSavePosition(characterPosition);
       } else {
         console.log('Collection view - scroll detected but not ready for tracking yet');
@@ -132,7 +148,7 @@ export default function CollectionReadingView({
         clearTimeout(saveTimeoutRef.current);
       }
     };
-  }, [hasScrolledToPosition, getCharacterPositionFromScroll, debouncedSavePosition]);
+  }, [hasScrolledToPosition, getCharacterPositionFromScroll, calculateReadingPercentage, debouncedSavePosition]);
 
   const handlePrevious = () => {
     if (collection.previousStoryId) {
@@ -190,6 +206,11 @@ export default function CollectionReadingView({
 
           {/* Progress Bar */}
           <div className="flex items-center gap-4">
+            {/* Reading percentage indicator */}
+            <div className="text-sm text-blue-700 dark:text-blue-300 font-mono bg-blue-100 dark:bg-blue-900 px-2 py-1 rounded">
+              {readingPercentage}%
+            </div>
+
             <div className="w-32 bg-blue-200 dark:bg-blue-800 rounded-full h-2">
               <div
                 className="bg-blue-600 dark:bg-blue-400 h-2 rounded-full transition-all duration-300"

frontend/src/components/settings/AppearanceSettings.tsx

@@ -0,0 +1,265 @@
+'use client';
+
+import { useTheme } from '../../lib/theme';
+import { useLibraryLayout, LibraryLayoutType } from '../../hooks/useLibraryLayout';
+
+type FontFamily = 'serif' | 'sans' | 'mono';
+type FontSize = 'small' | 'medium' | 'large' | 'extra-large';
+type ReadingWidth = 'narrow' | 'medium' | 'wide';
+
+interface Settings {
+  theme: 'light' | 'dark';
+  fontFamily: FontFamily;
+  fontSize: FontSize;
+  readingWidth: ReadingWidth;
+  readingSpeed: number; // words per minute
+}
+
+interface AppearanceSettingsProps {
+  settings: Settings;
+  onSettingChange: <K extends keyof Settings>(key: K, value: Settings[K]) => void;
+}
+
+export default function AppearanceSettings({
+  settings,
+  onSettingChange
+}: AppearanceSettingsProps) {
+  const { layout, setLayout } = useLibraryLayout();
+
+  return (
+    <div className="space-y-6">
+      {/* Theme Settings */}
+      <div className="theme-card theme-shadow rounded-lg p-6">
+        <h2 className="text-xl font-semibold theme-header mb-4">Theme</h2>
+
+        <div>
+          <label className="block text-sm font-medium theme-header mb-2">
+            Color Theme
+          </label>
+          <div className="flex gap-4">
+            <button
+              onClick={() => onSettingChange('theme', 'light')}
+              className={`px-4 py-2 rounded-lg border transition-colors ${
+                settings.theme === 'light'
+                  ? 'theme-accent-bg text-white border-transparent'
+                  : 'theme-card theme-text theme-border hover:border-gray-400'
+              }`}
+            >
+              ☀️ Light
+            </button>
+            <button
+              onClick={() => onSettingChange('theme', 'dark')}
+              className={`px-4 py-2 rounded-lg border transition-colors ${
+                settings.theme === 'dark'
+                  ? 'theme-accent-bg text-white border-transparent'
+                  : 'theme-card theme-text theme-border hover:border-gray-400'
+              }`}
+            >
+              🌙 Dark
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Library Layout */}
+      <div className="theme-card theme-shadow rounded-lg p-6">
+        <h2 className="text-xl font-semibold theme-header mb-4">Library Layout</h2>
+
+        <div className="space-y-3">
+          <div className="flex gap-4 flex-wrap">
+            <button
+              onClick={() => setLayout('sidebar')}
+              className={`px-4 py-2 rounded-lg border transition-colors ${
+                layout === 'sidebar'
+                  ? 'theme-accent-bg text-white border-transparent'
+                  : 'theme-card theme-text theme-border hover:border-gray-400'
+              }`}
+            >
+              📋 Sidebar Layout
+            </button>
+            <button
+              onClick={() => setLayout('toolbar')}
+              className={`px-4 py-2 rounded-lg border transition-colors ${
+                layout === 'toolbar'
+                  ? 'theme-accent-bg text-white border-transparent'
+                  : 'theme-card theme-text theme-border hover:border-gray-400'
+              }`}
+            >
+              🛠️ Toolbar Layout
+            </button>
+            <button
+              onClick={() => setLayout('minimal')}
+              className={`px-4 py-2 rounded-lg border transition-colors ${
+                layout === 'minimal'
+                  ? 'theme-accent-bg text-white border-transparent'
+                  : 'theme-card theme-text theme-border hover:border-gray-400'
+              }`}
+            >
+              ✨ Minimal Layout
+            </button>
+          </div>
+          <div className="text-sm theme-text">
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-3 mt-3">
+              <div className="text-xs">
+                <strong>Sidebar:</strong> Filters and controls in a side panel, maximum space for stories
+              </div>
+              <div className="text-xs">
+                <strong>Toolbar:</strong> Everything visible at once with integrated search and tag filters
+              </div>
+              <div className="text-xs">
+                <strong>Minimal:</strong> Clean, content-focused design with floating controls
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Reading Experience */}
+      <div className="theme-card theme-shadow rounded-lg p-6">
+        <h2 className="text-xl font-semibold theme-header mb-4">Reading Experience</h2>
+
+        <div className="space-y-6">
+          {/* Font Family */}
+          <div>
+            <label className="block text-sm font-medium theme-header mb-2">
+              Font Family
+            </label>
+            <div className="flex gap-4 flex-wrap">
+              <button
+                onClick={() => onSettingChange('fontFamily', 'serif')}
+                className={`px-4 py-2 rounded-lg border transition-colors font-serif ${
+                  settings.fontFamily === 'serif'
+                    ? 'theme-accent-bg text-white border-transparent'
+                    : 'theme-card theme-text theme-border hover:border-gray-400'
+                }`}
+              >
+                Serif
+              </button>
+              <button
+                onClick={() => onSettingChange('fontFamily', 'sans')}
+                className={`px-4 py-2 rounded-lg border transition-colors font-sans ${
+                  settings.fontFamily === 'sans'
+                    ? 'theme-accent-bg text-white border-transparent'
+                    : 'theme-card theme-text theme-border hover:border-gray-400'
+                }`}
+              >
+                Sans Serif
+              </button>
+              <button
+                onClick={() => onSettingChange('fontFamily', 'mono')}
+                className={`px-4 py-2 rounded-lg border transition-colors font-mono ${
+                  settings.fontFamily === 'mono'
+                    ? 'theme-accent-bg text-white border-transparent'
+                    : 'theme-card theme-text theme-border hover:border-gray-400'
+                }`}
+              >
+                Monospace
+              </button>
+            </div>
+          </div>
+
+          {/* Font Size */}
+          <div>
+            <label className="block text-sm font-medium theme-header mb-2">
+              Font Size
+            </label>
+            <div className="flex gap-4 flex-wrap">
+              {(['small', 'medium', 'large', 'extra-large'] as FontSize[]).map((size) => (
+                <button
+                  key={size}
+                  onClick={() => onSettingChange('fontSize', size)}
+                  className={`px-4 py-2 rounded-lg border transition-colors capitalize ${
+                    settings.fontSize === size
+                      ? 'theme-accent-bg text-white border-transparent'
+                      : 'theme-card theme-text theme-border hover:border-gray-400'
+                  }`}
+                >
+                  {size.replace('-', ' ')}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* Reading Width */}
+          <div>
+            <label className="block text-sm font-medium theme-header mb-2">
+              Reading Width
+            </label>
+            <div className="flex gap-4">
+              {(['narrow', 'medium', 'wide'] as ReadingWidth[]).map((width) => (
+                <button
+                  key={width}
+                  onClick={() => onSettingChange('readingWidth', width)}
+                  className={`px-4 py-2 rounded-lg border transition-colors capitalize ${
+                    settings.readingWidth === width
+                      ? 'theme-accent-bg text-white border-transparent'
+                      : 'theme-card theme-text theme-border hover:border-gray-400'
+                  }`}
+                >
+                  {width}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* Reading Speed */}
+          <div>
+            <label className="block text-sm font-medium theme-header mb-2">
+              Reading Speed (words per minute)
+            </label>
+            <div className="flex items-center gap-4">
+              <input
+                type="range"
+                min="100"
+                max="400"
+                step="25"
+                value={settings.readingSpeed}
+                onChange={(e) => onSettingChange('readingSpeed', parseInt(e.target.value))}
+                className="flex-1 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
+              />
+              <div className="min-w-[80px] text-center">
+                <span className="text-lg font-medium theme-header">{settings.readingSpeed}</span>
+                <div className="text-xs theme-text">WPM</div>
+              </div>
+            </div>
+            <div className="flex justify-between text-xs theme-text mt-1">
+              <span>Slow (100)</span>
+              <span>Average (200)</span>
+              <span>Fast (400)</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Preview */}
+      <div className="theme-card theme-shadow rounded-lg p-6">
+        <h2 className="text-xl font-semibold theme-header mb-4">Preview</h2>
+
+        <div
+          className="p-4 theme-card border theme-border rounded-lg"
+          style={{
+            fontFamily: settings.fontFamily === 'serif' ? 'Georgia, Times, serif'
+              : settings.fontFamily === 'sans' ? 'Inter, system-ui, sans-serif'
+              : 'Monaco, Consolas, monospace',
+            fontSize: settings.fontSize === 'small' ? '14px'
+              : settings.fontSize === 'medium' ? '16px'
+              : settings.fontSize === 'large' ? '18px'
+              : '20px',
+            maxWidth: settings.readingWidth === 'narrow' ? '600px'
+              : settings.readingWidth === 'medium' ? '800px'
+              : '1000px',
+          }}
+        >
+          <h3 className="text-xl font-bold theme-header mb-2">Sample Story Title</h3>
+          <p className="theme-text mb-4">by Sample Author</p>
+          <p className="theme-text leading-relaxed">
+            This is how your story text will look with the current settings.
+            The quick brown fox jumps over the lazy dog. Lorem ipsum dolor sit amet,
+            consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore
+            et dolore magna aliqua.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/settings/ContentSettings.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import Button from '../ui/Button';
+import LibrarySettings from '../library/LibrarySettings';
+
+interface ContentSettingsProps {
+  // No props needed - LibrarySettings manages its own state
+}
+
+export default function ContentSettings({}: ContentSettingsProps) {
+  return (
+    <div className="space-y-6">
+      {/* Library Settings */}
+      <LibrarySettings />
+
+      {/* Tag Management */}
+      <div className="theme-card theme-shadow rounded-lg p-6">
+        <h2 className="text-xl font-semibold theme-header mb-4">Tag Management</h2>
+        <p className="theme-text mb-6">
+          Manage your story tags with colors, descriptions, and aliases. Use the Tag Maintenance page to organize and customize your tags.
+        </p>
+        <Button
+          href="/settings/tag-maintenance"
+          variant="secondary"
+          className="w-full sm:w-auto"
+        >
+          🏷️ Open Tag Maintenance
+        </Button>
+      </div>
+    </div>
+  );
+}

frontend/src/components/settings/SystemSettings.tsx

@@ -0,0 +1,702 @@
+'use client';
+
+import { useState } from 'react';
+import Button from '../ui/Button';
+import { storyApi, authorApi, databaseApi, configApi } from '../../lib/api';
+
+interface SystemSettingsProps {
+  // No props needed - this component manages its own state
+}
+
+export default function SystemSettings({}: SystemSettingsProps) {
+  const [typesenseStatus, setTypesenseStatus] = useState<{
+    reindex: { loading: boolean; message: string; success?: boolean };
+    recreate: { loading: boolean; message: string; success?: boolean };
+  }>({
+    reindex: { loading: false, message: '' },
+    recreate: { loading: false, message: '' }
+  });
+  const [databaseStatus, setDatabaseStatus] = useState<{
+    completeBackup: { loading: boolean; message: string; success?: boolean };
+    completeRestore: { loading: boolean; message: string; success?: boolean };
+    completeClear: { loading: boolean; message: string; success?: boolean };
+  }>({
+    completeBackup: { loading: false, message: '' },
+    completeRestore: { loading: false, message: '' },
+    completeClear: { loading: false, message: '' }
+  });
+  const [cleanupStatus, setCleanupStatus] = useState<{
+    preview: { loading: boolean; message: string; success?: boolean; data?: any };
+    execute: { loading: boolean; message: string; success?: boolean };
+  }>({
+    preview: { loading: false, message: '' },
+    execute: { loading: false, message: '' }
+  });
+
+  const handleFullReindex = async () => {
+    setTypesenseStatus(prev => ({
+      ...prev,
+      reindex: { loading: true, message: 'Reindexing all collections...', success: undefined }
+    }));
+
+    try {
+      // Run both story and author reindex in parallel
+      const [storiesResult, authorsResult] = await Promise.all([
+        storyApi.reindexTypesense(),
+        authorApi.reindexTypesense()
+      ]);
+
+      const allSuccessful = storiesResult.success && authorsResult.success;
+      const messages: string[] = [];
+
+      if (storiesResult.success) {
+        messages.push(`Stories: ${storiesResult.message}`);
+      } else {
+        messages.push(`Stories failed: ${storiesResult.error || 'Unknown error'}`);
+      }
+
+      if (authorsResult.success) {
+        messages.push(`Authors: ${authorsResult.message}`);
+      } else {
+        messages.push(`Authors failed: ${authorsResult.error || 'Unknown error'}`);
+      }
+
+      setTypesenseStatus(prev => ({
+        ...prev,
+        reindex: {
+          loading: false,
+          message: allSuccessful
+            ? `Full reindex completed successfully. ${messages.join(', ')}`
+            : `Reindex completed with errors. ${messages.join(', ')}`,
+          success: allSuccessful
+        }
+      }));
+
+      // Clear message after 8 seconds (longer for combined operation)
+      setTimeout(() => {
+        setTypesenseStatus(prev => ({
+          ...prev,
+          reindex: { loading: false, message: '', success: undefined }
+        }));
+      }, 8000);
+    } catch (error) {
+      setTypesenseStatus(prev => ({
+        ...prev,
+        reindex: {
+          loading: false,
+          message: 'Network error occurred during reindex',
+          success: false
+        }
+      }));
+
+      setTimeout(() => {
+        setTypesenseStatus(prev => ({
+          ...prev,
+          reindex: { loading: false, message: '', success: undefined }
+        }));
+      }, 8000);
+    }
+  };
+
+  const handleRecreateAllCollections = async () => {
+    setTypesenseStatus(prev => ({
+      ...prev,
+      recreate: { loading: true, message: 'Recreating all collections...', success: undefined }
+    }));
+
+    try {
+      // Run both story and author recreation in parallel
+      const [storiesResult, authorsResult] = await Promise.all([
+        storyApi.recreateTypesenseCollection(),
+        authorApi.recreateTypesenseCollection()
+      ]);
+
+      const allSuccessful = storiesResult.success && authorsResult.success;
+      const messages: string[] = [];
+
+      if (storiesResult.success) {
+        messages.push(`Stories: ${storiesResult.message}`);
+      } else {
+        messages.push(`Stories failed: ${storiesResult.error || 'Unknown error'}`);
+      }
+
+      if (authorsResult.success) {
+        messages.push(`Authors: ${authorsResult.message}`);
+      } else {
+        messages.push(`Authors failed: ${authorsResult.error || 'Unknown error'}`);
+      }
+
+      setTypesenseStatus(prev => ({
+        ...prev,
+        recreate: {
+          loading: false,
+          message: allSuccessful
+            ? `All collections recreated successfully. ${messages.join(', ')}`
+            : `Recreation completed with errors. ${messages.join(', ')}`,
+          success: allSuccessful
+        }
+      }));
+
+      // Clear message after 8 seconds (longer for combined operation)
+      setTimeout(() => {
+        setTypesenseStatus(prev => ({
+          ...prev,
+          recreate: { loading: false, message: '', success: undefined }
+        }));
+      }, 8000);
+    } catch (error) {
+      setTypesenseStatus(prev => ({
+        ...prev,
+        recreate: {
+          loading: false,
+          message: 'Network error occurred during recreation',
+          success: false
+        }
+      }));
+
+      setTimeout(() => {
+        setTypesenseStatus(prev => ({
+          ...prev,
+          recreate: { loading: false, message: '', success: undefined }
+        }));
+      }, 8000);
+    }
+  };
+
+  const handleCompleteBackup = async () => {
+    setDatabaseStatus(prev => ({
+      ...prev,
+      completeBackup: { loading: true, message: 'Creating complete backup...', success: undefined }
+    }));
+
+    try {
+      const backupBlob = await databaseApi.backupComplete();
+
+      // Create download link
+      const url = window.URL.createObjectURL(backupBlob);
+      const link = document.createElement('a');
+      link.href = url;
+
+      const timestamp = new Date().toISOString().replace(/[:.]/g, '-').slice(0, 19);
+      link.download = `storycove_complete_backup_${timestamp}.zip`;
+
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      window.URL.revokeObjectURL(url);
+
+      setDatabaseStatus(prev => ({
+        ...prev,
+        completeBackup: { loading: false, message: 'Complete backup downloaded successfully', success: true }
+      }));
+    } catch (error: any) {
+      setDatabaseStatus(prev => ({
+        ...prev,
+        completeBackup: { loading: false, message: error.message || 'Complete backup failed', success: false }
+      }));
+    }
+
+    // Clear message after 5 seconds
+    setTimeout(() => {
+      setDatabaseStatus(prev => ({
+        ...prev,
+        completeBackup: { loading: false, message: '', success: undefined }
+      }));
+    }, 5000);
+  };
+
+  const handleCompleteRestore = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+
+    // Reset the input so the same file can be selected again
+    event.target.value = '';
+
+    if (!file.name.endsWith('.zip')) {
+      setDatabaseStatus(prev => ({
+        ...prev,
+        completeRestore: { loading: false, message: 'Please select a .zip file', success: false }
+      }));
+      return;
+    }
+
+    const confirmed = window.confirm(
+      'Are you sure you want to restore the complete backup? This will PERMANENTLY DELETE all current data AND files (cover images, avatars) and replace them with the backup data. This action cannot be undone!'
+    );
+
+    if (!confirmed) return;
+
+    setDatabaseStatus(prev => ({
+      ...prev,
+      completeRestore: { loading: true, message: 'Restoring complete backup...', success: undefined }
+    }));
+
+    try {
+      const result = await databaseApi.restoreComplete(file);
+      setDatabaseStatus(prev => ({
+        ...prev,
+        completeRestore: {
+          loading: false,
+          message: result.success ? result.message : result.message,
+          success: result.success
+        }
+      }));
+    } catch (error: any) {
+      setDatabaseStatus(prev => ({
+        ...prev,
+        completeRestore: { loading: false, message: error.message || 'Complete restore failed', success: false }
+      }));
+    }
+
+    // Clear message after 10 seconds for restore (longer because it's important)
+    setTimeout(() => {
+      setDatabaseStatus(prev => ({
+        ...prev,
+        completeRestore: { loading: false, message: '', success: undefined }
+      }));
+    }, 10000);
+  };
+
+  const handleCompleteClear = async () => {
+    const confirmed = window.confirm(
+      'Are you ABSOLUTELY SURE you want to clear the entire database AND all files? This will PERMANENTLY DELETE ALL stories, authors, series, tags, collections, AND all uploaded images (covers, avatars). This action cannot be undone!'
+    );
+
+    if (!confirmed) return;
+
+    const doubleConfirmed = window.confirm(
+      'This is your final warning! Clicking OK will DELETE EVERYTHING in your StoryCove database AND all uploaded files. Are you completely certain you want to proceed?'
+    );
+
+    if (!doubleConfirmed) return;
+
+    setDatabaseStatus(prev => ({
+      ...prev,
+      completeClear: { loading: true, message: 'Clearing database and files...', success: undefined }
+    }));
+
+    try {
+      const result = await databaseApi.clearComplete();
+      setDatabaseStatus(prev => ({
+        ...prev,
+        completeClear: {
+          loading: false,
+          message: result.success
+            ? `Database and files cleared successfully. Deleted ${result.deletedRecords} records.`
+            : result.message,
+          success: result.success
+        }
+      }));
+    } catch (error: any) {
+      setDatabaseStatus(prev => ({
+        ...prev,
+        completeClear: { loading: false, message: error.message || 'Clear operation failed', success: false }
+      }));
+    }
+
+    // Clear message after 10 seconds for clear (longer because it's important)
+    setTimeout(() => {
+      setDatabaseStatus(prev => ({
+        ...prev,
+        completeClear: { loading: false, message: '', success: undefined }
+      }));
+    }, 10000);
+  };
+
+  const handleImageCleanupPreview = async () => {
+    setCleanupStatus(prev => ({
+      ...prev,
+      preview: { loading: true, message: 'Scanning for orphaned images...', success: undefined }
+    }));
+
+    try {
+      const result = await configApi.previewImageCleanup();
+
+      if (result.success) {
+        setCleanupStatus(prev => ({
+          ...prev,
+          preview: {
+            loading: false,
+            message: `Found ${result.orphanedCount} orphaned images (${result.formattedSize}) and ${result.foldersToDelete} empty folders. Referenced images: ${result.referencedImagesCount}`,
+            success: true,
+            data: result
+          }
+        }));
+      } else {
+        setCleanupStatus(prev => ({
+          ...prev,
+          preview: {
+            loading: false,
+            message: result.error || 'Preview failed',
+            success: false
+          }
+        }));
+      }
+    } catch (error: any) {
+      setCleanupStatus(prev => ({
+        ...prev,
+        preview: {
+          loading: false,
+          message: error.message || 'Network error occurred',
+          success: false
+        }
+      }));
+    }
+
+    // Clear message after 10 seconds
+    setTimeout(() => {
+      setCleanupStatus(prev => ({
+        ...prev,
+        preview: { loading: false, message: '', success: undefined }
+      }));
+    }, 10000);
+  };
+
+  const handleImageCleanupExecute = async () => {
+    if (!cleanupStatus.preview.data || cleanupStatus.preview.data.orphanedCount === 0) {
+      setCleanupStatus(prev => ({
+        ...prev,
+        execute: {
+          loading: false,
+          message: 'Please run preview first to see what will be deleted',
+          success: false
+        }
+      }));
+      return;
+    }
+
+    const confirmed = window.confirm(
+      `Are you sure you want to delete ${cleanupStatus.preview.data.orphanedCount} orphaned images (${cleanupStatus.preview.data.formattedSize})? This action cannot be undone!`
+    );
+
+    if (!confirmed) return;
+
+    setCleanupStatus(prev => ({
+      ...prev,
+      execute: { loading: true, message: 'Deleting orphaned images...', success: undefined }
+    }));
+
+    try {
+      const result = await configApi.executeImageCleanup();
+
+      if (result.success) {
+        setCleanupStatus(prev => ({
+          ...prev,
+          execute: {
+            loading: false,
+            message: `Successfully deleted ${result.deletedCount} orphaned images (${result.formattedSize}) and ${result.foldersDeleted} empty folders`,
+            success: true
+          },
+          preview: { loading: false, message: '', success: undefined, data: undefined } // Clear preview after successful cleanup
+        }));
+      } else {
+        setCleanupStatus(prev => ({
+          ...prev,
+          execute: {
+            loading: false,
+            message: result.error || 'Cleanup failed',
+            success: false
+          }
+        }));
+      }
+    } catch (error: any) {
+      setCleanupStatus(prev => ({
+        ...prev,
+        execute: {
+          loading: false,
+          message: error.message || 'Network error occurred',
+          success: false
+        }
+      }));
+    }
+
+    // Clear message after 10 seconds
+    setTimeout(() => {
+      setCleanupStatus(prev => ({
+        ...prev,
+        execute: { loading: false, message: '', success: undefined }
+      }));
+    }, 10000);
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* Typesense Search Management */}
+      <div className="theme-card theme-shadow rounded-lg p-6">
+        <h2 className="text-xl font-semibold theme-header mb-4">Search Index Management</h2>
+        <p className="theme-text mb-6">
+          Manage all Typesense search indexes (stories, authors, collections, etc.). Use these tools if search functionality isn't working properly.
+        </p>
+
+        <div className="space-y-6">
+          {/* Simplified Operations */}
+          <div className="border theme-border rounded-lg p-4">
+            <h3 className="text-lg font-semibold theme-header mb-3">Search Operations</h3>
+            <p className="text-sm theme-text mb-4">
+              Perform maintenance operations on all search indexes (stories, authors, collections, etc.).
+            </p>
+
+            <div className="flex flex-col sm:flex-row gap-3 mb-4">
+              <Button
+                onClick={handleFullReindex}
+                disabled={typesenseStatus.reindex.loading || typesenseStatus.recreate.loading}
+                loading={typesenseStatus.reindex.loading}
+                variant="ghost"
+                className="flex-1"
+              >
+                {typesenseStatus.reindex.loading ? 'Reindexing All...' : '🔄 Full Reindex'}
+              </Button>
+              <Button
+                onClick={handleRecreateAllCollections}
+                disabled={typesenseStatus.reindex.loading || typesenseStatus.recreate.loading}
+                loading={typesenseStatus.recreate.loading}
+                variant="secondary"
+                className="flex-1"
+              >
+                {typesenseStatus.recreate.loading ? 'Recreating All...' : '🏗️ Recreate All Collections'}
+              </Button>
+            </div>
+
+            {/* Status Messages */}
+            {typesenseStatus.reindex.message && (
+              <div className={`text-sm p-3 rounded mb-3 ${
+                typesenseStatus.reindex.success
+                  ? 'bg-green-50 dark:bg-green-900/20 text-green-800 dark:text-green-200'
+                  : 'bg-red-50 dark:bg-red-900/20 text-red-800 dark:text-red-200'
+              }`}>
+                {typesenseStatus.reindex.message}
+              </div>
+            )}
+
+            {typesenseStatus.recreate.message && (
+              <div className={`text-sm p-3 rounded mb-3 ${
+                typesenseStatus.recreate.success
+                  ? 'bg-green-50 dark:bg-green-900/20 text-green-800 dark:text-green-200'
+                  : 'bg-red-50 dark:bg-red-900/20 text-red-800 dark:text-red-200'
+              }`}>
+                {typesenseStatus.recreate.message}
+              </div>
+            )}
+          </div>
+
+          <div className="text-sm theme-text bg-blue-50 dark:bg-blue-900/20 p-3 rounded-lg">
+            <p className="font-medium mb-1">When to use these tools:</p>
+            <ul className="text-xs space-y-1 ml-4">
+              <li>• <strong>Full Reindex:</strong> Refresh all search data while keeping existing schemas (fixes data sync issues)</li>
+              <li>• <strong>Recreate All Collections:</strong> Delete and rebuild all search indexes from scratch (fixes schema and structure issues)</li>
+              <li>• <strong>Operations run in parallel</strong> across all index types for better performance</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+
+      {/* Storage Management */}
+      <div className="theme-card theme-shadow rounded-lg p-6">
+        <h2 className="text-xl font-semibold theme-header mb-4">Storage Management</h2>
+        <p className="theme-text mb-6">
+          Clean up orphaned content images that are no longer referenced in any story. This can help free up disk space.
+        </p>
+
+        <div className="space-y-6">
+          {/* Image Cleanup Section */}
+          <div className="border theme-border rounded-lg p-4">
+            <h3 className="text-lg font-semibold theme-header mb-3">🖼️ Content Images Cleanup</h3>
+            <p className="text-sm theme-text mb-4">
+              Scan for and remove orphaned content images that are no longer referenced in any story content. This includes images from deleted stories and unused downloaded images.
+            </p>
+
+            <div className="flex flex-col sm:flex-row gap-3 mb-3">
+              <Button
+                onClick={handleImageCleanupPreview}
+                disabled={cleanupStatus.preview.loading}
+                loading={cleanupStatus.preview.loading}
+                variant="ghost"
+                className="flex-1"
+              >
+                {cleanupStatus.preview.loading ? 'Scanning...' : 'Preview Cleanup'}
+              </Button>
+              <Button
+                onClick={handleImageCleanupExecute}
+                disabled={cleanupStatus.execute.loading || !cleanupStatus.preview.data || cleanupStatus.preview.data.orphanedCount === 0}
+                loading={cleanupStatus.execute.loading}
+                variant="secondary"
+                className="flex-1"
+              >
+                {cleanupStatus.execute.loading ? 'Cleaning...' : 'Execute Cleanup'}
+              </Button>
+            </div>
+
+            {/* Preview Results */}
+            {cleanupStatus.preview.message && (
+              <div className={`text-sm p-3 rounded mb-3 ${
+                cleanupStatus.preview.success
+                  ? 'bg-blue-50 dark:bg-blue-900/20 text-blue-800 dark:text-blue-200'
+                  : 'bg-red-50 dark:bg-red-900/20 text-red-800 dark:text-red-200'
+              }`}>
+                {cleanupStatus.preview.message}
+                {cleanupStatus.preview.data && cleanupStatus.preview.data.hasErrors && (
+                  <div className="mt-2 text-xs">
+                    <details>
+                      <summary className="cursor-pointer font-medium">View Errors ({cleanupStatus.preview.data.errors.length})</summary>
+                      <ul className="mt-1 ml-4 space-y-1">
+                        {cleanupStatus.preview.data.errors.map((error: string, index: number) => (
+                          <li key={index} className="text-red-600 dark:text-red-400">• {error}</li>
+                        ))}
+                      </ul>
+                    </details>
+                  </div>
+                )}
+              </div>
+            )}
+
+            {/* Execute Results */}
+            {cleanupStatus.execute.message && (
+              <div className={`text-sm p-3 rounded mb-3 ${
+                cleanupStatus.execute.success
+                  ? 'bg-green-50 dark:bg-green-900/20 text-green-800 dark:text-green-200'
+                  : 'bg-red-50 dark:bg-red-900/20 text-red-800 dark:text-red-200'
+              }`}>
+                {cleanupStatus.execute.message}
+              </div>
+            )}
+
+            {/* Detailed Preview Information */}
+            {cleanupStatus.preview.data && cleanupStatus.preview.success && (
+              <div className="text-sm theme-text bg-gray-50 dark:bg-gray-800 p-3 rounded border">
+                <div className="grid grid-cols-2 gap-3">
+                  <div>
+                    <span className="font-medium">Orphaned Images:</span> {cleanupStatus.preview.data.orphanedCount}
+                  </div>
+                  <div>
+                    <span className="font-medium">Total Size:</span> {cleanupStatus.preview.data.formattedSize}
+                  </div>
+                  <div>
+                    <span className="font-medium">Empty Folders:</span> {cleanupStatus.preview.data.foldersToDelete}
+                  </div>
+                  <div>
+                    <span className="font-medium">Referenced Images:</span> {cleanupStatus.preview.data.referencedImagesCount}
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+
+          <div className="text-sm theme-text bg-blue-50 dark:bg-blue-900/20 p-3 rounded-lg">
+            <p className="font-medium mb-1">📝 How it works:</p>
+            <ul className="text-xs space-y-1 ml-4">
+              <li>• <strong>Preview:</strong> Scans all stories to find images no longer referenced in content</li>
+              <li>• <strong>Execute:</strong> Permanently deletes orphaned images and empty story directories</li>
+              <li>• <strong>Safe:</strong> Only removes images not found in any story content</li>
+              <li>• <strong>Backup recommended:</strong> Consider backing up before large cleanups</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+
+      {/* Database Management */}
+      <div className="theme-card theme-shadow rounded-lg p-6">
+        <h2 className="text-xl font-semibold theme-header mb-4">Database Management</h2>
+        <p className="theme-text mb-6">
+          Backup, restore, or clear your StoryCove database and files. These comprehensive operations include both your data and uploaded images.
+        </p>
+
+        <div className="space-y-6">
+          {/* Complete Backup Section */}
+          <div className="border theme-border rounded-lg p-4 border-blue-200 dark:border-blue-800">
+            <h3 className="text-lg font-semibold theme-header mb-3">📦 Create Backup</h3>
+            <p className="text-sm theme-text mb-3">
+              Download a complete backup as a ZIP file. This includes your database AND all uploaded files (cover images, avatars). This is a comprehensive backup of your entire StoryCove installation.
+            </p>
+            <Button
+              onClick={handleCompleteBackup}
+              disabled={databaseStatus.completeBackup.loading}
+              loading={databaseStatus.completeBackup.loading}
+              variant="primary"
+              className="w-full sm:w-auto"
+            >
+              {databaseStatus.completeBackup.loading ? 'Creating Backup...' : 'Download Backup'}
+            </Button>
+            {databaseStatus.completeBackup.message && (
+              <div className={`text-sm p-2 rounded mt-3 ${
+                databaseStatus.completeBackup.success
+                  ? 'bg-green-50 dark:bg-green-900/20 text-green-800 dark:text-green-200'
+                  : 'bg-red-50 dark:bg-red-900/20 text-red-800 dark:text-red-200'
+              }`}>
+                {databaseStatus.completeBackup.message}
+              </div>
+            )}
+          </div>
+
+          {/* Restore Section */}
+          <div className="border theme-border rounded-lg p-4 border-orange-200 dark:border-orange-800">
+            <h3 className="text-lg font-semibold theme-header mb-3">📥 Restore Backup</h3>
+            <p className="text-sm theme-text mb-3">
+              <strong className="text-orange-600 dark:text-orange-400">⚠️ Warning:</strong> This will completely replace your current database AND all files with the backup. All existing data and uploaded files will be permanently deleted.
+            </p>
+            <div className="flex items-center gap-3">
+              <input
+                type="file"
+                accept=".zip"
+                onChange={handleCompleteRestore}
+                disabled={databaseStatus.completeRestore.loading}
+                className="flex-1 text-sm theme-text file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-medium file:theme-accent-bg file:text-white hover:file:bg-opacity-90 file:cursor-pointer"
+              />
+            </div>
+            {databaseStatus.completeRestore.message && (
+              <div className={`text-sm p-2 rounded mt-3 ${
+                databaseStatus.completeRestore.success
+                  ? 'bg-green-50 dark:bg-green-900/20 text-green-800 dark:text-green-200'
+                  : 'bg-red-50 dark:bg-red-900/20 text-red-800 dark:text-red-200'
+              }`}>
+                {databaseStatus.completeRestore.message}
+              </div>
+            )}
+            {databaseStatus.completeRestore.loading && (
+              <div className="text-sm theme-text mt-3 flex items-center gap-2">
+                <div className="animate-spin w-4 h-4 border-2 border-blue-500 border-t-transparent rounded-full"></div>
+                Restoring backup...
+              </div>
+            )}
+          </div>
+
+          {/* Clear Everything Section */}
+          <div className="border theme-border rounded-lg p-4 border-red-200 dark:border-red-800 bg-red-50 dark:bg-red-900/10">
+            <h3 className="text-lg font-semibold theme-header mb-3">🗑️ Clear Everything</h3>
+            <p className="text-sm theme-text mb-3">
+              <strong className="text-red-600 dark:text-red-400">⚠️ Danger Zone:</strong> This will permanently delete ALL data from your database AND all uploaded files (cover images, avatars). Everything will be completely removed. This action cannot be undone!
+            </p>
+            <Button
+              onClick={handleCompleteClear}
+              disabled={databaseStatus.completeClear.loading}
+              loading={databaseStatus.completeClear.loading}
+              variant="secondary"
+              className="w-full sm:w-auto bg-red-700 hover:bg-red-800 text-white border-red-700"
+            >
+              {databaseStatus.completeClear.loading ? 'Clearing Everything...' : 'Clear Everything'}
+            </Button>
+            {databaseStatus.completeClear.message && (
+              <div className={`text-sm p-2 rounded mt-3 ${
+                databaseStatus.completeClear.success
+                  ? 'bg-green-50 dark:bg-green-900/20 text-green-800 dark:text-green-200'
+                  : 'bg-red-50 dark:bg-red-900/20 text-red-800 dark:text-red-200'
+              }`}>
+                {databaseStatus.completeClear.message}
+              </div>
+            )}
+          </div>
+
+          <div className="text-sm theme-text bg-blue-50 dark:bg-blue-900/20 p-3 rounded-lg">
+            <p className="font-medium mb-1">💡 Best Practices:</p>
+            <ul className="text-xs space-y-1 ml-4">
+              <li>• <strong>Always backup</strong> before performing restore or clear operations</li>
+              <li>• <strong>Store backups safely</strong> in multiple locations for important data</li>
+              <li>• <strong>Test restores</strong> in a development environment when possible</li>
+              <li>• <strong>Backup files (.zip)</strong> contain both database and all uploaded files</li>
+              <li>• <strong>Verify backup files</strong> are complete before relying on them</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/stories/StoryCard.tsx

@@ -55,6 +55,17 @@ export default function StoryCard({
     return new Date(dateString).toLocaleDateString();
   };
 
+  const calculateReadingPercentage = (story: Story): number => {
+    if (!story.readingPosition) return 0;
+
+    const totalLength = story.contentPlain?.length || story.contentHtml.length;
+    if (totalLength === 0) return 0;
+
+    return Math.round((story.readingPosition / totalLength) * 100);
+  };
+
+  const readingPercentage = calculateReadingPercentage(story);
+
   if (viewMode === 'list') {
     return (
       <div className="theme-card theme-shadow rounded-lg p-4 hover:shadow-lg transition-shadow">
@@ -100,6 +111,11 @@ export default function StoryCard({
                 <div className="flex items-center gap-4 mt-2 text-sm theme-text">
                   <span>{formatWordCount(story.wordCount)}</span>
                   <span>{formatDate(story.createdAt)}</span>
+                  {readingPercentage > 0 && (
+                    <span className="bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 px-2 py-1 rounded text-xs font-mono">
+                      {readingPercentage}% read
+                    </span>
+                  )}
                   {story.seriesName && (
                     <span>
                       {story.seriesName} #{story.volume}
@@ -231,6 +247,11 @@ export default function StoryCard({
         <div className="text-xs theme-text space-y-1">
           <div>{formatWordCount(story.wordCount)}</div>
           <div>{formatDate(story.createdAt)}</div>
+          {readingPercentage > 0 && (
+            <div className="bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 px-2 py-1 rounded font-mono inline-block">
+              {readingPercentage}% read
+            </div>
+          )}
           {story.seriesName && (
             <div>
               {story.seriesName} #{story.volume}

frontend/src/components/ui/TabNavigation.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+interface Tab {
+  id: string;
+  label: string;
+  icon: string;
+}
+
+interface TabNavigationProps {
+  tabs: Tab[];
+  activeTab: string;
+  onTabChange: (tabId: string) => void;
+  className?: string;
+}
+
+export default function TabNavigation({
+  tabs,
+  activeTab,
+  onTabChange,
+  className = ''
+}: TabNavigationProps) {
+  return (
+    <div className={`border-b theme-border ${className}`}>
+      <nav className="-mb-px flex space-x-8">
+        {tabs.map((tab) => (
+          <button
+            key={tab.id}
+            onClick={() => onTabChange(tab.id)}
+            className={`
+              whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm transition-colors
+              ${activeTab === tab.id
+                ? 'border-blue-500 text-blue-600 dark:text-blue-400'
+                : 'border-transparent theme-text hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-600'
+              }
+            `}
+          >
+            <span className="mr-2">{tab.icon}</span>
+            {tab.label}
+          </button>
+        ))}
+      </nav>
+    </div>
+  );
+}