Add library tone metadata toggle (#15)

Author: KSemenenko

src/PrompterOne.Shared/Contracts/UiTestIds.Library.cs

@@ -28,6 +28,7 @@ public static class Library
         public const string SortDuration = "library-sort-duration";
         public const string SortName = "library-sort-name";
         public const string SortWpm = "library-sort-wpm";
+        public const string ToneMetadataToggle = "library-tone-metadata-toggle";
 
         public static string BreadcrumbCurrent(string folderId) => $"library-breadcrumb-{folderId}";
 
@@ -53,6 +54,8 @@ public static class Library
 
         public static string CardSegmentCount(string scriptId) => $"library-card-segment-count-{scriptId}";
 
+        public static string CardTone(string scriptId) => $"library-card-tone-{scriptId}";
+
         public static string CardWordCount(string scriptId) => $"library-card-word-count-{scriptId}";
 
         public static string CardWpm(string scriptId) => $"library-card-wpm-{scriptId}";

src/PrompterOne.Shared/Library/Components/LibraryCardsGrid.razor

@@ -10,6 +10,7 @@
         <LibraryScriptCard Card="@card"
                            FolderOptions="@FolderOptions"
                            OrganizationTerminology="OrganizationTerminology"
+                           ShowToneMetadata="ShowToneMetadata"
                            IsMenuOpen="@IsCardMenuOpen(card.Id)"
                            OnCardClick="@(() => HandleCardClickAsync(card.Id))"
                            OnDeleteScript="@(() => HandleDeleteScriptAsync(card.Id))"
@@ -61,6 +62,8 @@
     [Parameter, EditorRequired] public LibraryOrganizationTerminology OrganizationTerminology { get; set; } =
         LibraryOrganizationTerminologyCatalog.Resolve(LibraryOrganizationMode.Folders);
 
+    [Parameter] public bool ShowToneMetadata { get; set; } = true;
+
     [Parameter, EditorRequired] public EventCallback<string> OnOpenScript { get; set; }
 
     [Parameter, EditorRequired] public EventCallback<string> OnDuplicateScript { get; set; }

src/PrompterOne.Shared/Library/Components/LibraryScriptCard.razor

@@ -97,7 +97,10 @@
             <div class="dcover-orb dcover-orb2"></div>
             <h3 class="dcard-title">@Card.Title</h3>
             <div class="dcover-meta">
-                <span class="dcover-emo">@Card.Emotion</span>
+                @if (ShowToneMetadata)
+                {
+                    <span class="dcover-emo" data-test="@UiTestIds.Library.CardTone(Card.Id)">@Card.Emotion</span>
+                }
                 <span>@Card.ModeLabel</span>
                 <span data-test="@UiTestIds.Library.CardDuration(Card.Id)">@Card.DurationLabel</span>
             </div>
@@ -151,6 +154,7 @@
     [Parameter, EditorRequired] public IReadOnlyList<LibraryFolderOptionViewModel> FolderOptions { get; set; } = [];
     [Parameter, EditorRequired] public LibraryOrganizationTerminology OrganizationTerminology { get; set; } =
         LibraryOrganizationTerminologyCatalog.Resolve(LibraryOrganizationMode.Folders);
+    [Parameter] public bool ShowToneMetadata { get; set; } = true;
     [Parameter] public bool IsMenuOpen { get; set; }
     [Parameter] public EventCallback OnCardClick { get; set; }
     [Parameter] public EventCallback OnDeleteScript { get; set; }

src/PrompterOne.Shared/Library/Pages/LibraryPage.ViewState.cs

@@ -19,6 +19,12 @@ private async Task SetOrganizationMode(LibraryOrganizationMode mode)
         await PersistViewStateAsync();
     }
 
+    private async Task ToggleToneMetadataAsync()
+    {
+        _showToneMetadata = !_showToneMetadata;
+        await PersistViewStateAsync();
+    }
+
     private void RebuildLibraryView()
     {
         _folderNodes = LibraryFolderTreeBuilder.BuildTree(_folders, _allCards, _selectedFolderId, _expandedFolderIds);
@@ -124,6 +130,7 @@ private async Task RestoreViewStateAsync()
             : storedState.SelectedFolderId;
         _sortMode = storedState.SortMode;
         _organizationMode = storedState.OrganizationMode;
+        _showToneMetadata = storedState.ShowToneMetadata ?? true;
         _expandedFolderIds = storedState.ExpandedFolderIds
             .Where(folderId => !string.IsNullOrWhiteSpace(folderId))
             .ToHashSet(StringComparer.Ordinal);
@@ -135,6 +142,7 @@ private Task PersistViewStateAsync()
             SelectedFolderId: _selectedFolderId,
             SortMode: _sortMode,
             OrganizationMode: _organizationMode,
+            ShowToneMetadata: _showToneMetadata,
             ExpandedFolderIds: _expandedFolderIds.OrderBy(value => value, StringComparer.Ordinal).ToArray());
 
         return SettingsStore.SaveAsync(LibrarySettingsKey, state);

src/PrompterOne.Shared/Library/Pages/LibraryPage.razor

@@ -37,12 +37,19 @@
                         @onclick="() => SetSortMode(LibrarySortMode.Wpm)"
                         data-active="@(GetSortModeState(LibrarySortMode.Wpm))"
                         data-test="@UiTestIds.Library.SortWpm">@Text(UiTextKey.LibrarySortWpm)</button>
+                <button class="sort-btn tone-toggle @(_showToneMetadata ? "active" : null)"
+                        type="button"
+                        aria-pressed="@(_showToneMetadata ? "true" : "false")"
+                        @onclick="ToggleToneMetadataAsync"
+                        data-active="@(_showToneMetadata ? ActiveStateValue : InactiveStateValue)"
+                        data-test="@UiTestIds.Library.ToneMetadataToggle">@Text(UiTextKey.LibraryToneMetadata)</button>
             </div>
 
             <LibraryCardsGrid Cards="_cards"
                               DismissMenuRevision="_dismissCardMenuRevision"
                               FolderOptions="_folderOptions"
                               OrganizationTerminology="OrganizationTerminology"
+                              ShowToneMetadata="_showToneMetadata"
                               OnOpenScript="OpenScriptAsync"
                               OnDuplicateScript="DuplicateScriptAsync"
                               OnMoveScript="MoveScriptAsync"

src/PrompterOne.Shared/Library/Pages/LibraryPage.razor.cs

@@ -44,6 +44,7 @@ public partial class LibraryPage : ComponentBase, IDisposable
     private string _selectedFolderId = LibrarySelectionKeys.All;
     private LibrarySortMode _sortMode = LibrarySortMode.Name;
     private LibraryOrganizationMode _organizationMode = LibraryOrganizationMode.Folders;
+    private bool _showToneMetadata = true;
     private IReadOnlyList<StoredLibraryFolder> _folders = [];
     private IReadOnlyList<LibraryCardViewModel> _allCards = [];
     private IReadOnlyList<LibraryCardViewModel> _cards = [];

src/PrompterOne.Shared/Library/Services/LibraryViewState.cs

@@ -6,11 +6,13 @@ public sealed record LibraryViewState(
     string SelectedFolderId,
     LibrarySortMode SortMode,
     LibraryOrganizationMode OrganizationMode,
+    bool? ShowToneMetadata,
     IReadOnlyList<string> ExpandedFolderIds)
 {
     public static LibraryViewState Default { get; } = new(
         SelectedFolderId: LibrarySelectionKeys.All,
         SortMode: LibrarySortMode.Name,
         OrganizationMode: LibraryOrganizationMode.Folders,
+        ShowToneMetadata: true,
         ExpandedFolderIds: []);
 }

src/PrompterOne.Shared/Localization/SharedResource.de.resx

@@ -105,6 +105,9 @@
   <data name="LibrarySortWpm" xml:space="preserve">
     <value>WPM</value>
   </data>
+  <data name="LibraryToneMetadata" xml:space="preserve">
+    <value>Ton</value>
+  </data>
   <data name="LibraryCreateFolderTitle" xml:space="preserve">
     <value>Ordner erstellen</value>
   </data>

src/PrompterOne.Shared/Localization/SharedResource.es.resx

@@ -105,6 +105,9 @@
   <data name="LibrarySortWpm" xml:space="preserve">
     <value>PPM</value>
   </data>
+  <data name="LibraryToneMetadata" xml:space="preserve">
+    <value>Tono</value>
+  </data>
   <data name="LibraryCreateFolderTitle" xml:space="preserve">
     <value>Crear carpeta</value>
   </data>

src/PrompterOne.Shared/Localization/SharedResource.fr.resx

@@ -105,6 +105,9 @@
   <data name="LibrarySortWpm" xml:space="preserve">
     <value>MPM</value>
   </data>
+  <data name="LibraryToneMetadata" xml:space="preserve">
+    <value>Ton</value>
+  </data>
   <data name="LibraryCreateFolderTitle" xml:space="preserve">
     <value>Créer un dossier</value>
   </data>