From e563560cb189ff7cfd0861d59bb34e53096856b8 Mon Sep 17 00:00:00 2001
From: ArneBo <arne@ecobasa.org>
Date: Mon, 16 Dec 2024 15:13:39 +0100
Subject: [PATCH] fix(ui): sidebar layout

---
 front/src/components/ui/Link.vue     |   2 +-
 front/src/ui/components/Sidebar.vue  | 168 ++++++++++++++-------------
 front/src/ui/components/UserMenu.vue |  73 +++++++-----
 3 files changed, 135 insertions(+), 108 deletions(-)

diff --git a/front/src/components/ui/Link.vue b/front/src/components/ui/Link.vue
index 4b2a8a7a0..c2bfb7825 100644
--- a/front/src/components/ui/Link.vue
+++ b/front/src/components/ui/Link.vue
@@ -39,7 +39,7 @@ const isExternalLink = computed(() => {
   .active { outline: 3px solid red; }
   .external { outline: 3px dotted blue; }
   .inline { display:inline-flex; }
-  .link {
+  .button {
     background-color: var(--fw-bg-color);
     color: var(--fw-text-color);
     border: 1px solid var(--fw-bg-color);
diff --git a/front/src/ui/components/Sidebar.vue b/front/src/ui/components/Sidebar.vue
index f3e1e33e1..4b1d70c8e 100644
--- a/front/src/ui/components/Sidebar.vue
+++ b/front/src/ui/components/Sidebar.vue
@@ -9,6 +9,7 @@ import Input from '~/components/ui/Input.vue'
 import Link from '~/components/ui/Link.vue'
 import ActorAvatar from '~/components/common/ActorAvatar.vue'
 import UserMenu from './UserMenu.vue'
+import Button from '~/components/ui/Button.vue'
 
 const searchQuery = ref('')
 
@@ -25,25 +26,25 @@ const uploads = useUploadsStore()
 
 <template>
   <aside :class="[$style.sidebar, $style['sticky-content']]" v-bind="color('default solid raised')">
+    <header :class="$style['header-wrapper']">
+      <Link to="/" :class="$style['logo']">
+        <img
+          src="../../assets/logo/logo.svg"
+          alt="Logo"
+          width="40px"
+          height="40px"
+        >
+      </Link>
+
       <nav :class="$style['quick-actions']">
-        <Link to="/">
-          <img
-            src="../../assets/logo/logo.svg"
-            alt="Logo"
-            class="logo"
-          >
+
+        <Link to="/manage/settings">
+          <Button round icon="bi-wrench" secondary>
+          </Button>
         </Link>
 
-        <Link to="/manage/settings"
-          icon="bi-wrench"
-          color="secondary"
-          variant="ghost">
-        </Link>
-
-        <Link to="/upload"
-            icon="bi-upload"
-            color="secondary"
-            variant="ghost">
+        <Link to="/upload">
+          <Button round icon="bi-upload" class="is-icon-only" secondary>
             <Transition>
               <div
                 v-if="uploads.currentIndex < uploads.queue.length"
@@ -56,70 +57,85 @@ const uploads = useUploadsStore()
                 />
               </div>
             </Transition>
+          </Button>
         </Link>
 
         <UserMenu />
 
       </nav>
+    </header>
+    <div :class="$style.search">
+      <Input
+        v-model="searchQuery"
+        type="search"
+        icon="bi-search"
+        :placeholder="t('components.audio.SearchBar.placeholder.search')"
+      />
+    </div>
 
-      <div :class="$style.search">
-        <Input
-          v-model="searchQuery"
-          type="search"
-          icon="bi-search"
-          :placeholder="t('components.audio.SearchBar.placeholder.search')"
-        />
-      </div>
-
-      <nav :class="$style['button-list']">
-        <Link to="/library"
+    <nav :class="$style['button-list']">
+      <Link to="/library"
+      >
+        <Button
           color="secondary"
           icon="bi-compass"
         >
-          Explore
-        </Link>
+          {{ t('components.Sidebar.header.explore') }}
+        </Button>
+      </Link>
 
-      </nav>
-
-      <nav :class="$style['button-list']">
-        <Link to="/library/artists"
+      <Link to="/library/artists">
+        <Button
           color="secondary"
           icon="bi-person"
         >
-          Artists
-        </Link>
-        <Link to="/library/albums"
+          {{ t('components.Sidebar.link.artists') }}
+        </Button>
+      </Link>
+
+      <Link to="/library/albums">
+        <Button
           color="secondary"
           icon="bi-disc"
         >
-          Albums
-        </Link>
-        <Link to="/library/playlists"
+          {{ t('components.Sidebar.link.albums') }}
+        </Button>
+      </Link>
+
+      <Link to="/library/playlists">
+        <Button
           color="secondary"
           icon="bi-music-note-list"
         >
-          Playlists
-        </Link>
-        <Link to="/library/radios"
+          {{ t('components.Sidebar.link.playlists') }}
+        </Button>
+      </Link>
+      <Link to="/library/radios">
+        <Button
           color="secondary"
           icon="bi-question-diamond"
         >
-          Radios
-        </Link>
-        <Link to="/library/podcasts"
+          {{ t('components.Sidebar.link.radios') }}
+        </Button>
+      </Link>
+      <Link to="/library/podcasts">
+        <Button
           color="secondary"
           icon="bi-mic"
         >
-          Podcasts
-        </Link>
-        <Link to="/"
+          {{ t('components.Sidebar.link.podcasts') }}
+        </Button>
+      </Link>
+      <Link to="/">
+        <Button
           color="secondary"
           icon="bi-heart"
         >
-          Favorites
-        </Link>
-      </nav>
-    <h3>Channels</h3>
+          {{ t('components.Sidebar.link.favorites') }}
+        </Button>
+      </Link>
+    </nav>
+    <h3>{{ t('components.Sidebar.link.channels') }}</h3>
     <nav :class="$style['button-list']">
       <Link inline to="/about">
         {{ t('components.Sidebar.link.about') }}
@@ -135,24 +151,39 @@ const uploads = useUploadsStore()
 </template>
 
 <style module lang="scss">
+.logo {
+  height: 40px;
+  width: 40px;
+  margin: 20px;
+}
+
 .sidebar {
   height: 100%;
   display:flex;
   flex-direction:column;
 
-  > .sticky-content {
+  &.sticky-content {
     position: sticky;
     height: 100%;
     max-height: 100vh;
     overflow: auto;
     top: 0;
 
-    > .quick-actions {
+    > .header-wrapper {
       display: flex;
+    }
+
+    .quick-actions {
+      display: flex;
+      align-self: end;
+      margin: 20px;
       align-items: center;
-      padding: 12px;
       font-size: 1.3rem;
 
+      .popover-container {
+        display: flex;
+      }
+
       button.active {
         box-shadow: inset 0 0 0 2px var(--fw-blue-500);
         position: relative;
@@ -201,11 +232,6 @@ const uploads = useUploadsStore()
         }
       }
 
-      > :first-child {
-        margin-right: auto;
-
-      }
-
       .avatar,
       .logo {
         height: 30px;
@@ -251,33 +277,15 @@ const uploads = useUploadsStore()
       font-size: 14px;
       line-height: 1.2;
     }
-
-    > .pill-list {
-      padding: 0 16px 8px;
-      white-space: nowrap;
-    }
-
-    > nav.button-list {
+    nav.button-list {
       padding: 0 16px 32px;
 
-      > button {
+      button {
         margin: 2px 0;
-
-        /* TODO: Fix in UI: When icon is applied, the text should be aligned left */
         justify-content: start;
-
-        /* TODO: Fix in UI: Add `block` prop that spans 100% width */
         width: 100%;
-
-        :deep(i) {
-          font-size: 1.4em;
-
-          /* TODO: Fix in UI: Add margin right to the icon, when content available */
-          margin-right: 1ch;
-        }
       }
     }
-
   }
 }
 </style>
diff --git a/front/src/ui/components/UserMenu.vue b/front/src/ui/components/UserMenu.vue
index 15a706c40..c094848c0 100644
--- a/front/src/ui/components/UserMenu.vue
+++ b/front/src/ui/components/UserMenu.vue
@@ -56,7 +56,10 @@ const labels = computed(() => ({
   <Popover v-model:open="openUserMenu">
     <Button
       @click="openUserMenu = !openUserMenu"
-      class="icon-only">
+      round
+      icon
+      class="is-icon-only"
+    >
       <img
         v-if="store.state.auth.authenticated && store.state.auth.profile?.avatar?.urls.medium_square_crop"
         alt=""
@@ -68,10 +71,8 @@ const labels = computed(() => ({
       <PopoverItem v-if="store.state.ui.notifications.inbox + additionalNotifications > 0">
         <Link :to="{name: 'notifications'}">
           <i class="bi bi-inbox-fill" />
-          <div :class="['ui', 'accent', 'mini', 'bottom floating', 'circular', 'label']"
           >
           {{ store.state.ui.notifications.inbox + additionalNotifications }}
-          </div>
           {{ labels.notifications }}
         </Link>
       </PopoverItem>
@@ -147,14 +148,16 @@ const labels = computed(() => ({
         </template>
       </PopoverSubmenu>
       <PopoverItem>
-        <Link
-          to="https://docs.funkwhale.audio"
-          class="item"
-          target="_blank"
-        >
-          <i class="bi bi-book" />
-          {{ labels.docs }}
-        </Link>
+        <nav class="button-list">
+          <Link
+            to="https://docs.funkwhale.audio"
+            class="item"
+            target="_blank"
+          >
+            <i class="bi bi-book" />
+            {{ labels.docs }}
+          </Link>
+        </nav>
       </PopoverItem>
       <PopoverItem
         @click.prevent="emit('show:shortcuts-modal')"
@@ -165,27 +168,43 @@ const labels = computed(() => ({
       <hr v-if="store.state.auth.authenticated"/>
       <PopoverItem v-if="store.state.auth.authenticated && route.path != '/logout'"
       >
-        <Link :to="{ name: 'logout' }">
-          <i class="bi bi-box-arrow-right" />
-          {{ labels.logout }}
-        </Link>
+        <nav class="button-list">
+          <Link :to="{ name: 'logout' }">
+            <i class="bi bi-box-arrow-right" />
+            {{ labels.logout }}
+          </Link>
+        </nav>
       </PopoverItem>
       <PopoverItem v-if="!store.state.auth.authenticated">
-        <Link
-          :to="{ name: 'login' }"
-        >
-          <i class="bi-box-arrow-in-right" />
-          {{ labels.login }}
-        </Link>
+        <nav class="button-list">
+          <Link
+            :to="{ name: 'login' }"
+          >
+            <i class="bi-box-arrow-in-right" />
+            {{ labels.login }}
+          </Link>
+        </nav>
       </PopoverItem>
       <PopoverItem v-if="!store.state.auth.authenticated && store.state.instance.settings.users.registration_enabled.value">
-        <Link
-          :to="{ name: 'signup' }"
-        >
-          <i class="bi bi-person-square" />
-          {{ labels.signup }}
-        </Link>
+        <nav class="button-list">
+          <Link
+            :to="{ name: 'signup' }"
+          >
+            <i class="bi bi-person-square" />
+            {{ labels.signup }}
+          </Link>
+        </nav>
       </PopoverItem>
     </template>
   </Popover>
 </template>
+
+<style scoped lang="scss">
+nav.button-list {
+  width: 100%;
+  a:hover {
+    background-color: transparent;
+    border: none;
+  }
+}
+</style>