Leonardo lig-7844 Make navbar more user friendly (#15)

Author: LeonardoRosaa

CHANGELOG.md

@@ -13,7 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 - Updated button text to "View sample" in annotation details panel for better clarity.
 - Pressing Escape while adding an annotation now cancels add-annotation mode.
-
+- Improved the navbar to display button titles on hover and removed button text on small screens.
 ### Deprecated
 
 ### Removed

lightly_studio_view/e2e/export-annotations.e2e-test.ts

@@ -6,8 +6,8 @@ test.describe('Export Annotations', () => {
     test('Download annotations export JSON', async ({ page }) => {
         await gotoFirstPage(page);
 
-        // Open the Export & Download side panel from the header
-        await page.getByRole('button', { name: 'Export & Download' }).click();
+        // Open the Export side panel from the header
+        await page.getByRole('button', { name: 'Export' }).click();
         await expect(page.getByRole('heading', { name: 'Export' })).toBeVisible();
 
         // Switch to the "Samples & Annotations" tab and wait until the anchor has the href

lightly_studio_view/src/lib/components/ExportSamples/ExportSamples.svelte

@@ -79,9 +79,14 @@
     );
 </script>
 
-<Button variant="ghost" class="flex items-center space-x-2" onclick={() => (isOpened = true)}>
+<Button
+    variant="ghost"
+    class="nav-button flex items-center space-x-2"
+    onclick={() => (isOpened = true)}
+    title={'Export'}
+>
     <Download class="size-4" />
-    Export & Download
+    <span>Export</span>
 </Button>
 
 <SidePanel

lightly_studio_view/src/lib/components/FewShotClassifier/ClassifiersMenu.svelte

@@ -120,10 +120,12 @@
     <PopoverTrigger>
         <Button
             variant="ghost"
-            class="flex items-center space-x-2 {$isDropdownOpen || $selectedSampleIds.size > 0
+            class="nav-button flex items-center space-x-2 {$isDropdownOpen ||
+            $selectedSampleIds.size > 0
                 ? 'ring-2 ring-ring'
                 : ''}"
             disabled={$isCreateClassifiersPanelOpen || $isRefineClassifiersPanelOpen}
+            title={'Classifiers'}
         >
             <NetworkIcon class="size-4" />
             <span>Classifiers</span>

lightly_studio_view/src/lib/components/Header/Header.svelte

@@ -47,7 +47,7 @@
                     <Button
                         data-testid="header-reverse-action-button"
                         variant="outline"
-                        class="flex items-center space-x-2"
+                        class="nav-button flex items-center space-x-2"
                         title={$reversibleActions[0]
                             ? $reversibleActions[0].description
                             : 'No action to undo'}
@@ -60,28 +60,40 @@
                         }}
                     >
                         <Undo2 class="size-4" />
-                        Undo
+                        <span>Undo</span>
                     </Button>
                     <Button
                         data-testid="header-editing-mode-button"
-                        class="flex items-center space-x-2"
+                        class="nav-button flex items-center space-x-2"
                         onclick={() => setIsEditingMode(false)}
+                        title="Finish Editing"
                     >
                         <Check class="size-4" />
-                        Finish Editing
+                        <span>Finish Editing</span>
                     </Button>
                 {:else}
                     <Button
                         data-testid="header-editing-mode-button"
                         variant="outline"
-                        class="flex items-center space-x-2"
+                        class="nav-button flex items-center space-x-2"
                         onclick={() => setIsEditingMode(true)}
+                        title="Edit Annotations"
                     >
                         <Pencil class="size-4" />
-                        Edit Annotations
+                        <span>Edit Annotations</span>
                     </Button>
                 {/if}
             </div>
         </div>
     </div>
 </header>
+
+<style>
+    :global {
+        @media screen and (max-width: 1300px) {
+            .nav-button > span {
+                display: none;
+            }
+        }
+    }
+</style>

lightly_studio_view/src/lib/components/NavigationMenu/NavigationMenu.svelte

@@ -46,14 +46,15 @@
     {#each menuItems as { title, href, isSelected, icon: Icon, id } (id)}
         <Button
             variant="ghost"
-            class={cn('flex items-center space-x-2', isSelected && 'bg-accent')}
+            class={cn('nav-button flex items-center space-x-2', isSelected && 'bg-accent')}
             data-testid={`navigation-menu-${title.toLowerCase()}`}
             {href}
+            {title}
         >
             {#if Icon}
                 <Icon class="size-4" />
             {/if}
-            {title}
+            <span>{title}</span>
         </Button>
     {/each}
 </div>

lightly_studio_view/src/lib/components/Selection/CreateSelectionDialog.svelte

@@ -131,9 +131,10 @@
 
 <Button
     variant="ghost"
-    class="flex items-center space-x-2"
+    class="nav-button flex items-center space-x-2"
     onclick={() => (isOpen = true)}
     data-testid="selection-dialog-button"
+    title="Create Selection"
 >
     <WandSparklesIcon class="size-4" />
     <span>Create Selection</span>

lightly_studio_view/src/lib/components/Settings/SettingsDialog.svelte

@@ -121,7 +121,7 @@
 
 <Dialog.Root bind:open={isOpen}>
     <Dialog.Trigger>
-        <Button variant="outline" class="gap-2">
+        <Button title="Settings" variant="outline" class="nav-button gap-2">
             <SettingsIcon class="h-4 w-4" />
             <span>Settings</span>
         </Button>