From a057d880e0702c5e680c2f17388ca82355b87f72 Mon Sep 17 00:00:00 2001
From: smontlouis <s.montlouis.calixte@gmail.com>
Date: Thu, 13 Aug 2026 20:14:26 +0200
Subject: [PATCH] feat(studio): refine preview branding

Use flag-only language controls and add the creator credit beneath Photo Mode.
---
 src/app/styles.css                            | 29 ++++++++++++++++---
 .../studio/components/StudioIdentity.tsx      | 13 ++++-----
 .../studio/components/StudioStage.tsx         |  7 +++++
 3 files changed, 38 insertions(+), 11 deletions(-)

diff --git a/src/app/styles.css b/src/app/styles.css
index 60c3251..f833403 100644
--- a/src/app/styles.css
+++ b/src/app/styles.css
@@ -106,6 +106,24 @@ input {
   gap: 8px;
   transform: translateX(-50%);
 }
+.stage-credit {
+  position: absolute;
+  z-index: 8;
+  bottom: 20px;
+  left: 50%;
+  margin: 0;
+  color: #7f8791;
+  font-size: 10px;
+  transform: translateX(-50%);
+  white-space: nowrap;
+}
+.stage-credit a {
+  color: #aeb6c2;
+  text-decoration: none;
+}
+.stage-credit a:hover {
+  color: white;
+}
 .photo-capture-button {
   min-width: 190px;
   height: 44px;
@@ -251,7 +269,7 @@ input {
 .language-picker [data-slot='select-trigger'] {
   width: auto;
   height: 24px;
-  min-width: 82px;
+  min-width: 46px;
   padding: 0 4px;
   border: 0;
   background: transparent;
@@ -2391,7 +2409,7 @@ p {
     box-shadow: 0 4px 14px rgb(24 28 35 / 7%);
   }
   .inspector-identity .language-picker [data-slot='select-trigger'] {
-    min-width: 68px;
+    min-width: 46px;
     color: #17191d;
   }
   .stage-identity .brand {
@@ -2410,7 +2428,7 @@ p {
     padding: 3px 6px 3px 8px;
   }
   .stage-identity .language-picker [data-slot='select-trigger'] {
-    min-width: 68px;
+    min-width: 46px;
   }
   .stage-identity .source-link > span {
     display: none;
@@ -2419,10 +2437,13 @@ p {
     width: min(42dvh, 78vw, 340px);
   }
   .photo-capture-bar {
-    bottom: max(12px, env(safe-area-inset-bottom));
+    bottom: max(36px, calc(env(safe-area-inset-bottom) + 24px));
     left: 12px;
     transform: none;
   }
+  .stage-credit {
+    bottom: max(9px, env(safe-area-inset-bottom));
+  }
   .photo-capture-button {
     width: 40px;
     min-width: 40px;
diff --git a/src/features/studio/components/StudioIdentity.tsx b/src/features/studio/components/StudioIdentity.tsx
index 0578137..374bc2e 100644
--- a/src/features/studio/components/StudioIdentity.tsx
+++ b/src/features/studio/components/StudioIdentity.tsx
@@ -33,13 +33,12 @@ export function StudioIdentity({ className = '', language, setLanguage, t }: Stu
           <span>GitHub</span>
         </a>
         <span className="identity-divider" aria-hidden="true" />
-        <span aria-hidden="true">{language === 'en' ? '🇬🇧' : language === 'fr' ? '🇫🇷' : '🇨🇳'}</span>
         <Select
           value={language}
           items={[
-            { value: 'en', label: 'English' },
-            { value: 'fr', label: 'Français' },
-            { value: 'zh-CN', label: '中文' },
+            { value: 'en', label: '🇬🇧' },
+            { value: 'fr', label: '🇫🇷' },
+            { value: 'zh-CN', label: '🇨🇳' },
           ]}
           onValueChange={next => next && setLanguage(next as StudioLanguage)}
         >
@@ -47,9 +46,9 @@ export function StudioIdentity({ className = '', language, setLanguage, t }: Stu
             <SelectValue />
           </SelectTrigger>
           <SelectContent>
-            <SelectItem value="en">English</SelectItem>
-            <SelectItem value="fr">Français</SelectItem>
-            <SelectItem value="zh-CN">中文</SelectItem>
+            <SelectItem value="en">🇬🇧</SelectItem>
+            <SelectItem value="fr">🇫🇷</SelectItem>
+            <SelectItem value="zh-CN">🇨🇳</SelectItem>
           </SelectContent>
         </Select>
       </div>
diff --git a/src/features/studio/components/StudioStage.tsx b/src/features/studio/components/StudioStage.tsx
index b825b40..e969791 100644
--- a/src/features/studio/components/StudioStage.tsx
+++ b/src/features/studio/components/StudioStage.tsx
@@ -140,6 +140,13 @@ export function StudioStage({ controller }: { controller: StudioController }) {
           </Tooltip>
         </div>
       </TooltipProvider>
+      <p className="stage-credit">
+        Made with ❤️ by{' '}
+        <a href="https://x.com/_smontlouis" target="_blank" rel="noreferrer">
+          @_smontlouis
+        </a>
+        .
+      </p>
     </motion.section>
   )
 }