feat(ui): Popover icon prop

front/src/components/library/AlbumDropdown.vue

@@ -94,57 +94,60 @@ const open = ref(false)
       <template #items>
       <PopoverItem
           v-if="domain != store.getters['instance/domain']"
-          :href="object.fid"
+          :to="object.fid"
+          icon="bi-box-arrow-up-right"
           target="_blank"
         >
-          <i class="bi bi-box-arrow-up-right" />
           {{ t('components.library.AlbumDropdown.link.domain') }}
         </PopoverItem>
 
         <PopoverItem
           v-if="isEmbedable"
           @click="showEmbedModal = !showEmbedModal"
+          icon="bi-code"
         >
-          <i class="bi bi-code" />
           {{ t('components.library.AlbumDropdown.button.embed') }}
         </PopoverItem>
 
         <PopoverItem
           v-if="isAlbum && musicbrainzUrl"
-          :href="musicbrainzUrl"
+          :to="musicbrainzUrl"
+          icon="bi-box-arrow-up-right"
           target="_blank"
           rel="noreferrer noopener"
         >
-          <i class="bi bi-box-arrow-up-right" />
           {{ t('components.library.AlbumDropdown.link.musicbrainz') }}
         </PopoverItem>
 
         <PopoverItem
           v-if="!isChannel && isAlbum"
-          :href="discogsUrl"
+          :to="discogsUrl"
+          icon="bi-box-arrow-up-right"
           target="_blank"
           rel="noreferrer noopener"
         >
-          <i class="bi bi-box-arrow-up-right" />
           {{ t('components.library.AlbumDropdown.link.discogs') }}
         </PopoverItem>
 
         <PopoverItem
           v-if="object.is_local"
           :to="{ name: 'library.albums.edit', params: { id: object.id } }"
+          icon="bi-pencil"
         >
-          <i class="bi bi-pencil" />
           {{ t('components.library.AlbumDropdown.button.edit') }}
         </PopoverItem>
 
         <PopoverItem
-          v-if="artistCredit[0] && store.state.auth.authenticated && artistCredit[0].artist.channel && artistCredit[0].artist.attributed_to?.full_username === store.state.auth.fullUsername"
+          v-if="artistCredit[0] &&
+                 store.state.auth.authenticated &&
+                 artistCredit[0].artist.channel &&
+                 artistCredit[0].artist.attributed_to?.full_username === store.state.auth.fullUsername"
         >
           <DangerousButton
             :is-loading="isLoading"
             @confirm="remove()"
+            icon="bi-trash"
           >
-            <i class="bi bi-trash" />
             {{ t('components.library.AlbumDropdown.button.delete') }}
           </DangerousButton>
         </PopoverItem>
@@ -152,11 +155,14 @@ const open = ref(false)
         <hr>
 
         <PopoverItem
-          v-for="obj in getReportableObjects({album: object, channel: artistCredit[0]?.artist.channel})"
+          v-for="obj in getReportableObjects({
+            album: object,
+            channel: artistCredit[0]?.artist.channel
+          })"
           :key="obj.target.type + obj.target.id"
           @click="report(obj)"
+          icon="bi-flag"
         >
-          <i class="bi bi-flag" />
           {{ obj.label }}
         </PopoverItem>
 
@@ -164,19 +170,22 @@ const open = ref(false)
 
         <PopoverItem
           v-if="store.state.auth.availablePermissions['library']"
-          :to="{name: 'manage.library.albums.detail', params: {id: object.id}}"
+          :to="{
+            name: 'manage.library.albums.detail',
+            params: { id: object.id }
+          }"
+          icon="bi-wrench"
         >
-          <i class="bi bi-wrench" />
           {{ t('components.library.AlbumDropdown.link.moderation') }}
         </PopoverItem>
 
         <PopoverItem
-          v-if="store.state.auth.profile && store.state.auth.profile?.is_superuser"
+          v-if="store.state.auth.profile?.is_superuser"
-          :href="store.getters['instance/absoluteUrl'](`/api/admin/music/album/${object.id}`)"
+          :to="store.getters['instance/absoluteUrl'](`/api/admin/music/album/${object.id}`)"
+          icon="bi-wrench"
           target="_blank"
           rel="noopener noreferrer"
         >
-          <i class="bi bi-wrench" />
           {{ t('components.library.AlbumDropdown.link.django') }}
         </PopoverItem>
       </template>

front/src/components/ui/popover/PopoverItem.vue

@@ -10,6 +10,7 @@ const emit = defineEmits<{'internal:id': [value: number]}>()
 const { parentPopoverContext, to } = defineProps<{
   parentPopoverContext?: PopoverContext;
   to?:RouterLinkProps['to'];
+  icon?: string;
 }>()
 const { items, hoveredItem } = parentPopoverContext ?? inject(POPOVER_CONTEXT_INJECTION_KEY, {
   items: ref(0),
@@ -26,6 +27,7 @@ emit('internal:id', id)
     class="popover-item"
     target="_blank"
   >
+    <i v-if="icon" :class="['bi', icon]" />
     <slot />
 
     <div class="after" />
@@ -34,6 +36,7 @@ emit('internal:id', id)
   <RouterLink v-else-if="to"
     :to="to"
     class="popover-item"
+    :icon="icon"
     @mouseover="hoveredItem = id"
   >
     <slot />
@@ -49,6 +52,7 @@ emit('internal:id', id)
       textAlign: left;
       gap: 8px;
     "
+    :icon="icon"
     @mouseover="hoveredItem = id"
     class="popover-item"
   >

front/ui-docs/components/ui/popover.md

@@ -359,6 +359,37 @@ const open = ref(false)
   </template>
 </Popover>
 
+### Icon Prop
+
+PopoverItem supports an `icon` prop to easily add icons to menu items. The icon prop accepts standard Bootstrap icon classes.
+
+| Prop   | Data type | Required? | Description                                     |
+|--------|-----------|-----------|------------------------------------------------|
+| `icon` | String    | No        | Bootstrap icon class to display before the item |
+
+```vue-html
+<PopoverItem icon="bi-music-note-list">
+  Play next
+</PopoverItem>
+
+<PopoverItem icon="right bi-share">
+  Share
+</PopoverItem>
+```
+
+<Popover v-model:open="isOpen">
+  <OptionsButton @click="isOpen = !isOpen" />
+  <template #items>
+    <PopoverItem icon="bi-music-note-list">
+      Play next
+    </PopoverItem>
+    <PopoverItem icon="right bi-share">
+      Share
+    </PopoverItem>
+  </template>
+</Popover>
+```
+
 ## Submenus
 
 To create more complex menus, you can use submenus (`PopoverSubmenu`). Submenus are menu items which contain other menu items.