feat: sidebar de navigation mode dossier + permission set-title

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

.claude/rules/commit.md

@@ -0,0 +1,21 @@
+# Règles — Commits (Pena-taury)
+
+## Fréquence
+Committer après chaque unité logique de travail : une fonction ajoutée, un bug corrigé, un refactoring isolé. Ne pas accumuler plusieurs fonctionnalités dans un seul commit.
+
+## Format
+Conventional Commits : `<type>: <description courte>`
+
+Types : `feat`, `fix`, `chore`, `docs`, `refactor`, `test`
+
+## Avant chaque commit
+Le hook `pre-commit` s'exécute automatiquement et bloque le commit si :
+- **Clippy** remonte un warning (`-D warnings`)
+- La **couverture de lignes** est inférieure à **60 %** (via `cargo-llvm-cov`)
+
+Ne pas contourner le hook (`--no-verify`). Corriger le problème signalé.
+
+## Prérequis
+```bash
+cargo install cargo-llvm-cov
+```

.clippy.toml

@@ -0,0 +1,28 @@
+# Complexité cognitive max par fonction (défaut: 25)
+cognitive-complexity-threshold = 10
+
+
+## Taille des fonctions et types
+
+# Nombre max de lignes par fonction (défaut: 100)
+too-many-lines-threshold = 25
+
+# Nombre max de paramètres (défaut: 7)
+too-many-arguments-threshold = 3
+
+# Nombre max de champs dans une struct (défaut: none)
+struct-field-name-threshold = 5
+
+# Taille max d'un tuple (défaut: 3)
+max-suggested-slice-pattern-length = 3
+
+## NOMAGE
+# Longueur min des noms de variables (défaut: 1)
+min-ident-chars-threshold = 3
+
+# Exceptions aux noms trop courts (toujours autorisés)
+allowed-idents-below-min-chars = ["i", "j", "x", "y", "n"]
+
+# Longueur max avant qu'un type soit suggéré en doc (défaut: none)
+type-complexity-threshold = 250
+

.gitignore

@@ -0,0 +1,2 @@
+src-tauri/target/
+src-tauri/gen/

README.md

@@ -0,0 +1,45 @@
+# Pena — Lecteur Markdown
+
+Application de bureau pour lire des fichiers Markdown, construite avec Tauri 2 (Rust) et du JS vanilla. La conversion Markdown → HTML est faite côté Rust avec `comrak` (coloration syntaxique via `syntect`).
+
+## Prérequis
+
+- [Rust](https://rustup.rs/) (édition 2021)
+- [Tauri CLI v2](https://tauri.app/start/prerequisites/) : `cargo install tauri-cli --version "^2"`
+- Dépendances système Tauri (WebView2 sur Windows, `webkit2gtk` sur Linux)
+
+Sur Fedora/RHEL :
+```bash
+sudo dnf install webkit2gtk4.1-devel
+```
+
+## Lancer en développement
+
+```bash
+cargo tauri dev
+```
+
+Le frontend est servi directement depuis `src/` (fichiers statiques, pas de bundler). La compilation Rust est lancée automatiquement.
+
+## Construire une release
+
+```bash
+cargo tauri build
+```
+
+L'exécutable est produit dans `src-tauri/target/release/`.
+
+## Structure
+
+```
+Pena-taury/
+├── src/               # Frontend (HTML / CSS / JS vanilla)
+│   ├── index.html
+│   ├── main.js
+│   └── style.css
+└── src-tauri/         # Backend Rust (Tauri)
+    ├── src/           # Commandes Tauri (convert_file, list_md_files)
+    ├── Cargo.toml
+    └── tauri.conf.json
+```
+

src-tauri/Cargo.toml

@@ -0,0 +1,21 @@
+[package]
+name = "pena-taury"
+version = "0.1.0"
+edition = "2021"
+
+[lib]
+name = "pena_taury_lib"
+crate-type = ["staticlib", "cdylib", "rlib"]
+
+[build-dependencies]
+tauri-build = { version = "2", features = [] }
+
+[dependencies]
+tauri = { version = "2", features = [] }
+tauri-plugin-fs = "2"
+tauri-plugin-dialog = "2"
+serde = { version = "1", features = ["derive"] }
+serde_json = "1"
+comrak = { version = "0.28", features = ["syntect"] }
+syntect = "5"
+notify = "7"

src-tauri/build.rs

@@ -0,0 +1,3 @@
+fn main() {
+    tauri_build::build()
+}

src-tauri/capabilities/default.json

@@ -0,0 +1,15 @@
+{
+  "identifier": "default",
+  "description": "Permissions par défaut — lecture de fichiers et ouverture de dialogue",
+  "windows": ["main"],
+  "permissions": [
+    "core:path:default",
+    "core:event:default",
+    "core:window:default",
+    "core:window:allow-set-title",
+    "core:app:default",
+    "core:webview:default",
+    "fs:read-all",
+    "dialog:allow-open"
+  ]
+}

src-tauri/src/core.rs

@@ -0,0 +1,204 @@
+use comrak::plugins::syntect::SyntectAdapterBuilder;
+use comrak::{markdown_to_html_with_plugins, Options, Plugins};
+use std::fs;
+use std::path::Path;
+
+pub fn render_markdown(content: String) -> String {
+    let adapter = SyntectAdapterBuilder::new()
+        .theme("base16-ocean.dark")
+        .build();
+    let options = Options::default();
+    let mut plugins = Plugins::default();
+    plugins.render.codefence_syntax_highlighter = Some(&adapter);
+    markdown_to_html_with_plugins(&content, &options, &plugins)
+}
+
+pub fn convert_file(path: String) -> Result<String, String> {
+    let content = fs::read_to_string(&path).map_err(|e| e.to_string())?;
+
+    let adapter = SyntectAdapterBuilder::new()
+        .theme("InspiredGitHub")
+        .build();
+
+    let mut options = Options::default();
+    options.extension.table = true;
+    options.extension.strikethrough = true;
+    options.extension.autolink = true;
+    options.extension.tasklist = true;
+
+    let mut plugins = Plugins::default();
+    plugins.render.codefence_syntax_highlighter = Some(&adapter);
+
+    Ok(markdown_to_html_with_plugins(&content, &options, &plugins))
+}
+
+pub(crate) fn collect_md_files(dir: &Path, result: &mut Vec<String>) -> std::io::Result<()> {
+    for entry in fs::read_dir(dir)? {
+        let entry = entry?;
+        let name = entry.file_name();
+        if name.to_string_lossy().starts_with('.') {
+            continue;
+        }
+        let path = entry.path();
+        if path.is_dir() {
+            collect_md_files(&path, result)?;
+        } else if path.extension().is_some_and(|e| e == "md") {
+            if let Some(s) = path.to_str() {
+                result.push(s.to_string());
+            }
+        }
+    }
+    Ok(())
+}
+
+pub fn list_md_files(dir: String) -> Result<Vec<String>, String> {
+    let path = Path::new(&dir);
+    if !path.is_dir() {
+        return Err(format!("{dir} n'est pas un dossier"));
+    }
+    let mut files = Vec::new();
+    collect_md_files(path, &mut files).map_err(|e| e.to_string())?;
+    files.sort();
+    Ok(files)
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+    use std::path::PathBuf;
+
+    fn tmpdir(name: &str) -> PathBuf {
+        std::env::temp_dir().join(name)
+    }
+
+    #[test]
+    fn render_markdown_heading() {
+        let html = render_markdown("# Hello\n".to_string());
+        assert!(html.contains("<h1>"));
+        assert!(html.contains("Hello"));
+    }
+
+    #[test]
+    fn render_markdown_code_block() {
+        let html = render_markdown("```rust\nfn main() {}\n```\n".to_string());
+        assert!(html.contains("<code") || html.contains("<pre>"));
+    }
+
+    #[test]
+    fn render_markdown_empty() {
+        let html = render_markdown(String::new());
+        assert!(!html.contains("<h1>"));
+    }
+
+    #[test]
+    fn convert_file_success() {
+        let dir = tmpdir("pena_convert_success");
+        fs::create_dir_all(&dir).unwrap();
+        let file = dir.join("test.md");
+        fs::write(&file, "# Title\n\nParagraph.").unwrap();
+        let result = convert_file(file.to_string_lossy().to_string());
+        fs::remove_dir_all(&dir).unwrap();
+        assert!(result.is_ok());
+        assert!(result.unwrap().contains("<h1>"));
+    }
+
+    #[test]
+    fn convert_file_with_table() {
+        let dir = tmpdir("pena_convert_table");
+        fs::create_dir_all(&dir).unwrap();
+        let file = dir.join("table.md");
+        fs::write(&file, "| A | B |\n|---|---|\n| 1 | 2 |").unwrap();
+        let result = convert_file(file.to_string_lossy().to_string());
+        fs::remove_dir_all(&dir).unwrap();
+        assert!(result.is_ok());
+        assert!(result.unwrap().contains("<table>"));
+    }
+
+    #[test]
+    fn convert_file_not_found() {
+        let result = convert_file("/nonexistent/path/does/not/exist.md".to_string());
+        assert!(result.is_err());
+    }
+
+    #[test]
+    fn collect_md_flat() {
+        let dir = tmpdir("pena_collect_flat");
+        fs::create_dir_all(&dir).unwrap();
+        fs::write(dir.join("a.md"), "").unwrap();
+        fs::write(dir.join("b.md"), "").unwrap();
+        fs::write(dir.join("c.txt"), "").unwrap();
+        let mut result = Vec::new();
+        collect_md_files(&dir, &mut result).unwrap();
+        result.sort();
+        fs::remove_dir_all(&dir).unwrap();
+        assert_eq!(result.len(), 2);
+        assert!(result[0].ends_with("a.md"));
+        assert!(result[1].ends_with("b.md"));
+    }
+
+    #[test]
+    fn collect_md_recursive() {
+        let dir = tmpdir("pena_collect_recursive");
+        let sub = dir.join("docs");
+        fs::create_dir_all(&sub).unwrap();
+        fs::write(dir.join("Home.md"), "").unwrap();
+        fs::write(sub.join("Page.md"), "").unwrap();
+        let mut result = Vec::new();
+        collect_md_files(&dir, &mut result).unwrap();
+        fs::remove_dir_all(&dir).unwrap();
+        assert_eq!(result.len(), 2);
+    }
+
+    #[test]
+    fn collect_md_ignores_hidden_dir() {
+        let dir = tmpdir("pena_collect_hidden_dir");
+        let hidden = dir.join(".hidden");
+        fs::create_dir_all(&hidden).unwrap();
+        fs::write(dir.join("visible.md"), "").unwrap();
+        fs::write(hidden.join("secret.md"), "").unwrap();
+        let mut result = Vec::new();
+        collect_md_files(&dir, &mut result).unwrap();
+        fs::remove_dir_all(&dir).unwrap();
+        assert_eq!(result.len(), 1);
+        assert!(result[0].ends_with("visible.md"));
+    }
+
+    #[test]
+    fn collect_md_ignores_hidden_file() {
+        let dir = tmpdir("pena_collect_hidden_file");
+        fs::create_dir_all(&dir).unwrap();
+        fs::write(dir.join("visible.md"), "").unwrap();
+        fs::write(dir.join(".hidden.md"), "").unwrap();
+        let mut result = Vec::new();
+        collect_md_files(&dir, &mut result).unwrap();
+        fs::remove_dir_all(&dir).unwrap();
+        assert_eq!(result.len(), 1);
+        assert!(result[0].ends_with("visible.md"));
+    }
+
+    #[test]
+    fn collect_md_nonexistent_dir() {
+        let mut result = Vec::new();
+        let err = collect_md_files(Path::new("/nonexistent/path/for/pena"), &mut result);
+        assert!(err.is_err());
+    }
+
+    #[test]
+    fn list_md_files_sorted() {
+        let dir = tmpdir("pena_list_sorted");
+        fs::create_dir_all(&dir).unwrap();
+        fs::write(dir.join("z.md"), "").unwrap();
+        fs::write(dir.join("a.md"), "").unwrap();
+        fs::write(dir.join("m.md"), "").unwrap();
+        let result = list_md_files(dir.to_string_lossy().to_string()).unwrap();
+        fs::remove_dir_all(&dir).unwrap();
+        assert_eq!(result.len(), 3);
+        assert!(result[0] < result[1] && result[1] < result[2]);
+    }
+
+    #[test]
+    fn list_md_files_not_a_dir() {
+        let result = list_md_files("/nonexistent/does/not/exist".to_string());
+        assert!(result.is_err());
+    }
+}

src-tauri/src/lib.rs

@@ -0,0 +1,36 @@
+mod core;
+mod watcher;
+
+use std::sync::Mutex;
+
+#[tauri::command]
+fn render_markdown(content: String) -> String {
+    core::render_markdown(content)
+}
+
+#[tauri::command]
+fn convert_file(path: String) -> Result<String, String> {
+    core::convert_file(path)
+}
+
+#[tauri::command]
+fn list_md_files(dir: String) -> Result<Vec<String>, String> {
+    core::list_md_files(dir)
+}
+
+#[cfg_attr(mobile, tauri::mobile_entry_point)]
+pub fn run() {
+    tauri::Builder::default()
+        .plugin(tauri_plugin_fs::init())
+        .plugin(tauri_plugin_dialog::init())
+        .manage(watcher::WatcherState(Mutex::new(None)))
+        .invoke_handler(tauri::generate_handler![
+            render_markdown,
+            convert_file,
+            list_md_files,
+            watcher::start_watch,
+            watcher::stop_watch,
+        ])
+        .run(tauri::generate_context!())
+        .expect("Erreur lors du démarrage de l'application Tauri");
+}

src-tauri/src/main.rs

@@ -0,0 +1,5 @@
+#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
+
+fn main() {
+    pena_taury_lib::run()
+}

src-tauri/src/watcher.rs

@@ -0,0 +1,109 @@
+use notify::{EventKind, RecommendedWatcher, RecursiveMode, Watcher};
+use serde::Serialize;
+use std::collections::HashMap;
+use std::path::{Path, PathBuf};
+use std::sync::mpsc::RecvTimeoutError;
+use std::sync::Mutex;
+use std::time::{Duration, Instant};
+use tauri::{AppHandle, Emitter, State};
+
+pub struct WatcherState(pub Mutex<Option<RecommendedWatcher>>);
+
+#[derive(Serialize, Clone)]
+struct FileChangedPayload {
+    path: String,
+}
+
+fn is_relevant_path(path: &Path) -> bool {
+    if path
+        .components()
+        .any(|c| c.as_os_str().to_string_lossy().starts_with('.'))
+    {
+        return false;
+    }
+    path.extension().is_some_and(|e| e == "md")
+}
+
+#[tauri::command]
+pub fn start_watch(
+    app: AppHandle,
+    path: String,
+    state: State<WatcherState>,
+) -> Result<(), String> {
+    // Drop the previous watcher — disconnects the channel and stops the background thread
+    {
+        let mut guard = state.0.lock().unwrap();
+        *guard = None;
+    }
+
+    let (tx, rx) = std::sync::mpsc::channel::<notify::Result<notify::Event>>();
+
+    let mut watcher = notify::recommended_watcher(move |res| {
+        let _ = tx.send(res);
+    })
+    .map_err(|e| e.to_string())?;
+
+    let watch_path = PathBuf::from(&path);
+    let mode = if watch_path.is_dir() {
+        RecursiveMode::Recursive
+    } else {
+        RecursiveMode::NonRecursive
+    };
+
+    watcher
+        .watch(&watch_path, mode)
+        .map_err(|e| e.to_string())?;
+
+    // Debounce thread: collects events per path, emits after 80ms of silence
+    std::thread::spawn(move || {
+        let mut pending: HashMap<PathBuf, Instant> = HashMap::new();
+
+        loop {
+            match rx.recv_timeout(Duration::from_millis(10)) {
+                Ok(Ok(event)) => {
+                    if matches!(
+                        event.kind,
+                        EventKind::Modify(_) | EventKind::Create(_) | EventKind::Remove(_)
+                    ) {
+                        for p in event.paths {
+                            if is_relevant_path(&p) {
+                                pending.insert(p, Instant::now());
+                            }
+                        }
+                    }
+                }
+                Ok(Err(_)) => {}
+                Err(RecvTimeoutError::Timeout) => {}
+                Err(RecvTimeoutError::Disconnected) => break,
+            }
+
+            let now = Instant::now();
+            let ready: Vec<PathBuf> = pending
+                .iter()
+                .filter(|(_, t)| now.duration_since(**t) >= Duration::from_millis(80))
+                .map(|(p, _)| p.clone())
+                .collect();
+
+            for p in ready {
+                pending.remove(&p);
+                let _ = app.emit(
+                    "file-changed",
+                    FileChangedPayload {
+                        path: p.to_string_lossy().to_string(),
+                    },
+                );
+            }
+        }
+    });
+
+    let mut guard = state.0.lock().unwrap();
+    *guard = Some(watcher);
+
+    Ok(())
+}
+
+#[tauri::command]
+pub fn stop_watch(state: State<WatcherState>) {
+    let mut guard = state.0.lock().unwrap();
+    *guard = None;
+}

src-tauri/tauri.conf.json

@@ -0,0 +1,28 @@
+{
+  "$schema": "https://schema.tauri.app/config/2",
+  "productName": "Pena",
+  "version": "0.1.0",
+  "identifier": "com.pena.app",
+  "build": {
+    "frontendDist": "../src"
+  },
+  "app": {
+    "withGlobalTauri": true,
+    "windows": [
+      {
+        "label": "main",
+        "title": "Pena — Markdown Viewer",
+        "width": 1280,
+        "height": 800
+      }
+    ],
+    "security": {
+      "csp": null
+    }
+  },
+  "bundle": {
+    "active": false,
+    "targets": "all",
+    "icon": []
+  }
+}

src/index.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Pena — Markdown Viewer</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Roboto+Mono&display=swap">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css">
+  <link rel="stylesheet" href="style.css" />
+</head>
+<body>
+
+  <div id="view-home">
+    <h1 class="home-title">Pena</h1>
+    <div class="home-buttons">
+      <button id="btn-open-file">Ouvrir un fichier Markdown</button>
+      <button id="btn-open-dir">Ouvrir un dossier wiki</button>
+    </div>
+  </div>
+
+  <div id="view-reader" class="hidden">
+    <aside id="sidebar" class="sidebar">
+      <!-- contenu généré par JS -->
+    </aside>
+    <div id="content" class="content">
+      <!-- contenu généré par JS -->
+    </div>
+    <button id="btn-back" class="btn-back">← Accueil</button>
+  </div>
+
+  <script src="main.js" type="module"></script>
+</body>
+</html>

src/main.js

@@ -0,0 +1,176 @@
+let currentPath = null;
+let currentMode = null; // 'file' | 'dir'
+
+const viewHome = document.getElementById('view-home');
+const viewReader = document.getElementById('view-reader');
+const sidebar = document.querySelector('#sidebar');
+const content = document.querySelector('#content');
+
+function showHome() {
+  viewReader.classList.add('hidden');
+  viewHome.classList.remove('hidden');
+}
+
+function showReader() {
+  viewHome.classList.add('hidden');
+  viewReader.classList.remove('hidden');
+}
+
+function escapeHtml(str) {
+  return String(str)
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;');
+}
+
+function buildSidebar(baseDir, files, currentFile) {
+  const sep = baseDir.includes('\\') ? '\\' : '/';
+  const dirName = baseDir.split(sep).pop();
+  const prefix = baseDir.endsWith(sep) ? baseDir : baseDir + sep;
+  const toRel = abs => abs.startsWith(prefix) ? abs.slice(prefix.length) : abs;
+  const baseName = rel => rel.split(sep).pop();
+  const currentRel = currentFile ? toRel(currentFile) : null;
+
+  const groups = new Map();
+  for (const f of files) {
+    const rel = toRel(f);
+    const parts = rel.split(sep);
+    const group = parts.length > 1 ? parts[0] : '';
+    if (!groups.has(group)) groups.set(group, []);
+    groups.get(group).push({ rel, abs: f });
+  }
+
+  const sortedGroups = [...groups.keys()].sort((a, b) => {
+    if (a === '') return -1;
+    if (b === '') return 1;
+    return a.localeCompare(b);
+  });
+
+  let html = `<div class="sidebar__title-block">
+    <h1 class="sidebar__title-block__title">${escapeHtml(dirName)}</h1>
+  </div>
+  <ul class="sidebar__menu">`;
+
+  for (const group of sortedGroups) {
+    const pages = groups.get(group).slice().sort((a, b) => a.rel.localeCompare(b.rel));
+
+    if (group !== '') {
+      html += `
+      <li class="sidebar__menu__first-level-title">
+        <span class="sidebar__menu__group-label">${escapeHtml(group)}</span>
+        <ul class="sidebar__menu__second-level">`;
+      for (const { rel, abs } of pages) {
+        const label = baseName(rel).replace(/\.md$/i, '').replace(/-/g, ' ');
+        const cls = rel === currentRel ? ' active' : '';
+        html += `
+          <li class="sidebar__menu__second-level-title">
+            <a href="#" class="sidebar__menu__second-level-title__link${cls}" data-path="${escapeHtml(abs)}">${escapeHtml(label)}</a>
+          </li>`;
+      }
+      html += `
+        </ul>
+      </li>`;
+    } else {
+      for (const { rel, abs } of pages) {
+        const label = baseName(rel).replace(/\.md$/i, '').replace(/-/g, ' ');
+        const cls = rel === currentRel ? ' active' : '';
+        html += `
+      <li class="sidebar__menu__first-level-title">
+        <a href="#" class="sidebar__menu__first-level-title__link${cls}" data-path="${escapeHtml(abs)}">${escapeHtml(label)}</a>
+      </li>`;
+      }
+    }
+  }
+
+  html += `
+  </ul>`;
+  return html;
+}
+
+function renderSidebar(baseDir, files, currentFile) {
+  sidebar.innerHTML = buildSidebar(baseDir, files, currentFile);
+  sidebar.querySelectorAll('a[data-path]').forEach(a => {
+    a.addEventListener('click', e => {
+      e.preventDefault();
+      loadPage(a.dataset.path);
+    });
+  });
+}
+
+async function loadPage(filePath) {
+  try {
+    const html = await window.__TAURI__.core.invoke('convert_file', { path: filePath });
+    content.innerHTML = html;
+
+    const basename = filePath.split('/').pop().split('\\').pop();
+    const title = basename.replace(/\.md$/i, '');
+    await window.__TAURI__.window.getCurrentWindow().setTitle(title);
+
+    if (currentMode === 'dir') {
+      sidebar.querySelectorAll('a').forEach(a => {
+        a.classList.toggle('active', a.dataset.path === filePath);
+      });
+    }
+  } catch (err) {
+    content.innerHTML = `<p class="error">Impossible de charger le fichier : ${err}</p>`;
+  }
+}
+
+async function openPath(path, mode) {
+  currentPath = path;
+  currentMode = mode;
+
+  if (mode === 'file') {
+    sidebar.innerHTML = '';
+    sidebar.classList.add('hidden');
+    content.style.marginLeft = '0';
+    showReader();
+    await loadPage(path);
+    return;
+  }
+
+  // mode === 'dir'
+  sidebar.classList.remove('hidden');
+  content.style.marginLeft = '';
+
+  try {
+    const files = await window.__TAURI__.core.invoke('list_md_files', { dir: path });
+    showReader();
+
+    const sep = path.includes('\\') ? '\\' : '/';
+    const home = files.find(f => {
+      const name = f.split(sep).pop();
+      return name === 'Home.md' || name === 'home.md';
+    });
+
+    const firstFile = home ?? files[0];
+    renderSidebar(path, files, firstFile);
+    await loadPage(firstFile);
+  } catch (err) {
+    showReader();
+    content.innerHTML = `<p class="error">Impossible d'ouvrir le dossier : ${err}</p>`;
+  }
+}
+
+document.getElementById('btn-open-file').addEventListener('click', async () => {
+  const selected = await window.__TAURI__.dialog.open({
+    multiple: false,
+    filters: [{ name: 'Markdown', extensions: ['md'] }],
+  });
+  if (selected == null) return;
+  await openPath(selected, 'file');
+});
+
+document.getElementById('btn-open-dir').addEventListener('click', async () => {
+  const selected = await window.__TAURI__.dialog.open({ directory: true });
+  if (selected == null) return;
+  await openPath(selected, 'dir');
+});
+
+document.getElementById('btn-back').addEventListener('click', () => {
+  currentPath = null;
+  currentMode = null;
+  sidebar.innerHTML = '';
+  showHome();
+});

src/style.css

@@ -0,0 +1,263 @@
+/* ── Reset ── */
+*, *::before, *::after { box-sizing: border-box; }
+::selection { background: #ffc3c3; }
+html, body { height: 100%; margin: 0; }
+body {
+  font-family: 'Poppins', sans-serif;
+  background: #1a1b2e;
+  color: #222;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  overflow-x: hidden;
+}
+
+/* ── Utility ── */
+.hidden { display: none !important; }
+
+/* ── Home view ── */
+#view-home {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  background: #1a1b2e;
+}
+
+.home-title {
+  color: #fff;
+  font-size: 4rem;
+  font-weight: 700;
+  margin: 0 0 48px;
+  letter-spacing: -0.02em;
+}
+
+.home-buttons {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  width: 320px;
+}
+
+.home-buttons button {
+  background: #ff5577;
+  color: #fff;
+  border: none;
+  border-radius: 8px;
+  padding: 14px 24px;
+  font-family: 'Poppins', sans-serif;
+  font-size: 15px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.2s, transform 0.1s;
+}
+
+.home-buttons button:hover {
+  background: #ff3355;
+  transform: translateY(-1px);
+}
+
+.home-buttons button:active {
+  transform: translateY(0);
+}
+
+/* ── Sidebar ── */
+.sidebar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 264px;
+  height: 100vh;
+  background: #1a1b2e;
+  display: flex;
+  flex-direction: column;
+  z-index: 99;
+  overflow: hidden;
+}
+.sidebar__title-block {
+  margin: 48px 24px 8px;
+  flex-shrink: 0;
+}
+.sidebar__title-block a {
+  text-decoration: none;
+}
+.sidebar__title-block__title {
+  color: #fff;
+  font-size: 26px;
+  font-weight: 700;
+  margin: 0 0 4px;
+  line-height: 1.25;
+  pointer-events: none;
+}
+.sidebar__title-block__version {
+  color: rgba(255,255,255,0.3);
+  font-size: 14px;
+  font-weight: 700;
+  display: block;
+  margin-bottom: 24px;
+}
+
+/* ── Sidebar menu ── */
+.sidebar__menu {
+  list-style: none;
+  margin: 0;
+  padding: 8px 0 48px 0;
+  flex: 1;
+  overflow-y: auto;
+}
+.sidebar__menu::-webkit-scrollbar { width: 0; }
+
+.sidebar__menu__group-label {
+  display: block;
+  padding: 16px 24px 6px;
+  color: rgba(255,255,255,0.35);
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.sidebar__menu__first-level-title { margin: 0; }
+.sidebar__menu__first-level-title__link {
+  display: block;
+  padding: 7px 24px;
+  color: rgba(255,255,255,0.85);
+  text-decoration: none;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.4;
+  transition: color 0.2s;
+}
+.sidebar__menu__first-level-title__link:hover { color: #ff5577; }
+.sidebar__menu__first-level-title__link.active {
+  color: #ff5577;
+  font-weight: 500;
+}
+
+.sidebar__menu__second-level { list-style: none; padding: 0; margin: 0; }
+.sidebar__menu__second-level-title { margin: 0; }
+.sidebar__menu__second-level-title__link {
+  display: block;
+  padding: 5px 24px 5px 36px;
+  color: rgba(255,255,255,0.55);
+  text-decoration: none;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.4;
+  transition: color 0.2s;
+}
+.sidebar__menu__second-level-title__link:hover { color: #ff5577; }
+.sidebar__menu__second-level-title__link.active {
+  color: #ff5577;
+  opacity: 1;
+}
+
+/* ── Content ── */
+.content {
+  margin-left: 264px;
+  padding: 48px 72px 96px;
+  max-width: 1080px;
+  min-height: 100vh;
+  background: #fff;
+}
+
+/* ── Typography ── */
+.content a { color: #0000ee; text-decoration: none; transition: color 0.16s; }
+.content a:hover { color: #ff5577; }
+.content a:visited { color: #551a8b; }
+.content a:visited:hover { color: #ff5577; }
+
+.content h1, .content h2, .content h3,
+.content h4, .content h5, .content h6 {
+  color: #222;
+  margin-top: 48px;
+  margin-bottom: 12px;
+  line-height: 1.3;
+}
+.content h1 { font-size: 2em; margin-top: 0; }
+.content h2 { font-size: 1.5em; }
+.content h3 { font-size: 1.25em; }
+
+.content hr { margin: 72px 0; border: none; border-top: 1px solid rgba(34,34,34,0.15); }
+
+.content p { color: #222; font-size: 1em; line-height: 1.64em; margin: 0 0 1em; }
+
+.content code {
+  font-family: 'Roboto Mono', 'SFMono-Regular', Consolas, monospace;
+  font-size: 85%;
+  font-weight: 700;
+  background: #f4f4f7;
+  padding: 0.15em 0.4em;
+  border-radius: 4px;
+  line-height: 1.4;
+}
+.content pre { background: #f4f4f7; padding: 20px 24px; border-radius: 6px; overflow-x: auto; margin: 16px 0; }
+.content pre code { background: none; padding: 0; font-weight: 400; font-size: 13px; }
+
+.content blockquote {
+  border-left: 3px solid rgba(34,34,34,0.25);
+  margin: 24px 0;
+  padding: 4px 24px;
+  color: rgba(34,34,34,0.65);
+}
+
+.content img { max-width: 100%; margin: 8px 0; }
+
+.content table {
+  width: 100%;
+  border-spacing: 0;
+  border-collapse: collapse;
+  margin: 24px 0 48px;
+  font-size: 14px;
+  color: #222;
+}
+.content table th {
+  border-bottom: 1px solid #ff5577;
+  padding: 10px;
+  text-align: left;
+  font-weight: 600;
+}
+.content table td {
+  border-bottom: 1px solid rgba(255,85,119,0.25);
+  padding: 10px;
+}
+
+.content ul li, .content ol li {
+  color: #222;
+  font-size: 1em;
+  line-height: 1.64em;
+  margin-bottom: 8px;
+}
+.content ul li code, .content ol li code { font-weight: 700; }
+
+/* ── Back button ── */
+.btn-back {
+  position: fixed;
+  bottom: 24px;
+  left: 0;
+  width: 264px;
+  background: transparent;
+  color: rgba(255,255,255,0.45);
+  border: none;
+  padding: 8px 24px;
+  font-family: 'Poppins', sans-serif;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  text-align: left;
+  transition: color 0.2s;
+  z-index: 100;
+}
+.btn-back:hover { color: #ff5577; }
+
+/* ── Responsive ── */
+@media screen and (max-width: 1020px) {
+  .sidebar {
+    left: -300px;
+    transition: left 0.2s cubic-bezier(0.09, 0.46, 0.45, 0.94);
+  }
+  .content { margin-left: 0; padding: 32px 24px 64px; }
+}
+@media screen and (max-width: 540px) {
+  .content { padding: 24px 16px 48px; }
+}