feat(home): changelog modal, template focus fix, in-app release notes

src/changelog.md

@@ -0,0 +1,62 @@
+# Nouveautés
+
+## v0.2.0-2 — 25 avril 2026
+
+### Ajouté
+
+- **Palette de commandes** (Ctrl+K / ⌘K) — rechercher un projet, un fichier ou une commande depuis l'Accueil.
+- **Menu contextuel** sur la section Projets récents — clic droit pour créer un nouveau projet ou lancer une recherche.
+- **Logo pixel-perfect** — le logo WeCode correspond maintenant exactement au design original dans toutes ses variantes.
+- Bannière et carte Open Graph pour le repo GitHub.
+
+### Amélioré
+
+- L'app ne plante plus si le dossier du dernier projet a été supprimé pendant qu'elle était fermée.
+- Un toast d'erreur apparaît si la sauvegarde automatique échoue (disque plein, permissions, etc.).
+- Renommer un projet avec un nom déjà pris par un autre est maintenant interdit.
+- Les onglets de l'ancien projet sont vidés quand tu passes à un autre.
+- Le bouton « Ouvrir le dossier » fonctionne sur Windows (utilise `revealItemInDir` au lieu de `openPath`).
+- L'animation d'apparition des cartes projets est plus rapide.
+- Les items de navigation du rail sont maintenant accessibles au clavier.
+- Le focus clavier est visible sur les onglets de l'éditeur.
+
+### Corrigé
+
+- Le contour orange parasite ne s'affiche plus sur les boutons de template ni sur le menu contextuel.
+- Le menu natif du navigateur (Retour, Actualiser, Inspecter) est bloqué partout dans l'app.
+
+---
+
+## v0.2.0-1 — 23 avril 2026
+
+### Ajouté
+
+- **Page d'accueil** — vue par défaut avec la liste des projets récents, la section « Continue le parcours » et les modèles de projet.
+- **Projets sur disque** — chaque projet est un vrai dossier sous `~/Documents/WeCode/`.
+- Créer un projet depuis un modèle (Dossier vierge ou HTML + CSS) avec un sélecteur de dossier natif.
+- Renommer et supprimer un projet (avec option de suppression du dossier sur le disque).
+- Menu contextuel sur les cartes projets : Ouvrir, Ouvrir le dossier, Renommer, Supprimer.
+- Rechargement automatique quand un éditeur externe modifie les fichiers du projet actif.
+- Aperçu mobile / desktop dans le preview.
+- Infobulles sur les mots-clés HTML et CSS dans l'éditeur.
+- Notifications toast et boîtes de confirmation.
+- Raccourcis clavier : `Ctrl+N` (nouveau fichier), `Ctrl+W` (fermer l'onglet), `Ctrl+Tab` / `Ctrl+Shift+Tab` (naviguer entre les onglets).
+- Barre de statut avec sauvegarde auto, latence preview, langue, encodage, ligne:colonne.
+- Refonte visuelle basée sur un design system oklch (Geist + JetBrains Mono).
+
+### Amélioré
+
+- Latence preview réduite de ~1 s à ~100 ms.
+
+### Corrigé
+
+- Fuites de listeners lors des recharges HMR.
+- Le panneau d'aperçu ne reste plus blanc sans mises à jour.
+
+---
+
+## v0.1.0 — 20 avril 2026
+
+### Ajouté
+
+- Première version : shell Tauri v2, éditeur trois panneaux (arborescence, éditeur CodeMirror 6, aperçu live) avec un système de fichiers virtuel en mémoire.

src/home/rail/HomeRailFoot.tsx

@@ -1,17 +1,24 @@
+import { useState } from "react";
+
+import { APP_VERSION } from "../../constants/version";
+import { ChangelogModal } from "../sections/ChangelogModal";
 import { IconHelp, IconShield } from "../icons";
 
 export function HomeRailFoot() {
+  const [showChangelog, setShowChangelog] = useState(false);
+
   return (
     <div className="home-rail-foot">
       <div className="home-rail-sep" aria-hidden="true" />
-      <a className="home-rail-link">
+      <button type="button" className="home-rail-link" onClick={() => setShowChangelog(true)}>
         <IconShield />
-        Nouveautés de la v0.1
-      </a>
+        Nouveautés de la {APP_VERSION}
+      </button>
       <a className="home-rail-link">
         <IconHelp />
         Docs et aide
       </a>
+      {showChangelog && <ChangelogModal onClose={() => setShowChangelog(false)} />}
     </div>
   );
 }

src/home/sections/ChangelogModal.tsx

@@ -0,0 +1,57 @@
+import { useRef } from "react";
+
+import { useModalA11y } from "../../hooks/useModalA11y";
+import changelogRaw from "../../changelog.md?raw";
+
+interface Props {
+  onClose: () => void;
+}
+
+// Minimal markdown-to-HTML for the changelog. Handles headings, bold, lists,
+// horizontal rules and paragraphs — enough for a Keep a Changelog file.
+function renderMarkdown(md: string): string {
+  return md
+    .split("\n")
+    .map((line) => {
+      if (line.startsWith("# ")) return `<h2 class="cl-h1">${line.slice(2)}</h2>`;
+      if (line.startsWith("## ")) return `<h3 class="cl-h2">${line.slice(3)}</h3>`;
+      if (line.startsWith("### ")) return `<h4 class="cl-h3">${line.slice(4)}</h4>`;
+      if (line.startsWith("---")) return '<hr class="cl-hr"/>';
+      if (line.startsWith("- "))
+        return `<li class="cl-li">${line.slice(2).replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>")}</li>`;
+      if (line.trim() === "") return "";
+      return `<p class="cl-p">${line.replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>")}</p>`;
+    })
+    .join("\n");
+}
+
+export function ChangelogModal({ onClose }: Props) {
+  const modalRef = useRef<HTMLDivElement>(null);
+  useModalA11y(modalRef, { onClose });
+
+  return (
+    <div className="modal-backdrop" onClick={onClose}>
+      <div
+        ref={modalRef}
+        className="modal modal--wide cl-modal"
+        onClick={(e) => e.stopPropagation()}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="changelog-title"
+      >
+        <div id="changelog-title" className="modal__title">
+          Nouveautés
+        </div>
+        <div
+          className="cl-body"
+          dangerouslySetInnerHTML={{ __html: renderMarkdown(changelogRaw) }}
+        />
+        <div className="modal__actions">
+          <button type="button" onClick={onClose}>
+            Fermer
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/styles/global.css

@@ -2063,6 +2063,10 @@ button.brand {
   background: var(--bg-2);
   border-color: var(--line);
 }
+.modal__template:focus-visible {
+  outline: none;
+  border-color: var(--accent);
+}
 .modal__template--active {
   border-color: var(--accent);
   background: var(--accent-soft);
@@ -2152,6 +2156,68 @@ button.brand {
   line-height: 1.4;
 }
 
+/* ============================================================
+   Changelog modal
+   ============================================================ */
+
+.cl-modal {
+  max-height: 80vh;
+  display: flex;
+  flex-direction: column;
+}
+.cl-body {
+  overflow-y: auto;
+  padding: 4px 0 12px;
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--fg-1);
+}
+.cl-body .cl-h1 {
+  display: none;
+}
+.cl-body .cl-h2 {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--fg-0);
+  margin: 20px 0 6px;
+  padding-bottom: 6px;
+  border-bottom: 1px solid var(--line-soft);
+}
+.cl-body .cl-h2:first-child {
+  margin-top: 4px;
+}
+.cl-body .cl-h3 {
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--fg-2);
+  margin: 14px 0 4px;
+}
+.cl-body .cl-li {
+  list-style: none;
+  padding-left: 14px;
+  position: relative;
+  margin: 3px 0;
+}
+.cl-body .cl-li::before {
+  content: "·";
+  position: absolute;
+  left: 2px;
+  color: var(--fg-3);
+}
+.cl-body .cl-li strong {
+  color: var(--fg-0);
+}
+.cl-body .cl-hr {
+  border: none;
+  border-top: 1px solid var(--line-soft);
+  margin: 18px 0;
+}
+.cl-body .cl-p {
+  margin: 4px 0;
+}
+
 /* ============================================================
    Command palette (⌘K / Ctrl+K) — Home overlay
    ============================================================ */