From 9b156e63c3b55d5e222d42fd6cdd29d72449c6e0 Mon Sep 17 00:00:00 2001
From: "Luis Gustavo S. Barreto" <gustavo@ossystems.com.br>
Date: Fri, 27 Sep 2024 19:34:17 -0300
Subject: [PATCH] refactor(ui): improve sidebar item list structure

* Refactored the list item structure in AppLayout to use prepend
and append slots.
* Moved the crown icon to the append slot for better alignment.
---
 ui/src/layouts/AppLayout.vue                  |  40 +++---
 .../__snapshots__/AppLayout.spec.ts.snap      | 126 +++++++++---------
 2 files changed, 78 insertions(+), 88 deletions(-)

diff --git a/ui/src/layouts/AppLayout.vue b/ui/src/layouts/AppLayout.vue
index a06b960bfc6..470fb176349 100644
--- a/ui/src/layouts/AppLayout.vue
+++ b/ui/src/layouts/AppLayout.vue
@@ -33,7 +33,7 @@
         <Namespace data-test="namespace-component" />
       </div>
 
-      <v-list class="bg-v-theme-surface" data-test="list">
+      <v-list density="compact" class="bg-v-theme-surface" data-test="list">
         <v-list-item
           v-for="item in visibleItems"
           :key="item.title"
@@ -43,30 +43,20 @@
           :disabled="disableItem(item.title)"
           data-test="list-item"
         >
-
-          <v-list-item-title
-            :data-test="item.icon + '-listItem'"
-          >
-            <div class="d-flex align-center">
-              <div class="mr-3">
-                <v-icon data-test="icon">
-                  {{ item.icon }}
-                </v-icon>
-              </div>
-              {{ item.title }}
-              <v-chip
-                v-if="item.isPremium && envVariables.isCommunity && envVariables.premiumPaywall"
-                density="comfortable"
-                label
-                variant="outlined"
-                size="x-small"
-                class="ml-1"
-                color="yellow"
-                prepend-icon="mdi-crown">Premium</v-chip>
-
-            </div>
-          </v-list-item-title>
-
+          <template #prepend>
+            <v-icon data-test="icon">
+              {{ item.icon }}
+            </v-icon>
+          </template>
+          <template #append>
+            <v-icon v-if="item.isPremium && envVariables.isCommunity && envVariables.premiumPaywall"
+              color="yellow"
+              size="x-small"
+              icon="mdi-crown"
+              data-test="icon"
+            />
+          </template>
+          <v-list-item-title v-text="item.title" :data-test="item.icon + '-listItem'"/>
         </v-list-item>
         <v-col class="d-flex align-end justify-center">
           <QuickConnection />
diff --git a/ui/tests/layouts/__snapshots__/AppLayout.spec.ts.snap b/ui/tests/layouts/__snapshots__/AppLayout.spec.ts.snap
index 8d78eadcee2..234611022d4 100644
--- a/ui/tests/layouts/__snapshots__/AppLayout.spec.ts.snap
+++ b/ui/tests/layouts/__snapshots__/AppLayout.spec.ts.snap
@@ -27,103 +27,103 @@ exports[`App Layout Component > Renders the component 1`] = `
           </div>
         </div>
         <!--v-if-->
-        <div data-v-e7291ef4=\\"\\" class=\\"v-list v-theme--dark bg-transparent v-list--density-default v-list--one-line bg-v-theme-surface\\" tabindex=\\"0\\" role=\\"listbox\\" data-test=\\"list\\"><a data-v-e7291ef4=\\"\\" class=\\"v-list-item v-list-item--link v-theme--dark v-list-item--density-default v-list-item--two-line rounded-0 v-list-item--variant-text mb-2\\" href=\\"/\\" tabindex=\\"-2\\" data-test=\\"list-item\\"><span class=\\"v-list-item__overlay\\"></span><span class=\\"v-list-item__underlay\\"></span>
-            <!---->
+        <div data-v-e7291ef4=\\"\\" class=\\"v-list v-theme--dark bg-transparent v-list--density-compact v-list--one-line bg-v-theme-surface\\" tabindex=\\"0\\" role=\\"listbox\\" data-test=\\"list\\"><a data-v-e7291ef4=\\"\\" class=\\"v-list-item v-list-item--link v-theme--dark v-list-item--density-compact v-list-item--two-line rounded-0 v-list-item--variant-text mb-2\\" href=\\"/\\" tabindex=\\"-2\\" data-test=\\"list-item\\"><span class=\\"v-list-item__overlay\\"></span><span class=\\"v-list-item__underlay\\"></span>
+            <div class=\\"v-list-item__prepend\\"><i data-v-e7291ef4=\\"\\" class=\\"mdi-home mdi v-icon notranslate v-theme--dark v-icon--size-default\\" aria-hidden=\\"true\\" data-test=\\"icon\\"></i>
+              <div class=\\"v-list-item__spacer\\"></div>
+            </div>
             <div class=\\"v-list-item__content\\" data-no-activator=\\"\\">
               <!---->
               <!---->
-              <div data-v-e7291ef4=\\"\\" class=\\"v-list-item-title\\" data-test=\\"mdi-home-listItem\\">
-                <div data-v-e7291ef4=\\"\\" class=\\"d-flex align-center\\">
-                  <div data-v-e7291ef4=\\"\\" class=\\"mr-3\\"><i data-v-e7291ef4=\\"\\" class=\\"mdi-home mdi v-icon notranslate v-theme--dark v-icon--size-default\\" aria-hidden=\\"true\\" data-test=\\"icon\\"></i></div> Home
-                  <!--v-if-->
-                </div>
-              </div>
+              <div data-v-e7291ef4=\\"\\" class=\\"v-list-item-title\\" data-test=\\"mdi-home-listItem\\">Home</div>
+            </div>
+            <div class=\\"v-list-item__append\\">
+              <!--v-if-->
+              <div class=\\"v-list-item__spacer\\"></div>
             </div>
-            <!---->
-          </a><a data-v-e7291ef4=\\"\\" class=\\"v-list-item v-list-item--disabled v-theme--dark v-list-item--density-default v-list-item--two-line rounded-0 v-list-item--variant-text mb-2\\" href=\\"/devices\\" data-test=\\"list-item\\">
+          </a><a data-v-e7291ef4=\\"\\" class=\\"v-list-item v-list-item--disabled v-theme--dark v-list-item--density-compact v-list-item--two-line rounded-0 v-list-item--variant-text mb-2\\" href=\\"/devices\\" data-test=\\"list-item\\">
             <!----><span class=\\"v-list-item__underlay\\"></span>
-            <!---->
+            <div class=\\"v-list-item__prepend\\"><i data-v-e7291ef4=\\"\\" class=\\"mdi-cellphone-link mdi v-icon notranslate v-theme--dark v-icon--size-default\\" aria-hidden=\\"true\\" data-test=\\"icon\\"></i>
+              <div class=\\"v-list-item__spacer\\"></div>
+            </div>
             <div class=\\"v-list-item__content\\" data-no-activator=\\"\\">
               <!---->
               <!---->
-              <div data-v-e7291ef4=\\"\\" class=\\"v-list-item-title\\" data-test=\\"mdi-cellphone-link-listItem\\">
-                <div data-v-e7291ef4=\\"\\" class=\\"d-flex align-center\\">
-                  <div data-v-e7291ef4=\\"\\" class=\\"mr-3\\"><i data-v-e7291ef4=\\"\\" class=\\"mdi-cellphone-link mdi v-icon notranslate v-theme--dark v-icon--size-default\\" aria-hidden=\\"true\\" data-test=\\"icon\\"></i></div> Devices
-                  <!--v-if-->
-                </div>
-              </div>
+              <div data-v-e7291ef4=\\"\\" class=\\"v-list-item-title\\" data-test=\\"mdi-cellphone-link-listItem\\">Devices</div>
             </div>
-            <!---->
-          </a><a data-v-e7291ef4=\\"\\" class=\\"v-list-item v-list-item--disabled v-theme--dark v-list-item--density-default v-list-item--two-line rounded-0 v-list-item--variant-text mb-2\\" href=\\"/containers\\" data-test=\\"list-item\\">
+            <div class=\\"v-list-item__append\\">
+              <!--v-if-->
+              <div class=\\"v-list-item__spacer\\"></div>
+            </div>
+          </a><a data-v-e7291ef4=\\"\\" class=\\"v-list-item v-list-item--disabled v-theme--dark v-list-item--density-compact v-list-item--two-line rounded-0 v-list-item--variant-text mb-2\\" href=\\"/containers\\" data-test=\\"list-item\\">
             <!----><span class=\\"v-list-item__underlay\\"></span>
-            <!---->
+            <div class=\\"v-list-item__prepend\\"><i data-v-e7291ef4=\\"\\" class=\\"mdi-server mdi v-icon notranslate v-theme--dark v-icon--size-default\\" aria-hidden=\\"true\\" data-test=\\"icon\\"></i>
+              <div class=\\"v-list-item__spacer\\"></div>
+            </div>
             <div class=\\"v-list-item__content\\" data-no-activator=\\"\\">
               <!---->
               <!---->
-              <div data-v-e7291ef4=\\"\\" class=\\"v-list-item-title\\" data-test=\\"mdi-server-listItem\\">
-                <div data-v-e7291ef4=\\"\\" class=\\"d-flex align-center\\">
-                  <div data-v-e7291ef4=\\"\\" class=\\"mr-3\\"><i data-v-e7291ef4=\\"\\" class=\\"mdi-server mdi v-icon notranslate v-theme--dark v-icon--size-default\\" aria-hidden=\\"true\\" data-test=\\"icon\\"></i></div> Containers
-                  <!--v-if-->
-                </div>
-              </div>
+              <div data-v-e7291ef4=\\"\\" class=\\"v-list-item-title\\" data-test=\\"mdi-server-listItem\\">Containers</div>
             </div>
-            <!---->
-          </a><a data-v-e7291ef4=\\"\\" class=\\"v-list-item v-list-item--disabled v-theme--dark v-list-item--density-default v-list-item--two-line rounded-0 v-list-item--variant-text mb-2\\" href=\\"/sessions\\" data-test=\\"list-item\\">
+            <div class=\\"v-list-item__append\\">
+              <!--v-if-->
+              <div class=\\"v-list-item__spacer\\"></div>
+            </div>
+          </a><a data-v-e7291ef4=\\"\\" class=\\"v-list-item v-list-item--disabled v-theme--dark v-list-item--density-compact v-list-item--two-line rounded-0 v-list-item--variant-text mb-2\\" href=\\"/sessions\\" data-test=\\"list-item\\">
             <!----><span class=\\"v-list-item__underlay\\"></span>
-            <!---->
+            <div class=\\"v-list-item__prepend\\"><i data-v-e7291ef4=\\"\\" class=\\"mdi-history mdi v-icon notranslate v-theme--dark v-icon--size-default\\" aria-hidden=\\"true\\" data-test=\\"icon\\"></i>
+              <div class=\\"v-list-item__spacer\\"></div>
+            </div>
             <div class=\\"v-list-item__content\\" data-no-activator=\\"\\">
               <!---->
               <!---->
-              <div data-v-e7291ef4=\\"\\" class=\\"v-list-item-title\\" data-test=\\"mdi-history-listItem\\">
-                <div data-v-e7291ef4=\\"\\" class=\\"d-flex align-center\\">
-                  <div data-v-e7291ef4=\\"\\" class=\\"mr-3\\"><i data-v-e7291ef4=\\"\\" class=\\"mdi-history mdi v-icon notranslate v-theme--dark v-icon--size-default\\" aria-hidden=\\"true\\" data-test=\\"icon\\"></i></div> Sessions
-                  <!--v-if-->
-                </div>
-              </div>
+              <div data-v-e7291ef4=\\"\\" class=\\"v-list-item-title\\" data-test=\\"mdi-history-listItem\\">Sessions</div>
+            </div>
+            <div class=\\"v-list-item__append\\">
+              <!--v-if-->
+              <div class=\\"v-list-item__spacer\\"></div>
             </div>
-            <!---->
-          </a><a data-v-e7291ef4=\\"\\" class=\\"v-list-item v-list-item--disabled v-theme--dark v-list-item--density-default v-list-item--two-line rounded-0 v-list-item--variant-text mb-2\\" href=\\"/firewall/rules\\" data-test=\\"list-item\\">
+          </a><a data-v-e7291ef4=\\"\\" class=\\"v-list-item v-list-item--disabled v-theme--dark v-list-item--density-compact v-list-item--two-line rounded-0 v-list-item--variant-text mb-2\\" href=\\"/firewall/rules\\" data-test=\\"list-item\\">
             <!----><span class=\\"v-list-item__underlay\\"></span>
-            <!---->
+            <div class=\\"v-list-item__prepend\\"><i data-v-e7291ef4=\\"\\" class=\\"mdi-security mdi v-icon notranslate v-theme--dark v-icon--size-default\\" aria-hidden=\\"true\\" data-test=\\"icon\\"></i>
+              <div class=\\"v-list-item__spacer\\"></div>
+            </div>
             <div class=\\"v-list-item__content\\" data-no-activator=\\"\\">
               <!---->
               <!---->
-              <div data-v-e7291ef4=\\"\\" class=\\"v-list-item-title\\" data-test=\\"mdi-security-listItem\\">
-                <div data-v-e7291ef4=\\"\\" class=\\"d-flex align-center\\">
-                  <div data-v-e7291ef4=\\"\\" class=\\"mr-3\\"><i data-v-e7291ef4=\\"\\" class=\\"mdi-security mdi v-icon notranslate v-theme--dark v-icon--size-default\\" aria-hidden=\\"true\\" data-test=\\"icon\\"></i></div> Firewall Rules
-                  <!--v-if-->
-                </div>
-              </div>
+              <div data-v-e7291ef4=\\"\\" class=\\"v-list-item-title\\" data-test=\\"mdi-security-listItem\\">Firewall Rules</div>
+            </div>
+            <div class=\\"v-list-item__append\\">
+              <!--v-if-->
+              <div class=\\"v-list-item__spacer\\"></div>
             </div>
-            <!---->
-          </a><a data-v-e7291ef4=\\"\\" class=\\"v-list-item v-list-item--disabled v-theme--dark v-list-item--density-default v-list-item--two-line rounded-0 v-list-item--variant-text mb-2\\" href=\\"/sshkeys/public-keys\\" data-test=\\"list-item\\">
+          </a><a data-v-e7291ef4=\\"\\" class=\\"v-list-item v-list-item--disabled v-theme--dark v-list-item--density-compact v-list-item--two-line rounded-0 v-list-item--variant-text mb-2\\" href=\\"/sshkeys/public-keys\\" data-test=\\"list-item\\">
             <!----><span class=\\"v-list-item__underlay\\"></span>
-            <!---->
+            <div class=\\"v-list-item__prepend\\"><i data-v-e7291ef4=\\"\\" class=\\"mdi-key mdi v-icon notranslate v-theme--dark v-icon--size-default\\" aria-hidden=\\"true\\" data-test=\\"icon\\"></i>
+              <div class=\\"v-list-item__spacer\\"></div>
+            </div>
             <div class=\\"v-list-item__content\\" data-no-activator=\\"\\">
               <!---->
               <!---->
-              <div data-v-e7291ef4=\\"\\" class=\\"v-list-item-title\\" data-test=\\"mdi-key-listItem\\">
-                <div data-v-e7291ef4=\\"\\" class=\\"d-flex align-center\\">
-                  <div data-v-e7291ef4=\\"\\" class=\\"mr-3\\"><i data-v-e7291ef4=\\"\\" class=\\"mdi-key mdi v-icon notranslate v-theme--dark v-icon--size-default\\" aria-hidden=\\"true\\" data-test=\\"icon\\"></i></div> Public Keys
-                  <!--v-if-->
-                </div>
-              </div>
+              <div data-v-e7291ef4=\\"\\" class=\\"v-list-item-title\\" data-test=\\"mdi-key-listItem\\">Public Keys</div>
             </div>
-            <!---->
-          </a><a data-v-e7291ef4=\\"\\" class=\\"v-list-item v-list-item--disabled v-theme--dark v-list-item--density-default v-list-item--two-line rounded-0 v-list-item--variant-text mb-2\\" href=\\"/settings\\" data-test=\\"list-item\\">
+            <div class=\\"v-list-item__append\\">
+              <!--v-if-->
+              <div class=\\"v-list-item__spacer\\"></div>
+            </div>
+          </a><a data-v-e7291ef4=\\"\\" class=\\"v-list-item v-list-item--disabled v-theme--dark v-list-item--density-compact v-list-item--two-line rounded-0 v-list-item--variant-text mb-2\\" href=\\"/settings\\" data-test=\\"list-item\\">
             <!----><span class=\\"v-list-item__underlay\\"></span>
-            <!---->
+            <div class=\\"v-list-item__prepend\\"><i data-v-e7291ef4=\\"\\" class=\\"mdi-cog mdi v-icon notranslate v-theme--dark v-icon--size-default\\" aria-hidden=\\"true\\" data-test=\\"icon\\"></i>
+              <div class=\\"v-list-item__spacer\\"></div>
+            </div>
             <div class=\\"v-list-item__content\\" data-no-activator=\\"\\">
               <!---->
               <!---->
-              <div data-v-e7291ef4=\\"\\" class=\\"v-list-item-title\\" data-test=\\"mdi-cog-listItem\\">
-                <div data-v-e7291ef4=\\"\\" class=\\"d-flex align-center\\">
-                  <div data-v-e7291ef4=\\"\\" class=\\"mr-3\\"><i data-v-e7291ef4=\\"\\" class=\\"mdi-cog mdi v-icon notranslate v-theme--dark v-icon--size-default\\" aria-hidden=\\"true\\" data-test=\\"icon\\"></i></div> Settings
-                  <!--v-if-->
-                </div>
-              </div>
+              <div data-v-e7291ef4=\\"\\" class=\\"v-list-item-title\\" data-test=\\"mdi-cog-listItem\\">Settings</div>
+            </div>
+            <div class=\\"v-list-item__append\\">
+              <!--v-if-->
+              <div class=\\"v-list-item__spacer\\"></div>
             </div>
-            <!---->
           </a>
           <div data-v-e7291ef4=\\"\\" class=\\"v-col d-flex align-end justify-center\\">
             <div data-v-136d2a2f=\\"\\" data-v-e7291ef4=\\"\\"><button data-v-136d2a2f=\\"\\" type=\\"button\\" class=\\"v-btn v-btn--block v-theme--dark bg-primary v-btn--density-default v-btn--size-default v-btn--variant-flat\\" tabindex=\\"0\\" aria-label=\\"Dialog Quick Connection\\" data-test=\\"quick-connection-open-btn\\"><span class=\\"v-btn__overlay\\"></span><span class=\\"v-btn__underlay\\"></span><span class=\\"v-btn__prepend\\"><i class=\\"mdi-console mdi v-icon notranslate v-theme--dark v-icon--size-default\\" aria-hidden=\\"true\\"></i></span><span class=\\"v-btn__content\\" data-no-activator=\\"\\"> Quick Connect </span>