Use home icon for shell homepage control (#36)

KSemenenko · KSemenenko · commit 75790a329586 · 2026-04-26T04:23:20.000+02:00
diff --git a/src/PrompterOne.Shared/AppShell/Components/MainLayoutHeader.razor b/src/PrompterOne.Shared/AppShell/Components/MainLayoutHeader.razor
@@ -8,11 +8,14 @@
         data-reader-muted="@(IsReaderMuted ? EnabledStateValue : DisabledStateValue)">
     <button type="button"
             class="app-header-left app-header-home"
+            title="@HomeLabel"
+            aria-label="@HomeLabel"
             @onclick="HandleHomeClickAsync"
             data-test="@UiTestIds.Header.Home">
         <div class="logo-icon"
+             data-icon-kind="home"
              data-test="@UiTestIds.Header.HomeBrandMark">
-            <AppBrandMark />
+            <UiIcon Kind="UiIconKind.Home" Size="22" StrokeWidth="@HomeIconStrokeWidth" />
         </div>
         <span class="app-logo-text" data-test="@UiTestIds.Header.Brand">PrompterOne</span>
     </button>
@@ -247,6 +250,7 @@
 @code {
     private const string DisabledStateValue = "false";
     private const string EnabledStateValue = "true";
+    private const decimal HomeIconStrokeWidth = 1.9m;
 
     [Parameter, EditorRequired] public string CssClass { get; set; } = string.Empty;
     [Parameter] public bool IsReaderMuted { get; set; }
@@ -265,6 +269,7 @@
     [Parameter] public string? HeaderSubtitleDomId { get; set; }
     [Parameter, EditorRequired] public string HeaderSubtitle { get; set; } = string.Empty;
     [Parameter, EditorRequired] public string HeaderTitle { get; set; } = string.Empty;
+    [Parameter, EditorRequired] public string HomeLabel { get; set; } = string.Empty;
     [Parameter, EditorRequired] public string AiSpotlightLabel { get; set; } = string.Empty;
     [Parameter, EditorRequired] public string AiSpotlightShortcutLabel { get; set; } = string.Empty;
     [Parameter, EditorRequired] public string ImportActionButtonTestId { get; set; } = string.Empty;
diff --git a/src/PrompterOne.Shared/AppShell/Layout/MainLayout.razor b/src/PrompterOne.Shared/AppShell/Layout/MainLayout.razor
@@ -9,6 +9,7 @@
                       HeaderSubtitle="@HeaderSubtitle"
                       HeaderSubtitleDomId="@(ShellState.Screen == AppShellScreen.Teleprompter ? UiDomIds.Teleprompter.HeaderSegment : null)"
                       HeaderTitle="@HeaderTitle"
+                      HomeLabel="@Text(UiTextKey.HeaderHome)"
                       ImportActionButtonTestId="@ImportActionButtonTestId"
                       ImportActionIconTestId="@ImportActionIconTestId"
                       ImportActionInputId="@ImportActionInputDomId"
diff --git a/src/PrompterOne.Shared/Components/UiIcon.razor b/src/PrompterOne.Shared/Components/UiIcon.razor
@@ -167,6 +167,12 @@
             <circle cx="12" cy="17" r="1" fill="currentColor" stroke="none" />
         </svg>
         break;
+    case UiIconKind.Home:
+        <svg class="@CssClassValue" width="@Size" height="@Size" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="@StrokeWidth" stroke-linecap="round" stroke-linejoin="round" aria-hidden="@AriaHidden">
+            <path d="M3 11.5 12 4l9 7.5" />
+            <path d="M5 10.5V20h5v-5h4v5h5v-9.5" />
+        </svg>
+        break;
     case UiIconKind.Keyboard:
         <svg class="@CssClassValue" width="@Size" height="@Size" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="@StrokeWidth" aria-hidden="@AriaHidden">
             <rect x="3" y="5" width="18" height="14" rx="2" />
diff --git a/src/PrompterOne.Shared/Components/UiIconKind.cs b/src/PrompterOne.Shared/Components/UiIconKind.cs
@@ -28,6 +28,7 @@ public enum UiIconKind
     ExportArrow,
     Folder,
     HelpCircle,
+    Home,
     Keyboard,
     LayoutPanel,
     LayoutFull,
diff --git a/src/PrompterOne.Shared/Localization/SharedResource.de.resx b/src/PrompterOne.Shared/Localization/SharedResource.de.resx
@@ -147,6 +147,9 @@
   <data name="HeaderSearchPlaceholder" xml:space="preserve">
     <value>Nach Titeln, Dateien oder Inhalten suchen...</value>
   </data>
+  <data name="HeaderHome" xml:space="preserve">
+    <value>Startseite</value>
+  </data>
   <data name="HeaderNewScript" xml:space="preserve">
     <value>Neues Skript</value>
   </data>
diff --git a/src/PrompterOne.Shared/Localization/SharedResource.es.resx b/src/PrompterOne.Shared/Localization/SharedResource.es.resx
@@ -147,6 +147,9 @@
   <data name="HeaderSearchPlaceholder" xml:space="preserve">
     <value>Buscar títulos, archivos o contenido...</value>
   </data>
+  <data name="HeaderHome" xml:space="preserve">
+    <value>Inicio</value>
+  </data>
   <data name="HeaderNewScript" xml:space="preserve">
     <value>Nuevo guion</value>
   </data>
diff --git a/src/PrompterOne.Shared/Localization/SharedResource.fr.resx b/src/PrompterOne.Shared/Localization/SharedResource.fr.resx
@@ -147,6 +147,9 @@
   <data name="HeaderSearchPlaceholder" xml:space="preserve">
     <value>Rechercher titres, fichiers ou contenu...</value>
   </data>
+  <data name="HeaderHome" xml:space="preserve">
+    <value>Accueil</value>
+  </data>
   <data name="HeaderNewScript" xml:space="preserve">
     <value>Nouveau script</value>
   </data>
diff --git a/src/PrompterOne.Shared/Localization/SharedResource.it.resx b/src/PrompterOne.Shared/Localization/SharedResource.it.resx
@@ -147,6 +147,9 @@
   <data name="HeaderSearchPlaceholder" xml:space="preserve">
     <value>Cerca titoli, file o contenuti...</value>
   </data>
+  <data name="HeaderHome" xml:space="preserve">
+    <value>Home</value>
+  </data>
   <data name="HeaderNewScript" xml:space="preserve">
     <value>Nuovo script</value>
   </data>
diff --git a/src/PrompterOne.Shared/Localization/SharedResource.pt.resx b/src/PrompterOne.Shared/Localization/SharedResource.pt.resx
@@ -147,6 +147,9 @@
   <data name="HeaderSearchPlaceholder" xml:space="preserve">
     <value>Pesquisar títulos, arquivos ou conteúdo...</value>
   </data>
+  <data name="HeaderHome" xml:space="preserve">
+    <value>Início</value>
+  </data>
   <data name="HeaderNewScript" xml:space="preserve">
     <value>Novo roteiro</value>
   </data>
diff --git a/src/PrompterOne.Shared/Localization/SharedResource.resx b/src/PrompterOne.Shared/Localization/SharedResource.resx
@@ -147,6 +147,9 @@
   <data name="HeaderSearchPlaceholder" xml:space="preserve">
     <value>Search titles, files, or content...</value>
   </data>
+  <data name="HeaderHome" xml:space="preserve">
+    <value>Home</value>
+  </data>
   <data name="HeaderNewScript" xml:space="preserve">
     <value>New Script</value>
   </data>
diff --git a/src/PrompterOne.Shared/Localization/SharedResource.uk.resx b/src/PrompterOne.Shared/Localization/SharedResource.uk.resx
@@ -147,6 +147,9 @@
   <data name="HeaderSearchPlaceholder" xml:space="preserve">
     <value>Шукати назви, файли або вміст...</value>
   </data>
+  <data name="HeaderHome" xml:space="preserve">
+    <value>На головну</value>
+  </data>
   <data name="HeaderNewScript" xml:space="preserve">
     <value>Новий сценарій</value>
   </data>
diff --git a/src/PrompterOne.Shared/Localization/UiTextKey.cs b/src/PrompterOne.Shared/Localization/UiTextKey.cs
@@ -108,6 +108,7 @@ public enum UiTextKey
     OnboardingGoLiveBulletProgram,
     OnboardingGoLiveBulletRecording,
     OnboardingGoLiveBulletRouting,
+    HeaderHome,
     HeaderNewScript,
     HeaderOpenScript,
     HeaderImportReading,
diff --git a/tests/PrompterOne.Web.Tests/AppShell/MainLayoutHeaderImportProgressTests.cs b/tests/PrompterOne.Web.Tests/AppShell/MainLayoutHeaderImportProgressTests.cs
@@ -7,6 +7,8 @@ namespace PrompterOne.Web.Tests;
 
 public sealed class MainLayoutHeaderImportProgressTests : BunitContext
 {
+    private const string HomeIconKindValue = "home";
+    private const string HomeLabel = "Home";
     private const string ImportFileName = "board-review.docx";
     private const string ImportLabel = "Import";
     private const string ProgressLabel = "Preparing script";
@@ -53,6 +55,21 @@ public void MainLayoutHeader_LongEditorTitle_RendersTooltipAndClampClass()
         Assert.Equal(LongHeaderTitle, title.TextContent.Trim());
     }
 
+    [Test]
+    public void MainLayoutHeader_HomeControl_UsesRecognizableHomeIcon()
+    {
+        var cut = RenderHeader();
+
+        var home = cut.FindByTestId(UiTestIds.Header.Home);
+        var homeIcon = cut.FindByTestId(UiTestIds.Header.HomeBrandMark);
+
+        Assert.Equal(HomeLabel, home.GetAttribute("aria-label"));
+        Assert.Equal(HomeLabel, home.GetAttribute("title"));
+        Assert.Equal(HomeIconKindValue, homeIcon.GetAttribute("data-icon-kind"));
+        Assert.Contains("<svg", homeIcon.InnerHtml, StringComparison.OrdinalIgnoreCase);
+        Assert.Equal("PrompterOne", cut.FindByTestId(UiTestIds.Header.Brand).TextContent.Trim());
+    }
+
     [Test]
     public void MainLayoutHeader_SubtitleBackText_InvokesBackAction()
     {
@@ -83,6 +100,7 @@ private IRenderedComponent<MainLayoutHeader> RenderHeader(
             parameters.Add(component => component.CssClass, "app-header");
             parameters.Add(component => component.HeaderSubtitle, headerSubtitle);
             parameters.Add(component => component.HeaderTitle, headerTitle);
+            parameters.Add(component => component.HomeLabel, HomeLabel);
             parameters.Add(component => component.ImportActionButtonTestId, UiTestIds.Header.EditorImportScriptButton);
             parameters.Add(component => component.ImportActionIconTestId, UiTestIds.Header.EditorImportScriptIcon);
             parameters.Add(component => component.ImportActionInputId, UiDomIds.AppShell.EditorImportScriptInput);
diff --git a/tests/PrompterOne.Web.UITests.Shell/AppShell/NavigationFlowTests.cs b/tests/PrompterOne.Web.UITests.Shell/AppShell/NavigationFlowTests.cs
@@ -130,6 +130,7 @@ public async Task ShellHeaderChrome_KeepsActionsReachable_OnPhoneAndTabletViewpo
                 await page.SetViewportSizeAsync(viewport.Width, viewport.Height);
 
                 await ShellRouteDriver.OpenLibraryAsync(page, viewport.Name);
+                await AssertHeaderHomeIconContractAsync(page);
                 await AssertHeaderControlsReachableAsync(
                     page,
                     BrowserTestConstants.ResponsiveLayout.LibraryRouteName,
@@ -196,6 +197,16 @@ await ReadCssPropertyAsync(page, UiTestIds.Header.GoLiveIcon, ColorProperty),
             await ReadCssPropertyAsync(page, UiTestIds.Header.GoLiveDot, BackgroundColorProperty));
     }
 
+    private static async Task AssertHeaderHomeIconContractAsync(IPage page)
+    {
+        await Expect(page.GetByTestId(UiTestIds.Header.Home)).ToHaveAttributeAsync(
+            "aria-label",
+            BrowserTestConstants.AppShellFlow.HomeAccessibleLabel);
+        await Expect(page.GetByTestId(UiTestIds.Header.HomeBrandMark)).ToHaveAttributeAsync(
+            BrowserTestConstants.Html.DataIconKindAttribute,
+            BrowserTestConstants.AppShellFlow.HomeIconKindValue);
+    }
+
     private static Task<string> ReadCssPropertyAsync(IPage page, string testId, string propertyName) =>
         page.EvaluateAsync<string>(
             """
diff --git a/tests/PrompterOne.Web.UITests/Support/BrowserTestConstants.ScreenFlows.cs b/tests/PrompterOne.Web.UITests/Support/BrowserTestConstants.ScreenFlows.cs
@@ -187,6 +187,8 @@ public static class AppShellFlow
         public const string SettingsTitle = "Settings";
         public const string HeaderChromeScenario = "app-shell-header-chrome";
         public const string HeaderChromeReachableStep = "01-actions-reachable";
+        public const string HomeAccessibleLabel = "Home";
+        public const string HomeIconKindValue = "home";
         public const string LiveWidgetScenario = "app-shell-live-widget";
         public const string LiveWidgetViewportName = "iphone-medium-portrait";
         public const int LiveWidgetTimerPollAttempts = 5;
diff --git a/tests/PrompterOne.Web.UITests/Support/BrowserTestConstants.cs b/tests/PrompterOne.Web.UITests/Support/BrowserTestConstants.cs
@@ -19,6 +19,7 @@ public static class Html
         public const string AriaPressedAttribute = "aria-pressed";
         public const string AriaPressedFalseValue = "false";
         public const string AriaPressedTrueValue = "true";
+        public const string DataIconKindAttribute = "data-icon-kind";
         public const string DataTestAttribute = "data-test";
         public const string PlaceholderAttribute = "placeholder";
         public const string ValueAttribute = "value";
