+
{/* Brand transition overlay */}
{brandTransition && (
@@ -459,7 +811,7 @@ export default function App() {
{sourcePanelOpen ? (
<>
- (null);
+
+ const handleSelect = useCallback((palette: Palette) => {
+ applyPalette(palette.id);
+ setCurrentId(palette.id);
+ onClose?.();
+ }, [onClose]);
+
+ // Close on click outside or Escape
+ useEffect(() => {
+ const handleClick = (e: MouseEvent) => {
+ if (ref.current && !ref.current.contains(e.target as Node)) onClose?.();
+ };
+ const handleKey = (e: KeyboardEvent) => {
+ if (e.key === 'Escape') onClose?.();
+ };
+ document.addEventListener('mousedown', handleClick);
+ document.addEventListener('keydown', handleKey);
+ return () => {
+ document.removeEventListener('mousedown', handleClick);
+ document.removeEventListener('keydown', handleKey);
+ };
+ }, [onClose]);
+
+ return (
+
+
handleMouseDown(0, e)} />}
@@ -528,11 +898,16 @@ export default function App() {
onUpdateNote={handleUpdateNote}
/>
) : brandMode === 'bookmark' ? (
+
{allOpen && handleMouseDown(1, e)} />}
- ) : (
+ ) : (brandMode !== 'editor' && brandMode !== 'draw') ? (
= {
+ chrome: 'from-blue-500 via-green-500 to-yellow-500',
+ desktop: 'from-indigo-500 via-purple-500 to-pink-500',
+ mobile: 'from-orange-500 via-red-500 to-pink-500',
+};
+
+interface BookmarkPanelProps {
+ selectedBookmarkId?: string | null;
+ onSelectBookmark?: (bookmark: WebBookmark) => void;
+}
+
+export function BookmarkPanel({ selectedBookmarkId, onSelectBookmark }: BookmarkPanelProps) {
+ const { user } = useAuth();
+ const [bookmarks, setBookmarks] = useState([]);
+ const [loading, setLoading] = useState(true);
+ const [filter, setFilter] = useState<'all' | 'unread'>('all');
+ const [viewMode, setViewMode] = useState(() => {
+ try { return (localStorage.getItem('superflux_bk_viewmode') as ViewMode) || 'cards'; }
+ catch { return 'cards'; }
+ });
+
+ useEffect(() => {
+ try { localStorage.setItem('superflux_bk_viewmode', viewMode); }
+ catch { /* ignore */ }
+ }, [viewMode]);
+
+ const load = useCallback(async () => {
+ if (!user) return;
+ setLoading(true);
+ const data = await fetchBookmarks(user.id);
+ setBookmarks(data);
+ setLoading(false);
+ }, [user]);
+
+ useEffect(() => { load(); }, [load]);
+
+ const handleRemove = async (id: string, e: React.MouseEvent) => {
+ e.stopPropagation();
+ if (!user) return;
+ setBookmarks(prev => prev.filter(b => b.id !== id));
+ await removeBookmark(user.id, id);
+ };
+
+ const handleToggleRead = async (id: string, isRead: boolean, e: React.MouseEvent) => {
+ e.stopPropagation();
+ if (!user) return;
+ setBookmarks(prev => prev.map(b => b.id === id ? { ...b, is_read: isRead } : b));
+ await toggleBookmarkRead(user.id, id, isRead);
+ };
+
+ const filtered = filter === 'unread'
+ ? bookmarks.filter(b => !b.is_read)
+ : bookmarks;
+
+ if (!user) {
+ return (
+ (null);
+ const [status, setStatus] = useState('idle');
+ const [viewMode, setViewMode] = useState<'reader' | 'web'>('reader');
+ const [fontSize, setFontSize] = useState(16);
+ const contentRef = useRef(null);
+ const iframeRef = useRef(null);
+ const prevUrlRef = useRef(null);
+
+ // Extract article content when bookmark changes
+ useEffect(() => {
+ if (!bookmark) {
+ setArticle(null);
+ setStatus('idle');
+ prevUrlRef.current = null;
+ return;
+ }
+
+ // Don't refetch if same URL
+ if (bookmark.url === prevUrlRef.current) return;
+ prevUrlRef.current = bookmark.url;
+
+ let cancelled = false;
+ setStatus('loading');
+ setArticle(null);
+
+ extractArticle(bookmark.url)
+ .then((result) => {
+ if (cancelled) return;
+ setArticle(result);
+ setStatus('done');
+ // Mark as read when content loads
+ if (!bookmark.is_read && onMarkRead) {
+ onMarkRead(bookmark.id);
+ }
+ })
+ .catch(() => {
+ if (cancelled) return;
+ setStatus('error');
+ });
+
+ return () => { cancelled = true; };
+ }, [bookmark, onMarkRead]);
+
+ // Scroll to top when article changes
+ useEffect(() => {
+ contentRef.current?.scrollTo(0, 0);
+ }, [article]);
+
+ const handleOpenExternal = useCallback(() => {
+ if (!bookmark) return;
+ openExternal(bookmark.url);
+ }, [bookmark]);
+
+ const handleRetry = useCallback(() => {
+ if (!bookmark) return;
+ prevUrlRef.current = null; // force refetch
+ setStatus('loading');
+ setArticle(null);
+ extractArticle(bookmark.url)
+ .then((result) => {
+ setArticle(result);
+ setStatus('done');
+ })
+ .catch(() => setStatus('error'));
+ }, [bookmark]);
+
+ if (!bookmark) {
+ return (
+ ;
+ isOpen: boolean;
+ onClose: () => void;
+}
+
+export function CommandPalette({ commands, isOpen, onClose }: CommandPaletteProps) {
+ const [query, setQuery] = useState('');
+ const [selectedIndex, setSelectedIndex] = useState(0);
+ const inputRef = useRef(null);
+ const listRef = useRef(null);
+
+ // Reset state when opened
+ useEffect(() => {
+ if (isOpen) {
+ setQuery('');
+ setSelectedIndex(0);
+ setTimeout(() => inputRef.current?.focus(), 50);
+ }
+ }, [isOpen]);
+
+ const filtered = useMemo(() => {
+ const all = commands.current ?? [];
+ if (!query.trim()) return all;
+
+ const q = query.toLowerCase();
+ return all.filter(cmd => {
+ const text = `${cmd.label} ${cmd.category}`.toLowerCase();
+ // Fuzzy: every character of query appears in order
+ let qi = 0;
+ for (let i = 0; i < text.length && qi < q.length; i++) {
+ if (text[i] === q[qi]) qi++;
+ }
+ return qi === q.length;
+ });
+ }, [query, commands]);
+
+ // Group by category
+ const grouped = useMemo(() => {
+ const map = new Map();
+ for (const cmd of filtered) {
+ const group = map.get(cmd.category) || [];
+ group.push(cmd);
+ map.set(cmd.category, group);
+ }
+ return map;
+ }, [filtered]);
+
+ // Flat list for keyboard navigation
+ const flatList = useMemo(() => {
+ const result: Command[] = [];
+ for (const cmds of grouped.values()) result.push(...cmds);
+ return result;
+ }, [grouped]);
+
+ useEffect(() => {
+ setSelectedIndex(0);
+ }, [query]);
+
+ // Scroll selected into view
+ useEffect(() => {
+ const el = listRef.current?.querySelector('[data-selected="true"]');
+ el?.scrollIntoView({ block: 'nearest' });
+ }, [selectedIndex]);
+
+ const handleKeyDown = (e: React.KeyboardEvent) => {
+ if (e.key === 'Escape') {
+ e.preventDefault();
+ onClose();
+ } else if (e.key === 'ArrowDown' || (e.key === 'j' && e.ctrlKey)) {
+ e.preventDefault();
+ setSelectedIndex(prev => Math.min(prev + 1, flatList.length - 1));
+ } else if (e.key === 'ArrowUp' || (e.key === 'k' && e.ctrlKey)) {
+ e.preventDefault();
+ setSelectedIndex(prev => Math.max(prev - 1, 0));
+ } else if (e.key === 'Enter') {
+ e.preventDefault();
+ const cmd = flatList[selectedIndex];
+ if (cmd) {
+ onClose();
+ // Run in next tick so palette closes first
+ setTimeout(() => cmd.action(), 0);
+ }
+ }
+ };
+
+ if (!isOpen) return null;
+
+ let flatIdx = 0;
+
+ return (
+ >(new Set(folders));
+ const [newFolderInput, setNewFolderInput] = useState(false);
+ const [newFolderName, setNewFolderName] = useState('');
+ const [renamingFolder, setRenamingFolder] = useState(null);
+ const [renameValue, setRenameValue] = useState('');
+ const [renamingDocId, setRenamingDocId] = useState(null);
+ const [docRenameValue, setDocRenameValue] = useState('');
+ const [contextMenu, setContextMenu] = useState(null);
+ const [moveSubmenuOpen, setMoveSubmenuOpen] = useState(false);
+ const newFolderRef = useRef(null);
+ const renameRef = useRef(null);
+
+ const toggleFolder = useCallback((folder: string) => {
+ setExpandedFolders(prev => {
+ const next = new Set(prev);
+ if (next.has(folder)) next.delete(folder);
+ else next.add(folder);
+ return next;
+ });
+ }, []);
+
+ const handleCreateFolder = useCallback(() => {
+ const name = newFolderName.trim();
+ if (name && !folders.includes(name)) {
+ onCreateFolder(name);
+ setExpandedFolders(prev => new Set(prev).add(name));
+ }
+ setNewFolderName('');
+ setNewFolderInput(false);
+ }, [newFolderName, folders, onCreateFolder]);
+
+ const handleRenameFolder = useCallback(() => {
+ const name = renameValue.trim();
+ if (name && renamingFolder && name !== renamingFolder && !folders.includes(name)) {
+ onRenameFolder(renamingFolder, name);
+ }
+ setRenamingFolder(null);
+ setRenameValue('');
+ }, [renameValue, renamingFolder, folders, onRenameFolder]);
+
+ const handleDocRename = useCallback(() => {
+ if (renamingDocId && docRenameValue.trim()) {
+ onRenameDoc(renamingDocId, docRenameValue.trim());
+ }
+ setRenamingDocId(null);
+ setDocRenameValue('');
+ }, [renamingDocId, docRenameValue, onRenameDoc]);
+
+ const handleDocContext = useCallback((e: React.MouseEvent, docId: string, currentFolder?: string) => {
+ e.preventDefault();
+ e.stopPropagation();
+ setMoveSubmenuOpen(false);
+ setContextMenu({ kind: 'doc', x: e.clientX, y: e.clientY, docId, currentFolder });
+ }, []);
+
+ const handleFolderContext = useCallback((e: React.MouseEvent, folder: string) => {
+ e.preventDefault();
+ e.stopPropagation();
+ setMoveSubmenuOpen(false);
+ setContextMenu({ kind: 'folder', x: e.clientX, y: e.clientY, folder });
+ }, []);
+
+ const closeContextMenu = useCallback(() => {
+ setContextMenu(null);
+ setMoveSubmenuOpen(false);
+ }, []);
+
+ useEffect(() => {
+ if (!contextMenu) return;
+ const close = () => { setContextMenu(null); setMoveSubmenuOpen(false); };
+ const handleKey = (e: KeyboardEvent) => { if (e.key === 'Escape') close(); };
+ document.addEventListener('click', close);
+ document.addEventListener('keydown', handleKey);
+ return () => {
+ document.removeEventListener('click', close);
+ document.removeEventListener('keydown', handleKey);
+ };
+ }, [contextMenu]);
+
+ const sorted = [...docs].sort((a, b) =>
+ new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime()
+ );
+ const rootDocs = sorted.filter(d => !d.folder);
+
+ const renderDocItem = (doc: EditorDoc) => (
+ ('superflux_viewmode', 'normal');
const compact = viewMode === 'compact';
+ const itemsPerPage = compact ? ITEMS_PER_PAGE_COMPACT : ITEMS_PER_PAGE_NORMAL;
const [contextMenu, setContextMenu] = useState<{ x: number; y: number; item: FeedItem } | null>(null);
const menuRef = useRef(null);
@@ -184,7 +188,7 @@ export function FeedPanel({ categories, items, selectedFeedId, selectedSource, s
// ── Pagination ──
const [currentPage, setCurrentPage] = useState(0);
- const totalPages = Math.max(1, Math.ceil(items.length / ITEMS_PER_PAGE));
+ const totalPages = Math.max(1, Math.ceil(items.length / itemsPerPage));
// Reset to page 0 and digest when items source changes
const itemsKey = `${selectedFeedId}-${selectedSource}-${showFavorites}-${showReadLater}`;
@@ -201,9 +205,9 @@ export function FeedPanel({ categories, items, selectedFeedId, selectedSource, s
}, [currentPage, totalPages]);
const paginatedItems = useMemo(() => {
- const start = currentPage * ITEMS_PER_PAGE;
- return items.slice(start, start + ITEMS_PER_PAGE);
- }, [items, currentPage]);
+ const start = currentPage * itemsPerPage;
+ return items.slice(start, start + itemsPerPage);
+ }, [items, currentPage, itemsPerPage]);
const paginatedGroups = useMemo(() => groupByTime(paginatedItems), [paginatedItems]);
@@ -327,7 +331,15 @@ export function FeedPanel({ categories, items, selectedFeedId, selectedSource, s
)}
diff --git a/src/components/GradientText.tsx b/src/components/GradientText.tsx
new file mode 100644
index 0000000..df579e8
--- /dev/null
+++ b/src/components/GradientText.tsx
@@ -0,0 +1,130 @@
+import { useState, useCallback, useEffect, useRef, type ReactNode } from 'react';
+import { motion, useMotionValue, useAnimationFrame, useTransform } from 'motion/react';
+
+interface GradientTextProps {
+ children: ReactNode;
+ className?: string;
+ colors?: string[];
+ animationSpeed?: number;
+ showBorder?: boolean;
+ direction?: 'horizontal' | 'vertical' | 'diagonal';
+ pauseOnHover?: boolean;
+ yoyo?: boolean;
+}
+
+export default function GradientText({
+ children,
+ className = '',
+ colors = ['#5227FF', '#FF9FFC', '#B19EEF'],
+ animationSpeed = 8,
+ showBorder = false,
+ direction = 'horizontal',
+ pauseOnHover = false,
+ yoyo = true
+}: GradientTextProps) {
+ const [isPaused, setIsPaused] = useState(false);
+ const progress = useMotionValue(0);
+ const elapsedRef = useRef(0);
+ const lastTimeRef = useRef(null);
+
+ const animationDuration = animationSpeed * 1000;
+
+ useAnimationFrame(time => {
+ if (isPaused) {
+ lastTimeRef.current = null;
+ return;
+ }
+
+ if (lastTimeRef.current === null) {
+ lastTimeRef.current = time;
+ return;
+ }
+
+ const deltaTime = time - lastTimeRef.current;
+ lastTimeRef.current = time;
+ elapsedRef.current += deltaTime;
+
+ if (yoyo) {
+ const fullCycle = animationDuration * 2;
+ const cycleTime = elapsedRef.current % fullCycle;
+
+ if (cycleTime < animationDuration) {
+ progress.set((cycleTime / animationDuration) * 100);
+ } else {
+ progress.set(100 - ((cycleTime - animationDuration) / animationDuration) * 100);
+ }
+ } else {
+ progress.set((elapsedRef.current / animationDuration) * 100);
+ }
+ });
+
+ useEffect(() => {
+ elapsedRef.current = 0;
+ progress.set(0);
+ }, [animationSpeed, yoyo]);
+
+ const backgroundPosition = useTransform(progress, p => {
+ if (direction === 'horizontal') {
+ return `${p}% 50%`;
+ } else if (direction === 'vertical') {
+ return `50% ${p}%`;
+ } else {
+ return `${p}% 50%`;
+ }
+ });
+
+ const handleMouseEnter = useCallback(() => {
+ if (pauseOnHover) setIsPaused(true);
+ }, [pauseOnHover]);
+
+ const handleMouseLeave = useCallback(() => {
+ if (pauseOnHover) setIsPaused(false);
+ }, [pauseOnHover]);
+
+ const gradientAngle =
+ direction === 'horizontal' ? 'to right' : direction === 'vertical' ? 'to bottom' : 'to bottom right';
+ const gradientColors = [...colors, colors[0]].join(', ');
+
+ const gradientStyle = {
+ backgroundImage: `linear-gradient(${gradientAngle}, ${gradientColors})`,
+ backgroundSize: direction === 'horizontal' ? '300% 100%' : direction === 'vertical' ? '100% 300%' : '300% 300%',
+ backgroundRepeat: 'repeat'
+ };
+
+ return (
+
+ {showBorder && (
+
+ {children}
+
+
+ );
+}
diff --git a/src/components/NotePanel.tsx b/src/components/NotePanel.tsx
index 824afd8..0798055 100644
--- a/src/components/NotePanel.tsx
+++ b/src/components/NotePanel.tsx
@@ -1,5 +1,7 @@
import { useState, useCallback } from 'react';
import { motion } from 'motion/react';
+import Markdown from 'react-markdown';
+import GradientText from './GradientText';
import { NoteStickyBoard } from './NoteStickyBoard';
export interface Note {
@@ -15,6 +17,8 @@ export interface Note {
stickyRotation?: number;
stickyZIndex?: number;
stickyColor?: string;
+ stickyWidth?: number;
+ stickyHeight?: number;
}
interface NotePanelProps {
@@ -32,7 +36,7 @@ function formatNoteDate(iso: string): string {
}
export function NotePanel({ notes, selectedNoteId, onSelectNote, onAddNote, onDeleteNote, onUpdateNote }: NotePanelProps) {
- const [viewMode, setViewMode] = useState<'cards' | 'board'>('cards');
+ const [viewMode, setViewMode] = useState<'cards' | 'board'>('board');
const handleDelete = useCallback((e: React.MouseEvent, noteId: string) => {
e.stopPropagation();
@@ -43,7 +47,15 @@ export function NotePanel({ notes, selectedNoteId, onSelectNote, onAddNote, onDe
@@ -112,9 +121,13 @@ export function NotePanel({ notes, selectedNoteId, onSelectNote, onAddNote, onDe
{idx + 1}
diff --git a/src/components/NoteStickyBoard.tsx b/src/components/NoteStickyBoard.tsx
index fe75803..a2dd807 100644
--- a/src/components/NoteStickyBoard.tsx
+++ b/src/components/NoteStickyBoard.tsx
@@ -1,4 +1,5 @@
import { useRef, useState, useCallback, useEffect } from 'react';
+import Markdown from 'react-markdown';
import type { Note } from './NotePanel';
interface NoteStickyBoardProps {
@@ -34,6 +35,13 @@ function randomRotation() {
// ── Single Sticky Note ──
+const MIN_STICKY_W = 140;
+const MAX_STICKY_W = 500;
+const MIN_STICKY_H = 120;
+const MAX_STICKY_H = 500;
+const DEFAULT_STICKY_W = 200;
+const DEFAULT_STICKY_H = 180;
+
interface StickyNoteItemProps {
note: Note;
isSelected: boolean;
@@ -42,22 +50,26 @@ interface StickyNoteItemProps {
onDragEnd: (x: number, y: number) => void;
onContentUpdate: (content: string) => void;
onBringToFront: () => void;
+ onResizeEnd: (w: number, h: number) => void;
boardRef: React.RefObject;
}
function StickyNoteItem({
note, isSelected, onSelect, onDelete, onDragEnd,
- onContentUpdate, onBringToFront, boardRef,
+ onContentUpdate, onBringToFront, onResizeEnd, boardRef,
}: StickyNoteItemProps) {
const color = note.stickyColor || 'yellow';
const style = STICKY_COLORS[color] || STICKY_COLORS.yellow;
const rotation = note.stickyRotation ?? 0;
const [isDragging, setIsDragging] = useState(false);
+ const [isResizing, setIsResizing] = useState(false);
const [isEditing, setIsEditing] = useState(false);
const [editContent, setEditContent] = useState(note.content);
const [position, setPosition] = useState({ x: note.stickyX ?? 40, y: note.stickyY ?? 40 });
+ const [size, setSize] = useState({ w: note.stickyWidth ?? DEFAULT_STICKY_W, h: note.stickyHeight ?? DEFAULT_STICKY_H });
const dragOffset = useRef({ x: 0, y: 0 });
+ const resizeStart = useRef({ mouseX: 0, mouseY: 0, w: 0, h: 0 });
const noteRef = useRef(null);
const textareaRef = useRef(null);
@@ -65,6 +77,10 @@ function StickyNoteItem({
setPosition({ x: note.stickyX ?? 40, y: note.stickyY ?? 40 });
}, [note.stickyX, note.stickyY]);
+ useEffect(() => {
+ setSize({ w: note.stickyWidth ?? DEFAULT_STICKY_W, h: note.stickyHeight ?? DEFAULT_STICKY_H });
+ }, [note.stickyWidth, note.stickyHeight]);
+
useEffect(() => {
if (isEditing && textareaRef.current) {
textareaRef.current.focus();
@@ -90,10 +106,10 @@ function StickyNoteItem({
const newX = e.clientX - boardRect.left - dragOffset.current.x;
const newY = e.clientY - boardRect.top - dragOffset.current.y;
setPosition({
- x: Math.max(0, Math.min(newX, boardRect.width - 200)),
- y: Math.max(0, Math.min(newY, boardRect.height - 200)),
+ x: Math.max(0, Math.min(newX, boardRect.width - size.w)),
+ y: Math.max(0, Math.min(newY, boardRect.height - size.h)),
});
- }, [isDragging, boardRef]);
+ }, [isDragging, boardRef, size]);
const handlePointerUp = useCallback((e: React.PointerEvent) => {
if (!isDragging) return;
@@ -102,6 +118,33 @@ function StickyNoteItem({
onDragEnd(position.x, position.y);
}, [isDragging, position, onDragEnd]);
+ // ── Resize handlers ──
+ const handleResizePointerDown = useCallback((e: React.PointerEvent) => {
+ e.stopPropagation();
+ e.preventDefault();
+ resizeStart.current = { mouseX: e.clientX, mouseY: e.clientY, w: size.w, h: size.h };
+ setIsResizing(true);
+ onBringToFront();
+ (e.target as HTMLElement).setPointerCapture(e.pointerId);
+ }, [size, onBringToFront]);
+
+ const handleResizePointerMove = useCallback((e: React.PointerEvent) => {
+ if (!isResizing) return;
+ const dx = e.clientX - resizeStart.current.mouseX;
+ const dy = e.clientY - resizeStart.current.mouseY;
+ setSize({
+ w: Math.max(MIN_STICKY_W, Math.min(MAX_STICKY_W, resizeStart.current.w + dx)),
+ h: Math.max(MIN_STICKY_H, Math.min(MAX_STICKY_H, resizeStart.current.h + dy)),
+ });
+ }, [isResizing]);
+
+ const handleResizePointerUp = useCallback((e: React.PointerEvent) => {
+ if (!isResizing) return;
+ (e.target as HTMLElement).releasePointerCapture(e.pointerId);
+ setIsResizing(false);
+ onResizeEnd(size.w, size.h);
+ }, [isResizing, size, onResizeEnd]);
+
const handleSave = () => {
onContentUpdate(editContent);
setIsEditing(false);
@@ -115,17 +158,19 @@ function StickyNoteItem({
return (
- {/* Folded corner */}
-
+ {/* Resize handle */}
+
);
}
@@ -226,6 +286,10 @@ export function NoteStickyBoard({
onUpdateNote(noteId, { content });
}, [onUpdateNote]);
+ const handleResizeEnd = useCallback((noteId: string, w: number, h: number) => {
+ onUpdateNote(noteId, { stickyWidth: w, stickyHeight: h });
+ }, [onUpdateNote]);
+
const handleAddStickyNote = useCallback(() => {
onAddNote();
// After adding, we need to set the sticky properties on the newest note
@@ -296,6 +360,7 @@ export function NoteStickyBoard({
onDragEnd={(x, y) => handleDragEnd(note.id, x, y)}
onContentUpdate={(content) => handleContentUpdate(note.id, content)}
onBringToFront={() => bringToFront(note.id)}
+ onResizeEnd={(w, h) => handleResizeEnd(note.id, w, h)}
boardRef={boardRef}
/>
))}
diff --git a/src/components/PalettePicker.tsx b/src/components/PalettePicker.tsx
new file mode 100644
index 0000000..934f6d9
--- /dev/null
+++ b/src/components/PalettePicker.tsx
@@ -0,0 +1,95 @@
+import { useState, useEffect, useRef, useCallback } from 'react';
+import { palettes, applyPalette, getStoredPaletteId, type Palette } from '../themes/palettes';
+
+interface PalettePickerProps {
+ onClose?: () => void;
+}
+
+export function PalettePicker({ onClose }: PalettePickerProps) {
+ const [currentId, setCurrentId] = useState(getStoredPaletteId);
+ const ref = useRef setFeedPanelOpen(true)} title="Ouvrir le panneau Feed (2)">
☰
- )}
+ ) : null}
{readerPanelOpen ? (
@@ -565,8 +940,15 @@ export default function App() {
onUpdateNote={handleUpdateNote}
onClose={() => setSelectedNoteId(null)}
/>
+ ) : brandMode === 'editor' ? (
+
)}
+
)}
+
+ );
+ }
+
+ return (
+ Connectez-vous pour voir vos bookmarks
+
+ {/* Header */}
+
+ );
+}
+
+function formatDate(dateStr: string): string {
+ const date = new Date(dateStr);
+ const now = new Date();
+ const diff = now.getTime() - date.getTime();
+ const days = Math.floor(diff / 86400000);
+
+ if (days === 0) return "Aujourd'hui";
+ if (days === 1) return 'Hier';
+ if (days < 7) return `Il y a ${days}j`;
+ return date.toLocaleDateString('fr-FR', { day: 'numeric', month: 'short' });
+}
diff --git a/src/components/BookmarkReader.tsx b/src/components/BookmarkReader.tsx
new file mode 100644
index 0000000..8cc91d2
--- /dev/null
+++ b/src/components/BookmarkReader.tsx
@@ -0,0 +1,249 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { motion, AnimatePresence } from 'motion/react';
+import type { WebBookmark } from '../services/bookmarkService';
+import { extractArticle, type ExtractedArticle } from '../services/articleExtractor';
+import { openExternal } from '../lib/tauriFetch';
+
+type LoadStatus = 'idle' | 'loading' | 'done' | 'error';
+
+interface BookmarkReaderProps {
+ bookmark: WebBookmark | null;
+ onMarkRead?: (id: string) => void;
+}
+
+export function BookmarkReader({ bookmark, onMarkRead }: BookmarkReaderProps) {
+ const [article, setArticle] = useState
+
+
+ {/* Content */}
+
+
+
+ {bookmarks.length > 0 && (
+ {bookmarks.length}
+ )}
+
+
+
+ Bookmarks
+
+
+ {bookmarks.length > 0 && (
+ {bookmarks.length}
+ )}
+
+
+
+
+
+
+
+
+ {loading ? (
+
+ Chargement...
+ ) : filtered.length === 0 ? (
+
+
+ ) : viewMode === 'compact' ? (
+ /* ─── Compact List View ─── */
+ {filter === 'unread' ? 'Aucun bookmark non lu' : 'Aucun bookmark'}
++ Installez l'extension Chrome SuperFlux pour sauvegarder des pages web +
+
+ {filtered.map((bk, idx) => (
+ onSelectBookmark?.(bk)}
+ initial={{ opacity: 0, y: 6 }}
+ animate={{ opacity: 1, y: 0 }}
+ transition={{ delay: idx * 0.02, duration: 0.25 }}
+ >
+
+ ))}
+
+ ) : (
+ /* ─── Cards Grid View ─── */
+
+ {!bk.is_read && }
+ {bk.favicon && (
+ 
(e.currentTarget.style.display = 'none')}
+ />
+ )}
+
+
+
+ {bk.title}
+
+ {bk.site_name || new URL(bk.url).hostname}
+ ·
+ {formatDate(bk.created_at)}
+
+ {bk.source}
+
+
+
+
+
+
+
+ {filtered.map((bk, idx) => (
+ onSelectBookmark?.(bk)}
+ initial={{ opacity: 0, scale: 0.92 }}
+ animate={{ opacity: 1, scale: 1 }}
+ transition={{ delay: idx * 0.04, duration: 0.35, ease: [0.25, 0.1, 0.25, 1] }}
+ whileHover={{ scale: 1.02 }}
+ >
+ {/* Animated Gradient Blob */}
+
+
+ {/* Glassy Content Overlay */}
+
+ ))}
+
+ {/* Blob animation keyframes */}
+
+
+ )}
+
+
+
+
+ {bk.favicon && (
+ (e.currentTarget.style.display = 'none')}
+ />
+ )}
+ {bk.site_name || new URL(bk.url).hostname}
+
+ {formatDate(bk.created_at)}
+
+
+
+
+
+
+ {!bk.is_read && }
+
+ {bk.excerpt && (
+ {bk.title}
+{bk.excerpt}
+ )} +
+
+
+
+ {bk.source}
+
+ {bk.author && (
+ {bk.author}
+ )}
+
+
+
+
+
+
+ 🔖
+
+ );
+ }
+
+ return (
+ Sélectionnez un bookmark pour le lire
+
+ {/* Toolbar */}
+
+ );
+}
+
+function formatDate(dateStr: string): string {
+ return new Date(dateStr).toLocaleDateString('fr-FR', {
+ day: 'numeric',
+ month: 'long',
+ year: 'numeric',
+ });
+}
diff --git a/src/components/CommandPalette.tsx b/src/components/CommandPalette.tsx
new file mode 100644
index 0000000..d47cdb6
--- /dev/null
+++ b/src/components/CommandPalette.tsx
@@ -0,0 +1,148 @@
+import { useState, useEffect, useRef, useMemo, type MutableRefObject } from 'react';
+import type { Command } from '../hooks/useCommands';
+
+interface CommandPaletteProps {
+ commands: MutableRefObject
+
+
+ {/* Reader mode */}
+ {viewMode === 'reader' && (
+
+ {bookmark.favicon && (
+ 
(e.currentTarget.style.display = 'none')}
+ />
+ )}
+ {bookmark.site_name || new URL(bookmark.url).hostname}
+
+
+ {/* View mode toggle */}
+
+
+
+
+
+ {/* Font size */}
+ {viewMode === 'reader' && (
+
+
+
+
+ )}
+ {/* External link */}
+
+
+
+ {status === 'loading' && (
+
+
+
+ )}
+
+ {status === 'error' && (
+
+ ⊘
+
+ )}
+
+ {status === 'done' && article && (
+
+ {bookmark.image && (
+
+ )}
+
+
+ )}
+
+ {/* Web mode — iframe */}
+ {viewMode === 'web' && (
+
+
+ Extraction de l'article...
+
+ Impossible de charger l'article
+Le contenu de cette page n'a pas pu être extrait.
+
+
+
+
+
+ 
(e.currentTarget.parentElement!.style.display = 'none')}
+ />
+
+ )}
+ {article.title || bookmark.title}
+
+ {article.byline && {article.byline}}
+ {article.siteName && {article.siteName}}
+ {formatDate(bookmark.created_at)}
+
+
+
+
+
+ )}
+
+
+ );
+}
diff --git a/src/components/EditorFileList.tsx b/src/components/EditorFileList.tsx
new file mode 100644
index 0000000..d2d47bc
--- /dev/null
+++ b/src/components/EditorFileList.tsx
@@ -0,0 +1,454 @@
+import { useState, useCallback, useRef, useEffect } from 'react';
+import { motion, AnimatePresence } from 'motion/react';
+
+export interface EditorDoc {
+ id: string;
+ title: string;
+ content: string;
+ folder?: string;
+ createdAt: string;
+ updatedAt: string;
+}
+
+const STORAGE_KEY = 'superflux_editor_docs';
+const FOLDERS_KEY = 'superflux_editor_folders';
+
+export function loadEditorDocs(): EditorDoc[] {
+ try {
+ const raw = localStorage.getItem(STORAGE_KEY);
+ return raw ? JSON.parse(raw) : [];
+ } catch { return []; }
+}
+
+export function saveEditorDocs(docs: EditorDoc[]) {
+ try { localStorage.setItem(STORAGE_KEY, JSON.stringify(docs)); }
+ catch { /* ignore */ }
+}
+
+export function loadEditorFolders(): string[] {
+ try {
+ const raw = localStorage.getItem(FOLDERS_KEY);
+ return raw ? JSON.parse(raw) : [];
+ } catch { return []; }
+}
+
+export function saveEditorFolders(folders: string[]) {
+ try { localStorage.setItem(FOLDERS_KEY, JSON.stringify(folders)); }
+ catch { /* ignore */ }
+}
+
+interface EditorFileListProps {
+ docs: EditorDoc[];
+ folders: string[];
+ selectedDocId: string | null;
+ selectedFolder: string | null;
+ onSelectDoc: (id: string) => void;
+ onSelectFolder: (folder: string | null) => void;
+ onAddDoc: () => void;
+ onDeleteDoc: (id: string) => void;
+ onRenameDoc: (id: string, title: string) => void;
+ onCreateFolder: (name: string) => void;
+ onRenameFolder: (oldName: string, newName: string) => void;
+ onDeleteFolder: (name: string) => void;
+ onMoveDocToFolder: (docId: string, folder: string | undefined) => void;
+}
+
+type ContextMenuState =
+ | { kind: 'doc'; x: number; y: number; docId: string; currentFolder?: string }
+ | { kind: 'folder'; x: number; y: number; folder: string }
+ | null;
+
+export function EditorFileList({
+ docs,
+ folders,
+ selectedDocId,
+ selectedFolder,
+ onSelectDoc,
+ onSelectFolder,
+ onAddDoc,
+ onDeleteDoc,
+ onRenameDoc,
+ onCreateFolder,
+ onRenameFolder,
+ onDeleteFolder,
+ onMoveDocToFolder,
+}: EditorFileListProps) {
+ const [expandedFolders, setExpandedFolders] = useState e.stopPropagation()} onKeyDown={handleKeyDown}>
+
+
+ ▷
+ setQuery(e.target.value)}
+ autoComplete="off"
+ spellCheck={false}
+ />
+ Esc
+
+
+ {flatList.length === 0 ? (
+
+ Aucun résultat
+ ) : (
+ Array.from(grouped.entries()).map(([category, cmds]) => (
+
+
+ ))
+ )}
+ {category}
+ {cmds.map((cmd) => {
+ const idx = flatIdx++;
+ const isSelected = idx === selectedIndex;
+ return (
+
+ );
+ })}
+ onSelectDoc(doc.id)}
+ onContextMenu={(e) => handleDocContext(e, doc.id, doc.folder)}
+ >
+ {renamingDocId === doc.id ? (
+
+ );
+
+ return (
+ e.stopPropagation()}>
+ setDocRenameValue(e.target.value)}
+ onKeyDown={e => {
+ if (e.key === 'Enter') handleDocRename();
+ if (e.key === 'Escape') { setRenamingDocId(null); setDocRenameValue(''); }
+ }}
+ onBlur={handleDocRename}
+ autoFocus
+ />
+
+ ) : (
+ <>
+ 📄
+ {doc.title || 'Sans titre'}
+
+ )}
+
+ {/* All documents button */}
+
+
+ {/* New document button */}
+
+
+ {/* New folder button */}
+
+
+ {/* New folder input */}
+
+ {newFolderInput && (
+
+ setNewFolderName(e.target.value)}
+ onKeyDown={(e) => {
+ if (e.key === 'Enter') handleCreateFolder();
+ if (e.key === 'Escape') { setNewFolderInput(false); setNewFolderName(''); }
+ }}
+ onBlur={handleCreateFolder}
+ placeholder="Nom du dossier"
+ />
+
+ )}
+
+
+ {/* Root documents (no folder) */}
+
+
+ {isExpanded && (
+
+ {folderDocs.map(renderDocItem)}
+ {folderDocs.length === 0 && (
+
+ )}
+
+
+ );
+ })}
+
+ {/* Empty state */}
+ {docs.length === 0 && folders.length === 0 && (
+
+ );
+}
diff --git a/src/components/FeedPanel.tsx b/src/components/FeedPanel.tsx
index 8c5f18e..c8ad2d6 100644
--- a/src/components/FeedPanel.tsx
+++ b/src/components/FeedPanel.tsx
@@ -5,8 +5,11 @@ import MorphingPageDots from './ui/morphing-page-dots';
import { usePro } from '../contexts/ProContext';
import { summarizeDigest } from '../services/llmService';
import { translateText, getTranslationConfig, saveTranslationConfig } from '../services/translationService';
+import GradientText from './GradientText';
+import SpotlightCard from './SpotlightCard';
-const ITEMS_PER_PAGE = 8;
+const ITEMS_PER_PAGE_NORMAL = 10;
+const ITEMS_PER_PAGE_COMPACT = 20;
type ViewMode = 'normal' | 'compact' | 'cards';
@@ -116,6 +119,7 @@ export function FeedPanel({ categories, items, selectedFeedId, selectedSource, s
const { isPro, showUpgradeModal } = usePro();
const [viewMode, setViewMode] = useLocalStorage
+ {rootDocs.map(renderDocItem)}
+
+
+ {/* Folders */}
+ {folders.map((folder, idx) => {
+ const folderDocs = sorted.filter(d => d.folder === folder);
+ const isExpanded = expandedFolders.has(folder);
+
+ return (
+ { onSelectFolder(folder); if (!isExpanded) toggleFolder(folder); }}
+ onContextMenu={(e) => handleFolderContext(e, folder)}
+ >
+ 📁
+ {renamingFolder === folder ? (
+ setRenameValue(e.target.value)}
+ onKeyDown={(e) => {
+ if (e.key === 'Enter') handleRenameFolder();
+ if (e.key === 'Escape') { setRenamingFolder(null); setRenameValue(''); }
+ }}
+ onBlur={handleRenameFolder}
+ onClick={(e) => e.stopPropagation()}
+ autoFocus
+ />
+ ) : (
+ {folder}
+ )}
+ {folderDocs.length}
+ { e.stopPropagation(); toggleFolder(folder); }}
+ >
+ ›
+
+
+
+ Dossier vide
+ )}
+
+ Aucun document
+
+ )}
+
+ {/* ── Context menus ── */}
+
+ {/* Document context menu */}
+ {contextMenu?.kind === 'doc' && (
+ e.stopPropagation()}
+ >
+
+
+ {folders.length > 0 && (
+
+ )}
+
+ {/* Folder context menu */}
+ {contextMenu?.kind === 'folder' && (
+
+
+
+ {moveSubmenuOpen && (
+
+ )}
+
+ {!folders.length && contextMenu.currentFolder && (
+
+ )}
+
+
+
+ {contextMenu.currentFolder && (
+
+ )}
+ {folders
+ .filter(f => f !== contextMenu.currentFolder)
+ .map(folder => (
+
+ ))}
+
+ )}
+ e.stopPropagation()}
+ >
+
+
+
+ )}
+
-
+
{unreadCount > 0 && (
{unreadCount} non lus
)}
@@ -502,8 +514,8 @@ export function FeedPanel({ categories, items, selectedFeedId, selectedSource, s
/* ─── Reorderable Flat List (favorites / read later) ─── */
onSelectItem(item)}
onContextMenu={(e) => handleContextMenu(e, item)}
@@ -614,6 +627,7 @@ export function FeedPanel({ categories, items, selectedFeedId, selectedSource, s
)}
+
))}
))
@@ -629,7 +643,7 @@ export function FeedPanel({ categories, items, selectedFeedId, selectedSource, s
onChange={setCurrentPage}
/>
- {currentPage * ITEMS_PER_PAGE + 1}–{Math.min((currentPage + 1) * ITEMS_PER_PAGE, items.length)} / {items.length}
+ {currentPage * itemsPerPage + 1}–{Math.min((currentPage + 1) * itemsPerPage, items.length)} / {items.length}
{title}
+
+
+ {title}
+
+
{unreadCount > 0 && (
{unreadCount} non lus
)}
@@ -502,8 +514,8 @@ export function FeedPanel({ categories, items, selectedFeedId, selectedSource, s
/* ─── Reorderable Flat List (favorites / read later) ─── */
{paginatedItems.map((item, idx) => (
+
onSelectItem(item)}
onContextMenu={(e) => handleContextMenu(e, item)}
@@ -554,6 +566,7 @@ export function FeedPanel({ categories, items, selectedFeedId, selectedSource, s
)}
+
))}
) : (
@@ -569,8 +582,8 @@ export function FeedPanel({ categories, items, selectedFeedId, selectedSource, s
{group.label}
{group.items.map((item, idx) => (
+
-
+
{notes.length > 0 && (
{notes.length} note{notes.length > 1 ? 's' : ''}
)}
@@ -63,9 +75,6 @@ export function NotePanel({ notes, selectedNoteId, onSelectNote, onAddNote, onDe
>
▤
-
Notes
+
+
+ Notes
+
+
{notes.length > 0 && (
{notes.length} note{notes.length > 1 ? 's' : ''}
)}
@@ -63,9 +75,6 @@ export function NotePanel({ notes, selectedNoteId, onSelectNote, onAddNote, onDe
>
▤
-
{note.title || 'Sans titre'}
{formatNoteDate(note.updatedAt)} -- {note.content || 'Note vide...'} -
+
+ {note.content ? (
+ {note.content}
+ ) : (
+ Note vide...
+ )}
+
))}
e.stopPropagation()}
/>
) : (
- {note.content}
+ ) : (
+
)}
{ setIsEditing(true); setEditContent(note.content); }} > - {note.content || 'Double-cliquez pour modifier...'} -
+ {note.content ? ( +Double-cliquez pour modifier...
+ )} +
+
+
+
+ );
+}
+
+/** Inline version for SettingsModal */
+export function PalettePickerInline() {
+ const [currentId, setCurrentId] = useState(getStoredPaletteId);
+
+ const handleSelect = useCallback((palette: Palette) => {
+ applyPalette(palette.id);
+ setCurrentId(palette.id);
+ }, []);
+
+ return (
+ Palette
+
+ {palettes.map(p => {
+ const isDark = document.documentElement.classList.contains('dark') || document.documentElement.classList.contains('amoled');
+ const colors = isDark ? p.dark : p.light;
+ return (
+
+ );
+ })}
+
+
+ {palettes.map(p => {
+ const isDark = document.documentElement.classList.contains('dark') || document.documentElement.classList.contains('amoled');
+ const colors = isDark ? p.dark : p.light;
+ return (
+
+ );
+ })}
+
+ );
+}
diff --git a/src/components/SettingsModal.tsx b/src/components/SettingsModal.tsx
index ac172db..7f735dc 100644
--- a/src/components/SettingsModal.tsx
+++ b/src/components/SettingsModal.tsx
@@ -11,6 +11,7 @@ import { getProviderConfig, saveProviderConfig, clearProviderConfig, ProviderSyn
import { getTtsConfig, saveTtsConfig, speak as ttsSpeak, stop as ttsStop, type TtsEngine, type TtsConfig } from '../services/ttsService';
import { getTranslationConfig, saveTranslationConfig, LANGUAGES } from '../services/translationService';
import { usePro } from '../contexts/ProContext';
+import { PalettePickerInline } from './PalettePicker';
import { PRO_LIMITS } from '../services/licenseService';
import { getRSSHubInstance, setRSSHubInstance as setRSSHubInstanceConfig } from '../services/rsshubService';
@@ -74,11 +75,11 @@ function applyWindowEffect(effect: WindowEffect, opacity: number) {
// Debounce the native effect call (triggers a resize nudge for DWM repaint)
if (_effectTimer) clearTimeout(_effectTimer);
_effectTimer = setTimeout(() => {
- const isDark = document.documentElement.classList.contains('dark');
- const isSepia = document.documentElement.classList.contains('sepia');
+ const isAmoled = document.documentElement.classList.contains('amoled');
+ const isDark = isAmoled || document.documentElement.classList.contains('dark');
let r: number, g: number, b: number;
- if (isDark) { r = 20; g = 20; b = 20; }
- else if (isSepia) { r = 210; g = 195; b = 170; }
+ if (isAmoled) { r = 0; g = 0; b = 0; }
+ else if (isDark) { r = 20; g = 20; b = 20; }
else { r = 240; g = 240; b = 240; }
const alpha = Math.round((opacity / 100) * 200);
@@ -560,6 +561,9 @@ export function SettingsModal({ isOpen, onClose, onImportOpml, feedCount = 0, on
)}
+
+