e.target === e.currentTarget && onDismiss()} >

0 ? `translateY(${swipeOffset}px)` : undefined }} > {/* When children is a render prop, the caller handles the drag handle */} {!isRenderProp && (

)} {isRenderProp ? (children as (sh: SwipeHandlers) => React.ReactNode)(swipeHandlers) : children}

); }; interface TagsSectionProps { selectedTags: Set; availableTags: TagStats[]; tagInput: string; onTagInputChange: (value: string) => void; onToggleTag: (tagName: string) => void; onAddTag: () => void; placeholder?: string; } const TagsSection: React.FC = ({ selectedTags, availableTags, tagInput, onTagInputChange, onToggleTag, onAddTag, placeholder = "Add tag..." }) => { const tagInputRef = useRef(null); const refocusInput = () => { requestAnimationFrame(() => tagInputRef.current?.focus({ preventScroll: true })); }; // Prevent tag buttons/chips from stealing focus (avoids iOS keyboard bounce) const preventFocusLoss = (e: React.TouchEvent | React.MouseEvent) => { e.preventDefault(); }; // Filter available tags based on input and exclude already selected const unusedTags = availableTags.filter((tag) => !selectedTags.has(tag.name) && (!tagInput.trim() || tag.name.toLowerCase().includes(tagInput.toLowerCase().trim())) ); // Add collapsed class when no available tags to show const isCollapsed = unusedTags.length === 0 && availableTags.length === 0; return (

{selectedTags.size > 0 && (

{Array.from(selectedTags).map((tag) => ( {tag} ))}

)}

onTagInputChange(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter" || e.key === ",") { e.preventDefault(); onAddTag(); refocusInput(); } }} onFocus={() => { // Counter iOS viewport scroll on focus requestAnimationFrame(() => window.scrollTo(0, 0)); }} placeholder={placeholder} autoCapitalize="none" autoCorrect="off" autoComplete="off" spellCheck={false} /> 0} onClear={() => onTagInputChange('')} />

{unusedTags.length > 0 ? (

{unusedTags.map((tag) => ( { onToggleTag(tag.name); onTagInputChange(''); refocusInput(); }} > {tag.name} ))}

) : (

{availableTags.length === 0 ? (

This is where your tags live - tag something!

) : tagInput.trim() ? (

No matching tags

) : null}

)}

); }; interface EditorButtonsProps { onSave: () => void; onCancel: () => void; onDelete?: () => void; saveLabel?: string; cancelLabel?: string; saveDisabled?: boolean; } const EditorButtons: React.FC = ({ onSave, onCancel, onDelete, saveLabel = "Save", cancelLabel = "Cancel", saveDisabled = false }) => (

{onDelete && ( )}

); interface EditorLayoutProps { onDismiss: () => void; keyboardHeight: number; children?: React.ReactNode; tags?: TagsSectionProps; buttons: EditorButtonsProps; className?: string; headerActions?: React.ReactNode; } const EditorLayout: React.FC = ({ onDismiss, keyboardHeight, children, tags, buttons, className, headerActions }) => { const sepRef = useRef(null); const isDraggingSepRef = useRef(false); const dragStartYRef = useRef(0); const dragStartContentHeightRef = useRef(0); const getCard = () => sepRef.current?.closest('.editor-card') as HTMLElement | null; const handleSepDragStart = (clientY: number) => { const card = getCard(); if (!card) return; const contentEl = card.querySelector('.editor-segment-content') as HTMLElement | null; if (!contentEl) return; isDraggingSepRef.current = true; dragStartYRef.current = clientY; dragStartContentHeightRef.current = contentEl.offsetHeight; document.body.style.userSelect = 'none'; document.body.style.cursor = 'ns-resize'; document.body.dataset.resizing = 'true'; }; const handleSepDragMove = (clientY: number) => { if (!isDraggingSepRef.current) return; const card = getCard(); if (!card) return; const delta = clientY - dragStartYRef.current; const newHeight = Math.max(60, dragStartContentHeightRef.current + delta); card.style.setProperty('--segment-content-height', `${newHeight}px`); card.style.setProperty('--segment-content-flex', 'none'); }; const handleSepDragEnd = () => { isDraggingSepRef.current = false; document.body.style.userSelect = ''; document.body.style.cursor = ''; delete document.body.dataset.resizing; }; useEffect(() => { const onMouseMove = (e: MouseEvent) => handleSepDragMove(e.clientY); const onTouchMove = (e: TouchEvent) => { if (isDraggingSepRef.current && e.cancelable) e.preventDefault(); if (e.touches.length === 1) handleSepDragMove(e.touches[0].clientY); }; const onEnd = () => handleSepDragEnd(); document.addEventListener('mousemove', onMouseMove); document.addEventListener('mouseup', onEnd); document.addEventListener('touchmove', onTouchMove, { passive: false }); document.addEventListener('touchend', onEnd); return () => { document.removeEventListener('mousemove', onMouseMove); document.removeEventListener('mouseup', onEnd); document.removeEventListener('touchmove', onTouchMove); document.removeEventListener('touchend', onEnd); }; }, []); return ( {(swipeHandlers: SwipeHandlers) => ( <>

{headerActions}

{children}

{tags && ( <>

{ e.preventDefault(); handleSepDragStart(e.clientY); }} onTouchStart={(e) => { handleSepDragStart(e.touches[0].clientY); }} >

)}

)} ); }; interface ResizableInputProps { value: string; onChange: (value: string) => void; placeholder?: string; autoFocus?: boolean; showClearButton?: boolean; onAutoSave?: (value: string) => void; autoCapitalize?: string; autoCorrect?: string; showUndoRedo?: boolean; } interface ResizableInputHandle { undo: () => void; redo: () => void; canUndo: boolean; canRedo: boolean; } const ResizableInput = forwardRef(({ value, onChange, placeholder = "Enter text...", autoFocus = false, showClearButton = true, onAutoSave, autoCapitalize: autoCapitalizeProp = "sentences", autoCorrect: autoCorrectProp = "on", showUndoRedo = true, }, ref) => { const [height, setHeight] = useState(null); const wrapperRef = useRef(null); const textareaRef = useRef(null); const isDraggingRef = useRef(false); const dragStartYRef = useRef(0); const dragStartHeightRef = useRef(0); // Undo/redo history const historyRef = useRef([value]); const historyIndexRef = useRef(0); const isUndoRedoRef = useRef(false); const [, forceRender] = useState(0); // Track value changes for undo history // NOTE: useLayoutEffect (not useEffect) is critical here. forceRender updates // undo/redo button disabled state, but useEffect fires AFTER paint, causing a // second re-render that resets cursor position on iOS WKWebView. useLayoutEffect // fires before paint, collapsing both renders into one visual update. // This is a partial fix — other async state updates (e.g. auto-save's // setOriginalEditValues/loadSavedTexts at 500ms) could still cause cursor jumps. // A full fix would save/restore selectionStart/End across all re-renders. useLayoutEffect(() => { if (isUndoRedoRef.current) { isUndoRedoRef.current = false; return; } const history = historyRef.current; const idx = historyIndexRef.current; // Only push if different from current position if (history[idx] !== value) { // Truncate any redo history historyRef.current = history.slice(0, idx + 1); historyRef.current.push(value); // Bound to 100 entries if (historyRef.current.length > 100) { historyRef.current.shift(); } historyIndexRef.current = historyRef.current.length - 1; forceRender(n => n + 1); } }, [value]); const handleUndo = () => { if (historyIndexRef.current > 0) { historyIndexRef.current--; isUndoRedoRef.current = true; onChange(historyRef.current[historyIndexRef.current]); forceRender(n => n + 1); } }; const handleRedo = () => { if (historyIndexRef.current < historyRef.current.length - 1) { historyIndexRef.current++; isUndoRedoRef.current = true; onChange(historyRef.current[historyIndexRef.current]); forceRender(n => n + 1); } }; useImperativeHandle(ref, () => ({ undo: handleUndo, redo: handleRedo, get canUndo() { return historyIndexRef.current > 0; }, get canRedo() { return historyIndexRef.current < historyRef.current.length - 1; }, })); // Min height for resize floor const minHeight = 60; // Find the .editor-segment-content ancestor (if inside EditorLayout) const getSegmentContent = () => { if (!wrapperRef.current) return null; return wrapperRef.current.closest('.editor-segment-content') as HTMLElement | null; }; const handleDragStart = (clientY: number) => { const segment = getSegmentContent(); if (segment) { // Inside EditorLayout: resize the segment split isDraggingRef.current = true; dragStartYRef.current = clientY; dragStartHeightRef.current = segment.offsetHeight; document.body.style.userSelect = 'none'; document.body.style.cursor = 'ns-resize'; document.body.dataset.resizing = 'true'; } else if (wrapperRef.current) { // Standalone: resize the textarea wrapper isDraggingRef.current = true; dragStartYRef.current = clientY; dragStartHeightRef.current = wrapperRef.current.offsetHeight; document.body.style.userSelect = 'none'; document.body.style.cursor = 'ns-resize'; document.body.dataset.resizing = 'true'; } }; const handleDragMove = (clientY: number) => { if (!isDraggingRef.current) return; const delta = clientY - dragStartYRef.current; const segment = getSegmentContent(); if (segment) { // Resize the editor-segment-content via CSS variable on .editor-card const card = segment.closest('.editor-card') as HTMLElement | null; if (card) { const newHeight = Math.max(minHeight, dragStartHeightRef.current + delta); card.style.setProperty('--segment-content-height', `${newHeight}px`); card.style.setProperty('--segment-content-flex', 'none'); } } else { const newHeight = Math.max(minHeight, dragStartHeightRef.current + delta); setHeight(newHeight); } }; const handleDragEnd = () => { isDraggingRef.current = false; document.body.style.userSelect = ''; document.body.style.cursor = ''; delete document.body.dataset.resizing; }; // Auto markdown list continuation on Enter (includes checkbox support) const handleKeyDown = (e: React.KeyboardEvent) => { if (e.key !== 'Enter') return; const textarea = textareaRef.current; if (!textarea) return; const { selectionStart, value: domValue } = textarea; const result = autoListContinue(domValue, selectionStart); if (!result) return; // Not a list line, let default Enter happen e.preventDefault(); onChange(result.newValue); requestAnimationFrame(() => { if (textareaRef.current) { textareaRef.current.selectionStart = result.cursorPos; textareaRef.current.selectionEnd = result.cursorPos; } }); }; useEffect(() => { const handleMouseMove = (e: MouseEvent) => handleDragMove(e.clientY); const handleTouchMove = (e: TouchEvent) => { if (isDraggingRef.current && e.cancelable) e.preventDefault(); if (e.touches.length === 1) handleDragMove(e.touches[0].clientY); }; const handleEnd = () => handleDragEnd(); document.addEventListener('mousemove', handleMouseMove); document.addEventListener('mouseup', handleEnd); document.addEventListener('touchmove', handleTouchMove, { passive: false }); document.addEventListener('touchend', handleEnd); return () => { document.removeEventListener('mousemove', handleMouseMove); document.removeEventListener('mouseup', handleEnd); document.removeEventListener('touchmove', handleTouchMove); document.removeEventListener('touchend', handleEnd); }; }, [minHeight]); // Auto-focus textarea on mount to transfer keyboard from trigger input useEffect(() => { if (!autoFocus) return; // Short delay lets layout settle before focusing const timer = setTimeout(() => { if (textareaRef.current) { textareaRef.current.focus(); // Place cursor at end of text const len = textareaRef.current.value.length; textareaRef.current.selectionStart = len; textareaRef.current.selectionEnd = len; } }, 50); return () => clearTimeout(timer); }, []); return ( <> {showUndoRedo &&

}

{
          // Normalize: collapse multiple spaces after list markers (iOS swipe/autosuggestion adds extra space)
          const normalized = e.target.value.replace(/^(\s*(?:[-*+]|\d+\.))[ \t]{2,}/gm, '$1 ');
          onChange(normalized);
          // Trigger auto-save if provided
          if (onAutoSave) {
            onAutoSave(normalized);
          }
        }}
        onFocus={() => {
          // Counter iOS viewport scroll on focus
          requestAnimationFrame(() => window.scrollTo(0, 0));
        }}
        onKeyDown={handleKeyDown}
        placeholder={placeholder}
        autoCapitalize={autoCapitalizeProp}
        autoCorrect={autoCorrectProp}
        autoComplete="off"
        spellCheck={autoCorrectProp === "on"}
      />
      {showClearButton && <ClearButton show={value.length > 0} onClear={() => onChange('')} className="textarea-clear" />}
      <div
        className="drag-handle"
        onMouseDown={(e) => { e.preventDefault(); handleDragStart(e.clientY); }}
        onTouchStart={(e) => { handleDragStart(e.touches[0].clientY); }}
      >
        <div className="drag-handle-bar" />
      </div>
    </div>
    </>
  );
});

// ============================================================================
// Custom Hooks
// ============================================================================

// Custom hook to detect iOS keyboard height via Visual Viewport API
// Uses max observed height while keyboard is open to prevent layout shifts
// when switching between inputs with different suggestion bar states
const useKeyboardHeight = () => {
  const [keyboardHeight, setKeyboardHeight] = useState(0);
  const maxHeightRef = useRef(0);

useEffect(() => {
    const viewport = window.visualViewport;
    if (!viewport) return;

viewport.addEventListener('resize', handleResize);
    viewport.addEventListener('scroll', handleResize);

return () => {
      viewport.removeEventListener('resize', handleResize);
      viewport.removeEventListener('scroll', handleResize);
    };
  }, []);

return keyboardHeight;
};

const QUICK_ADD_DRAFT_KEY = 'peek:mobile:quickAddDraft';

function App() {

// Filter state: "all" shows everything, or a single type
  const [activeFilter, setActiveFilter] = useState<ItemType | "all">("all");

// Data state
  const [savedUrls, setSavedUrls] = useState<SavedUrl[]>([]);
  const [savedTexts, setSavedTexts] = useState<SavedText[]>([]);
  const [savedTagsets, setSavedTagsets] = useState<SavedTagset[]>([]);
  const [savedImages, setSavedImages] = useState<SavedImage[]>([]);
  const [allTags, setAllTags] = useState<TagStats[]>([]);

// Page editing state
  const [editingUrlId, setEditingUrlId] = useState<string | null>(null);
  const [editingUrlValue, setEditingUrlValue] = useState("");
  const [editingTags, setEditingTags] = useState<Set<string>>(new Set());
  const [editingUrlTags, setEditingUrlTags] = useState<TagStats[]>([]); // Domain-boosted tags for editing
  const [newTagInput, setNewTagInput] = useState("");

// Text creation/editing state
  const [editingTextId, setEditingTextId] = useState<string | null>(null);
  const [editingTextContent, setEditingTextContent] = useState("");
  const [editingTextTags, setEditingTextTags] = useState<Set<string>>(new Set());
  const editingTextTagsRef = useRef<Set<string>>(new Set());
  const [editingTextTagInput, setEditingTextTagInput] = useState("");
  const [textReaderMode, setTextReaderMode] = useState<string | null>(null); // item ID being viewed in reader mode
  const [editorReaderMode, setEditorReaderMode] = useState(false);
  const textEditorRef = useRef<ResizableInputHandle>(null);

// Tagset editing state
  const [editingTagsetId, setEditingTagsetId] = useState<string | null>(null);
  const [editingTagsetTags, setEditingTagsetTags] = useState<Set<string>>(new Set());
  const [editingTagsetInput, setEditingTagsetInput] = useState("");

// Image editing state
  const [editingImageId, setEditingImageId] = useState<string | null>(null);
  const [editingImageContent, setEditingImageContent] = useState("");
  const [editingImageTags, setEditingImageTags] = useState<Set<string>>(new Set());
  const [editingImageTagInput, setEditingImageTagInput] = useState("");
  const [fullscreenImageData, setFullscreenImageData] = useState<string | null>(null);

// Unified add input state — hydrated from localStorage at mount
  const initialDraftRef = useRef<ReturnType<typeof loadInitialQuickAddDraft> | undefined>(undefined);
  if (initialDraftRef.current === undefined) {
    initialDraftRef.current = loadInitialQuickAddDraft();
  }
  const initialDraft = initialDraftRef.current;

const [addInputText, setAddInputText] = useState<string>(initialDraft?.text ?? "");
  const [addInputTags, setAddInputTags] = useState<Set<string>>(
    () => new Set(initialDraft?.tags ?? [])
  );
  const [addInputExpanded, setAddInputExpanded] = useState(false);
  const [addInputNewTag, setAddInputNewTag] = useState<string>(initialDraft?.newTag ?? "");

// Webview animation duration (ms) — must match --webview-anim in CSS
  const WEBVIEW_ANIM_MS = 200;

// Inline webview expansion state
  const [expandedWebview, setExpandedWebview] = useState<{
    url: string;
    itemId: string;
  } | null>(null);
  const [webviewAnimated, setWebviewAnimated] = useState(false); // drives height transition
  const [webviewLoaded, setWebviewLoaded] = useState(false);
  const [webviewError, setWebviewError] = useState<string | false>(false);

// Camera capture state
  const [capturedImage, setCapturedImage] = useState<string | null>(null); // base64 data URL
  const [capturedImageTags, setCapturedImageTags] = useState<Set<string>>(new Set());
  const [capturedImageTagInput, setCapturedImageTagInput] = useState("");
  const capturedImageTagInputRef = useRef<HTMLInputElement>(null);
  const cameraInputRef = useRef<HTMLInputElement>(null);
  const keyboardPrimerRef = useRef<HTMLInputElement>(null);

// Scroll ref for scroll-to-top
  const mainRef = useRef<HTMLElement>(null);

// Delete confirmation state
  const [pendingDelete, setPendingDelete] = useState<{ id: string; type: ItemType } | null>(null);

// Search and tag filter state (persisted to localStorage)
  const [searchText, setSearchText] = useState<string>(() => {
    return localStorage.getItem('searchText') || "";
  });
  const [selectedFilterTags, setSelectedFilterTags] = useState<Set<string>>(() => {
    const saved = localStorage.getItem('selectedFilterTags');
    return saved ? new Set(JSON.parse(saved)) : new Set();
  });

// Sort order state (persisted to localStorage)
  const [sortOrder, setSortOrder] = useState<'newest' | 'oldest'>(() => {
    return (localStorage.getItem('sortOrder') as 'newest' | 'oldest') || 'newest';
  });

// Filter tags resizable state
  const [filterTagsHeight, setFilterTagsHeight] = useState<number>(() => {
    const saved = localStorage.getItem('filterTagsHeight');
    return saved ? parseInt(saved, 10) : 116;
  });
  const filterTagsRef = useRef<HTMLDivElement>(null);
  const filterTagsDraggingRef = useRef(false);
  const isResizingRef = useRef(false);
  const filterTagsDragStartYRef = useRef(0);
  const filterTagsDragStartHeightRef = useRef(0);

// Toast notification state
  const [toast, setToast] = useState<{ message: string; type: "success" | "error" } | null>(null);
  const toastTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);

const showToast = (message: string, type: "success" | "error" = "success") => {
    if (toastTimeoutRef.current) clearTimeout(toastTimeoutRef.current);
    setToast({ message, type });
    toastTimeoutRef.current = setTimeout(() => setToast(null), 3000);
  };

// Discard changes confirmation state
  const [pendingDiscard, setPendingDiscard] = useState<{ type: ItemType } | null>(null);

// Track original values for dirty checking
  const [originalEditValues, setOriginalEditValues] = useState<{
    url?: string; tags?: string[]; content?: string;
  } | null>(null);

// UI state
  const [isDark, setIsDark] = useState(false);
  const [showSettings, setShowSettings] = useState(false);
  const [webhookUrl, setWebhookUrl] = useState("");
  const [webhookUrlInput, setWebhookUrlInput] = useState("");
  const [webhookApiKey, setWebhookApiKey] = useState("");
  const [webhookApiKeyInput, setWebhookApiKeyInput] = useState("");
  const [autoSyncEnabled, setAutoSyncEnabled] = useState(false);
  const [showApiKey, setShowApiKey] = useState(false);
  const [isSyncing, setIsSyncing] = useState(false);
  const [syncMessage, setSyncMessage] = useState<string | null>(null);
  const [lastSync, setLastSync] = useState<string | null>(null);
  const [syncStatus, setSyncStatus] = useState<SyncStatus | null>(null);
  const [profileInfo, setProfileInfo] = useState<ProfileInfo | null>(null);
  const [profileInput, setProfileInput] = useState("");
  const [showRestartPrompt, setShowRestartPrompt] = useState(false);
  const [archiveTag, setArchiveTag] = useState("archive");
  const [archiveTagInput, setArchiveTagInput] = useState("archive");
  const [todoTag, setTodoTag] = useState("todo");
  const [todoTagInput, setTodoTagInput] = useState("todo");
  const [doneTag, setDoneTag] = useState("done");
  const [doneTagInput, setDoneTagInput] = useState("done");
  const [readmeTag, setReadmeTag] = useState("readme");
  const [readmeTagInput, setReadmeTagInput] = useState("readme");
  const [readTag, setReadTag] = useState("read");
  const [readTagInput, setReadTagInput] = useState("read");
  const [todayTag, _setTodayTag] = useState("today");
  const [_todayTagInput, _setTodayTagInput] = useState("today");
  const [laterTag, _setLaterTag] = useState("later");
  const [_laterTagInput, _setLaterTagInput] = useState("later");
  const [offlineTag, setOfflineTag] = useState("offline");
  const [offlineTagInput, setOfflineTagInput] = useState("offline");
  const [offlineStorageSize, setOfflineStorageSize] = useState(0);
  // Track which item IDs have offline content downloaded (for two-state icon)
  const [offlineContentIds, setOfflineContentIds] = useState<Set<string>>(new Set());
  // Track items currently being fetched for offline content
  const [offlineFetchingIds, setOfflineFetchingIds] = useState<Set<string>>(new Set());

// Keyboard height for iOS keyboard avoidance
  const keyboardHeight = useKeyboardHeight();

// Edge swipe gesture: swipe from left edge to navigate back to the list view
  const edgeSwipeBackRef = useRef<(() => void) | null>(null);

useEffect(() => {
    const EDGE_ZONE = 20;      // px from left edge to start swipe
    const MIN_SWIPE_DIST = 80; // px horizontal distance required
    let touchStartX = 0;
    let touchStartY = 0;
    let isEdgeSwipe = false;

const onTouchEnd = (e: TouchEvent) => {
      if (!isEdgeSwipe) return;
      isEdgeSwipe = false;
      const touch = e.changedTouches[0];
      const dx = touch.clientX - touchStartX;
      const dy = Math.abs(touch.clientY - touchStartY);
      // Must be a predominantly horizontal swipe
      if (dx >= MIN_SWIPE_DIST && dx > dy) {
        edgeSwipeBackRef.current?.();
      }
    };

// Periodic auto-sync
  const autoSyncIntervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
  const DEFAULT_SYNC_INTERVAL_MINUTES = 30;
  const [syncIntervalMinutes, setSyncIntervalMinutes] = useState(DEFAULT_SYNC_INTERVAL_MINUTES);
  const syncIntervalMs = syncIntervalMinutes * 60_000;

// Filter tags drag-to-resize handlers
  const handleFilterTagsDragStart = (clientY: number) => {
    filterTagsDraggingRef.current = true;
    isResizingRef.current = true;
    filterTagsDragStartYRef.current = clientY;
    filterTagsDragStartHeightRef.current = filterTagsRef.current?.offsetHeight ?? filterTagsHeight;
    document.body.style.userSelect = 'none';
    document.body.style.cursor = 'ns-resize';
  };

useEffect(() => {
    const handleMove = (clientY: number) => {
      if (!filterTagsDraggingRef.current) return;
      const delta = clientY - filterTagsDragStartYRef.current;
      const newHeight = Math.max(71, filterTagsDragStartHeightRef.current + delta);
      setFilterTagsHeight(newHeight);
    };
    const handleMouseMove = (e: MouseEvent) => handleMove(e.clientY);
    const handleTouchMove = (e: TouchEvent) => {
      if (filterTagsDraggingRef.current && e.cancelable) e.preventDefault();
      if (e.touches.length === 1) handleMove(e.touches[0].clientY);
    };
    const handleEnd = () => {
      if (!filterTagsDraggingRef.current) return;
      filterTagsDraggingRef.current = false;
      isResizingRef.current = false;
      document.body.style.userSelect = '';
      document.body.style.cursor = '';
      // Persist to localStorage
      localStorage.setItem('filterTagsHeight', String(Math.round(filterTagsHeight)));
    };

document.addEventListener('mousemove', handleMouseMove);
    document.addEventListener('mouseup', handleEnd);
    document.addEventListener('touchmove', handleTouchMove, { passive: false });
    document.addEventListener('touchend', handleEnd);
    return () => {
      document.removeEventListener('mousemove', handleMouseMove);
      document.removeEventListener('mouseup', handleEnd);
      document.removeEventListener('touchmove', handleTouchMove);
      document.removeEventListener('touchend', handleEnd);
    };
  }, [filterTagsHeight]);

// Persist search text to localStorage
  useEffect(() => {
    localStorage.setItem('searchText', searchText);
  }, [searchText]);

// Persist selected filter tags to localStorage
  useEffect(() => {
    localStorage.setItem('selectedFilterTags', JSON.stringify(Array.from(selectedFilterTags)));
  }, [selectedFilterTags]);

// Persist sort order to localStorage
  useEffect(() => {
    localStorage.setItem('sortOrder', sortOrder);
  }, [sortOrder]);

// Persist quick-add draft to localStorage whenever the panel is open and state changes.
  useEffect(() => {
    if (!addInputExpanded) return;
    const hasContent = addInputText || addInputTags.size > 0 || addInputNewTag;
    if (hasContent) {
      localStorage.setItem(QUICK_ADD_DRAFT_KEY, JSON.stringify({
        text: addInputText,
        tags: Array.from(addInputTags),
        newTag: addInputNewTag,
      }));
    } else {
      localStorage.removeItem(QUICK_ADD_DRAFT_KEY);
    }
  }, [addInputExpanded, addInputText, addInputTags, addInputNewTag]);

// Development profile: vivid pastel bg in BOTH color schemes (the system
  // dark-mode tint is too subtle to serve as a "page refreshed" indicator).
  useEffect(() => {
    const currentProfile = profileInfo?.profiles.find(p => p.id === profileInfo.currentProfileId);
    if (currentProfile?.name === 'Development') {
      const hue = Math.floor(Math.random() * 360);
      const pastel = `hsl(${hue}, 80%, 85%)`;
      document.documentElement.style.setProperty('--dev-bg-light', pastel);
      document.documentElement.style.setProperty('--dev-bg-dark', pastel);
      console.log(`[DEV] Page loaded — bg hue: ${hue}`);
    } else {
      document.documentElement.style.removeProperty('--dev-bg-light');
      document.documentElement.style.removeProperty('--dev-bg-dark');
    }
  }, [profileInfo]);

// Detect system dark mode via native API (iOS) or Android bridge
  useEffect(() => {
    const checkDarkMode = async () => {
      try {
        const nativeDark = await invoke<boolean>("is_dark_mode");
        setIsDark(nativeDark);
      } catch (error) {
        // Check Android-injected global (set by MainActivity.kt)
        if (typeof (window as any).__ANDROID_DARK_MODE__ === "boolean") {
          setIsDark((window as any).__ANDROID_DARK_MODE__);
        } else {
          // Fallback to JS media query
          const jsMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
          setIsDark(jsMediaQuery.matches);
        }
      }
    };

checkDarkMode();

// Listen for system theme changes via media query
    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
    const handleChange = () => checkDarkMode();
    mediaQuery.addEventListener("change", handleChange);

// Also check when app resumes from background
    const handleVisibilityChange = () => {
      if (document.visibilityState === "visible") {
        checkDarkMode();
      }
    };
    document.addEventListener("visibilitychange", handleVisibilityChange);

return () => {
      mediaQuery.removeEventListener("change", handleChange);
      document.removeEventListener("visibilitychange", handleVisibilityChange);
    };
  }, []);

// Apply dark class to body
  useEffect(() => {
    document.body.classList.toggle("dark", isDark);
  }, [isDark]);

// Load data on mount and when app returns to foreground
  useEffect(() => {
    const loadData = () => {
      loadSavedUrls();
      loadSavedTexts();
      loadSavedTagsets();
      loadSavedImages();
      loadAllTags();
    };

loadData();
    loadWebhookUrl();
    loadWebhookApiKey();
    loadAutoSync();
    loadSyncInterval();
    loadLastSync();
    loadSyncStatus();
    loadProfileInfo();
    loadArchiveTag();
    loadTodoTags();
    loadReadingTags();
    loadOfflineTag();
    loadOfflineStorageSize();
    tryAutoSync();

// Reload when app comes back to foreground (to pick up items from share extension)
    const handleVisibilityChange = () => {
      if (document.visibilityState === "visible") {
        loadData();
        tryAutoSync();
      }
    };
    document.addEventListener("visibilitychange", handleVisibilityChange);

return () => {
      document.removeEventListener("visibilitychange", handleVisibilityChange);
    };
  }, []);

// Listen for webview navigation events to record visits
  useEffect(() => {
    let unlisten: (() => void) | undefined;

setupListener();

return () => {
      if (unlisten) unlisten();
    };
  }, []);

// Bridge for native share intents (Android ACTION_SEND). MainActivity appends each
  // ACTION_SEND payload to a file on disk; we drain it via the pop_pending_shares
  // tauri command on mount and on tauri://focus. File-based queue survives cold-launch
  // and avoids JS-injection / webview-load timing races.
  useEffect(() => {
    const handleIncoming = async (text: string) => {
      const trimmed = text.trim();
      if (!trimmed) return;
      const isUrl = trimmed.startsWith("http://") || trimmed.startsWith("https://");
      try {
        if (isUrl) {
          await invoke("save_url", { url: trimmed, tags: [] });
          await loadSavedUrls();
          showToast("Saved page from share");
        } else {
          await invoke("save_text", { content: trimmed, tags: [] });
          await loadSavedTexts();
          showToast("Saved note from share");
        }
        await loadAllTags();
      } catch (error) {
        console.error("Failed to save shared content:", error);
        showToast("Failed to save shared content", "error");
      }
    };

drain();

let unlisten: (() => void) | undefined;
    listen("tauri://focus", () => { drain(); }).then((un) => { unlisten = un; });

return () => {
      if (unlisten) unlisten();
    };
  }, []);

// Reset empty expanded input when app returns to foreground; flush draft on hide
  useEffect(() => {
    const handleVisibilityChange = () => {
      if (document.visibilityState === "visible") {
        // If input is expanded but empty, collapse it
        if (addInputExpanded && !addInputText.trim() && addInputTags.size === 0) {
          setAddInputExpanded(false);
        }
      } else {
        // Belt-and-suspenders: flush draft to localStorage when backgrounded
        if (addInputExpanded) {
          const hasContent = addInputText || addInputTags.size > 0 || addInputNewTag;
          if (hasContent) {
            localStorage.setItem(QUICK_ADD_DRAFT_KEY, JSON.stringify({ text: addInputText, tags: Array.from(addInputTags), newTag: addInputNewTag }));
          }
        }
      }
    };
    document.addEventListener("visibilitychange", handleVisibilityChange);
    return () => {
      document.removeEventListener("visibilitychange", handleVisibilityChange);
    };
  }, [addInputExpanded, addInputText, addInputTags, addInputNewTag]);

const quitApp = async () => {
    try {
      await invoke("quit_app");
    } catch (error) {
      console.error("Failed to quit:", error);
    }
  };

// Bidirectional sync: pull then push
  const syncAll = async () => {
    if (!webhookUrl) {
      showToast("Please configure server URL first", "error");
      return;
    }

setIsSyncing(true);
    showToast("Syncing...");

try {
      const result = await invoke<BidirectionalSyncResult>("sync_all");
      const msg = `Synced: ${result.pulled} pulled, ${result.pushed} pushed${result.conflicts > 0 ? `, ${result.conflicts} conflicts` : ''}`;
      showToast(msg);
      setSyncMessage(msg);
      // Reload data to show new items from server
      loadSavedUrls();
      loadSavedTexts();
      loadSavedTagsets();
      loadSavedImages();
      loadAllTags();
      setTimeout(() => setSyncMessage(null), 4000);
    } catch (error) {
      console.error("Failed to sync:", error);
      const errorMsg = `Sync failed: ${error}`;
      showToast(errorMsg, "error");
      setSyncMessage(errorMsg);
      setTimeout(() => setSyncMessage(null), 5000);
    } finally {
      setIsSyncing(false);
      // Always refresh sync status (pending count, last sync time) after sync attempt
      await loadSyncStatus();
    }
  };

// Pull only from server
  const pullFromServer = async () => {
    if (!webhookUrl) {
      setSyncMessage("Please save a server URL first");
      setTimeout(() => setSyncMessage(null), 3000);
      return;
    }

setIsSyncing(true);
    setSyncMessage(null);

try {
      const result = await invoke<BidirectionalSyncResult>("pull_from_server");
      const msg = `Pulled ${result.pulled} items${result.conflicts > 0 ? `, ${result.conflicts} conflicts` : ''}`;
      setSyncMessage(msg);
      await loadSyncStatus();
      // Reload data to show new items from server
      loadSavedUrls();
      loadSavedTexts();
      loadSavedTagsets();
      loadSavedImages();
      loadAllTags();
      setTimeout(() => setSyncMessage(null), 4000);
    } catch (error) {
      console.error("Failed to pull:", error);
      setSyncMessage(`Pull failed: ${error}`);
      setTimeout(() => setSyncMessage(null), 5000);
    } finally {
      setIsSyncing(false);
    }
  };

// Push only to server
  const pushToServer = async () => {
    if (!webhookUrl) {
      setSyncMessage("Please save a server URL first");
      setTimeout(() => setSyncMessage(null), 3000);
      return;
    }

setIsSyncing(true);
    setSyncMessage(null);

try {
      const result = await invoke<BidirectionalSyncResult>("push_to_server");
      setSyncMessage(`Pushed ${result.pushed} items`);
      await loadSyncStatus();
      setTimeout(() => setSyncMessage(null), 4000);
    } catch (error) {
      console.error("Failed to push:", error);
      setSyncMessage(`Push failed: ${error}`);
      setTimeout(() => setSyncMessage(null), 5000);
    } finally {
      setIsSyncing(false);
    }
  };

// NOTE: loadSavedUrls/Texts/Tagsets/Images are retained ONLY to populate the
  // header filter COUNTS (savedUrls.length etc.) and the totalCount empty-state
  // distinction. They no longer feed the rendered list — that comes paged from
  // the store via query_items. They run on mount/foreground (not per-keystroke),
  // so they no longer cause typing lag. Offline-content status is now owned by
  // the store-driven effect (which covers loadMore pages too), so loadSavedUrls
  // no longer touches offlineContentIds (single source of truth).
  const loadSavedUrls = async () => {
    try {
      const urls = await invoke<SavedUrl[]>("get_saved_urls");
      setSavedUrls(urls);
    } catch (error) {
      console.error("Failed to load saved URLs:", error);
    }
    // Every post-mutation refresh path calls a loadSaved* fn; piggy-back a
    // coalesced store reload so the paged list reflects the change. Coalescing
    // collapses the 4 calls made together (mount/foreground/sync) into 1 fetch.
    storeActions.reloadCoalesced();
  };

// Dirty checking helpers
  const hasUrlChanges = (): boolean => {
    if (!originalEditValues) return false;
    return editingUrlValue !== originalEditValues.url || JSON.stringify(Array.from(editingTags).sort()) !== JSON.stringify(originalEditValues.tags);
  };
  const hasTextChanges = (): boolean => {
    if (!originalEditValues) return false;
    return editingTextContent !== originalEditValues.content || JSON.stringify(Array.from(editingTextTags).sort()) !== JSON.stringify(originalEditValues.tags);
  };
  const hasTagsetChanges = (): boolean => {
    if (!originalEditValues) return false;
    return JSON.stringify(Array.from(editingTagsetTags).sort()) !== JSON.stringify(originalEditValues.tags);
  };
  const hasImageChanges = (): boolean => {
    if (!originalEditValues) return false;
    return editingImageContent !== (originalEditValues.content ?? "") || JSON.stringify(Array.from(editingImageTags).sort()) !== JSON.stringify(originalEditValues.tags);
  };

const startEditing = async (item: SavedUrl) => {
    keyboardPrimerRef.current?.focus();
    setEditingUrlId(item.id);
    setEditingUrlValue(item.url);
    setEditingTags(new Set(item.tags));
    setNewTagInput("");
    setOriginalEditValues({ url: item.url, tags: [...item.tags].sort() });

// Fetch domain-boosted tags for this URL
    try {
      const tags = await invoke<TagStats[]>("get_tags_by_frecency_for_url", { url: item.url });
      setEditingUrlTags(tags);
    } catch (error) {
      console.error("Failed to load domain-boosted tags:", error);
      setEditingUrlTags(allTags); // Fallback to regular tags
    }
  };

const cancelEditing = () => {
    setEditingUrlId(null);
    setEditingUrlValue("");
    setEditingTags(new Set());
    setEditingUrlTags([]);
    setNewTagInput("");
    setOriginalEditValues(null);
  };

const requestCancelEditing = () => {
    if (hasUrlChanges()) setPendingDiscard({ type: "page" });
    else cancelEditing();
  };

const addNewTag = () => {
    const newTags = new Set(editingTags);
    const parts = newTagInput.split(",");
    let added = false;

for (const part of parts) {
      const trimmed = part.trim().toLowerCase();
      if (trimmed && !newTags.has(trimmed)) {
        newTags.add(trimmed);
        added = true;
      }
    }

if (added) {
      setEditingTags(newTags);
    }
    setNewTagInput("");
  };

const saveChanges = async () => {
    if (!editingUrlId) return;

const finalTags = new Set(editingTags);
    if (newTagInput.trim()) {
      for (const tag of newTagInput.split(",").map(t => t.trim().toLowerCase()).filter(t => t.length > 0)) {
        finalTags.add(tag);
      }
      setNewTagInput("");
    }

try {
      await invoke("update_url", { id: editingUrlId, url: editingUrlValue, tags: Array.from(finalTags) });
      await loadSavedUrls();
      await loadAllTags();
      cancelEditing();
      showToast("Page saved");
    } catch (error) {
      console.error("[Frontend] Failed to update URL:", error);
      showToast("Failed to save page", "error");
    }
  };

// Unified add input functions
  const toggleAddInputTag = (tagName: string) => {
    console.log("[toggleAddInputTag] toggling tag:", tagName);
    const newTags = new Set(addInputTags);
    if (newTags.has(tagName)) {
      newTags.delete(tagName);
    } else {
      newTags.add(tagName);
    }
    console.log("[toggleAddInputTag] new tags:", Array.from(newTags));
    setAddInputTags(newTags);
  };

const resetAddInput = () => {
    setAddInputText("");
    setAddInputTags(new Set());
    setAddInputExpanded(false);
    setAddInputNewTag("");
    localStorage.removeItem(QUICK_ADD_DRAFT_KEY);
  };

// Camera functions
  const openCamera = () => {
    cameraInputRef.current?.click();
  };

const handleCameraCapture = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;

const reader = new FileReader();
    reader.onload = (event) => {
      const dataUrl = event.target?.result as string;
      setCapturedImage(dataUrl);
      setCapturedImageTags(new Set());
      setCapturedImageTagInput("");
    };
    reader.readAsDataURL(file);

// Reset input so same file can be selected again
    e.target.value = "";
  };

const cancelCapturedImage = () => {
    setCapturedImage(null);
    setCapturedImageTags(new Set());
    setCapturedImageTagInput("");
  };

const saveCapturedImage = async () => {
    if (!capturedImage) return;

// Include any text in the input field
    const finalTags = new Set(capturedImageTags);
    if (capturedImageTagInput.trim()) {
      const parts = capturedImageTagInput.split(",");
      for (const part of parts) {
        const trimmed = part.trim().toLowerCase();
        if (trimmed) {
          finalTags.add(trimmed);
        }
      }
    }

try {
      // Extract base64 data from data URL
      const base64Data = capturedImage.split(",")[1];
      const mimeType = capturedImage.split(";")[0].split(":")[1];

await invoke("save_captured_image", {
        imageData: base64Data,
        mimeType,
        tags: Array.from(finalTags),
      });

cancelCapturedImage();
      await loadSavedImages();
      await loadAllTags();
    } catch (error) {
      console.error("Failed to save captured image:", error);
    }
  };

const saveAddInput = async () => {
    const text = addInputText.trim();

// Include any text in the new tag field
    const finalTags = new Set(addInputTags);
    console.log("[saveAddInput] addInputTags:", Array.from(addInputTags));
    if (addInputNewTag.trim()) {
      const parts = addInputNewTag.split(",");
      for (const part of parts) {
        const trimmed = part.trim().toLowerCase();
        if (trimmed) {
          finalTags.add(trimmed);
        }
      }
    }
    const tags = Array.from(finalTags);
    console.log("[saveAddInput] final tags to save:", tags);

// Detect type based on content
    const isUrl = text.startsWith("http://") || text.startsWith("https://");

if (isUrl) {
      // Save as URL
      try {
        await invoke("save_url", { url: text, tags });
        resetAddInput();
        await loadSavedUrls();
        await loadAllTags();
        showToast("Page saved");
      } catch (error) {
        console.error("Failed to save URL:", error);
        showToast("Failed to save page", "error");
      }
    } else if (text) {
      // Save as text (note)
      try {
        console.log("[saveAddInput] Saving text with tags:", { content: text, tags });
        await invoke("save_text", { content: text, tags });
        resetAddInput();
        await loadSavedTexts();
        await loadAllTags();
        showToast("Note saved");
      } catch (error) {
        console.error("Failed to save text:", error);
        showToast("Failed to save note", "error");
      }
    } else if (tags.length > 0) {
      // Save as tagset (tags only, no text)
      try {
        await invoke("save_tagset", { tags });
        resetAddInput();
        await loadSavedTagsets();
        await loadAllTags();
        showToast("Tags saved");
      } catch (error) {
        console.error("Failed to save tagset:", error);
        showToast("Failed to save tags", "error");
      }
    }
  };

// Detect what type the input would create
  const getAddInputType = (): "url" | "text" | "tagset" | null => {
    const text = addInputText.trim();
    if (text.startsWith("http://") || text.startsWith("https://")) return "url";
    if (text) return "text";
    if (addInputTags.size > 0) return "tagset";
    return null;
  };

const startEditingText = (item: SavedText) => {
    keyboardPrimerRef.current?.focus();
    setEditingTextId(item.id);
    setEditingTextContent(item.content);
    const existingTags = item.tags.length > 0 ? item.tags : extractHashtags(item.content);
    setEditingTextTags(new Set(existingTags));
    setEditingTextTagInput("");
    setOriginalEditValues({ content: item.content, tags: [...existingTags].sort() });
    setEditorReaderMode(false);
  };

const cancelEditingText = () => {
    setEditingTextId(null);
    setEditingTextContent("");
    setEditingTextTags(new Set());
    setEditingTextTagInput("");
    setOriginalEditValues(null);
    setEditorReaderMode(false);
  };

const requestCancelEditingText = () => {
    if (hasTextChanges()) setPendingDiscard({ type: "text" });
    else cancelEditingText();
  };

// Keep ref in sync so debounced callbacks always read latest tags
  useEffect(() => {
    editingTextTagsRef.current = editingTextTags;
  }, [editingTextTags]);

// Auto-save timer ref
  const autoSaveTimerRef = useRef<NodeJS.Timeout | null>(null);

// Debounced auto-save for text editing (saves silently without closing)
  const scheduleAutoSave = useCallback((content: string) => {
    if (!editingTextId || !originalEditValues) return;

// Clear any pending auto-save
    if (autoSaveTimerRef.current) {
      clearTimeout(autoSaveTimerRef.current);
    }

// Only auto-save if content changed from original
    if (content.trim() === originalEditValues.content) return;

autoSaveTimerRef.current = setTimeout(async () => {
      try {
        const currentTags = Array.from(editingTextTagsRef.current);
        await invoke("update_text", { id: editingTextId, content: content.trim(), tags: currentTags });
        // Update original values so we know what's saved
        setOriginalEditValues(prev => prev ? { ...prev, content: content.trim(), tags: [...currentTags].sort() } : null);
        await loadSavedTexts();
      } catch (error) {
        console.error("Auto-save failed:", error);
      }
    }, 500);
  }, [editingTextId, originalEditValues]);

// Auto-save ref for tag-only saves (needs stable identity across renders)
  const tagAutoSaveTimerRef = useRef<NodeJS.Timeout | null>(null);

// Debounced auto-save triggered by tag changes (fires even when content is unchanged)
  const scheduleTagAutoSave = useCallback((newTags: Set<string>) => {
    if (!editingTextId || !originalEditValues) return;

if (tagAutoSaveTimerRef.current) {
      clearTimeout(tagAutoSaveTimerRef.current);
    }

tagAutoSaveTimerRef.current = setTimeout(async () => {
      try {
        const tagsArray = Array.from(newTags);
        await invoke("update_text", { id: editingTextId, content: editingTextContent.trim(), tags: tagsArray });
        setOriginalEditValues(prev => prev ? { ...prev, tags: [...tagsArray].sort() } : null);
        await loadSavedTexts();
      } catch (error) {
        console.error("Tag auto-save failed:", error);
      }
    }, 500);
  }, [editingTextId, originalEditValues, editingTextContent]);

// Clear auto-save timers on unmount or when editing ends
  useEffect(() => {
    return () => {
      if (autoSaveTimerRef.current) {
        clearTimeout(autoSaveTimerRef.current);
      }
      if (tagAutoSaveTimerRef.current) {
        clearTimeout(tagAutoSaveTimerRef.current);
      }
    };
  }, [editingTextId]);

const saveTextChanges = async () => {
    if (!editingTextId) return;

// Clear any pending auto-save timers
    if (autoSaveTimerRef.current) {
      clearTimeout(autoSaveTimerRef.current);
    }
    if (tagAutoSaveTimerRef.current) {
      clearTimeout(tagAutoSaveTimerRef.current);
    }

const finalTags = new Set(editingTextTags);
    if (editingTextTagInput.trim()) {
      for (const tag of editingTextTagInput.split(",").map(t => t.trim().toLowerCase()).filter(t => t.length > 0)) {
        finalTags.add(tag);
      }
    }

try {
      await invoke("update_text", { id: editingTextId, content: editingTextContent.trim(), tags: Array.from(finalTags) });
      await loadSavedTexts();
      await loadAllTags();
      cancelEditingText();
      showToast("Note saved");
    } catch (error) {
      console.error("Failed to update text:", error);
      showToast("Failed to save note", "error");
    }
  };

// Tagset editing functions
  const startEditingTagset = (item: SavedTagset) => {
    keyboardPrimerRef.current?.focus();
    setEditingTagsetId(item.id);
    setEditingTagsetTags(new Set(item.tags));
    setEditingTagsetInput("");
    setOriginalEditValues({ tags: [...item.tags].sort() });
  };

const cancelEditingTagset = () => {
    setEditingTagsetId(null);
    setEditingTagsetTags(new Set());
    setEditingTagsetInput("");
    setOriginalEditValues(null);
  };

const requestCancelEditingTagset = () => {
    if (hasTagsetChanges()) setPendingDiscard({ type: "tagset" });
    else cancelEditingTagset();
  };

const saveTagsetChanges = async () => {
    if (!editingTagsetId) return;

const finalTags = new Set(editingTagsetTags);
    if (editingTagsetInput.trim()) {
      for (const tag of editingTagsetInput.split(",").map(t => t.trim().toLowerCase()).filter(t => t.length > 0)) {
        finalTags.add(tag);
      }
    }

if (finalTags.size === 0) {
      showToast("At least one tag is required", "error");
      return;
    }

try {
      await invoke("update_tagset", { id: editingTagsetId, tags: Array.from(finalTags) });
      await loadSavedTagsets();
      await loadAllTags();
      cancelEditingTagset();
      showToast("Tags saved");
    } catch (error) {
      console.error("Failed to update tagset:", error);
      showToast("Failed to save tags", "error");
    }
  };

// Image editing functions
  const startEditingImage = (item: SavedImage) => {
    keyboardPrimerRef.current?.focus();
    setEditingImageId(item.id);
    setEditingImageContent(item.content || "");
    setEditingImageTags(new Set(item.tags));
    setEditingImageTagInput("");
    setOriginalEditValues({ content: item.content || "", tags: [...item.tags].sort() });
  };

const cancelEditingImage = () => {
    setEditingImageId(null);
    setEditingImageContent("");
    setEditingImageTags(new Set());
    setEditingImageTagInput("");
    setOriginalEditValues(null);
  };

const requestCancelEditingImage = () => {
    if (hasImageChanges()) setPendingDiscard({ type: "image" });
    else cancelEditingImage();
  };

const saveImageChanges = async () => {
    if (!editingImageId) return;

// Include any text in the input field
    const finalTags = new Set(editingImageTags);
    if (editingImageTagInput.trim()) {
      const parts = editingImageTagInput.split(",");
      for (const part of parts) {
        const trimmed = part.trim().toLowerCase();
        if (trimmed) {
          finalTags.add(trimmed);
        }
      }
    }

try {
      await invoke("update_image_tags", {
        id: editingImageId,
        tags: Array.from(finalTags),
      });
      await loadSavedImages();
      await loadAllTags();
      cancelEditingImage();
      showToast("Image saved");
    } catch (error) {
      console.error("Failed to update image:", error);
      showToast("Failed to save image", "error");
    }
  };

// Helper to extract hashtags from text for display
  const extractHashtags = (content: string): string[] => {
    const matches = content.match(/#(\w+)/g);
    return matches ? matches.map((m) => m.slice(1).toLowerCase()) : [];
  };

// Set filter to show only a specific type
  const selectFilter = (type: ItemType) => {
    // If already showing this type, go back to all
    if (activeFilter === type) {
      setActiveFilter("all");
    } else {
      setActiveFilter(type);
    }
  };

// Scroll to top of the list
  const scrollToTop = () => {
    mainRef.current?.scrollTo({ top: 0, behavior: "smooth" });
  };

// Periodic auto-sync: runs at configured interval, pauses when backgrounded, syncs on foreground return
  // When syncIntervalMinutes is 0, periodic sync is disabled entirely.
  useEffect(() => {
    if (!webhookUrl || syncIntervalMinutes === 0) return;

const startInterval = () => {
      if (autoSyncIntervalRef.current) clearInterval(autoSyncIntervalRef.current);
      autoSyncIntervalRef.current = setInterval(() => {
        if (!isSyncing) syncAll();
      }, syncIntervalMs);
    };

startInterval();
    document.addEventListener('visibilitychange', handleVisibility);

return () => {
      if (autoSyncIntervalRef.current) clearInterval(autoSyncIntervalRef.current);
      document.removeEventListener('visibilitychange', handleVisibility);
    };
  }, [webhookUrl, isSyncing, syncIntervalMs, syncIntervalMinutes]);

// Reset to show all types, clear search/filters, and scroll to top
  const showAll = () => {
    setActiveFilter("all");
    setSearchText("");
    setSelectedFilterTags(new Set());
    scrollToTop();
  };

// Tag filter functions
  const toggleFilterTag = (tagName: string) => {
    const newTags = new Set(selectedFilterTags);
    if (newTags.has(tagName)) {
      newTags.delete(tagName);
    } else {
      newTags.add(tagName);
    }
    setSelectedFilterTags(newTags);
  };

// Deferred search value: decouples expensive list/tag filtering from the keystroke.
  // The controlled <input> still uses searchText so typing echoes instantly; the
  // filter memos below read deferredSearch so they don't recompute on every keystroke.
  const deferredSearch = useDeferredValue(searchText);

// Filter tags by search text (memoized so it isn't recomputed twice per render)
  // NOTE: this filters the TAG CHIPS list locally — cheap, operates on allTags,
  // not on items. The item list itself is now filtered/sorted/paginated in SQL
  // via the store (see below). Kept intact.
  const filteredTags = useMemo(() => {
    if (!deferredSearch.trim()) return allTags;
    const search = deferredSearch.toLowerCase();
    return allTags.filter(tag => tag.name.toLowerCase().includes(search));
  }, [allTags, deferredSearch]);

// ---------------------------------------------------------------------------
  // Store wiring: the unified item list now comes paged from SQL.
  //
  // activeFilter / searchText / sortOrder / selectedFilterTags / archiveTag /
  // offlineTag remain local useState (they drive persistence effects, settings
  // UI, filteredTags, header counts, etc). We MIRROR them into the store, which
  // owns list.items + query/loadMore. Mirroring (not moving) avoids divergence
  // risk across the ~4600-line component while keeping a single fetch path.
  // ---------------------------------------------------------------------------
  const unifiedItems = useStore(s => s.list.items) as unknown as UnifiedItem[];
  const listHasMore = useStore(s => s.list.hasMore);
  const listLoading = useStore(s => s.list.loading);

// Mirror search → store (debounced reload lives in the store action).
  useEffect(() => {
    storeActions.setSearch(searchText);
  }, [searchText]);

// Mirror itemType (activeFilter) → store (immediate reload).
  useEffect(() => {
    storeActions.setItemType(activeFilter);
  }, [activeFilter]);

// Mirror sort order → store (immediate reload).
  useEffect(() => {
    storeActions.setSort(sortOrder);
  }, [sortOrder]);

// Mirror selected filter tags → store (immediate reload).
  useEffect(() => {
    storeActions.setSelectedTags(Array.from(selectedFilterTags));
  }, [selectedFilterTags]);

// Mirror config (archiveTag/offlineTag) → store; reloads if archiveTag changed.
  useEffect(() => {
    storeActions.setConfig({ archiveTag, offlineTag });
  }, [archiveTag, offlineTag]);

// After each list change (reload or loadMore appends), refresh offline-content
  // status for newly-present url items tagged with the offline tag. This
  // preserves the side-effect that loadSavedUrls() used to perform.
  useEffect(() => {
    if (!offlineTag) return;
    const offlineItemIds = unifiedItems
      .filter(it => it.type === "page" && it.tags.includes(offlineTag))
      .map(it => it.id);
    if (offlineItemIds.length === 0) return;
    let cancelled = false;
    (async () => {
      try {
        const idsWithContent = await invoke<string[]>("check_offline_content_batch", { itemIds: offlineItemIds });
        if (cancelled) return;
        setOfflineContentIds(prev => {
          const next = new Set(prev);
          for (const id of idsWithContent) next.add(id);
          return next;
        });
      } catch (err) {
        console.error("Failed to check offline content status:", err);
      }
    })();
    return () => { cancelled = true; };
  }, [unifiedItems, offlineTag]);

// Fetch-on-scroll: observe a sentinel at the end of the list.
  const loadMoreSentinelRef = useRef<HTMLDivElement>(null);
  useEffect(() => {
    const node = loadMoreSentinelRef.current;
    if (!node) return;
    const observer = new IntersectionObserver((entries) => {
      if (entries.some(e => e.isIntersecting)) {
        storeActions.loadMore();
      }
    }, { rootMargin: "400px" });
    observer.observe(node);
    return () => observer.disconnect();
  }, [listHasMore]);

// Initial page load on mount.
  useEffect(() => {
    storeActions.reload();
  }, []);

// (The old getUnifiedItems client-side filter/sort memo was removed — the
  // backend `query_items` command now does filtering/sorting/pagination in SQL.
  // `unifiedItems` is defined above from the store's paged list.)

// Check if any edit mode is active
  const isEditing = editingUrlId || editingTextId || editingTagsetId || editingImageId;

// Prevent iOS viewport scrolling when editor is open
  useEffect(() => {
    if (isEditing || addInputExpanded) {
      document.body.classList.add('editor-open');
    } else {
      document.body.classList.remove('editor-open');
    }
    return () => {
      document.body.classList.remove('editor-open');
    };
  }, [isEditing, addInputExpanded]);

// Render edit modal content
  const renderEditModal = () => {
    if (!isEditing) return null;

// URL editing
    if (editingUrlId) {
      const item = savedUrls.find(u => u.id === editingUrlId);
      if (!item) return null;

const urlHasOffline = offlineTag && item.tags.includes(offlineTag);

return (
        <EditorLayout
          onDismiss={requestCancelEditing}
          keyboardHeight={keyboardHeight}
          tags={{
            selectedTags: editingTags,
            availableTags: editingUrlTags,
            tagInput: newTagInput,
            onTagInputChange: setNewTagInput,
            onToggleTag: toggleTag,
            onAddTag: addNewTag,
          }}
          buttons={{
            onSave: saveChanges,
            onCancel: requestCancelEditing,
            onDelete: () => requestDelete(editingUrlId, "page"),
          }}
          headerActions={<>
            <button className="card-action-btn" onClick={(e) => openInBrowser(item.url, item.id, e)} title="Open in Safari">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
                <polyline points="15 3 21 3 21 9"></polyline>
                <line x1="10" y1="14" x2="21" y2="3"></line>
              </svg>
            </button>
            <button className="card-action-btn" onClick={(e) => openInWebview(item.url, item.id, e)} title="Open in app">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                <line x1="3" y1="9" x2="21" y2="9"></line>
              </svg>
            </button>
            {urlHasOffline && (
              offlineContentIds.has(item.id) ? (
                <button className="card-action-btn offline-ready" onClick={(e) => openOfflineReader(item.id, e)} title="Read offline">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                    <circle cx="12" cy="12" r="3" fill="currentColor"></circle>
                  </svg>
                </button>
              ) : (
                <button
                  className={`card-action-btn offline-pending${offlineFetchingIds.has(item.id) ? ' offline-fetching' : ''}`}
                  onClick={async (e) => {
                    e.stopPropagation();
                    if (offlineFetchingIds.has(item.id)) return;
                    setOfflineFetchingIds(prev => new Set(prev).add(item.id));
                    try {
                      await invoke("fetch_offline_content", { itemId: item.id, url: item.url });
                      setOfflineContentIds(prev => new Set(prev).add(item.id));
                    } catch (err) {
                      console.error("[App] Failed to fetch offline content for", item.id, err);
                    } finally {
                      setOfflineFetchingIds(prev => { const next = new Set(prev); next.delete(item.id); return next; });
                    }
                  }}
                  title="Download for offline reading"
                >
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                    <circle cx="12" cy="12" r="3"></circle>
                  </svg>
                </button>
              )
            )}
            <button className="card-action-btn editor-header-delete" onClick={() => requestDelete(editingUrlId, "page")} title="Delete">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <line x1="18" y1="6" x2="6" y2="18"></line>
                <line x1="6" y1="6" x2="18" y2="18"></line>
              </svg>
            </button>
          </>}
        >
          <div className="editor-url-content-wrapper">
            <div className="input-with-clear editor-url-wrapper">
              <input
                type="url"
                className="editor-url-input"
                value={editingUrlValue}
                onChange={(e) => setEditingUrlValue(e.target.value)}
                onFocus={() => {
                  // Counter iOS viewport scroll on focus
                  requestAnimationFrame(() => window.scrollTo(0, 0));
                }}
                placeholder="URL"
                autoCapitalize="none"
                autoCorrect="off"
              />
              <ClearButton show={editingUrlValue.length > 0} onClear={() => setEditingUrlValue('')} />
            </div>
          </div>
        </EditorLayout>
      );
    }

// Text/Note editing
    if (editingTextId) {
      const textUrlMatch = editingTextContent.match(/https?:\/\/[^\s<>"{}|\\^`[\]]+/);
      const textItem = savedTexts.find(t => t.id === editingTextId);

return (
        <EditorLayout
          onDismiss={requestCancelEditingText}
          keyboardHeight={keyboardHeight}
          tags={{
            selectedTags: editingTextTags,
            availableTags: allTags,
            tagInput: editingTextTagInput,
            onTagInputChange: setEditingTextTagInput,
            onToggleTag: toggleEditingTextTag,
            onAddTag: addEditingTextTag,
          }}
          buttons={{
            onSave: saveTextChanges,
            onCancel: requestCancelEditingText,
            onDelete: () => requestDelete(editingTextId, "text"),
            saveLabel: "Done",
          }}
          headerActions={<>
            {(editorReaderMode || /^#{1,6} |(\*\*|__).+(\*\*|__)|`[^`]+`|^\s*[-*+] |^\s*\d+\. |^\s*> |!\[|\[.+\]$.+$|^---$|^\*\*\*$/m.test(editingTextContent)) && (
            <button
              className={`card-action-btn ${editorReaderMode ? 'reader-active' : ''}`}
              onClick={() => setEditorReaderMode(!editorReaderMode)}
              title={editorReaderMode ? "Edit" : "Preview"}
            >
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                <circle cx="12" cy="12" r="3"></circle>
              </svg>
            </button>
            )}
            {textUrlMatch && (
              <button className="card-action-btn" onClick={(e) => openInBrowser(textUrlMatch[0], editingTextId, e)} title="Open in Safari">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
                  <polyline points="15 3 21 3 21 9"></polyline>
                  <line x1="10" y1="14" x2="21" y2="3"></line>
                </svg>
              </button>
            )}
            {textUrlMatch && textItem && (
              <button className="card-action-btn" onClick={(e) => openInWebview(textUrlMatch[0], editingTextId, e)} title="Open in app">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                  <line x1="3" y1="9" x2="21" y2="9"></line>
                </svg>
              </button>
            )}
            {!editorReaderMode && (
              <>
                <button className="card-action-btn" type="button" onClick={() => textEditorRef.current?.undo()} disabled={!textEditorRef.current?.canUndo} title="Undo">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <polyline points="1 4 1 10 7 10"></polyline>
                    <path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"></path>
                  </svg>
                </button>
                <button className="card-action-btn" type="button" onClick={() => textEditorRef.current?.redo()} disabled={!textEditorRef.current?.canRedo} title="Redo">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <polyline points="23 4 23 10 17 10"></polyline>
                    <path d="M20.49 15a9 9 0 1 1-2.13-9.36L23 10"></path>
                  </svg>
                </button>
              </>
            )}
            <button className="card-action-btn editor-header-delete" onClick={() => requestDelete(editingTextId, "text")} title="Delete">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <line x1="18" y1="6" x2="6" y2="18"></line>
                <line x1="6" y1="6" x2="18" y2="18"></line>
              </svg>
            </button>
          </>}
        >
          {editorReaderMode ? (
            <div className="note-reader-content" dangerouslySetInnerHTML={{ __html: (() => {
                const preprocessed = preProcessCheckboxes(editingTextContent);
                const rendered = preprocessed.split(/\n\n+/).map(block => {
                  const html = snarkdown(block.trim());
                  return /^<(h[1-6]|ul|ol|pre|blockquote|table|hr)/i.test(html) ? html : `<p>${html}</p>`;
                }).join('');
                return postProcessCheckboxes(rendered || `<p>${editingTextContent}</p>`);
              })() }} />
          ) : (
            <ResizableInput
              ref={textEditorRef}
              value={editingTextContent}
              onChange={setEditingTextContent}
              placeholder="Note text..."
              autoFocus
              showClearButton={false}
              onAutoSave={scheduleAutoSave}
              showUndoRedo={false}
            />
          )}
        </EditorLayout>
      );
    }

// Tagset editing
    if (editingTagsetId) {
      return (
        <EditorLayout
          onDismiss={requestCancelEditingTagset}
          keyboardHeight={keyboardHeight}
          tags={{
            selectedTags: editingTagsetTags,
            availableTags: allTags,
            tagInput: editingTagsetInput,
            onTagInputChange: setEditingTagsetInput,
            onToggleTag: toggleEditingTagsetTag,
            onAddTag: addEditingTagsetTag,
          }}
          buttons={{
            onSave: saveTagsetChanges,
            onCancel: requestCancelEditingTagset,
            onDelete: () => requestDelete(editingTagsetId, "tagset"),
          }}
          headerActions={<>
            <button className="card-action-btn editor-header-delete" onClick={() => requestDelete(editingTagsetId, "tagset")} title="Delete">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <line x1="18" y1="6" x2="6" y2="18"></line>
                <line x1="6" y1="6" x2="18" y2="18"></line>
              </svg>
            </button>
          </>}
        />
      );
    }

// Image editing
    if (editingImageId) {
      const item = savedImages.find(i => i.id === editingImageId);
      if (!item) return null;
      const metadata = item.metadata as Record<string, unknown> | undefined;
      const title = metadata?.title as string | undefined;
      return (
        <EditorLayout
          onDismiss={requestCancelEditingImage}
          keyboardHeight={keyboardHeight}
          tags={{
            selectedTags: editingImageTags,
            availableTags: allTags,
            tagInput: editingImageTagInput,
            onTagInputChange: setEditingImageTagInput,
            onToggleTag: toggleEditingImageTag,
            onAddTag: addEditingImageTag,
          }}
          buttons={{
            onSave: saveImageChanges,
            onCancel: requestCancelEditingImage,
            onDelete: () => requestDelete(editingImageId, "image"),
          }}
          headerActions={<>
            <button className="card-action-btn editor-header-delete" onClick={() => requestDelete(editingImageId, "image")} title="Delete">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <line x1="18" y1="6" x2="6" y2="18"></line>
                <line x1="6" y1="6" x2="18" y2="18"></line>
              </svg>
            </button>
          </>}
        >
          <div className="editor-image-preview">
            {item.thumbnail ? (
              <img
                src={`data:image/jpeg;base64,${item.thumbnail}`}
                alt={title || "Preview"}
                className="edit-modal-image"
                style={{ cursor: "pointer" }}
                onClick={async () => {
                  const data = await invoke<string | null>("get_image_data", { id: editingImageId });
                  if (data) setFullscreenImageData(data);
                }}
              />
            ) : (
              <div className="image-placeholder">
                <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                  <circle cx="8.5" cy="8.5" r="1.5"></circle>
                  <polyline points="21 15 16 10 5 21"></polyline>
                </svg>
              </div>
            )}
          </div>
          <ResizableInput
            value={editingImageContent}
            onChange={setEditingImageContent}
            placeholder="Image description..."
            showClearButton={false}
            showUndoRedo={false}
          />
        </EditorLayout>
      );
    }

return null;
  };

// ============================================================================
  // Shared Icon Constants & Item Footer Components
  // ============================================================================

const ICON_TODAY = "!";
  const ICON_LATER = "\u{1F4A4}"; // 💤

const ICON_TODO_CHECKED = (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
      <polyline points="9 11 12 14 22 4"></polyline>
    </svg>
  );

const ICON_TODO_UNCHECKED = (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
    </svg>
  );

const ICON_READING_CHECKED = (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
      <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>
      <polyline points="9 11 12 14 22 4"></polyline>
    </svg>
  );

const ICON_READING_UNCHECKED = (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
      <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>
    </svg>
  );

const ICON_DELETE = (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <polyline points="3 6 5 6 21 6"></polyline>
      <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
    </svg>
  );

/** Todo/Done checkbox button */
  const TodoCheckbox: React.FC<{
    tags: string[];
    itemId: string;
    itemType: ItemType;
    onClick: (e: React.MouseEvent) => void;
  }> = ({ tags, onClick }) => {
    if (!tags.includes(todoTag) && !tags.includes(doneTag)) return null;
    const isDone = tags.includes(doneTag);
    return (
      <button
        className={`todo-checkbox ${isDone ? "checked" : ""}`}
        onClick={onClick}
      >
        {isDone ? ICON_TODO_CHECKED : ICON_TODO_UNCHECKED}
      </button>
    );
  };

/** Reading (readme/read) checkbox button */
  const ReadingCheckbox: React.FC<{
    tags: string[];
    onClick: (e: React.MouseEvent) => void;
  }> = ({ tags, onClick }) => {
    if (!tags.includes(readmeTag) && !tags.includes(readTag)) return null;
    const isRead = tags.includes(readTag);
    return (
      <button
        className={`todo-checkbox reading-checkbox ${isRead ? "checked" : ""}`}
        onClick={onClick}
      >
        {isRead ? ICON_READING_CHECKED : ICON_READING_UNCHECKED}
      </button>
    );
  };

/** Today/Later toggle button */
  const TodayToggleButton: React.FC<{
    tags: string[];
    onClick: (e: React.MouseEvent) => void;
  }> = ({ tags, onClick }) => {
    if (!tags.includes(todayTag) && !tags.includes(laterTag)) return null;
    const isToday = tags.includes(todayTag);
    return (
      <button
        className="todo-checkbox today-checkbox"
        onClick={onClick}
        title={isToday ? "Today" : "Later"}
      >
        {isToday ? ICON_TODAY : ICON_LATER}
      </button>
    );
  };

/** Delete button (trash icon) */
  const DeleteButton: React.FC<{
    itemId: string;
    itemType: ItemType;
  }> = ({ itemId, itemType }) => (
    <button
      className="card-delete-btn"
      onClick={(e) => {
        e.stopPropagation();
        requestDelete(itemId, itemType);
      }}
    >
      {ICON_DELETE}
    </button>
  );

/** Card footer with tag checkboxes, tags list, and date */
  const CardFooter: React.FC<{
    tags: string[];
    itemId: string;
    itemType: ItemType;
    savedAt: string;
    showReadingCheckbox?: boolean;
  }> = ({ tags, itemId, itemType, savedAt, showReadingCheckbox = false }) => (
    <div className="card-footer">
      <TodoCheckbox
        tags={tags}
        itemId={itemId}
        itemType={itemType}
        onClick={(e) => toggleTagPair(e, itemId, itemType, tags, todoTag, doneTag)}
      />
      {showReadingCheckbox && (
        <ReadingCheckbox
          tags={tags}
          onClick={(e) => toggleTagPair(e, itemId, itemType, tags, readmeTag, readTag)}
        />
      )}
      <TodayToggleButton
        tags={tags}
        onClick={(e) => toggleTagPair(e, itemId, itemType, tags, todayTag, laterTag)}
      />
      <div className="card-tags">
        {tags.map((tag) => (
          <span key={tag} className="card-tag">{tag}</span>
        ))}
        <span className="card-date">
          {new Date(savedAt).toLocaleDateString()}
        </span>
      </div>
    </div>
  );

// Render unified item based on type
  const renderUnifiedItem = (item: UnifiedItem) => {
    switch (item.type) {
      case "page":
        return renderUrlItem({
          id: item.id,
          url: item.url!,
          tags: item.tags,
          saved_at: item.saved_at,
          metadata: item.metadata,
        });
      case "text":
        return renderTextItem({
          id: item.id,
          content: item.content!,
          tags: item.tags,
          saved_at: item.saved_at,
          metadata: item.metadata,
        });
      case "tagset":
        return renderTagsetItem({
          id: item.id,
          tags: item.tags,
          saved_at: item.saved_at,
          metadata: item.metadata,
        });
      case "image":
        return renderImageItem({
          id: item.id,
          tags: item.tags,
          saved_at: item.saved_at,
          metadata: item.metadata,
          content: item.content,
          thumbnail: item.thumbnail,
          mime_type: item.mime_type || "image/jpeg",
          width: item.width,
          height: item.height,
        });
      default:
        return null;
    }
  };

// Create inline native WKWebView via Swift FFI
  const createInlineWebview = async (url: string, itemId: string) => {
    try {
      // Measure the webview-inline div's position so the native WKWebView aligns exactly
      let topOffset = 0;
      const card = document.getElementById(`card-${itemId}`);
      const inlineDiv = card?.querySelector('.webview-inline');
      if (inlineDiv) {
        topOffset = inlineDiv.getBoundingClientRect().top;
      }
      console.log("[App] Creating inline webview at topOffset:", topOffset, "for:", url, "itemId:", itemId);
      await invoke("open_inline_webview", { url, topOffset, itemId });
      setWebviewLoaded(true);
    } catch (error) {
      console.error("[App] Failed to create inline webview:", error);
      setWebviewError(String(error));
    }
  };

const destroyInlineWebview = async () => {
    try {
      await invoke("close_inline_webview");
    } catch (error) {
      console.error("[App] Failed to close inline webview:", error);
    }
  };

const renderUrlItem = (item: SavedUrl) => {
    const title = item.metadata?.title as string | undefined;
    const isExpanded = expandedWebview?.itemId === item.id;

return (
      <div key={item.id} id={`card-${item.id}`} className={`saved-item-card ${isExpanded ? 'card-webview-expanded' : ''}`} onClick={() => !isExpanded && startEditing(item)}>
        <div className="card-header">
          {isExpanded && (
            <button className={`card-action-btn webview-back-btn ${webviewAnimated ? 'visible' : ''}`} onClick={(e) => { e.stopPropagation(); closeWebview(); }} title="Back">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
                <path d="M15 18l-6-6 6-6" />
              </svg>
            </button>
          )}
          <div className="card-type-icon">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <circle cx="12" cy="12" r="10"></circle>
              <line x1="2" y1="12" x2="22" y2="12"></line>
              <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path>
            </svg>
          </div>
          <span className="card-title">{title || item.url}</span>
          <div className="card-actions">
            <button
              className="card-action-btn"
              onClick={(e) => isExpanded ? (e.stopPropagation(), openUrl(item.url)) : openInBrowser(item.url, item.id, e)}
              title="Open in Safari"
            >
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
                <polyline points="15 3 21 3 21 9"></polyline>
                <line x1="10" y1="14" x2="21" y2="3"></line>
              </svg>
            </button>
            <button
              className="card-action-btn"
              onClick={(e) => isExpanded ? (e.stopPropagation(), closeWebview()) : openInWebview(item.url, item.id, e)}
              title={isExpanded ? "Close webview" : "Open in app"}
            >
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                <line x1="3" y1="9" x2="21" y2="9"></line>
              </svg>
            </button>
            {offlineTag && item.tags.includes(offlineTag) && !isExpanded && (
              offlineContentIds.has(item.id) ? (
                <button
                  className="card-action-btn offline-ready"
                  onClick={(e) => { console.log("[App] EYE ICON TAPPED for", item.id); openOfflineReader(item.id, e); }}
                  title="Read offline"
                >
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                    <circle cx="12" cy="12" r="3" fill="currentColor"></circle>
                  </svg>
                </button>
              ) : (
                <button
                  className={`card-action-btn offline-pending${offlineFetchingIds.has(item.id) ? ' offline-fetching' : ''}`}
                  onClick={async (e) => {
                    e.stopPropagation();
                    if (offlineFetchingIds.has(item.id)) return;
                    console.log("[App] Offline download tapped for", item.id);
                    setOfflineFetchingIds(prev => new Set(prev).add(item.id));
                    try {
                      await invoke("fetch_offline_content", { itemId: item.id, url: item.url });
                      setOfflineContentIds(prev => new Set(prev).add(item.id));
                    } catch (err) {
                      console.error("[App] Failed to fetch offline content for", item.id, err);
                    } finally {
                      setOfflineFetchingIds(prev => { const next = new Set(prev); next.delete(item.id); return next; });
                    }
                  }}
                  title="Download for offline reading"
                >
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                    <circle cx="12" cy="12" r="3"></circle>
                  </svg>
                </button>
              )
            )}
            <DeleteButton itemId={item.id} itemType="page" />
          </div>
        </div>
        {isExpanded && renderWebviewInline(expandedWebview.url)}
        <CardFooter tags={item.tags} itemId={item.id} itemType="page" savedAt={item.saved_at} showReadingCheckbox />
      </div>
    );
  };

const renderTextItem = (item: SavedText) => {
    // Use actual tags from database, not just hashtags in content
    const tags = item.tags.length > 0 ? item.tags : extractHashtags(item.content);
    // Get summary: first line or truncated content (without hashtags for display)
    const contentWithoutTags = item.content.replace(/#\w+/g, '').trim();
    const summary = contentWithoutTags.split('\n')[0].slice(0, 100) || item.content.slice(0, 100);
    // Extract first URL from content
    const urlMatch = item.content.match(/https?:\/\/[^\s<>"{}|\\^`[\]]+/);

const isExpanded = expandedWebview?.itemId === item.id;

return (
      <div key={item.id} id={`card-${item.id}`} className={`saved-item-card ${isExpanded ? 'card-webview-expanded' : ''}`} onClick={() => !isExpanded && startEditingText(item)}>
        <div className="card-header">
          {isExpanded && (
            <button className={`card-action-btn webview-back-btn ${webviewAnimated ? 'visible' : ''}`} onClick={(e) => { e.stopPropagation(); closeWebview(); }} title="Back">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
                <path d="M15 18l-6-6 6-6" />
              </svg>
            </button>
          )}
          <div className="card-type-icon">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
              <polyline points="14 2 14 8 20 8"></polyline>
              <line x1="16" y1="13" x2="8" y2="13"></line>
              <line x1="16" y1="17" x2="8" y2="17"></line>
            </svg>
          </div>
          <div className="card-title">{summary}</div>
          <div className="card-actions">
            {(textReaderMode === item.id || /^#{1,6} |(\*\*|__).+(\*\*|__)|`[^`]+`|^\s*[-*+] |^\s*\d+\. |^\s*> |!\[|\[.+\]$.+$|^---$|^\*\*\*$/m.test(item.content)) && (
            <button
              className={`card-action-btn ${textReaderMode === item.id ? 'reader-active' : ''}`}
              onClick={(e) => {
                e.stopPropagation();
                setTextReaderMode(textReaderMode === item.id ? null : item.id);
              }}
              title="Reader mode"
            >
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                <circle cx="12" cy="12" r="3"></circle>
              </svg>
            </button>
            )}
            {urlMatch && (
              <button
                className="card-action-btn"
                onClick={(e) => isExpanded ? (e.stopPropagation(), openUrl(urlMatch[0])) : openInBrowser(urlMatch[0], item.id, e)}
                title="Open in Safari"
              >
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
                  <polyline points="15 3 21 3 21 9"></polyline>
                  <line x1="10" y1="14" x2="21" y2="3"></line>
                </svg>
              </button>
            )}
            {urlMatch && (
              <button
                className="card-action-btn"
                onClick={(e) => isExpanded ? (e.stopPropagation(), closeWebview()) : openInWebview(urlMatch[0], item.id, e)}
                title={isExpanded ? "Close webview" : "Open in app"}
              >
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                  <line x1="3" y1="9" x2="21" y2="9"></line>
                </svg>
              </button>
            )}
            <DeleteButton itemId={item.id} itemType="text" />
          </div>
        </div>
        {textReaderMode === item.id && (
          <div className="note-reader-content" dangerouslySetInnerHTML={{ __html: (() => {
                const preprocessed = preProcessCheckboxes(item.content);
                const rendered = preprocessed.split(/\n\n+/).map(block => {
                  const html = snarkdown(block.trim());
                  return /^<(h[1-6]|ul|ol|pre|blockquote|table|hr)/i.test(html) ? html : `<p>${html}</p>`;
                }).join('');
                return postProcessCheckboxes(rendered || `<p>${item.content}</p>`);
              })() }} />
        )}
        {isExpanded && renderWebviewInline(expandedWebview.url)}
        <CardFooter tags={tags} itemId={item.id} itemType="text" savedAt={item.saved_at} showReadingCheckbox />
      </div>
    );
  };

const renderTagsetItem = (item: SavedTagset) => {
    return (
      <div key={item.id} className="saved-item-card" onClick={() => startEditingTagset(item)}>
        <div className="card-header">
          <div className="card-type-icon">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path>
              <line x1="7" y1="7" x2="7.01" y2="7"></line>
            </svg>
          </div>
          <div className="card-tags card-title-tags">
            {item.tags.map((tag) => (
              <span key={tag} className="card-tag">{tag}</span>
            ))}
          </div>
          <DeleteButton itemId={item.id} itemType="tagset" />
        </div>
        <div className="card-footer">
          <div className="card-tags">
            <span className="card-date">
              {new Date(item.saved_at).toLocaleDateString()}
            </span>
          </div>
        </div>
      </div>
    );
  };

// Delete confirmation functions
  const requestDelete = (id: string, type: ItemType) => {
    setPendingDelete({ id, type });
  };

const cancelDelete = () => {
    setPendingDelete(null);
  };

const confirmDelete = async () => {
    if (!pendingDelete) return;

const { id, type } = pendingDelete;
    setPendingDelete(null);

const typeLabels: Record<ItemType, string> = {
      page: "Page",
      text: "Note",
      tagset: "Tags",
      image: "Image",
    };

try {
      switch (type) {
        case "page":
          await deleteUrl(id);
          break;
        case "text":
          await deleteText(id);
          break;
        case "tagset":
          await deleteTagset(id);
          break;
        case "image":
          await deleteImage(id);
          break;
      }
      showToast(`${typeLabels[type]} deleted`);
    } catch (error) {
      console.error("Failed to delete:", error);
      showToast("Failed to delete", "error");
    }
  };

const cancelDiscard = () => {
    setPendingDiscard(null);
  };

// Generalized tag pair toggle (used for todo/done and readme/read)
  const toggleTagPair = async (e: React.MouseEvent, id: string, type: ItemType, currentTags: string[], tagA: string, tagB: string) => {
    e.stopPropagation(); // Don't trigger card click
    const hasA = currentTags.includes(tagA);
    const hasB = currentTags.includes(tagB);

let newTags: string[];
    if (hasA) {
      // tagA -> tagB
      newTags = currentTags.filter(t => t !== tagA).concat(tagB);
    } else if (hasB) {
      // tagB -> tagA
      newTags = currentTags.filter(t => t !== tagB).concat(tagA);
    } else {
      return; // Neither tag present, shouldn't happen
    }

try {
      await invoke("update_url_tags", { id, tags: newTags });
      // Reload the appropriate list
      switch (type) {
        case "page":
          await loadSavedUrls();
          break;
        case "text":
          await loadSavedTexts();
          break;
        case "tagset":
          await loadSavedTagsets();
          break;
        case "image":
          await loadSavedImages();
          break;
      }
      await loadAllTags();
    } catch (error) {
      console.error("Failed to toggle tag pair:", error);
    }
  };

// Open URL in system browser (Safari)
  const openInBrowser = async (url: string, itemId: string, e: React.MouseEvent) => {
    e.stopPropagation();
    try {
      // Record visit before opening
      await invoke("record_visit", { itemId, source: "browser", windowType: "external" });
      await openUrl(url);
    } catch (error) {
      console.error("Failed to open in browser:", error);
    }
  };

// Open URL in inline webview (expand card in-place)
  const appRef = useRef<HTMLDivElement>(null);

const renderDiscardConfirmModal = () => {
    if (!pendingDiscard) return null;

return (
      <div className="confirm-modal-overlay" onClick={cancelDiscard}>
        <div className="confirm-modal" onClick={(e) => e.stopPropagation()}>
          <p>Discard unsaved changes?</p>
          <div className="confirm-modal-buttons">
            <button className="cancel-btn" onClick={cancelDiscard}>
              Cancel
            </button>
            <button className="delete-btn" onClick={confirmDiscard}>
              Discard
            </button>
          </div>
        </div>
      </div>
    );
  };

const renderDeleteConfirmModal = () => {
    if (!pendingDelete) return null;

const typeLabels: Record<ItemType, string> = {
      page: "page",
      text: "note",
      tagset: "tag set",
      image: "image",
    };

return (
      <div className="confirm-modal-overlay" onClick={cancelDelete}>
        <div className="confirm-modal" onClick={(e) => e.stopPropagation()}>
          <p>Delete this {typeLabels[pendingDelete.type]}?</p>
          <div className="confirm-modal-buttons">
            <button className="cancel-btn" onClick={cancelDelete}>
              Cancel
            </button>
            <button className="delete-btn" onClick={confirmDelete}>
              Delete
            </button>
          </div>
        </div>
      </div>
    );
  };

const renderImageItem = (item: SavedImage) => {
    const metadata = item.metadata as Record<string, unknown> | undefined;
    const title = metadata?.title as string | undefined;
    const sourceUrl = metadata?.sourceUrl as string | undefined;

return (
      <div key={item.id} className="saved-item-card image-card" onClick={() => startEditingImage(item)}>
        <div className="card-header">
          <div className="card-thumbnail">
            {item.thumbnail ? (
              <img
                src={`data:image/jpeg;base64,${item.thumbnail}`}
                alt={title || "Preview"}
                style={{ cursor: "pointer" }}
                onClick={async (e) => {
                  e.stopPropagation();
                  const data = await invoke<string | null>("get_image_data", { id: item.id });
                  if (data) setFullscreenImageData(data);
                }}
              />
            ) : (
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                <circle cx="8.5" cy="8.5" r="1.5"></circle>
                <polyline points="21 15 16 10 5 21"></polyline>
              </svg>
            )}
          </div>
          <div className="card-title">{title || sourceUrl || "Image"}</div>
          <DeleteButton itemId={item.id} itemType="image" />
        </div>
        {item.content && (
          <div className="card-content" style={{ padding: "0 12px 8px", fontSize: "13px", opacity: 0.8, overflow: "hidden", display: "-webkit-box", WebkitLineClamp: 3, WebkitBoxOrient: "vertical" as const }}>
            {item.content.length > 200 ? item.content.substring(0, 200) + "..." : item.content}
          </div>
        )}
        <CardFooter tags={item.tags} itemId={item.id} itemType="image" savedAt={item.saved_at} />
      </div>
    );
  };

// Memoize the rendered card list so it does NOT rebuild on every keystroke.
  // `searchText` is local state driving the controlled <input>, so each keystroke
  // re-renders this whole (~4600-line) component; without this memo the entire
  // card list re-renders per character, which reads as a flash on device. The
  // list *data* already updates via the store's debounced reload, so this memo
  // deliberately EXCLUDES searchText/deferredSearch and depends only on the
  // paged items plus the states that change a card's rendered output. Keep these
  // deps in sync with renderUrlItem/renderTextItem/renderTagsetItem/renderImageItem;
  // a missing dep would leave a card visually stale until the next reload.
  const renderedItems = useMemo(
    () => unifiedItems.map((item) => renderUnifiedItem(item)),
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [
      unifiedItems,
      expandedWebview,
      webviewAnimated,
      webviewLoaded,
      webviewError,
      offlineTag,
      offlineContentIds,
      offlineFetchingIds,
      textReaderMode,
    ],
  );

const closeSettings = () => {
    setShowSettings(false);
    // Reload data in case webhook was used
    loadSavedUrls();
    loadAllTags();
  };

// Keep edge-swipe back handler in sync with current view state.
  // Priority: dismiss the topmost overlay first, then full-screen views.
  useEffect(() => {
    if (fullscreenImageData) {
      edgeSwipeBackRef.current = () => setFullscreenImageData(null);
    } else if (expandedWebview) {
      edgeSwipeBackRef.current = () => closeWebview();
    } else if (editingUrlId) {
      edgeSwipeBackRef.current = () => requestCancelEditing();
    } else if (editingTextId) {
      edgeSwipeBackRef.current = () => requestCancelEditingText();
    } else if (editingTagsetId) {
      edgeSwipeBackRef.current = () => requestCancelEditingTagset();
    } else if (editingImageId) {
      edgeSwipeBackRef.current = () => requestCancelEditingImage();
    } else if (addInputExpanded) {
      edgeSwipeBackRef.current = () => setAddInputExpanded(false);
    } else if (textReaderMode) {
      edgeSwipeBackRef.current = () => setTextReaderMode(null);
    } else if (capturedImage) {
      edgeSwipeBackRef.current = () => cancelCapturedImage();
    } else if (showSettings) {
      edgeSwipeBackRef.current = () => closeSettings();
    } else {
      // On the main list view — no back action
      edgeSwipeBackRef.current = null;
    }
  });

if (showSettings) {
    return (
      <div className="app">
        <header>
          <button className="header-btn back-btn" onClick={closeSettings}>
            Back
          </button>
          <h1>Settings</h1>
          <div className="header-spacer"></div>
        </header>

<main className="settings-view">
          {/* Server Sync Section */}
          <div className="settings-section">
            <h2>Server Sync</h2>
            <p className="settings-description">
              Sync your saved items with the server. Pull to get items from other devices, push to send local items, or sync all to do both.
            </p>
            <p className="settings-description" style={{ fontSize: "0.85rem", opacity: 0.8 }}>
              Items sync to your account's current profile on the server.
            </p>

<div className="webhook-input">
              <input
                type="url"
                value={webhookUrlInput}
                onChange={(e) => setWebhookUrlInput(e.target.value)}
                placeholder="https://your-server.example.com"
                autoCapitalize="none"
                autoCorrect="off"
              />
            </div>

<div className="webhook-input api-key-field">
              <input
                type={showApiKey ? "text" : "password"}
                value={webhookApiKeyInput}
                onChange={(e) => setWebhookApiKeyInput(e.target.value)}
                placeholder="API key"
                autoCapitalize="none"
                autoCorrect="off"
              />
              <button
                type="button"
                className="toggle-visibility-btn"
                onClick={() => setShowApiKey(!showApiKey)}
              >
                {showApiKey ? (
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path>
                    <line x1="1" y1="1" x2="23" y2="23"></line>
                  </svg>
                ) : (
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                    <circle cx="12" cy="12" r="3"></circle>
                  </svg>
                )}
              </button>
            </div>

<button
              onClick={saveWebhookSettings}
              disabled={webhookUrlInput === webhookUrl && webhookApiKeyInput === webhookApiKey}
              className="save-settings-btn"
            >
              Save Settings
            </button>

<label className={`auto-sync-toggle${!webhookUrl ? ' disabled' : ''}`}>
              <input
                type="checkbox"
                checked={autoSyncEnabled}
                onChange={(e) => toggleAutoSync(e.target.checked)}
                disabled={!webhookUrl}
              />
              <span>Auto-sync when items are added or modified</span>
            </label>

<div className="sync-interval-setting">
              <label htmlFor="sync-interval-input">Sync interval (minutes)</label>
              <input
                id="sync-interval-input"
                type="number"
                min={0}
                value={syncIntervalMinutes}
                onChange={(e) => saveSyncInterval(Math.max(0, Number(e.target.value) || 0))}
                disabled={!webhookUrl}
              />
              <span className="sync-interval-hint">0 = never auto-sync periodically</span>
            </div>

{lastSync && (
              <p className="last-sync-info">
                Last synced: {new Date(lastSync).toLocaleString()}
              </p>
            )}

{syncStatus && syncStatus.pending_count > 0 && (
              <p className="sync-pending-info">
                {syncStatus.pending_count} item{syncStatus.pending_count === 1 ? '' : 's'} pending sync
              </p>
            )}

<button
              className="sync-btn primary"
              onClick={syncAll}
              disabled={!webhookUrl || isSyncing}
            >
              {isSyncing ? "Syncing..." : "Sync All"}
            </button>

{syncMessage && (
              <div className={`sync-message ${syncMessage.includes("failed") || syncMessage.includes("Failed") ? "error" : "success"}`}>
                {syncMessage}
              </div>
            )}
          </div>

{/* Profile Section */}
          <div className="settings-section">
            <h2>Profiles</h2>
            {profileInfo && (
              <>
                <p className="settings-description">
                  {profileInfo.isProductionBuild
                    ? "App Store/TestFlight build"
                    : "Development build"}.
                  Each profile has separate local data and sync destination.
                </p>

{(() => {
                  const currentProfile = profileInfo.profiles.find(p => p.id === profileInfo.currentProfileId);
                  const defaultProfile = profileInfo.profiles[0];
                  const isDefaultProfile = currentProfile?.id === defaultProfile?.id;

return (
                    <>
                      {!isDefaultProfile && currentProfile && (
                        <div className="profile-warning-banner">
                          Using "{currentProfile.name}" profile - data is isolated from default
                        </div>
                      )}

{/* Profile List */}
                      <div className="profile-list">
                        {profileInfo.profiles.map((profile) => {
                          const isCurrent = profile.id === profileInfo.currentProfileId;
                          // Can delete if not current and more than one profile exists
                          const canDelete = !isCurrent && profileInfo.profiles.length > 1;

return (
                            <div key={profile.id} className={`profile-item ${isCurrent ? "active" : ""}`}>
                              <label className="profile-radio-label">
                                <input
                                  type="radio"
                                  name="profile"
                                  checked={isCurrent}
                                  onChange={() => {
                                    console.log(`[Profile] Radio clicked: ${profile.id}, isCurrent: ${isCurrent}`);
                                    if (!isCurrent) {
                                      console.log(`[Profile] Switching to: ${profile.id}`);
                                      setProfile(profile.id);
                                    }
                                  }}
                                />
                                <span className="profile-name">{profile.name}</span>
                                {isCurrent && <span className="profile-badge current">active</span>}
                              </label>
                              {canDelete && (
                                <button
                                  className="profile-delete-btn"
                                  onClick={async () => {
                                    if (confirm(`Delete profile "${profile.name}"?\n\nThe database file will be preserved.`)) {
                                      try {
                                        const info = await invoke<ProfileInfo>("delete_profile", { profileId: profile.id });
                                        setProfileInfo(info);
                                      } catch (err) {
                                        alert(`Failed to delete: ${err}`);
                                      }
                                    }
                                  }}
                                >
                                  Delete
                                </button>
                              )}
                            </div>
                          );
                        })}
                      </div>

{/* Add Profile */}
                      <div className="profile-add-section">
                        <div className="profile-input-row">
                          <input
                            type="text"
                            value={profileInput}
                            onChange={(e) => setProfileInput(e.target.value)}
                            placeholder="New profile name"
                          />
                          <button
                            className="sync-btn secondary"
                            onClick={async () => {
                              if (profileInput.trim()) {
                                try {
                                  const info = await invoke<ProfileInfo>("create_profile", { name: profileInput.trim() });
                                  setProfileInfo(info);
                                  setProfileInput("");
                                } catch (err) {
                                  alert(`Failed to create: ${err}`);
                                }
                              }
                            }}
                            disabled={!profileInput.trim()}
                          >
                            Add
                          </button>
                        </div>
                      </div>
                    </>
                  );
                })()}
              </>
            )}
          </div>

{/* Todos Section */}
          <div className="settings-section">
            <h2>Todos</h2>
            <p className="settings-description">
              Configure the tag pair for todo/done checkboxes. Items with the "active" tag show an unchecked checkbox; tapping it switches to the "completed" tag.
            </p>
            <div className="webhook-input">
              <label className="settings-label">Active tag</label>
              <input
                type="text"
                value={todoTagInput}
                onChange={(e) => setTodoTagInput(e.target.value)}
                placeholder="todo"
                autoCapitalize="none"
                autoCorrect="off"
              />
            </div>
            <div className="webhook-input">
              <label className="settings-label">Completed tag</label>
              <input
                type="text"
                value={doneTagInput}
                onChange={(e) => setDoneTagInput(e.target.value)}
                placeholder="done"
                autoCapitalize="none"
                autoCorrect="off"
              />
            </div>
            <button
              onClick={saveTodoTags}
              disabled={todoTagInput === todoTag && doneTagInput === doneTag}
              className="save-settings-btn"
            >
              Save Todo Tags
            </button>
          </div>

{/* Reading List Section */}
          <div className="settings-section">
            <h2>Reading List</h2>
            <p className="settings-description">
              Configure the tag pair for reading list checkboxes. Works like todo/done but with a book icon. Items with the "unread" tag show an unchecked book; tapping it switches to the "read" tag.
            </p>
            <div className="webhook-input">
              <label className="settings-label">Unread tag</label>
              <input
                type="text"
                value={readmeTagInput}
                onChange={(e) => setReadmeTagInput(e.target.value)}
                placeholder="readme"
                autoCapitalize="none"
                autoCorrect="off"
              />
            </div>
            <div className="webhook-input">
              <label className="settings-label">Read tag</label>
              <input
                type="text"
                value={readTagInput}
                onChange={(e) => setReadTagInput(e.target.value)}
                placeholder="read"
                autoCapitalize="none"
                autoCorrect="off"
              />
            </div>
            <button
              onClick={saveReadingTags}
              disabled={readmeTagInput === readmeTag && readTagInput === readTag}
              className="save-settings-btn"
            >
              Save Reading Tags
            </button>
          </div>

{/* Offline Section */}
          <div className="settings-section">
            <h2>Offline</h2>
            <p className="settings-description">
              Items tagged with this tag will have their content fetched and stored locally for offline reading. Reader-mode extraction is used to save clean article text.
            </p>
            <div className="webhook-input">
              <label className="settings-label">Offline tag</label>
              <input
                type="text"
                value={offlineTagInput}
                onChange={(e) => setOfflineTagInput(e.target.value)}
                placeholder="offline"
                autoCapitalize="none"
                autoCorrect="off"
              />
            </div>
            <button
              onClick={saveOfflineTag}
              disabled={offlineTagInput === offlineTag}
              className="save-settings-btn"
            >
              Save Offline Tag
            </button>
            <p className="settings-description" style={{ marginTop: '0.5rem' }}>
              Disk usage: {offlineStorageSize < 1024 ? `${offlineStorageSize} B` : offlineStorageSize < 1024 * 1024 ? `${(offlineStorageSize / 1024).toFixed(1)} KB` : `${(offlineStorageSize / (1024 * 1024)).toFixed(1)} MB`}
            </p>
          </div>

{/* Display Section */}
          <div className="settings-section">
            <h2>Display</h2>
            <p className="settings-description">
              Items with this tag are hidden from the main view unless the tag is selected as a filter.
            </p>
            <div className="webhook-input">
              <input
                type="text"
                value={archiveTagInput}
                onChange={(e) => setArchiveTagInput(e.target.value)}
                placeholder="archive"
                autoCapitalize="none"
                autoCorrect="off"
              />
            </div>
            <button
              onClick={saveArchiveTag}
              disabled={archiveTagInput === archiveTag}
              className="save-settings-btn"
            >
              Save Archive Tag
            </button>
          </div>

{/* Debug Section */}
          <div className="settings-section">
            <h2>Debug</h2>
            <div className="sync-btn-row" style={{ flexDirection: 'column', gap: '0.5rem' }}>
              <button
                className="sync-btn secondary"
                onClick={async () => {
                  try {
                    const files = await invoke<string[]>("debug_list_container_files");
                    setSyncMessage("FILES: " + files.join(" | "));
                  } catch (e) {
                    setSyncMessage("ERROR: " + String(e));
                  }
                }}
              >
                List Container Files
              </button>
              <button
                className="sync-btn secondary"
                onClick={async () => {
                  try {
                    const info = await invoke<string>("debug_profiles_json");
                    setSyncMessage(info);
                  } catch (e) {
                    setSyncMessage("PROFILES ERROR: " + String(e));
                  }
                }}
              >
                Show profiles.json
              </button>
              <button
                className="sync-btn secondary"
                onClick={async () => {
                  try {
                    const info = await invoke<string>("debug_settings_table");
                    setSyncMessage(info);
                  } catch (e) {
                    setSyncMessage("SETTINGS ERROR: " + String(e));
                  }
                }}
              >
                Show Settings Table
              </button>
              <button
                className="sync-btn secondary"
                onClick={async () => {
                  try {
                    const info = await invoke<string>("debug_query_database");
                    setSyncMessage(info);
                  } catch (e) {
                    setSyncMessage("DB ERROR: " + String(e));
                  }
                }}
              >
                Query Database
              </button>
              <button
                className="sync-btn secondary"
                onClick={async () => {
                  try {
                    setSyncMessage("Exporting...");
                    const base64 = await invoke<string>("debug_export_database");
                    setSyncMessage("DB_START>>>" + base64.substring(0, 500) + "...(" + base64.length + " total chars). Use AirDrop or copy manually.");
                    console.log("FULL_DB_BASE64:", base64);
                  } catch (e) {
                    setSyncMessage("EXPORT ERROR: " + String(e));
                  }
                }}
              >
                Export Database
              </button>
              {profileInfo && profileInfo.profiles.length >= 2 && (
                <button
                  className="sync-btn secondary"
                  style={{ backgroundColor: '#c44' }}
                  onClick={async () => {
                    const p1 = profileInfo.profiles[0];
                    const p2 = profileInfo.profiles[1];
                    try {
                      setSyncMessage("Swapping...");
                      const result = await invoke<string>("swap_profile_databases", {
                        profileIdA: p1.id,
                        profileIdB: p2.id
                      });
                      setSyncMessage(result);
                    } catch (e) {
                      setSyncMessage("SWAP ERROR: " + String(e));
                    }
                  }}
                >
                  Swap Default ↔ Dev Databases
                </button>
              )}
            </div>
          </div>

</main>

{/* Restart prompt modal */}
        {showRestartPrompt && (
          <div className="modal-overlay">
            <div className="modal-content">
              <h3>Profile Changed</h3>
              <p>
                Switched to <strong>{profileInfo?.profiles.find(p => p.id === profileInfo?.currentProfileId)?.name ?? "unknown"}</strong> profile.
              </p>
              <p>
                Please restart the app to ensure complete data isolation.
              </p>
              <div className="modal-buttons">
                <button className="modal-btn secondary" onClick={() => setShowRestartPrompt(false)}>
                  Later
                </button>
                <button className="modal-btn primary" onClick={quitApp}>
                  Quit Now
                </button>
              </div>
            </div>
          </div>
        )}
      </div>
    );
  }

const totalCount = savedUrls.length + savedTexts.length + savedTagsets.length + savedImages.length;

const currentProfile = profileInfo?.profiles.find(p => p.id === profileInfo.currentProfileId);
  const isDevProfile = currentProfile?.name === 'Development';

// Hidden camera input
  const cameraInput = (
    <input
      ref={cameraInputRef}
      type="file"
      accept="image/*"
      capture="environment"
      onChange={handleCameraCapture}
      style={{ display: "none" }}
    />
  );

// Captured image edit view
  if (capturedImage) {
    return (
      <div className="app">
        {cameraInput}
        <header>
          <button className="header-btn back-btn" onClick={cancelCapturedImage}>
            Cancel
          </button>
          <h1>Save Photo</h1>
          <div className="header-spacer"></div>
        </header>

{capturedImageTags.size > 0 && (
              <div className="edit-section">
                <div className="editing-tags">
                  {Array.from(capturedImageTags).sort().map((tag) => (
                    <span key={tag} className="editing-tag">
                      {tag}
                      <button onTouchStart={(e) => e.preventDefault()} onMouseDown={(e) => e.preventDefault()} onClick={() => { toggleCapturedImageTag(tag); requestAnimationFrame(() => capturedImageTagInputRef.current?.focus({ preventScroll: true })); }}>×</button>
                    </span>
                  ))}
                </div>
              </div>
            )}

<div className="edit-section">
              <div className="new-tag-input">
                <input
                  ref={capturedImageTagInputRef}
                  type="text"
                  value={capturedImageTagInput}
                  onChange={(e) => setCapturedImageTagInput(e.target.value)}
                  onKeyDown={(e) => {
                    if (e.key === "Enter") {
                      e.preventDefault();
                      addCapturedImageTag();
                      requestAnimationFrame(() => capturedImageTagInputRef.current?.focus({ preventScroll: true }));
                    }
                  }}
                  placeholder="Add tag..."
                  autoCapitalize="none"
                  autoCorrect="off"
                  autoComplete="off"
                  spellCheck={false}
                />
                <button onTouchStart={(e) => e.preventDefault()} onMouseDown={(e) => e.preventDefault()} onClick={() => { addCapturedImageTag(); requestAnimationFrame(() => capturedImageTagInputRef.current?.focus({ preventScroll: true })); }} disabled={!capturedImageTagInput.trim()}>
                  Add
                </button>
              </div>
            </div>

{allTags.filter((t) =>
              !capturedImageTags.has(t.name) &&
              (!capturedImageTagInput.trim() || t.name.toLowerCase().includes(capturedImageTagInput.toLowerCase().trim()))
            ).length > 0 && (
              <div className="edit-section">
                <div className="all-tags-list">
                  {allTags.filter((t) =>
                    !capturedImageTags.has(t.name) &&
                    (!capturedImageTagInput.trim() || t.name.toLowerCase().includes(capturedImageTagInput.toLowerCase().trim()))
                  ).map((tag) => (
                    <span
                      key={tag.name}
                      className="tag-chip"
                      onTouchStart={(e) => e.preventDefault()}
                      onMouseDown={(e) => e.preventDefault()}
                      onClick={() => { toggleCapturedImageTag(tag.name); requestAnimationFrame(() => capturedImageTagInputRef.current?.focus({ preventScroll: true })); }}
                    >
                      {tag.name}
                    </span>
                  ))}
                </div>
              </div>
            )}

<div className="edit-buttons">
              <button className="cancel-btn" onClick={cancelCapturedImage}>
                Cancel
              </button>
              <button className="save-btn" onClick={saveCapturedImage}>
                Save
              </button>
            </div>
          </div>
        </main>
      </div>
    );
  }

return (
    <div className={`app ${expandedWebview ? 'webview-active' : ''}`} ref={appRef}>
      {fullscreenImageData && (
        <div className="image-fullscreen-overlay" onClick={() => setFullscreenImageData(null)}>
          <img
            className="image-fullscreen-img"
            src={`data:image/jpeg;base64,${fullscreenImageData}`}
            alt="Fullscreen"
          />
        </div>
      )}
      <input ref={keyboardPrimerRef} style={{ position: 'fixed', opacity: 0, top: '-100px' }} readOnly />
      {cameraInput}
      <header>
        <h1
          onClick={() => {
            if (activeFilter !== "all" || searchText || selectedFilterTags.size > 0) showAll();
            else scrollToTop();
          }}
          style={{ cursor: "pointer" }}
        >
          Peek {isDevProfile && <span style={{ fontSize: '0.5em', opacity: 0.5 }}>{__BUILD_NUMBER__}</span>}
        </h1>
        <div style={{ flex: 1 }} />
        <div className="filter-icons">
          <button
            className={`filter-btn ${activeFilter === "page" ? "active" : ""}`}
            onClick={() => selectFilter("page")}
            title="Pages"
          >
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <circle cx="12" cy="12" r="10"></circle>
              <line x1="2" y1="12" x2="22" y2="12"></line>
              <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path>
            </svg>
            <span className="filter-count">{savedUrls.length}</span>
          </button>
          <button
            className={`filter-btn ${activeFilter === "text" ? "active" : ""}`}
            onClick={() => selectFilter("text")}
            title="Notes"
          >
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
              <polyline points="14 2 14 8 20 8"></polyline>
              <line x1="16" y1="13" x2="8" y2="13"></line>
              <line x1="16" y1="17" x2="8" y2="17"></line>
            </svg>
            <span className="filter-count">{savedTexts.length}</span>
          </button>
          <button
            className={`filter-btn ${activeFilter === "tagset" ? "active" : ""}`}
            onClick={() => selectFilter("tagset")}
            title="Tag Sets"
          >
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path>
              <line x1="7" y1="7" x2="7.01" y2="7"></line>
            </svg>
            <span className="filter-count">{savedTagsets.length}</span>
          </button>
          <button
            className={`filter-btn ${activeFilter === "image" ? "active" : ""}`}
            onClick={() => selectFilter("image")}
            title="Images"
          >
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
              <circle cx="8.5" cy="8.5" r="1.5"></circle>
              <polyline points="21 15 16 10 5 21"></polyline>
            </svg>
            <span className="filter-count">{savedImages.length}</span>
          </button>
        </div>
        <button
          className="sort-btn"
          onClick={() => setSortOrder(prev => prev === 'newest' ? 'oldest' : 'newest')}
          title={sortOrder === 'newest' ? 'Newest first' : 'Oldest first'}
        >
          {sortOrder === 'newest' ? (
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <line x1="12" y1="5" x2="12" y2="19"></line>
              <polyline points="19 12 12 19 5 12"></polyline>
            </svg>
          ) : (
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <line x1="12" y1="19" x2="12" y2="5"></line>
              <polyline points="5 12 12 5 19 12"></polyline>
            </svg>
          )}
        </button>
        <div style={{ flex: 1 }} />
        <button className={`header-btn settings-btn ${isSyncing ? 'syncing' : ''}`} onClick={() => setShowSettings(true)}>
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <circle cx="12" cy="12" r="3"></circle>
            <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
          </svg>
        </button>
      </header>

{/* Profile warning banner when not on first/default profile */}
      {profileInfo && profileInfo.profiles.length > 0 && profileInfo.currentProfileId !== profileInfo.profiles[0].id && (
        <div className="profile-banner">
          Profile: {profileInfo.profiles.find(p => p.id === profileInfo.currentProfileId)?.name ?? "Unknown"}
        </div>
      )}

<main
        className="saved-view"
        ref={mainRef}
      >
        {/* Input row: search + add side by side */}
        <div className="input-row">
          <div className="input-row-card">
            <div className="input-with-clear" style={{ flex: 1 }}>
              <input
                type="text"
                className="input-row-input"
                placeholder="Search..."
                value={searchText}
                onChange={(e) => setSearchText(e.target.value)}
                autoCapitalize="none"
                autoCorrect="off"
                autoComplete="off"
                spellCheck={false}
              />
              <ClearButton show={searchText.length > 0 || selectedFilterTags.size > 0} onClear={() => { setSearchText(''); setSelectedFilterTags(new Set()); }} />
            </div>
          </div>
          <div className="input-row-card">
            <div className="input-with-clear" style={{ flex: 1 }}>
              <input
                type="text"
                className="input-row-input"
                placeholder="Add..."
                value={addInputText}
                onChange={(e) => setAddInputText(e.target.value)}
                onFocus={() => setAddInputExpanded(true)}
                autoCapitalize="none"
                autoCorrect="off"
                autoComplete="off"
                spellCheck={false}
              />
            </div>
            <button className="camera-btn" onClick={openCamera} title="Take photo">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path>
                <circle cx="12" cy="13" r="4"></circle>
              </svg>
            </button>
          </div>
        </div>

{/* Tag chips - always visible, filterable, resizable */}
        <div className="drag-handle-wrapper">
          <div
            className="filter-tags-container"
            ref={filterTagsRef}
            style={{ height: `${filterTagsHeight}px` }}
          >
            {allTags.length === 0 ? (
              <div className="filter-tags-empty">This is where your tags live - tag something!</div>
            ) : filteredTags.length === 0 ? (
              <div className="filter-tags-empty">No matching tags</div>
            ) : (
              <div className="filter-tags">
                {filteredTags.map((tag) => (
                  <span
                    key={tag.name}
                    className={`tag-chip ${selectedFilterTags.has(tag.name) ? "selected" : ""}`}
                    onClick={() => toggleFilterTag(tag.name)}
                  >
                    {tag.name}
                  </span>
                ))}
              </div>
            )}
          </div>
          <div
            className="drag-handle"
            onMouseDown={(e) => { e.preventDefault(); handleFilterTagsDragStart(e.clientY); }}
            onTouchStart={(e) => { handleFilterTagsDragStart(e.touches[0].clientY); }}
          >
            <div className="drag-handle-bar" />
          </div>
        </div>

{/* Item list */}
        <div className="unified-list">
          {totalCount === 0 ? (
            <div className="empty-state">
              <p>No saved items yet.</p>
              <p>Share a URL from any app to get started!</p>
            </div>
          ) : unifiedItems.length === 0 ? (
            // Suppress "no matches" while the first page is still loading so we
            // don't flash it before query_items returns.
            listLoading ? null : (
              <div className="empty-state">
                <p>No matching items.</p>
                <p>Tap Peek to clear filters.</p>
              </div>
            )
          ) : (
            <>
              {renderedItems}
              {/* Fetch-on-scroll sentinel: IntersectionObserver triggers loadMore */}
              {listHasMore && (
                <div ref={loadMoreSentinelRef} className="load-more-sentinel" aria-hidden="true">
                  {listLoading && <div className="webview-loading">Loading more...</div>}
                </div>
              )}
            </>
          )}
        </div>
      </main>

{/* Auto-sync status indicator */}
      <div className={`auto-sync-indicator ${isSyncing ? 'syncing' : ''}`} />

{/* Edit modal overlay */}
      {renderEditModal()}

{/* Quick Add overlay */}
      {addInputExpanded && (
        <EditorLayout
          onDismiss={() => setAddInputExpanded(false)}
          keyboardHeight={keyboardHeight}
          tags={{
            selectedTags: addInputTags,
            availableTags: allTags,
            tagInput: addInputNewTag,
            onTagInputChange: setAddInputNewTag,
            onToggleTag: toggleAddInputTag,
            onAddTag: addInputAddNewTag,
            placeholder: "Add new tag...",
          }}
          buttons={{
            onSave: saveAddInput,
            onCancel: () => setAddInputExpanded(false),
            cancelLabel: "Close",
            saveDisabled: !getAddInputType(),
          }}
        >
          <ResizableInput
            value={addInputText}
            onChange={setAddInputText}
            placeholder="Enter text, URL, or just select tags..."
            autoFocus
            autoCapitalize="none"
            autoCorrect="off"
          />
        </EditorLayout>
      )}

{/* Delete confirmation modal */}
      {renderDeleteConfirmModal()}

{/* Discard changes confirmation modal */}
      {renderDiscardConfirmModal()}

{/* Toast notification */}
      {toast && (
        <div className={`toast toast-${toast.type}`}>
          {toast.message}
        </div>
      )}

{/* Restart prompt modal */}
      {showRestartPrompt && (
        <div className="modal-overlay">
          <div className="modal-content">
            <h3>Profile Changed</h3>
            <p>
              Switched to <strong>{profileInfo?.profiles.find(p => p.id === profileInfo?.currentProfileId)?.name ?? "unknown"}</strong> profile.
            </p>
            <p>
              Please restart the app to ensure complete data isolation.
            </p>
            <div className="modal-buttons">
              <button className="modal-btn secondary" onClick={() => setShowRestartPrompt(false)}>
                Later
              </button>
              <button className="modal-btn primary" onClick={quitApp}>
                Quit Now
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

export default App;