feat: implement library, slug and fixes

components/app/AppBook.vue

@@ -1,9 +1,8 @@
 <script setup lang="ts">
 import { joinURL } from "ufo";
-
 import type { BookDetailsCommon } from "@/types/common";
+import type { LibraryBookAdd } from "#build/components";
 
-const { add } = useLibraryPrompt();
 const { currentUser } = useAuthentication();
 const store = useSettingsStore();
 
@@ -15,17 +14,28 @@ const ui = {
   },
 };
 
-defineProps<{
+const props = defineProps<{
   book: BookDetailsCommon;
+  addModal?: InstanceType<typeof LibraryBookAdd>;
 }>();
+
+function handleAdd() {
+  props.addModal?.open(
+    {
+      id: props.book.id,
+      name: props.book.expand?.publication.name || props.book.id,
+    },
+    props.book.metadata?.inCollections?.map((c) => c.id),
+  );
+}
 </script>
 
 <template>
   <NuxtLink
     v-if="book.expand && book.expand.publication && book.expand.release"
     :to="
-      book.expand?.release.title
-        ? joinURL('/title/' + book.expand.release.title)
+      book.expand?.release.expand?.title
+        ? joinURL('/title/' + book.expand.release.expand.title.slug)
         : ''
     "
     class="group"
@@ -48,7 +58,7 @@ defineProps<{
 
       <div
         v-if="currentUser"
-        class="absolute bottom-2 right-2 z-10 flex items-center gap-1"
+        class="absolute bottom-2 right-2 z-20 flex items-center gap-1"
       >
         <UPopover v-if="book.metadata?.inCollections" mode="hover">
           <UTooltip :text="$t('library.view')" :popper="{ placement: 'top' }">
@@ -71,10 +81,6 @@ defineProps<{
                 },
               }"
             >
-              <template #header>
-                {{ $t("library.selectCollection") }}
-              </template>
-
               <UButton
                 v-for="collection in book.metadata.inCollections"
                 :key="collection.id"
@@ -90,25 +96,21 @@ defineProps<{
         </UPopover>
 
         <UTooltip
+          v-if="addModal"
           :text="$t('library.addToLibrary')"
           :popper="{ placement: 'top' }"
         >
           <UButton
             class="shadow-lg"
             icon="i-fluent-add-20-filled"
             color="white"
-            @click.prevent="
-              add({
-                id: book.id,
-                name: book.expand.publication.name,
-              })
-            "
+            @click.prevent="handleAdd"
           />
         </UTooltip>
       </div>
 
       <AppCover
-        class="transition-all group-hover:brightness-75"
+        class="relative z-10 transition-all group-hover:brightness-75"
         :name="book.expand.publication.name"
         :src="
           book.metadata?.images && Array.isArray(book.metadata.images)
@@ -122,6 +124,8 @@ defineProps<{
         "
         v-bind="$attrs"
       />
+
+      <USkeleton class="absolute inset-0" />
     </UCard>
 
     <div v-if="store.display.bookDetails" class="mt-2">
@@ -134,7 +138,7 @@ defineProps<{
       >
         <div
           v-if="book.expand?.release.expand?.title.name"
-          class="decoration-primary-400 font-condensed text-xl font-black decoration-[.2rem] underline-offset-[.2rem] group-hover:underline"
+          class="decoration-primary-400 line-clamp-4 font-condensed text-xl font-black decoration-[.2rem] underline-offset-[.2rem] group-hover:underline"
         >
           {{ book.expand.release.expand.title.name }}
         </div>

components/app/AppCollection.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { joinURL } from "ufo";
+import type { BaseAPIFields } from "@/types/api";
+import type { CollectionsRecord } from "@/types/pb";
+
+const props = defineProps<{
+  collection: CollectionsRecord & BaseAPIFields;
+}>();
+
+const ui = { body: { base: "relative", padding: "p-0 sm:p-0" } };
+
+const description = props.collection.description
+  ?.replace(/<[^>]*>/g, "")
+  .substring(0, 200);
+</script>
+
+<template>
+  <ULink :to="joinURL('/library', collection.id)" class="group block">
+    <UCard :ui="ui">
+      <div class="space-y-4 p-4">
+        <div class="prose prose-invert">
+          <h4
+            class="decoration-primary-400 decoration-[.2rem] underline-offset-[.2rem] group-hover:underline"
+          >
+            {{ collection.name }}
+          </h4>
+          <p v-if="description">
+            {{ description }}
+          </p>
+        </div>
+      </div>
+    </UCard>
+  </ULink>
+</template>

components/app/AppReview.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { joinURL } from "ufo";
+import type {
+  ReleasesResponse,
+  ReviewsResponse,
+  TitlesResponse,
+  UsersResponse,
+} from "@/types/pb";
+
+defineProps<{
+  review: ReviewsResponse;
+  user?: UsersResponse;
+  release?: ReleasesResponse<{
+    title: TitlesResponse;
+  }>;
+}>();
+
+const ui = { body: { base: "relative", padding: "p-0 sm:p-0" } };
+</script>
+
+<template>
+  <ULink :to="joinURL('/review', review.id)" class="group">
+    <UCard :ui="ui">
+      <div class="relative flex">
+        <div v-if="release?.expand?.title" class="w-32 flex-shrink-0">
+          <img
+            :src="
+              $pb.files.getUrl(release.expand.title, release.expand.title.cover)
+            "
+            class="h-full w-full object-cover transition-all group-hover:brightness-75"
+          />
+        </div>
+        <div class="space-y-4 p-4">
+          <div class="prose prose-invert">
+            <h3 v-if="release" class="font-condensed">
+              {{ release.expand?.title.name }} - {{ release.name }}
+            </h3>
+            <h4
+              class="decoration-primary-400 decoration-[.2rem] underline-offset-[.2rem] group-hover:underline"
+            >
+              {{ review.header }}
+            </h4>
+            <p>
+              {{ review.content }}
+            </p>
+          </div>
+
+          <div
+            v-if="user"
+            class="flex items-center justify-between gap-2 overflow-hidden"
+          >
+            <div class="flex items-center gap-2">
+              <img
+                :src="
+                  $pb.files.getUrl(user, user.avatar, {
+                    thumb: '32x32',
+                  })
+                "
+                class="rounded-full"
+              />
+              <span class="overflow-hidden text-ellipsis whitespace-nowrap">
+                {{ user.displayName || user.username }}
+              </span>
+            </div>
+            <UBadge v-if="review.score >= 7" variant="subtle">
+              {{ $t("review.recommend") }}
+            </UBadge>
+          </div>
+        </div>
+      </div>
+    </UCard>
+  </ULink>
+</template>

components/app/AppShareButton.vue

@@ -33,7 +33,7 @@ function copyLink() {
   <UButton
     v-else-if="clipboardSupported"
     :icon="
-      copied ? 'i-fluent-checkmark-20-filled' : 'i-fluent-link-square-20-filled'
+      copied ? 'i-fluent-checkmark-20-filled' : 'i-fluent-share-ios-20-filled'
     "
     color="gray"
     square

components/app/AppSideNavigation.vue

@@ -6,7 +6,8 @@ defineProps<{
     authenticated?: boolean;
     icon?: string;
     label: string;
-    to: string;
+    to?: string;
+    click?: () => void;
   }[][];
 }>();
 </script>
@@ -24,6 +25,7 @@ defineProps<{
           :icon="link.icon"
           color="gray"
           variant="ghost"
+          @click="link.click"
         >
           {{ link.label }}
         </UButton>

components/app/AppTitle.vue

@@ -12,7 +12,7 @@ defineProps<{
 </script>
 
 <template>
-  <NuxtLink :to="joinURL('/title/' + title.id)" class="group space-y-3">
+  <NuxtLink :to="joinURL('/title/' + title.slug)" class="group space-y-3">
     <AppCard>
       <AppCover
         :name="title.name"
@@ -34,7 +34,7 @@ defineProps<{
     <div class="space-y-1">
       <slot name="before" />
       <h3
-        class="decoration-primary-400 font-condensed text-xl font-black decoration-[.2rem] underline-offset-[.2rem] group-hover:underline"
+        class="decoration-primary-400 line-clamp-4 font-condensed text-xl font-black decoration-[.2rem] underline-offset-[.2rem] group-hover:underline"
       >
         {{ title.name }}
       </h3>

components/library/book/LibraryBookAdd.vue

@@ -11,6 +11,7 @@ const { $pb } = useNuxtApp();
 const { pending, update } = useLibraryBook();
 const { collectionBookStatus } = useOptions();
 const { isAuthenticated, currentUser } = useAuthentication();
+const { open: createOpen } = useLibraryCollectionCreate();
 const settingsStore = useSettingsStore();
 
 const emit = defineEmits<{
@@ -25,7 +26,7 @@ defineExpose({
 const isOpen = ref(false);
 const inCollections = ref<string[]>([]);
 
-const { data: collections } = await useLazyAsyncData(
+const { data: collections, refresh } = await useLazyAsyncData(
   () =>
     $pb.send<UserCollectionsResponse>("/api/user-collections", {
       method: "GET",
@@ -82,6 +83,11 @@ function close() {
   isOpen.value = false;
 }
 
+function handleCreate() {
+  close();
+  createOpen(refresh);
+}
+
 async function onSubmit(event: FormSubmitEvent<Schema>) {
   if (!book.value.id) return;
 
@@ -125,7 +131,10 @@ async function onSubmit(event: FormSubmitEvent<Schema>) {
             {{ book.name }}
           </UButton>
           <UIcon class="my-3" name="i-fluent-arrow-down-20-filled" />
-          <UFormGroup name="collection">
+          <UFormGroup
+            v-if="collections && collections.length > 0"
+            name="collection"
+          >
             <USelectMenu
               v-if="collections"
               v-model="state.collection"
@@ -145,6 +154,9 @@ async function onSubmit(event: FormSubmitEvent<Schema>) {
               </UButton>
             </USelectMenu>
           </UFormGroup>
+          <UButton v-else color="gray" block @click="handleCreate">
+            {{ $t("library.createCollection") }}
+          </UButton>
         </div>
 
         <div class="grid grid-cols-2 gap-3">