From 0f0a0de6786f0f7e957b6ef07aa7076c651579b1 Mon Sep 17 00:00:00 2001
From: OhMyCode <ohmycodedev@gmail.com>
Date: Tue, 24 Feb 2026 12:42:36 +0100
Subject: [PATCH] Add notes feature, sysinfo, and auth window

Introduce a local notes (SuperNote) subsystem and system info + authentication helpers.

- Add new Note UI: NotePanel, NoteEditor, NoteSourceList, NoteStickyBoard and wiring in App.tsx (notes state, folders, CRUD handlers, board/cards views, pinned items).
- Integrate notes into layout and TitleBar; add UI controls for sync interval, show system info toggle, and a visible sync error toast.
- FeedPanel: add "mark all as unread" support and update action button UI.
- Tauri: expose native commands for CPU/memory/network metrics and an open_auth_window helper; register them in invoke_handler and enable an "auth" webview capability. Bump tauri product version.
- Add sysinfo dependency to src-tauri/Cargo.toml (used by new native commands).
- Add a DB migration SQL to add podcast source and a minor font update in index.html.

These changes enable an offline note-taking mode, surface basic system metrics to the frontend, and provide a dedicated auth webview for sign-in flows while improving sync configurability and error visibility.
---
 ...ion-de-pull-request-pour-la-branche-git.md |  18 +
 index.html                                    |   2 +-
 src-tauri/Cargo.lock                          | 116 +++
 src-tauri/Cargo.toml                          |   1 +
 src-tauri/capabilities/default.json           |   4 +-
 src-tauri/gen/schemas/capabilities.json       |   2 +-
 src-tauri/src/lib.rs                          | 121 ++-
 src-tauri/tauri.conf.json                     |   2 +-
 src/App.tsx                                   | 186 +++-
 src/components/FeedPanel.tsx                  |  15 +-
 src/components/NoteEditor.tsx                 | 100 ++
 src/components/NotePanel.tsx                  | 126 +++
 src/components/NoteSourceList.tsx             | 355 +++++++
 src/components/NoteStickyBoard.tsx            | 305 ++++++
 src/components/SettingsModal.tsx              |  71 +-
 src/components/SourcePanel.tsx                | 118 ++-
 src/components/TitleBar.tsx                   | 122 ++-
 src/contexts/AuthContext.tsx                  |  52 +-
 src/hooks/useFeedStore.ts                     |  20 +
 src/index.css                                 | 878 ++++++++++++++++++
 src/lib/supabase.ts                           |   4 +-
 src/services/syncService.ts                   | 213 ++++-
 .../20250224000004_add_podcast_source.sql     |   3 +
 23 files changed, 2775 insertions(+), 59 deletions(-)
 create mode 100644 .specstory/history/2026-02-23_16-43Z-produire-une-description-de-pull-request-pour-la-branche-git.md
 create mode 100644 src/components/NoteEditor.tsx
 create mode 100644 src/components/NotePanel.tsx
 create mode 100644 src/components/NoteSourceList.tsx
 create mode 100644 src/components/NoteStickyBoard.tsx
 create mode 100644 supabase/migrations/20250224000004_add_podcast_source.sql

diff --git a/.specstory/history/2026-02-23_16-43Z-produire-une-description-de-pull-request-pour-la-branche-git.md b/.specstory/history/2026-02-23_16-43Z-produire-une-description-de-pull-request-pour-la-branche-git.md
new file mode 100644
index 0000000..eb700c1
--- /dev/null
+++ b/.specstory/history/2026-02-23_16-43Z-produire-une-description-de-pull-request-pour-la-branche-git.md
@@ -0,0 +1,18 @@
+<!-- Generated by SpecStory, Markdown v2.1.0 -->
+
+<!-- cursor Session e1e9239a-c980-49bb-9d93-9a048b088b44 (2026-02-23 16:43Z) -->
+
+# Produire une description de Pull Request pour la branche Git (2026-02-23 16:43Z)
+
+_**User**_
+
+Produire une description de Pull Request pour la branche Git actuelle en analysant les derniers commit effectués sur celle-ci et en respectant les standards GitHub de nommage, syntaxe et formatage. Ne pas inclure de captures d'écrans et ne pas indiquer de clotures d'issue GitHub.
+
+---
+
+_**Agent (model default, mode Agent)**_
+
+
+
+---
+
diff --git a/index.html b/index.html
index f6860d1..8990f92 100644
--- a/index.html
+++ b/index.html
@@ -7,7 +7,7 @@
     <title>SuperFlux</title>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300;1,9..40,400&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300;1,9..40,400&display=swap" rel="stylesheet">
     <script>
       (function() {
         var t = localStorage.getItem('theme');
diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock
index 2e1f0c3..a5b35ea 100644
--- a/src-tauri/Cargo.lock
+++ b/src-tauri/Cargo.lock
@@ -477,6 +477,25 @@ dependencies = [
  "crossbeam-utils",
 ]
 
+[[package]]
+name = "crossbeam-deque"
+version = "0.8.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9dd111b7b7f7d55b72c0a6ae361660ee5853c9af73f70c3c2ef6858b950e2e51"
+dependencies = [
+ "crossbeam-epoch",
+ "crossbeam-utils",
+]
+
+[[package]]
+name = "crossbeam-epoch"
+version = "0.9.18"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5b82ac4a3c2ca9c3460964f020e1402edd5753411d7737aa39c3714ad1b5420e"
+dependencies = [
+ "crossbeam-utils",
+]
+
 [[package]]
 name = "crossbeam-utils"
 version = "0.8.21"
@@ -1998,6 +2017,15 @@ dependencies = [
  "minimal-lexical",
 ]
 
+[[package]]
+name = "ntapi"
+version = "0.4.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c3b335231dfd352ffb0f8017f3b6027a4917f7df785ea2143d8af2adc66980ae"
+dependencies = [
+ "winapi",
+]
+
 [[package]]
 name = "num-conv"
 version = "0.2.0"
@@ -2839,6 +2867,26 @@ version = "0.6.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "20675572f6f24e9e76ef639bc5552774ed45f1c30e2951e1e99c59888861c539"
 
+[[package]]
+name = "rayon"
+version = "1.11.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "368f01d005bf8fd9b1206fb6fa653e6c4a81ceb1466406b81792d87c5677a58f"
+dependencies = [
+ "either",
+ "rayon-core",
+]
+
+[[package]]
+name = "rayon-core"
+version = "1.13.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "22e18b0f0062d30d4230b2e85ff77fdfe4326feb054b9783a3460d8435c8ab91"
+dependencies = [
+ "crossbeam-deque",
+ "crossbeam-utils",
+]
+
 [[package]]
 name = "redox_syscall"
 version = "0.5.18"
@@ -3497,6 +3545,7 @@ dependencies = [
  "reqwest 0.12.28",
  "serde",
  "serde_json",
+ "sysinfo",
  "tauri",
  "tauri-build",
  "tts",
@@ -3556,6 +3605,20 @@ dependencies = [
  "syn 2.0.115",
 ]
 
+[[package]]
+name = "sysinfo"
+version = "0.32.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "4c33cd241af0f2e9e3b5c32163b873b29956890b5342e6745b917ce9d490f4af"
+dependencies = [
+ "core-foundation-sys",
+ "libc",
+ "memchr",
+ "ntapi",
+ "rayon",
+ "windows 0.57.0",
+]
+
 [[package]]
 name = "system-deps"
 version = "6.2.2"
@@ -4664,6 +4727,16 @@ dependencies = [
  "windows-version",
 ]
 
+[[package]]
+name = "windows"
+version = "0.57.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "12342cb4d8e3b046f3d80effd474a7a02447231330ef77d71daa6fbc40681143"
+dependencies = [
+ "windows-core 0.57.0",
+ "windows-targets 0.52.6",
+]
+
 [[package]]
 name = "windows"
 version = "0.58.0"
@@ -4696,6 +4769,18 @@ dependencies = [
  "windows-core 0.61.2",
 ]
 
+[[package]]
+name = "windows-core"
+version = "0.57.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d2ed2439a290666cd67ecce2b0ffaad89c2a56b976b736e6ece670297897832d"
+dependencies = [
+ "windows-implement 0.57.0",
+ "windows-interface 0.57.0",
+ "windows-result 0.1.2",
+ "windows-targets 0.52.6",
+]
+
 [[package]]
 name = "windows-core"
 version = "0.58.0"
@@ -4746,6 +4831,17 @@ dependencies = [
  "windows-threading",
 ]
 
+[[package]]
+name = "windows-implement"
+version = "0.57.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9107ddc059d5b6fbfbffdfa7a7fe3e22a226def0b2608f72e9d552763d3e1ad7"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.115",
+]
+
 [[package]]
 name = "windows-implement"
 version = "0.58.0"
@@ -4768,6 +4864,17 @@ dependencies = [
  "syn 2.0.115",
 ]
 
+[[package]]
+name = "windows-interface"
+version = "0.57.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "29bee4b38ea3cde66011baa44dba677c432a78593e202392d1e9070cf2a7fca7"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.115",
+]
+
 [[package]]
 name = "windows-interface"
 version = "0.58.0"
@@ -4812,6 +4919,15 @@ dependencies = [
  "windows-link 0.1.3",
 ]
 
+[[package]]
+name = "windows-result"
+version = "0.1.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5e383302e8ec8515204254685643de10811af0ed97ea37210dc26fb0032647f8"
+dependencies = [
+ "windows-targets 0.52.6",
+]
+
 [[package]]
 name = "windows-result"
 version = "0.2.0"
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
index 68106c6..279499d 100644
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@@ -21,3 +21,4 @@ url = "2"
 open = "5.3.3"
 tts = "0.26"
 base64 = "0.22"
+sysinfo = "0.32"
diff --git a/src-tauri/capabilities/default.json b/src-tauri/capabilities/default.json
index 3403117..5c63399 100644
--- a/src-tauri/capabilities/default.json
+++ b/src-tauri/capabilities/default.json
@@ -2,9 +2,11 @@
   "$schema": "https://raw.githubusercontent.com/nicegui-org/nicegui/main/tauri-capabilities-schema.json",
   "identifier": "default",
   "description": "Capability for the main window",
-  "windows": ["main"],
+  "windows": ["main", "auth"],
   "permissions": [
     "core:default",
+    "core:event:default",
+    "core:webview:allow-create-webview-window",
     "core:window:allow-minimize",
     "core:window:allow-toggle-maximize",
     "core:window:allow-close",
diff --git a/src-tauri/gen/schemas/capabilities.json b/src-tauri/gen/schemas/capabilities.json
index 1e0553a..0dfc267 100644
--- a/src-tauri/gen/schemas/capabilities.json
+++ b/src-tauri/gen/schemas/capabilities.json
@@ -1 +1 @@
-{"default":{"identifier":"default","description":"Capability for the main window","local":true,"windows":["main"],"permissions":["core:default","core:window:allow-minimize","core:window:allow-toggle-maximize","core:window:allow-close","core:window:allow-is-maximized","core:window:allow-start-dragging","core:window:allow-set-minimizable","core:window:allow-set-size","core:window:allow-inner-size","core:window:allow-set-min-size","core:window:allow-set-resizable","core:window:allow-outer-position","core:window:allow-set-position","core:window:allow-set-focus","core:window:allow-set-always-on-top","core:window:allow-set-effects"]}}
\ No newline at end of file
+{"default":{"identifier":"default","description":"Capability for the main window","local":true,"windows":["main","auth"],"permissions":["core:default","core:event:default","core:webview:allow-create-webview-window","core:window:allow-minimize","core:window:allow-toggle-maximize","core:window:allow-close","core:window:allow-is-maximized","core:window:allow-start-dragging","core:window:allow-set-minimizable","core:window:allow-set-size","core:window:allow-inner-size","core:window:allow-set-min-size","core:window:allow-set-resizable","core:window:allow-outer-position","core:window:allow-set-position","core:window:allow-set-focus","core:window:allow-set-always-on-top","core:window:allow-set-effects"]}}
\ No newline at end of file
diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs
index dfc0ec5..de3848b 100644
--- a/src-tauri/src/lib.rs
+++ b/src-tauri/src/lib.rs
@@ -261,6 +261,88 @@ async fn http_request(
     })
 }
 
+#[tauri::command]
+fn get_cpu_usage() -> f32 {
+    use sysinfo::System;
+    static SYS: OnceLock<Mutex<System>> = OnceLock::new();
+    let mtx = SYS.get_or_init(|| {
+        let mut sys = System::new();
+        sys.refresh_cpu_usage();
+        Mutex::new(sys)
+    });
+    let mut sys = mtx.lock().unwrap();
+    sys.refresh_cpu_usage();
+    sys.global_cpu_usage()
+}
+
+#[derive(Serialize)]
+struct MemoryInfo {
+    used_gb: f64,
+    total_gb: f64,
+    percent: f32,
+}
+
+#[tauri::command]
+fn get_memory_usage() -> MemoryInfo {
+    use sysinfo::System;
+    let mut sys = System::new();
+    sys.refresh_memory();
+    let total = sys.total_memory() as f64;
+    let used = sys.used_memory() as f64;
+    let gb = 1_073_741_824.0; // 1 GiB
+    MemoryInfo {
+        used_gb: (used / gb * 10.0).round() / 10.0,
+        total_gb: (total / gb * 10.0).round() / 10.0,
+        percent: if total > 0.0 { (used / total * 100.0) as f32 } else { 0.0 },
+    }
+}
+
+#[derive(Serialize)]
+struct NetSpeed {
+    download_kbps: f64,
+    upload_kbps: f64,
+}
+
+#[tauri::command]
+fn get_net_speed() -> NetSpeed {
+    use sysinfo::Networks;
+    use std::time::Instant;
+
+    static NET: OnceLock<Mutex<(Networks, Instant, u64, u64)>> = OnceLock::new();
+    let mtx = NET.get_or_init(|| {
+        let mut nets = Networks::new_with_refreshed_list();
+        nets.refresh();
+        let (rx, tx) = nets.iter().fold((0u64, 0u64), |(r, t), (_name, data)| {
+            (r + data.total_received(), t + data.total_transmitted())
+        });
+        Mutex::new((nets, Instant::now(), rx, tx))
+    });
+
+    let mut guard = mtx.lock().unwrap();
+    let (ref mut nets, ref mut last_time, ref mut last_rx, ref mut last_tx) = *guard;
+
+    nets.refresh();
+    let now = Instant::now();
+    let elapsed = now.duration_since(*last_time);
+    let secs = elapsed.as_secs_f64().max(0.1);
+
+    let (rx, tx) = nets.iter().fold((0u64, 0u64), |(r, t), (_name, data)| {
+        (r + data.total_received(), t + data.total_transmitted())
+    });
+
+    let dl = (rx.saturating_sub(*last_rx) as f64) / secs / 1024.0; // KB/s
+    let ul = (tx.saturating_sub(*last_tx) as f64) / secs / 1024.0;
+
+    *last_time = now;
+    *last_rx = rx;
+    *last_tx = tx;
+
+    NetSpeed {
+        download_kbps: (dl * 10.0).round() / 10.0,
+        upload_kbps: (ul * 10.0).round() / 10.0,
+    }
+}
+
 #[tauri::command]
 fn open_external(url: String) -> Result<(), String> {
     open::that(&url).map_err(|e| format!("Failed to open URL: {e}"))
@@ -507,6 +589,43 @@ async fn tts_speak_elevenlabs(
     Ok(STANDARD.encode(&bytes))
 }
 
+#[cfg(not(target_os = "android"))]
+#[tauri::command]
+async fn open_auth_window(app: tauri::AppHandle, url: String) -> Result<(), String> {
+    use tauri::{Emitter, WebviewUrl, WebviewWindowBuilder};
+
+    // Close any existing auth window
+    if let Some(existing) = app.get_webview_window("auth") {
+        let _ = existing.close();
+    }
+
+    let parsed_url: Url = url.parse().map_err(|e: url::ParseError| format!("Invalid URL: {e}"))?;
+    let app_handle = app.clone();
+
+    WebviewWindowBuilder::new(&app, "auth", WebviewUrl::External(parsed_url))
+        .title("Sign in")
+        .inner_size(500.0, 700.0)
+        .on_navigation(move |nav_url| {
+            let url_str = nav_url.as_str();
+            // Intercept redirect to our callback URL
+            if url_str.starts_with("http://localhost/auth/callback") {
+                let _ = app_handle.emit("auth-callback", url_str.to_string());
+                return false; // Block navigation to localhost
+            }
+            true
+        })
+        .build()
+        .map_err(|e| format!("Failed to create auth window: {e}"))?;
+
+    Ok(())
+}
+
+#[cfg(target_os = "android")]
+#[tauri::command]
+async fn open_auth_window(_url: String) -> Result<(), String> {
+    Ok(())
+}
+
 #[cfg_attr(mobile, tauri::mobile_entry_point)]
 pub fn run() {
     tauri::Builder::default()
@@ -514,7 +633,7 @@ pub fn run() {
             #[cfg(not(target_os = "android"))]
             saved: Mutex::new(None),
         })
-        .invoke_handler(tauri::generate_handler![fetch_url, http_request, open_external, collapse_window, expand_window, check_network, set_window_effect, tts_speak, tts_stop, tts_speak_elevenlabs])
+        .invoke_handler(tauri::generate_handler![fetch_url, http_request, open_external, get_cpu_usage, get_memory_usage, get_net_speed, collapse_window, expand_window, check_network, set_window_effect, tts_speak, tts_stop, tts_speak_elevenlabs, open_auth_window])
         .setup(|_app| {
             #[cfg(not(target_os = "android"))]
             {
diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index c4a6441..338abdc 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/tauri-apps/tauri/dev/crates/tauri-config-schema/schema.json",
   "productName": "SuperFlux",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "identifier": "com.ohmycode.superflux",
   "build": {
     "beforeDevCommand": "npm run dev:app",
diff --git a/src/App.tsx b/src/App.tsx
index e8c8d2d..ab0dccb 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,14 +1,16 @@
 import { useState, useCallback, useMemo, useEffect, useRef } from 'react';
-import { SourcePanel } from './components/SourcePanel';
+import { SourcePanel, getPinnedItems, type PinEntry } from './components/SourcePanel';
 import { FeedPanel } from './components/FeedPanel';
 import { ReaderPanel } from './components/ReaderPanel';
+import { NotePanel, type Note } from './components/NotePanel';
+import { NoteEditor } from './components/NoteEditor';
 import { ResizeHandle } from './components/ResizeHandle';
 import { TitleBar } from './components/TitleBar';
 import { useResizablePanels } from './hooks/useResizablePanels';
 import { useFeedStore, type FeedStoreCallbacks } from './hooks/useFeedStore';
 import { useHighlightStore } from './hooks/useHighlightStore';
 import { useAuth } from './contexts/AuthContext';
-import { SyncService } from './services/syncService';
+import { SyncService, SYNC_ERROR_EVENT } from './services/syncService';
 import { getProviderConfig, ProviderSyncService } from './services/providerSync';
 import type { NewFeedData } from './components/AddFeedModal';
 import type { FeedItem, FeedSource } from './types';
@@ -23,7 +25,17 @@ const sourceLabels: Record<FeedSource, string> = {
   podcast: 'Podcasts',
 };
 
-const SYNC_INTERVAL = 5 * 60 * 1000; // 5 minutes
+const SYNC_INTERVAL_KEY = 'superflux_sync_interval';
+const DEFAULT_SYNC_INTERVAL = 5 * 60 * 1000; // 5 minutes
+const SHOW_SYSINFO_KEY = 'superflux_show_sysinfo';
+
+function getSyncInterval(): number {
+  try {
+    const v = localStorage.getItem(SYNC_INTERVAL_KEY);
+    if (v) return Number(v);
+  } catch { /* ignore */ }
+  return DEFAULT_SYNC_INTERVAL;
+}
 
 export default function App() {
   const { user } = useAuth();
@@ -53,6 +65,18 @@ export default function App() {
   const store = useFeedStore(syncCallbacks);
   const highlightStore = useHighlightStore();
 
+  // Surface sync errors as a visible toast
+  const [syncError, setSyncError] = useState<string | null>(null);
+  useEffect(() => {
+    const handler = (e: Event) => {
+      const detail = (e as CustomEvent).detail as { operation: string; message: string };
+      setSyncError(`Sync: ${detail.operation} — ${detail.message}`);
+      setTimeout(() => setSyncError(null), 8000);
+    };
+    window.addEventListener(SYNC_ERROR_EVENT, handler);
+    return () => window.removeEventListener(SYNC_ERROR_EVENT, handler);
+  }, []);
+
   const [selectedFeedId, setSelectedFeedId] = useState<string | null>(null);
   const [selectedSource, setSelectedSource] = useState<FeedSource | null>(null);
   const [selectedItem, setSelectedItem] = useState<FeedItem | null>(null);
@@ -64,6 +88,101 @@ export default function App() {
   const [isCollapsed, setIsCollapsed] = useState(false);
   const [brandMode, setBrandMode] = useState<'flux' | 'note' | 'bookmark'>('flux');
   const [brandTransition, setBrandTransition] = useState(false);
+  const [syncInterval, setSyncInterval] = useState(getSyncInterval);
+  const [pinnedItems, setPinnedItems] = useState<PinEntry[]>(getPinnedItems);
+  const [showSysInfo, setShowSysInfo] = useState(() => {
+    try { return localStorage.getItem(SHOW_SYSINFO_KEY) !== 'false'; }
+    catch { return true; }
+  });
+
+  const handleShowSysInfoChange = useCallback((show: boolean) => {
+    setShowSysInfo(show);
+    localStorage.setItem(SHOW_SYSINFO_KEY, String(show));
+  }, []);
+
+  // ── Notes state (SuperNote mode) ──
+  const [notes, setNotes] = useState<Note[]>(() => {
+    try {
+      const raw = localStorage.getItem('superflux_notes');
+      return raw ? JSON.parse(raw) : [];
+    } catch { return []; }
+  });
+  const [selectedNoteId, setSelectedNoteId] = useState<string | null>(null);
+  const [noteFolders, setNoteFolders] = useState<string[]>(() => {
+    try {
+      const raw = localStorage.getItem('superflux_note_folders');
+      return raw ? JSON.parse(raw) : [];
+    } catch { return []; }
+  });
+  const [selectedNoteFolder, setSelectedNoteFolder] = useState<string | null>(null);
+
+  useEffect(() => {
+    try { localStorage.setItem('superflux_notes', JSON.stringify(notes)); }
+    catch { /* ignore */ }
+  }, [notes]);
+
+  useEffect(() => {
+    try { localStorage.setItem('superflux_note_folders', JSON.stringify(noteFolders)); }
+    catch { /* ignore */ }
+  }, [noteFolders]);
+
+  const selectedNote = useMemo(() =>
+    notes.find(n => n.id === selectedNoteId) ?? null,
+  [notes, selectedNoteId]);
+
+  // Notes filtered by selected folder
+  const filteredNotes = useMemo(() => {
+    if (selectedNoteFolder === null) return notes;
+    return notes.filter(n => n.folder === selectedNoteFolder);
+  }, [notes, selectedNoteFolder]);
+
+  const handleAddNote = useCallback(() => {
+    const newNote: Note = {
+      id: crypto.randomUUID(),
+      title: 'Nouvelle note',
+      content: '',
+      folder: selectedNoteFolder ?? undefined,
+      createdAt: new Date().toISOString(),
+      updatedAt: new Date().toISOString(),
+    };
+    setNotes(prev => [newNote, ...prev]);
+    setSelectedNoteId(newNote.id);
+  }, [selectedNoteFolder]);
+
+  const handleDeleteNote = useCallback((noteId: string) => {
+    setNotes(prev => prev.filter(n => n.id !== noteId));
+    setSelectedNoteId(prev => prev === noteId ? null : prev);
+  }, []);
+
+  const handleUpdateNote = useCallback((noteId: string, updates: Partial<Note>) => {
+    setNotes(prev => prev.map(n =>
+      n.id === noteId
+        ? { ...n, ...updates, updatedAt: new Date().toISOString() }
+        : n
+    ));
+  }, []);
+
+  const handleCreateNoteFolder = useCallback((name: string) => {
+    setNoteFolders(prev => [...prev, name]);
+  }, []);
+
+  const handleRenameNoteFolder = useCallback((oldName: string, newName: string) => {
+    setNoteFolders(prev => prev.map(f => f === oldName ? newName : f));
+    setNotes(prev => prev.map(n => n.folder === oldName ? { ...n, folder: newName } : n));
+    if (selectedNoteFolder === oldName) setSelectedNoteFolder(newName);
+  }, [selectedNoteFolder]);
+
+  const handleDeleteNoteFolder = useCallback((name: string) => {
+    setNoteFolders(prev => prev.filter(f => f !== name));
+    setNotes(prev => prev.map(n => n.folder === name ? { ...n, folder: undefined } : n));
+    if (selectedNoteFolder === name) setSelectedNoteFolder(null);
+  }, [selectedNoteFolder]);
+
+  const handleMoveNoteToFolder = useCallback((noteId: string, folder: string | undefined) => {
+    setNotes(prev => prev.map(n =>
+      n.id === noteId ? { ...n, folder, updatedAt: new Date().toISOString() } : n
+    ));
+  }, []);
 
   const handleToggleCollapse = useCallback(() => {
     setIsCollapsed(prev => !prev);
@@ -91,16 +210,16 @@ export default function App() {
     prevUserRef.current = userId;
   }, [user]);
 
-  // Periodic fullSync every 5 minutes while logged in
+  // Periodic fullSync at configured interval while logged in
   useEffect(() => {
     if (!user) return;
     const interval = setInterval(() => {
       SyncService.fullSync().catch(err => console.error('[sync] periodic fullSync failed', err));
-    }, SYNC_INTERVAL);
+    }, syncInterval);
     return () => clearInterval(interval);
-  }, [user]);
+  }, [user, syncInterval]);
 
-  // Provider sync: initial sync + periodic interval (5 min)
+  // Provider sync: initial sync + periodic interval
   useEffect(() => {
     const pConfig = getProviderConfig();
     if (!pConfig?.syncEnabled) return;
@@ -115,10 +234,10 @@ export default function App() {
       if (!currentConfig?.syncEnabled) return;
       ProviderSyncService.syncStatuses(currentConfig)
         .catch(err => console.error('[providerSync] periodic sync failed', err));
-    }, SYNC_INTERVAL);
+    }, syncInterval);
 
     return () => clearInterval(interval);
-  }, []);
+  }, [syncInterval]);
 
   // Get items based on selection
   const items = useMemo(() => {
@@ -278,6 +397,7 @@ export default function App() {
     // At the midpoint of the animation, switch the mode
     setTimeout(() => {
       setBrandMode(m => m === 'flux' ? 'bookmark' : m === 'bookmark' ? 'note' : 'flux');
+      setSelectedNoteId(null);
     }, 600);
     // Close the transition overlay after the animation completes
     setTimeout(() => {
@@ -324,7 +444,7 @@ export default function App() {
 
   return (
     <div className={`app-wrapper ${isCollapsed ? 'app-wrapper--collapsed' : ''}`}>
-      <TitleBar isCollapsed={isCollapsed} onToggleCollapse={handleToggleCollapse} unreadCount={totalUnreadCount} favoritesCount={favoritesCount} readLaterCount={readLaterCount} />
+      <TitleBar isCollapsed={isCollapsed} onToggleCollapse={handleToggleCollapse} unreadCount={totalUnreadCount} favoritesCount={favoritesCount} readLaterCount={readLaterCount} pinnedItems={pinnedItems} categories={store.categories} onSelectFeed={handleSelectFeed} onSync={handleSyncAll} isSyncing={store.isSyncing} showSysInfo={showSysInfo} />
       {!isCollapsed && (
         <div className="app" ref={containerRef}>
           {/* Brand transition overlay */}
@@ -369,6 +489,22 @@ export default function App() {
                   onClose={handleCloseSourcePanel}
                   brandMode={brandMode}
                   onToggleBrand={handleToggleBrand}
+                  onSyncIntervalChange={setSyncInterval}
+                  onShowSysInfoChange={handleShowSysInfoChange}
+                  showSysInfo={showSysInfo}
+                  onPinsChange={setPinnedItems}
+                  notes={notes}
+                  noteFolders={noteFolders}
+                  selectedNoteId={selectedNoteId}
+                  selectedNoteFolder={selectedNoteFolder}
+                  onSelectNote={setSelectedNoteId}
+                  onSelectNoteFolder={setSelectedNoteFolder}
+                  onAddNote={handleAddNote}
+                  onCreateNoteFolder={handleCreateNoteFolder}
+                  onRenameNoteFolder={handleRenameNoteFolder}
+                  onDeleteNoteFolder={handleDeleteNoteFolder}
+                  onMoveNoteToFolder={handleMoveNoteToFolder}
+                  onDeleteNote={handleDeleteNote}
                 />
               </div>
               {allOpen && <ResizeHandle onMouseDown={(e) => handleMouseDown(0, e)} />}
@@ -382,7 +518,16 @@ export default function App() {
           {feedPanelOpen ? (
             <>
               <div className="panel panel-feed" style={allOpen ? { width: `${widths[1]}%` } : { flex: 1 }}>
-                {brandMode !== 'flux' ? (
+                {brandMode === 'note' ? (
+                  <NotePanel
+                    notes={filteredNotes}
+                    selectedNoteId={selectedNoteId}
+                    onSelectNote={setSelectedNoteId}
+                    onAddNote={handleAddNote}
+                    onDeleteNote={handleDeleteNote}
+                    onUpdateNote={handleUpdateNote}
+                  />
+                ) : brandMode === 'bookmark' ? (
                   <div className="panel-empty-note" />
                 ) : (
                   <FeedPanel
@@ -395,6 +540,7 @@ export default function App() {
                     showReadLater={showReadLater}
                     onSelectItem={handleSelectItem}
                     onMarkAllAsRead={() => store.markAllAsRead(selectedFeedId || undefined)}
+                    onMarkAllAsUnread={() => store.markAllAsUnread(selectedFeedId || undefined)}
                     onToggleRead={store.toggleRead}
                     onToggleStar={store.toggleStar}
                     onToggleBookmark={store.toggleBookmark}
@@ -413,7 +559,13 @@ export default function App() {
 
           {readerPanelOpen ? (
             <div className="panel panel-reader" style={{ flex: 1 }}>
-              {brandMode !== 'flux' ? (
+              {brandMode === 'note' ? (
+                <NoteEditor
+                  note={selectedNote}
+                  onUpdateNote={handleUpdateNote}
+                  onClose={() => setSelectedNoteId(null)}
+                />
+              ) : brandMode === 'bookmark' ? (
                 <div className="panel-empty-note" />
               ) : (
                 <ReaderPanel
@@ -450,6 +602,16 @@ export default function App() {
         </div>
       )}
       <UpgradeModal />
+      {syncError && (
+        <div style={{
+          position: 'fixed', bottom: 16, right: 16, zIndex: 9999,
+          background: '#dc2626', color: '#fff', padding: '10px 16px',
+          borderRadius: 8, fontSize: 13, maxWidth: 420, boxShadow: '0 4px 12px rgba(0,0,0,.3)',
+          cursor: 'pointer',
+        }} onClick={() => setSyncError(null)}>
+          {syncError}
+        </div>
+      )}
     </div>
   );
 }
diff --git a/src/components/FeedPanel.tsx b/src/components/FeedPanel.tsx
index 98a8918..8c5f18e 100644
--- a/src/components/FeedPanel.tsx
+++ b/src/components/FeedPanel.tsx
@@ -38,6 +38,7 @@ interface FeedPanelProps {
   showReadLater?: boolean;
   onSelectItem: (item: FeedItem) => void;
   onMarkAllAsRead: () => void;
+  onMarkAllAsUnread: () => void;
   onToggleRead: (itemId: string) => void;
   onToggleStar: (itemId: string) => void;
   onToggleBookmark: (itemId: string) => void;
@@ -111,7 +112,7 @@ function findFeedName(categories: FeedCategory[], feedId: string): string | null
   return null;
 }
 
-export function FeedPanel({ categories, items, selectedFeedId, selectedSource, selectedItemId, showFavorites, showReadLater, onSelectItem, onMarkAllAsRead, onToggleRead, onToggleStar, onToggleBookmark, onReorderItems, onClose }: FeedPanelProps) {
+export function FeedPanel({ categories, items, selectedFeedId, selectedSource, selectedItemId, showFavorites, showReadLater, onSelectItem, onMarkAllAsRead, onMarkAllAsUnread, onToggleRead, onToggleStar, onToggleBookmark, onReorderItems, onClose }: FeedPanelProps) {
   const { isPro, showUpgradeModal } = usePro();
   const [viewMode, setViewMode] = useLocalStorage<ViewMode>('superflux_viewmode', 'normal');
   const compact = viewMode === 'compact';
@@ -350,10 +351,16 @@ export function FeedPanel({ categories, items, selectedFeedId, selectedSource, s
           </button>
           <button
             className="feed-action-btn"
-            title="Tout marquer comme lu"
-            onClick={onMarkAllAsRead}
+            title={unreadCount > 0 ? 'Tout marquer comme lu' : 'Tout marquer comme non lu'}
+            onClick={unreadCount > 0 ? onMarkAllAsRead : onMarkAllAsUnread}
           >
-            ✓
+            <svg width="12" height="12" viewBox="0 0 12 12">
+              {unreadCount > 0 ? (
+                <circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" strokeWidth="1.4" />
+              ) : (
+                <circle cx="6" cy="6" r="4.5" fill="currentColor" stroke="currentColor" strokeWidth="1.4" />
+              )}
+            </svg>
           </button>
           <button
             className={`feed-action-btn ${viewMode === 'cards' ? 'active' : ''}`}
diff --git a/src/components/NoteEditor.tsx b/src/components/NoteEditor.tsx
new file mode 100644
index 0000000..aa70dab
--- /dev/null
+++ b/src/components/NoteEditor.tsx
@@ -0,0 +1,100 @@
+import { useState, useEffect, useRef, useCallback } from 'react';
+import type { Note } from './NotePanel';
+
+interface NoteEditorProps {
+  note: Note | null;
+  onUpdateNote: (noteId: string, updates: { title?: string; content?: string }) => void;
+  onClose: () => void;
+}
+
+function formatEditorDate(iso: string): string {
+  const d = new Date(iso);
+  return d.toLocaleDateString('fr-FR', {
+    day: 'numeric', month: 'long', year: 'numeric',
+    hour: '2-digit', minute: '2-digit',
+  });
+}
+
+export function NoteEditor({ note, onUpdateNote, onClose }: NoteEditorProps) {
+  const [title, setTitle] = useState('');
+  const [content, setContent] = useState('');
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const noteIdRef = useRef<string | null>(null);
+
+  // Sync local state when note changes
+  useEffect(() => {
+    if (note) {
+      setTitle(note.title);
+      setContent(note.content);
+      noteIdRef.current = note.id;
+    }
+  }, [note?.id]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const scheduleUpdate = useCallback((updates: { title?: string; content?: string }) => {
+    if (!noteIdRef.current) return;
+    const id = noteIdRef.current;
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    debounceRef.current = setTimeout(() => {
+      onUpdateNote(id, updates);
+    }, 300);
+  }, [onUpdateNote]);
+
+  const handleTitleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const v = e.target.value;
+    setTitle(v);
+    scheduleUpdate({ title: v, content });
+  }, [scheduleUpdate, content]);
+
+  const handleContentChange = useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const v = e.target.value;
+    setContent(v);
+    scheduleUpdate({ title, content: v });
+  }, [scheduleUpdate, title]);
+
+  // Cleanup debounce on unmount
+  useEffect(() => {
+    return () => {
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+    };
+  }, []);
+
+  if (!note) {
+    return (
+      <div className="note-editor-empty">
+        <span style={{ fontSize: 28, opacity: 0.2, marginBottom: 8 }}>✎</span>
+        <span style={{ fontSize: 13, color: 'var(--text-tertiary)' }}>
+          Sélectionnez une note ou créez-en une nouvelle
+        </span>
+      </div>
+    );
+  }
+
+  return (
+    <div className="note-editor">
+      <div className="note-editor-header">
+        <div className="note-editor-title-row">
+          <input
+            className="note-editor-title"
+            value={title}
+            onChange={handleTitleChange}
+            placeholder="Titre de la note"
+          />
+          <button className="panel-close-btn" title="Fermer" onClick={onClose}>
+            ✕
+          </button>
+        </div>
+        <span className="note-editor-date">
+          Modifié le {formatEditorDate(note.updatedAt)}
+        </span>
+      </div>
+      <div className="note-editor-body">
+        <textarea
+          className="note-editor-content"
+          value={content}
+          onChange={handleContentChange}
+          placeholder="Commencez à écrire..."
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/NotePanel.tsx b/src/components/NotePanel.tsx
new file mode 100644
index 0000000..824afd8
--- /dev/null
+++ b/src/components/NotePanel.tsx
@@ -0,0 +1,126 @@
+import { useState, useCallback } from 'react';
+import { motion } from 'motion/react';
+import { NoteStickyBoard } from './NoteStickyBoard';
+
+export interface Note {
+  id: string;
+  title: string;
+  content: string;
+  folder?: string;
+  createdAt: string;
+  updatedAt: string;
+  // Sticky board properties
+  stickyX?: number;
+  stickyY?: number;
+  stickyRotation?: number;
+  stickyZIndex?: number;
+  stickyColor?: string;
+}
+
+interface NotePanelProps {
+  notes: Note[];
+  selectedNoteId: string | null;
+  onSelectNote: (noteId: string | null) => void;
+  onAddNote: () => void;
+  onDeleteNote: (noteId: string) => void;
+  onUpdateNote: (noteId: string, updates: Partial<Note>) => void;
+}
+
+function formatNoteDate(iso: string): string {
+  const d = new Date(iso);
+  return d.toLocaleDateString('fr-FR', { day: 'numeric', month: 'short', year: 'numeric' });
+}
+
+export function NotePanel({ notes, selectedNoteId, onSelectNote, onAddNote, onDeleteNote, onUpdateNote }: NotePanelProps) {
+  const [viewMode, setViewMode] = useState<'cards' | 'board'>('cards');
+
+  const handleDelete = useCallback((e: React.MouseEvent, noteId: string) => {
+    e.stopPropagation();
+    onDeleteNote(noteId);
+  }, [onDeleteNote]);
+
+  return (
+    <div className="note-panel">
+      <div className="note-panel-header">
+        <div className="note-panel-title-row">
+          <h2 className="note-panel-title">Notes</h2>
+          {notes.length > 0 && (
+            <span className="note-panel-count">{notes.length} note{notes.length > 1 ? 's' : ''}</span>
+          )}
+        </div>
+        <div className="note-panel-actions">
+          <button
+            className={`feed-action-btn ${viewMode === 'cards' ? 'active' : ''}`}
+            title="Vue cartes"
+            onClick={() => setViewMode('cards')}
+          >
+            ▦
+          </button>
+          <button
+            className={`feed-action-btn ${viewMode === 'board' ? 'active' : ''}`}
+            title="Vue post-its"
+            onClick={() => setViewMode('board')}
+          >
+            ▤
+          </button>
+          <button className="feed-action-btn" title="Nouvelle note" onClick={onAddNote}>
+            +
+          </button>
+        </div>
+      </div>
+
+      {viewMode === 'board' ? (
+        <NoteStickyBoard
+          notes={notes}
+          selectedNoteId={selectedNoteId}
+          onSelectNote={onSelectNote}
+          onDeleteNote={onDeleteNote}
+          onUpdateNote={onUpdateNote}
+          onAddNote={onAddNote}
+        />
+      ) : (
+        <div className="note-panel-list">
+          {notes.length === 0 ? (
+            <div className="note-empty">
+              <span className="note-empty-icon">✎</span>
+              <p className="note-empty-text">Aucune note</p>
+              <p className="note-empty-hint">Cliquez sur + pour créer votre première note</p>
+            </div>
+          ) : (
+            <div className="note-cards-grid">
+              {notes.map((note, idx) => (
+                <motion.div
+                  key={note.id}
+                  className={`note-card ${selectedNoteId === note.id ? 'active' : ''}`}
+                  onClick={() => onSelectNote(note.id)}
+                  initial={{ opacity: 0, y: 12 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ delay: idx * 0.04, duration: 0.35, ease: [0.25, 0.1, 0.25, 1] }}
+                >
+                  <div className="note-card-actions">
+                    <button
+                      className="note-card-delete"
+                      title="Supprimer"
+                      onClick={(e) => handleDelete(e, note.id)}
+                    >
+                      <svg width="10" height="10" viewBox="0 0 10 10">
+                        <line x1="1" y1="1" x2="9" y2="9" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" />
+                        <line x1="9" y1="1" x2="1" y2="9" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" />
+                      </svg>
+                    </button>
+                  </div>
+                  <span className="note-card-number">{idx + 1}</span>
+                  <h3 className="note-card-title">{note.title || 'Sans titre'}</h3>
+                  <span className="note-card-date">{formatNoteDate(note.updatedAt)}</span>
+                  <p className="note-card-content">
+                    {note.content || 'Note vide...'}
+                  </p>
+                </motion.div>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/NoteSourceList.tsx b/src/components/NoteSourceList.tsx
new file mode 100644
index 0000000..171376a
--- /dev/null
+++ b/src/components/NoteSourceList.tsx
@@ -0,0 +1,355 @@
+import { useState, useCallback, useRef, useEffect } from 'react';
+import { motion, AnimatePresence } from 'motion/react';
+import type { Note } from './NotePanel';
+
+interface NoteSourceListProps {
+  notes: Note[];
+  folders: string[];
+  selectedNoteId: string | null;
+  selectedFolder: string | null;
+  onSelectNote: (noteId: string) => void;
+  onSelectFolder: (folder: string | null) => void;
+  onAddNote: () => void;
+  onCreateFolder: (name: string) => void;
+  onRenameFolder: (oldName: string, newName: string) => void;
+  onDeleteFolder: (name: string) => void;
+  onMoveNoteToFolder: (noteId: string, folder: string | undefined) => void;
+  onDeleteNote: (noteId: string) => void;
+}
+
+type ContextMenuState =
+  | { kind: 'note'; x: number; y: number; noteId: string; currentFolder?: string }
+  | { kind: 'folder'; x: number; y: number; folder: string }
+  | null;
+
+export function NoteSourceList({
+  notes,
+  folders,
+  selectedNoteId,
+  selectedFolder,
+  onSelectNote,
+  onSelectFolder,
+  onAddNote: _onAddNote,
+  onCreateFolder,
+  onRenameFolder,
+  onDeleteFolder,
+  onMoveNoteToFolder,
+  onDeleteNote,
+}: NoteSourceListProps) {
+  const [expandedFolders, setExpandedFolders] = useState<Set<string>>(new Set(folders));
+  const [newFolderInput, setNewFolderInput] = useState(false);
+  const [newFolderName, setNewFolderName] = useState('');
+  const [renamingFolder, setRenamingFolder] = useState<string | null>(null);
+  const [renameValue, setRenameValue] = useState('');
+  const [contextMenu, setContextMenu] = useState<ContextMenuState>(null);
+  const [moveSubmenuOpen, setMoveSubmenuOpen] = useState(false);
+  const newFolderRef = useRef<HTMLInputElement>(null);
+  const renameRef = useRef<HTMLInputElement>(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 handleRename = useCallback(() => {
+    const name = renameValue.trim();
+    if (name && renamingFolder && name !== renamingFolder && !folders.includes(name)) {
+      onRenameFolder(renamingFolder, name);
+    }
+    setRenamingFolder(null);
+    setRenameValue('');
+  }, [renameValue, renamingFolder, folders, onRenameFolder]);
+
+  const handleNoteContext = useCallback((e: React.MouseEvent, noteId: string, currentFolder?: string) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setMoveSubmenuOpen(false);
+    setContextMenu({ kind: 'note', x: e.clientX, y: e.clientY, noteId, 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);
+  }, []);
+
+  // Close context menu on click/escape
+  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 rootNotes = notes.filter(n => !n.folder);
+
+  const renderNoteItem = (note: Note) => (
+    <div
+      key={note.id}
+      className={`nsrc-note ${selectedNoteId === note.id ? 'active' : ''}`}
+      onClick={() => onSelectNote(note.id)}
+      onContextMenu={(e) => handleNoteContext(e, note.id, note.folder)}
+    >
+      <span className="nsrc-note-icon">✎</span>
+      <span className="nsrc-note-title">{note.title || 'Sans titre'}</span>
+    </div>
+  );
+
+  return (
+    <div className="nsrc">
+      {/* All notes */}
+      <button
+        className={`source-all-btn ${selectedFolder === null && !selectedNoteId ? 'active' : ''}`}
+        onClick={() => onSelectFolder(null)}
+      >
+        <span className="source-all-icon">✎</span>
+        <span className="source-all-label">Toutes les notes</span>
+        <span className="source-all-count">{notes.length}</span>
+      </button>
+
+      {/* New folder button */}
+      <button
+        className="nsrc-add-folder-btn"
+        onClick={() => {
+          setNewFolderInput(true);
+          setTimeout(() => newFolderRef.current?.focus(), 50);
+        }}
+        title="Nouveau dossier"
+      >
+        <span className="nsrc-add-folder-icon">+</span>
+        <span className="nsrc-add-folder-label">Nouveau dossier</span>
+      </button>
+
+      {/* New folder input */}
+      <AnimatePresence>
+        {newFolderInput && (
+          <motion.div
+            className="nsrc-folder-input-row"
+            initial={{ height: 0, opacity: 0 }}
+            animate={{ height: 'auto', opacity: 1 }}
+            exit={{ height: 0, opacity: 0 }}
+            transition={{ duration: 0.2 }}
+          >
+            <input
+              ref={newFolderRef}
+              className="nsrc-folder-input"
+              value={newFolderName}
+              onChange={(e) => setNewFolderName(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') handleCreateFolder();
+                if (e.key === 'Escape') { setNewFolderInput(false); setNewFolderName(''); }
+              }}
+              onBlur={handleCreateFolder}
+              placeholder="Nom du dossier"
+            />
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      {/* Root notes (no folder) */}
+      <div className="nsrc-root-zone">
+        {rootNotes.map(renderNoteItem)}
+      </div>
+
+      {/* Folders */}
+      {folders.map((folder, idx) => {
+        const folderNotes = notes.filter(n => n.folder === folder);
+        const isExpanded = expandedFolders.has(folder);
+
+        return (
+          <motion.div
+            key={folder}
+            className="nsrc-folder"
+            initial={{ opacity: 0, x: -8 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ delay: idx * 0.04, duration: 0.25 }}
+          >
+            <div
+              className={`nsrc-folder-header ${selectedFolder === folder ? 'active' : ''}`}
+              onClick={() => { onSelectFolder(folder); if (!isExpanded) toggleFolder(folder); }}
+              onContextMenu={(e) => handleFolderContext(e, folder)}
+            >
+              <span className="nsrc-folder-icon">📁</span>
+              {renamingFolder === folder ? (
+                <input
+                  ref={renameRef}
+                  className="nsrc-folder-input inline"
+                  value={renameValue}
+                  onChange={(e) => setRenameValue(e.target.value)}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter') handleRename();
+                    if (e.key === 'Escape') { setRenamingFolder(null); setRenameValue(''); }
+                  }}
+                  onBlur={handleRename}
+                  onClick={(e) => e.stopPropagation()}
+                  autoFocus
+                />
+              ) : (
+                <span className="nsrc-folder-name">{folder}</span>
+              )}
+              <span className="nsrc-folder-count">{folderNotes.length}</span>
+              <span
+                className={`category-chevron ${isExpanded ? 'expanded' : ''}`}
+                onClick={(e) => { e.stopPropagation(); toggleFolder(folder); }}
+              >
+                ›
+              </span>
+            </div>
+
+            <AnimatePresence>
+              {isExpanded && (
+                <motion.div
+                  className="nsrc-folder-children"
+                  initial={{ height: 0, opacity: 0 }}
+                  animate={{ height: 'auto', opacity: 1 }}
+                  exit={{ height: 0, opacity: 0 }}
+                  transition={{ duration: 0.2 }}
+                >
+                  {folderNotes.map(renderNoteItem)}
+                  {folderNotes.length === 0 && (
+                    <div className="nsrc-folder-empty">Dossier vide</div>
+                  )}
+                </motion.div>
+              )}
+            </AnimatePresence>
+          </motion.div>
+        );
+      })}
+
+      {/* ── Context menus ── */}
+
+      {/* Note context menu */}
+      {contextMenu?.kind === 'note' && (
+        <div
+          className="feed-context-menu"
+          style={{ top: contextMenu.y, left: contextMenu.x, position: 'fixed', zIndex: 1000 }}
+          onClick={(e) => e.stopPropagation()}
+        >
+          {folders.length > 0 && (
+            <div className="feed-context-menu-submenu-wrapper">
+              <button
+                className="feed-context-menu-item"
+                onMouseEnter={() => setMoveSubmenuOpen(true)}
+              >
+                <span className="feed-context-menu-icon">→</span>
+                Déplacer vers
+                <span className="feed-context-menu-arrow">›</span>
+              </button>
+
+              {moveSubmenuOpen && (
+                <div className="context-submenu">
+                  {/* Move to root (remove from folder) */}
+                  {contextMenu.currentFolder && (
+                    <button
+                      className="feed-context-menu-item"
+                      onClick={() => {
+                        onMoveNoteToFolder(contextMenu.noteId, undefined);
+                        closeContextMenu();
+                      }}
+                    >
+                      Hors dossier
+                    </button>
+                  )}
+                  {/* Move to each folder */}
+                  {folders
+                    .filter(f => f !== contextMenu.currentFolder)
+                    .map(folder => (
+                      <button
+                        key={folder}
+                        className="feed-context-menu-item"
+                        onClick={() => {
+                          onMoveNoteToFolder(contextMenu.noteId, folder);
+                          closeContextMenu();
+                        }}
+                      >
+                        📁 {folder}
+                      </button>
+                    ))}
+                </div>
+              )}
+            </div>
+          )}
+          {!folders.length && contextMenu.currentFolder && (
+            <button
+              className="feed-context-menu-item"
+              onClick={() => {
+                onMoveNoteToFolder(contextMenu.noteId, undefined);
+                closeContextMenu();
+              }}
+            >
+              <span className="feed-context-menu-icon">→</span>
+              Retirer du dossier
+            </button>
+          )}
+          <button
+            className="feed-context-menu-item feed-context-menu-item--danger"
+            onClick={() => {
+              onDeleteNote(contextMenu.noteId);
+              closeContextMenu();
+            }}
+          >
+            <span className="feed-context-menu-icon">✕</span>
+            Supprimer
+          </button>
+        </div>
+      )}
+
+      {/* Folder context menu */}
+      {contextMenu?.kind === 'folder' && (
+        <div
+          className="feed-context-menu"
+          style={{ top: contextMenu.y, left: contextMenu.x, position: 'fixed', zIndex: 1000 }}
+          onClick={(e) => e.stopPropagation()}
+        >
+          <button
+            className="feed-context-menu-item"
+            onClick={() => {
+              setRenamingFolder(contextMenu.folder);
+              setRenameValue(contextMenu.folder);
+              setContextMenu(null);
+              setTimeout(() => renameRef.current?.focus(), 50);
+            }}
+          >
+            <span className="feed-context-menu-icon">✎</span>
+            Renommer
+          </button>
+          <button
+            className="feed-context-menu-item feed-context-menu-item--danger"
+            onClick={() => {
+              onDeleteFolder(contextMenu.folder);
+              setContextMenu(null);
+            }}
+          >
+            <span className="feed-context-menu-icon">✕</span>
+            Supprimer
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/NoteStickyBoard.tsx b/src/components/NoteStickyBoard.tsx
new file mode 100644
index 0000000..fe75803
--- /dev/null
+++ b/src/components/NoteStickyBoard.tsx
@@ -0,0 +1,305 @@
+import { useRef, useState, useCallback, useEffect } from 'react';
+import type { Note } from './NotePanel';
+
+interface NoteStickyBoardProps {
+  notes: Note[];
+  selectedNoteId: string | null;
+  onSelectNote: (noteId: string | null) => void;
+  onDeleteNote: (noteId: string) => void;
+  onUpdateNote: (noteId: string, updates: Partial<Note>) => void;
+  onAddNote: () => void;
+}
+
+const STICKY_COLORS: Record<string, { bg: string; shadow: string; tape: string }> = {
+  yellow: { bg: '#fef9c3', shadow: 'rgba(202,180,50,0.25)', tape: '#fde68a' },
+  pink:   { bg: '#fce7f3', shadow: 'rgba(219,130,170,0.25)', tape: '#fbcfe8' },
+  blue:   { bg: '#dbeafe', shadow: 'rgba(96,145,220,0.25)',  tape: '#bfdbfe' },
+  green:  { bg: '#dcfce7', shadow: 'rgba(74,180,110,0.25)',  tape: '#bbf7d0' },
+  orange: { bg: '#ffedd5', shadow: 'rgba(220,160,80,0.25)',  tape: '#fed7aa' },
+  purple: { bg: '#f3e8ff', shadow: 'rgba(160,110,220,0.25)', tape: '#e9d5ff' },
+};
+
+const COLOR_SWATCHES = [
+  { id: 'yellow', swatch: '#fef9c3', ring: '#facc15' },
+  { id: 'pink',   swatch: '#fce7f3', ring: '#f472b6' },
+  { id: 'blue',   swatch: '#dbeafe', ring: '#60a5fa' },
+  { id: 'green',  swatch: '#dcfce7', ring: '#4ade80' },
+  { id: 'orange', swatch: '#ffedd5', ring: '#fb923c' },
+  { id: 'purple', swatch: '#f3e8ff', ring: '#c084fc' },
+];
+
+function randomRotation() {
+  return (Math.random() - 0.5) * 6;
+}
+
+// ── Single Sticky Note ──
+
+interface StickyNoteItemProps {
+  note: Note;
+  isSelected: boolean;
+  onSelect: () => void;
+  onDelete: () => void;
+  onDragEnd: (x: number, y: number) => void;
+  onContentUpdate: (content: string) => void;
+  onBringToFront: () => void;
+  boardRef: React.RefObject<HTMLDivElement | null>;
+}
+
+function StickyNoteItem({
+  note, isSelected, onSelect, onDelete, onDragEnd,
+  onContentUpdate, onBringToFront, 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 [isEditing, setIsEditing] = useState(false);
+  const [editContent, setEditContent] = useState(note.content);
+  const [position, setPosition] = useState({ x: note.stickyX ?? 40, y: note.stickyY ?? 40 });
+  const dragOffset = useRef({ x: 0, y: 0 });
+  const noteRef = useRef<HTMLDivElement>(null);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  useEffect(() => {
+    setPosition({ x: note.stickyX ?? 40, y: note.stickyY ?? 40 });
+  }, [note.stickyX, note.stickyY]);
+
+  useEffect(() => {
+    if (isEditing && textareaRef.current) {
+      textareaRef.current.focus();
+      textareaRef.current.select();
+    }
+  }, [isEditing]);
+
+  const handlePointerDown = useCallback((e: React.PointerEvent) => {
+    if (isEditing) return;
+    e.preventDefault();
+    const rect = noteRef.current?.getBoundingClientRect();
+    if (!rect) return;
+    dragOffset.current = { x: e.clientX - rect.left, y: e.clientY - rect.top };
+    setIsDragging(true);
+    onBringToFront();
+    onSelect();
+    (e.target as HTMLElement).setPointerCapture(e.pointerId);
+  }, [isEditing, onBringToFront, onSelect]);
+
+  const handlePointerMove = useCallback((e: React.PointerEvent) => {
+    if (!isDragging || !boardRef.current) return;
+    const boardRect = boardRef.current.getBoundingClientRect();
+    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)),
+    });
+  }, [isDragging, boardRef]);
+
+  const handlePointerUp = useCallback((e: React.PointerEvent) => {
+    if (!isDragging) return;
+    (e.target as HTMLElement).releasePointerCapture(e.pointerId);
+    setIsDragging(false);
+    onDragEnd(position.x, position.y);
+  }, [isDragging, position, onDragEnd]);
+
+  const handleSave = () => {
+    onContentUpdate(editContent);
+    setIsEditing(false);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) handleSave();
+    if (e.key === 'Escape') { setEditContent(note.content); setIsEditing(false); }
+  };
+
+  return (
+    <div
+      ref={noteRef}
+      className={`sticky-note ${isDragging ? 'sticky-note--dragging' : ''} ${isSelected ? 'sticky-note--selected' : ''}`}
+      style={{
+        left: position.x,
+        top: position.y,
+        zIndex: note.stickyZIndex ?? 1,
+        backgroundColor: style.bg,
+        boxShadow: isDragging
+          ? '0 12px 40px rgba(0,0,0,0.25)'
+          : `0 4px 16px ${style.shadow}`,
+        transform: `rotate(${isDragging ? 0 : rotation}deg) scale(${isDragging ? 1.05 : 1})`,
+        transition: isDragging
+          ? 'box-shadow 0.2s, transform 0.1s'
+          : 'box-shadow 0.2s, transform 0.3s ease-out',
+      }}
+      onPointerDown={handlePointerDown}
+      onPointerMove={handlePointerMove}
+      onPointerUp={handlePointerUp}
+    >
+      {/* Tape */}
+      <div
+        className="sticky-note-tape"
+        style={{
+          backgroundColor: style.tape,
+          transform: `translateX(-50%) rotate(${rotation > 0 ? -2 : 2}deg)`,
+        }}
+      />
+
+      {/* Header */}
+      <div className="sticky-note-header">
+        <span className="sticky-note-grip">⠿</span>
+        <div className="sticky-note-actions">
+          {isEditing ? (
+            <button className="sticky-note-btn sticky-note-btn--save" onClick={handleSave} title="Sauvegarder">
+              ✓
+            </button>
+          ) : (
+            <button
+              className="sticky-note-btn"
+              onClick={(e) => { e.stopPropagation(); setIsEditing(true); setEditContent(note.content); }}
+              title="Modifier"
+            >
+              ✎
+            </button>
+          )}
+          <button
+            className="sticky-note-btn sticky-note-btn--delete"
+            onClick={(e) => { e.stopPropagation(); onDelete(); }}
+            title="Supprimer"
+          >
+            ✕
+          </button>
+        </div>
+      </div>
+
+      {/* Title */}
+      <div className="sticky-note-title">{note.title || 'Sans titre'}</div>
+
+      {/* Content */}
+      <div className="sticky-note-content">
+        {isEditing ? (
+          <textarea
+            ref={textareaRef}
+            value={editContent}
+            onChange={(e) => setEditContent(e.target.value)}
+            onKeyDown={handleKeyDown}
+            className="sticky-note-textarea"
+            placeholder="Votre note..."
+            onClick={(e) => e.stopPropagation()}
+            onPointerDown={(e) => e.stopPropagation()}
+          />
+        ) : (
+          <p
+            className="sticky-note-text"
+            onDoubleClick={() => { setIsEditing(true); setEditContent(note.content); }}
+          >
+            {note.content || 'Double-cliquez pour modifier...'}
+          </p>
+        )}
+      </div>
+
+      {/* Folded corner */}
+      <div className="sticky-note-corner" />
+    </div>
+  );
+}
+
+// ── Board ──
+
+export function NoteStickyBoard({
+  notes, selectedNoteId, onSelectNote, onDeleteNote, onUpdateNote, onAddNote,
+}: NoteStickyBoardProps) {
+  const boardRef = useRef<HTMLDivElement>(null);
+  const [maxZ, setMaxZ] = useState(() =>
+    Math.max(1, ...notes.map(n => n.stickyZIndex ?? 1))
+  );
+  const [selectedColor, setSelectedColor] = useState('yellow');
+
+  const bringToFront = useCallback((noteId: string) => {
+    const newZ = maxZ + 1;
+    setMaxZ(newZ);
+    onUpdateNote(noteId, { stickyZIndex: newZ });
+  }, [maxZ, onUpdateNote]);
+
+  const handleDragEnd = useCallback((noteId: string, x: number, y: number) => {
+    onUpdateNote(noteId, { stickyX: x, stickyY: y });
+  }, [onUpdateNote]);
+
+  const handleContentUpdate = useCallback((noteId: string, content: string) => {
+    onUpdateNote(noteId, { content });
+  }, [onUpdateNote]);
+
+  const handleAddStickyNote = useCallback(() => {
+    onAddNote();
+    // After adding, we need to set the sticky properties on the newest note
+    // We'll handle this via a useEffect
+  }, [onAddNote]);
+
+  // When a new note appears without sticky props, initialize them
+  useEffect(() => {
+    const boardEl = boardRef.current;
+    const w = boardEl?.clientWidth || 600;
+    const h = boardEl?.clientHeight || 400;
+    for (const note of notes) {
+      if (note.stickyX === undefined) {
+        onUpdateNote(note.id, {
+          stickyX: Math.random() * Math.max(100, w - 260) + 30,
+          stickyY: Math.random() * Math.max(100, h - 260) + 30,
+          stickyRotation: randomRotation(),
+          stickyZIndex: maxZ + 1,
+          stickyColor: selectedColor,
+        });
+        setMaxZ(z => z + 1);
+      }
+    }
+  }, [notes.length]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return (
+    <div className="sticky-board-wrapper">
+      {/* Color picker */}
+      <div className="sticky-board-toolbar">
+        <div className="sticky-color-picker">
+          {COLOR_SWATCHES.map(c => (
+            <button
+              key={c.id}
+              className={`sticky-color-swatch ${selectedColor === c.id ? 'active' : ''}`}
+              style={{
+                backgroundColor: c.swatch,
+                borderColor: selectedColor === c.id ? c.ring : 'transparent',
+              }}
+              onClick={() => setSelectedColor(c.id)}
+              title={c.id}
+            >
+              {selectedColor === c.id && <span className="sticky-color-check">✓</span>}
+            </button>
+          ))}
+        </div>
+        <button className="sticky-add-btn" onClick={handleAddStickyNote} title="Ajouter un post-it">
+          +
+        </button>
+      </div>
+
+      {/* Board surface */}
+      <div ref={boardRef} className="sticky-board">
+        {notes.length === 0 && (
+          <div className="sticky-board-empty">
+            <span className="sticky-board-empty-icon">✎</span>
+            <p>Aucun post-it</p>
+            <p className="sticky-board-empty-hint">Cliquez + pour ajouter</p>
+          </div>
+        )}
+
+        {notes.map(note => (
+          <StickyNoteItem
+            key={note.id}
+            note={note}
+            isSelected={selectedNoteId === note.id}
+            onSelect={() => onSelectNote(note.id)}
+            onDelete={() => onDeleteNote(note.id)}
+            onDragEnd={(x, y) => handleDragEnd(note.id, x, y)}
+            onContentUpdate={(content) => handleContentUpdate(note.id, content)}
+            onBringToFront={() => bringToFront(note.id)}
+            boardRef={boardRef}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/SettingsModal.tsx b/src/components/SettingsModal.tsx
index 5d01d87..ac172db 100644
--- a/src/components/SettingsModal.tsx
+++ b/src/components/SettingsModal.tsx
@@ -14,11 +14,31 @@ import { usePro } from '../contexts/ProContext';
 import { PRO_LIMITS } from '../services/licenseService';
 import { getRSSHubInstance, setRSSHubInstance as setRSSHubInstanceConfig } from '../services/rsshubService';
 
+const SYNC_INTERVAL_KEY = 'superflux_sync_interval';
+const DEFAULT_SYNC_INTERVAL = 5 * 60 * 1000;
+
+const SYNC_OPTIONS = [
+  { value: 1 * 60 * 1000, label: '1 minute' },
+  { value: 3 * 60 * 1000, label: '3 minutes' },
+  { value: 5 * 60 * 1000, label: '5 minutes' },
+  { value: 10 * 60 * 1000, label: '10 minutes' },
+  { value: 15 * 60 * 1000, label: '15 minutes' },
+  { value: 30 * 60 * 1000, label: '30 minutes' },
+  { value: 45 * 60 * 1000, label: '45 minutes' },
+  { value: 60 * 60 * 1000, label: '1 heure' },
+  { value: 3 * 60 * 60 * 1000, label: '3 heures' },
+  { value: 6 * 60 * 60 * 1000, label: '6 heures' },
+  { value: 12 * 60 * 60 * 1000, label: '12 heures' },
+] as const;
+
 interface SettingsModalProps {
   isOpen: boolean;
   onClose: () => void;
   onImportOpml: (feeds: { url: string; name: string; source: FeedSource }[]) => number;
   feedCount?: number;
+  onSyncIntervalChange?: (interval: number) => void;
+  onShowSysInfoChange?: (show: boolean) => void;
+  showSysInfo?: boolean;
 }
 
 interface OpmlFeed {
@@ -113,7 +133,7 @@ function parseOpml(xmlString: string): OpmlFeed[] {
   return feeds;
 }
 
-export function SettingsModal({ isOpen, onClose, onImportOpml, feedCount = 0 }: SettingsModalProps) {
+export function SettingsModal({ isOpen, onClose, onImportOpml, feedCount = 0, onSyncIntervalChange, onShowSysInfoChange, showSysInfo = true }: SettingsModalProps) {
   const { user, signOut, isConfigured } = useAuth();
   const { isPro, deactivateLicense, showUpgradeModal } = usePro();
 
@@ -142,6 +162,15 @@ export function SettingsModal({ isOpen, onClose, onImportOpml, feedCount = 0 }:
   // ── Translation state ──
   const [translationLang, setTranslationLang] = useState(() => getTranslationConfig().targetLanguage);
 
+  // ── Sync interval state ──
+  const [syncIntervalMs, setSyncIntervalMs] = useState(() => {
+    try {
+      const v = localStorage.getItem(SYNC_INTERVAL_KEY);
+      if (v) return Number(v);
+    } catch { /* ignore */ }
+    return DEFAULT_SYNC_INTERVAL;
+  });
+
   // ── RSSHub state ──
   const [rsshubInstance, setRsshubInstance] = useState(getRSSHubInstance);
 
@@ -530,6 +559,46 @@ export function SettingsModal({ isOpen, onClose, onImportOpml, feedCount = 0 }:
                     </div>
                   </>
                 )}
+
+                <label className="settings-label" style={{ marginTop: 12 }}>Infos système dans la barre de titre</label>
+                <div className="settings-format-toggle">
+                  <button
+                    className={`format-option ${showSysInfo ? 'active' : ''}`}
+                    onClick={() => onShowSysInfoChange?.(true)}
+                  >
+                    <span className="format-option-label">Activé</span>
+                  </button>
+                  <button
+                    className={`format-option ${!showSysInfo ? 'active' : ''}`}
+                    onClick={() => onShowSysInfoChange?.(false)}
+                  >
+                    <span className="format-option-label">Désactivé</span>
+                  </button>
+                </div>
+              </div>
+
+              {/* ── Synchronisation ── */}
+              <div className="settings-section">
+                <h3 className="settings-section-title">Synchronisation</h3>
+                <p className="settings-section-desc">
+                  Fréquence de mise à jour automatique de tous les flux.
+                </p>
+
+                <label className="settings-label">Intervalle de synchronisation</label>
+                <select
+                  className="provider-input"
+                  value={syncIntervalMs}
+                  onChange={(e) => {
+                    const v = Number(e.target.value);
+                    setSyncIntervalMs(v);
+                    localStorage.setItem(SYNC_INTERVAL_KEY, String(v));
+                    onSyncIntervalChange?.(v);
+                  }}
+                >
+                  {SYNC_OPTIONS.map(o => (
+                    <option key={o.value} value={o.value}>{o.label}</option>
+                  ))}
+                </select>
               </div>
 
               {/* ── RSSHub ── */}
diff --git a/src/components/SourcePanel.tsx b/src/components/SourcePanel.tsx
index f6959a8..e10a1d8 100644
--- a/src/components/SourcePanel.tsx
+++ b/src/components/SourcePanel.tsx
@@ -12,6 +12,8 @@ import { UserMenu } from "./UserMenu";
 import { usePro } from "../contexts/ProContext";
 import { PRO_LIMITS } from "../services/licenseService";
 import { isRSSHubUrl } from "../services/rsshubService";
+import { NoteSourceList } from "./NoteSourceList";
+import type { Note } from "./NotePanel";
 
 interface SourcePanelProps {
   categories: FeedCategory[];
@@ -42,6 +44,23 @@ interface SourcePanelProps {
   onClose?: () => void;
   brandMode: 'flux' | 'note' | 'bookmark';
   onToggleBrand: () => void;
+  onSyncIntervalChange?: (interval: number) => void;
+  onShowSysInfoChange?: (show: boolean) => void;
+  showSysInfo?: boolean;
+  onPinsChange?: (pins: PinEntry[]) => void;
+  // Note mode props
+  notes?: Note[];
+  noteFolders?: string[];
+  selectedNoteId?: string | null;
+  selectedNoteFolder?: string | null;
+  onSelectNote?: (noteId: string) => void;
+  onSelectNoteFolder?: (folder: string | null) => void;
+  onAddNote?: () => void;
+  onCreateNoteFolder?: (name: string) => void;
+  onRenameNoteFolder?: (oldName: string, newName: string) => void;
+  onDeleteNoteFolder?: (name: string) => void;
+  onMoveNoteToFolder?: (noteId: string, folder: string | undefined) => void;
+  onDeleteNote?: (noteId: string) => void;
 }
 
 const sourceIcons: Record<string, string> = {
@@ -90,6 +109,29 @@ function buildFolderTree(paths: string[]): FolderNode[] {
   return root;
 }
 
+// ── Pinned feeds/folders ──
+const PINS_KEY = 'superflux_pinned';
+
+export type PinEntry =
+  | { kind: 'feed'; feedId: string; label: string; icon: string }
+  | { kind: 'folder'; categoryId: string; folderPath: string; label: string };
+
+export function getPinnedItems(): PinEntry[] {
+  try {
+    const v = localStorage.getItem(PINS_KEY);
+    if (v) return JSON.parse(v);
+  } catch { /* ignore */ }
+  return [];
+}
+
+function savePinnedItems(pins: PinEntry[]) {
+  localStorage.setItem(PINS_KEY, JSON.stringify(pins));
+}
+
+function pinKey(pin: PinEntry): string {
+  return pin.kind === 'feed' ? `feed::${pin.feedId}` : `folder::${pin.categoryId}::${pin.folderPath}`;
+}
+
 // Indentation constants (px per nesting depth)
 const INDENT_STEP = 14;
 const FOLDER_BASE_INDENT = 24;
@@ -124,6 +166,22 @@ export function SourcePanel({
   onClose,
   brandMode,
   onToggleBrand,
+  onSyncIntervalChange,
+  onShowSysInfoChange,
+  showSysInfo,
+  onPinsChange,
+  notes = [],
+  noteFolders = [],
+  selectedNoteId = null,
+  selectedNoteFolder = null,
+  onSelectNote,
+  onSelectNoteFolder,
+  onAddNote,
+  onCreateNoteFolder,
+  onRenameNoteFolder,
+  onDeleteNoteFolder,
+  onMoveNoteToFolder,
+  onDeleteNote,
 }: SourcePanelProps) {
   const { isPro, showUpgradeModal } = usePro();
 
@@ -140,6 +198,7 @@ export function SourcePanel({
   const [isAboutOpen, setIsAboutOpen] = useState(false);
   const [contextMenu, setContextMenu] = useState<ContextMenuState>(null);
   const [moveSubmenuFeedId, setMoveSubmenuFeedId] = useState<string | null>(null);
+  const [pinnedItems, setPinnedItems] = useState<PinEntry[]>(getPinnedItems);
 
   // Inline inputs (parentPath: where to create; oldPath: which folder to rename)
   const [newFolderInput, setNewFolderInput] = useState<{ categoryId: string; value: string; parentPath?: string } | null>(null);
@@ -187,6 +246,21 @@ export function SourcePanel({
     setContextMenu({ kind: 'folder', x: e.clientX, y: e.clientY, categoryId, folderPath });
   }, []);
 
+  const togglePin = useCallback((entry: PinEntry) => {
+    setPinnedItems(prev => {
+      const key = pinKey(entry);
+      const exists = prev.some(p => pinKey(p) === key);
+      const next = exists ? prev.filter(p => pinKey(p) !== key) : [...prev, entry];
+      savePinnedItems(next);
+      onPinsChange?.(next);
+      return next;
+    });
+  }, [onPinsChange]);
+
+  const isPinned = useCallback((entry: PinEntry) => {
+    return pinnedItems.some(p => pinKey(p) === pinKey(entry));
+  }, [pinnedItems]);
+
   // Close all context menus on click/escape
   useEffect(() => {
     if (!contextMenu) return;
@@ -467,7 +541,24 @@ export function SourcePanel({
       </div>
 
       <div className="source-panel-content">
-        {brandMode !== 'flux' ? (
+        {brandMode === 'note' ? (
+          onSelectNote && onSelectNoteFolder && onAddNote && onCreateNoteFolder && onRenameNoteFolder && onDeleteNoteFolder && onMoveNoteToFolder && onDeleteNote ? (
+            <NoteSourceList
+              notes={notes}
+              folders={noteFolders}
+              selectedNoteId={selectedNoteId}
+              selectedFolder={selectedNoteFolder}
+              onSelectNote={onSelectNote}
+              onSelectFolder={onSelectNoteFolder}
+              onAddNote={onAddNote}
+              onCreateFolder={onCreateNoteFolder}
+              onRenameFolder={onRenameNoteFolder}
+              onDeleteFolder={onDeleteNoteFolder}
+              onMoveNoteToFolder={onMoveNoteToFolder}
+              onDeleteNote={onDeleteNote}
+            />
+          ) : <div className="panel-empty-note" />
+        ) : brandMode === 'bookmark' ? (
           <div className="panel-empty-note" />
         ) : (
         <>
@@ -648,6 +739,9 @@ export function SourcePanel({
         onClose={() => setIsSettingsOpen(false)}
         onImportOpml={onImportOpml}
         feedCount={totalFeeds}
+        onSyncIntervalChange={onSyncIntervalChange}
+        onShowSysInfoChange={onShowSysInfoChange}
+        showSysInfo={showSysInfo}
       />
 
       <StatsModal
@@ -806,6 +900,17 @@ export function SourcePanel({
             <span className="feed-context-menu-icon">✎</span>
             Renommer
           </button>
+          <button
+            className="feed-context-menu-item"
+            onClick={() => {
+              const folderName = contextMenu.folderPath.split('/').pop()!;
+              togglePin({ kind: 'folder', categoryId: contextMenu.categoryId, folderPath: contextMenu.folderPath, label: folderName });
+              setContextMenu(null);
+            }}
+          >
+            <span className="feed-context-menu-icon">{isPinned({ kind: 'folder', categoryId: contextMenu.categoryId, folderPath: contextMenu.folderPath, label: '' }) ? '✦' : '☆'}</span>
+            {isPinned({ kind: 'folder', categoryId: contextMenu.categoryId, folderPath: contextMenu.folderPath, label: '' }) ? 'Désépingler' : 'Épingler en haut'}
+          </button>
           <button
             className="feed-context-menu-item feed-context-menu-item--danger"
             onClick={() => {
@@ -831,6 +936,17 @@ export function SourcePanel({
             style={{ top: contextMenu.y, left: contextMenu.x }}
             onClick={(e) => e.stopPropagation()}
           >
+            <button
+              className="feed-context-menu-item"
+              onClick={() => {
+                const feed = contextMenu.feed;
+                togglePin({ kind: 'feed', feedId: feed.id, label: feed.name, icon: feed.icon || sourceIcons[feed.source] || '◇' });
+                setContextMenu(null);
+              }}
+            >
+              <span className="feed-context-menu-icon">{isPinned({ kind: 'feed', feedId: contextMenu.feed.id, label: '', icon: '' }) ? '✦' : '☆'}</span>
+              {isPinned({ kind: 'feed', feedId: contextMenu.feed.id, label: '', icon: '' }) ? 'Désépingler' : 'Épingler en haut'}
+            </button>
             <button
               className="feed-context-menu-item"
               onClick={() => {
diff --git a/src/components/TitleBar.tsx b/src/components/TitleBar.tsx
index ef11c86..98a930c 100644
--- a/src/components/TitleBar.tsx
+++ b/src/components/TitleBar.tsx
@@ -2,6 +2,8 @@ import { useState, useEffect, useCallback } from 'react';
 import { invoke } from '@tauri-apps/api/core';
 import { getCurrentWindow } from '@tauri-apps/api/window';
 import { fetchViaBackend } from '../lib/tauriFetch';
+import type { PinEntry } from './SourcePanel';
+import type { FeedCategory, FeedSource } from '../types';
 
 const appWindow = getCurrentWindow();
 
@@ -11,6 +13,12 @@ interface TitleBarProps {
   unreadCount?: number;
   favoritesCount?: number;
   readLaterCount?: number;
+  pinnedItems?: PinEntry[];
+  categories?: FeedCategory[];
+  onSelectFeed?: (feedId: string, source: FeedSource) => void;
+  onSync?: () => void;
+  isSyncing?: boolean;
+  showSysInfo?: boolean;
 }
 
 interface WeatherData {
@@ -49,6 +57,11 @@ function getWeatherIcon(code: number): string {
   return weatherIcons[code] ?? '\u2600';
 }
 
+function formatSpeed(kbps: number): string {
+  if (kbps >= 1024) return `${(kbps / 1024).toFixed(1)} MB/s`;
+  return `${Math.round(kbps)} KB/s`;
+}
+
 function formatTime(date: Date): string {
   return date.toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' });
 }
@@ -57,10 +70,13 @@ function formatDate(date: Date): string {
   return date.toLocaleDateString('fr-FR', { weekday: 'short', day: 'numeric', month: 'short' });
 }
 
-export function TitleBar({ isCollapsed, onToggleCollapse, unreadCount = 0, favoritesCount = 0, readLaterCount = 0 }: TitleBarProps) {
+export function TitleBar({ isCollapsed, onToggleCollapse, unreadCount = 0, favoritesCount = 0, readLaterCount = 0, pinnedItems = [], categories = [], onSelectFeed, onSync, isSyncing = false, showSysInfo = true }: TitleBarProps) {
   const [isMaximized, setIsMaximized] = useState(false);
   const [now, setNow] = useState(new Date());
   const [weather, setWeather] = useState<WeatherData | null>(null);
+  const [cpuUsage, setCpuUsage] = useState<number | null>(null);
+  const [memUsage, setMemUsage] = useState<{ used_gb: number; total_gb: number; percent: number } | null>(null);
+  const [netSpeed, setNetSpeed] = useState<{ download_kbps: number; upload_kbps: number } | null>(null);
   const [alwaysOnTop, setAlwaysOnTop] = useState(() => {
     try { return localStorage.getItem('superflux_always_on_top') === 'true'; }
     catch { return false; }
@@ -93,6 +109,31 @@ export function TitleBar({ isCollapsed, onToggleCollapse, unreadCount = 0, favor
     return () => clearInterval(interval);
   }, []);
 
+  // System monitors: poll every 2s when collapsed and sysinfo visible
+  useEffect(() => {
+    if (!isCollapsed || !showSysInfo) {
+      setCpuUsage(null);
+      setMemUsage(null);
+      setNetSpeed(null);
+      return;
+    }
+    let cancelled = false;
+    const poll = () => {
+      invoke<number>('get_cpu_usage')
+        .then(v => { if (!cancelled) setCpuUsage(Math.round(v)); })
+        .catch(() => {});
+      invoke<{ used_gb: number; total_gb: number; percent: number }>('get_memory_usage')
+        .then(v => { if (!cancelled) setMemUsage(v); })
+        .catch(() => {});
+      invoke<{ download_kbps: number; upload_kbps: number }>('get_net_speed')
+        .then(v => { if (!cancelled) setNetSpeed(v); })
+        .catch(() => {});
+    };
+    poll();
+    const interval = setInterval(poll, 2000);
+    return () => { cancelled = true; clearInterval(interval); };
+  }, [isCollapsed, showSysInfo]);
+
   // Weather: fetch on mount + every 15 minutes
   useEffect(() => {
     let cancelled = false;
@@ -162,6 +203,50 @@ export function TitleBar({ isCollapsed, onToggleCollapse, unreadCount = 0, favor
             )}
           </div>
         )}
+        {isCollapsed && pinnedItems.length > 0 && (
+          <div className="titlebar-pins">
+            {pinnedItems.map(pin => {
+              let count = 0;
+              let icon = '◇';
+              let label = '';
+              if (pin.kind === 'feed') {
+                for (const cat of categories) {
+                  const feed = cat.feeds.find(f => f.id === pin.feedId);
+                  if (feed) { count = feed.unreadCount; icon = pin.icon; label = pin.label; break; }
+                }
+              } else {
+                const cat = categories.find(c => c.id === pin.categoryId);
+                if (cat) {
+                  count = cat.feeds
+                    .filter(f => f.folder === pin.folderPath || f.folder?.startsWith(pin.folderPath + '/'))
+                    .reduce((s, f) => s + f.unreadCount, 0);
+                  icon = '📁';
+                  label = pin.label;
+                }
+              }
+              const key = pin.kind === 'feed' ? `feed::${pin.feedId}` : `folder::${pin.categoryId}::${pin.folderPath}`;
+              return (
+                <button
+                  key={key}
+                  className="titlebar-pin"
+                  title={label}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    if (pin.kind === 'feed' && onSelectFeed) {
+                      const cat = categories.find(c => c.feeds.some(f => f.id === pin.feedId));
+                      const feed = cat?.feeds.find(f => f.id === pin.feedId);
+                      if (feed) onSelectFeed(feed.id, feed.source);
+                    }
+                  }}
+                >
+                  <span className="titlebar-pin-icon">{icon}</span>
+                  <span className="titlebar-pin-label">{label}</span>
+                  {count > 0 && <span className="titlebar-pin-badge">{count}</span>}
+                </button>
+              );
+            })}
+          </div>
+        )}
       </div>
       {isCollapsed && (
         <div className="titlebar-info" data-tauri-drag-region>
@@ -176,6 +261,28 @@ export function TitleBar({ isCollapsed, onToggleCollapse, unreadCount = 0, favor
           </span>
         </div>
       )}
+      {isCollapsed && showSysInfo && (
+        <div className="titlebar-sysinfo" data-tauri-drag-region>
+          {cpuUsage !== null && (
+            <span className={`titlebar-monitor ${cpuUsage > 80 ? 'titlebar-monitor--high' : cpuUsage > 50 ? 'titlebar-monitor--mid' : ''}`} data-tauri-drag-region title="CPU">
+              <span className="titlebar-monitor-bar" style={{ width: `${cpuUsage}%` }} />
+              <span className="titlebar-monitor-text">CPU {cpuUsage}%</span>
+            </span>
+          )}
+          {memUsage !== null && (
+            <span className={`titlebar-monitor ${memUsage.percent > 85 ? 'titlebar-monitor--high' : memUsage.percent > 65 ? 'titlebar-monitor--mid' : ''}`} data-tauri-drag-region title={`RAM ${memUsage.used_gb} / ${memUsage.total_gb} Go`}>
+              <span className="titlebar-monitor-bar" style={{ width: `${memUsage.percent}%` }} />
+              <span className="titlebar-monitor-text">RAM {memUsage.used_gb}G</span>
+            </span>
+          )}
+          {netSpeed !== null && (
+            <span className="titlebar-net" data-tauri-drag-region title="Réseau">
+              <span className="titlebar-net-row">↓ {formatSpeed(netSpeed.download_kbps)}</span>
+              <span className="titlebar-net-row">↑ {formatSpeed(netSpeed.upload_kbps)}</span>
+            </span>
+          )}
+        </div>
+      )}
       <div className="titlebar-controls">
         {!isCollapsed && (
           <>
@@ -207,6 +314,19 @@ export function TitleBar({ isCollapsed, onToggleCollapse, unreadCount = 0, favor
             </button>
           </>
         )}
+        {isCollapsed && onSync && (
+          <button
+            className={`titlebar-btn titlebar-btn-sync ${isSyncing ? 'syncing' : ''}`}
+            onClick={onSync}
+            disabled={isSyncing}
+            title={isSyncing ? 'Synchronisation en cours…' : 'Forcer la synchronisation'}
+          >
+            <svg width="11" height="11" viewBox="0 0 11 11">
+              <path d="M5.5 1 A4.5 4.5 0 1 1 1 5.5" fill="none" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" />
+              <polyline points="5.5,0 5.5,2.5 3,1" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
+            </svg>
+          </button>
+        )}
         {isCollapsed && (
           <button
             className={`titlebar-btn titlebar-btn-pin ${alwaysOnTop ? 'active' : ''}`}
diff --git a/src/contexts/AuthContext.tsx b/src/contexts/AuthContext.tsx
index 196d942..f8894aa 100644
--- a/src/contexts/AuthContext.tsx
+++ b/src/contexts/AuthContext.tsx
@@ -1,6 +1,9 @@
 import { createContext, useContext, useEffect, useState, useCallback, type ReactNode } from 'react';
 import { supabase, isSupabaseConfigured } from '../lib/supabase';
 import type { User, Session } from '@supabase/supabase-js';
+import { invoke } from '@tauri-apps/api/core';
+import { listen } from '@tauri-apps/api/event';
+import { WebviewWindow } from '@tauri-apps/api/webviewWindow';
 
 interface AuthState {
   user: User | null;
@@ -52,13 +55,60 @@ export function AuthProvider({ children }: { children: ReactNode }) {
   }, []);
 
   const signInWithOAuth = useCallback(async (provider: 'google' | 'github') => {
-    const { error } = await supabase.auth.signInWithOAuth({ provider });
+    const { data, error } = await supabase.auth.signInWithOAuth({
+      provider,
+      options: {
+        skipBrowserRedirect: true,
+        redirectTo: 'http://localhost/auth/callback',
+      },
+    });
     if (error) throw error;
+    if (!data.url) return;
+
+    // Listen for the auth callback from the Tauri auth window
+    const unlisten = await listen<string>('auth-callback', async (event) => {
+      unlisten();
+      // Close the auth window
+      const authWindow = await WebviewWindow.getByLabel('auth');
+      if (authWindow) await authWindow.close();
+
+      // Extract PKCE code from callback URL and establish session
+      try {
+        const callbackUrl = new URL(event.payload);
+        const code = callbackUrl.searchParams.get('code');
+        if (code) {
+          const { data, error } = await supabase.auth.exchangeCodeForSession(code);
+          if (error) throw error;
+          // Explicitly update auth state so downstream sync triggers immediately
+          if (data.session) {
+            setState({ user: data.session.user, session: data.session, loading: false });
+          }
+        }
+      } catch (e) {
+        console.error('[auth] Failed to exchange code:', e);
+      }
+    });
+
+    // Open a separate Tauri window for the OAuth flow
+    await invoke('open_auth_window', { url: data.url });
   }, []);
 
   const signOut = useCallback(async () => {
     const { error } = await supabase.auth.signOut();
     if (error) throw error;
+    // Clear all user data from localStorage
+    const userDataKeys = [
+      'superflux_feeds',
+      'superflux_items',
+      'superflux_folders',
+      'superflux_favorites_order',
+      'superflux_readlater_order',
+      'superflux_highlights',
+      'superflux_notes',
+      'superflux_note_folders',
+      'superflux_last_sync',
+    ];
+    userDataKeys.forEach(key => localStorage.removeItem(key));
   }, []);
 
   return (
diff --git a/src/hooks/useFeedStore.ts b/src/hooks/useFeedStore.ts
index 01b3ccb..d79d777 100644
--- a/src/hooks/useFeedStore.ts
+++ b/src/hooks/useFeedStore.ts
@@ -130,6 +130,7 @@ export interface FeedStore {
   syncAll: () => Promise<void>;
   markAsRead: (itemId: string) => void;
   markAllAsRead: (feedId?: string) => void;
+  markAllAsUnread: (feedId?: string) => void;
   toggleRead: (itemId: string) => void;
   toggleStar: (itemId: string) => void;
   toggleBookmark: (itemId: string) => void;
@@ -377,6 +378,24 @@ export function useFeedStore(callbacks?: FeedStoreCallbacks): FeedStore {
     });
   }, []);
 
+  // Mark all as unread
+  const markAllAsUnread = useCallback((feedId?: string) => {
+    let changedItems: FeedItem[] = [];
+    setItems(prev => {
+      const now = new Date().toISOString();
+      const next = prev.map(item =>
+        (!feedId || item.feedId === feedId) && item.isRead
+          ? { ...item, isRead: false, updated_at: now }
+          : item
+      );
+      changedItems = next.filter((item, i) => item !== prev[i]);
+      return next;
+    });
+    queueMicrotask(() => {
+      if (changedItems.length > 0) cbRef.current?.onItemsChanged?.(changedItems);
+    });
+  }, []);
+
   // Toggle read/unread
   const toggleRead = useCallback((itemId: string) => {
     updateItem(itemId, item => ({ ...item, isRead: !item.isRead, updated_at: new Date().toISOString() }));
@@ -564,6 +583,7 @@ export function useFeedStore(callbacks?: FeedStoreCallbacks): FeedStore {
     syncAll,
     markAsRead,
     markAllAsRead,
+    markAllAsUnread,
     toggleRead,
     toggleStar,
     toggleBookmark,
diff --git a/src/index.css b/src/index.css
index 8b9b5aa..a85cd4d 100644
--- a/src/index.css
+++ b/src/index.css
@@ -275,6 +275,13 @@ body {
     letter-spacing: 0.02em;
 }
 
+.titlebar-sysinfo {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    margin-right: 8px;
+}
+
 .titlebar-controls {
     display: flex;
     height: 100%;
@@ -318,6 +325,20 @@ body {
     color: var(--accent-text);
 }
 
+.titlebar-btn-sync.syncing svg {
+    animation: spin 1s linear infinite;
+}
+
+.titlebar-btn-sync:disabled {
+    opacity: 0.5;
+    cursor: default;
+}
+
+@keyframes spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+}
+
 /* Collapsed / bar mode */
 .app-wrapper--collapsed {
     border-radius: 10px;
@@ -383,6 +404,60 @@ body {
     border: 1px solid var(--border-default);
 }
 
+.titlebar-pins {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    margin-left: 8px;
+    padding-left: 8px;
+    border-left: 1px solid var(--border-subtle);
+}
+
+.titlebar-pin {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 2px 6px;
+    border: none;
+    border-radius: var(--radius-sm);
+    background: var(--bg-elevated);
+    cursor: pointer;
+    font-size: 11px;
+    color: var(--text-secondary);
+    transition: background var(--duration-fast) var(--ease-out),
+                color var(--duration-fast) var(--ease-out);
+    white-space: nowrap;
+}
+
+.titlebar-pin:hover {
+    background: var(--bg-active);
+    color: var(--text-primary);
+}
+
+.titlebar-pin-icon {
+    font-size: 12px;
+    line-height: 1;
+}
+
+.titlebar-pin-label {
+    max-width: 80px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.titlebar-pin-badge {
+    min-width: 14px;
+    height: 14px;
+    padding: 0 3px;
+    border-radius: 7px;
+    background: var(--accent);
+    color: #fff;
+    font-size: 9px;
+    font-weight: 700;
+    line-height: 14px;
+    text-align: center;
+}
+
 .titlebar-info {
     display: flex;
     align-items: center;
@@ -390,6 +465,70 @@ body {
     margin-right: var(--space-sm);
 }
 
+.titlebar-monitor {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 46px;
+    height: 14px;
+    border-radius: 3px;
+    background: var(--bg-elevated);
+    overflow: hidden;
+    font-size: 8px;
+    font-weight: 600;
+    margin-right: 4px;
+}
+
+.titlebar-monitor-bar {
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    background: var(--accent);
+    opacity: 0.25;
+    transition: width 1s ease-out;
+    border-radius: 4px;
+}
+
+.titlebar-monitor--mid .titlebar-monitor-bar {
+    background: #f59e0b;
+    opacity: 0.35;
+}
+
+.titlebar-monitor--high .titlebar-monitor-bar {
+    background: #ef4444;
+    opacity: 0.4;
+}
+
+.titlebar-monitor-text {
+    position: relative;
+    z-index: 1;
+    color: var(--text-secondary);
+}
+
+.titlebar-monitor--high .titlebar-monitor-text {
+    color: #ef4444;
+}
+
+.titlebar-net {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 1px;
+    margin-right: 6px;
+    font-size: 9px;
+    font-weight: 600;
+    font-family: var(--font-mono, monospace);
+    color: var(--text-tertiary);
+    line-height: 1.1;
+    white-space: nowrap;
+}
+
+.titlebar-net-row:first-child {
+    color: var(--accent);
+}
+
 .titlebar-weather {
     font-family: var(--font-body);
     font-size: 13px;
@@ -450,6 +589,745 @@ body {
     height: 100%;
 }
 
+/* ═══════════════════════════════════════════════
+   SUPERNOTE — Note Panel & Cards
+   ═══════════════════════════════════════════════ */
+
+.note-panel {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    background: var(--bg-root);
+}
+
+.note-panel-header {
+    padding: var(--space-lg) var(--space-lg) var(--space-md);
+    border-bottom: 1px solid var(--border-subtle);
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.note-panel-title-row {
+    display: flex;
+    align-items: baseline;
+    gap: var(--space-md);
+}
+
+.note-panel-title {
+    font-family: var(--font-display);
+    font-size: 20px;
+    font-weight: 600;
+    color: var(--text-primary);
+    letter-spacing: -0.01em;
+}
+
+.note-panel-count {
+    font-size: 11px;
+    font-weight: 500;
+    color: var(--accent-dim);
+    letter-spacing: 0.02em;
+}
+
+.note-panel-actions {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+}
+
+.note-panel-list {
+    flex: 1;
+    overflow-y: auto;
+    padding: var(--space-lg);
+}
+
+/* 2-column staggered grid */
+.note-cards-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: var(--space-xl);
+}
+
+/* Note card with hover expand */
+.note-card {
+    border: 1px solid var(--border-subtle);
+    border-radius: 12px;
+    padding: var(--space-lg);
+    height: 150px;
+    overflow: hidden;
+    cursor: pointer;
+    position: relative;
+    background: var(--bg-surface);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+    transition: all 0.4s cubic-bezier(0.34, 1.7, 0.64, 1);
+    display: flex;
+    flex-direction: column;
+}
+
+.note-card:nth-child(even) {
+    margin-top: 40px;
+}
+
+.note-card:hover {
+    height: 260px;
+    transform: translateY(-5px);
+    border-color: var(--border-strong);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
+    z-index: 10;
+}
+
+.note-card.active {
+    border-color: var(--accent);
+    box-shadow: 0 0 0 1px var(--accent), 0 4px 16px var(--accent-glow);
+}
+
+.note-card-number {
+    font-family: var(--font-display);
+    font-size: 24px;
+    font-weight: 700;
+    color: var(--accent);
+    opacity: 0.25;
+    line-height: 1;
+    margin-bottom: var(--space-xs);
+}
+
+.note-card-title {
+    font-family: var(--font-body);
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--text-primary);
+    margin-bottom: 2px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.note-card-date {
+    font-size: 10px;
+    color: var(--text-tertiary);
+    margin-bottom: var(--space-sm);
+}
+
+.note-card-content {
+    font-size: 12px;
+    color: var(--text-secondary);
+    line-height: 1.5;
+    opacity: 0;
+    max-height: 0;
+    transition: opacity 0.35s ease, max-height 0.35s ease;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 5;
+    -webkit-box-orient: vertical;
+}
+
+.note-card:hover .note-card-content {
+    opacity: 1;
+    max-height: 120px;
+}
+
+.note-card-actions {
+    position: absolute;
+    top: var(--space-sm);
+    right: var(--space-sm);
+    opacity: 0;
+    transition: opacity 0.2s ease;
+}
+
+.note-card:hover .note-card-actions {
+    opacity: 1;
+}
+
+.note-card-delete {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 22px;
+    height: 22px;
+    border: none;
+    border-radius: 6px;
+    background: transparent;
+    color: var(--text-tertiary);
+    cursor: pointer;
+    transition: all var(--duration-fast) var(--ease-out);
+}
+
+.note-card-delete:hover {
+    background: var(--bg-hover);
+    color: var(--red);
+}
+
+/* Empty state */
+.note-empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: var(--space-3xl) var(--space-xl);
+    text-align: center;
+    gap: var(--space-sm);
+    height: 100%;
+}
+
+.note-empty-icon {
+    font-size: 32px;
+    color: var(--accent);
+    opacity: 0.3;
+    margin-bottom: var(--space-sm);
+}
+
+.note-empty-text {
+    font-family: var(--font-display);
+    font-size: 15px;
+    font-weight: 500;
+    color: var(--text-secondary);
+}
+
+.note-empty-hint {
+    font-size: 12px;
+    color: var(--text-tertiary);
+    max-width: 220px;
+    line-height: 1.5;
+}
+
+/* ═══════════════════════════════════════════════
+   SUPERNOTE — Source List (panel 1)
+   ═══════════════════════════════════════════════ */
+
+.nsrc {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    padding: var(--space-sm) 0;
+}
+
+.nsrc-add-folder-btn {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+    width: 100%;
+    padding: 6px var(--space-lg);
+    background: none;
+    border: none;
+    color: var(--text-tertiary);
+    font-size: 12px;
+    cursor: pointer;
+    transition: color var(--duration-fast) var(--ease-out);
+}
+
+.nsrc-add-folder-btn:hover {
+    color: var(--accent);
+}
+
+.nsrc-add-folder-icon {
+    font-size: 14px;
+    font-weight: 600;
+    width: 16px;
+    text-align: center;
+}
+
+.nsrc-add-folder-label {
+    font-weight: 500;
+}
+
+.nsrc-folder-input-row {
+    padding: 2px var(--space-lg);
+    overflow: hidden;
+}
+
+.nsrc-folder-input {
+    width: 100%;
+    padding: 4px 8px;
+    font-size: 12px;
+    font-family: var(--font-body);
+    background: var(--bg-elevated);
+    border: 1px solid var(--border-default);
+    border-radius: 6px;
+    color: var(--text-primary);
+    outline: none;
+}
+
+.nsrc-folder-input:focus {
+    border-color: var(--accent);
+}
+
+.nsrc-folder-input.inline {
+    padding: 2px 6px;
+    font-size: 12px;
+    flex: 1;
+}
+
+.nsrc-root-zone {
+    display: flex;
+    flex-direction: column;
+}
+
+.nsrc-note {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+    padding: 5px var(--space-lg) 5px calc(var(--space-lg) + 8px);
+    margin: 2px var(--space-sm);
+    cursor: pointer;
+    font-size: 12px;
+    color: var(--text-secondary);
+    transition: all var(--duration-fast) var(--ease-out);
+    border-radius: 6px;
+    user-select: none;
+    background: var(--bg-surface);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
+}
+
+.nsrc-note:hover {
+    background: var(--bg-hover);
+    color: var(--text-primary);
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06);
+}
+
+.nsrc-note.active {
+    background: var(--accent-glow);
+    color: var(--accent-text);
+}
+
+
+.nsrc-note-icon {
+    font-size: 11px;
+    opacity: 0.5;
+    flex-shrink: 0;
+}
+
+.nsrc-note-title {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-weight: 500;
+}
+
+.nsrc-folder {
+    display: flex;
+    flex-direction: column;
+}
+
+.nsrc-folder-header {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+    padding: 6px var(--space-lg);
+    cursor: pointer;
+    font-size: 12px;
+    color: var(--text-secondary);
+    transition: all var(--duration-fast) var(--ease-out);
+    border-radius: 4px;
+    border: 1px solid transparent;
+}
+
+.nsrc-folder-header:hover {
+    background: var(--bg-hover);
+    color: var(--text-primary);
+}
+
+.nsrc-folder-header.active {
+    background: var(--accent-glow);
+    color: var(--accent-text);
+}
+
+
+
+.nsrc-folder-icon {
+    font-size: 13px;
+    flex-shrink: 0;
+}
+
+.nsrc-folder-name {
+    flex: 1;
+    font-weight: 600;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.nsrc-folder-count {
+    font-size: 10px;
+    color: var(--text-tertiary);
+    background: var(--bg-elevated);
+    padding: 1px 6px;
+    border-radius: 8px;
+    min-width: 18px;
+    text-align: center;
+}
+
+.nsrc-folder-children {
+    overflow: hidden;
+}
+
+.nsrc-folder-children .nsrc-note {
+    padding-left: calc(var(--space-lg) + 20px);
+}
+
+.nsrc-folder-empty {
+    padding: 4px calc(var(--space-lg) + 20px);
+    font-size: 11px;
+    color: var(--text-tertiary);
+    font-style: italic;
+}
+
+/* ── Sticky Board (panel 2 – board view) ── */
+
+.sticky-board-wrapper {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.sticky-board-toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 6px var(--space-md);
+    border-bottom: 1px solid var(--border-subtle);
+    flex-shrink: 0;
+}
+
+.sticky-color-picker {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.sticky-color-swatch {
+    width: 22px;
+    height: 22px;
+    border-radius: 50%;
+    border: 2px solid transparent;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: transform 0.15s, border-color 0.15s;
+    font-size: 10px;
+    line-height: 1;
+}
+
+.sticky-color-swatch:hover {
+    transform: scale(1.15);
+}
+
+.sticky-color-swatch.active {
+    transform: scale(1.15);
+    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
+}
+
+.sticky-color-check {
+    font-size: 11px;
+    font-weight: 700;
+    color: rgba(0,0,0,0.4);
+}
+
+.sticky-add-btn {
+    width: 28px;
+    height: 28px;
+    border-radius: 8px;
+    border: none;
+    background: var(--accent);
+    color: #fff;
+    font-size: 16px;
+    font-weight: 600;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background 0.15s;
+}
+
+.sticky-add-btn:hover {
+    filter: brightness(1.1);
+}
+
+.sticky-board {
+    flex: 1;
+    position: relative;
+    overflow: hidden;
+    background-image: radial-gradient(circle at 1px 1px, var(--border-subtle) 1px, transparent 0);
+    background-size: 28px 28px;
+}
+
+.sticky-board-empty {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    color: var(--text-tertiary);
+}
+
+.sticky-board-empty-icon {
+    font-size: 32px;
+    opacity: 0.4;
+}
+
+.sticky-board-empty p {
+    margin: 0;
+    font-size: 13px;
+}
+
+.sticky-board-empty-hint {
+    font-size: 11px !important;
+    opacity: 0.6;
+}
+
+/* ── Single sticky note ── */
+
+.sticky-note {
+    position: absolute;
+    width: 200px;
+    min-height: 180px;
+    display: flex;
+    flex-direction: column;
+    border-radius: 2px;
+    user-select: none;
+    touch-action: none;
+    cursor: grab;
+}
+
+.sticky-note--dragging {
+    cursor: grabbing;
+    z-index: 9999 !important;
+}
+
+.sticky-note--selected {
+    outline: 2px solid var(--accent);
+    outline-offset: 2px;
+}
+
+.sticky-note:not(.sticky-note--dragging):hover {
+    box-shadow: 0 8px 24px rgba(0,0,0,0.18) !important;
+}
+
+.sticky-note-tape {
+    position: absolute;
+    top: -10px;
+    left: 50%;
+    width: 56px;
+    height: 20px;
+    border-radius: 2px;
+    opacity: 0.75;
+    pointer-events: none;
+}
+
+.sticky-note-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px 10px 2px;
+}
+
+.sticky-note-grip {
+    font-size: 12px;
+    color: rgba(0,0,0,0.2);
+    cursor: grab;
+    letter-spacing: 1px;
+}
+
+.sticky-note-actions {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+}
+
+.sticky-note-btn {
+    width: 22px;
+    height: 22px;
+    border: none;
+    background: none;
+    border-radius: 50%;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px;
+    color: rgba(0,0,0,0.35);
+    transition: background 0.15s, color 0.15s;
+}
+
+.sticky-note-btn:hover {
+    background: rgba(0,0,0,0.08);
+    color: rgba(0,0,0,0.7);
+}
+
+.sticky-note-btn--save {
+    color: #15803d;
+    font-weight: 700;
+}
+
+.sticky-note-btn--save:hover {
+    background: rgba(21,128,61,0.1);
+}
+
+.sticky-note-btn--delete:hover {
+    background: rgba(220,38,38,0.1);
+    color: #dc2626;
+}
+
+.sticky-note-title {
+    padding: 0 12px;
+    font-size: 11px;
+    font-weight: 600;
+    color: rgba(0,0,0,0.45);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.sticky-note-content {
+    flex: 1;
+    padding: 6px 12px 12px;
+}
+
+.sticky-note-text {
+    font-family: 'Caveat', cursive;
+    font-size: 18px;
+    line-height: 1.4;
+    color: rgba(0,0,0,0.8);
+    white-space: pre-wrap;
+    word-break: break-word;
+    cursor: grab;
+    margin: 0;
+}
+
+.sticky-note-textarea {
+    width: 100%;
+    height: 110px;
+    background: transparent;
+    border: none;
+    outline: none;
+    resize: none;
+    font-family: 'Caveat', cursive;
+    font-size: 18px;
+    line-height: 1.4;
+    color: rgba(0,0,0,0.8);
+}
+
+.sticky-note-textarea::placeholder {
+    color: rgba(0,0,0,0.25);
+}
+
+.sticky-note-corner {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 20px;
+    height: 20px;
+    background: linear-gradient(135deg, transparent 50%, rgba(0,0,0,0.06) 50%);
+    pointer-events: none;
+}
+
+/* ── Note Editor (3rd panel) ── */
+
+.note-editor {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    background: var(--bg-surface);
+    border-left: 1px solid var(--border-subtle);
+}
+
+.note-editor-header {
+    padding: var(--space-lg);
+    border-bottom: 1px solid var(--border-subtle);
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-xs);
+}
+
+.note-editor-title-row {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+}
+
+.note-editor-title {
+    flex: 1;
+    font-family: var(--font-display);
+    font-size: 20px;
+    font-weight: 600;
+    color: var(--text-primary);
+    background: transparent;
+    border: none;
+    outline: none;
+    padding: 0;
+    letter-spacing: -0.01em;
+}
+
+.note-editor-title::placeholder {
+    color: var(--text-tertiary);
+}
+
+.note-editor-date {
+    font-size: 11px;
+    color: var(--text-tertiary);
+}
+
+.note-editor-body {
+    flex: 1;
+    overflow-y: auto;
+    padding: var(--space-lg);
+}
+
+.note-editor-content {
+    width: 100%;
+    height: 100%;
+    min-height: 300px;
+    font-family: var(--font-body);
+    font-size: 14px;
+    line-height: 1.7;
+    color: var(--text-primary);
+    background: transparent;
+    border: none;
+    outline: none;
+    resize: none;
+    padding: 0;
+}
+
+.note-editor-content::placeholder {
+    color: var(--text-tertiary);
+}
+
+.note-editor-empty {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background: var(--bg-surface);
+    border-left: 1px solid var(--border-subtle);
+    gap: var(--space-sm);
+}
+
+/* Dark / Sepia shadow overrides */
+.dark .note-card {
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+}
+
+.dark .note-card:hover {
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
+}
+
+.sepia .note-card {
+    box-shadow: 0 2px 8px rgba(80, 60, 30, 0.06);
+}
+
+.sepia .note-card:hover {
+    box-shadow: 0 8px 24px rgba(80, 60, 30, 0.12);
+}
+
 .panel {
     height: 100%;
     overflow: hidden;
diff --git a/src/lib/supabase.ts b/src/lib/supabase.ts
index 3cfdfba..edaf208 100644
--- a/src/lib/supabase.ts
+++ b/src/lib/supabase.ts
@@ -8,5 +8,7 @@ export const isSupabaseConfigured =
 
 // Create a real client only when configured; otherwise a dummy that will never be used.
 export const supabase: SupabaseClient = isSupabaseConfigured
-  ? createClient(supabaseUrl!, supabaseAnonKey!)
+  ? createClient(supabaseUrl!, supabaseAnonKey!, {
+      auth: { flowType: 'pkce' },
+    })
   : (null as unknown as SupabaseClient);
diff --git a/src/services/syncService.ts b/src/services/syncService.ts
index e8676f8..894a8f3 100644
--- a/src/services/syncService.ts
+++ b/src/services/syncService.ts
@@ -43,7 +43,6 @@ function feedToRow(feed: Feed, userId: string) {
     icon: feed.icon,
     url: feed.url,
     color: feed.color,
-    folder: feed.folder ?? null,
     updated_at: feed.updated_at ?? new Date().toISOString(),
   };
 }
@@ -105,27 +104,83 @@ function rowToItem(row: Record<string, unknown>): Partial<FeedItem> {
   };
 }
 
+// --------------- Sync error event (surfaces errors in the UI) ---------
+
+export const SYNC_ERROR_EVENT = 'superflux-sync-error';
+
+function dispatchSyncError(operation: string, error: unknown) {
+  const msg = error && typeof error === 'object' && 'message' in error
+    ? (error as { message: string }).message
+    : String(error);
+  console.error(`[sync] ${operation}:`, error);
+  window.dispatchEvent(new CustomEvent(SYNC_ERROR_EVENT, { detail: { operation, message: msg } }));
+}
+
+// --------------- Feed cache + in-flight tracking ----------------------
+// Solves race condition: pushNewItems may fire before pushFeed completes
+// and before React's useEffect saves the feed to localStorage.
+
+const _feedsCache = new Map<string, Feed>();           // feedId → Feed
+const _pushFeedPromises = new Map<string, Promise<void>>(); // feedId → in-flight promise
+
+/** Ensure a feed exists in Supabase. Awaits any in-flight pushFeed, then upserts. */
+async function ensureFeedInSupabase(feedId: string, userId: string): Promise<boolean> {
+  // Wait for any in-flight pushFeed for this feedId
+  const pending = _pushFeedPromises.get(feedId);
+  if (pending) {
+    await pending;
+    return true; // pushFeed handled it
+  }
+
+  // Find feed data: in-memory cache first, then localStorage
+  const feed = _feedsCache.get(feedId)
+    ?? loadLocal<Feed[]>(STORAGE_KEYS.FEEDS, []).find(f => f.id === feedId);
+  if (!feed) {
+    console.warn('[sync] ensureFeed: feed not found anywhere:', feedId);
+    return false;
+  }
+
+  const { error } = await supabase
+    .from('feeds')
+    .upsert([feedToRow(feed, userId)], { onConflict: 'id,user_id' });
+  if (error) {
+    dispatchSyncError(`ensureFeed "${feed.name}"`, error);
+    return false;
+  }
+  return true;
+}
+
 // --------------- Debounce queue for item status updates ---------------
 
 let _debounceTimer: ReturnType<typeof setTimeout> | null = null;
 let _pendingItemUpdates: Map<string, FeedItem> = new Map();
 let _currentUserId: string | null = null;
 
-function _flushItemUpdates() {
+async function _flushItemUpdates() {
   if (_pendingItemUpdates.size === 0 || !_currentUserId) return;
 
-  const rows = Array.from(_pendingItemUpdates.values()).map(item =>
-    itemToRow(item, _currentUserId!)
-  );
+  const userId = _currentUserId;
+  const items = Array.from(_pendingItemUpdates.values());
   _pendingItemUpdates.clear();
 
-  // Fire-and-forget upsert
-  supabase
+  // Ensure parent feeds exist in Supabase (FK constraint)
+  const feedIds = [...new Set(items.map(i => i.feedId))];
+  const failedFeedIds = new Set<string>();
+  for (const feedId of feedIds) {
+    const ok = await ensureFeedInSupabase(feedId, userId);
+    if (!ok) failedFeedIds.add(feedId);
+  }
+
+  const safeItems = failedFeedIds.size > 0
+    ? items.filter(i => !failedFeedIds.has(i.feedId))
+    : items;
+  if (safeItems.length === 0) return;
+
+  const rows = safeItems.map(item => itemToRow(item, userId));
+  const { error } = await supabase
     .from('feed_items')
-    .upsert(rows, { onConflict: 'id,user_id' })
-    .then(({ error }) => {
-      if (error) console.error('[sync] batch item upsert failed', error);
-    });
+    .upsert(rows, { onConflict: 'id,user_id' });
+  if (error) dispatchSyncError('batch item upsert', error);
 }
 
 // --------------- Public API -------------------------------------------
@@ -133,6 +188,7 @@ function _flushItemUpdates() {
 export const SyncService = {
   /** Call once after login to establish user context */
   setUserId(userId: string | null) {
+    console.log('[sync] setUserId:', userId);
     _currentUserId = userId;
     if (!userId) {
       _pendingItemUpdates.clear();
@@ -163,22 +219,46 @@ export const SyncService = {
       .eq('user_id', userId);
     if (itemsErr) throw itemsErr;
 
-    // ---- Merge feeds (last-write-wins on updated_at) ----
+    // ---- Merge feeds (last-write-wins on updated_at, match by id OR url) ----
     const localFeeds: Feed[] = loadLocal(STORAGE_KEYS.FEEDS, []);
     const feedMap = new Map<string, Feed>();
+    const urlToFeedId = new Map<string, string>(); // URL → canonical local ID
 
     for (const lf of localFeeds) {
       feedMap.set(lf.id, lf);
+      if (lf.url) urlToFeedId.set(lf.url, lf.id);
     }
     for (const row of remoteFeeds ?? []) {
       const rf = rowToFeed(row);
-      const existing = feedMap.get(rf.id);
-      if (!existing || (rf.updated_at && (!existing.updated_at || rf.updated_at > existing.updated_at))) {
-        feedMap.set(rf.id, { ...existing, ...rf, unreadCount: existing?.unreadCount ?? 0 });
+      // Match by id first, then fall back to URL (handles cross-platform ID mismatch)
+      const existingById = feedMap.get(rf.id);
+      const existingByUrl = rf.url ? (urlToFeedId.has(rf.url) ? feedMap.get(urlToFeedId.get(rf.url)!) : undefined) : undefined;
+      const existing = existingById ?? existingByUrl;
+
+      if (existing) {
+        if (rf.updated_at && (!existing.updated_at || rf.updated_at > existing.updated_at)) {
+          feedMap.set(existing.id, { ...existing, ...rf, id: existing.id, unreadCount: existing.unreadCount ?? 0 });
+        }
+      } else {
+        feedMap.set(rf.id, { ...rf, unreadCount: 0 });
+        if (rf.url) urlToFeedId.set(rf.url, rf.id);
       }
     }
     const mergedFeeds = Array.from(feedMap.values());
 
+    // Build remote-feed-id → local-feed-id map (for remapping item feedId)
+    const remoteFeedIdToLocal = new Map<string, string>(); // remote id → local id
+    const remoteFeedUrls = new Set<string>(); // URLs already present remotely
+    for (const row of remoteFeeds ?? []) {
+      const url = row.url as string;
+      const remoteId = row.id as string;
+      if (url) remoteFeedUrls.add(url);
+      const localId = urlToFeedId.get(url);
+      if (localId && localId !== remoteId) {
+        remoteFeedIdToLocal.set(remoteId, localId);
+      }
+    }
+
     // ---- Merge items (last-write-wins on updated_at, keep local content) ----
     const localItems: FeedItem[] = loadLocal(STORAGE_KEYS.ITEMS, []).map((item: FeedItem) => ({
       ...item,
@@ -186,17 +266,26 @@ export const SyncService = {
       isBookmarked: item.isBookmarked ?? false,
     }));
     const itemMap = new Map<string, FeedItem>();
+    const urlToId = new Map<string, string>(); // URL → canonical ID for dedup
 
     for (const li of localItems) {
       itemMap.set(li.id, li);
+      if (li.url) urlToId.set(li.url, li.id);
     }
     for (const row of remoteItems ?? []) {
       const ri = rowToItem(row);
-      const existing = itemMap.get(ri.id!);
+      // Remap feedId if the remote feed was matched to a local feed by URL
+      if (ri.feedId && remoteFeedIdToLocal.has(ri.feedId)) {
+        ri.feedId = remoteFeedIdToLocal.get(ri.feedId)!;
+      }
+      // Check if we already have this item by URL (handles cross-platform ID mismatch)
+      const existingIdByUrl = ri.url ? urlToId.get(ri.url) : undefined;
+      const existing = itemMap.get(ri.id!) ?? (existingIdByUrl ? itemMap.get(existingIdByUrl) : undefined);
+
       if (existing) {
         // Merge: keep local content, take remote flags if newer
         if (ri.updated_at && (!existing.updated_at || ri.updated_at > existing.updated_at)) {
-          itemMap.set(ri.id!, {
+          itemMap.set(existing.id, {
             ...existing,
             isRead: ri.isRead ?? existing.isRead,
             isStarred: ri.isStarred ?? existing.isStarred,
@@ -204,6 +293,7 @@ export const SyncService = {
             updated_at: ri.updated_at,
           });
         }
+        // Don't add the remote duplicate under its own ID
       } else {
         // Remote-only item: insert with empty content
         itemMap.set(ri.id!, {
@@ -213,6 +303,7 @@ export const SyncService = {
           comments: undefined,
           ...ri,
         } as FeedItem);
+        if (ri.url) urlToId.set(ri.url, ri.id!);
       }
     }
     const mergedItems = Array.from(itemMap.values());
@@ -221,21 +312,39 @@ export const SyncService = {
     saveLocal(STORAGE_KEYS.FEEDS, mergedFeeds);
     saveLocal(STORAGE_KEYS.ITEMS, mergedItems);
 
-    // ---- Push local-only feeds to remote ----
+    // ---- Push local-only feeds to remote (skip feeds already synced by URL) ----
     const remoteFeedIds = new Set((remoteFeeds ?? []).map((r: Record<string, unknown>) => r.id as string));
-    const feedsToPush = mergedFeeds.filter(f => !remoteFeedIds.has(f.id));
+    const feedsToPush = mergedFeeds.filter(f => !remoteFeedIds.has(f.id) && !remoteFeedUrls.has(f.url));
     if (feedsToPush.length > 0) {
-      const rows = feedsToPush.map(f => feedToRow(f, userId));
-      await supabase.from('feeds').upsert(rows, { onConflict: 'id,user_id' });
+      // Use insert for new feeds (they don't exist remotely yet)
+      for (const feed of feedsToPush) {
+        const row = feedToRow(feed, userId);
+        const { error } = await supabase.from('feeds').insert(row);
+        if (error) dispatchSyncError(`fullSync push feed "${feed.name}"`, error);
+      }
     }
 
     // ---- Push local-only items to remote (batch 500) ----
     const remoteItemIds = new Set((remoteItems ?? []).map((r: Record<string, unknown>) => r.id as string));
-    const itemsToPush = mergedItems.filter(i => !remoteItemIds.has(i.id));
-    for (let i = 0; i < itemsToPush.length; i += 500) {
-      const batch = itemsToPush.slice(i, i + 500);
+    const remoteItemUrls = new Set((remoteItems ?? []).map((r: Record<string, unknown>) => r.url as string).filter(Boolean));
+    const itemsToPush = mergedItems.filter(i => !remoteItemIds.has(i.id) && !(i.url && remoteItemUrls.has(i.url)));
+    // Ensure every referenced feed exists before inserting items
+    // Populate cache so ensureFeedInSupabase can find them
+    for (const f of mergedFeeds) _feedsCache.set(f.id, f);
+    const itemFeedIds = [...new Set(itemsToPush.map(i => i.feedId))];
+    const failedFeedIds = new Set<string>();
+    for (const fid of itemFeedIds) {
+      const ok = await ensureFeedInSupabase(fid, userId);
+      if (!ok) failedFeedIds.add(fid);
+    }
+    const safeItemsToPush = failedFeedIds.size > 0
+      ? itemsToPush.filter(i => !failedFeedIds.has(i.feedId))
+      : itemsToPush;
+    for (let i = 0; i < safeItemsToPush.length; i += 500) {
+      const batch = safeItemsToPush.slice(i, i + 500);
       const rows = batch.map(item => itemToRow(item, userId));
-      await supabase.from('feed_items').upsert(rows, { onConflict: 'id,user_id' });
+      const { error } = await supabase.from('feed_items').insert(rows);
+      if (error) dispatchSyncError('fullSync push items batch', error);
     }
 
     // ---- Notify useFeedStore to reload ----
@@ -244,10 +353,35 @@ export const SyncService = {
 
   /** Push a single feed to remote immediately */
   async pushFeed(feed: Feed): Promise<void> {
-    if (!isSupabaseConfigured || !_currentUserId) return;
-    const row = feedToRow(feed, _currentUserId);
-    const { error } = await supabase.from('feeds').upsert([row], { onConflict: 'id,user_id' });
-    if (error) console.error('[sync] pushFeed failed', error);
+    if (!isSupabaseConfigured) {
+      console.warn('[sync] pushFeed skipped: Supabase not configured');
+      return;
+    }
+    if (!_currentUserId) {
+      console.warn('[sync] pushFeed skipped: no userId set');
+      return;
+    }
+    // Cache feed data immediately so pushNewItems can find it
+    _feedsCache.set(feed.id, feed);
+
+    const doInsert = async () => {
+      const row = feedToRow(feed, _currentUserId!);
+      console.log('[sync] pushFeed inserting:', feed.name, feed.source, 'userId:', _currentUserId);
+      const { error } = await supabase
+        .from('feeds')
+        .upsert([row], { onConflict: 'id,user_id' });
+      if (error) {
+        dispatchSyncError('pushFeed', error);
+      } else {
+        console.log('[sync] pushFeed OK:', feed.name);
+      }
+    };
+
+    // Track the promise so pushNewItems can await it
+    const promise = doInsert();
+    _pushFeedPromises.set(feed.id, promise);
+    await promise;
+    _pushFeedPromises.delete(feed.id);
   },
 
   /** Delete a feed from remote immediately */
@@ -258,7 +392,7 @@ export const SyncService = {
       .delete()
       .eq('id', feedId)
       .eq('user_id', _currentUserId);
-    if (error) console.error('[sync] deleteFeed failed', error);
+    if (error) dispatchSyncError('deleteFeed', error);
   },
 
   /** Queue an item status change (debounced 2s) */
@@ -274,13 +408,26 @@ export const SyncService = {
     if (!isSupabaseConfigured || !_currentUserId) return;
     const userId = _currentUserId;
 
-    for (let i = 0; i < items.length; i += 500) {
-      const batch = items.slice(i, i + 500);
+    // Ensure parent feeds exist in Supabase (awaits in-flight pushFeed + uses cache)
+    const feedIds = [...new Set(items.map(i => i.feedId))];
+    const failedFeedIds = new Set<string>();
+    for (const feedId of feedIds) {
+      const ok = await ensureFeedInSupabase(feedId, userId);
+      if (!ok) failedFeedIds.add(feedId);
+    }
+
+    // Only push items whose parent feed is confirmed in Supabase
+    const safeItems = failedFeedIds.size > 0
+      ? items.filter(i => !failedFeedIds.has(i.feedId))
+      : items;
+
+    for (let i = 0; i < safeItems.length; i += 500) {
+      const batch = safeItems.slice(i, i + 500);
       const rows = batch.map(item => itemToRow(item, userId));
       const { error } = await supabase
         .from('feed_items')
         .upsert(rows, { onConflict: 'id,user_id' });
-      if (error) console.error('[sync] pushNewItems batch failed', error);
+      if (error) dispatchSyncError('pushNewItems batch', error);
     }
   },
 };
diff --git a/supabase/migrations/20250224000004_add_podcast_source.sql b/supabase/migrations/20250224000004_add_podcast_source.sql
new file mode 100644
index 0000000..bb00808
--- /dev/null
+++ b/supabase/migrations/20250224000004_add_podcast_source.sql
@@ -0,0 +1,3 @@
+-- Add 'podcast' to the feeds source CHECK constraint (needed for Android app)
+alter table feeds drop constraint feeds_source_check;
+alter table feeds add constraint feeds_source_check check (source in ('article','reddit','youtube','twitter','mastodon','podcast'));