feat: add hub

layers/notes/app/components/NotesList.vue

@@ -14,20 +14,21 @@ const route = useRoute()
       <UInput
         v-model="query"
         icon="i-lucide-search"
-        placeholder="Search"
+        placeholder="Suchen"
         :loading="searching"
         class="w-full"
         @keydown.esc="query = ''"
       >
         <template v-if="query" #trailing>
-          <UButton icon="i-lucide-x" color="neutral" variant="link" size="sm" aria-label="Clear search" @click="query = ''" />
+          <UButton icon="i-lucide-x" color="neutral" variant="link" size="sm" aria-label="Suche leeren" @click="query = ''" />
         </template>
       </UInput>
     </div>
 
-    <p v-if="error" class="px-4 text-sm text-error">Couldn't load the notes: {{ errorMessage(error) }}</p>
+    <p v-if="error" class="px-2 text-sm text-error md:px-4">Notizen konnten nicht geladen werden: {{ errorMessage(error) }}</p>
 
-    <nav class="px-2 pb-4">
+    <!-- On mobile the titles and trash icons line up with the search bar's edges (the highlight reaches past them) -->
+    <nav class="pb-4 md:px-2">
       <!-- The delete button shows on hover on desktop (instead of the date), always on mobile -->
       <div v-for="doc in docs" :key="doc.id" class="group relative">
         <NuxtLink
@@ -44,15 +45,15 @@ const route = useRoute()
           color="neutral"
           variant="ghost"
           size="sm"
-          :aria-label="`Delete ${notesDocName(doc)}`"
-          title="Delete"
-          class="absolute inset-y-0 end-1 my-auto h-fit text-dimmed hover:text-error md:opacity-0 md:group-hover:opacity-100 md:focus-visible:opacity-100"
+          :aria-label="`${notesDocName(doc)} löschen`"
+          title="Löschen"
+          class="absolute inset-y-0 end-0.5 my-auto md:end-1 h-fit text-dimmed hover:text-error md:opacity-0 md:group-hover:opacity-100 md:focus-visible:opacity-100"
           @click="deleteDoc(doc)"
         />
       </div>
 
       <p v-if="!docs.length && !error && !searching" class="px-2 py-4 text-sm text-muted">
-        {{ query.trim() ? 'No notes match.' : 'No notes yet.' }}
+        {{ query.trim() ? 'Keine Notiz passt.' : 'Noch keine Notizen.' }}
       </p>
     </nav>
   </div>