feat(webui): remove tab navigation and use sidebar instead

komga-webui/src/locales/en.json

@@ -659,7 +659,7 @@
     "matches_n": "No matches | 1 match | {count} matches",
     "new": "New",
     "saved_size": "Saved {size}",
-    "title": "Duplicate pages",
+    "title": "Duplicate Pages",
     "unknown_size": "Unknown size"
   },
   "duplicates": {
@@ -860,7 +860,7 @@
   },
   "media_analysis": {
     "comment": "Comment",
-    "media_analysis": "Media analysis",
+    "media_analysis": "Media Analysis",
     "media_type": "Media Type",
     "name": "Name",
     "size": "Size",

komga-webui/src/router.ts

@@ -64,95 +64,71 @@ const router = new Router({
           component: () => import(/* webpackChunkName: "dashboard" */ './views/DashboardView.vue'),
         },
         {
-          path: '/settings',
-          name: 'settings',
-          redirect: {name: 'settings-users'},
-          component: () => import(/* webpackChunkName: "settings" */ './views/SettingsHolder.vue'),
+          path: '/settings/users',
+          name: 'settings-users',
+          beforeEnter: adminGuard,
+          component: () => import(/* webpackChunkName: "settings-users" */ './views/SettingsUsers.vue'),
           children: [
             {
-              path: '/settings/users',
-              name: 'settings-users',
-              beforeEnter: adminGuard,
-              component: () => import(/* webpackChunkName: "settings-users" */ './views/SettingsUsers.vue'),
-              children: [
-                {
-                  path: '/settings/users/add',
-                  name: 'settings-users-add',
-                  component: () => import(/* webpackChunkName: "settings-user" */ './components/dialogs/UserAddDialog.vue'),
-                },
-              ],
-            },
-            {
-              path: '/settings/server',
-              name: 'settings-server',
-              beforeEnter: adminGuard,
-              component: () => import(/* webpackChunkName: "settings-server" */ './views/SettingsServer.vue'),
-            },
-            {
-              path: '/settings/metrics',
-              name: 'metrics',
-              beforeEnter: adminGuard,
-              component: () => import(/* webpackChunkName: "metrics" */ './views/MetricsView.vue'),
-            },
-            {
-              path: '/settings/announcements',
-              name: 'announcements',
-              beforeEnter: adminGuard,
-              component: () => import(/* webpackChunkName: "announcements" */ './views/AnnouncementsView.vue'),
-            },
-            {
-              path: '/settings/updates',
-              name: 'updates',
-              beforeEnter: adminGuard,
-              component: () => import(/* webpackChunkName: "updates" */ './views/UpdatesView.vue'),
+              path: '/settings/users/add',
+              name: 'settings-users-add',
+              component: () => import(/* webpackChunkName: "settings-user" */ './components/dialogs/UserAddDialog.vue'),
             },
           ],
         },
         {
-          path: '/media-management',
-          name: 'media-management',
-          redirect: {name: 'media-analysis'},
-          component: () => import(/* webpackChunkName: "media-management" */ './views/MediaManagement.vue'),
-          children: [
-            {
-              path: '/media-management/analysis',
-              name: 'media-analysis',
-              beforeEnter: adminGuard,
-              component: () => import(/* webpackChunkName: "media-analysis" */ './views/MediaAnalysis.vue'),
-            },
-            {
-              path: '/media-management/missing-posters',
-              name: 'missing-posters',
-              beforeEnter: adminGuard,
-              component: () => import(/* webpackChunkName: "missing-posters" */ './views/MissingPosters.vue'),
-            },
-            {
-              path: '/media-management/duplicate-files',
-              name: 'duplicate-files',
-              beforeEnter: adminGuard,
-              component: () => import(/* webpackChunkName: "duplicate-files" */ './views/DuplicateFiles.vue'),
-            },
-            {
-              path: '/media-management/duplicate-pages',
-              name: 'duplicate-pages',
-              redirect: {name: 'settings-duplicate-pages-known'},
-              component: () => import(/* webpackChunkName: "duplicate-pages" */ './views/DuplicatePagesHolder.vue'),
-              children: [
-                {
-                  path: '/media-management/duplicate-pages/known',
-                  name: 'settings-duplicate-pages-known',
-                  beforeEnter: adminGuard,
-                  component: () => import(/* webpackChunkName: "duplicate-pages" */ './views/DuplicatePagesKnown.vue'),
-                },
-                {
-                  path: '/media-management/duplicate-pages/unknown',
-                  name: 'settings-duplicate-pages-unknown',
-                  beforeEnter: adminGuard,
-                  component: () => import(/* webpackChunkName: "duplicate-pages" */ './views/DuplicatePagesUnknown.vue'),
-                },
-              ],
-            },
-          ],
+          path: '/settings/server',
+          name: 'settings-server',
+          beforeEnter: adminGuard,
+          component: () => import(/* webpackChunkName: "settings-server" */ './views/SettingsServer.vue'),
+        },
+        {
+          path: '/settings/metrics',
+          name: 'metrics',
+          beforeEnter: adminGuard,
+          component: () => import(/* webpackChunkName: "metrics" */ './views/MetricsView.vue'),
+        },
+        {
+          path: '/settings/announcements',
+          name: 'announcements',
+          beforeEnter: adminGuard,
+          component: () => import(/* webpackChunkName: "announcements" */ './views/AnnouncementsView.vue'),
+        },
+        {
+          path: '/settings/updates',
+          name: 'updates',
+          beforeEnter: adminGuard,
+          component: () => import(/* webpackChunkName: "updates" */ './views/UpdatesView.vue'),
+        },
+        {
+          path: '/media-management/analysis',
+          name: 'media-analysis',
+          beforeEnter: adminGuard,
+          component: () => import(/* webpackChunkName: "media-analysis" */ './views/MediaAnalysis.vue'),
+        },
+        {
+          path: '/media-management/missing-posters',
+          name: 'missing-posters',
+          beforeEnter: adminGuard,
+          component: () => import(/* webpackChunkName: "missing-posters" */ './views/MissingPosters.vue'),
+        },
+        {
+          path: '/media-management/duplicate-files',
+          name: 'duplicate-files',
+          beforeEnter: adminGuard,
+          component: () => import(/* webpackChunkName: "duplicate-files" */ './views/DuplicateFiles.vue'),
+        },
+        {
+          path: '/media-management/duplicate-pages/known',
+          name: 'settings-duplicate-pages-known',
+          beforeEnter: adminGuard,
+          component: () => import(/* webpackChunkName: "duplicate-pages-known" */ './views/DuplicatePagesKnown.vue'),
+        },
+        {
+          path: '/media-management/duplicate-pages/unknown',
+          name: 'settings-duplicate-pages-unknown',
+          beforeEnter: adminGuard,
+          component: () => import(/* webpackChunkName: "duplicate-pages-new" */ './views/DuplicatePagesUnknown.vue'),
         },
         {
           path: '/history',
@@ -237,25 +213,16 @@ const router = new Router({
           component: () => import(/* webpackChunkName: "search" */ './views/SearchView.vue'),
         },
         {
-          path: '/import',
-          name: 'import',
-          redirect: {name: 'import-books'},
+          path: '/import/books',
+          name: 'import-books',
           beforeEnter: adminGuard,
-          component: () => import(/* webpackChunkName: "import" */ './views/ImportHolder.vue'),
-          children: [
-            {
-              path: '/import/books',
-              name: 'import-books',
-              beforeEnter: adminGuard,
-              component: () => import(/* webpackChunkName: "import-books" */ './views/ImportBooks.vue'),
-            },
-            {
-              path: '/import/readlist',
-              name: 'import-readlist',
-              beforeEnter: adminGuard,
-              component: () => import(/* webpackChunkName: "import-readlist" */ './views/ImportReadList.vue'),
-            },
-          ],
+          component: () => import(/* webpackChunkName: "import-books" */ './views/ImportBooks.vue'),
+        },
+        {
+          path: '/import/readlist',
+          name: 'import-readlist',
+          beforeEnter: adminGuard,
+          component: () => import(/* webpackChunkName: "import-readlist" */ './views/ImportReadList.vue'),
         },
       ],
     },

komga-webui/src/views/AnnouncementsView.vue

@@ -9,7 +9,7 @@
               inline
               left
               :value="item._komga.read ? 0 : 1"
-              color="warning"
+              color="info"
             >
               <a :href="item.url" target="_blank" class="text-h3 font-weight-medium link-underline">{{ item.title }}</a>
               <v-icon

komga-webui/src/views/DuplicatePagesHolder.vue

@@ -1,21 +0,0 @@
-<template>
-  <div>
-    <v-tabs grow>
-      <v-tab :to="{name: 'settings-duplicate-pages-known'}">{{ $t('duplicate_pages.known') }}</v-tab>
-      <v-tab :to="{name: 'settings-duplicate-pages-unknown'}">{{ $t('duplicate_pages.new') }}</v-tab>
-    </v-tabs>
-    <router-view/>
-  </div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue'
-
-export default Vue.extend({
-  name: 'DuplicatePagesHolder',
-})
-</script>
-
-<style scoped>
-
-</style>

komga-webui/src/views/HomeView.vue

@@ -7,8 +7,8 @@
         dot
         offset-x="15"
         offset-y="20"
-        :value="drawerVisible ? 0 : booksToCheck + $store.getters.getUnreadAnnouncementsCount()"
-        :color="booksToCheck ? 'accent' : 'warning'"
+        :value="drawerVisible ? 0 : $store.state.booksToCheck + $store.getters.getUnreadAnnouncementsCount()"
+        :color="$store.state.booksToCheck ? 'accent' : 'info'"
         class="ms-n3"
       >
         <v-app-bar-nav-icon @click.stop="toggleDrawer"/>
@@ -52,7 +52,7 @@
 
       <v-divider/>
 
-      <v-list>
+      <v-list nav shaped>
         <v-list-item :to="{name: 'dashboard'}">
           <v-list-item-icon>
             <v-icon>mdi-home</v-icon>
@@ -62,6 +62,7 @@
           </v-list-item-content>
         </v-list-item>
 
+        <!--   LIBRARIES     -->
         <v-list-item :to="{name:'libraries', params: {libraryId: LIBRARIES_ALL}}">
           <v-list-item-icon>
             <v-icon>mdi-book-multiple</v-icon>
@@ -69,7 +70,7 @@
           <v-list-item-content>
             <v-list-item-title>{{ $t('navigation.libraries') }}</v-list-item-title>
           </v-list-item-content>
-          <v-list-item-action v-if="isAdmin">
+          <v-list-item-action v-if="isAdmin" class="ma-0">
             <v-btn icon @click.stop.capture.prevent="addLibrary">
               <v-icon>mdi-plus</v-icon>
             </v-btn>
@@ -78,7 +79,6 @@
 
         <v-list-item v-for="(l, index) in libraries"
                      :key="index"
-                     dense
                      :to="{name:'libraries', params: {libraryId: l.id}}"
         >
           <v-list-item-icon>
@@ -91,35 +91,85 @@
             >{{ $t('common.unavailable') }}
             </v-list-item-subtitle>
           </v-list-item-content>
-          <v-list-item-action v-if="isAdmin">
+          <v-list-item-action v-if="isAdmin" class="ma-0">
             <library-actions-menu :library="l"/>
           </v-list-item-action>
         </v-list-item>
 
-        <v-list-item :to="{name: 'import'}" v-if="isAdmin">
-          <v-list-item-icon>
-            <v-icon>mdi-import</v-icon>
-          </v-list-item-icon>
-          <v-list-item-content>
+        <!--   IMPORT     -->
+        <v-list-group v-if="isAdmin"
+                      prepend-icon="mdi-import"
+                      no-action
+                      v-model="expandImport"
+        >
+          <template v-slot:activator>
             <v-list-item-title>{{ $t('book_import.title') }}</v-list-item-title>
-          </v-list-item-content>
-        </v-list-item>
+          </template>
 
-        <v-list-item :to="{name: 'media-management'}" v-if="isAdmin">
-          <v-list-item-action>
-            <v-icon>mdi-book-cog</v-icon>
-          </v-list-item-action>
-          <v-list-item-content>
+          <v-list-item :to="{name: 'import-books'}">
+            <v-list-item-title>{{ $t('common.books') }}</v-list-item-title>
+          </v-list-item>
+
+          <v-list-item :to="{name: 'import-readlist'}">
+            <v-list-item-title>{{ $t('common.readlist') }}</v-list-item-title>
+          </v-list-item>
+        </v-list-group>
+
+        <!--   MEDIA MANAGEMENT     -->
+        <v-list-group v-if="isAdmin"
+                      no-action
+                      v-model="expandMediaManagement"
+        >
+          <template v-slot:prependIcon>
             <v-badge
               dot
               inline
-              :value="booksToCheck"
+              :value="$store.state.booksToCheck"
               color="accent"
             >
-              <v-list-item-title>{{ $t('media_management.title') }}</v-list-item-title>
+              <v-icon>mdi-book-cog</v-icon>
             </v-badge>
-          </v-list-item-content>
-        </v-list-item>
+          </template>
+          <template v-slot:activator>
+            <v-list-item-title>{{ $t('media_management.title') }}</v-list-item-title>
+          </template>
+
+          <v-list-item :to="{name: 'media-analysis'}">
+            <v-badge
+              dot
+              inline
+              :value="$store.state.booksToCheck"
+              color="accent"
+            >
+              <v-list-item-title>{{ $t('media_analysis.media_analysis') }}</v-list-item-title>
+            </v-badge>
+          </v-list-item>
+
+          <v-list-item :to="{name: 'missing-posters'}">
+            <v-list-item-title>{{ $t('missing_posters.title') }}</v-list-item-title>
+          </v-list-item>
+
+          <v-list-item :to="{name: 'duplicate-files'}">
+            <v-list-item-title>{{ $t('duplicates.title') }}</v-list-item-title>
+          </v-list-item>
+
+          <v-list-group no-action
+                        sub-group
+                        v-model="expandDuplicatePages"
+          >
+            <template v-slot:activator>
+              <v-list-item-title>{{ $t('duplicate_pages.title') }}</v-list-item-title>
+            </template>
+
+            <v-list-item :to="{name: 'settings-duplicate-pages-known'}">
+              <v-list-item-title>{{ $t('duplicate_pages.known') }}</v-list-item-title>
+            </v-list-item>
+
+            <v-list-item :to="{name: 'settings-duplicate-pages-unknown'}">
+              <v-list-item-title>{{ $t('duplicate_pages.new') }}</v-list-item-title>
+            </v-list-item>
+          </v-list-group>
+        </v-list-group>
 
         <v-list-item :to="{name: 'history'}" v-if="isAdmin">
           <v-list-item-icon>
@@ -130,21 +180,59 @@
           </v-list-item-content>
         </v-list-item>
 
-        <v-list-item :to="{name: 'settings'}" v-if="isAdmin">
-          <v-list-item-action>
-            <v-icon>mdi-cog</v-icon>
-          </v-list-item-action>
-          <v-list-item-content>
+        <!--   SETTINGS     -->
+        <v-list-group v-if="isAdmin"
+                      no-action
+                      v-model="expandSettings"
+        >
+          <template v-slot:prependIcon>
             <v-badge
               dot
               inline
               :value="$store.getters.getUnreadAnnouncementsCount()"
+              color="info"
+            >
+              <v-icon>mdi-cog</v-icon>
+            </v-badge>
+          </template>
+          <template v-slot:activator>
+            <v-list-item-title>{{ $t('server_settings.server_settings') }}</v-list-item-title>
+          </template>
+
+          <v-list-item :to="{name: 'settings-users'}">
+            <v-list-item-title>{{ $t('users.users') }}</v-list-item-title>
+          </v-list-item>
+
+          <v-list-item :to="{name: 'settings-server'}">
+            <v-list-item-title>{{ $t('server.tab_title') }}</v-list-item-title>
+          </v-list-item>
+
+          <v-list-item :to="{name: 'metrics'}">
+            <v-list-item-title>{{ $t('metrics.title') }}</v-list-item-title>
+          </v-list-item>
+
+          <v-list-item :to="{name: 'announcements'}">
+            <v-badge
+              dot
+              inline
+              :value="$store.getters.getUnreadAnnouncementsCount()"
+              color="info"
+            >
+              <v-list-item-title>{{ $t('announcements.tab_title') }}</v-list-item-title>
+            </v-badge>
+          </v-list-item>
+
+          <v-list-item :to="{name: 'updates'}">
+            <v-badge
+              dot
+              inline
+              :value="$store.getters.isLatestVersion() == 0"
               color="warning"
             >
-              <v-list-item-title>{{ $t('server_settings.server_settings') }}</v-list-item-title>
+              <v-list-item-title>{{ $t('server.updates') }}</v-list-item-title>
             </v-badge>
-          </v-list-item-content>
-        </v-list-item>
+          </v-list-item>
+        </v-list-group>
 
         <v-list-item :to="{name: 'account'}">
           <v-list-item-action>
@@ -240,6 +328,10 @@ export default Vue.extend({
       LIBRARIES_ALL,
       drawerVisible: this.$vuetify.breakpoint.lgAndUp,
       locales: this.$i18n.availableLocales.map((x: any) => ({text: this.$i18n.t('common.locale_name', x), value: x})),
+      expandSettings: false,
+      expandDuplicatePages: false,
+      expandMediaManagement: false,
+      expandImport: false,
     }
   },
   async created() {
@@ -258,11 +350,14 @@ export default Vue.extend({
       this.$komgaReleases.getReleases()
         .then(x => this.$store.commit('setReleases', x))
     }
+    this.checkRoute(this.$route)
+  },
+  watch: {
+    $route(to, from) {
+      this.checkRoute(to)
+    },
   },
   computed: {
-    booksToCheck(): number {
-      return this.$store.state.booksToCheck
-    },
     taskCount(): number {
       return this.$store.state.komgaSse.taskCount
     },
@@ -316,6 +411,12 @@ export default Vue.extend({
     },
   },
   methods: {
+    checkRoute(to) {
+      this.expandSettings = to.path.includes('/settings/')
+      this.expandMediaManagement = to.path.includes('/media-management/')
+      this.expandImport = to.path.includes('/import/')
+      this.expandDuplicatePages = to.path.includes('/duplicate-pages/')
+    },
     toggleDrawer() {
       this.drawerVisible = !this.drawerVisible
     },

komga-webui/src/views/ImportHolder.vue

@@ -1,17 +0,0 @@
-<template>
-  <div>
-    <v-tabs grow>
-      <v-tab :to="{name: 'import-books'}">{{ $t('common.books') }}</v-tab>
-      <v-tab :to="{name: 'import-readlist'}">{{ $t('common.readlist') }}</v-tab>
-    </v-tabs>
-    <router-view/>
-  </div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue'
-
-export default Vue.extend({
-  name: 'ImportHolder',
-})
-</script>

komga-webui/src/views/MediaManagement.vue

@@ -1,36 +0,0 @@
-<template>
-  <div>
-    <v-tabs grow>
-      <v-tab :to="{name: 'media-analysis'}">
-        <v-badge
-          dot
-          :value="booksToCheck"
-          color="accent"
-        >
-          {{ $t('media_analysis.media_analysis') }}
-        </v-badge>
-      </v-tab>
-      <v-tab :to="{name: 'missing-posters'}">{{ $t('missing_posters.title') }}</v-tab>
-      <v-tab :to="{name: 'duplicate-files'}">{{ $t('duplicates.title') }}</v-tab>
-      <v-tab :to="{name: 'duplicate-pages'}">{{ $t('duplicate_pages.title') }}</v-tab>
-    </v-tabs>
-    <router-view/>
-  </div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue'
-
-export default Vue.extend({
-  name: 'MediaManagement',
-  computed: {
-    booksToCheck(): number {
-      return this.$store.state.booksToCheck
-    },
-  },
-})
-</script>
-
-<style scoped>
-
-</style>

komga-webui/src/views/SettingsHolder.vue

@@ -1,36 +0,0 @@
-<template>
-  <div>
-    <v-tabs grow>
-      <v-tab :to="{name: 'settings-users'}">{{ $t('users.users') }}</v-tab>
-      <v-tab :to="{name: 'settings-server'}">{{ $t('server.tab_title') }}</v-tab>
-      <v-tab :to="{name: 'metrics'}">{{ $t('metrics.title') }}</v-tab>
-      <v-tab :to="{name: 'announcements'}">
-        <v-badge
-          dot
-          :value="$store.getters.getUnreadAnnouncementsCount()"
-          color="warning"
-        >{{ $t('announcements.tab_title') }}</v-badge>
-      </v-tab>
-      <v-tab :to="{name: 'updates'}">
-        <v-badge
-          dot
-          :value="$store.getters.isLatestVersion() == 0"
-          color="warning"
-        >{{ $t('server.updates') }}</v-badge>
-      </v-tab>
-    </v-tabs>
-    <router-view/>
-  </div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue'
-
-export default Vue.extend({
-  name: 'SettingsHolder',
-})
-</script>
-
-<style scoped>
-
-</style>