From db98502869a4b6592c4d6801a9e36bb0d5bed856 Mon Sep 17 00:00:00 2001
From: Sonja Askim <sonja.askim@gmail.com>
Date: Thu, 14 May 2026 12:07:28 +0200
Subject: [PATCH] feat: show app icon and version in mobile header
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replaces the page title with the brand (soccer icon + RandomTeams name)
on mobile, and adds the version number next to the theme toggle. Desktop
layout is unchanged — branding and version remain in the sidebar.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 package.json               |  2 +-
 src/app/app.component.html | 19 ++++++++++------
 src/app/app.component.scss | 44 +++++++++++++++++++++++++++++++++++++-
 3 files changed, 57 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index 993e117..2c1a370 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "random-teams",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "packageManager": "pnpm@11.1.1",
   "engines": {
     "node": ">=22.13.0"
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 24d5ddc..8e8b1ba 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -70,13 +70,20 @@
   <!-- ── Main content area ─────────────────────────────────────────────── -->
   <div class="main-area">
     <header class="page-header">
+      <div class="header-brand">
+        <span class="material-icons brand-icon">sports_soccer</span>
+        <span class="brand-name">RandomTeams</span>
+      </div>
       <h1 class="page-title">{{ title }}</h1>
-      <button
-        class="header-theme-btn"
-        (click)="toggleDarkMode()"
-        [attr.aria-label]="isDarkMode ? 'Switch to light mode' : 'Switch to dark mode'">
-        <span class="material-icons">{{ isDarkMode ? 'light_mode' : 'dark_mode' }}</span>
-      </button>
+      <div class="header-right">
+        <span class="header-version">v{{ version }}</span>
+        <button
+          class="header-theme-btn"
+          (click)="toggleDarkMode()"
+          [attr.aria-label]="isDarkMode ? 'Switch to light mode' : 'Switch to dark mode'">
+          <span class="material-icons">{{ isDarkMode ? 'light_mode' : 'dark_mode' }}</span>
+        </button>
+      </div>
     </header>
 
     <main class="page-content">
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index a61c60c..954e643 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -167,6 +167,48 @@
     color: var(--brand-text);
     margin: 0;
     letter-spacing: -0.01em;
+    display: none;
+
+    @media (min-width: 768px) {
+      display: block;
+    }
+  }
+}
+
+.header-brand {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+
+  .brand-icon {
+    color: var(--primary);
+    font-size: 1.4rem;
+  }
+
+  .brand-name {
+    font-weight: 700;
+    font-size: 1rem;
+    color: var(--brand-text);
+    letter-spacing: -0.02em;
+  }
+
+  @media (min-width: 768px) {
+    display: none;
+  }
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.header-version {
+  font-size: 0.7rem;
+  color: rgba(255, 255, 255, 0.6);
+
+  @media (min-width: 768px) {
+    display: none;
   }
 }
 
@@ -195,7 +237,7 @@
   }
 
   @media (min-width: 768px) {
-    display: none; /* desktop uses sidebar toggle */
+    display: none;
   }
 }