feat: user profiles (#32)

* add user profiles and theme selectors

* lowercase buttons by default

* basic layout

* (wip) init token APIs

* refactor server to support variable options

* fix types

* api refactor / registration tests

* implement UI for url and join

* remove console.logs

* rename repository factory

* fix upload size

frontend/pages/item/[id]/index.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+  import { DateDetail, Detail } from "~~/components/global/DetailsSection/types";
   import { ItemAttachment } from "~~/lib/api/types/data-contracts";
 
   definePageMeta({
@@ -64,15 +65,33 @@
     );
   });
 
-  const itemSummary = computed(() => {
-    return {
-      Description: item.value?.description || "",
-      "Serial Number": item.value?.serialNumber || "",
-      "Model Number": item.value?.modelNumber || "",
-      Manufacturer: item.value?.manufacturer || "",
-      Notes: item.value?.notes || "",
-      Insured: item.value?.insured ? "Yes" : "No",
-    };
+  const itemDetails = computed(() => {
+    return [
+      {
+        name: "Description",
+        text: item.value?.description,
+      },
+      {
+        name: "Serial Number",
+        text: item.value?.serialNumber,
+      },
+      {
+        name: "Mode Number",
+        text: item.value?.modelNumber,
+      },
+      {
+        name: "Manufacturer",
+        text: item.value?.manufacturer,
+      },
+      {
+        name: "Insured",
+        text: item.value?.insured ? "Yes" : "No",
+      },
+      {
+        name: "Notes",
+        text: item.value?.notes,
+      },
+    ];
   });
 
   const showAttachments = computed(() => {
@@ -88,35 +107,34 @@
     );
   });
 
-  const itemAttachments = computed(() => {
-    const val: Record<string, string> = {};
+  const attachmentDetails = computed(() => {
+    const details: Detail[] = [];
 
-    if (preferences.value.showEmpty) {
-      return {
-        Photos: "",
-        Manuals: "",
-        Warranty: "",
-        Attachments: "",
-      };
-    }
+    const push = (name: string) => {
+      details.push({
+        name,
+        text: "",
+        slot: name.toLowerCase(),
+      });
+    };
 
     if (attachments.value.photos.length > 0) {
-      val.Photos = "";
-    }
-
-    if (attachments.value.manuals.length > 0) {
-      val.Manuals = "";
-    }
-
-    if (attachments.value.warranty.length > 0) {
-      val.Warranty = "";
+      push("Photos");
     }
 
     if (attachments.value.attachments.length > 0) {
-      val.Attachments = "";
+      push("Attachments");
     }
 
-    return val;
+    if (attachments.value.warranty.length > 0) {
+      push("Warranty");
+    }
+
+    if (attachments.value.manuals.length > 0) {
+      push("Manuals");
+    }
+
+    return details;
   });
 
   const showWarranty = computed(() => {
@@ -127,17 +145,32 @@
   });
 
   const warrantyDetails = computed(() => {
-    const payload = {
-      "Lifetime Warranty": item.value?.lifetimeWarranty ? "Yes" : "No",
-    };
+    const details: (Detail | DateDetail)[] = [
+      {
+        name: "Lifetime Warranty",
+        text: item.value?.lifetimeWarranty ? "Yes" : "No",
+      },
+    ];
 
-    if (showWarranty.value) {
-      payload["Warranty Expires"] = item.value?.warrantyExpires || "";
+    if (item.value?.lifetimeWarranty) {
+      details.push({
+        name: "Warranty Expires",
+        text: "N/A",
+      });
+    } else {
+      details.push({
+        name: "Warranty Expires",
+        text: item.value?.warrantyExpires,
+        type: "date",
+      });
     }
 
-    payload["Warranty Details"] = item.value?.warrantyDetails || "";
+    details.push({
+      name: "Warranty Details",
+      text: item.value?.warrantyDetails || "",
+    });
 
-    return payload;
+    return details;
   });
 
   const showPurchase = computed(() => {
@@ -147,28 +180,45 @@
     return item.value?.purchaseFrom || item.value?.purchasePrice;
   });
 
-  const purchaseDetails = computed(() => {
-    return {
-      "Purchased From": item.value?.purchaseFrom || "",
-      "Purchased Price": item.value?.purchasePrice ? fmtCurrency(item.value.purchasePrice) : "",
-      "Purchased At": item.value?.purchaseTime || "",
-    };
+  const purchaseDetails = computed<(Detail | DateDetail)[]>(() => {
+    return [
+      {
+        name: "Purchase From",
+        label: item.value?.purchaseFrom || "",
+      },
+      {
+        name: "Purchase Price",
+        text: item.value?.purchasePrice ? fmtCurrency(item.value.purchasePrice) : "",
+      },
+      {
+        name: "Purchase Date",
+        text: item.value.purchaseTime,
+      },
+    ] as (Detail | DateDetail)[];
   });
 
   const showSold = computed(() => {
     if (preferences.value.showEmpty) {
       return true;
     }
-
     return item.value?.soldTo || item.value?.soldPrice;
   });
 
-  const soldDetails = computed(() => {
-    return {
-      "Sold To": item.value?.soldTo || "",
-      "Sold Price": item.value?.soldPrice ? fmtCurrency(item.value.soldPrice) : "",
-      "Sold At": item.value?.soldTime || "",
-    };
+  const soldDetails = computed<Array<Detail>>(() => {
+    return [
+      {
+        name: "Sold To",
+        text: item.value?.soldTo || "",
+      },
+      {
+        name: "Sold Price",
+        text: item.value?.soldPrice ? fmtCurrency(item.value.soldPrice) : "",
+      },
+      {
+        name: "Sold At",
+        text: item.value?.soldTime || "",
+      },
+    ] as Detail[];
   });
 
   const confirm = useConfirm();
@@ -197,91 +247,95 @@
         <div class="form-control"></div>
       </div>
       <div class="grid grid-cols-1 gap-3">
-        <BaseDetails :details="itemSummary">
+        <BaseCard>
           <template #title>
-            <BaseSectionHeader v-if="item" class="pb-0">
-              <Icon name="mdi-package-variant" class="mr-2 text-gray-600" />
-              <span class="text-gray-600">
-                {{ item.name }}
+            <BaseSectionHeader>
+              <Icon name="mdi-package-variant" class="mr-2 -mt-1 text-base-content" />
+              <span class="text-base-content">
+                {{ item ? item.name : "" }}
               </span>
-              <p class="text-sm text-gray-600 font-bold pb-0 mb-0">
-                {{ item.location.name }} - Quantity {{ item.quantity }}
-              </p>
-              <template #after>
+              <template #description>
+                <p class="text-sm text-base-content font-bold pb-0 mb-0">
+                  {{ item.location.name }} - Quantity {{ item.quantity }}
+                </p>
                 <div v-if="item.labels && item.labels.length > 0" class="flex flex-wrap gap-3 mt-3">
                   <LabelChip v-for="label in item.labels" :key="label.id" class="badge-primary" :label="label" />
                 </div>
-                <div class="modal-action mt-3">
-                  <label class="label cursor-pointer mr-auto">
-                    <input v-model="preferences.showEmpty" type="checkbox" class="toggle toggle-primary" />
-                    <span class="label-text ml-4"> Show Empty </span>
-                  </label>
-                  <BaseButton size="sm" :to="`/item/${itemId}/edit`">
-                    <template #icon>
-                      <Icon name="mdi-pencil" />
-                    </template>
-                    Edit
-                  </BaseButton>
-                  <BaseButton size="sm" @click="deleteItem">
-                    <template #icon>
-                      <Icon name="mdi-delete" />
-                    </template>
-                    Delete
-                  </BaseButton>
-                </div>
               </template>
             </BaseSectionHeader>
           </template>
-        </BaseDetails>
-        <BaseDetails v-if="showAttachments" :details="itemAttachments">
+          <template #title-actions>
+            <div class="modal-action mt-0">
+              <label class="label cursor-pointer mr-auto">
+                <input v-model="preferences.showEmpty" type="checkbox" class="toggle toggle-primary" />
+                <span class="label-text ml-4"> Show Empty </span>
+              </label>
+              <BaseButton size="sm" :to="`/item/${itemId}/edit`">
+                <template #icon>
+                  <Icon name="mdi-pencil" />
+                </template>
+                Edit
+              </BaseButton>
+              <BaseButton size="sm" @click="deleteItem">
+                <template #icon>
+                  <Icon name="mdi-delete" />
+                </template>
+                Delete
+              </BaseButton>
+            </div>
+          </template>
+
+          <DetailsSection :details="itemDetails" />
+        </BaseCard>
+
+        <BaseCard v-if="showAttachments">
           <template #title> Attachments </template>
-          <template #Manuals>
-            <ItemAttachmentsList
-              v-if="attachments.manuals.length > 0"
-              :attachments="attachments.manuals"
-              :item-id="item.id"
-            />
-          </template>
-          <template #Attachments>
-            <ItemAttachmentsList
-              v-if="attachments.attachments.length > 0"
-              :attachments="attachments.attachments"
-              :item-id="item.id"
-            />
-          </template>
-          <template #Warranty>
-            <ItemAttachmentsList
-              v-if="attachments.warranty.length > 0"
-              :attachments="attachments.warranty"
-              :item-id="item.id"
-            />
-          </template>
-          <template #Photos>
-            <ItemAttachmentsList
-              v-if="attachments.photos.length > 0"
-              :attachments="attachments.photos"
-              :item-id="item.id"
-            />
-          </template>
-        </BaseDetails>
-        <BaseDetails v-if="showPurchase" :details="purchaseDetails">
-          <template #title> Purchase Details </template>
-          <template #PurchasedAt>
-            <DateTime :date="item.purchaseTime" />
-          </template>
-        </BaseDetails>
-        <BaseDetails v-if="showWarranty" :details="warrantyDetails">
+          <DetailsSection :details="attachmentDetails">
+            <template #manuals>
+              <ItemAttachmentsList
+                v-if="attachments.manuals.length > 0"
+                :attachments="attachments.manuals"
+                :item-id="item.id"
+              />
+            </template>
+            <template #attachments>
+              <ItemAttachmentsList
+                v-if="attachments.attachments.length > 0"
+                :attachments="attachments.attachments"
+                :item-id="item.id"
+              />
+            </template>
+            <template #warranty>
+              <ItemAttachmentsList
+                v-if="attachments.warranty.length > 0"
+                :attachments="attachments.warranty"
+                :item-id="item.id"
+              />
+            </template>
+            <template #photos>
+              <ItemAttachmentsList
+                v-if="attachments.photos.length > 0"
+                :attachments="attachments.photos"
+                :item-id="item.id"
+              />
+            </template>
+          </DetailsSection>
+        </BaseCard>
+
+        <BaseCard v-if="showPurchase">
+          <template #title> Purchase </template>
+          <DetailsSection :details="purchaseDetails" />
+        </BaseCard>
+
+        <BaseCard v-if="showWarranty">
           <template #title> Warranty </template>
-          <template #WarrantyExpires>
-            <DateTime :date="item.warrantyExpires" />
-          </template>
-        </BaseDetails>
-        <BaseDetails v-if="showSold" :details="soldDetails">
+          <DetailsSection :details="warrantyDetails" />
+        </BaseCard>
+
+        <BaseCard v-if="showSold">
           <template #title> Sold </template>
-          <template #SoldAt>
-            <DateTime :date="item.soldTime" />
-          </template>
-        </BaseDetails>
+          <DetailsSection :details="soldDetails" />
+        </BaseCard>
       </div>
     </section>
   </BaseContainer>