From 4892945ddfc603bb3350b668010062beea51ac71 Mon Sep 17 00:00:00 2001
From: Gauthier Roebroeck <gauthier.roebroeck@gmail.com>
Date: Thu, 6 Feb 2025 11:39:01 +0800
Subject: [PATCH] feat(webui): add user setting to blur unread posters

Closes: #1549
---
 komga-webui/src/components/ItemCard.vue       | 15 +++
 komga-webui/src/locales/en.json               |  1 +
 .../src/plugins/komga-settings.plugin.ts      |  4 +-
 komga-webui/src/router.ts                     |  5 +
 komga-webui/src/types/komga-clientsettings.ts |  3 +-
 komga-webui/src/views/HomeView.vue            |  4 +
 komga-webui/src/views/LoginView.vue           |  3 +-
 komga-webui/src/views/StartupView.vue         |  3 +-
 komga-webui/src/views/UISettings.vue          | 23 +----
 komga-webui/src/views/UIUserSettings.vue      | 99 +++++++++++++++++++
 10 files changed, 136 insertions(+), 24 deletions(-)
 create mode 100644 komga-webui/src/views/UIUserSettings.vue

diff --git a/komga-webui/src/components/ItemCard.vue b/komga-webui/src/components/ItemCard.vue
index 038855011..ec8716791 100644
--- a/komga-webui/src/components/ItemCard.vue
+++ b/komga-webui/src/components/ItemCard.vue
@@ -14,6 +14,7 @@
           aspect-ratio="0.7071"
           :contain="!isStretch"
           :position="isStretch ? 'top' : undefined"
+          :class="shouldBlurPoster ? 'blur' : undefined"
           @error="thumbnailError = true"
           @load="thumbnailError = false"
         >
@@ -277,6 +278,12 @@ export default Vue.extend({
     isStretch(): boolean {
       return this.$store.getters.getClientSettings[CLIENT_SETTING.WEBUI_POSTER_STRETCH]?.value === 'true'
     },
+    isBlurUnread(): boolean {
+      return this.$store.getters.getClientSettings[CLIENT_SETTING.WEBUI_POSTER_BLUR_UNREAD]?.value === 'true'
+    },
+    shouldBlurPoster(): boolean | undefined {
+      return (this.isUnread || this.allUnread) && this.isBlurUnread
+    },
     canReadPages(): boolean {
       return this.$store.getters.mePageStreaming && this.computedItem.type() === ItemTypes.BOOK
     },
@@ -317,6 +324,10 @@ export default Vue.extend({
       if (this.computedItem.type() === ItemTypes.SERIES) return (this.item as SeriesDto).booksUnreadCount + (this.item as SeriesDto).booksInProgressCount
       return undefined
     },
+    allUnread(): boolean | undefined {
+      if (this.computedItem.type() === ItemTypes.SERIES) return (this.item as SeriesDto).booksCount == (this.item as SeriesDto).booksUnreadCount
+      return undefined
+    },
     readProgressPercentage(): number {
       if (this.computedItem.type() === ItemTypes.BOOK) return getReadProgressPercentage(this.item as BookDto)
       return 0
@@ -385,6 +396,10 @@ export default Vue.extend({
 </script>
 
 <style>
+.blur > .v-image__image {
+  filter: blur(5px);
+}
+
 .no-link {
   cursor: default;
 }
diff --git a/komga-webui/src/locales/en.json b/komga-webui/src/locales/en.json
index ced9e7716..5dcd59bc5 100644
--- a/komga-webui/src/locales/en.json
+++ b/komga-webui/src/locales/en.json
@@ -1027,6 +1027,7 @@
   "ui_settings": {
     "label_oauth2_auto_login": "Automatic OAuth2 login",
     "label_oauth2_hide_login": "Hide login fields if OAuth2 is enabled",
+    "label_poster_blur_unread": "Blur poster for unread books and series",
     "label_poster_stretch": "Stretch poster to fit card",
     "tooltip_oauth2_auto_login": "Requires a single OAuth2 provider, and 'hide login fields' enabled"
   },
diff --git a/komga-webui/src/plugins/komga-settings.plugin.ts b/komga-webui/src/plugins/komga-settings.plugin.ts
index 385fed83c..f09f1d01e 100644
--- a/komga-webui/src/plugins/komga-settings.plugin.ts
+++ b/komga-webui/src/plugins/komga-settings.plugin.ts
@@ -25,8 +25,10 @@ const vuexModule: Module<any, any> = {
     },
   },
   actions: {
-    async getClientSettings({commit}) {
+    async getClientSettingsGlobal({commit}) {
       commit('setClientSettingsGlobal', await service.getClientSettingsGlobal())
+    },
+    async getClientSettingsUser({commit}) {
       commit('setClientSettingsUser', await service.getClientSettingsUser())
     },
   },
diff --git a/komga-webui/src/router.ts b/komga-webui/src/router.ts
index c427af9ac..33ef05415 100644
--- a/komga-webui/src/router.ts
+++ b/komga-webui/src/router.ts
@@ -151,6 +151,11 @@ const router = new Router({
           name: 'account-api-keys',
           component: () => import(/* webpackChunkName: "account-api-keys" */ './views/ApiKeys.vue'),
         },
+        {
+          path: '/account/settings-ui',
+          name: 'account-settings-ui',
+          component: () => import(/* webpackChunkName: "account-settings-ui" */ './views/UIUserSettings.vue'),
+        },
         {
           path: '/account/authentication-activity',
           name: 'account-activity',
diff --git a/komga-webui/src/types/komga-clientsettings.ts b/komga-webui/src/types/komga-clientsettings.ts
index 1bad31c71..f8d1e08ff 100644
--- a/komga-webui/src/types/komga-clientsettings.ts
+++ b/komga-webui/src/types/komga-clientsettings.ts
@@ -15,5 +15,6 @@ export interface ClientSettingUserUpdateDto {
 export enum CLIENT_SETTING {
   WEBUI_OAUTH2_HIDE_LOGIN = 'webui.oauth2.hide_login',
   WEBUI_OAUTH2_AUTO_LOGIN = 'webui.oauth2.auto_login',
-  WEBUI_POSTER_STRETCH = 'webui.poster.stretch'
+  WEBUI_POSTER_STRETCH = 'webui.poster.stretch',
+  WEBUI_POSTER_BLUR_UNREAD = 'webui.poster.blur_unread',
 }
diff --git a/komga-webui/src/views/HomeView.vue b/komga-webui/src/views/HomeView.vue
index 487038430..b6f5f07de 100644
--- a/komga-webui/src/views/HomeView.vue
+++ b/komga-webui/src/views/HomeView.vue
@@ -258,6 +258,10 @@
             <v-list-item-title>{{ $t('users.api_keys') }}</v-list-item-title>
           </v-list-item>
 
+          <v-list-item :to="{name: 'account-settings-ui'}">
+            <v-list-item-title>{{ $t('common.ui') }}</v-list-item-title>
+          </v-list-item>
+
           <v-list-item :to="{name: 'account-activity'}">
             <v-list-item-title>{{ $t('users.authentication_activity') }}</v-list-item-title>
           </v-list-item>
diff --git a/komga-webui/src/views/LoginView.vue b/komga-webui/src/views/LoginView.vue
index 67d8cf940..43585d6a4 100644
--- a/komga-webui/src/views/LoginView.vue
+++ b/komga-webui/src/views/LoginView.vue
@@ -300,7 +300,8 @@ export default Vue.extend({
             })
 
           await this.$store.dispatch('getLibraries')
-          await this.$store.dispatch('getClientSettings')
+          await this.$store.dispatch('getClientSettingsGlobal')
+          await this.$store.dispatch('getClientSettingsUser')
 
           if (this.$route.query.redirect) {
             await this.$router.push({path: this.$route.query.redirect.toString()})
diff --git a/komga-webui/src/views/StartupView.vue b/komga-webui/src/views/StartupView.vue
index 7f1c6966a..e1d011ee3 100644
--- a/komga-webui/src/views/StartupView.vue
+++ b/komga-webui/src/views/StartupView.vue
@@ -42,7 +42,8 @@ export default Vue.extend({
 
       await this.$store.dispatch('getMe')
       await this.$store.dispatch('getLibraries')
-      await this.$store.dispatch('getClientSettings')
+      await this.$store.dispatch('getClientSettingsGlobal')
+      await this.$store.dispatch('getClientSettingsUser')
       this.$router.back()
     } catch (e) {
       this.$router.push({name: 'login', query: {redirect: this.$route.query.redirect}})
diff --git a/komga-webui/src/views/UISettings.vue b/komga-webui/src/views/UISettings.vue
index 389d41f1b..a9df6dcfd 100644
--- a/komga-webui/src/views/UISettings.vue
+++ b/komga-webui/src/views/UISettings.vue
@@ -8,6 +8,7 @@
           :label="$t('ui_settings.label_oauth2_hide_login')"
           hide-details
         />
+
         <v-checkbox
           v-model="form.oauth2AutoLogin"
           @change="$v.form.oauth2AutoLogin.$touch()"
@@ -24,15 +25,7 @@
               {{ $t('ui_settings.tooltip_oauth2_auto_login') }}
             </v-tooltip>
           </template>
-
         </v-checkbox>
-
-        <v-checkbox
-          v-model="form.posterStretch"
-          @change="$v.form.posterStretch.$touch()"
-          :label="$t('ui_settings.label_poster_stretch')"
-          hide-details
-        />
       </v-col>
     </v-row>
     <v-row>
@@ -57,7 +50,7 @@
 import Vue from 'vue'
 import ConfirmationDialog from '@/components/dialogs/ConfirmationDialog.vue'
 import FileBrowserDialog from '@/components/dialogs/FileBrowserDialog.vue'
-import {CLIENT_SETTING, ClientSettingDto, ClientSettingGlobalUpdateDto} from '@/types/komga-clientsettings'
+import {CLIENT_SETTING, ClientSettingGlobalUpdateDto} from '@/types/komga-clientsettings'
 
 export default Vue.extend({
   name: 'UISettings',
@@ -66,15 +59,12 @@ export default Vue.extend({
     form: {
       oauth2HideLogin: false,
       oauth2AutoLogin: false,
-      posterStretch: false,
     },
-    existingSettings: [] as ClientSettingDto[],
   }),
   validations: {
     form: {
       oauth2HideLogin: {},
       oauth2AutoLogin: {},
-      posterStretch: {},
     },
   },
   mounted() {
@@ -90,10 +80,9 @@ export default Vue.extend({
   },
   methods: {
     async refreshSettings() {
-      await this.$store.dispatch('getClientSettings')
+      await this.$store.dispatch('getClientSettingsGlobal')
       this.form.oauth2HideLogin = this.$store.state.komgaSettings.clientSettingsGlobal[CLIENT_SETTING.WEBUI_OAUTH2_HIDE_LOGIN]?.value === 'true'
       this.form.oauth2AutoLogin = this.$store.state.komgaSettings.clientSettingsGlobal[CLIENT_SETTING.WEBUI_OAUTH2_AUTO_LOGIN]?.value === 'true'
-      this.form.posterStretch = this.$store.state.komgaSettings.clientSettingsGlobal[CLIENT_SETTING.WEBUI_POSTER_STRETCH]?.value === 'true'
       this.$v.form.$reset()
     },
     async saveSettings() {
@@ -110,12 +99,6 @@ export default Vue.extend({
           allowUnauthorized: true,
         }
 
-      if (this.$v.form?.posterStretch?.$dirty)
-        newSettings[CLIENT_SETTING.WEBUI_POSTER_STRETCH] = {
-          value: this.form.posterStretch ? 'true' : 'false',
-          allowUnauthorized: false,
-        }
-
       await this.$komgaSettings.updateClientSettingGlobal(newSettings)
 
       await this.refreshSettings()
diff --git a/komga-webui/src/views/UIUserSettings.vue b/komga-webui/src/views/UIUserSettings.vue
new file mode 100644
index 000000000..41db728e3
--- /dev/null
+++ b/komga-webui/src/views/UIUserSettings.vue
@@ -0,0 +1,99 @@
+<template>
+  <v-container fluid class="pa-6">
+    <v-row>
+      <v-col cols="auto">
+        <v-checkbox
+          v-model="form.posterStretch"
+          @change="$v.form.posterStretch.$touch()"
+          :label="$t('ui_settings.label_poster_stretch')"
+          hide-details
+        />
+
+        <v-checkbox
+          v-model="form.posterBlurUnread"
+          @change="$v.form.posterBlurUnread.$touch()"
+          :label="$t('ui_settings.label_poster_blur_unread')"
+          hide-details
+        />
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col cols="auto">
+        <v-btn @click="refreshSettings"
+               :disabled="discardDisabled"
+        >{{ $t('common.discard') }}
+        </v-btn>
+      </v-col>
+      <v-col cols="auto">
+        <v-btn color="primary"
+               :disabled="saveDisabled"
+               @click="saveSettings"
+        >{{ $t('common.save_changes') }}
+        </v-btn>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import ConfirmationDialog from '@/components/dialogs/ConfirmationDialog.vue'
+import FileBrowserDialog from '@/components/dialogs/FileBrowserDialog.vue'
+import {CLIENT_SETTING, ClientSettingUserUpdateDto} from '@/types/komga-clientsettings'
+
+export default Vue.extend({
+  name: 'UIUserSettings',
+  components: {FileBrowserDialog, ConfirmationDialog},
+  data: () => ({
+    form: {
+      posterStretch: false,
+      posterBlurUnread: false,
+    },
+  }),
+  validations: {
+    form: {
+      posterStretch: {},
+      posterBlurUnread: {},
+    },
+  },
+  mounted() {
+    this.refreshSettings()
+  },
+  computed: {
+    saveDisabled(): boolean {
+      return this.$v.form.$invalid || !this.$v.form.$anyDirty
+    },
+    discardDisabled(): boolean {
+      return !this.$v.form.$anyDirty
+    },
+  },
+  methods: {
+    async refreshSettings() {
+      await this.$store.dispatch('getClientSettingsUser')
+      this.form.posterStretch = this.$store.state.komgaSettings.clientSettingsUser[CLIENT_SETTING.WEBUI_POSTER_STRETCH]?.value === 'true'
+      this.form.posterBlurUnread = this.$store.state.komgaSettings.clientSettingsUser[CLIENT_SETTING.WEBUI_POSTER_BLUR_UNREAD]?.value === 'true'
+      this.$v.form.$reset()
+    },
+    async saveSettings() {
+      let newSettings = {} as Record<string, ClientSettingUserUpdateDto>
+
+      if (this.$v.form?.posterStretch?.$dirty)
+        newSettings[CLIENT_SETTING.WEBUI_POSTER_STRETCH] = {
+          value: this.form.posterStretch ? 'true' : 'false',
+        }
+      if (this.$v.form?.posterBlurUnread?.$dirty)
+        newSettings[CLIENT_SETTING.WEBUI_POSTER_BLUR_UNREAD] = {
+          value: this.form.posterBlurUnread ? 'true' : 'false',
+        }
+
+      await this.$komgaSettings.updateClientSettingUser(newSettings)
+
+      await this.refreshSettings()
+    },
+  },
+})
+</script>
+
+<style scoped>
+
+</style>