svc-sandbox/bible-strong-avatar-lab
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(studio): refine header and photo controls

Browse Source
This commit is contained in:
smontlouis 2026-08-14 08:02:45 +02:00
parent 1a341886dc
commit 8207a2d6aa
2 changed files with 20 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/features/studio/components/StudioIdentity.tsx
View File

@ -1,5 +1,3 @@
import { Code2 } from 'lucide-react'
import {
Select,
SelectContent,
@ -14,6 +12,14 @@ type StudioIdentityProps = Pick<StudioController, 'language' | 'setLanguage' | '
className?: string
}
function GitHubLogo() {
return (
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<path d="M12 .3a12 12 0 0 0-3.8 23.4c.6.1.8-.3.8-.6v-2.1c-3.3.7-4-1.4-4-1.4-.5-1.4-1.3-1.8-1.3-1.8-1.1-.7.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1.1 1.8 2.8 1.3 3.5 1 .1-.8.4-1.3.8-1.6-2.7-.3-5.5-1.3-5.5-5.9 0-1.3.5-2.4 1.2-3.2-.1-.3-.5-1.5.1-3.2 0 0 1-.3 3.3 1.2a11.5 11.5 0 0 1 6 0c2.3-1.5 3.3-1.2 3.3-1.2.6 1.7.2 2.9.1 3.2.8.8 1.2 1.9 1.2 3.2 0 4.6-2.8 5.6-5.5 5.9.4.4.8 1.1.8 2.2v3.3c0 .3.2.7.8.6A12 12 0 0 0 12 .3Z" />
</svg>
)
}
export function StudioIdentity({ className = '', language, setLanguage, t }: StudioIdentityProps) {
return (
<div className={`studio-identity ${className}`.trim()}>
@ -29,7 +35,7 @@ export function StudioIdentity({ className = '', language, setLanguage, t }: Stu
rel="noreferrer"
aria-label="GitHub"
>
<Code2 aria-hidden="true" />
<GitHubLogo />
<span>GitHub</span>
</a>
<span className="identity-divider" aria-hidden="true" />

15
src/features/studio/components/StudioStage.tsx
View File

@ -1,6 +1,6 @@
import { Camera, Info } from 'lucide-react'
import { motion } from 'motion/react'
import { type CSSProperties } from 'react'
import { type CSSProperties, useState } from 'react'
import { Button } from '@/components/ui/button'
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
@ -10,6 +10,7 @@ import { StudioIdentity } from '@/features/studio/components/StudioIdentity'
import type { StudioController } from '@/features/studio/useStudioController'
export function StudioStage({ controller }: { controller: StudioController }) {
const [photoHelpOpen, setPhotoHelpOpen] = useState(false)
const {
activeAvatarEyes,
activeSequenceLabel,
@ -38,7 +39,6 @@ export function StudioStage({ controller }: { controller: StudioController }) {
setEditing,
setSelectedEyeSide,
showWire,
snapshotFormat,
surface,
t,
takePicture,
@ -118,10 +118,15 @@ export function StudioStage({ controller }: { controller: StudioController }) {
>
<Camera />
<span className="photo-capture-label">{t('Prendre une photo')}</span>
<span className="photo-format-badge">{snapshotFormat.toUpperCase()}</span>
</Button>
<Tooltip>
<Tooltip
open={photoHelpOpen}
onOpenChange={open => {
if (!open) setPhotoHelpOpen(false)
}}
>
<TooltipTrigger
closeOnClick={false}
render={
<Button
className="photo-help-button"
@ -129,6 +134,8 @@ export function StudioStage({ controller }: { controller: StudioController }) {
size="icon-sm"
type="button"
aria-label={t('Informations sur le mode photo')}
aria-expanded={photoHelpOpen}
onClick={() => setPhotoHelpOpen(open => !open)}
/>
}
>