From 40177cb63f02da756cf84dc601979b0d0dc27b8e Mon Sep 17 00:00:00 2001
From: 3dtours <yeunhiepanh.photo@gmail.com>
Date: Fri, 18 Sep 2026 09:03:35 +0700
Subject: [PATCH] web: the studio header carries the mark and the page name too

The landing, /admin and /profile all show the icon + RecipesCam wordmark
with the page name beside it; the studio still showed a bare "RecipesCam
web" text. Same pair now, so the phone header says where the visitor is.
---
 docker/frontend/src/i18n/en.ts     | 1 +
 docker/frontend/src/i18n/vi.ts     | 1 +
 docker/frontend/src/styles/app.css | 8 ++++++--
 docker/frontend/src/ui/TopBar.tsx  | 4 +++-
 4 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/docker/frontend/src/i18n/en.ts b/docker/frontend/src/i18n/en.ts
index de01f20..4a74218 100644
--- a/docker/frontend/src/i18n/en.ts
+++ b/docker/frontend/src/i18n/en.ts
@@ -114,6 +114,7 @@ export const en: Dict = {
 
   'nav.admin': 'Admin',
   'nav.profile': 'Profile',
+  'nav.studio': 'Studio',
   'adm.title': 'Strip moderation',
   'adm.subtitle': 'Photos contributed by users. Delete one to pull it off the landing page.',
   'adm.upload': 'ADD A PHOTO',
diff --git a/docker/frontend/src/i18n/vi.ts b/docker/frontend/src/i18n/vi.ts
index 932de62..0b4c256 100644
--- a/docker/frontend/src/i18n/vi.ts
+++ b/docker/frontend/src/i18n/vi.ts
@@ -16,6 +16,7 @@ export const vi = {
   'nav.back': 'Về trang chủ',
   'nav.admin': 'Quản trị',
   'nav.profile': 'Hồ sơ',
+  'nav.studio': 'Studio',
   'nav.guest': 'Khách',
 
   'act.undo': 'HOÀN TÁC',
diff --git a/docker/frontend/src/styles/app.css b/docker/frontend/src/styles/app.css
index 85cd938..469c252 100644
--- a/docker/frontend/src/styles/app.css
+++ b/docker/frontend/src/styles/app.css
@@ -13,8 +13,12 @@
   background: var(--bg-elev);
   flex-wrap: wrap;
 }
-.brand { font-weight: 700; letter-spacing: 0.04em; }
-.brand small { color: var(--text-dim); font-weight: 400; margin-left: 6px; letter-spacing: 0; }
+.brand { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; letter-spacing: 0.04em; color: var(--text); text-decoration: none; }
+.brand img { border-radius: 8px; }
+.brand em { font-style: normal; font-weight: 400; color: var(--text-dim); }
+/* The page name, top-left beside the mark — the same pair /admin and /profile
+   carry, so every screen says where the visitor is. */
+.page-name { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); }
 .header .spacer { flex: 1 1 auto; }
 .recipe-name {
   font-family: var(--mono);
diff --git a/docker/frontend/src/ui/TopBar.tsx b/docker/frontend/src/ui/TopBar.tsx
index b8f153c..bccbb97 100644
--- a/docker/frontend/src/ui/TopBar.tsx
+++ b/docker/frontend/src/ui/TopBar.tsx
@@ -48,8 +48,10 @@ export function TopBar({
   return (
     <header className="header" ref={wrap}>
       <a className="brand" href="/">
-        RecipesCam <small>web</small>
+        <img src="/assets/RecipesCamIcon.png" alt="" width="26" height="26" />
+        <span>Recipes<em>Cam</em></span>
       </a>
+      <b className="page-name">{t('nav.studio')}</b>
       <span className="recipe-name">{recipeName}</span>
       <span className="spacer" />