feat: Fix, add, tweak various empty states across the app (#241)

* fix: add empty state to locations list

* fix: add empty states for homepage lists

* fix: add empty state to notifiers list

* fix: update profile notifiers to use translation, add en and pt-pt copy

* chore: tweak copy for notifier empty state

* fix: add new empty state for search page

* fix: update new empty states to use translation strings

* chore: eslint fixes, translation

* fix: translation key

---------

Co-authored-by: Matt Kilgore <matthew@kilgore.dev>

Author: filp

frontend/assets/css/main.css

@@ -27,4 +27,4 @@
 
 ::-webkit-scrollbar-thumb:hover {
   background-color: #9B9B9B;
-}
+}

frontend/components/Base/Card.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="card bg-base-100 shadow-xl rounded-lg">
+  <div class="card rounded-lg bg-base-100 shadow-xl">
     <div v-if="$slots.title" class="px-4 py-5 sm:px-6">
       <component :is="collapsable ? 'button' : 'div'" v-on="collapsable ? { click: toggle } : {}">
         <h3 class="flex items-center text-lg font-medium leading-6">

frontend/components/Item/View/Selectable.vue

@@ -59,7 +59,7 @@
     <template v-else>
       <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3">
         <ItemCard v-for="item in items" :key="item.id" :item="item" />
-        <div class="hidden text-lg first:block">{{ $t("components.item.view.selectable.no_items") }}</div>
+        <div class="hidden first:block">{{ $t("components.item.view.selectable.no_items") }}</div>
       </div>
     </template>
   </section>

frontend/components/Location/Tree/Root.vue

@@ -11,6 +11,9 @@
 
 <template>
   <div class="root border-2 p-4">
+    <p v-if="locs.length === 0" class="text-center text-sm">
+      {{ $t("location.tree.no_locations") }}
+    </p>
     <LocationTreeNode v-for="item in locs" :key="item.id" :item="item" :tree-id="treeId" />
   </div>
 </template>

frontend/locales/en.json

@@ -38,6 +38,9 @@
         "location": {
             "create_modal": {
                 "title": "Create Location"
+            },
+            "tree": {
+                "no_locations": "No locations available. Add new locations through the\n `<`span class=\"link-primary\"`>`Create`<`/span`>` button on the navigation bar."
             }
         }
     },
@@ -75,6 +78,12 @@
         "set_password": "Set your password",
         "tagline": "Track, Organize, and Manage your Things."
     },
+    "labels": {
+        "no_results": "No Labels Found"
+    },
+    "locations": {
+        "no_results": "No Locations Found"
+    },
     "items": {
         "add": "Add",
         "created_at": "Created At",
@@ -162,6 +171,7 @@
         "notifier_modal": "{ type, select, true {Edit} false {Create} other {Other}} Notifier",
         "notifiers": "Notifiers",
         "notifiers_sub": "Get notifications for upcoming maintenance reminders",
+        "no_notifiers": "No notifiers configured",
         "test": "Test",
         "theme_settings": "Theme Settings",
         "theme_settings_sub": "Theme settings are stored in your browser's local storage. You can change the theme at any time. If you're\n having trouble setting your theme try refreshing your browser.",

frontend/locales/pt-PT.json

@@ -75,6 +75,12 @@
         "set_password": "Defina a sua senha",
         "tagline": "Acompanhe, organize e faça a gestão das suas coisas."
     },
+    "labels": {
+        "no_results": "Nenhuma etiqueta encontrada"
+    },
+    "locations": {
+        "no_results": "Nenhuma localização encontrada"
+    },
     "items": {
         "add": "Adicionar",
         "created_at": "Criado em",
@@ -139,6 +145,7 @@
         "notifier_modal": "{ type, select, true {Editar} false {Criar} other {Outro}} Notificador",
         "notifiers": "Notificadores",
         "notifiers_sub": "Receba notificações para os próximos lembretes de manutenção",
+        "no_notifiers": "Nenhum notificador configurado",
         "test": "Testar",
         "theme_settings": "Definições do tema",
         "theme_settings_sub": "As configurações do tema são guardadas no armazenamento local do seu navegador. Pode alterar o tema  em qualquer altura.\nSe encontrar algum problema com  a alteração do tema, tente refrescar o browser.",

frontend/pages/home/index.vue

@@ -35,9 +35,10 @@
       </section>
 
       <section>
-        <Subtitle> Recently Added </Subtitle>
+        <Subtitle>Recently Added</Subtitle>
 
-        <BaseCard v-if="breakpoints.lg">
+        <p v-if="itemTable.items.length === 0" class="ml-2 text-sm">{{ $t("items.no_results") }}</p>
+        <BaseCard v-else-if="breakpoints.lg">
           <ItemViewTable :items="itemTable.items" disable-controls />
         </BaseCard>
         <div v-else class="grid grid-cols-1 gap-4 md:grid-cols-2">
@@ -47,14 +48,16 @@
 
       <section>
         <Subtitle> Storage Locations </Subtitle>
-        <div class="card grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3">
+        <p v-if="locations.length === 0" class="ml-2 text-sm">{{ $t("locations.no_results") }}</p>
+        <div v-else class="card grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3">
           <LocationCard v-for="location in locations" :key="location.id" :location="location" />
         </div>
       </section>
 
       <section>
         <Subtitle> Labels </Subtitle>
-        <div class="flex flex-wrap gap-4">
+        <p v-if="labels.length === 0" class="ml-2 text-sm">{{ $t("labels.no_results") }}</p>
+        <div v-else class="flex flex-wrap gap-4">
           <LabelChip v-for="label in labels" :key="label.id" size="lg" :label="label" class="shadow-md" />
         </div>
       </section>

frontend/pages/index.vue

@@ -180,12 +180,7 @@
           <a href="https://discord.gg/aY4DCkpNA9" class="tooltip" :data-tip="$t('global.join_discord')" target="_blank">
             <MdiDiscord class="size-8" />
           </a>
-          <a
-            href="https://homebox.software/en/"
-            class="tooltip"
-            :data-tip="$t('global.read_docs')"
-            target="_blank"
-          >
+          <a href="https://homebox.software/en/" class="tooltip" :data-tip="$t('global.read_docs')" target="_blank">
             <MdiFolder class="size-8" />
           </a>
         </div>

frontend/pages/items.vue

@@ -3,6 +3,7 @@
   import { useLabelStore } from "~~/stores/labels";
   import { useLocationStore } from "~~/stores/locations";
   import MdiLoading from "~icons/mdi/loading";
+  import MdiSelectSearch from "~icons/mdi/select-search";
   import MdiMagnify from "~icons/mdi/magnify";
   import MdiDelete from "~icons/mdi/delete";
   import MdiChevronRight from "~icons/mdi/chevron-right";
@@ -463,15 +464,17 @@
 
     <section class="mt-10">
       <BaseSectionHeader ref="itemsTitle"> {{ $t("global.items") }} </BaseSectionHeader>
-      <p class="flex items-center text-base font-medium">
+      <p v-if="items.length > 0" class="flex items-center text-base font-medium">
         {{ $t("items.results", { total: total }) }}
         <span class="ml-auto text-base"> {{ $t("items.pages", { page: page, totalPages: totalPages }) }} </span>
       </p>
 
-      <div ref="cardgrid" class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3">
+      <div v-if="items.length === 0" class="flex flex-col items-center gap-2">
+        <MdiSelectSearch class="size-10" />
+        <p>{{ $t("items.no_results") }}</p>
+      </div>
+      <div v-else ref="cardgrid" class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3">
         <ItemCard v-for="item in items" :key="item.id" :item="item" />
-
-        <div class="hidden text-xl first:inline">{{ $t("items.no_results") }}</div>
       </div>
       <div v-if="items.length > 0 && (hasNext || hasPrev)" class="mt-10 flex flex-col items-center gap-2">
         <div class="flex">

frontend/pages/profile.vue

@@ -372,7 +372,7 @@
             {{ token }}
           </div>
         </div>
-        <div class="p-5 pt-0 form-control w-full">
+        <div class="form-control w-full p-5 pt-0">
           <label class="label">
             <span class="label-text">{{ $t("profile.language") }}</span>
           </label>
@@ -397,7 +397,10 @@
         </template>
 
         <div v-if="notifiers.data.value" class="mx-4 divide-y divide-gray-400 rounded-md border border-gray-400">
-          <article v-for="n in notifiers.data.value" :key="n.id" class="p-2">
+          <p v-if="notifiers.data.value.length === 0" class="p-2 text-center text-sm">
+            {{ $t("profile.no_notifiers") }}
+          </p>
+          <article v-for="n in notifiers.data.value" v-else :key="n.id" class="p-2">
             <div class="flex flex-wrap items-center gap-2">
               <p class="mr-auto text-lg">{{ n.name }}</p>
               <div class="flex justify-end gap-2">
@@ -465,7 +468,9 @@
 
         <div class="px-4 pb-4">
           <div class="mb-3">
-            <BaseButton size="sm" @click="setDisplayHeader"> {{ $t("profile.display_header", { currentValue: preferences.displayHeaderDecor }) }} </BaseButton>
+            <BaseButton size="sm" @click="setDisplayHeader">
+              {{ $t("profile.display_header", { currentValue: preferences.displayHeaderDecor }) }}
+            </BaseButton>
           </div>
           <div class="rounded-box grid grid-cols-1 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
             <div