From 5166b14d5c36d3adfa0c6fa69269e0b116435da4 Mon Sep 17 00:00:00 2001 From: Johan LEROY Date: Mon, 22 Jun 2026 12:41:10 +0200 Subject: [PATCH] =?UTF-8?q?refactor(site):=20visuels=20fid=C3=A8les=20?= =?UTF-8?q?=C3=A0=20l'app=20r=C3=A9elle=20+=20arguments=20align=C3=A9s=20s?= =?UTF-8?q?ur=20le=20r=C3=A9el?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - HeroMockup : sidebar fidèle (Worktrees actif / Sessions + badge / Groups, puis Réglages / Aide / Gitea / Café) + pied langue·notif·déconnexion·version ; dialogue au format DialogPrompt (badge Permission + options numérotées + Deny) ; couleurs d'état alignées sur SessionStateBadge. - ShowcaseSection : a) dashboard worktree-first (rail « À traiter » + RepoSection + WorktreeCard avec états), b) grille fidèle à TerminalCell (badge d'état texte + repo·branche + commande), c) mobile avec DialogPrompt réel + MobileTabBar. - Retrait de la notion d'IDE (titre des fonctionnalités + FAQ) ; FAQ recentrée sur ce que fait réellement l'app. --- packages/site/src/components/HeroMockup.vue | 160 +++++++------ .../site/src/components/ShowcaseSection.vue | 222 ++++++++++++------ packages/site/src/i18n/content.ts | 12 +- packages/site/src/i18n/en.ts | 15 +- packages/site/src/i18n/fr.ts | 19 +- 5 files changed, 265 insertions(+), 163 deletions(-) diff --git a/packages/site/src/components/HeroMockup.vue b/packages/site/src/components/HeroMockup.vue index ad438b3..cd054a1 100644 --- a/packages/site/src/components/HeroMockup.vue +++ b/packages/site/src/components/HeroMockup.vue @@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n'; import { useHeroTimeline, type SessionState } from '../composables/useHeroTimeline'; import { DLG_OPTS } from '../i18n/content'; import type { AppLocale } from '../i18n'; +import IconGitea from './icons/IconGitea.vue'; const { t, locale } = useI18n(); const { anim } = useHeroTimeline('hero-stage'); @@ -20,10 +21,11 @@ const LINE_COLORS: Record = { run: '#7dd3fc', }; +// Couleurs alignées sur SessionStateBadge de l'app (zinc/emerald/amber/sky de Tailwind). const PILL: Record = { - idle: { bg: 'rgba(2,44,34,.6)', fg: '#34d399', dot: '#34d399', pulse: '' }, - busy: { bg: 'rgba(8,47,73,.7)', fg: '#7dd3fc', dot: '#7dd3fc', pulse: 'pulseSky 2s ease-in-out infinite' }, - waiting: { bg: 'rgba(69,26,3,.7)', fg: '#fcd34d', dot: '#fcd34d', pulse: 'pulseAmber 2.2s ease-in-out infinite' }, + idle: { bg: '#022c22', fg: '#34d399', dot: '#34d399', pulse: '' }, + busy: { bg: '#082f49', fg: '#7dd3fc', dot: '#7dd3fc', pulse: 'pulseSky 2s ease-in-out infinite' }, + waiting: { bg: '#451a03', fg: '#fcd34d', dot: '#fcd34d', pulse: 'pulseAmber 2.2s ease-in-out infinite' }, }; const pill = computed(() => PILL[anim.value.sess]); @@ -33,36 +35,14 @@ const termLines = computed(() => anim.value.lines.map((l) => ({ text: l.text, color: LINE_COLORS[l.k] ?? '#d4d4d8' })), ); +// Options du dialogue de permission — reproduit DialogPrompt (boutons numérotés + Deny). const dlgOptions = computed(() => - DLG_OPTS[locale.value as AppLocale].map((txt, i) => { - const highlighted = anim.value.hl === i; - const answered = anim.value.ans === i; - const row: Record = { - display: 'flex', - alignItems: 'center', - gap: '9px', - padding: '7px 9px', - borderRadius: '7px', - border: '1px solid transparent', - background: 'rgba(9,9,11,.4)', - transition: 'background .2s, border-color .2s', - }; - if (highlighted) { - row.background = 'rgba(69,26,3,.5)'; - row.border = '1px solid rgba(217,119,6,.6)'; - } - if (answered) { - row.background = 'rgba(2,44,34,.45)'; - row.border = '1px solid rgba(5,150,105,.6)'; - } - return { - num: answered ? '✓' : String(i + 1), - text: txt, - rowStyle: row, - numColor: answered ? '#34d399' : '#fbbf24', - textColor: answered ? '#a7f3d0' : highlighted ? '#fde68a' : '#d4d4d8', - }; - }), + DLG_OPTS[locale.value as AppLocale].map((txt, i) => ({ + num: anim.value.ans === i ? '✓' : String(i + 1), + text: txt, + highlighted: anim.value.hl === i, + answered: anim.value.ans === i, + })), ); @@ -79,59 +59,79 @@ const dlgOptions = computed(() => arboretum · localhost:7317 -
- +
+
-
+
- Arboretum + Arboretum
- - {{ t('mSearch') }} - ⌘K + + {{ t('mSearch') }} + ⌘K
-
-
- - {{ t('mDash') }} + +
+
+ + {{ t('mWorktrees') }} +
+
+ + {{ t('mSessions') }} {{ anim.att }}
-
- - {{ t('mGroups') }} +
+ + {{ t('mGroups') }}
-
-
- - {{ t('mSettings') }} + +
+
+ + {{ t('mSettings') }}
-
- - {{ t('mHelp') }} +
+ + {{ t('mHelp') }}
-
v0.4.2
+
+ + {{ t('mGitea') }} +
+
+ + {{ t('coffee') }} +
+
+ + +
+ {{ locale.toUpperCase() }} + + + v1.6.0
@@ -142,9 +142,9 @@ const dlgOptions = computed(() => class="flex min-h-0 flex-1 flex-col overflow-hidden rounded-[10px] border border-zinc-800 bg-zinc-950" >
- api · feat/auth + api · feat/auth
- +
-
- - {{ t('dlgQ') }} +
+ {{ t('mPermission') }} + {{ t('dlgQ') }}
-
-
- {{ op.num }} - {{ op.text }} -
+
+ + {{ op.num }} + {{ op.text }} + + {{ t('mDeny') }}
diff --git a/packages/site/src/components/ShowcaseSection.vue b/packages/site/src/components/ShowcaseSection.vue index 23ae01d..146e471 100644 --- a/packages/site/src/components/ShowcaseSection.vue +++ b/packages/site/src/components/ShowcaseSection.vue @@ -1,67 +1,115 @@