Johan LEROY
adc53b413e
Site (packages/site) : adopte le design system Emerald (polices Inter + JetBrains Mono variables, tokens sémantiques, thème clair/sombre + bascule) et met les mockups à jour sur l'app réelle. - style.css : tokens Emerald (@theme sombre + override html[data-theme=light]) ; lib/theme.ts + ThemeToggle.vue + anti-FOUC index.html ; sweep des couleurs brutes vers les tokens dans toutes les sections. - Mockups fidèles à l'IDE multi-projet : HeroMockup (rail ActivityBar au lieu de la sidebar large + v obsolète retirée), ShowcaseSection (supervision au lieu du dashboard worktree-first, onglets mobiles réels), WorkspaceShowcase (diff-add/del, bouton commit accent-solid) ; framing « worktree-first » résiduel levé (i18n). - og-cover.png rafraîchi (carte Emerald). Docs : README.md + README.fr.md (retrait « Status: MVP », ajout du langage Emerald + thème clair/sombre/système, VSIX 0.2.0 -> 0.3.0, section Screenshots), vscode README (VSIX 0.3.0), brand README (thème clair), CHANGELOG daemon 3.2.0. Captures IDE sombre + clair (brand/screenshot-ide-*.png).
58 lines
2.2 KiB
Vue
58 lines
2.2 KiB
Vue
<script setup lang="ts">
|
|
import { useI18n } from 'vue-i18n';
|
|
import { useCopy } from '../composables/useCopy';
|
|
import IconCopy from './icons/IconCopy.vue';
|
|
import IconCheck from './icons/IconCheck.vue';
|
|
|
|
// Bouton « copier » réutilisable, avec retour visuel (icône ✓ + label) pendant 1800 ms.
|
|
// Deux variantes :
|
|
// - 'bar' : bouton étiqueté intégré aux barres de commande (hero, CTA final).
|
|
// - 'icon' : bouton compact icône seule, pour les blocs de code (étapes, footer).
|
|
withDefaults(
|
|
defineProps<{
|
|
text: string;
|
|
variant?: 'bar' | 'icon';
|
|
label?: string; // aria-label décrivant ce qui est copié
|
|
barClass?: string; // padding/ajustements de la variante 'bar'
|
|
}>(),
|
|
{ variant: 'bar', label: '', barClass: 'px-[15px]' },
|
|
);
|
|
|
|
const { t } = useI18n();
|
|
const { copied, copy } = useCopy();
|
|
</script>
|
|
|
|
<template>
|
|
<button
|
|
v-if="variant === 'bar'"
|
|
type="button"
|
|
:aria-label="label || t('copy')"
|
|
:class="[
|
|
'inline-flex flex-none items-center gap-[7px] border-l border-border bg-surface-1 font-mono text-[13px] font-semibold transition-colors hover:bg-surface-2 hover:text-accent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-accent/70',
|
|
barClass,
|
|
copied ? 'text-accent' : 'text-fg-muted',
|
|
]"
|
|
@click="copy(text)"
|
|
>
|
|
<component :is="copied ? IconCheck : IconCopy" :size="15" />
|
|
<span aria-live="polite">{{ copied ? t('copied') : t('copy') }}</span>
|
|
</button>
|
|
|
|
<button
|
|
v-else
|
|
type="button"
|
|
:aria-label="label || t('copy')"
|
|
:title="copied ? t('copied') : label || t('copy')"
|
|
:class="[
|
|
'inline-flex flex-none items-center justify-center rounded-md border p-1.5 transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent/70',
|
|
copied
|
|
? 'border-accent/40 bg-surface-2 text-accent'
|
|
: 'border-border bg-surface-1/80 text-fg-muted hover:border-accent/40 hover:bg-surface-2 hover:text-accent',
|
|
]"
|
|
@click="copy(text)"
|
|
>
|
|
<component :is="copied ? IconCheck : IconCopy" :size="14" />
|
|
<span aria-live="polite" class="sr-only">{{ copied ? t('copied') : t('copy') }}</span>
|
|
</button>
|
|
</template>
|