feat(webui): add ability to pin/unpin libraries

Closes: #1560

Author: gotson

komga-webui/src/components/LibraryNavigation.vue

@@ -80,6 +80,7 @@
 import Vue from 'vue'
 import {COLLECTION_ADDED, COLLECTION_DELETED, READLIST_ADDED, READLIST_DELETED} from '@/types/events'
 import {LIBRARIES_ALL} from '@/types/library'
+import {LibraryDto} from '@/types/komga-libraries'
 
 export default Vue.extend({
   name: 'LibraryNavigation',
@@ -107,6 +108,14 @@ export default Vue.extend({
       },
       immediate: true,
     },
+    '$store.getters.getLibrariesPinned': {
+      handler(val) {
+        if (this.libraryId === LIBRARIES_ALL) {
+          this.loadCollectionCounts(this.libraryId)
+          this.loadReadListCounts(this.libraryId)
+        }
+      },
+    },
   },
   created() {
     this.$eventHub.$on(COLLECTION_ADDED, this.collectionAdded)
@@ -142,12 +151,12 @@ export default Vue.extend({
       if(this.collectionsCount === 1) this.loadCollectionCounts(this.libraryId)
     },
     async loadCollectionCounts(libraryId: string) {
-      const lib = libraryId !== LIBRARIES_ALL ? [libraryId] : undefined
+      const lib = libraryId !== LIBRARIES_ALL ? [libraryId] : this.$store.getters.getLibrariesPinned.map((it: LibraryDto) => it.id)
       this.$komgaCollections.getCollections(lib, {size: 0})
       .then(v => this.collectionsCount = v.totalElements)
     },
     async loadReadListCounts(libraryId: string) {
-      const lib = libraryId !== LIBRARIES_ALL ? [libraryId] : undefined
+      const lib = libraryId !== LIBRARIES_ALL ? [libraryId] : this.$store.getters.getLibrariesPinned.map((it: LibraryDto) => it.id)
       await this.$komgaReadLists.getReadLists(lib, {size: 0})
         .then(v => this.readListsCount = v.totalElements)
     },

komga-webui/src/components/dialogs/CollectionEditDialog.vue

@@ -100,7 +100,6 @@
 import {UserRoles} from '@/types/enum-users'
 import Vue from 'vue'
 import {ERROR, ErrorEvent} from '@/types/events'
-import {LibraryDto} from '@/types/komga-libraries'
 import ThumbnailCard from '@/components/ThumbnailCard.vue'
 import DropZone from '@/components/DropZone.vue'
 
@@ -152,9 +151,6 @@ export default Vue.extend({
     },
   },
   computed: {
-    libraries(): LibraryDto[] {
-      return this.$store.state.komgaLibraries.libraries
-    },
     getErrorsName(): string {
       if (this.form.name === '') return this.$t('common.required').toString()
       if (this.form.name?.toLowerCase() !== this.collection.name?.toLowerCase() && this.collections.some(e => e.name.toLowerCase() === this.form.name.toLowerCase())) {

komga-webui/src/components/dialogs/ReadListEditDialog.vue

@@ -113,7 +113,6 @@
 import {UserRoles} from '@/types/enum-users'
 import Vue from 'vue'
 import {ERROR, ErrorEvent} from '@/types/events'
-import {LibraryDto} from '@/types/komga-libraries'
 import DropZone from '@/components/DropZone.vue'
 import ThumbnailCard from '@/components/ThumbnailCard.vue'
 import {ReadListDto, ReadListThumbnailDto, ReadListUpdateDto} from '@/types/komga-readlists'
@@ -167,9 +166,6 @@ export default Vue.extend({
     },
   },
   computed: {
-    libraries(): LibraryDto[] {
-      return this.$store.state.komgaLibraries.libraries
-    },
     getErrorsName(): string {
       if (this.form.name === '') return this.$t('common.required').toString()
       if (this.form.name?.toLowerCase() !== this.readList.name?.toLowerCase() && this.readLists.some(e => e.name.toLowerCase() === this.form.name.toLowerCase())) {

komga-webui/src/components/dialogs/UserEditDialog.vue

@@ -43,7 +43,6 @@
 import {UserRoles} from '@/types/enum-users'
 import Vue from 'vue'
 import {ERROR} from '@/types/events'
-import {LibraryDto} from '@/types/komga-libraries'
 import {UserDto, UserUpdateDto} from '@/types/komga-users'
 
 export default Vue.extend({
@@ -79,9 +78,6 @@ export default Vue.extend({
         value: x,
       }))
     },
-    libraries(): LibraryDto[] {
-      return this.$store.state.komgaLibraries.libraries
-    },
   },
   methods: {
     dialogReset(user: UserDto) {

komga-webui/src/components/dialogs/UserRestrictionsEditDialog.vue

@@ -188,7 +188,7 @@ export default Vue.extend({
   },
   computed: {
     libraries(): LibraryDto[] {
-      return this.$store.state.komgaLibraries.libraries
+      return this.$store.getters.getLibraries
     },
     ageRestrictionsAvailable(): any[] {
       return [

komga-webui/src/components/menus/LibraryActionsMenu.vue

@@ -1,32 +1,40 @@
 <template>
   <div>
-    <v-menu offset-y v-if="isAdmin">
+    <v-menu offset-y>
       <template v-slot:activator="{ on }">
         <v-btn icon v-on="on" @click.prevent="">
           <v-icon>mdi-dots-vertical</v-icon>
         </v-btn>
       </template>
       <v-list dense>
-        <v-list-item @click="scan(false)">
+        <v-list-item v-if="!library.unpinned" @click="unpin">
+          <v-list-item-title>{{ $t('menu.unpin') }}</v-list-item-title>
+        </v-list-item>
+        <v-list-item v-if="library.unpinned" @click="pin">
+          <v-list-item-title>{{ $t('menu.pin') }}</v-list-item-title>
+        </v-list-item>
+        <v-list-item @click="scan(false)" v-if="isAdmin">
           <v-list-item-title>{{ $t('menu.scan_library_files') }}</v-list-item-title>
         </v-list-item>
-        <v-list-item @click="scan(true)" class="list-warning">
+        <v-list-item @click="scan(true)" class="list-warning" v-if="isAdmin">
           <v-list-item-title>{{ $t('menu.scan_library_files_deep') }}</v-list-item-title>
         </v-list-item>
-        <v-list-item @click="confirmAnalyzeModal = true">
+        <v-list-item @click="confirmAnalyzeModal = true" v-if="isAdmin">
           <v-list-item-title>{{ $t('menu.analyze') }}</v-list-item-title>
         </v-list-item>
-        <v-list-item @click="confirmRefreshMetadataModal = true">
+        <v-list-item @click="confirmRefreshMetadataModal = true" v-if="isAdmin">
           <v-list-item-title>{{ $t('menu.refresh_metadata') }}</v-list-item-title>
         </v-list-item>
-        <v-list-item @click="confirmEmptyTrash = true">
+        <v-list-item @click="confirmEmptyTrash = true" v-if="isAdmin">
           <v-list-item-title>{{ $t('menu.empty_trash') }}</v-list-item-title>
         </v-list-item>
-        <v-list-item @click="edit">
+        <v-list-item @click="edit" v-if="isAdmin">
           <v-list-item-title>{{ $t('menu.edit') }}</v-list-item-title>
         </v-list-item>
         <v-list-item @click="promptDeleteLibrary"
-                     class="list-danger">
+                     class="list-danger"
+                     v-if="isAdmin"
+        >
           <v-list-item-title>{{ $t('menu.delete') }}</v-list-item-title>
         </v-list-item>
       </v-list>
@@ -61,6 +69,7 @@
 import Vue from 'vue'
 import ConfirmationDialog from '@/components/dialogs/ConfirmationDialog.vue'
 import {LibraryDto} from '@/types/komga-libraries'
+import {ClientSettingLibraryUpdate} from '@/types/komga-clientsettings'
 
 export default Vue.extend({
   name: 'LibraryActionsMenu',
@@ -84,6 +93,22 @@ export default Vue.extend({
     },
   },
   methods: {
+    unpin() {
+      this.$store.dispatch('updateLibrarySetting', {
+        libraryId: this.library.id,
+        patch: {
+          unpinned: true,
+        },
+      } as ClientSettingLibraryUpdate)
+    },
+    pin() {
+      this.$store.dispatch('updateLibrarySetting', {
+        libraryId: this.library.id,
+        patch: {
+          unpinned: false,
+        },
+      } as ClientSettingLibraryUpdate)
+    },
     scan(scanDeep: boolean) {
       this.$komgaLibraries.scanLibrary(this.library, scanDeep)
     },

komga-webui/src/locales/en.json

@@ -248,6 +248,7 @@
     "locale_rtl": "false",
     "lock_all": "Lock all",
     "media": "Media",
+    "more": "More",
     "n_selected": "{count} selected",
     "nothing_to_show": "Nothing to show",
     "ok": "OK",
@@ -261,6 +262,7 @@
     "password": "Password",
     "pdf": "PDF",
     "pending_tasks": "No pending tasks | 1 pending task | {count} pending tasks",
+    "pinned_libraries": "Pinned Libraries",
     "publisher": "Publisher",
     "read": "Read",
     "read_on": "Read on {date}",
@@ -892,10 +894,12 @@
     "empty_trash": "Empty trash",
     "mark_read": "Mark as read",
     "mark_unread": "Mark as unread",
+    "pin": "Pin",
     "refresh_metadata": "Refresh metadata",
     "scan_library_files": "Scan library files",
     "scan_library_files_deep": "Scan library files (deep)",
-    "select_all": "Select all"
+    "select_all": "Select all",
+    "unpin": "Unpin"
   },
   "metrics": {
     "library_books": "Books per library",
@@ -914,6 +918,10 @@
     "libraries": "Libraries",
     "logout": "Log Out"
   },
+  "no_libraries_pinned": {
+    "title": "No pinned libraries",
+    "subtitle": "You can pin a library from the 3-dots menu"
+  },
   "page_not_found": {
     "go_back_to_home_page": "Go back to home page",
     "page_does_not_exist": "The page you are looking for doesn't exist.",

komga-webui/src/main.ts

@@ -59,6 +59,7 @@ Vue.use(Chartkick.use(Chart))
 
 Vue.use(httpPlugin)
 Vue.use(logger)
+Vue.use(komgaSettings, {store: store, http: Vue.prototype.$http})
 Vue.use(komgaFileSystem, {http: Vue.prototype.$http})
 Vue.use(komgaSeries, {http: Vue.prototype.$http})
 Vue.use(komgaCollections, {http: Vue.prototype.$http})
@@ -80,7 +81,6 @@ Vue.use(komgaMetrics, {http: Vue.prototype.$http})
 Vue.use(komgaHistory, {http: Vue.prototype.$http})
 Vue.use(komgaAnnouncements, {http: Vue.prototype.$http})
 Vue.use(komgaReleases, {http: Vue.prototype.$http})
-Vue.use(komgaSettings, {store: store, http: Vue.prototype.$http})
 Vue.use(komgaFonts, {http: Vue.prototype.$http})
 
 Vue.config.productionTip = false

komga-webui/src/plugins/komga-libraries.plugin.ts

@@ -11,35 +11,47 @@ const vuexModule: Module<any, any> = {
     libraries: [] as LibraryDto[],
   },
   getters: {
-    getLibraryById: (state) => (id: number) => {
-      return state.libraries.find((l: any) => l.id === id)
+    getLibraries(state, getters) {
+      const settings = getters.getClientSettingsLibraries
+      return state.libraries
+        .map((it: LibraryDto) => Object.assign({}, it, settings[it.id]))
+        .sort((a: LibraryDto, b: LibraryDto) => a.name.toLowerCase() > b.name.toLowerCase())
+    },
+    getLibraryById: (state, getters) => (id: number) => {
+      return getters.getLibraries.find((l: any) => l.id === id)
+    },
+    getLibrariesPinned(state, getters) {
+      return getters.getLibraries.filter((it: LibraryDto) => !it.unpinned)
+    },
+    getLibrariesUnpinned(state, getters) {
+      return getters.getLibraries.filter((it: LibraryDto) => it.unpinned)
     },
   },
   mutations: {
-    setLibraries (state, libraries) {
+    setLibraries(state, libraries) {
       state.libraries = libraries
     },
   },
   actions: {
-    async getLibraries ({ commit }) {
+    async getLibraries({commit}) {
       commit('setLibraries', await service.getLibraries())
     },
-    async postLibrary ({ dispatch }, library) {
+    async postLibrary({dispatch}, library) {
       await service.postLibrary(library)
     },
-    async updateLibrary ({ dispatch }, { libraryId, library }) {
+    async updateLibrary({dispatch}, {libraryId, library}) {
       await service.updateLibrary(libraryId, library)
     },
-    async deleteLibrary ({ dispatch }, library) {
+    async deleteLibrary({dispatch}, library) {
       await service.deleteLibrary(library)
     },
   },
 }
 
 export default {
-  install (
+  install(
     Vue: typeof _Vue,
-    { store, http }: { store: any, http: AxiosInstance }) {
+    {store, http}: { store: any, http: AxiosInstance }) {
     service = new KomgaLibrariesService(http)
     Vue.prototype.$komgaLibraries = service
 

komga-webui/src/plugins/komga-settings.plugin.ts

@@ -2,7 +2,13 @@ import {AxiosInstance} from 'axios'
 import _Vue from 'vue'
 import KomgaSettingsService from '@/services/komga-settings.service'
 import {Module} from 'vuex'
-import {ClientSettingDto} from '@/types/komga-clientsettings'
+import {
+  CLIENT_SETTING,
+  ClientSettingDto,
+  ClientSettingLibrary,
+  ClientSettingLibraryUpdate,
+  ClientSettingUserUpdateDto,
+} from '@/types/komga-clientsettings'
 
 let service: KomgaSettingsService
 
@@ -15,6 +21,14 @@ const vuexModule: Module<any, any> = {
     getClientSettings(state): Record<string, ClientSettingDto> {
       return {...state.clientSettingsGlobal, ...state.clientSettingsUser}
     },
+    getClientSettingsLibraries(state): Record<string, ClientSettingLibrary> {
+      let settings: Record<string, ClientSettingLibrary> = {}
+      try {
+        settings = JSON.parse(state.clientSettingsUser[CLIENT_SETTING.WEBUI_LIBRARIES]?.value)
+      } catch (e) {
+      }
+      return settings
+    },
   },
   mutations: {
     setClientSettingsGlobal(state, settings) {
@@ -31,6 +45,16 @@ const vuexModule: Module<any, any> = {
     async getClientSettingsUser({commit}) {
       commit('setClientSettingsUser', await service.getClientSettingsUser())
     },
+    async updateLibrarySetting({dispatch, getters}, update: ClientSettingLibraryUpdate) {
+      const all = getters.getClientSettingsLibraries
+      all[update.libraryId] = Object.assign({}, all[update.libraryId], update.patch)
+      const newSettings = {} as Record<string, ClientSettingUserUpdateDto>
+      newSettings[CLIENT_SETTING.WEBUI_LIBRARIES] = {
+        value: JSON.stringify(all),
+      }
+      await service.updateClientSettingUser(newSettings)
+      dispatch('getClientSettingsUser')
+    },
   },
 }
 

komga-webui/src/router.ts

@@ -21,6 +21,14 @@ const noLibraryGuard = (to: any, from: any, next: any) => {
   } else next()
 }
 
+const noLibraryNorPinGuard = (to: any, from: any, next: any) => {
+  if (lStore.state.komgaLibraries.libraries.length === 0) {
+    next({name: 'welcome'})
+  } else if (lStore.getters.getLibrariesPinned.length === 0) {
+    next({name: 'no-pins'})
+  } else next()
+}
+
 const getLibraryRoute = (libraryId: string) => {
   switch ((lStore.getters.getLibraryRoute(libraryId) as LIBRARY_ROUTE)) {
     case LIBRARY_ROUTE.COLLECTIONS:
@@ -57,10 +65,15 @@ const router = new Router({
           name: 'welcome',
           component: () => import(/* webpackChunkName: "welcome" */ './views/WelcomeView.vue'),
         },
+        {
+          path: '/no-pins',
+          name: 'no-pins',
+          component: () => import(/* webpackChunkName: "no-pins" */ './views/NoPinnedLibraries.vue'),
+        },
         {
           path: '/dashboard',
           name: 'dashboard',
-          beforeEnter: noLibraryGuard,
+          beforeEnter: noLibraryNorPinGuard,
           component: () => import(/* webpackChunkName: "dashboard" */ './views/DashboardView.vue'),
         },
         {

komga-webui/src/services/komga-books.service.ts

@@ -53,14 +53,15 @@ export default class KomgaBooksService {
     }
   }
 
-  async getBooksOnDeck(libraryId?: string, pageRequest?: PageRequest): Promise<Page<BookDto>> {
+  async getBooksOnDeck(libraryIds?: string[], pageRequest?: PageRequest): Promise<Page<BookDto>> {
     try {
       const params = {...pageRequest} as any
-      if (libraryId) {
-        params.library_id = libraryId
+      if (libraryIds) {
+        params.library_id = libraryIds
       }
       return (await this.http.get(`${API_BOOKS}/ondeck`, {
         params: params,
+        paramsSerializer: params => qs.stringify(params, {indices: false}),
       })).data
     } catch (e) {
       let msg = 'An error occurred while trying to retrieve books on deck'