Interface et composants
L'interface reproduit la disposition de VS Code. App.vue ne fait qu'assembler les zones ; chaque composant lit les stores dont il a besoin et appelle leurs actions lui-même.
Les zones de l'écran
Les éléments HTML header, nav, aside, main et footer sont aussi les repères pour les lecteurs d'écran ; des liens d'évitement mènent à l'éditeur, au volet latéral et à la console (voir Accessibilité).
Par-dessus : la palette de commandes (CommandPalette), les fenêtres (ShareModal, AboutModal, InstallModal, FormatDiffModal, toutes sur BaseDialog), le toast de formatage et DialogHost (confirmations, saisies, notifications).
La barre de menus et ses sous-menus
MenuBar.vue implémente le motif WAI-ARIA menubar avec support des sous-menus récursifs. Les entrées de menu peuvent déclarer un sous-menu (submenu, voir Commandes), comme pour Thème, Langue et Police d'écriture dans le menu Affichage.
L'interaction fonctionne au survol à la souris (avec temporisation anti-rebond) et au clavier (→ ou Entrée pour ouvrir le sous-menu, ← ou Échap pour refermer et redonner le focus à l'entrée déclencheuse).
Les dossiers de src/components/
| Dossier | Contenu |
|---|---|
layout/ | AppHeader, MenuBar, ActivityBar, StatusBar |
sidebar/ | Explorateur (FileExplorer, FileTreeItem), recherche (SearchPanel), plan (OutlinePanel, OutlineItem), panneau d'extensions (ExtensionsPanel), GitPanel et ses morceaux dans git/ |
editor/ | EditorTabs, CodeEditor (CodeMirror), FindReplaceWidget, DiffEditor et diff/, ImageViewer, GitGraphView et git-graph/, ShareModal, FormatDiffModal, FormatToast, thèmes CodeMirror |
console/ | OutputConsole (le panneau), ConsoleSidebarList (liste des consoles), TerminalTab, PromptTab, GraphicsTab, KernelOutput (sorties riches) |
common/ | Briques communes : BaseDialog, MenuButton, DialogHost, NotificationToast, FileIcon, CommandPalette et command-palette/, AboutModal, InstallModal |
Un composant qui grossit se découpe en sous-composants rangés dans un dossier à son nom (editor/git-graph/ pour GitGraphView.vue). La logique qui n'est pas de l'affichage part dans un store, un composable ou un service.
Les stores d'interface
| Store | Rôle |
|---|---|
layout | Vue active du volet latéral (files, search, outline, git, extensions), largeurs et hauteurs (volet, console, liste des consoles), panneau replié, fenêtre ouverte (share, about) ; préférences enregistrées |
extensions | Extensions intégrées activées (linter, git, formatter, outline, sql, ocaml), vérification de disponibilité, installation/désinstallation, persistance |
theme | Thème dark / light (celui du système par défaut) et police ; pose la classe sur <html> et les variables de police |
i18n | Langue de l'interface (adaptateur réactif du module src/i18n/) |
commandPalette | Palette ouverte, mode files (Ctrl+P) ou commands (Ctrl+Maj+P), requête |
dialogs | File des confirmations et saisies, notifications |
pwa | Installation de l'application (invite du navigateur, iOS, fenêtre d'aide) |
embedding | Options réglées par la page hôte (gitEnabled) |
Le thème
Les couleurs sont des variables CSS (--vscode-bg, --vscode-text, --vscode-error…) définies dans src/style.css pour chaque thème (html.dark, html.light), et exposées à Tailwind sous le préfixe vscode (tailwind.config.js) : bg-vscode-sidebar, text-vscode-textMuted, border-vscode-border. Changer de thème ne change qu'une classe sur <html>.
- Couleurs de texte uniquement par ces jetons ; les couleurs sémantiques (
link,success,warning,error,info,purple) atteignent 4,5:1 sur tous les fonds, ce que vérifient les tests. - CodeMirror a son thème dans
editor/vscode-theme.ts(etdiff/diff-theme.ts), reconfiguré par compartiment au changement de thème. - Les polices sont embarquées (
@fontsource/*, importées parmain.ts) : aucune requête vers un service de polices.
Les dialogues et notifications
Jamais de window.confirm, alert ni prompt : le store dialogs les remplace (await dialogs.confirm(…), dialogs.prompt(…), dialogs.notify(…), dialogs.notifyError(…)), et DialogHost les affiche. Détails dans la vue d'ensemble.
La palette de commandes
CommandPalette.vue (motif combobox + listbox) a deux modes :
- fichiers (Ctrl+P) : les fichiers du workspace (
command-palette/useWorkspaceFiles.ts), dérivés de l'arborescence du storefileSystem; - commandes (Ctrl+Maj+P, F1, ou
>en tête de saisie) : les commandes du registre, avec leur raccourci.
La recherche floue est dans command-palette/search.ts. Une commande n'est jamais déclarée dans la palette elle-même : elle vient du registre.
Le panneau inférieur
OutputConsole affiche les consoles du store console : des terminaux (autant qu'on veut, chacun sa session), un prompt par langage exécutable, et des sorties graphiques. Le bouton « + » (MenuButton) propose un terminal ou un prompt par langage du registre. Les consoles graphiques restent montées quand on change d'onglet (v-show) : leurs iframes sont reliées au noyau par un port qui ne se transmet qu'une fois (voir Intégration de Basthon).
Le redimensionnement
Les quatre poignées (volet latéral, éditeur scindé, panneau inférieur, liste des consoles) combinent usePointerDrag (souris) et useSeparator (clavier : flèches, Début, Fin, Entrée pour la taille par défaut). Le double-clic rétablit la taille par défaut. Les tailles sont des préférences du store layout (ou editor pour le rapport de scission).
L'application installable
pwa écoute l'invite d'installation du navigateur (beforeinstallprompt) ; InstallModal explique l'installation quand le navigateur ne la propose pas (iOS). Les mises à jour de l'application installée sont décrites dans Déploiement.