fix: refactoring and error handling

pages/library.vue

@@ -7,16 +7,31 @@
       <LibrarySearch />
     </div>
     <div class="grow overflow-y-auto">
-      <NuxtPage :libraryDownloadError="libraryDownloadError" />
+      <NuxtErrorBoundary>
+        <NuxtPage />
+        <template #error="{ error }">
+          <main
+            class="grid min-h-full w-full place-items-center px-6 py-24 sm:py-32 lg:px-8"
+          >
+            <div class="text-center">
+              <p class="text-base font-semibold text-blue-600">Error</p>
+              <h1
+                class="mt-4 text-3xl font-bold font-display tracking-tight text-zinc-100 sm:text-5xl"
+              >
+                Failed to load library
+              </h1>
+              <p class="mt-6 text-base leading-7 text-zinc-400">
+                Drop couldn't load your library: "{{ error }}".
+              </p>
+            </div>
+          </main>
+        </template>
+      </NuxtErrorBoundary>
     </div>
   </div>
 </template>
 
-<script setup lang="ts">
-
-let libraryDownloadError = false;
-
-</script>
+<script setup lang="ts"></script>
 
 <style scoped>
 .list-move,