feat: add first version of TougliGui with same features as on google sheet

2026-04-21 22:02:20 +02:00
parent 79d5c4baaa
commit f571d8bb3f
53 changed files with 12416 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,40 @@
+# Dependencies
+node_modules/
+
+# Build output
+dist/
+dist-ssr/
+
+# Rust / Tauri
+src-tauri/target/
+src-tauri/gen/schemas/
+
+# Logs
+logs/
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Env files
+.env
+.env.*
+!.env.example
+
+# Editor
+.vscode/*
+!.vscode/extensions.json
+.idea/
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Local dev
+*.local
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@ -0,0 +1,3 @@
+{
+  "recommendations": ["tauri-apps.tauri-vscode", "rust-lang.rust-analyzer"]
+}
--- a/index.html
+++ b/index.html
@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>TougliGui</title>
+  </head>
+
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,33 @@
+{
+  "name": "toughligui-scaffold",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "tauri": "tauri"
+  },
+  "dependencies": {
+    "@tanstack/react-query": "^5.99.2",
+    "@tauri-apps/api": "^2",
+    "@tauri-apps/plugin-opener": "^2",
+    "@tauri-apps/plugin-sql": "^2.4.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-router-dom": "^7.14.2",
+    "zustand": "^5.0.12"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.2.4",
+    "@tauri-apps/cli": "^2",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "@vitejs/plugin-react": "^4.6.0",
+    "esbuild": "^0.28.0",
+    "tailwindcss": "^4.2.4",
+    "typescript": "~5.8.3",
+    "vite": "^8.0.9"
+  }
+}
--- a/public/logo_tougli.png
+++ b/public/logo_tougli.png
--- a/public/tauri.svg
+++ b/public/tauri.svg
@ -0,0 +1,6 @@
+<svg width="206" height="231" viewBox="0 0 206 231" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M143.143 84C143.143 96.1503 133.293 106 121.143 106C108.992 106 99.1426 96.1503 99.1426 84C99.1426 71.8497 108.992 62 121.143 62C133.293 62 143.143 71.8497 143.143 84Z" fill="#FFC131"/>
+<ellipse cx="84.1426" cy="147" rx="22" ry="22" transform="rotate(180 84.1426 147)" fill="#24C8DB"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M166.738 154.548C157.86 160.286 148.023 164.269 137.757 166.341C139.858 160.282 141 153.774 141 147C141 144.543 140.85 142.121 140.558 139.743C144.975 138.204 149.215 136.139 153.183 133.575C162.73 127.404 170.292 118.608 174.961 108.244C179.63 97.8797 181.207 86.3876 179.502 75.1487C177.798 63.9098 172.884 53.4021 165.352 44.8883C157.82 36.3744 147.99 30.2165 137.042 27.1546C126.095 24.0926 114.496 24.2568 103.64 27.6274C92.7839 30.998 83.1319 37.4317 75.8437 46.1553C74.9102 47.2727 74.0206 48.4216 73.176 49.5993C61.9292 50.8488 51.0363 54.0318 40.9629 58.9556C44.2417 48.4586 49.5653 38.6591 56.679 30.1442C67.0505 17.7298 80.7861 8.57426 96.2354 3.77762C111.685 -1.01901 128.19 -1.25267 143.769 3.10474C159.348 7.46215 173.337 16.2252 184.056 28.3411C194.775 40.457 201.767 55.4101 204.193 71.404C206.619 87.3978 204.374 103.752 197.73 118.501C191.086 133.25 180.324 145.767 166.738 154.548ZM41.9631 74.275L62.5557 76.8042C63.0459 72.813 63.9401 68.9018 65.2138 65.1274C57.0465 67.0016 49.2088 70.087 41.9631 74.275Z" fill="#FFC131"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M38.4045 76.4519C47.3493 70.6709 57.2677 66.6712 67.6171 64.6132C65.2774 70.9669 64 77.8343 64 85.0001C64 87.1434 64.1143 89.26 64.3371 91.3442C60.0093 92.8732 55.8533 94.9092 51.9599 97.4256C42.4128 103.596 34.8505 112.392 30.1816 122.756C25.5126 133.12 23.9357 144.612 25.6403 155.851C27.3449 167.09 32.2584 177.598 39.7906 186.112C47.3227 194.626 57.153 200.784 68.1003 203.846C79.0476 206.907 90.6462 206.743 101.502 203.373C112.359 200.002 122.011 193.568 129.299 184.845C130.237 183.722 131.131 182.567 131.979 181.383C143.235 180.114 154.132 176.91 164.205 171.962C160.929 182.49 155.596 192.319 148.464 200.856C138.092 213.27 124.357 222.426 108.907 227.222C93.458 232.019 76.9524 232.253 61.3736 227.895C45.7948 223.538 31.8055 214.775 21.0867 202.659C10.3679 190.543 3.37557 175.59 0.949823 159.596C-1.47592 143.602 0.768139 127.248 7.41237 112.499C14.0566 97.7497 24.8183 85.2327 38.4045 76.4519ZM163.062 156.711L163.062 156.711C162.954 156.773 162.846 156.835 162.738 156.897C162.846 156.835 162.954 156.773 163.062 156.711Z" fill="#24C8DB"/>
+</svg>
--- a/public/vite.svg
+++ b/public/vite.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/run.sh
+++ b/run.sh
@ -0,0 +1,8 @@
+#!/bin/bash
+export PATH="/home/anthony/.config/JetBrains/WebStorm2026.1/node/versions/24.14.1/bin:$HOME/.cargo/bin:$PATH"
+export DISPLAY=:0
+export GDK_BACKEND=x11
+export WEBKIT_DISABLE_DMABUF_RENDERER=1
+
+cd "$(dirname "$0")"
+exec npm run tauri dev
--- a/src-tauri/.gitignore
+++ b/src-tauri/.gitignore
@ -0,0 +1,7 @@
+# Generated by Cargo
+# will have compiled files and executables
+/target/
+
+# Generated by Tauri
+# will have schema files for capabilities auto-completion
+/gen/schemas
--- a/src-tauri/Cargo.lock
+++ b/src-tauri/Cargo.lock
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@ -0,0 +1,28 @@
+[package]
+name = "toughligui"
+version = "0.1.0"
+description = "TougliGui - Dofus guide tracker"
+authors = ["Anthony Bouteiller"]
+edition = "2021"
+
+[lib]
+name = "toughligui_lib"
+crate-type = ["staticlib", "cdylib", "rlib"]
+
+[build-dependencies]
+tauri-build = { version = "2", features = [] }
+
+[dependencies]
+tauri = { version = "2", features = ["tray-icon"] }
+tauri-plugin-opener = "2"
+tauri-plugin-sql = { version = "2", features = ["sqlite"] }
+tauri-plugin-http = "2"
+serde = { version = "1", features = ["derive"] }
+serde_json = "1"
+rusqlite = { version = "0.31", features = ["bundled"] }
+csv = "1"
+reqwest = { version = "0.12", features = ["blocking"] }
+tokio = { version = "1", features = ["full"] }
+chrono = { version = "0.4", features = ["serde"] }
+uuid = { version = "1", features = ["v4"] }
+dirs-next = "2"
--- a/src-tauri/build.rs
+++ b/src-tauri/build.rs
@ -0,0 +1,3 @@
+fn main() {
+    tauri_build::build()
+}
--- a/src-tauri/capabilities/default.json
+++ b/src-tauri/capabilities/default.json
@ -0,0 +1,26 @@
+{
+  "$schema": "../gen/schemas/desktop-schema.json",
+  "identifier": "default",
+  "description": "Capability for the main window",
+  "windows": ["main"],
+  "permissions": [
+    "core:default",
+    "opener:default",
+    "core:window:allow-close",
+    "core:window:allow-minimize",
+    "core:window:allow-maximize",
+    "core:window:allow-unmaximize",
+    "core:window:allow-start-dragging",
+    "core:window:allow-set-always-on-top",
+    "core:window:allow-set-focus",
+    "core:window:allow-set-size",
+    "core:window:allow-set-position",
+    "core:window:allow-set-resizable",
+    "core:window:allow-set-title",
+    "core:window:allow-set-decorations",
+    "core:window:allow-set-cursor-visible",
+    "core:window:allow-is-maximized",
+    "core:window:allow-is-minimized",
+    "core:window:allow-is-focused"
+  ]
+}
--- a/src-tauri/icons/128x128.png
+++ b/src-tauri/icons/128x128.png
--- a/src-tauri/icons/128x128@2x.png
+++ b/src-tauri/icons/128x128@2x.png
--- a/src-tauri/icons/32x32.png
+++ b/src-tauri/icons/32x32.png
--- a/src-tauri/icons/Square107x107Logo.png
+++ b/src-tauri/icons/Square107x107Logo.png
--- a/src-tauri/icons/Square142x142Logo.png
+++ b/src-tauri/icons/Square142x142Logo.png
--- a/src-tauri/icons/Square150x150Logo.png
+++ b/src-tauri/icons/Square150x150Logo.png
--- a/src-tauri/icons/Square284x284Logo.png
+++ b/src-tauri/icons/Square284x284Logo.png
--- a/src-tauri/icons/Square30x30Logo.png
+++ b/src-tauri/icons/Square30x30Logo.png
--- a/src-tauri/icons/Square310x310Logo.png
+++ b/src-tauri/icons/Square310x310Logo.png
--- a/src-tauri/icons/Square44x44Logo.png
+++ b/src-tauri/icons/Square44x44Logo.png
--- a/src-tauri/icons/Square71x71Logo.png
+++ b/src-tauri/icons/Square71x71Logo.png
--- a/src-tauri/icons/Square89x89Logo.png
+++ b/src-tauri/icons/Square89x89Logo.png
--- a/src-tauri/icons/StoreLogo.png
+++ b/src-tauri/icons/StoreLogo.png
--- a/src-tauri/icons/icon.icns
+++ b/src-tauri/icons/icon.icns
--- a/src-tauri/icons/icon.ico
+++ b/src-tauri/icons/icon.ico
--- a/src-tauri/icons/icon.png
+++ b/src-tauri/icons/icon.png
--- a/src-tauri/src/commands.rs
+++ b/src-tauri/src/commands.rs
@ -0,0 +1,211 @@
+use tauri::{AppHandle, Manager, State};
+use serde::{Deserialize, Serialize};
+use std::sync::Mutex;
+use rusqlite::Connection;
+
+use crate::{db, parser};
+
+pub struct DbState(pub Mutex<Connection>);
+
+#[derive(Debug, Serialize, Deserialize)]
+pub struct GuideListItem {
+    pub gid: String,
+    pub name: String,
+    pub last_synced_at: Option<String>,
+    pub total_quests: usize,
+    pub completed_quests: usize,
+}
+
+#[derive(Debug, Serialize, Deserialize)]
+pub struct SyncResult {
+    pub synced: usize,
+    pub errors: Vec<String>,
+}
+
+#[tauri::command]
+pub fn get_profiles(state: State<DbState>) -> Result<Vec<db::Profile>, String> {
+    let conn = state.0.lock().map_err(|e| e.to_string())?;
+    db::get_profiles(&conn).map_err(|e| e.to_string())
+}
+
+#[tauri::command]
+pub fn create_profile(state: State<DbState>, name: String) -> Result<db::Profile, String> {
+    let conn = state.0.lock().map_err(|e| e.to_string())?;
+    db::create_profile(&conn, &name).map_err(|e| e.to_string())
+}
+
+#[tauri::command]
+pub fn delete_profile(state: State<DbState>, profile_id: String) -> Result<(), String> {
+    let conn = state.0.lock().map_err(|e| e.to_string())?;
+    db::delete_profile(&conn, &profile_id).map_err(|e| e.to_string())
+}
+
+#[tauri::command]
+pub fn get_completed_quests(state: State<DbState>, profile_id: String) -> Result<Vec<String>, String> {
+    let conn = state.0.lock().map_err(|e| e.to_string())?;
+    db::get_completed_quests(&conn, &profile_id).map_err(|e| e.to_string())
+}
+
+#[tauri::command]
+pub fn toggle_quest(state: State<DbState>, profile_id: String, quest_name: String) -> Result<bool, String> {
+    let conn = state.0.lock().map_err(|e| e.to_string())?;
+    db::toggle_quest(&conn, &profile_id, &quest_name).map_err(|e| e.to_string())
+}
+
+#[tauri::command]
+pub fn get_guides_list(state: State<DbState>, profile_id: String) -> Result<Vec<GuideListItem>, String> {
+    let conn = state.0.lock().map_err(|e| e.to_string())?;
+    let guides = db::get_guides(&conn).map_err(|e| e.to_string())?;
+    let completed = db::get_completed_quests(&conn, &profile_id).map_err(|e| e.to_string())?;
+    let completed_set: std::collections::HashSet<String> = completed.into_iter().collect();
+
+    let items = guides.into_iter().map(|g| {
+        let data: parser::GuideData = serde_json::from_str(&g.data).unwrap_or_else(|_| parser::GuideData {
+            name: g.name.clone(),
+            gid: g.gid.clone(),
+            effect: String::new(),
+            recommended_level: None,
+            combat_legend: vec![],
+            resources: vec![],
+            sections: vec![],
+        });
+
+        let all_quests = collect_quest_names(&data);
+        let total = all_quests.len();
+        let completed_count = all_quests.iter().filter(|q| completed_set.contains(*q)).count();
+
+        GuideListItem {
+            gid: g.gid,
+            name: g.name,
+            last_synced_at: g.last_synced_at,
+            total_quests: total,
+            completed_quests: completed_count,
+        }
+    }).collect();
+
+    Ok(items)
+}
+
+#[tauri::command]
+pub fn get_guide(state: State<DbState>, gid: String) -> Result<parser::GuideData, String> {
+    let conn = state.0.lock().map_err(|e| e.to_string())?;
+    let guides = db::get_guides(&conn).map_err(|e| e.to_string())?;
+    if let Some(g) = guides.into_iter().find(|g| g.gid == gid) {
+        serde_json::from_str(&g.data).map_err(|e| e.to_string())
+    } else {
+        Err(format!("Guide {} not found", gid))
+    }
+}
+
+#[tauri::command]
+pub async fn sync_guides(state: State<'_, DbState>) -> Result<SyncResult, String> {
+    let mut synced = 0;
+    let mut errors = Vec::new();
+
+    for (gid, name) in parser::TABS {
+        let gid = gid.to_string();
+        let name = name.to_string();
+
+        // Run blocking HTTP+parse in a dedicated thread to avoid runtime conflict
+        let result = tokio::task::spawn_blocking({
+            let gid = gid.clone();
+            let name = name.clone();
+            move || -> Result<String, String> {
+                let csv = parser::fetch_csv(&gid)?;
+                let links = parser::fetch_quest_links(&gid);
+                let data = parser::parse_guide_with_links(&gid, &name, &csv, &links);
+                serde_json::to_string(&data).map_err(|e| e.to_string())
+            }
+        }).await.map_err(|e| e.to_string())?;
+
+        match result {
+            Ok(json) => {
+                let conn = state.0.lock().map_err(|e| e.to_string())?;
+                db::upsert_guide(&conn, &gid, &name, &json).map_err(|e| e.to_string())?;
+                synced += 1;
+            }
+            Err(e) => {
+                errors.push(format!("{}: {}", name, e));
+            }
+        }
+    }
+
+    Ok(SyncResult { synced, errors })
+}
+
+#[derive(Debug, Serialize, Deserialize)]
+pub struct TabInfo {
+    pub gid: String,
+    pub name: String,
+}
+
+#[tauri::command]
+pub fn get_tabs_list() -> Vec<TabInfo> {
+    parser::TABS.iter().map(|(gid, name)| TabInfo {
+        gid: gid.to_string(),
+        name: name.to_string(),
+    }).collect()
+}
+
+#[tauri::command]
+pub async fn sync_single_guide(state: State<'_, DbState>, gid: String, name: String) -> Result<(), String> {
+    let json = tokio::task::spawn_blocking({
+        let gid = gid.clone();
+        let name = name.clone();
+        move || -> Result<String, String> {
+            let csv = parser::fetch_csv(&gid)?;
+            let links = parser::fetch_quest_links(&gid);
+            let data = parser::parse_guide_with_links(&gid, &name, &csv, &links);
+            serde_json::to_string(&data).map_err(|e| e.to_string())
+        }
+    }).await.map_err(|e| e.to_string())??;
+
+    let conn = state.0.lock().map_err(|e| e.to_string())?;
+    db::upsert_guide(&conn, &gid, &name, &json).map_err(|e| e.to_string())?;
+    Ok(())
+}
+
+// This remains for backwards compat but delegates to per-guide approach
+#[tauri::command]
+pub fn has_guides(state: State<DbState>) -> Result<bool, String> {
+    let conn = state.0.lock().map_err(|e| e.to_string())?;
+    let guides = db::get_guides(&conn).map_err(|e| e.to_string())?;
+    Ok(!guides.is_empty())
+}
+
+#[tauri::command]
+pub fn get_setting(state: State<DbState>, key: String) -> Result<Option<String>, String> {
+    let conn = state.0.lock().map_err(|e| e.to_string())?;
+    Ok(db::get_setting(&conn, &key))
+}
+
+#[tauri::command]
+pub fn set_setting(state: State<DbState>, key: String, value: String) -> Result<(), String> {
+    let conn = state.0.lock().map_err(|e| e.to_string())?;
+    db::set_setting(&conn, &key, &value).map_err(|e| e.to_string())
+}
+
+#[tauri::command]
+pub fn set_always_on_top(app: AppHandle, value: bool) -> Result<(), String> {
+    if let Some(win) = app.get_webview_window("main") {
+        win.set_always_on_top(value).map_err(|e| e.to_string())
+    } else {
+        Err("Window not found".to_string())
+    }
+}
+
+fn collect_quest_names(data: &parser::GuideData) -> Vec<String> {
+    let mut names = Vec::new();
+    for section in &data.sections {
+        for item in &section.items {
+            match item {
+                parser::SectionItem::Quest(q) => names.push(q.name.clone()),
+                parser::SectionItem::Group(g) => {
+                    for q in &g.quests { names.push(q.name.clone()); }
+                }
+                _ => {}
+            }
+        }
+    }
+    names
+}
--- a/src-tauri/src/db.rs
+++ b/src-tauri/src/db.rs
@ -0,0 +1,163 @@
+use rusqlite::{Connection, Result, params};
+use serde::{Deserialize, Serialize};
+use chrono::Utc;
+use uuid::Uuid;
+
+#[derive(Debug, Serialize, Deserialize, Clone)]
+pub struct Profile {
+    pub id: String,
+    pub name: String,
+    pub created_at: String,
+}
+
+#[derive(Debug, Serialize, Deserialize, Clone)]
+pub struct GuideRow {
+    pub gid: String,
+    pub name: String,
+    pub data: String,
+    pub last_synced_at: Option<String>,
+}
+
+pub fn get_db_path() -> String {
+    let data_dir = dirs_next::data_dir()
+        .unwrap_or_else(|| std::path::PathBuf::from("."))
+        .join("toughligui");
+    std::fs::create_dir_all(&data_dir).ok();
+    data_dir.join("toughligui.db").to_string_lossy().to_string()
+}
+
+pub fn open() -> Result<Connection> {
+    let path = get_db_path();
+    let conn = Connection::open(&path)?;
+    conn.execute_batch("PRAGMA journal_mode=WAL; PRAGMA foreign_keys=ON;")?;
+    Ok(conn)
+}
+
+pub fn migrate(conn: &Connection) -> Result<()> {
+    conn.execute_batch("
+        CREATE TABLE IF NOT EXISTS profiles (
+            id TEXT PRIMARY KEY,
+            name TEXT UNIQUE NOT NULL,
+            created_at TEXT NOT NULL
+        );
+
+        CREATE TABLE IF NOT EXISTS guides (
+            gid TEXT PRIMARY KEY,
+            name TEXT NOT NULL,
+            data TEXT NOT NULL,
+            last_synced_at TEXT
+        );
+
+        CREATE TABLE IF NOT EXISTS quest_completions (
+            profile_id TEXT NOT NULL,
+            quest_name TEXT NOT NULL,
+            completed_at TEXT NOT NULL,
+            PRIMARY KEY (profile_id, quest_name),
+            FOREIGN KEY (profile_id) REFERENCES profiles(id) ON DELETE CASCADE
+        );
+
+        CREATE TABLE IF NOT EXISTS settings (
+            key TEXT PRIMARY KEY,
+            value TEXT NOT NULL
+        );
+    ")?;
+    Ok(())
+}
+
+pub fn get_profiles(conn: &Connection) -> Result<Vec<Profile>> {
+    let mut stmt = conn.prepare("SELECT id, name, created_at FROM profiles ORDER BY created_at ASC")?;
+    let rows = stmt.query_map([], |row| {
+        Ok(Profile {
+            id: row.get(0)?,
+            name: row.get(1)?,
+            created_at: row.get(2)?,
+        })
+    })?;
+    rows.collect()
+}
+
+pub fn create_profile(conn: &Connection, name: &str) -> Result<Profile> {
+    let id = Uuid::new_v4().to_string();
+    let created_at = Utc::now().to_rfc3339();
+    conn.execute(
+        "INSERT INTO profiles (id, name, created_at) VALUES (?1, ?2, ?3)",
+        params![id, name, created_at],
+    )?;
+    Ok(Profile { id, name: name.to_string(), created_at })
+}
+
+pub fn delete_profile(conn: &Connection, profile_id: &str) -> Result<()> {
+    conn.execute("DELETE FROM profiles WHERE id = ?1", params![profile_id])?;
+    Ok(())
+}
+
+pub fn get_completed_quests(conn: &Connection, profile_id: &str) -> Result<Vec<String>> {
+    let mut stmt = conn.prepare(
+        "SELECT quest_name FROM quest_completions WHERE profile_id = ?1"
+    )?;
+    let rows = stmt.query_map(params![profile_id], |row| row.get(0))?;
+    rows.collect()
+}
+
+pub fn toggle_quest(conn: &Connection, profile_id: &str, quest_name: &str) -> Result<bool> {
+    let exists: bool = conn.query_row(
+        "SELECT COUNT(*) FROM quest_completions WHERE profile_id = ?1 AND quest_name = ?2",
+        params![profile_id, quest_name],
+        |row| row.get::<_, i64>(0),
+    ).map(|c| c > 0)?;
+
+    if exists {
+        conn.execute(
+            "DELETE FROM quest_completions WHERE profile_id = ?1 AND quest_name = ?2",
+            params![profile_id, quest_name],
+        )?;
+        Ok(false)
+    } else {
+        let now = Utc::now().to_rfc3339();
+        conn.execute(
+            "INSERT INTO quest_completions (profile_id, quest_name, completed_at) VALUES (?1, ?2, ?3)",
+            params![profile_id, quest_name, now],
+        )?;
+        Ok(true)
+    }
+}
+
+pub fn upsert_guide(conn: &Connection, gid: &str, name: &str, data: &str) -> Result<()> {
+    let now = Utc::now().to_rfc3339();
+    conn.execute(
+        "INSERT INTO guides (gid, name, data, last_synced_at) VALUES (?1, ?2, ?3, ?4)
+         ON CONFLICT(gid) DO UPDATE SET name=excluded.name, data=excluded.data, last_synced_at=excluded.last_synced_at",
+        params![gid, name, data, now],
+    )?;
+    Ok(())
+}
+
+pub fn get_guides(conn: &Connection) -> Result<Vec<GuideRow>> {
+    let mut stmt = conn.prepare("SELECT gid, name, data, last_synced_at FROM guides ORDER BY rowid ASC")?;
+    let rows = stmt.query_map([], |row| {
+        Ok(GuideRow {
+            gid: row.get(0)?,
+            name: row.get(1)?,
+            data: row.get(2)?,
+            last_synced_at: row.get(3)?,
+        })
+    })?;
+    rows.collect()
+}
+
+pub fn get_setting(conn: &Connection, key: &str) -> Option<String> {
+    conn.query_row(
+        "SELECT value FROM settings WHERE key = ?1",
+        params![key],
+        |row| row.get(0),
+    ).ok()
+}
+
+pub fn set_setting(conn: &Connection, key: &str, value: &str) -> Result<()> {
+    conn.execute(
+        "INSERT INTO settings (key, value) VALUES (?1, ?2)
+         ON CONFLICT(key) DO UPDATE SET value=excluded.value",
+        params![key, value],
+    )?;
+    Ok(())
+}
--- a/src-tauri/src/lib.rs
+++ b/src-tauri/src/lib.rs
@ -0,0 +1,37 @@
+mod db;
+mod parser;
+mod commands;
+
+use commands::DbState;
+use std::sync::Mutex;
+use tauri::Manager;
+
+#[cfg_attr(mobile, tauri::mobile_entry_point)]
+pub fn run() {
+    tauri::Builder::default()
+        .plugin(tauri_plugin_opener::init())
+        .setup(|app| {
+            let conn = db::open().expect("Failed to open database");
+            db::migrate(&conn).expect("Failed to migrate database");
+            app.manage(DbState(Mutex::new(conn)));
+            Ok(())
+        })
+        .invoke_handler(tauri::generate_handler![
+            commands::get_profiles,
+            commands::create_profile,
+            commands::delete_profile,
+            commands::get_completed_quests,
+            commands::toggle_quest,
+            commands::get_guides_list,
+            commands::get_guide,
+            commands::sync_guides,
+            commands::get_tabs_list,
+            commands::sync_single_guide,
+            commands::has_guides,
+            commands::get_setting,
+            commands::set_setting,
+            commands::set_always_on_top,
+        ])
+        .run(tauri::generate_context!())
+        .expect("error while running tauri application");
+}
--- a/src-tauri/src/main.rs
+++ b/src-tauri/src/main.rs
@ -0,0 +1,6 @@
+// Prevents additional console window on Windows in release, DO NOT REMOVE!!
+#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
+
+fn main() {
+    toughligui_lib::run()
+}
--- a/src-tauri/src/parser.rs
+++ b/src-tauri/src/parser.rs
@ -0,0 +1,542 @@
+use serde::{Deserialize, Serialize};
+
+#[derive(Debug, Serialize, Deserialize, Clone)]
+pub struct GuideData {
+    pub name: String,
+    pub gid: String,
+    pub effect: String,
+    pub recommended_level: Option<u32>,
+    pub combat_legend: Vec<CombatType>,
+    pub resources: Vec<Resource>,
+    pub sections: Vec<Section>,
+}
+
+#[derive(Debug, Serialize, Deserialize, Clone)]
+pub struct CombatType {
+    pub name: String,
+    pub column: usize,
+}
+
+#[derive(Debug, Serialize, Deserialize, Clone)]
+pub struct Resource {
+    pub quantity: u32,
+    pub name: String,
+}
+
+#[derive(Debug, Serialize, Deserialize, Clone)]
+pub struct Section {
+    pub name: String,
+    pub items: Vec<SectionItem>,
+}
+
+#[derive(Debug, Serialize, Deserialize, Clone)]
+#[serde(tag = "type")]
+pub enum SectionItem {
+    Quest(QuestItem),
+    Instruction(InstructionItem),
+    Group(GroupItem),
+}
+
+#[derive(Debug, Serialize, Deserialize, Clone)]
+pub struct QuestItem {
+    pub name: String,
+    pub completed: bool,
+    pub combat_indicators: Vec<CombatIndicator>,
+    pub note: Option<String>,
+    pub url: Option<String>,
+}
+
+#[derive(Debug, Serialize, Deserialize, Clone)]
+pub struct CombatIndicator {
+    pub combat_type: String,
+    pub count: String,
+}
+
+#[derive(Debug, Serialize, Deserialize, Clone)]
+pub struct InstructionItem {
+    pub text: String,
+}
+
+#[derive(Debug, Serialize, Deserialize, Clone)]
+pub struct GroupItem {
+    pub note: Option<String>,
+    pub quests: Vec<QuestItem>,
+}
+
+const SHEET_ID: &str = "1uL7svJ0E0MjhqHVLU7O4Q8v7iGwPd4bsI9qV-Pdhdds";
+
+pub static TABS: &[(&str, &str)] = &[
+    ("474870200",  "Dofawa"),
+    ("743703882",  "Dofus Argenté"),
+    ("103963898",  "Dofus Cawotte"),
+    ("1075294690", "Dokoko"),
+    ("1567240526", "Dofus des Veilleurs"),
+    ("1011508069", "Dofus Emeraude"),
+    ("2045137654", "Dofus Pourpre"),
+    ("1967508888", "Domakuro"),
+    ("1382359191", "Dorigami"),
+    ("1413546794", "Dofus Turquoise"),
+    ("1641656252", "Dofus des Glaçes"),
+    ("953522228",  "Dofus Abyssal"),
+    ("818597042",  "Dofoozbz"),
+    ("1021129660", "Dofus Nébuleux"),
+    ("595670723",  "Dofus Vulbis"),
+    ("544349966",  "Dofus Tacheté"),
+    ("1150302145", "Dofus Forgelave"),
+    ("882278553",  "Dofus Ebène"),
+    ("200570588",  "Dofus Ivoire"),
+    ("1209269839", "Dofus Ocre"),
+    ("462784268",  "Dofus Argenté Scintillant"),
+    ("1543573905", "Dofus Cauchemar"),
+    ("1007491889", "Dom de Pin"),
+    ("1047555165", "Dofus Sylvestre"),
+    ("2105601828", "Dofus Cacao"),
+    ("474510463",  "Dokille"),
+    ("62476099",   "Dolmanax"),
+    ("1873654554", "Dotruche"),
+    ("360188709",  "Dofus Kaliptus"),
+];
+
+fn make_client() -> Result<reqwest::blocking::Client, String> {
+    reqwest::blocking::Client::builder()
+        .timeout(std::time::Duration::from_secs(30))
+        .build()
+        .map_err(|e| e.to_string())
+}
+
+pub fn fetch_csv(gid: &str) -> Result<String, String> {
+    let url = format!(
+        "https://docs.google.com/spreadsheets/d/{}/export?format=csv&gid={}",
+        SHEET_ID, gid
+    );
+    make_client()?
+        .get(&url)
+        .send()
+        .map_err(|e| e.to_string())?
+        .text()
+        .map_err(|e| e.to_string())
+}
+
+/// Fetch the sheet edit page HTML and extract quest_name → url pairs.
+/// Pattern in Google Sheets JS: LS{url}]]LS{name}]]F
+pub fn fetch_quest_links(gid: &str) -> std::collections::HashMap<String, String> {
+    let url = format!(
+        "https://docs.google.com/spreadsheets/d/{}/edit?gid={}",
+        SHEET_ID, gid
+    );
+    let html = match make_client().and_then(|c| c.get(&url).send().map_err(|e| e.to_string())).and_then(|r| r.text().map_err(|e| e.to_string())) {
+        Ok(h) => h,
+        Err(_) => return std::collections::HashMap::new(),
+    };
+
+    let mut map = std::collections::HashMap::new();
+    // Regex-free parsing: find all "LS{url}]]LS{name}]]F" occurrences
+    let marker = "LS";
+    let end_marker = "]]LS";
+    let end_f = "]]F";
+    let mut pos = 0;
+    while let Some(start) = html[pos..].find("LShttps://www.dofuspourlesnoobs.com/") {
+        let abs = pos + start + 2; // skip "LS"
+        // Find end of URL
+        if let Some(url_end) = html[abs..].find("]]LS") {
+            let quest_url = html[abs..abs + url_end].to_string();
+            let name_start = abs + url_end + 4; // skip "]]LS"
+            if let Some(name_end) = html[name_start..].find("]]F") {
+                let raw_name = &html[name_start..name_start + name_end];
+                // Decode \\u00XX unicode escapes
+                let name = decode_unicode_escapes(raw_name);
+                map.entry(name).or_insert(quest_url);
+            }
+            pos = abs + url_end + 4;
+        } else {
+            break;
+        }
+    }
+    let _ = (marker, end_marker, end_f);
+    map
+}
+
+fn slugify(name: &str) -> String {
+    let mut slug = String::with_capacity(name.len());
+    for c in name.chars() {
+        if c.is_ascii_alphanumeric() {
+            slug.push(c.to_ascii_lowercase());
+        } else {
+            // apostrophes, spaces, accents, punctuation all become hyphens
+            if !slug.ends_with('-') {
+                slug.push('-');
+            }
+        }
+    }
+    let slug = slug.trim_matches('-').to_string();
+    format!("https://www.dofuspourlesnoobs.com/{}.html", slug)
+}
+
+fn decode_unicode_escapes(s: &str) -> String {
+    let mut result = String::with_capacity(s.len());
+    let mut chars = s.chars().peekable();
+    while let Some(c) = chars.next() {
+        if c == '\\' {
+            match chars.next() {
+                Some('u') => {
+                    let hex: String = chars.by_ref().take(4).collect();
+                    if let Ok(n) = u32::from_str_radix(&hex, 16) {
+                        if let Some(decoded) = char::from_u32(n) {
+                            result.push(decoded);
+                            continue;
+                        }
+                    }
+                    result.push_str("\\u");
+                    result.push_str(&hex);
+                }
+                // Google Sheets double-escapes: \\u0027 → '
+                Some('\\') => {
+                    if chars.peek() == Some(&'u') {
+                        chars.next(); // consume 'u'
+                        let hex: String = chars.by_ref().take(4).collect();
+                        if let Ok(n) = u32::from_str_radix(&hex, 16) {
+                            if let Some(decoded) = char::from_u32(n) {
+                                result.push(decoded);
+                                continue;
+                            }
+                        }
+                        result.push_str("\\u");
+                        result.push_str(&hex);
+                    } else {
+                        result.push('\\');
+                    }
+                }
+                Some(other) => { result.push('\\'); result.push(other); }
+                None => result.push('\\'),
+            }
+        } else {
+            result.push(c);
+        }
+    }
+    result
+}
+
+fn get_cell(row: &[String], col: usize) -> &str {
+    row.get(col).map(|s| s.trim()).unwrap_or("")
+}
+
+fn find_checkbox_col(row: &[String]) -> Option<(usize, bool)> {
+    for (i, cell) in row.iter().enumerate() {
+        let v = cell.trim().to_uppercase();
+        if v == "FALSE" || v == "TRUE" {
+            return Some((i, v == "TRUE"));
+        }
+    }
+    None
+}
+
+fn parse_level_from_cell(cell: &str) -> Option<u32> {
+    // Only parse from the specific cell containing "niveau recommandé", not the full row
+    let lower = cell.to_lowercase();
+    if lower.contains("niveau recommandé") || lower.contains("niveau recommande") {
+        // Extract only the number immediately after the colon/space
+        if let Some(colon) = lower.find(':') {
+            let after = lower[colon + 1..].trim_start();
+            let digits: String = after.chars().take_while(|c| c.is_ascii_digit()).collect();
+            return digits.parse().ok();
+        }
+    }
+    None
+}
+
+fn is_resource_row(row: &[String]) -> Option<(u32, String)> {
+    // Resources live in the right portion of the sheet (cols 36+)
+    // Pattern: quantity in some col, empty cols, then name
+    for start_col in 36..row.len().saturating_sub(4) {
+        let qty_str = row.get(start_col).map(|s| s.trim()).unwrap_or("");
+        if qty_str.is_empty() { continue; }
+        if let Ok(qty) = qty_str.parse::<u32>() {
+            // Look for the name within the next few cols
+            for name_col in (start_col + 1)..=(start_col + 5).min(row.len().saturating_sub(1)) {
+                let name = row.get(name_col).map(|s| s.trim()).unwrap_or("");
+                if !name.is_empty() && !name.to_uppercase().contains("KAMAS") || !name.is_empty() {
+                    // Check that cols between qty and name are empty
+                    let all_empty = ((start_col + 1)..name_col)
+                        .all(|c| row.get(c).map(|s| s.trim()).unwrap_or("").is_empty());
+                    if all_empty {
+                        return Some((qty, name.to_string()));
+                    }
+                }
+            }
+        }
+    }
+    None
+}
+
+fn parse_combat_indicators(row: &[String], legend: &[CombatType], checkbox_col: usize) -> Vec<CombatIndicator> {
+    let mut indicators = Vec::new();
+    for ct in legend {
+        // Skip the checkbox column and the quest name column — they are not combat indicators
+        if ct.column <= checkbox_col + 1 { continue; }
+        let cell = get_cell(row, ct.column);
+        // Skip empty cells and boolean-looking values
+        if cell.is_empty()
+            || cell.eq_ignore_ascii_case("false")
+            || cell.eq_ignore_ascii_case("true")
+        {
+            continue;
+        }
+        indicators.push(CombatIndicator {
+            combat_type: ct.name.clone(),
+            count: cell.to_string(),
+        });
+    }
+    indicators
+}
+
+fn extract_note(row: &[String], name_col: usize, legend: &[CombatType]) -> Option<String> {
+    // Note is typically in the last significant column after the combat indicators
+    // Search for non-empty cell after col name_col+1, skipping combat indicator cols
+    let combat_cols: std::collections::HashSet<usize> = legend.iter().map(|c| c.column).collect();
+    let max_search = row.len().min(36);
+    for col in (name_col + 1)..max_search {
+        let cell = get_cell(row, col);
+        if !cell.is_empty() && !combat_cols.contains(&col) {
+            // Likely a note
+            if !cell.eq_ignore_ascii_case("false") && !cell.eq_ignore_ascii_case("true") {
+                return Some(cell.to_string());
+            }
+        }
+    }
+    None
+}
+
+pub fn parse_guide(gid: &str, name: &str, csv: &str) -> GuideData {
+    parse_guide_with_links(gid, name, csv, &std::collections::HashMap::new())
+}
+
+pub fn parse_guide_with_links(
+    gid: &str,
+    name: &str,
+    csv: &str,
+    links: &std::collections::HashMap<String, String>,
+) -> GuideData {
+    let mut reader = csv::ReaderBuilder::new()
+        .has_headers(false)
+        .flexible(true)
+        .from_reader(csv.as_bytes());
+
+    let rows: Vec<Vec<String>> = reader
+        .records()
+        .filter_map(|r| r.ok())
+        .map(|r| r.iter().map(|s| s.to_string()).collect())
+        .collect();
+
+    let mut effect = String::new();
+    let mut recommended_level: Option<u32> = None;
+    let mut resources: Vec<Resource> = Vec::new();
+    let mut combat_legend: Vec<CombatType> = Vec::new();
+    let mut sections: Vec<Section> = Vec::new();
+
+    // Phase 1: Extract effect (first non-empty cell in col 17+ within first 10 rows)
+    for row in rows.iter().take(8) {
+        for col in 14..row.len() {
+            let cell = get_cell(row, col);
+            if !cell.is_empty() && cell.len() > 20 && !cell.contains("Multiplicateur") {
+                effect = cell.to_string();
+                break;
+            }
+        }
+        if !effect.is_empty() { break; }
+    }
+
+    // Phase 2: Scan entire sheet
+    let mut in_quest_area = false;
+    let mut current_section = Section { name: "Prérequis".to_string(), items: Vec::new() };
+    let mut pending_group: Option<(Option<String>, Vec<QuestItem>)> = None;
+    let mut legend_row_idx: Option<usize> = None;
+
+    for (row_idx, row) in rows.iter().enumerate() {
+        // Extract resources from right side
+        if let Some((qty, rname)) = is_resource_row(row) {
+            if !rname.is_empty() {
+                resources.push(Resource { quantity: qty, name: rname });
+            }
+        }
+
+        // Look for recommended level — check each cell individually to avoid cross-cell digit merging
+        if recommended_level.is_none() {
+            for cell in row.iter() {
+                if let Some(lvl) = parse_level_from_cell(cell.trim()) {
+                    recommended_level = Some(lvl);
+                    break;
+                }
+            }
+        }
+
+        // Detect legend row (contains "Bashing" or "bash" or "Combat solo")
+        let row_text_low: String = row.iter().map(|s| s.to_lowercase()).collect::<Vec<_>>().join("|");
+        if row_text_low.contains("bash") || row_text_low.contains("combat solo") {
+            legend_row_idx = Some(row_idx);
+            combat_legend.clear();
+            for (col, cell) in row.iter().enumerate() {
+                let t = cell.trim();
+                if !t.is_empty() && col < 36 {
+                    combat_legend.push(CombatType { name: t.to_string(), column: col });
+                }
+            }
+            // Check next row for secondary legend entries
+            if let Some(next_row) = rows.get(row_idx + 1) {
+                let has_checkbox = find_checkbox_col(next_row).is_some();
+                if !has_checkbox {
+                    for (col, cell) in next_row.iter().enumerate() {
+                        let t = cell.trim();
+                        if !t.is_empty() && col < 36 && !combat_legend.iter().any(|c| c.column == col) {
+                            combat_legend.push(CombatType { name: t.to_string(), column: col });
+                        }
+                    }
+                }
+            }
+        }
+
+        // Detect section markers: "Prérequis", "Les quêtes"
+        for col in 0..row.len().min(5) {
+            let cell = get_cell(row, col);
+            if cell == "Les quêtes" || cell == "Prérequis" || cell == "Les quetes" {
+                // Flush pending group
+                if let Some((note, quests)) = pending_group.take() {
+                    if !quests.is_empty() {
+                        current_section.items.push(SectionItem::Group(GroupItem { note, quests }));
+                    }
+                }
+                if !current_section.items.is_empty() || !sections.is_empty() {
+                    let prev = std::mem::replace(&mut current_section, Section {
+                        name: cell.to_string(),
+                        items: Vec::new(),
+                    });
+                    if !prev.items.is_empty() { sections.push(prev); }
+                } else {
+                    current_section.name = cell.to_string();
+                }
+                in_quest_area = true;
+            }
+        }
+
+        // Zone header: non-empty text at col 14-18, no checkbox
+        if in_quest_area && find_checkbox_col(row).is_none() {
+            for col in 14..row.len().min(20) {
+                let cell = get_cell(row, col);
+                if !cell.is_empty() && cell.len() < 50
+                    && !cell.contains("recommandé")
+                    && !cell.contains("Rappel")
+                    && !cell.contains("Lorsque")
+                    && !cell.contains("quêtes sont dans")
+                    && !cell.to_lowercase().contains("bash")
+                    && !cell.to_lowercase().contains("combat")
+                    && !cell.to_lowercase().contains("donjon")
+                    && !cell.to_lowercase().contains("horaire")
+                {
+                    // Flush pending group
+                    if let Some((note, quests)) = pending_group.take() {
+                        if !quests.is_empty() {
+                            current_section.items.push(SectionItem::Group(GroupItem { note, quests }));
+                        }
+                    }
+                    current_section.items.push(SectionItem::Instruction(InstructionItem {
+                        text: format!("__ZONE__:{}", cell),
+                    }));
+                    break;
+                }
+            }
+        }
+
+        // Instruction lines (non-quest text within quest area)
+        if in_quest_area && find_checkbox_col(row).is_none() {
+            // Check col 5-9 for group notes or instructions
+            for col in 5..row.len().min(12) {
+                let cell = get_cell(row, col);
+                if !cell.is_empty() && cell.len() > 5 && col < 36 {
+                    let lower = cell.to_lowercase();
+                    // Group note pattern
+                    if cell.contains("même zone") || cell.contains("ensemble") {
+                        if let Some((_, ref mut quests)) = pending_group {
+                            // Already in a group - flush and start new
+                            let old = pending_group.take().unwrap();
+                            if !old.1.is_empty() {
+                                current_section.items.push(SectionItem::Group(GroupItem { note: old.0, quests: old.1 }));
+                            }
+                        }
+                        pending_group = Some((Some(cell.to_string()), Vec::new()));
+                        break;
+                    }
+                    // General instruction
+                    if !lower.contains("recommandé")
+                        && !lower.contains("rappel")
+                        && !lower.contains("bash")
+                        && !lower.contains("combat")
+                        && !lower.contains("donjon")
+                    {
+                        current_section.items.push(SectionItem::Instruction(InstructionItem {
+                            text: cell.to_string(),
+                        }));
+                    }
+                    break;
+                }
+            }
+        }
+
+        // Quest rows
+        if let Some((checkbox_col, completed)) = find_checkbox_col(row) {
+            in_quest_area = true;
+            let name_col = checkbox_col + 1;
+            let quest_name = get_cell(row, name_col).to_string();
+            if quest_name.is_empty() { continue; }
+
+            let combat_indicators = parse_combat_indicators(row, &combat_legend, checkbox_col);
+            let note = extract_note(row, name_col, &combat_legend);
+            let url = Some(links.get(&quest_name).cloned()
+                .unwrap_or_else(|| slugify(&quest_name)));
+
+            let quest = QuestItem {
+                name: quest_name,
+                completed,
+                combat_indicators,
+                note,
+                url,
+            };
+
+            // Col 7 = grouped (one extra indent vs col 6)
+            if checkbox_col >= 7 {
+                if pending_group.is_none() {
+                    pending_group = Some((None, Vec::new()));
+                }
+                if let Some((_, ref mut quests)) = pending_group {
+                    quests.push(quest);
+                }
+            } else {
+                // Flush any pending group first
+                if let Some((note, quests)) = pending_group.take() {
+                    if !quests.is_empty() {
+                        current_section.items.push(SectionItem::Group(GroupItem { note, quests }));
+                    }
+                }
+                current_section.items.push(SectionItem::Quest(quest));
+            }
+        }
+    }
+
+    // Flush remaining
+    if let Some((note, quests)) = pending_group.take() {
+        if !quests.is_empty() {
+            current_section.items.push(SectionItem::Group(GroupItem { note, quests }));
+        }
+    }
+    if !current_section.items.is_empty() {
+        sections.push(current_section);
+    }
+
+    GuideData {
+        name: name.to_string(),
+        gid: gid.to_string(),
+        effect,
+        recommended_level,
+        combat_legend,
+        resources,
+        sections,
+    }
+}
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@ -0,0 +1,41 @@
+{
+  "$schema": "https://schema.tauri.app/config/2",
+  "productName": "TougliGui",
+  "version": "0.1.0",
+  "identifier": "com.anthony.toughligui",
+  "build": {
+    "beforeDevCommand": "npm run dev",
+    "devUrl": "http://localhost:1420",
+    "beforeBuildCommand": "npm run build",
+    "frontendDist": "../dist"
+  },
+  "app": {
+    "windows": [
+      {
+        "title": "TougliGui",
+        "width": 1100,
+        "height": 720,
+        "minWidth": 800,
+        "minHeight": 500,
+        "decorations": false,
+        "transparent": false,
+        "alwaysOnTop": true,
+        "resizable": true
+      }
+    ],
+    "security": {
+      "csp": null
+    }
+  },
+  "bundle": {
+    "active": true,
+    "targets": "all",
+    "icon": [
+      "icons/32x32.png",
+      "icons/128x128.png",
+      "icons/128x128@2x.png",
+      "icons/icon.icns",
+      "icons/icon.ico"
+    ]
+  }
+}
--- a/src/App.css
+++ b/src/App.css
@ -0,0 +1 @@
+/* Overridden by index.css — kept empty */
--- a/src/App.tsx
+++ b/src/App.tsx
@ -0,0 +1,89 @@
+import { useEffect, useState } from "react";
+import { invoke } from "@tauri-apps/api/core";
+import { useStore } from "./store";
+import TitleBar from "./components/TitleBar";
+import Sidebar from "./components/Sidebar";
+import HomeView from "./components/HomeView";
+import GuideView from "./components/GuideView";
+import ProfileModal from "./components/ProfileModal";
+import SyncOverlay from "./components/SyncOverlay";
+
+export default function App() {
+  const { loadProfiles, loadGuides, view, syncing, syncGuides } = useStore();
+  const [showProfileModal, setShowProfileModal] = useState(false);
+  const [needsSync, setNeedsSync] = useState(false);
+
+  useEffect(() => {
+    async function init() {
+      await loadProfiles();
+      const has = await invoke<boolean>("has_guides");
+      if (!has) {
+        setNeedsSync(true);
+      } else {
+        await loadGuides();
+      }
+    }
+    init();
+  }, []);
+
+  async function handleInitialSync() {
+    setNeedsSync(false);
+    await syncGuides();
+  }
+
+  return (
+    <div className="app-shell">
+      <TitleBar onOpenProfiles={() => setShowProfileModal(true)} />
+      <div className="app-body">
+        <Sidebar />
+        <main className="app-main">
+          {view === "home" ? <HomeView /> : <GuideView />}
+        </main>
+      </div>
+
+      {showProfileModal && <ProfileModal onClose={() => setShowProfileModal(false)} />}
+      {syncing && <SyncOverlay />}
+      {needsSync && (
+        <div style={{
+          position: "fixed", inset: 0, background: "rgba(0,0,0,0.85)",
+          display: "flex", alignItems: "center", justifyContent: "center",
+          zIndex: 100, borderRadius: "10px"
+        }}>
+          <div style={{
+            background: "#161b22", border: "1px solid #f0c040", borderRadius: "12px",
+            padding: "40px 48px", maxWidth: "440px", textAlign: "center",
+            display: "flex", flexDirection: "column", gap: "16px"
+          }}>
+            <div style={{ fontSize: "40px" }}>⚔️</div>
+            <h2 style={{ fontSize: "20px", fontWeight: 700, color: "#f0c040" }}>
+              Bienvenue dans TougliGui
+            </h2>
+            <p style={{ color: "#94a3b8", fontSize: "14px", lineHeight: 1.6 }}>
+              Première utilisation — synchronisation du guide Tougli depuis Google Sheets.
+              <br />Cela peut prendre quelques secondes.
+            </p>
+            <button
+              onClick={handleInitialSync}
+              style={{
+                background: "#f0c040", color: "#0d1117", border: "none",
+                padding: "10px 24px", borderRadius: "8px", fontWeight: 700,
+                fontSize: "14px", cursor: "pointer", marginTop: "8px"
+              }}
+            >
+              Synchroniser maintenant
+            </button>
+          </div>
+        </div>
+      )}
+
+      <style>{`
+        .app-shell {
+          display: flex; flex-direction: column; height: 100vh;
+          background: #0d1117; overflow: hidden;
+        }
+        .app-body { display: flex; flex: 1; overflow: hidden; }
+        .app-main { flex: 1; overflow: hidden; display: flex; flex-direction: column; }
+      `}</style>
+    </div>
+  );
+}
--- a/src/assets/react.svg
+++ b/src/assets/react.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
--- a/src/components/GuideView.tsx
+++ b/src/components/GuideView.tsx
@ -0,0 +1,249 @@
+import { openUrl } from "@tauri-apps/plugin-opener";
+import { useStore } from "../store";
+import { SectionItem, QuestItem } from "../types";
+
+export default function GuideView() {
+  const { activeGuideData, completedQuests, toggleQuest } = useStore();
+
+  if (!activeGuideData) return null;
+
+  const { name, effect, recommended_level, resources, sections } = activeGuideData;
+
+  const allQuests = collectAllQuests(sections);
+  const completedCount = allQuests.filter(q => completedQuests.has(q)).length;
+  const pct = allQuests.length > 0 ? Math.round((completedCount / allQuests.length) * 100) : 0;
+
+  return (
+    <div style={{ flex: 1, display: "flex", overflow: "hidden" }}>
+      {/* Main quest list */}
+      <div style={{ flex: 1, overflowY: "auto", padding: "20px 24px" }}>
+        {/* Guide header */}
+        <div style={{ marginBottom: "20px" }}>
+          <h1 style={{ fontSize: "20px", fontWeight: 700, color: "#f0c040", marginBottom: "4px" }}>
+            {name}
+          </h1>
+          <div style={{ display: "flex", gap: "16px", alignItems: "center", marginBottom: "10px" }}>
+            {recommended_level && (
+              <span style={{
+                fontSize: "11px", background: "rgba(74,158,255,0.15)", color: "#4a9eff",
+                border: "1px solid rgba(74,158,255,0.3)", borderRadius: "4px", padding: "2px 8px",
+              }}>
+                Niveau recommandé : {recommended_level}
+              </span>
+            )}
+            <span style={{ fontSize: "11px", color: "#94a3b8" }}>
+              {completedCount}/{allQuests.length} quêtes · {pct}%
+            </span>
+          </div>
+          {/* Progress bar */}
+          <div style={{ height: "4px", background: "#2d3748", borderRadius: "2px", overflow: "hidden" }}>
+            <div style={{
+              height: "100%", width: `${pct}%`,
+              background: pct === 100 ? "#4ade80" : "linear-gradient(90deg, #4a9eff, #f0c040)",
+              borderRadius: "2px", transition: "width 0.3s ease",
+            }} />
+          </div>
+          {effect && (
+            <div style={{
+              marginTop: "10px", background: "rgba(240,192,64,0.05)",
+              border: "1px solid rgba(240,192,64,0.2)", borderRadius: "6px",
+              padding: "8px 12px", fontSize: "11px", color: "#94a3b8", lineHeight: 1.5,
+            }}>
+              <span style={{ color: "#f0c040", fontWeight: 600 }}>Effet : </span>
+              {effect}
+            </div>
+          )}
+        </div>
+
+        {/* Sections */}
+        {sections.map((section, si) => (
+          <div key={si} style={{ marginBottom: "20px" }}>
+            <h2 style={{
+              fontSize: "11px", fontWeight: 600, color: "#4a5568",
+              textTransform: "uppercase", letterSpacing: "0.1em",
+              marginBottom: "8px", borderBottom: "1px solid #2d3748", paddingBottom: "4px",
+            }}>
+              {section.name}
+            </h2>
+            {section.items.map((item, ii) => (
+              <SectionItemView key={ii} item={item} completedQuests={completedQuests} onToggle={toggleQuest} />
+            ))}
+          </div>
+        ))}
+      </div>
+
+      {/* Resources panel */}
+      {resources.length > 0 && (
+        <div style={{
+          width: "200px", flexShrink: 0, background: "#161b22",
+          borderLeft: "1px solid #2d3748", overflowY: "auto", padding: "16px 14px",
+        }}>
+          <h3 style={{
+            fontSize: "11px", fontWeight: 600, color: "#4a5568",
+            textTransform: "uppercase", letterSpacing: "0.1em", marginBottom: "10px",
+          }}>
+            Ressources
+          </h3>
+          {resources.map((r, i) => (
+            <div key={i} style={{
+              display: "flex", justifyContent: "space-between", alignItems: "center",
+              padding: "4px 0", borderBottom: "1px solid #1f2937",
+              fontSize: "11px",
+            }}>
+              <span style={{ color: "#94a3b8", flex: 1, marginRight: "8px" }}>{r.name}</span>
+              <span style={{ color: "#f0c040", fontWeight: 700, flexShrink: 0 }}>×{r.quantity}</span>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function SectionItemView({ item, completedQuests, onToggle }: {
+  item: SectionItem;
+  completedQuests: Set<string>;
+  onToggle: (name: string) => void;
+}) {
+  if (item.type === "Instruction") {
+    if (item.text.startsWith("__ZONE__:")) {
+      const zone = item.text.replace("__ZONE__:", "");
+      return (
+        <div style={{
+          display: "flex", alignItems: "center", gap: "8px",
+          padding: "8px 0 4px", marginBottom: "2px",
+        }}>
+          <div style={{ flex: 1, height: "1px", background: "#2d3748" }} />
+          <span style={{ fontSize: "11px", color: "#4a9eff", fontWeight: 600, flexShrink: 0 }}>{zone}</span>
+          <div style={{ flex: 1, height: "1px", background: "#2d3748" }} />
+        </div>
+      );
+    }
+    return (
+      <div style={{
+        background: "rgba(74,158,255,0.05)", border: "1px solid rgba(74,158,255,0.15)",
+        borderRadius: "6px", padding: "8px 12px", marginBottom: "4px",
+        fontSize: "11px", color: "#94a3b8", lineHeight: 1.5,
+      }}>
+        ℹ️ {item.text}
+      </div>
+    );
+  }
+
+  if (item.type === "Group") {
+    return (
+      <div style={{
+        background: "rgba(255,255,255,0.02)", border: "1px solid #2d3748",
+        borderRadius: "6px", padding: "8px 10px", marginBottom: "6px",
+      }}>
+        {item.note && (
+          <div style={{
+            fontSize: "10px", color: "#4a9eff", marginBottom: "6px",
+            fontStyle: "italic",
+          }}>
+            🔗 {item.note}
+          </div>
+        )}
+        {item.quests.map((q, i) => (
+          <QuestRow key={i} quest={q} indent completed={completedQuests.has(q.name)} onToggle={onToggle} />
+        ))}
+      </div>
+    );
+  }
+
+  if (item.type === "Quest") {
+    return <QuestRow quest={item} completed={completedQuests.has(item.name)} onToggle={onToggle} />;
+  }
+
+  return null;
+}
+
+function QuestRow({ quest, completed, onToggle, indent }: {
+  quest: QuestItem;
+  completed: boolean;
+  onToggle: (name: string) => void;
+  indent?: boolean;
+}) {
+  return (
+    <div
+      onClick={() => onToggle(quest.name)}
+      style={{
+        display: "flex", alignItems: "flex-start", gap: "8px",
+        padding: indent ? "4px 0" : "5px 6px",
+        borderRadius: "5px", cursor: "pointer",
+        marginBottom: indent ? "2px" : "3px",
+        opacity: completed ? 0.6 : 1,
+        transition: "all 0.12s",
+      }}
+      onMouseEnter={e => {
+        (e.currentTarget as HTMLElement).style.background = "rgba(255,255,255,0.04)";
+      }}
+      onMouseLeave={e => {
+        (e.currentTarget as HTMLElement).style.background = "transparent";
+      }}
+    >
+      <input
+        type="checkbox"
+        checked={completed}
+        onChange={() => onToggle(quest.name)}
+        onClick={e => e.stopPropagation()}
+        style={{ marginTop: "2px", flexShrink: 0 }}
+      />
+      <div style={{ flex: 1, minWidth: 0 }}>
+        <div style={{ display: "flex", alignItems: "center", gap: "5px", flexWrap: "wrap" }}>
+          <span style={{
+            fontSize: "12px", color: completed ? "#4a5568" : "#e2e8f0",
+            textDecoration: completed ? "line-through" : "none",
+            lineHeight: 1.4,
+          }}>
+            {quest.name}
+          </span>
+          {quest.url && (
+            <span
+              title="Voir sur Dofus Pour Les Noobs"
+              onClick={e => { e.stopPropagation(); openUrl(quest.url!); }}
+              style={{
+                fontSize: "10px", color: "#4a9eff", cursor: "pointer",
+                opacity: 0.7, flexShrink: 0, lineHeight: 1,
+              }}
+              onMouseEnter={e => (e.currentTarget as HTMLElement).style.opacity = "1"}
+              onMouseLeave={e => (e.currentTarget as HTMLElement).style.opacity = "0.7"}
+            >
+              🔗
+            </span>
+          )}
+        </div>
+        {quest.combat_indicators.length > 0 && (
+          <div style={{ display: "flex", flexWrap: "wrap", gap: "3px", marginTop: "3px" }}>
+            {quest.combat_indicators.map((ci, i) => (
+              <span key={i} style={{
+                fontSize: "9px", padding: "1px 5px",
+                background: "rgba(74,158,255,0.15)", color: "#4a9eff",
+                border: "1px solid rgba(74,158,255,0.25)", borderRadius: "3px",
+              }}>
+                {ci.combat_type} {ci.count}
+              </span>
+            ))}
+          </div>
+        )}
+        {quest.note && (
+          <div style={{ fontSize: "10px", color: "#94a3b8", marginTop: "2px", fontStyle: "italic" }}>
+            → {quest.note}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function collectAllQuests(sections: import("../types").Section[] | undefined): string[] {
+  if (!sections) return [];
+  const names: string[] = [];
+  for (const section of sections) {
+    for (const item of section.items) {
+      if (item.type === "Quest") names.push(item.name);
+      else if (item.type === "Group") item.quests.forEach((q: import("../types").QuestItem) => names.push(q.name));
+    }
+  }
+  return names;
+}
--- a/src/components/HomeView.tsx
+++ b/src/components/HomeView.tsx
@ -0,0 +1,148 @@
+import { useStore } from "../store";
+
+export default function HomeView() {
+  const { guides, openGuide, profiles, activeProfileId } = useStore();
+
+  const activeProfile = profiles.find(p => p.id === activeProfileId);
+
+  const totalQuests = guides.reduce((s, g) => s + g.total_quests, 0);
+  const totalCompleted = guides.reduce((s, g) => s + g.completed_quests, 0);
+  const globalPct = totalQuests > 0 ? Math.round((totalCompleted / totalQuests) * 100) : 0;
+
+  const completedGuides = guides.filter(g => g.total_quests > 0 && g.completed_quests === g.total_quests);
+  const inProgressGuides = guides.filter(g => g.completed_quests > 0 && g.completed_quests < g.total_quests);
+
+  return (
+    <div style={{ flex: 1, overflowY: "auto", padding: "20px 24px" }}>
+      {/* Header */}
+      <div style={{ marginBottom: "24px" }}>
+        <h1 style={{ fontSize: "18px", fontWeight: 700, color: "#f0c040", marginBottom: "4px" }}>
+          Tougli — Guide Dofus
+        </h1>
+        {activeProfile && (
+          <p style={{ fontSize: "13px", color: "#94a3b8" }}>
+            Profil actif : <span style={{ color: "#e2e8f0", fontWeight: 600 }}>{activeProfile.name}</span>
+          </p>
+        )}
+      </div>
+
+      {/* Global progress */}
+      {guides.length > 0 && (
+        <div style={{
+          background: "#161b22", border: "1px solid #2d3748", borderRadius: "10px",
+          padding: "16px 20px", marginBottom: "24px",
+        }}>
+          <div style={{ display: "flex", justifyContent: "space-between", marginBottom: "8px" }}>
+            <span style={{ fontSize: "13px", color: "#94a3b8" }}>Progression globale</span>
+            <span style={{ fontSize: "13px", fontWeight: 700, color: "#f0c040" }}>
+              {totalCompleted} / {totalQuests} quêtes ({globalPct}%)
+            </span>
+          </div>
+          <div style={{ height: "6px", background: "#2d3748", borderRadius: "3px", overflow: "hidden" }}>
+            <div style={{
+              height: "100%", width: `${globalPct}%`,
+              background: "linear-gradient(90deg, #4a9eff, #f0c040)",
+              borderRadius: "3px", transition: "width 0.4s ease",
+            }} />
+          </div>
+          <div style={{ marginTop: "8px", display: "flex", gap: "16px" }}>
+            <Stat label="Complétés" value={completedGuides.length} color="#4ade80" />
+            <Stat label="En cours" value={inProgressGuides.length} color="#f0c040" />
+            <Stat label="Total" value={guides.length} color="#94a3b8" />
+          </div>
+        </div>
+      )}
+
+      {/* In progress first */}
+      {inProgressGuides.length > 0 && (
+        <Section title="En cours" guides={inProgressGuides} onOpen={openGuide} />
+      )}
+
+      {/* All guides grid */}
+      <Section title="Tous les guides" guides={guides} onOpen={openGuide} />
+    </div>
+  );
+}
+
+function Stat({ label, value, color }: { label: string; value: number; color: string }) {
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "2px" }}>
+      <span style={{ fontSize: "16px", fontWeight: 700, color }}>{value}</span>
+      <span style={{ fontSize: "11px", color: "#4a5568" }}>{label}</span>
+    </div>
+  );
+}
+
+function Section({ title, guides, onOpen }: {
+  title: string;
+  guides: import("../types").GuideListItem[];
+  onOpen: (gid: string) => void;
+}) {
+  return (
+    <div style={{ marginBottom: "24px" }}>
+      <h2 style={{ fontSize: "12px", fontWeight: 600, color: "#4a5568", textTransform: "uppercase", letterSpacing: "0.1em", marginBottom: "10px" }}>
+        {title}
+      </h2>
+      <div style={{
+        display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(180px, 1fr))", gap: "8px",
+      }}>
+        {guides.map(guide => <GuideCard key={guide.gid} guide={guide} onOpen={onOpen} />)}
+      </div>
+    </div>
+  );
+}
+
+function GuideCard({ guide, onOpen }: {
+  guide: import("../types").GuideListItem;
+  onOpen: (gid: string) => void;
+}) {
+  const pct = guide.total_quests > 0
+    ? Math.round((guide.completed_quests / guide.total_quests) * 100)
+    : 0;
+  const isDone = pct === 100 && guide.total_quests > 0;
+
+  return (
+    <button
+      onClick={() => onOpen(guide.gid)}
+      style={{
+        background: isDone ? "rgba(74,222,128,0.05)" : "#161b22",
+        border: `1px solid ${isDone ? "rgba(74,222,128,0.3)" : "#2d3748"}`,
+        borderRadius: "8px", padding: "12px 14px", cursor: "pointer",
+        textAlign: "left", transition: "all 0.15s",
+      }}
+      onMouseEnter={e => {
+        (e.currentTarget as HTMLElement).style.borderColor = isDone ? "rgba(74,222,128,0.6)" : "#f0c040";
+        (e.currentTarget as HTMLElement).style.background = isDone ? "rgba(74,222,128,0.08)" : "#1a2233";
+      }}
+      onMouseLeave={e => {
+        (e.currentTarget as HTMLElement).style.borderColor = isDone ? "rgba(74,222,128,0.3)" : "#2d3748";
+        (e.currentTarget as HTMLElement).style.background = isDone ? "rgba(74,222,128,0.05)" : "#161b22";
+      }}
+    >
+      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: "8px" }}>
+        <span style={{
+          fontSize: "12px", fontWeight: 600, color: isDone ? "#4ade80" : "#e2e8f0",
+          lineHeight: 1.3,
+        }}>
+          {guide.name}
+        </span>
+        {isDone && <span style={{ fontSize: "14px" }}>✓</span>}
+      </div>
+      <div style={{ height: "3px", background: "#2d3748", borderRadius: "2px", overflow: "hidden", marginBottom: "6px" }}>
+        <div style={{
+          height: "100%", width: `${pct}%`,
+          background: isDone ? "#4ade80" : pct > 60 ? "#f0c040" : "#4a9eff",
+          borderRadius: "2px",
+        }} />
+      </div>
+      <div style={{ display: "flex", justifyContent: "space-between" }}>
+        <span style={{ fontSize: "10px", color: "#4a5568" }}>
+          {guide.completed_quests}/{guide.total_quests} quêtes
+        </span>
+        <span style={{ fontSize: "10px", fontWeight: 700, color: isDone ? "#4ade80" : "#94a3b8" }}>
+          {pct}%
+        </span>
+      </div>
+    </button>
+  );
+}
--- a/src/components/ProfileModal.tsx
+++ b/src/components/ProfileModal.tsx
@ -0,0 +1,118 @@
+import { useState } from "react";
+import { useStore } from "../store";
+
+export default function ProfileModal({ onClose }: { onClose: () => void }) {
+  const { profiles, activeProfileId, setActiveProfile, createProfile, deleteProfile } = useStore();
+  const [newName, setNewName] = useState("");
+  const [error, setError] = useState("");
+
+  async function handleCreate() {
+    const name = newName.trim();
+    if (!name) return;
+    if (profiles.find(p => p.name === name)) {
+      setError("Un profil avec ce nom existe déjà.");
+      return;
+    }
+    await createProfile(name);
+    setNewName("");
+    setError("");
+  }
+
+  async function handleDelete(id: string) {
+    if (profiles.length <= 1) {
+      setError("Vous ne pouvez pas supprimer le dernier profil.");
+      return;
+    }
+    await deleteProfile(id);
+  }
+
+  return (
+    <div style={{
+      position: "fixed", inset: 0, background: "rgba(0,0,0,0.7)",
+      display: "flex", alignItems: "center", justifyContent: "center", zIndex: 50,
+    }} onClick={e => { if (e.target === e.currentTarget) onClose(); }}>
+      <div style={{
+        background: "#161b22", border: "1px solid #2d3748", borderRadius: "12px",
+        padding: "24px", width: "360px", maxHeight: "500px",
+        display: "flex", flexDirection: "column", gap: "16px",
+      }}>
+        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+          <h2 style={{ fontSize: "16px", fontWeight: 700, color: "#f0c040" }}>Profils</h2>
+          <button onClick={onClose} style={{ background: "none", border: "none", color: "#94a3b8", cursor: "pointer", fontSize: "16px" }}>✕</button>
+        </div>
+
+        {/* Profile list */}
+        <div style={{ flex: 1, overflowY: "auto", display: "flex", flexDirection: "column", gap: "6px" }}>
+          {profiles.map(profile => (
+            <div key={profile.id} style={{
+              display: "flex", alignItems: "center", gap: "8px",
+              background: profile.id === activeProfileId ? "rgba(240,192,64,0.08)" : "#1a2233",
+              border: `1px solid ${profile.id === activeProfileId ? "rgba(240,192,64,0.4)" : "#2d3748"}`,
+              borderRadius: "8px", padding: "10px 12px",
+            }}>
+              <button
+                onClick={() => { setActiveProfile(profile.id); onClose(); }}
+                style={{
+                  flex: 1, background: "none", border: "none", textAlign: "left",
+                  cursor: "pointer",
+                }}
+              >
+                <div style={{ fontSize: "13px", fontWeight: 600, color: profile.id === activeProfileId ? "#f0c040" : "#e2e8f0" }}>
+                  {profile.id === activeProfileId && "✓ "}{profile.name}
+                </div>
+                <div style={{ fontSize: "10px", color: "#4a5568", marginTop: "2px" }}>
+                  Créé le {new Date(profile.created_at).toLocaleDateString("fr-FR")}
+                </div>
+              </button>
+              {profiles.length > 1 && (
+                <button
+                  onClick={() => handleDelete(profile.id)}
+                  style={{
+                    background: "none", border: "none", color: "#f87171",
+                    cursor: "pointer", padding: "4px", borderRadius: "4px", fontSize: "12px",
+                  }}
+                  title="Supprimer ce profil"
+                >
+                  🗑
+                </button>
+              )}
+            </div>
+          ))}
+        </div>
+
+        {/* Create new profile */}
+        <div style={{ borderTop: "1px solid #2d3748", paddingTop: "12px" }}>
+          <p style={{ fontSize: "11px", color: "#4a5568", marginBottom: "8px" }}>Nouveau profil</p>
+          <div style={{ display: "flex", gap: "8px" }}>
+            <input
+              value={newName}
+              onChange={e => { setNewName(e.target.value); setError(""); }}
+              onKeyDown={e => e.key === "Enter" && handleCreate()}
+              placeholder="Nom du profil…"
+              style={{
+                flex: 1, background: "#0d1117", border: "1px solid #2d3748",
+                borderRadius: "6px", padding: "7px 10px", color: "#e2e8f0",
+                fontSize: "12px", outline: "none",
+              }}
+              onFocus={e => (e.target.style.borderColor = "#f0c040")}
+              onBlur={e => (e.target.style.borderColor = "#2d3748")}
+            />
+            <button
+              onClick={handleCreate}
+              disabled={!newName.trim()}
+              style={{
+                background: "#f0c040", color: "#0d1117", border: "none",
+                borderRadius: "6px", padding: "7px 14px", fontWeight: 700,
+                fontSize: "12px", cursor: newName.trim() ? "pointer" : "default",
+                opacity: newName.trim() ? 1 : 0.4,
+              }}
+            >
+              Créer
+            </button>
+          </div>
+          {error && <p style={{ fontSize: "11px", color: "#f87171", marginTop: "6px" }}>{error}</p>}
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@ -0,0 +1,94 @@
+import { useState } from "react";
+import { useStore } from "../store";
+
+export default function Sidebar() {
+  const { guides, openGuide, activeGuideGid, view } = useStore();
+  const [search, setSearch] = useState("");
+
+  const filtered = guides.filter(g =>
+    g.name.toLowerCase().includes(search.toLowerCase())
+  );
+
+  return (
+    <aside style={{
+      width: "220px", flexShrink: 0,
+      background: "#161b22", borderRight: "1px solid #2d3748",
+      display: "flex", flexDirection: "column", overflow: "hidden",
+    }}>
+      <div style={{ padding: "10px 12px", borderBottom: "1px solid #2d3748" }}>
+        <input
+          value={search}
+          onChange={e => setSearch(e.target.value)}
+          placeholder="Rechercher un Dofus…"
+          style={{
+            width: "100%", background: "#0d1117", border: "1px solid #2d3748",
+            borderRadius: "6px", padding: "6px 10px", color: "#e2e8f0",
+            fontSize: "12px", outline: "none",
+          }}
+          onFocus={e => (e.target.style.borderColor = "#f0c040")}
+          onBlur={e => (e.target.style.borderColor = "#2d3748")}
+        />
+      </div>
+
+      <div style={{ flex: 1, overflowY: "auto", padding: "8px 0" }}>
+        {filtered.length === 0 ? (
+          <div style={{ padding: "16px 12px", color: "#4a5568", fontSize: "12px", textAlign: "center" }}>
+            Aucun guide synchronisé
+          </div>
+        ) : (
+          filtered.map(guide => {
+            const pct = guide.total_quests > 0
+              ? Math.round((guide.completed_quests / guide.total_quests) * 100)
+              : 0;
+            const isActive = guide.gid === activeGuideGid && view === "guide";
+
+            return (
+              <button
+                key={guide.gid}
+                onClick={() => openGuide(guide.gid)}
+                style={{
+                  width: "100%", textAlign: "left", background: isActive ? "rgba(240,192,64,0.08)" : "transparent",
+                  border: "none", borderLeft: isActive ? "2px solid #f0c040" : "2px solid transparent",
+                  padding: "8px 12px", cursor: "pointer", transition: "all 0.12s",
+                }}
+                onMouseEnter={e => {
+                  if (!isActive) (e.currentTarget as HTMLElement).style.background = "rgba(255,255,255,0.03)";
+                }}
+                onMouseLeave={e => {
+                  if (!isActive) (e.currentTarget as HTMLElement).style.background = "transparent";
+                }}
+              >
+                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+                  <span style={{
+                    fontSize: "12px", fontWeight: isActive ? 600 : 400,
+                    color: isActive ? "#f0c040" : "#e2e8f0",
+                    whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis",
+                    maxWidth: "140px",
+                  }}>
+                    {guide.name}
+                  </span>
+                  <span style={{
+                    fontSize: "10px", color: pct === 100 ? "#4ade80" : "#94a3b8",
+                    fontWeight: 600, flexShrink: 0,
+                  }}>
+                    {pct}%
+                  </span>
+                </div>
+                <div style={{
+                  marginTop: "4px", height: "2px", background: "#2d3748",
+                  borderRadius: "1px", overflow: "hidden",
+                }}>
+                  <div style={{
+                    height: "100%", width: `${pct}%`,
+                    background: pct === 100 ? "#4ade80" : pct > 50 ? "#f0c040" : "#4a9eff",
+                    transition: "width 0.3s ease",
+                  }} />
+                </div>
+              </button>
+            );
+          })
+        )}
+      </div>
+    </aside>
+  );
+}
--- a/src/components/SyncOverlay.tsx
+++ b/src/components/SyncOverlay.tsx
@ -0,0 +1,47 @@
+import { useStore } from "../store";
+
+export default function SyncOverlay() {
+  const { syncProgress } = useStore();
+  const { current = 0, total = 29, label = "…" } = syncProgress ?? {};
+  const pct = total > 0 ? Math.round((current / total) * 100) : 0;
+
+  return (
+    <div style={{
+      position: "fixed", inset: 0, background: "rgba(0,0,0,0.6)",
+      display: "flex", alignItems: "center", justifyContent: "center",
+      zIndex: 200, borderRadius: "10px",
+    }}>
+      <div style={{
+        background: "#161b22", border: "1px solid #2d3748", borderRadius: "12px",
+        padding: "28px 40px", display: "flex", flexDirection: "column",
+        alignItems: "center", gap: "14px", minWidth: "320px",
+      }}>
+        <div style={{ fontSize: "28px", animation: "spin 1s linear infinite" }}>↻</div>
+
+        <div style={{ width: "100%", textAlign: "center" }}>
+          <p style={{ fontSize: "14px", fontWeight: 600, color: "#e2e8f0", marginBottom: "4px" }}>
+            Synchronisation en cours…
+          </p>
+          <p style={{ fontSize: "12px", color: "#94a3b8" }}>
+            {current}/{total} — <span style={{ color: "#f0c040" }}>{label}</span>
+          </p>
+        </div>
+
+        {/* Progress bar */}
+        <div style={{ width: "100%", height: "4px", background: "#2d3748", borderRadius: "2px", overflow: "hidden" }}>
+          <div style={{
+            height: "100%",
+            width: `${pct}%`,
+            background: "linear-gradient(90deg, #4a9eff, #f0c040)",
+            borderRadius: "2px",
+            transition: "width 0.3s ease",
+          }} />
+        </div>
+
+        <p style={{ fontSize: "11px", color: "#4a5568" }}>
+          {pct}% — Google Sheets CSV
+        </p>
+      </div>
+    </div>
+  );
+}
--- a/src/components/TitleBar.tsx
+++ b/src/components/TitleBar.tsx
@ -0,0 +1,141 @@
+import { getCurrentWindow } from "@tauri-apps/api/window";
+import { useStore } from "../store";
+
+interface Props {
+  onOpenProfiles: () => void;
+}
+
+export default function TitleBar({ onOpenProfiles }: Props) {
+  const { alwaysOnTop, toggleAlwaysOnTop, syncing, syncGuides, view, closeGuide, activeGuideData } = useStore();
+
+  function handleDragMouseDown(e: React.MouseEvent) {
+    if (e.button === 0) {
+      getCurrentWindow().startDragging();
+    }
+  }
+
+  async function handleClose() {
+    await getCurrentWindow().close();
+  }
+
+  async function handleMinimize() {
+    await getCurrentWindow().minimize();
+  }
+
+  return (
+    <div
+      style={{
+        display: "flex", alignItems: "center", height: "40px",
+        background: "#0d1117", borderBottom: "1px solid #2d3748",
+        padding: "0 12px", gap: "8px", flexShrink: 0,
+        userSelect: "none",
+      }}
+    >
+      {/* Zone draggable — appel direct à startDragging() */}
+      <div
+        onMouseDown={handleDragMouseDown}
+        style={{
+          display: "flex", alignItems: "center", gap: "8px", flex: 1,
+          cursor: "grab", userSelect: "none",
+        }}
+      >
+        <img src="/logo_tougli.png" style={{ pointerEvents: "none", width: "24px", height: "24px", objectFit: "contain" }} />
+        <span style={{ pointerEvents: "none", fontSize: "13px", fontWeight: 700, color: "#f0c040", letterSpacing: "0.05em" }}>
+          TougliGui
+        </span>
+        {view === "guide" && activeGuideData && (
+          <>
+            <span style={{ pointerEvents: "none", color: "#4a5568", fontSize: "12px" }}>›</span>
+            <span style={{ pointerEvents: "none", fontSize: "12px", color: "#94a3b8" }}>{activeGuideData.name}</span>
+          </>
+        )}
+      </div>
+
+      {/* Boutons — pas de drag, interactions normales */}
+      <div style={{ display: "flex", alignItems: "center", gap: "4px" }}>
+        {view === "guide" && (
+          <TitleButton onClick={closeGuide} title="Retour à l'accueil">
+            ← Accueil
+          </TitleButton>
+        )}
+
+        <TitleButton onClick={onOpenProfiles} title="Gérer les profils">
+          👤
+        </TitleButton>
+
+        <TitleButton
+          onClick={syncGuides}
+          title="Synchroniser avec Google Sheets"
+          disabled={syncing}
+        >
+          {syncing ? <SpinIcon /> : "↻"}
+        </TitleButton>
+
+        <TitleButton
+          onClick={toggleAlwaysOnTop}
+          title={alwaysOnTop ? "Désactiver fenêtre flottante" : "Activer fenêtre flottante"}
+          active={alwaysOnTop}
+        >
+          📌
+        </TitleButton>
+
+        <div style={{ width: "1px", height: "16px", background: "#2d3748", margin: "0 4px" }} />
+
+        <TitleButton onClick={handleMinimize} title="Réduire">—</TitleButton>
+        <TitleButton onClick={handleClose} title="Fermer" danger>✕</TitleButton>
+      </div>
+    </div>
+  );
+}
+
+function TitleButton({
+  children, onClick, title, active, danger, disabled
+}: {
+  children: React.ReactNode;
+  onClick?: () => void;
+  title?: string;
+  active?: boolean;
+  danger?: boolean;
+  disabled?: boolean;
+}) {
+  return (
+    <button
+      onClick={onClick}
+      title={title}
+      disabled={disabled}
+      style={{
+        background: active ? "rgba(240,192,64,0.15)" : "transparent",
+        border: active ? "1px solid rgba(240,192,64,0.4)" : "1px solid transparent",
+        color: active ? "#f0c040" : danger ? "#f87171" : "#94a3b8",
+        padding: "3px 8px",
+        borderRadius: "5px",
+        cursor: disabled ? "default" : "pointer",
+        fontSize: "12px",
+        fontWeight: 500,
+        transition: "all 0.15s",
+        display: "flex", alignItems: "center", gap: "4px",
+        opacity: disabled ? 0.5 : 1,
+      }}
+      onMouseEnter={e => {
+        if (!disabled) {
+          const el = e.currentTarget;
+          el.style.background = active ? "rgba(240,192,64,0.25)" : danger ? "rgba(248,113,113,0.1)" : "rgba(255,255,255,0.05)";
+          el.style.color = active ? "#f0c040" : danger ? "#f87171" : "#e2e8f0";
+        }
+      }}
+      onMouseLeave={e => {
+        const el = e.currentTarget;
+        el.style.background = active ? "rgba(240,192,64,0.15)" : "transparent";
+        el.style.color = active ? "#f0c040" : danger ? "#f87171" : "#94a3b8";
+      }}
+    >
+      {children}
+    </button>
+  );
+}
+
+function SpinIcon() {
+  return (
+    <span style={{ display: "inline-block", animation: "spin 1s linear infinite" }}>↻</span>
+  );
+}
--- a/src/index.css
+++ b/src/index.css
@ -0,0 +1,108 @@
+@import "tailwindcss";
+
+@theme {
+  --color-bg-deep: #0d1117;
+  --color-bg-surface: #161b22;
+  --color-bg-elevated: #1f2937;
+  --color-bg-card: #1a2233;
+  --color-border: #2d3748;
+  --color-border-bright: #4a5568;
+
+  --color-gold: #f0c040;
+  --color-gold-dim: #b8922e;
+  --color-gold-bg: #2a1f00;
+
+  --color-blue-dofus: #4a9eff;
+  --color-blue-dim: #2563eb;
+
+  --color-green: #4ade80;
+  --color-green-dim: #166534;
+
+  --color-red: #f87171;
+  --color-red-dim: #7f1d1d;
+
+  --color-text-primary: #e2e8f0;
+  --color-text-secondary: #94a3b8;
+  --color-text-muted: #4a5568;
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html, body, #root {
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
+}
+
+body {
+  background: transparent;
+  color: var(--color-text-primary);
+  user-select: none;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+::-webkit-scrollbar-track {
+  background: var(--color-bg-deep);
+}
+::-webkit-scrollbar-thumb {
+  background: var(--color-border-bright);
+  border-radius: 3px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: var(--color-gold-dim);
+}
+
+/* Checkbox custom */
+input[type="checkbox"] {
+  accent-color: var(--color-gold);
+  width: 14px;
+  height: 14px;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+/* Selection */
+::selection {
+  background: rgba(240, 192, 64, 0.3);
+  color: var(--color-text-primary);
+}
+
+/* Animations */
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.animate-fade-in {
+  animation: fadeIn 0.2s ease-out;
+}
+
+.animate-spin {
+  animation: spin 1s linear infinite;
+}
+
+/* Drag region : Tauri gère ça via data-tauri-drag-region en JS natif */
+[data-tauri-drag-region] {
+  cursor: grab;
+}
+
+/* Gold gradient text */
+.text-gold-gradient {
+  background: linear-gradient(135deg, #f0c040, #d4a017);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
--- a/src/main.tsx
+++ b/src/main.tsx
@ -0,0 +1,9 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
--- a/src/store.ts
+++ b/src/store.ts
@ -0,0 +1,142 @@
+import { create } from "zustand";
+import { invoke } from "@tauri-apps/api/core";
+import { Profile, GuideListItem, GuideData, SyncResult } from "./types";
+
+interface AppState {
+  profiles: Profile[];
+  activeProfileId: string | null;
+  guides: GuideListItem[];
+  activeGuideGid: string | null;
+  activeGuideData: GuideData | null;
+  completedQuests: Set<string>;
+  alwaysOnTop: boolean;
+  syncing: boolean;
+  syncProgress: { current: number; total: number; label: string } | null;
+  view: "home" | "guide";
+
+  loadProfiles: () => Promise<void>;
+  setActiveProfile: (id: string) => Promise<void>;
+  createProfile: (name: string) => Promise<void>;
+  deleteProfile: (id: string) => Promise<void>;
+
+  loadGuides: () => Promise<void>;
+  openGuide: (gid: string) => Promise<void>;
+  closeGuide: () => void;
+
+  toggleQuest: (questName: string) => Promise<void>;
+
+  syncGuides: () => Promise<SyncResult>;
+  syncSingleGuide: (gid: string, name: string) => Promise<void>;
+  toggleAlwaysOnTop: () => Promise<void>;
+}
+
+export const useStore = create<AppState>((set, get) => ({
+  profiles: [],
+  activeProfileId: null,
+  guides: [],
+  activeGuideGid: null,
+  activeGuideData: null,
+  completedQuests: new Set(),
+  alwaysOnTop: true,
+  syncing: false,
+  syncProgress: null,
+  view: "home",
+
+  loadProfiles: async () => {
+    const profiles = await invoke<Profile[]>("get_profiles");
+    const saved = await invoke<string | null>("get_setting", { key: "active_profile" });
+    const activeId = saved && profiles.find(p => p.id === saved) ? saved : profiles[0]?.id ?? null;
+    set({ profiles, activeProfileId: activeId });
+    if (activeId) {
+      const completed = await invoke<string[]>("get_completed_quests", { profileId: activeId });
+      set({ completedQuests: new Set(completed) });
+    }
+  },
+
+  setActiveProfile: async (id) => {
+    await invoke("set_setting", { key: "active_profile", value: id });
+    const completed = await invoke<string[]>("get_completed_quests", { profileId: id });
+    set({ activeProfileId: id, completedQuests: new Set(completed) });
+    await get().loadGuides();
+  },
+
+  createProfile: async (name) => {
+    const profile = await invoke<Profile>("create_profile", { name });
+    set(state => ({ profiles: [...state.profiles, profile] }));
+    await get().setActiveProfile(profile.id);
+  },
+
+  deleteProfile: async (id) => {
+    await invoke("delete_profile", { profileId: id });
+    const { profiles, activeProfileId } = get();
+    const remaining = profiles.filter(p => p.id !== id);
+    const newActive = activeProfileId === id ? remaining[0]?.id ?? null : activeProfileId;
+    set({ profiles: remaining, activeProfileId: newActive });
+    if (newActive) await get().setActiveProfile(newActive);
+  },
+
+  loadGuides: async () => {
+    const { activeProfileId } = get();
+    if (!activeProfileId) return;
+    const guides = await invoke<GuideListItem[]>("get_guides_list", { profileId: activeProfileId });
+    set({ guides });
+  },
+
+  openGuide: async (gid) => {
+    const data = await invoke<GuideData>("get_guide", { gid });
+    set({ activeGuideGid: gid, activeGuideData: data, view: "guide" });
+  },
+
+  closeGuide: () => {
+    set({ activeGuideGid: null, activeGuideData: null, view: "home" });
+  },
+
+  toggleQuest: async (questName) => {
+    const { activeProfileId, completedQuests } = get();
+    if (!activeProfileId) return;
+    const isNowCompleted = await invoke<boolean>("toggle_quest", {
+      profileId: activeProfileId,
+      questName,
+    });
+    const next = new Set(completedQuests);
+    if (isNowCompleted) next.add(questName);
+    else next.delete(questName);
+    set({ completedQuests: next });
+
+    // Refresh guide list progress counts
+    await get().loadGuides();
+  },
+
+  syncGuides: async () => {
+    const tabs = await invoke<{ gid: string; name: string }[]>("get_tabs_list");
+    const total = tabs.length;
+    const errors: string[] = [];
+    let synced = 0;
+
+    set({ syncing: true, syncProgress: { current: 0, total, label: "Démarrage…" } });
+
+    for (const tab of tabs) {
+      set({ syncProgress: { current: synced, total, label: tab.name } });
+      try {
+        await invoke("sync_single_guide", { gid: tab.gid, name: tab.name });
+        synced++;
+      } catch (e) {
+        errors.push(`${tab.name}: ${e}`);
+      }
+    }
+
+    set({ syncing: false, syncProgress: null });
+    await get().loadGuides();
+    return { synced, errors };
+  },
+
+  syncSingleGuide: async (gid, name) => {
+    await invoke("sync_single_guide", { gid, name });
+  },
+
+  toggleAlwaysOnTop: async () => {
+    const next = !get().alwaysOnTop;
+    await invoke("set_always_on_top", { value: next });
+    set({ alwaysOnTop: next });
+  },
+}));
--- a/src/types.ts
+++ b/src/types.ts
@ -0,0 +1,70 @@
+export interface Profile {
+  id: string;
+  name: string;
+  created_at: string;
+}
+
+export interface GuideListItem {
+  gid: string;
+  name: string;
+  last_synced_at: string | null;
+  total_quests: number;
+  completed_quests: number;
+}
+
+export interface CombatType {
+  name: string;
+  column: number;
+}
+
+export interface Resource {
+  quantity: number;
+  name: string;
+}
+
+export interface CombatIndicator {
+  combat_type: string;
+  count: string;
+}
+
+export interface QuestItem {
+  name: string;
+  completed: boolean;
+  combat_indicators: CombatIndicator[];
+  note: string | null;
+  url: string | null;
+}
+
+export interface InstructionItem {
+  text: string;
+}
+
+export interface GroupItem {
+  note: string | null;
+  quests: QuestItem[];
+}
+
+export type SectionItem =
+  | { type: "Quest"; name: string; completed: boolean; combat_indicators: CombatIndicator[]; note: string | null; url: string | null }
+  | { type: "Instruction"; text: string }
+  | { type: "Group"; note: string | null; quests: QuestItem[] };
+
+export interface Section {
+  name: string;
+  items: SectionItem[];
+}
+
+export interface GuideData {
+  name: string;
+  gid: string;
+  effect: string;
+  recommended_level: number | null;
+  combat_legend: CombatType[];
+  resources: Resource[];
+  sections: Section[];
+}
+
+export interface SyncResult {
+  synced: number;
+  errors: string[];
+}
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@ -0,0 +1,33 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import tailwindcss from "@tailwindcss/vite";
+
+// @ts-expect-error process is a nodejs global
+const host = process.env.TAURI_DEV_HOST;
+
+// https://vite.dev/config/
+export default defineConfig(async () => ({
+  plugins: [react(), tailwindcss()],
+
+  // Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`
+  //
+  // 1. prevent Vite from obscuring rust errors
+  clearScreen: false,
+  // 2. tauri expects a fixed port, fail if that port is not available
+  server: {
+    port: 1420,
+    strictPort: true,
+    host: host || false,
+    hmr: host
+      ? {
+          protocol: "ws",
+          host,
+          port: 1421,
+        }
+      : undefined,
+    watch: {
+      // 3. tell Vite to ignore watching `src-tauri`
+      ignored: ["**/src-tauri/**"],
+    },
+  },
+}));
				`@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
				`@ -0,0 +1 @@`
				`/* Overridden by index.css — kept empty */`