add library name in library tab navigation

next-ui/src/components/library/LibraryNavigation.vue

@@ -7,6 +7,7 @@
   <LibraryTabNavigation
     v-else
     :routes="routes"
+    :library-id="libraryId"
   />
 
   <RouterView />

next-ui/src/components/library/TabNavigation.stories.ts

@@ -20,7 +20,9 @@ const meta = {
       },
     },
   },
-  args: {},
+  args: {
+    libraryId: 'all',
+  },
 } satisfies Meta<typeof TabNavigation>
 
 export default meta

next-ui/src/components/library/TabNavigation.vue

@@ -1,26 +1,96 @@
 <template>
   <v-app-bar>
-    <v-tabs
-      :items="routes"
-      center-active
-      grow
-    >
-      <template #tab="{ item: route }">
-        <v-tab
-          :text="route.title"
-          :to="route.to"
-        />
-      </template>
-    </v-tabs>
+    <template #prepend>
+      <span
+        v-if="isSingle"
+        class="ms-4 text-title-large"
+        >{{ title }}</span
+      >
+
+      <v-select
+        v-else
+        :model-value="libraryId"
+        :items="selectItems"
+        variant="plain"
+        class="ms-4"
+        @update:model-value="navigate"
+      >
+        <template #selection="{ item }">
+          <span class="text-title-large">{{ item.title }}</span>
+        </template>
+      </v-select>
+    </template>
+
+    <template #default>
+      <v-tabs
+        :items="routes"
+        center-active
+      >
+        <template #tab="{ item: route }">
+          <v-tab
+            :text="route.title"
+            :to="route.to"
+          />
+        </template>
+      </v-tabs>
+    </template>
+
+    <!-- Occupies space, effectively centering the tabs   -->
+    <template #append></template>
   </v-app-bar>
 </template>
 
 <script setup lang="ts">
 import type { Route } from '@/types/route'
+import type { LibraryId } from '@/types/libraries'
+import { useGetLibrariesById } from '@/composables/libraries'
+import { useIntl } from 'vue-intl'
 
-const { routes } = defineProps<{
+const { routes, libraryId } = defineProps<{
   routes: Route[]
+  libraryId: LibraryId
 }>()
+
+const intl = useIntl()
+const router = useRouter()
+
+const { isSingle, libraries } = useGetLibrariesById(libraryId)
+
+const title = computed(() => (isSingle.value ? libraries.value?.[0]?.name : undefined))
+
+const selectItems = [
+  {
+    title: intl.formatMessage({
+      description: 'Library tab navigation: library selection: pinned',
+      defaultMessage: 'Pinned',
+      id: '1qIfds',
+    }),
+    value: 'pinned',
+  },
+  {
+    title: intl.formatMessage({
+      description: 'Library tab navigation: library selection: unpinned',
+      defaultMessage: 'Unpinned',
+      id: '9oA9gw',
+    }),
+    value: 'unpinned',
+  },
+  {
+    title: intl.formatMessage({
+      description: 'Library tab navigation: library selection: all',
+      defaultMessage: 'All',
+      id: '8/BXfN',
+    }),
+    value: 'all',
+  },
+]
+
+function navigate(id: string) {
+  void router.push({
+    name: '/libraries/[id]',
+    params: { id: id },
+  })
+}
 </script>
 
 <style scoped></style>

next-ui/src/composables/libraries.ts

@@ -33,8 +33,17 @@ export function useGetLibrariesById(libraryId: MaybeRefOrGetter<LibraryId>) {
 
   const libIds = computed(() => libs.value?.map((it) => it.id))
 
+  const isPinned = computed(() => toValue(libraryId) === 'pinned')
+  const isUnpinned = computed(() => toValue(libraryId) === 'unpinned')
+  const isAll = computed(() => toValue(libraryId) === 'all')
+  const isSingle = computed(() => !isPinned.value && !isUnpinned.value && !isAll.value)
+
   return {
     libraries: libs,
     libraryIds: libIds,
+    isPinned,
+    isUnpinned,
+    isAll,
+    isSingle,
   }
 }