From a82c80eb650c52c0bc1a88d065ac4043f670b647 Mon Sep 17 00:00:00 2001
From: Alain Nussbaumer <alain.nussbaumer@alleluia.ch>
Date: Sat, 15 Feb 2025 22:28:23 +0100
Subject: [PATCH] [web] Create control for tab list

---
 web-src/src/components/ControlTabList.vue |  45 +++++++
 web-src/src/components/TabsAudiobooks.vue |  88 ++++---------
 web-src/src/components/TabsMusic.vue      | 154 ++++++----------------
 web-src/src/components/TabsSettings.vue   |  86 ++++--------
 web-src/src/mystyles.scss                 |  10 --
 5 files changed, 137 insertions(+), 246 deletions(-)
 create mode 100644 web-src/src/components/ControlTabList.vue

diff --git a/web-src/src/components/ControlTabList.vue b/web-src/src/components/ControlTabList.vue
new file mode 100644
index 00000000..d9bf75b8
--- /dev/null
+++ b/web-src/src/components/ControlTabList.vue
@@ -0,0 +1,45 @@
+<template>
+  <section class="section py-0 tabs-section">
+    <div class="container">
+      <div class="columns is-centered my-0">
+        <div class="column is-four-fifths py-0">
+          <div class="tabs is-centered is-small">
+            <ul>
+              <router-link
+                v-for="link in links"
+                :key="link.to.name"
+                v-slot="{ navigate, isActive }"
+                :to="{ name: link.to.name }"
+                custom
+              >
+                <li :class="{ 'is-active': isActive }">
+                  <a @click="navigate" @keypress.enter="navigate">
+                    <mdicon class="icon is-small" :name="link.icon" size="16" />
+                    <span class="is-hidden-mobile" v-text="$t(link.label)" />
+                  </a>
+                </li>
+              </router-link>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'ControlTabList',
+  props: { links: { required: true, type: Array } }
+}
+</script>
+
+<style scoped>
+.tabs-section {
+  background: var(--bulma-body-background-color);
+  position: sticky;
+  top: var(--bulma-navbar-height);
+  width: 100%;
+  z-index: 20;
+}
+</style>
diff --git a/web-src/src/components/TabsAudiobooks.vue b/web-src/src/components/TabsAudiobooks.vue
index d8cef3a2..38728a70 100644
--- a/web-src/src/components/TabsAudiobooks.vue
+++ b/web-src/src/components/TabsAudiobooks.vue
@@ -1,69 +1,33 @@
 <template>
-  <section class="section tabs-section">
-    <div class="container">
-      <div class="columns is-centered my-0">
-        <div class="column is-four-fifths py-0">
-          <div class="tabs is-centered is-small">
-            <ul>
-              <router-link
-                v-slot="{ navigate, isActive }"
-                :to="{ name: 'audiobooks-artists' }"
-                custom
-              >
-                <li :class="{ 'is-active': isActive }">
-                  <a @click="navigate" @keypress.enter="navigate">
-                    <mdicon
-                      class="icon is-small"
-                      name="account-music"
-                      size="16"
-                    />
-                    <span
-                      class="is-hidden-mobile"
-                      v-text="$t('page.audiobooks.tabs.authors')"
-                    />
-                  </a>
-                </li>
-              </router-link>
-              <router-link
-                v-slot="{ navigate, isActive }"
-                :to="{ name: 'audiobooks-albums' }"
-                custom
-              >
-                <li :class="{ 'is-active': isActive }">
-                  <a @click="navigate" @keypress.enter="navigate">
-                    <mdicon class="icon is-small" name="album" size="16" />
-                    <span
-                      class="is-hidden-mobile"
-                      v-text="$t('page.audiobooks.tabs.audiobooks')"
-                    />
-                  </a>
-                </li>
-              </router-link>
-              <router-link
-                v-slot="{ navigate, isActive }"
-                :to="{ name: 'audiobooks-genres' }"
-                custom
-              >
-                <li :class="{ 'is-active': isActive }">
-                  <a @click="navigate" @keypress.enter="navigate">
-                    <mdicon class="icon is-small" name="speaker" size="16" />
-                    <span
-                      class="is-hidden-mobile"
-                      v-text="$t('page.audiobooks.tabs.genres')"
-                    />
-                  </a>
-                </li>
-              </router-link>
-            </ul>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
+  <control-tab-list :links="links" />
 </template>
 
 <script>
+import ControlTabList from '@/components/ControlTabList.vue'
+
 export default {
-  name: 'TabsAudiobooks'
+  name: 'TabsAudiobooks',
+  components: { ControlTabList },
+  computed: {
+    links() {
+      return [
+        {
+          to: { name: 'audiobooks-artists' },
+          icon: 'account-music',
+          label: 'page.audiobooks.tabs.authors'
+        },
+        {
+          to: { name: 'audiobooks-albums' },
+          icon: 'album',
+          label: 'page.audiobooks.tabs.audiobooks'
+        },
+        {
+          to: { name: 'audiobooks-genres' },
+          icon: 'speaker',
+          label: 'page.audiobooks.tabs.genres'
+        }
+      ]
+    }
+  }
 }
 </script>
diff --git a/web-src/src/components/TabsMusic.vue b/web-src/src/components/TabsMusic.vue
index d7373a49..5c74c065 100644
--- a/web-src/src/components/TabsMusic.vue
+++ b/web-src/src/components/TabsMusic.vue
@@ -1,130 +1,54 @@
 <template>
-  <section class="section tabs-section">
-    <div class="container">
-      <div class="columns is-centered my-0">
-        <div class="column is-four-fifths py-0">
-          <div class="tabs is-centered is-small">
-            <ul>
-              <router-link
-                v-slot="{ navigate, isActive }"
-                :to="{ name: 'music-history' }"
-                custom
-              >
-                <li :class="{ 'is-active': isActive }">
-                  <a @click="navigate" @keypress.enter="navigate">
-                    <mdicon class="icon is-small" name="history" size="16" />
-                    <span
-                      class="is-hidden-mobile"
-                      v-text="$t('page.music.tabs.history')"
-                    />
-                  </a>
-                </li>
-              </router-link>
-              <router-link
-                v-slot="{ navigate, isActive }"
-                :to="{ name: 'music-artists' }"
-                custom
-              >
-                <li :class="{ 'is-active': isActive }">
-                  <a @click="navigate" @keypress.enter="navigate">
-                    <mdicon
-                      class="icon is-small"
-                      name="account-music"
-                      size="16"
-                    />
-                    <span
-                      class="is-hidden-mobile"
-                      v-text="$t('page.music.tabs.artists')"
-                    />
-                  </a>
-                </li>
-              </router-link>
-              <router-link
-                v-slot="{ navigate, isActive }"
-                :to="{ name: 'music-albums' }"
-                custom
-              >
-                <li :class="{ 'is-active': isActive }">
-                  <a @click="navigate" @keypress.enter="navigate">
-                    <mdicon class="icon is-small" name="album" size="16" />
-                    <span
-                      class="is-hidden-mobile"
-                      v-text="$t('page.music.tabs.albums')"
-                    />
-                  </a>
-                </li>
-              </router-link>
-              <router-link
-                v-slot="{ navigate, isActive }"
-                :to="{ name: 'music-genres' }"
-                custom
-              >
-                <li :class="{ 'is-active': isActive }">
-                  <a @click="navigate" @keypress.enter="navigate">
-                    <mdicon class="icon is-small" name="speaker" size="16" />
-                    <span
-                      class="is-hidden-mobile"
-                      v-text="$t('page.music.tabs.genres')"
-                    />
-                  </a>
-                </li>
-              </router-link>
-              <router-link
-                v-slot="{ navigate, isActive }"
-                :to="{ name: 'music-composers' }"
-                custom
-              >
-                <li :class="{ 'is-active': isActive }">
-                  <a @click="navigate" @keypress.enter="navigate">
-                    <mdicon
-                      class="icon is-small"
-                      name="book-open-page-variant"
-                      size="16"
-                    />
-                    <span
-                      class="is-hidden-mobile"
-                      v-text="$t('page.music.tabs.composers')"
-                    />
-                  </a>
-                </li>
-              </router-link>
-              <router-link
-                v-if="spotify_enabled"
-                v-slot="{ navigate, isActive }"
-                :to="{ name: 'music-spotify' }"
-                custom
-              >
-                <li :class="{ 'is-active': isActive }">
-                  <a @click="navigate" @keypress.enter="navigate">
-                    <mdicon class="icon is-small" name="spotify" size="16" />
-                    <span
-                      class="is-hidden-mobile"
-                      v-text="$t('page.music.tabs.spotify')"
-                    />
-                  </a>
-                </li>
-              </router-link>
-            </ul>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
+  <control-tab-list :links="links" />
 </template>
 
 <script>
+import ControlTabList from '@/components/ControlTabList.vue'
 import { useServicesStore } from '@/stores/services'
 
 export default {
   name: 'TabsMusic',
-
+  components: { ControlTabList },
   setup() {
     return { servicesStore: useServicesStore() }
   },
-
   computed: {
-    spotify_enabled() {
-      return this.servicesStore.spotify.webapi_token_valid
+    links() {
+      const links = [
+        {
+          to: { name: 'music-history' },
+          icon: 'history',
+          label: 'page.music.tabs.history'
+        },
+        {
+          to: { name: 'music-artists' },
+          icon: 'account-music',
+          label: 'page.music.tabs.artists'
+        },
+        {
+          to: { name: 'music-albums' },
+          icon: 'album',
+          label: 'page.music.tabs.albums'
+        },
+        {
+          to: { name: 'music-genres' },
+          icon: 'speaker',
+          label: 'page.music.tabs.genres'
+        },
+        {
+          to: { name: 'music-composers' },
+          icon: 'book-open-page-variant',
+          label: 'page.music.tabs.composers'
+        }
+      ]
+      if (this.servicesStore.spotify.webapi_token_valid) {
+        links.push({
+          to: { name: 'music-spotify' },
+          icon: 'spotify',
+          label: 'page.music.tabs.spotify'
+        })
+      }
+      return links
     }
   }
 }
diff --git a/web-src/src/components/TabsSettings.vue b/web-src/src/components/TabsSettings.vue
index 0926ffaa..b6a0eac7 100644
--- a/web-src/src/components/TabsSettings.vue
+++ b/web-src/src/components/TabsSettings.vue
@@ -1,66 +1,34 @@
 <template>
-  <section class="section tabs-section">
-    <div class="container">
-      <div class="columns is-centered my-0">
-        <div class="column is-four-fifths py-0">
-          <div class="tabs is-centered is-small">
-            <ul>
-              <router-link
-                v-slot="{ navigate, isActive }"
-                :to="{ name: 'settings-webinterface' }"
-                custom
-              >
-                <li :class="{ 'is-active': isActive }">
-                  <a @click="navigate" @keypress.enter="navigate">
-                    <span v-text="$t('page.settings.tabs.general')" />
-                  </a>
-                </li>
-              </router-link>
-              <router-link
-                v-slot="{ navigate, isActive }"
-                :to="{ name: 'settings-remotes-outputs' }"
-                custom
-              >
-                <li :class="{ 'is-active': isActive }">
-                  <a @click="navigate" @keypress.enter="navigate">
-                    <span
-                      v-text="$t('page.settings.tabs.remotes-and-outputs')"
-                    />
-                  </a>
-                </li>
-              </router-link>
-              <router-link
-                v-slot="{ navigate, isActive }"
-                :to="{ name: 'settings-artwork' }"
-                custom
-              >
-                <li :class="{ 'is-active': isActive }">
-                  <a @click="navigate" @keypress.enter="navigate">
-                    <span v-text="$t('page.settings.tabs.artwork')" />
-                  </a>
-                </li>
-              </router-link>
-              <router-link
-                v-slot="{ navigate, isActive }"
-                :to="{ name: 'settings-online-services' }"
-                custom
-              >
-                <li :class="{ 'is-active': isActive }">
-                  <a @click="navigate" @keypress.enter="navigate">
-                    <span v-text="$t('page.settings.tabs.online-services')" />
-                  </a>
-                </li>
-              </router-link>
-            </ul>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
+  <control-tab-list :links="links" />
 </template>
 
 <script>
+import ControlTabList from '@/components/ControlTabList.vue'
+
 export default {
-  name: 'TabsSettings'
+  name: 'TabsSettings',
+  components: { ControlTabList },
+  computed: {
+    links() {
+      return [
+        {
+          to: { name: 'settings-webinterface' },
+          label: 'page.settings.tabs.general'
+        },
+        {
+          to: { name: 'settings-remotes-outputs' },
+          label: 'page.settings.tabs.remotes-and-outputs'
+        },
+        {
+          to: { name: 'settings-artwork' },
+          label: 'page.settings.tabs.artwork'
+        },
+        {
+          to: { name: 'settings-online-services' },
+          label: 'page.settings.tabs.online-services'
+        }
+      ]
+    }
+  }
 }
 </script>
diff --git a/web-src/src/mystyles.scss b/web-src/src/mystyles.scss
index 636c0776..f56fbf78 100644
--- a/web-src/src/mystyles.scss
+++ b/web-src/src/mystyles.scss
@@ -3,16 +3,6 @@
 @use 'bulma/bulma';
 @use 'bulma/sass/utilities/mixins';
 
-.tabs-section {
-  background: var(--bulma-body-background-color);
-  padding-bottom: 0;
-  padding-top: 0;
-  position: sticky;
-  top: var(--bulma-navbar-height);
-  width: 100%;
-  z-index: 20;
-}
-
 .is-disabled {
   cursor: not-allowed;
   opacity: 0.5;