cleaning old md

2025-12-24 16:50:40 +01:00
parent 917a31d5a8
commit 5dd05a2495
14 changed files with 878 additions and 147 deletions
--- a/docs/EXPORT_GUIDE.md
+++ b/docs/EXPORT_GUIDE.md
@ -0,0 +1,360 @@
+# 📤 Export de Notes Publiques - Guide Complet
+
+## 🎯 Concept
+
+Les notes publiques sont **générées en fichiers HTML statiques** directement sur le serveur. Cela signifie que vous pouvez copier le dossier `public/` et le déployer sur n'importe quel serveur web (Apache, Nginx, GitHub Pages, Netlify, etc.) **sans avoir besoin de Go**.
+
+## 🔍 Lister les notes publiques
+
+Vous pouvez lister toutes les notes publiques avec la commande CLI intégrée :
+
+```bash
+./server list-public
+```
+
+**Sortie** :
+```
+📚 Notes publiques (4):
+
+• Mon Guide
+  Source: personal/guide.md
+  Public: public/guide.html
+  Date:   2025-11-13 20:06:21
+```
+
+Cette commande lit le fichier `notes/.public.json` et affiche :
+- Le titre de chaque note
+- Son chemin source
+- Son chemin public
+- La date de publication
+
+## 📁 Structure générée
+
+Quand vous publiez une note, le système génère automatiquement :
+
+```
+public/
+├── index.html                  # Liste de toutes les notes publiques
+├── ma-note.html               # Notes converties en HTML (structure plate)
+├── autre.html
+└── static/
+    ├── theme.css              # Styles CSS copiés
+    └── themes.css
+```
+
+**Note** : La structure est plate - toutes les notes publiques sont directement dans `public/`, peu importe leur emplacement d'origine dans vos dossiers personnels.
+
+## 🔄 Génération automatique
+
+### Quand une note est publiée
+
+1. **L'utilisateur clique sur "🔒 Privé"** dans l'éditeur
+2. Le système :
+   - Lit le fichier Markdown
+   - Extrait le front matter (titre, tags, date)
+   - Convertit le Markdown en HTML avec goldmark
+   - Génère un fichier HTML standalone complet
+   - Copie les CSS nécessaires
+   - Régénère `index.html` avec la nouvelle note
+3. **Le bouton devient "🌐 Public"**
+
+### Quand une note est retirée
+
+1. **L'utilisateur clique sur "🌐 Public"**
+2. Le système :
+   - Supprime le fichier HTML correspondant
+   - Régénère `index.html` sans cette note
+3. **Le bouton redevient "🔒 Privé"**
+
+## 📋 Emplacement des fichiers
+
+- **Source** : `notes/` (vos fichiers Markdown originaux)
+- **Export** : `public/` (fichiers HTML générés)
+- **Index** : `.public.json` (liste des notes publiques)
+
+## 🚀 Déploiement
+
+### Option 1 : Copie manuelle sur serveur web
+
+```bash
+# Copier le dossier public/ sur votre serveur
+scp -r public/ user@server.com:/var/www/html/notes/
+
+# Ou avec rsync
+rsync -av public/ user@server.com:/var/www/html/notes/
+```
+
+**Configuration Nginx** :
+```nginx
+server {
+    listen 80;
+    server_name notes.example.com;
+
+    root /var/www/html/notes;
+    index index.html;
+
+    location / {
+        try_files $uri $uri/ =404;
+    }
+}
+```
+
+**Configuration Apache** :
+```apache
+<VirtualHost *:80>
+    ServerName notes.example.com
+    DocumentRoot /var/www/html/notes
+
+    <Directory /var/www/html/notes>
+        Options Indexes FollowSymLinks
+        AllowOverride All
+        Require all granted
+    </Directory>
+</VirtualHost>
+```
+
+### Option 2 : GitHub Pages (gratuit)
+
+```bash
+# 1. Créer un repo GitHub
+git init public/
+cd public/
+git add .
+git commit -m "Initial public notes"
+
+# 2. Pousser vers GitHub
+git remote add origin https://github.com/username/notes-public.git
+git push -u origin main
+
+# 3. Activer GitHub Pages
+# Settings → Pages → Source: main branch → Save
+```
+
+Vos notes seront disponibles à : `https://username.github.io/notes-public/`
+
+### Option 3 : Netlify Drop (ultra simple)
+
+1. Allez sur https://app.netlify.com/drop
+2. Glissez-déposez le dossier `public/`
+3. Netlify génère automatiquement une URL
+
+### Option 4 : Vercel
+
+```bash
+cd public/
+npx vercel
+```
+
+## 🔄 Automatisation avec script
+
+Créez un script pour synchroniser automatiquement :
+
+```bash
+#!/bin/bash
+# sync-public.sh
+
+# Serveur de destination
+REMOTE_USER="user"
+REMOTE_HOST="server.com"
+REMOTE_PATH="/var/www/html/notes"
+
+# Synchroniser
+rsync -av --delete public/ ${REMOTE_USER}@${REMOTE_HOST}:${REMOTE_PATH}
+
+echo "✅ Notes publiques synchronisées !"
+```
+
+Utilisation :
+```bash
+chmod +x sync-public.sh
+./sync-public.sh
+```
+
+## 🔄 Automatisation avec Git Hook
+
+Synchroniser automatiquement après chaque publication :
+
+```bash
+# .git/hooks/post-commit
+#!/bin/bash
+
+# Si le dossier public/ a changé, synchroniser
+if git diff --name-only HEAD~1 | grep -q "^public/"; then
+    ./sync-public.sh
+fi
+```
+
+## 📊 Avantages de cette approche
+
+### ✅ Performance
+- HTML pré-généré = temps de chargement instantané
+- Pas de backend requis = moins de latence
+- Cacheable à 100% par CDN
+
+### ✅ Sécurité
+- Fichiers statiques = surface d'attaque minimale
+- Pas de code serveur exécuté côté public
+- Isolation complète du système d'édition
+
+### ✅ Portabilité
+- Fonctionne sur **n'importe quel serveur web**
+- Hébergement gratuit possible (GitHub Pages, Netlify)
+- Peut être mis sur un CDN (Cloudflare, etc.)
+
+### ✅ Simplicité
+- Pas besoin de Go sur le serveur de destination
+- Pas de base de données
+- Juste des fichiers HTML à copier
+
+### ✅ SEO
+- HTML pré-rendu = indexation optimale par Google
+- Pas de JavaScript requis pour afficher le contenu
+- Meta tags facilement ajoutables
+
+## 🎨 Personnalisation
+
+### Modifier les styles
+
+Les fichiers CSS sont dans `public/static/`. Vous pouvez les modifier directement :
+
+```bash
+# Éditer le CSS
+nano public/static/theme.css
+
+# Ou copier vos propres CSS
+cp my-custom.css public/static/custom.css
+```
+
+### Ajouter des meta tags
+
+Modifiez `internal/api/public.go` dans la fonction `generateStandaloneHTML()` :
+
+```go
+<head>
+    <!-- Meta tags SEO -->
+    <meta name="description" content="%s">
+    <meta property="og:title" content="%s">
+    <meta property="og:type" content="article">
+
+    <!-- Votre titre existant -->
+    <title>%s - PersoNotes</title>
+```
+
+### Ajouter Google Analytics
+
+Ajoutez dans `generateStandaloneHTML()` avant `</head>` :
+
+```html
+<!-- Google Analytics -->
+<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+  function gtag(){dataLayer.push(arguments);}
+  gtag('js', new Date());
+  gtag('config', 'GA_MEASUREMENT_ID');
+</script>
+```
+
+## 🐛 Dépannage
+
+### Les notes ne s'affichent pas
+
+**Problème** : `/public/` retourne 404
+
+**Solutions** :
+1. Vérifier que le dossier `public/` existe : `ls -la public/`
+2. Publier au moins une note pour générer le dossier
+3. Redémarrer le serveur Go
+
+### Les styles ne s'appliquent pas
+
+**Problème** : La page s'affiche sans CSS
+
+**Solutions** :
+1. Vérifier que `public/static/theme.css` existe
+2. Les chemins CSS sont relatifs : `../static/theme.css`
+3. Si vous copiez ailleurs, ajustez les chemins
+
+### Le HTML contient du Markdown brut
+
+**Problème** : Le Markdown n'est pas converti
+
+**Solutions** :
+1. Vérifier que goldmark est installé : `go mod tidy`
+2. Republier la note (toggle Private → Public)
+3. Vérifier les logs du serveur
+
+## 📝 Workflow recommandé
+
+### Workflow quotidien
+
+1. **Écrire** vos notes en Markdown dans l'éditeur
+2. **Publier** les notes que vous voulez partager (bouton Public)
+3. **Synchroniser** le dossier `public/` vers votre serveur (manuel ou automatique)
+
+### Workflow avec Git
+
+```bash
+# 1. Publier des notes via l'interface web
+# 2. Commiter les changements
+git add public/
+git commit -m "Publish new notes"
+git push
+
+# 3. Sur le serveur de production
+git pull
+# Les nouvelles notes sont disponibles !
+```
+
+## 🔐 Sécurité
+
+### Routes publiques (pas d'auth)
+- ✅ `/public/*` - Fichiers HTML statiques accessibles à tous
+
+### Routes privées (nécessitent auth)
+- 🔒 `/` - Interface d'édition
+- 🔒 `/api/*` - APIs de modification
+- 🔒 `/api/public/toggle` - **Protéger cet endpoint !**
+
+### Protection recommandée
+
+Utilisez un reverse proxy avec authentification pour protéger l'édition :
+
+```nginx
+# Nginx
+location /public {
+    # Pas d'auth - accessible à tous
+    proxy_pass http://localhost:8080;
+}
+
+location / {
+    # Auth requise pour édition
+    auth_basic "Personotes Admin";
+    auth_basic_user_file /etc/nginx/.htpasswd;
+    proxy_pass http://localhost:8080;
+}
+```
+
+## 📚 Ressources
+
+- **Goldmark** : https://github.com/yuin/goldmark
+- **GitHub Pages** : https://pages.github.com
+- **Netlify** : https://www.netlify.com
+- **Vercel** : https://vercel.com
+
+## ❓ FAQ
+
+**Q: Puis-je personnaliser le design des pages publiques ?**
+R: Oui ! Modifiez `public/static/theme.css` ou éditez la fonction `generateStandaloneHTML()` dans `internal/api/public.go`.
+
+**Q: Les images dans mes notes fonctionnent-elles ?**
+R: Oui, si vous utilisez des URLs absolues ou si vous copiez les images dans `public/static/images/`.
+
+**Q: Puis-je exporter vers PDF ?**
+R: Les fichiers HTML peuvent être convertis en PDF avec wkhtmltopdf ou un navigateur (Imprimer → PDF).
+
+**Q: Comment supprimer toutes les notes publiques d'un coup ?**
+R: Supprimez le dossier `public/` et le fichier `.public.json`, puis relancez le serveur.
+
+**Q: Les modifications des notes sont-elles automatiquement republiées ?**
+R: Non. Si vous modifiez une note Markdown qui est déjà publique, vous devez la republier (toggle Private puis Public) pour régénérer le HTML.
--- a/notes/.favorites.json
+++ b/notes/.favorites.json
@ -62,6 +62,13 @@
      "title": "projets",
      "added_at": "2025-12-24T15:59:24.938636283+01:00",
      "order": 8
+    },
+    {
+      "path": "documentation/bienvenue.md",
+      "is_dir": false,
+      "title": "bienvenue",
+      "added_at": "2025-12-24T16:30:46.322365652+01:00",
+      "order": 9
    }
  ]
 }
--- a/notes/.public.json
+++ b/notes/.public.json
@ -1,5 +1,15 @@
 {
  "notes": [
+    {
+      "path": "documentation/bienvenue.md",
+      "title": "Bienvenue dans PersoNotes",
+      "published_at": "2025-12-24T16:28:26.173656053+01:00"
+    },
+    {
+      "path": "documentation/authentication.md",
+      "title": "Authentication Guide",
+      "published_at": "2025-12-24T16:26:46.9731494+01:00"
+    },
    {
      "path": "ideas/collaboration.md",
      "title": "Real-time Collaboration",
--- a/notes/documentation/bienvenue.md
+++ b/notes/documentation/bienvenue.md
@ -1,7 +1,7 @@
 ---
 title: Bienvenue dans PersoNotes
 date: 08-11-2025
-last_modified: 09-11-2025:01:13
+last_modified: 24-12-2025:16:28
 tags:
    - aide
    - documentation
--- a/notes/documentation/client-feedback.md
+++ b/notes/documentation/client-feedback.md
@ -1,7 +1,7 @@
 ---
 title: Client Feedback Session
 date: 10-11-2025
-last_modified: 11-11-2025:11:12
+last_modified: 24-12-2025:16:45
 tags:
    - meeting
    - client
@ -28,3 +28,7 @@ Focus sur l'export PDF pour la v1.1


 # DERNIER EDIT
+
+[Progressive Web App](projets/mobile/pwa.md)
+
+`This is a `
--- a/notes/documentation/collaboration.md
+++ b/notes/documentation/collaboration.md
--- a/notes/documentation/api/endpoints.md
+++ b/notes/documentation/api/endpoints.md
--- a/notes/projets/backend/codemirror-integration.md
+++ b/notes/projets/backend/codemirror-integration.md
@ -1,7 +1,7 @@
 ---
 title: CodeMirror Integration
 date: 10-11-2025
-last_modified: 12-11-2025:09:37
+last_modified: 24-12-2025:16:46
 tags:
    - projet
    - frontend
--- a/notes/projets/frontend/vite-build.md
+++ b/notes/projets/frontend/vite-build.md
@ -1,8 +1,11 @@
 ---
-title: "Vite Build Process"
-date: "10-11-2025"
-last_modified: "10-11-2025:19:21"
-tags: ["projet", "frontend", "build"]
+title: Vite Build Process
+date: 10-11-2025
+last_modified: 24-12-2025:16:41
+tags:
+    - projet
+    - frontend
+    - build
 ---

 # Vite Build Process
--- a/public/authentication.html
+++ b/public/authentication.html
@ -3,7 +3,7 @@
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Daily Note - 2025-11-11 - PersoNotes</title>
+    <title>Authentication Guide - PersoNotes</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
@ -11,6 +11,8 @@
    <link rel="stylesheet" href="static/themes.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@11.9.0/styles/atom-one-dark.min.css" />
    <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/highlight.min.js"></script>
+    <!-- Lucide Icons -->
+    <script src="https://unpkg.com/lucide@latest"></script>
    <style>
        body { margin: 0; padding: 0; background: var(--bg-primary, #1e1e1e); color: var(--text-primary, #e0e0e0); font-family: 'JetBrains Mono', monospace; }
        .public-view-container { max-width: 800px; margin: 0 auto; padding: 2rem; }
@ -54,32 +56,37 @@
        </div>
        <article>
            <div class="public-header">
-                <h1 class="public-title">Daily Note - 2025-11-11</h1>
-                <div class="public-meta"><span>📅 11-11-2025</span></div>
-                <div class="public-tags"><span class="tag">#daily</span></div>
+                <h1 class="public-title">Authentication Guide</h1>
+                <div class="public-meta"><span><i data-lucide="calendar" class="icon-sm"></i> 10-11-2025</span></div>
+                <div class="public-tags"><span class="tag">#documentation</span><span class="tag">#api</span><span class="tag">#security</span></div>
            </div>
            <div class="public-content">
-                <h1 id="-mardi-11-novembre-2025">📅 Mardi 11 novembre 2025</h1>
-<h2 id="-objectifs-du-jour">🎯 Objectifs du jour</h2>
+                <h1 id="authentication">Authentication</h1>
+<h2 id="current-status">Current Status</h2>
+<p>⚠️ No authentication currently implemented.</p>
+<h2 id="future-implementation">Future Implementation</h2>
+<h3 id="jwt-tokens">JWT Tokens</h3>
+<pre><code>POST /api/auth/login
+{
+  &quot;username&quot;: &quot;user&quot;,
+  &quot;password&quot;: &quot;pass&quot;
+}
+
+Response:
+{
+  &quot;token&quot;: &quot;eyJhbGc...&quot;
+}
+</code></pre>
+<h3 id="bearer-token">Bearer Token</h3>
+<pre><code>Authorization: Bearer eyJhbGc...
+</code></pre>
+<h2 id="security">Security</h2>
 <ul>
-<li></li>
-</ul>
-<h2 id="-notes">📝 Notes</h2>
-<ul>
-<li></li>
-</ul>
-<h2 id="-accompli">✅ Accompli</h2>
-<ul>
-<li></li>
-</ul>
-<h2 id="-rflexions">💭 Réflexions</h2>
-<ul>
-<li></li>
-</ul>
-<h2 id="-liens">🔗 Liens</h2>
-<ul>
-<li></li>
+<li>HTTPS only in production</li>
+<li>Reverse proxy with nginx</li>
+<li>Rate limiting</li>
 </ul>
+<p><!-- raw HTML omitted -->Test Delete 1<!-- raw HTML omitted --></p>

            </div>
        </article>
@ -91,5 +98,11 @@
            });
        });
    </script>
+    <script>
+        // Initialize Lucide icons
+        if (typeof lucide !== 'undefined') {
+            lucide.createIcons();
+        }
+    </script>
 </body>
 </html>
--- a/public/bienvenue.html
+++ b/public/bienvenue.html
@ -0,0 +1,312 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Bienvenue dans PersoNotes - PersoNotes</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="static/theme.css" />
+    <link rel="stylesheet" href="static/themes.css" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@11.9.0/styles/atom-one-dark.min.css" />
+    <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/highlight.min.js"></script>
+    <!-- Lucide Icons -->
+    <script src="https://unpkg.com/lucide@latest"></script>
+    <style>
+        body { margin: 0; padding: 0; background: var(--bg-primary, #1e1e1e); color: var(--text-primary, #e0e0e0); font-family: 'JetBrains Mono', monospace; }
+        .public-view-container { max-width: 800px; margin: 0 auto; padding: 2rem; }
+        .public-nav { margin-bottom: 2rem; }
+        .public-nav a { color: var(--accent-blue, #42a5f5); text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; }
+        .public-nav a:hover { text-decoration: underline; }
+        .public-header { margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 2px solid var(--bg-tertiary, #2d2d2d); }
+        .public-title { font-size: 2.5rem; margin: 0 0 1rem 0; color: var(--text-primary, #e0e0e0); }
+        .public-meta { display: flex; gap: 1.5rem; color: var(--text-secondary, #b0b0b0); font-size: 0.95rem; }
+        .public-tags { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 1rem; }
+        .tag { background: var(--bg-tertiary, #2d2d2d); color: var(--text-secondary, #b0b0b0); padding: 0.25rem 0.75rem; border-radius: 4px; font-size: 0.85rem; }
+        .public-content { line-height: 1.8; color: var(--text-primary, #e0e0e0); font-size: 1.05rem; }
+        .public-content h1, .public-content h2, .public-content h3, .public-content h4, .public-content h5, .public-content h6 { color: var(--text-primary, #e0e0e0); margin-top: 2rem; margin-bottom: 1rem; }
+        .public-content h1 { font-size: 2rem; } .public-content h2 { font-size: 1.75rem; } .public-content h3 { font-size: 1.5rem; } .public-content h4 { font-size: 1.25rem; }
+        .public-content p { margin-bottom: 1rem; }
+        .public-content a { color: var(--accent-blue, #42a5f5); text-decoration: none; }
+        .public-content a:hover { text-decoration: underline; }
+        .public-content pre { background: var(--bg-secondary, #252525); border: 1px solid var(--bg-tertiary, #2d2d2d); border-radius: 6px; padding: 1rem; overflow-x: auto; margin: 1rem 0; }
+        .public-content code { font-family: 'JetBrains Mono', monospace; background: var(--bg-secondary, #252525); padding: 0.2rem 0.4rem; border-radius: 3px; font-size: 0.9em; }
+        .public-content pre code { background: none; padding: 0; }
+        .public-content blockquote { border-left: 4px solid var(--accent-blue, #42a5f5); padding-left: 1rem; margin: 1rem 0; color: var(--text-secondary, #b0b0b0); font-style: italic; }
+        .public-content ul, .public-content ol { margin: 1rem 0; padding-left: 2rem; }
+        .public-content li { margin-bottom: 0.5rem; }
+        .public-content table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
+        .public-content th, .public-content td { border: 1px solid var(--bg-tertiary, #2d2d2d); padding: 0.75rem; text-align: left; }
+        .public-content th { background: var(--bg-secondary, #252525); font-weight: 600; }
+        .public-content img { max-width: 100%; height: auto; border-radius: 6px; margin: 1rem 0; }
+        .public-content hr { border: none; border-top: 2px solid var(--bg-tertiary, #2d2d2d); margin: 2rem 0; }
+    </style>
+</head>
+<body>
+    <div class="public-view-container">
+        <div class="public-nav">
+            <a href="index.html">
+                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <line x1="19" y1="12" x2="5" y2="12"></line>
+                    <polyline points="12 19 5 12 12 5"></polyline>
+                </svg>
+                Back to public notes
+            </a>
+        </div>
+        <article>
+            <div class="public-header">
+                <h1 class="public-title">Bienvenue dans PersoNotes</h1>
+                <div class="public-meta"><span><i data-lucide="calendar" class="icon-sm"></i> 08-11-2025</span></div>
+                <div class="public-tags"><span class="tag">#aide</span><span class="tag">#documentation</span><span class="tag">#tutorial</span></div>
+            </div>
+            <div class="public-content">
+                <p>08/11/2025 -</p>
+<p>C&rsquo;est mon application de prise de note</p>
+<h2 id="jespre-quelle-va-bien-marcher">J&rsquo;espére qu&rsquo;elle va bien marcher</h2>
+<h1 id="bienvenue-dans-personotes">Bienvenue dans PersoNotes</h1>
+<p>Bienvenue dans votre application de prise de notes en Markdown ! Cette page vous explique comment utiliser l&rsquo;application et le format front matter.</p>
+<h2 id="quest-ce-que-le-front-matter-">Qu&rsquo;est-ce que le Front Matter ?</h2>
+<p>Le <strong>front matter</strong> est un bloc de métadonnées en YAML placé au début de chaque note, entre deux lignes <code>---</code>. Il permet d&rsquo;ajouter des informations structurées à vos notes.</p>
+<h3 id="format-du-front-matter">Format du Front Matter</h3>
+<pre><code class="language-yaml">---
+title: Titre de votre note
+date: 08-11-2025
+last_modified: 08-11-2025:14:10
+tags: [projet, urgent, backend]
+---
+</code></pre>
+<h3 id="champs-disponibles">Champs disponibles</h3>
+<ul>
+<li><strong>title</strong> : Le titre de votre note (généré automatiquement depuis le nom du fichier)</li>
+<li><strong>date</strong> : Date de création (format: JJ-MM-AAAA)</li>
+<li><strong>last_modified</strong> : Dernière modification (format: JJ-MM-AAAA:HH:MM) - mis à jour automatiquement</li>
+<li><strong>tags</strong> : Liste de tags pour organiser et rechercher vos notes</li>
+</ul>
+<h3 id="exemples-de-tags">Exemples de tags</h3>
+<p>Vous pouvez écrire vos tags de deux façons :</p>
+<pre><code class="language-yaml"># Format inline
+tags: [projet, urgent, backend, api]
+
+# Format liste
+tags:
+  - projet
+  - urgent
+  - backend
+  - api
+</code></pre>
+<p>Les tags sont indexés et permettent de rechercher vos notes via la barre de recherche.</p>
+<h2 id="guide-markdown">Guide Markdown</h2>
+<h3 id="titres">Titres</h3>
+<pre><code class="language-markdown"># Titre niveau 1
+## Titre niveau 2
+### Titre niveau 3
+</code></pre>
+<h3 id="emphase">Emphase</h3>
+<pre><code class="language-markdown">*italique* ou _italique_
+**gras** ou __gras__
+***gras et italique***
+~~barré~~
+</code></pre>
+<p>Rendu : <em>italique</em>, <strong>gras</strong>, <em><strong>gras et italique</strong></em></p>
+<h3 id="listes">Listes</h3>
+<h4 id="liste-non-ordonne">Liste non ordonnée</h4>
+<pre><code class="language-markdown">- Élément 1
+- Élément 2
+  - Sous-élément 2.1
+  - Sous-élément 2.2
+- Élément 3
+</code></pre>
+<p>Rendu :</p>
+<ul>
+<li>Élément 1</li>
+<li>Élément 2
+<ul>
+<li>Sous-élément 2.1</li>
+<li>Sous-élément 2.2</li>
+</ul>
+</li>
+<li>Élément 3</li>
+</ul>
+<h4 id="liste-ordonne">Liste ordonnée</h4>
+<pre><code class="language-markdown">1. Premier élément
+2. Deuxième élément
+3. Troisième élément
+</code></pre>
+<p>Rendu :</p>
+<ol>
+<li>Premier élément</li>
+<li>Deuxième élément</li>
+<li>Troisième élément</li>
+</ol>
+<h3 id="liens-et-images">Liens et Images</h3>
+<pre><code class="language-markdown">[Texte du lien](https://example.com)
+![Texte alternatif](url-de-image.jpg)
+</code></pre>
+<p>Exemple : <a href="https://www.markdownguide.org/">Documentation Markdown</a></p>
+<h3 id="code">Code</h3>
+<h4 id="code-inline">Code inline</h4>
+<p>Utilisez des backticks : <code>code inline</code></p>
+<h4 id="bloc-de-code">Bloc de code</h4>
+<pre><code class="language-markdown">```javascript
+function hello() {
+  console.log(&quot;Hello World!&quot;);
+}
+```
+</code></pre>
+<p>Rendu :</p>
+<pre><code class="language-javascript">function hello() {
+  console.log(&quot;Hello World!&quot;);
+}
+</code></pre>
+<h3 id="citations">Citations</h3>
+<pre><code class="language-markdown">&gt; Ceci est une citation
+&gt; sur plusieurs lignes
+</code></pre>
+<p>Rendu :</p>
+<blockquote>
+<p>Ceci est une citation<br />
+sur plusieurs lignes</p>
+</blockquote>
+<h3 id="tableaux">Tableaux</h3>
+<pre><code class="language-markdown">| Colonne 1 | Colonne 2 | Colonne 3 |
+|-----------|-----------|-----------|
+| Ligne 1   | Données   | Données   |
+| Ligne 2   | Données   | Données   |
+</code></pre>
+<p>Rendu :</p>
+<table>
+<thead>
+<tr>
+<th>Colonne 1</th>
+<th>Colonne 2</th>
+<th>Colonne 3</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>Ligne 1</td>
+<td>Données</td>
+<td>Données</td>
+</tr>
+<tr>
+<td>Ligne 2</td>
+<td>Données</td>
+<td>Données</td>
+</tr>
+</tbody>
+</table>
+<h3 id="sparateurs">Séparateurs</h3>
+<pre><code class="language-markdown">---
+</code></pre>
+<p>Rendu :</p>
+<hr />
+<h2 id="commandes-slash">Commandes Slash</h2>
+<p>Utilisez le caractère <code>/</code> au début d&rsquo;une ligne pour accéder aux commandes rapides :</p>
+<ul>
+<li><code>/h1</code>, <code>/h2</code>, <code>/h3</code> - Titres</li>
+<li><code>/list</code> - Liste à puces</li>
+<li><code>/date</code> - Insérer la date du jour</li>
+<li><code>/link</code> - Créer un lien</li>
+<li><code>/bold</code> - Texte en gras</li>
+<li><code>/italic</code> - Texte en italique</li>
+<li><code>/code</code> - Code inline</li>
+<li><code>/codeblock</code> - Bloc de code</li>
+<li><code>/quote</code> - Citation</li>
+<li><code>/hr</code> - Ligne de séparation</li>
+<li><code>/table</code> - Créer un tableau</li>
+</ul>
+<p><strong>Navigation</strong> : Utilisez les flèches ↑↓ pour naviguer, Entrée ou Tab pour insérer, Échap pour annuler.</p>
+<h2 id="raccourcis-et-astuces">Raccourcis et Astuces</h2>
+<h3 id="crer-une-note">Créer une note</h3>
+<p>Cliquez sur le bouton <strong>✨ Nouvelle note</strong> dans l&rsquo;en-tête. Si la note existe déjà, elle sera ouverte, sinon elle sera créée.</p>
+<h3 id="rechercher-des-notes">Rechercher des notes</h3>
+<p>Utilisez la barre de recherche en haut pour filtrer vos notes par tags. La recherche est mise à jour en temps réel.</p>
+<h3 id="sauvegarder">Sauvegarder</h3>
+<p>Cliquez sur le bouton <strong>💾 Enregistrer</strong> pour sauvegarder vos modifications. Le champ <code>last_modified</code> du front matter sera automatiquement mis à jour.</p>
+<h3 id="supprimer-une-note">Supprimer une note</h3>
+<p>Cliquez sur l&rsquo;icône 🗑️ à côté du nom de la note dans la sidebar.</p>
+<h2 id="organisation-avec-les-tags">Organisation avec les tags</h2>
+<p>Les tags sont un excellent moyen d&rsquo;organiser vos notes. Voici quelques suggestions :</p>
+<ul>
+<li><strong>Par projet</strong> : <code>projet-notes</code>, <code>projet-api</code>, <code>projet-frontend</code></li>
+<li><strong>Par priorité</strong> : <code>urgent</code>, <code>important</code>, <code>backlog</code></li>
+<li><strong>Par type</strong> : <code>documentation</code>, <code>tutorial</code>, <code>meeting</code>, <code>todo</code></li>
+<li><strong>Par technologie</strong> : <code>javascript</code>, <code>go</code>, <code>python</code>, <code>docker</code></li>
+<li><strong>Par statut</strong> : <code>en-cours</code>, <code>terminé</code>, <code>archive</code></li>
+</ul>
+<h2 id="exemple-complet">Exemple complet</h2>
+<p>Voici un exemple de note complète :</p>
+<pre><code class="language-markdown">---
+title: Réunion API Backend
+date: 08-11-2025
+last_modified: 08-11-2025:15:30
+tags: [meeting, backend, api, urgent]
+---
+
+# Réunion API Backend
+
+## Participants
+
+- Alice (Lead Dev)
+- Bob (Backend)
+- Charlie (Frontend)
+
+## Points discutés
+
+### 1. Architecture de l'API
+
+Nous avons décidé d'utiliser une architecture REST avec les endpoints suivants :
+
+- `GET /api/notes` - Liste toutes les notes
+- `POST /api/notes` - Créer une note
+- `PUT /api/notes/:id` - Modifier une note
+- `DELETE /api/notes/:id` - Supprimer une note
+
+### 2. Authentification
+
+&gt; Utilisation de JWT pour l'authentification
+
+Code d'exemple :
+
+```go
+func generateToken(userID string) (string, error) {
+    // Implementation
+}
+```
+
+### 3. Prochaines étapes
+
+- [ ] Implémenter les endpoints
+- [ ] Écrire les tests
+- [ ] Documentation API
+
+## Actions
+
+| Qui     | Action               | Deadline   |
+|---------|---------------------|------------|
+| Bob     | Endpoints API       | 15-11-2025 |
+| Charlie | Interface Frontend  | 20-11-2025 |
+| Alice   | Review &amp; Deploy     | 25-11-2025 |
+</code></pre>
+<hr />
+<p>Bonne prise de notes ! 📝</p>
+
+            </div>
+        </article>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            document.querySelectorAll('pre code').forEach((block) => {
+                hljs.highlightElement(block);
+            });
+        });
+    </script>
+    <script>
+        // Initialize Lucide icons
+        if (typeof lucide !== 'undefined') {
+            lucide.createIcons();
+        }
+    </script>
+</body>
+</html>
--- a/public/index.html
+++ b/public/index.html
@ -36,6 +36,24 @@
            <p>Discover my shared notes</p>
        </div>
        <ul class="notes-list">
+            <li class="note-item">
+                <a href="bienvenue.html">
+                    <h2 class="note-title">Bienvenue dans PersoNotes</h2>
+                    <div class="note-meta">
+                        <span><i data-lucide="calendar" class="icon-sm"></i> Published on 24/12/2025</span>
+                    </div>
+                    
+                </a>
+            </li>
+            <li class="note-item">
+                <a href="authentication.html">
+                    <h2 class="note-title">Authentication Guide</h2>
+                    <div class="note-meta">
+                        <span><i data-lucide="calendar" class="icon-sm"></i> Published on 24/12/2025</span>
+                    </div>
+                    
+                </a>
+            </li>
            <li class="note-item">
                <a href="collaboration.html">
                    <h2 class="note-title">Real-time Collaboration</h2>
--- a/public/static/theme.css
+++ b/public/static/theme.css
@ -17,35 +17,33 @@
    --text-secondary: #b0b0b0;
    --text-muted: #6e6e6e;

-    /* Accent colors - Blue focused */
+    /* Accent color - Single blue accent for consistency */
    --accent-primary: #42a5f5;
-    --accent-primary-hover: #64b5f6;
-    --accent-secondary: #29b6f6;
-    --accent-secondary-hover: #4fc3f7;
+    --accent-hover: #64b5f6;

    /* Semantic colors */
    --success: #66bb6a;
    --warning: #ffa726;
    --error: #ef5350;

-    /* Spacing */
-    --spacing-xs: 0.25rem;
-    --spacing-sm: 0.5rem;
-    --spacing-md: 1rem;
-    --spacing-lg: 1.5rem;
-    --spacing-xl: 2rem;
+    /* Spacing - 8px base unit system */
+    --spacing-xs: 0.5rem;   /* 8px - 1 unit */
+    --spacing-sm: 1rem;     /* 16px - 2 units */
+    --spacing-md: 1.5rem;   /* 24px - 3 units */
+    --spacing-lg: 2rem;     /* 32px - 4 units */
+    --spacing-xl: 3rem;     /* 48px - 6 units */

-    /* Sidebar compact spacing */
-    --sidebar-item-gap: 0.05rem;
-    --sidebar-padding-v: 0.3rem;
-    --sidebar-padding-h: 0.75rem;
-    --sidebar-indent: 1rem;
+    /* Sidebar spacing - aligned to 8px grid */
+    --sidebar-item-gap: 0.125rem;  /* 2px - minimal spacing between items */
+    --sidebar-padding-v: 0.25rem;  /* 4px - compact vertical padding */
+    --sidebar-padding-h: 1rem;     /* 16px */
+    --sidebar-indent: 1.5rem;      /* 24px */

-    /* Shadows */
-    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4);
-    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
-    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
-    --shadow-glow: 0 0 20px rgba(66, 165, 245, 0.2);
+    /* Shadows - reduced opacity for minimal look */
+    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.08);
+    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.12), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+    --shadow-glow: 0 0 20px rgba(66, 165, 245, 0.1);

    /* Border radius */
    --radius-sm: 4px;
@ -55,8 +53,59 @@
    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
+
+    /* Typography scale - consistent font sizes */
+    --text-xs: 0.75rem;    /* 12px */
+    --text-sm: 0.875rem;   /* 14px */
+    --text-base: 1rem;     /* 16px - default */
+    --text-md: 1.125rem;   /* 18px */
+    --text-lg: 1.25rem;    /* 20px */
+    --text-xl: 1.5rem;     /* 24px */
+    --text-2xl: 2rem;      /* 32px */
+    --text-3xl: 3rem;      /* 48px */
+
+    /* Touch targets - minimum sizes for accessibility */
+    --touch-sm: 2rem;      /* 32px - compact */
+    --touch-md: 2.75rem;   /* 44px - standard mobile minimum */
+    --touch-lg: 3rem;      /* 48px - comfortable */
+
+    /* Lucide Icons - Professional SVG icons */
+    --icon-xs: 14px;
+    --icon-sm: 16px;
+    --icon-md: 20px;
+    --icon-lg: 24px;
+    --icon-xl: 32px;
 }

+/* Lucide Icons Styling */
+.lucide {
+    display: inline-block;
+    vertical-align: middle;
+    stroke-width: 2;
+    stroke: currentColor;
+    fill: none;
+}
+
+/* Icon size variants */
+.icon-xs { width: var(--icon-xs); height: var(--icon-xs); }
+.icon-sm { width: var(--icon-sm); height: var(--icon-sm); }
+.icon-md { width: var(--icon-md); height: var(--icon-md); }
+.icon-lg { width: var(--icon-lg); height: var(--icon-lg); }
+.icon-xl { width: var(--icon-xl); height: var(--icon-xl); }
+
+/* Icon with text alignment */
+.icon-text {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+/* Icon color variants */
+.icon-primary { color: var(--text-primary); }
+.icon-secondary { color: var(--text-secondary); }
+.icon-muted { color: var(--text-muted); }
+.icon-accent { color: var(--accent-primary); }
+
 /* Base styles */
 html {
    font-size: 16px;
@ -90,7 +139,7 @@ header h1 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
-    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
+    background: var(--accent-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
@ -257,25 +306,7 @@ aside hr {
    margin: var(--spacing-sm) 0;
 }

-/* File tree and search results */
-#file-tree a,
-#search-results a {
-    display: block;
-    padding: var(--spacing-sm) var(--spacing-md);
-    color: var(--text-primary);
-    text-decoration: none;
-    border-radius: var(--radius-sm);
-    transition: all var(--transition-fast);
-    font-size: 0.9rem;
-    margin-bottom: var(--spacing-xs);
-}
-
-#file-tree a:hover,
-#search-results a:hover {
-    background: var(--bg-tertiary);
-    color: var(--accent-primary);
-    transform: translateX(2px);
-}
+/* File tree and search results - styles now handled by .file-item class */

 /* Search results header */
 .search-results-header {
@ -411,7 +442,7 @@ aside hr {
 }

 .search-no-results-text strong {
-    color: var(--accent-secondary);
+    color: var(--accent-primary);
 }

 .search-no-results-hint {
@ -455,7 +486,7 @@ aside hr {

 .search-help-example code {
    background: var(--bg-primary);
-    color: var(--accent-secondary);
+    color: var(--accent-primary);
    padding: 0.2rem 0.4rem;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
@ -720,7 +751,7 @@ main::-webkit-scrollbar-thumb:hover {

 .preview h2 {
    font-size: 1.5em;
-    color: var(--accent-secondary);
+    color: var(--accent-primary);
    margin-bottom: 0.9em;
 }

@ -771,7 +802,7 @@ main::-webkit-scrollbar-thumb:hover {
 }

 .preview ol > li::marker {
-    color: var(--accent-secondary);
+    color: var(--accent-primary);
    font-weight: 600;
 }

@ -797,7 +828,7 @@ main::-webkit-scrollbar-thumb:hover {

 .preview a:hover {
    text-decoration: underline;
-    color: var(--accent-primary-hover);
+    color: var(--accent-hover);
 }

 .preview strong, .preview b {
@ -815,7 +846,7 @@ main::-webkit-scrollbar-thumb:hover {
    padding: 0.2em 0.4em;
    border-radius: var(--radius-sm);
    font-size: 0.85em;
-    color: var(--accent-secondary);
+    color: var(--accent-primary);
    font-weight: 500;
 }

@ -853,7 +884,7 @@ main::-webkit-scrollbar-thumb:hover {
 }

 .preview table thead {
-    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
+    background: var(--accent-primary);
 }

 .preview table thead th {
@ -895,7 +926,7 @@ main::-webkit-scrollbar-thumb:hover {
 button,
 [type="submit"],
 [type="button"] {
-    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
+    background: var(--accent-primary);
    color: white;
    border: none;
    border-radius: var(--radius-md);
@ -984,7 +1015,7 @@ button.secondary:hover {
 }

 #slash-commands-palette li[style*="background-color"] {
-    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)) !important;
+    background: var(--accent-primary) !important;
    color: white !important;
    font-weight: 500;
    transform: translateX(2px);
@ -1016,7 +1047,7 @@ progress::-webkit-progress-bar {
 }

 progress::-webkit-progress-value {
-    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
+    background: var(--accent-primary);
    border-radius: var(--radius-sm);
 }

@ -1236,39 +1267,26 @@ body, html {
 }

 .folder-item.drag-over .folder-header {
-    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
+    background: var(--accent-primary);
    color: white;
    box-shadow: var(--shadow-glow);
    border: 2px solid var(--accent-primary);
    border-radius: var(--radius-md);
-    animation: pulse 1s ease-in-out infinite;
-}
-
-@keyframes pulse {
-    0%, 100% {
-        transform: scale(1);
-        box-shadow: var(--shadow-glow);
-    }
-    50% {
-        transform: scale(1.02);
-        box-shadow: 0 0 30px rgba(88, 166, 255, 0.4);
-    }
 }

 .file-item.drag-over {
-    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
+    background: var(--accent-primary);
    color: white;
    box-shadow: var(--shadow-glow);
 }

 /* Style pour la racine en drag-over */
 .sidebar-section-header.drag-over {
-    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)) !important;
+    background: var(--accent-primary) !important;
    color: white !important;
    box-shadow: var(--shadow-glow);
    border: 2px solid var(--accent-primary);
    border-radius: var(--radius-md);
-    animation: pulse 1s ease-in-out infinite;
 }

 .sidebar-section-header.drag-over .folder-name,
@ -1401,11 +1419,10 @@ body, html {

 /* Quand on drag au-dessus de la racine */
 .root-drop-zone.drag-over .root-folder-header {
-    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
+    background: var(--accent-primary);
    color: white;
    border-color: var(--accent-primary);
    box-shadow: var(--shadow-glow);
-    animation: pulse 1s ease-in-out infinite;
 }

 .root-drop-zone.drag-over .root-folder-header .folder-name,
@ -2053,7 +2070,7 @@ body, html {
 }

 .search-modal-result-item.selected {
-    background: linear-gradient(135deg, rgba(130, 170, 255, 0.15), rgba(199, 146, 234, 0.15));
+    background: var(--bg-secondary);
    border-color: var(--accent-primary);
 }

@ -2074,7 +2091,7 @@ body, html {
 }

 .search-modal-result-title mark {
-    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
+    background: var(--accent-primary);
    color: white;
    padding: 2px 4px;
    border-radius: 3px;
@ -2200,11 +2217,6 @@ body, html {
    border: 3px solid var(--border-primary);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
-    animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-    to { transform: rotate(360deg); }
 }

 .search-modal-loading p {
@ -2566,12 +2578,12 @@ body, html {

 /* Today */
 .calendar-day-today {
-    border-color: var(--accent-secondary);
-    background: linear-gradient(135deg, rgba(130, 170, 255, 0.1), rgba(199, 146, 234, 0.1));
+    border-color: var(--accent-primary);
+    background: var(--bg-secondary);
 }

 .calendar-day-today .calendar-day-number {
-    color: var(--accent-secondary);
+    color: var(--accent-primary);
    font-weight: 700;
 }

@ -2596,7 +2608,7 @@ body, html {
    width: 100%;
    margin-top: var(--spacing-sm);
    padding: var(--spacing-sm);
-    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
+    background: var(--accent-primary);
    color: white;
    border: none;
    border-radius: var(--radius-md);
@ -2681,11 +2693,12 @@ body, html {
    display: flex;
    align-items: center;
    padding: 0;
-    margin: var(--sidebar-item-gap) 0;
+    margin: 0; /* No margin on wrapper - use same spacing as folders */
 }

 .file-item-wrapper .file-item {
    flex: 1;
+    margin: 0 !important; /* Force remove margin to avoid double spacing */
 }

 /* Bouton de mode sélection */
@ -2715,8 +2728,8 @@ body, html {
 }

 .icon-button.active:hover {
-    background: var(--accent-primary-hover);
-    border-color: var(--accent-primary-hover);
+    background: var(--accent-hover);
+    border-color: var(--accent-hover);
 }

 /* Toolbar de sélection flottante */
@ -2784,7 +2797,7 @@ body, html {
    background: #ff5370;
    border-color: #ff5370;
    transform: translateY(-1px);
-    box-shadow: 0 4px 12px rgba(240, 113, 120, 0.4);
+    box-shadow: 0 4px 12px rgba(240, 113, 120, 0.15);
 }

 .danger-button:active {
@ -2974,30 +2987,38 @@ body, html {

 /* Bouton d'ajout aux favoris (dans le file tree) */
 .add-to-favorites {
-    opacity: 0;
+    opacity: 0.4; /* Always slightly visible */
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
-    font-size: 0.9rem;
-    padding: 0 0.2rem;
+    font-size: 1rem;
+    padding: 0.25rem;
    transition: all var(--transition-fast);
    margin-left: auto;
+    border-radius: var(--radius-sm);
 }

 .folder-header:hover .add-to-favorites,
 .file-item:hover .add-to-favorites {
    opacity: 1;
+    background: var(--bg-tertiary);
 }

 .add-to-favorites:hover {
    color: var(--warning);
-    transform: scale(1.2);
+    transform: scale(1.15);
+    background: rgba(255, 193, 7, 0.1); /* Subtle yellow background */
 }

 .add-to-favorites.is-favorite {
-    opacity: 1;
+    opacity: 1 !important; /* Always fully visible when favorited */
    color: var(--warning);
+    background: rgba(255, 193, 7, 0.15);
+}
+
+.add-to-favorites.is-favorite:hover {
+    background: rgba(255, 193, 7, 0.2);
 }

 /* Responsive - Hauteurs adaptatives pour #favorites-list */
@ -3162,7 +3183,7 @@ body, html {
 }

 .link-inserter-result-item.selected {
-    background: linear-gradient(135deg, rgba(130, 170, 255, 0.15), rgba(199, 146, 234, 0.15));
+    background: var(--bg-secondary);
    border-color: var(--accent-primary);
 }

@ -3184,7 +3205,7 @@ body, html {
 }

 .link-inserter-result-title mark {
-    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
+    background: var(--accent-primary);
    color: white;
    padding: 2px 4px;
    border-radius: 3px;
@ -3241,7 +3262,6 @@ body, html {
    border: 3px solid var(--bg-tertiary);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
-    animation: spin 0.8s linear infinite;
 }

 .link-inserter-loading p {
@ -3575,7 +3595,7 @@ body, html {

 .breadcrumb-link:hover {
    background: var(--bg-tertiary);
-    color: var(--accent-secondary);
+    color: var(--accent-primary);
 }

 .breadcrumb-separator {
--- a/public/static/themes.css
+++ b/public/static/themes.css
@ -21,9 +21,7 @@
    --text-muted: #6e6e6e;

    --accent-primary: #42a5f5;
-    --accent-primary-hover: #5ab3f7;
-    --accent-secondary: #29b6f6;
-    --accent-secondary-hover: #4fc3f7;
+    --accent-hover: #5ab3f7;

    --success: #66bb6a;
    --warning: #ffa726;
@ -47,9 +45,7 @@
    --text-muted: #75715e;

    --accent-primary: #66d9ef;
-    --accent-primary-hover: #7ee5f7;
-    --accent-secondary: #88c070;
-    --accent-secondary-hover: #9acc84;
+    --accent-hover: #7ee5f7;

    --success: #88c070;
    --warning: #e6db74;
@ -73,9 +69,7 @@
    --text-muted: #6272a4;

    --accent-primary: #8be9fd;
-    --accent-primary-hover: #9ff3ff;
-    --accent-secondary: #bd93f9;
-    --accent-secondary-hover: #cba6ff;
+    --accent-hover: #9ff3ff;

    --success: #50fa7b;
    --warning: #f1fa8c;
@ -99,9 +93,7 @@
    --text-muted: #5c6370;

    --accent-primary: #61afef;
-    --accent-primary-hover: #75bdf5;
-    --accent-secondary: #c678dd;
-    --accent-secondary-hover: #d48ae9;
+    --accent-hover: #75bdf5;

    --success: #98c379;
    --warning: #e5c07b;
@ -125,9 +117,7 @@
    --text-muted: #586e75;

    --accent-primary: #268bd2;
-    --accent-primary-hover: #4098d9;
-    --accent-secondary: #2aa198;
-    --accent-secondary-hover: #3eb3a8;
+    --accent-hover: #4098d9;

    --success: #859900;
    --warning: #b58900;
@ -151,9 +141,7 @@
    --text-muted: #616e88;

    --accent-primary: #88c0d0;
-    --accent-primary-hover: #9dcadb;
-    --accent-secondary: #81a1c1;
-    --accent-secondary-hover: #94b0cc;
+    --accent-hover: #9dcadb;

    --success: #a3be8c;
    --warning: #ebcb8b;
@ -177,9 +165,7 @@
    --text-muted: #6c7086;

    --accent-primary: #89b4fa;
-    --accent-primary-hover: #a6c8ff;
-    --accent-secondary: #f5c2e7;
-    --accent-secondary-hover: #f9d5ee;
+    --accent-hover: #a6c8ff;

    --success: #a6e3a1;
    --warning: #f9e2af;
@ -203,9 +189,7 @@
    --text-muted: #7a8478;

    --accent-primary: #7fbbb3;
-    --accent-primary-hover: #93c9c1;
-    --accent-secondary: #a7c080;
-    --accent-secondary-hover: #b8cc94;
+    --accent-hover: #93c9c1;

    --success: #a7c080;
    --warning: #dbbc7f;