From 806f49e061f6eb321b58fefe0a59592260e45b22 Mon Sep 17 00:00:00 2001
From: upsiflu <upsiflu@gmail.com>
Date: Fri, 14 Mar 2025 17:47:05 +0100
Subject: [PATCH] fix(front): errors in Sidebar.vue

---
 front/src/ui/components/Sidebar.vue | 42 ++++++++++++++++++-----------
 1 file changed, 27 insertions(+), 15 deletions(-)

diff --git a/front/src/ui/components/Sidebar.vue b/front/src/ui/components/Sidebar.vue
index c62be7c78..4cf4fbfa3 100644
--- a/front/src/ui/components/Sidebar.vue
+++ b/front/src/ui/components/Sidebar.vue
@@ -5,6 +5,8 @@ import { useI18n } from 'vue-i18n'
 import { useStore } from '~/store'
 import { useModal } from '~/ui/composables/useModal.ts'
 
+import onKeyboardShortcut from '~/composables/onKeyboardShortcut'
+
 import Logo from '~/components/Logo.vue'
 import Input from '~/components/ui/Input.vue'
 import Link from '~/components/ui/Link.vue'
@@ -34,6 +36,15 @@ const uploads = useUploadsStore()
 const logoUrl = computed(() => store.state.auth.authenticated ? 'library.index' : 'index')
 
 const isOpen = ref(false)
+
+
+// Admin notifications
+
+const moderationNotifications = computed(() =>
+  store.state.ui.notifications.pendingReviewEdits
+    + store.state.ui.notifications.pendingReviewReports
+    + store.state.ui.notifications.pendingReviewRequests
+)
 </script>
 
 <template>
@@ -68,12 +79,12 @@ const isOpen = ref(false)
         style="align-items: center;"
       >
         <Popover
-          v-if="$store.state.auth.availablePermissions['settings'] || $store.state.auth.availablePermissions['moderation']"
+          v-if="store.state.auth.availablePermissions['settings'] || store.state.auth.availablePermissions['moderation']"
           v-model="isOpen"
           raised
         >
           <Button
-            v-if="$store.state.auth.availablePermissions['settings'] || $store.state.auth.availablePermissions['moderation']"
+            v-if="store.state.auth.availablePermissions['settings'] || store.state.auth.availablePermissions['moderation']"
             round
             square-small
             ghost
@@ -94,45 +105,45 @@ const isOpen = ref(false)
               :to="{name: 'manage.library.edits', query: {q: 'is_approved:null'}}"
               icon="bi-music-note-beamed"
             >
-              {{ $t('components.Sidebar.link.library') }}
+              {{ t('components.Sidebar.link.library') }}
               <div
-                v-if="$store.state.ui.notifications.pendingReviewEdits > 0"
-                :title="labels.pendingReviewEdits"
+                v-if="store.state.ui.notifications.pendingReviewEdits > 0"
+                :title="t('components.Sidebar.label.edits')"
                 :class="['ui', 'circular', 'mini', 'right floated', 'accent', 'label']"
               >
-                {{ $store.state.ui.notifications.pendingReviewEdits }}
+                {{ store.state.ui.notifications.pendingReviewEdits }}
               </div>
             </PopoverItem>
 
             <PopoverItem
-              v-if="$store.state.auth.availablePermissions['moderation']"
+              v-if="store.state.auth.availablePermissions['moderation']"
               :to="{name: 'manage.moderation.reports.list', query: {q: 'resolved:no'}}"
               icon="bi-megaphone-fill"
             >
-              {{ $t('components.Sidebar.link.moderation') }}
+              {{ t('components.Sidebar.link.moderation') }}
               <div
-                v-if="$store.state.ui.notifications.pendingReviewReports + $store.state.ui.notifications.pendingReviewRequests > 0"
-                :title="labels.pendingReviewReports"
+                v-if="store.state.ui.notifications.pendingReviewReports + store.state.ui.notifications.pendingReviewRequests > 0"
+                :title="t('components.Sidebar.label.reports')"
                 :class="['ui', 'circular', 'mini', 'right floated', 'accent', 'label']"
               >
-                {{ $store.state.ui.notifications.pendingReviewReports + $store.state.ui.notifications.pendingReviewRequests }}
+                {{ store.state.ui.notifications.pendingReviewReports + store.state.ui.notifications.pendingReviewRequests }}
               </div>
             </PopoverItem>
 
             <PopoverItem
-              v-if="$store.state.auth.availablePermissions['settings']"
+              v-if="store.state.auth.availablePermissions['settings']"
               :to="{name: 'manage.users.users.list'}"
               icon="bi-people-fill"
             >
-              {{ $t('components.Sidebar.link.users') }}
+              {{ t('components.Sidebar.link.users') }}
             </PopoverItem>
 
             <PopoverItem
-              v-if="$store.state.auth.availablePermissions['settings']"
+              v-if="store.state.auth.availablePermissions['settings']"
               :to="{path: '/manage/settings'}"
               icon="bi-wrench"
             >
-              {{ $t('components.Sidebar.link.settings') }}
+              {{ t('components.Sidebar.link.settings') }}
             </PopoverItem>
           </template>
         </Popover>
@@ -178,6 +189,7 @@ const isOpen = ref(false)
       :class="[$style['menu-links'], isCollapsed && 'hide-on-mobile']"
     >
       <Input
+        ref="search"
         v-model="searchParameter"
         raised
         autocomplete="search"