ui: rework location/labels pages (#475)

* formatting

* slimdown locations page

* update location/labels

* fix dependency issues

* fix type generator

* cleanup unused variables

Taskfile.yml

@@ -20,7 +20,7 @@ tasks:
       - db:generate
     cmds:
       - cd backend/app/api/static && swag fmt --dir=../
-      - cd backend/app/api/static && swag init --dir=../,../../../internal,../../../pkgs --parseDependency
+      - cd backend/app/api/static && swag init --dir=../,../../../internal,../../../pkgs
       - |
         npx swagger-typescript-api \
           --no-client \

backend/app/api/static/docs/docs.go

@@ -731,7 +731,7 @@ const docTemplate = `{
                     "422": {
                         "description": "Unprocessable Entity",
                         "schema": {
-                            "$ref": "#/definitions/mid.ErrorResponse"
+                            "$ref": "#/definitions/validate.ErrorResponse"
                         }
                     }
                 }
@@ -1799,20 +1799,6 @@ const docTemplate = `{
         }
     },
     "definitions": {
-        "mid.ErrorResponse": {
-            "type": "object",
-            "properties": {
-                "error": {
-                    "type": "string"
-                },
-                "fields": {
-                    "type": "object",
-                    "additionalProperties": {
-                        "type": "string"
-                    }
-                }
-            }
-        },
         "repo.DocumentOut": {
             "type": "object",
             "properties": {
@@ -2853,6 +2839,17 @@ const docTemplate = `{
             "properties": {
                 "item": {}
             }
+        },
+        "validate.ErrorResponse": {
+            "type": "object",
+            "properties": {
+                "error": {
+                    "type": "string"
+                },
+                "fields": {
+                    "type": "string"
+                }
+            }
         }
     },
     "securityDefinitions": {

backend/app/api/static/docs/swagger.json

@@ -723,7 +723,7 @@
                     "422": {
                         "description": "Unprocessable Entity",
                         "schema": {
-                            "$ref": "#/definitions/mid.ErrorResponse"
+                            "$ref": "#/definitions/validate.ErrorResponse"
                         }
                     }
                 }
@@ -1791,20 +1791,6 @@
         }
     },
     "definitions": {
-        "mid.ErrorResponse": {
-            "type": "object",
-            "properties": {
-                "error": {
-                    "type": "string"
-                },
-                "fields": {
-                    "type": "object",
-                    "additionalProperties": {
-                        "type": "string"
-                    }
-                }
-            }
-        },
         "repo.DocumentOut": {
             "type": "object",
             "properties": {
@@ -2845,6 +2831,17 @@
             "properties": {
                 "item": {}
             }
+        },
+        "validate.ErrorResponse": {
+            "type": "object",
+            "properties": {
+                "error": {
+                    "type": "string"
+                },
+                "fields": {
+                    "type": "string"
+                }
+            }
         }
     },
     "securityDefinitions": {

backend/app/api/static/docs/swagger.yaml

@@ -1,14 +1,5 @@
 basePath: /api
 definitions:
-  mid.ErrorResponse:
-    properties:
-      error:
-        type: string
-      fields:
-        additionalProperties:
-          type: string
-        type: object
-    type: object
   repo.DocumentOut:
     properties:
       id:
@@ -707,6 +698,13 @@ definitions:
     properties:
       item: {}
     type: object
+  validate.ErrorResponse:
+    properties:
+      error:
+        type: string
+      fields:
+        type: string
+    type: object
 info:
   contact:
     name: Don't
@@ -1084,7 +1082,7 @@ paths:
         "422":
           description: Unprocessable Entity
           schema:
-            $ref: '#/definitions/mid.ErrorResponse'
+            $ref: '#/definitions/validate.ErrorResponse'
       security:
       - Bearer: []
       summary: Create Item Attachment

backend/go.mod

@@ -17,8 +17,7 @@ require (
 	github.com/pkg/errors v0.9.1
 	github.com/rs/zerolog v1.29.1
 	github.com/stretchr/testify v1.8.4
-	github.com/swaggo/http-swagger/v2 v2.0.1
+	github.com/swaggo/http-swagger v1.3.4
-	github.com/swaggo/http-swagger/v2 v2.0.1
 	github.com/swaggo/swag v1.16.1
 	github.com/yeqown/go-qrcode/v2 v2.2.2
 	github.com/yeqown/go-qrcode/writer/standard v1.2.1

backend/go.sum

@@ -192,8 +192,6 @@ github.com/DataDog/datadog-go v3.2.0+incompatible/go.mod h1:LButxg5PwREeZtORoXG3
 github.com/KyleBanks/depth v1.2.1 h1:5h8fQADFrWtarTdtDudMmGsC7GPbOAu6RVB3ffsVFHc=
 github.com/KyleBanks/depth v1.2.1/go.mod h1:jzSb9d0L43HxTQfT+oSA1EEp2q+ne2uh6XgeJcm8brE=
 github.com/OneOfOne/xxhash v1.2.2/go.mod h1:HSdplMjZKSmBqAxg5vPj2TmRDmfkzw+cTzAElWljhcU=
-github.com/PuerkitoBio/purell v1.1.1/go.mod h1:c11w/QuzBsJSee3cPx9rAFu61PvFxuPbtSwDGJws/X0=
-github.com/PuerkitoBio/urlesc v0.0.0-20170810143723-de5bf2ad4578/go.mod h1:uGdkoq3SwY9Y+13GIhn11/XLaGBb4BfwItxLd5jeuXE=
 github.com/agext/levenshtein v1.2.3 h1:YB2fHEn0UJagG8T1rrWknE3ZQzWM06O8AMAatNn7lmo=
 github.com/agext/levenshtein v1.2.3/go.mod h1:JEDfjyjHDjOF/1e4FlBE/PkbqA9OfWu2ki2W0IB5558=
 github.com/alecthomas/template v0.0.0-20160405071501-a0175ee3bccc/go.mod h1:LOuyumcjzFXgccqObfd/Ljyb9UuFJ6TxHnclSeseNhc=
@@ -202,7 +200,6 @@ github.com/alecthomas/units v0.0.0-20151022065526-2efee857e7cf/go.mod h1:ybxpYRF
 github.com/alecthomas/units v0.0.0-20190717042225-c3de453c63f4/go.mod h1:ybxpYRFXyAe+OPACYpWeL0wqObRcbAqCMya13uyzqw0=
 github.com/alecthomas/units v0.0.0-20190924025748-f65c72e2690d/go.mod h1:rBZYJk541a8SKzHPHnH3zbiI+7dagKZ0cgpgrD7Fyho=
 github.com/antihax/optional v1.0.0/go.mod h1:uupD/76wgC+ih3iEmQUL+0Ugr19nfwCT1kdvxnR2qWY=
-github.com/apparentlymart/go-dump v0.0.0-20180507223929-23540a00eaa3/go.mod h1:oL81AME2rN47vu18xqj1S1jPIPuN7afo62yKTNn3XMM=
 github.com/apparentlymart/go-textseg/v13 v13.0.0 h1:Y+KvPE1NYz0xl601PVImeQfFyEy6iT90AvPUL1NNfNw=
 github.com/apparentlymart/go-textseg/v13 v13.0.0/go.mod h1:ZK2fH7c4NqDTLtiYLvIkEghdlcqw7yxLeM89kiTRPUo=
 github.com/ardanlabs/conf/v3 v3.1.6 h1:t6AkG131ncy21ko18KQvBIc6+fWGZHTho12fd8JaUo8=
@@ -313,7 +310,6 @@ github.com/go-playground/validator/v10 v10.14.1/go.mod h1:9iXMNT7sEkjXb0I+enO7QX
 github.com/go-stack/stack v1.8.0/go.mod h1:v0f6uXyyMGvRgIKkXu+yp6POWl0qKG85gN/melR3HDY=
 github.com/go-task/slim-sprig v0.0.0-20210107165309-348f09dbbbc0/go.mod h1:fyg7847qk6SyHyPtNmDHnmrv/HOrqktSC+C9fM+CJOE=
 github.com/go-test/deep v1.0.3 h1:ZrJSEWsXzPOxaZnFteGEfooLba+ju3FYIbOrS+rQd68=
-github.com/go-test/deep v1.0.3/go.mod h1:wGDj63lr65AM2AQyKZd/NYHGb0R+1RLqB8NKt3aSFNA=
 github.com/gocarina/gocsv v0.0.0-20230616125104-99d496ca653d h1:KbPOUXFUDJxwZ04vbmDOc3yuruGvVO+LOa7cVER3yWw=
 github.com/gocarina/gocsv v0.0.0-20230616125104-99d496ca653d/go.mod h1:5YoVOkjYAQumqlV356Hj3xeYh4BdZuLE0/nRkf2NKkI=
 github.com/godbus/dbus/v5 v5.0.4/go.mod h1:xhWf0FNVPg57R7Z0UbKHbJfkEywrmjJnf7w5xrFpKfA=
@@ -491,7 +487,6 @@ github.com/kr/text v0.1.0/go.mod h1:4Jbv+DJW3UT/LiOwJeYQe1efqtUx/iVham/4vfdArNI=
 github.com/kr/text v0.2.0 h1:5Nx0Ya0ZqY2ygV366QzturHI13Jq95ApcVaJBhpS+AY=
 github.com/kr/text v0.2.0/go.mod h1:eLer722TekiGuMkidMxC/pM04lWEeraHUUmBw8l2grE=
 github.com/kylelemons/godebug v0.0.0-20170820004349-d65d576e9348 h1:MtvEpTB6LX3vkb4ax0b5D2DHbNAUsen0Gx5wZoq3lV4=
-github.com/kylelemons/godebug v0.0.0-20170820004349-d65d576e9348/go.mod h1:B69LEHPfb2qLo0BaaOLcbitczOKLWTsrBG9LczfCD4k=
 github.com/leodido/go-urn v1.2.4 h1:XlAE/cm/ms7TE/VMVoduSpNBoyc2dOxHs5MZSwAN63Q=
 github.com/leodido/go-urn v1.2.4/go.mod h1:7ZrI8mTSeBSHl/UaRyKQW1qZeMgak41ANeCNaVckg+4=
 github.com/magiconair/properties v1.8.6/go.mod h1:y3VJvCyxH9uVvJTWEGAELF3aiYNyPKd5NZ3oSwXrF60=
@@ -516,8 +511,6 @@ github.com/mattn/go-isatty v0.0.14/go.mod h1:7GGIvUiUoEMVVmxf/4nioHXj79iQHKdU27k
 github.com/mattn/go-isatty v0.0.16/go.mod h1:kYGgaQfpe5nmfYZH+SKPsOc2e4SrIfOl2e/yFXSvRLM=
 github.com/mattn/go-isatty v0.0.19 h1:JITubQf0MOLdlGRuRq+jtsDlekdYPia9ZFsB8h/APPA=
 github.com/mattn/go-isatty v0.0.19/go.mod h1:W+V8PltTTMOvKvAeJH7IuucS94S2C6jfK/D7dTCTo3Y=
-github.com/mattn/go-runewidth v0.0.9 h1:Lm995f3rfxdpd6TSmuVCHVb/QhupuXlYr8sCI/QdE+0=
-github.com/mattn/go-runewidth v0.0.9/go.mod h1:H031xJmbD/WCDINGzjvQ9THkh0rPKHF+m2gUSrubnMI=
 github.com/mattn/go-sqlite3 v1.14.17 h1:mCRHCLDUBXgpKAqIKsaAaAsrAlbkeomtRFKXh2L6YIM=
 github.com/mattn/go-sqlite3 v1.14.17/go.mod h1:2eHXhiwb8IkHr+BDWZGa96P6+rkvnG63S2DGjv9HUNg=
 github.com/matttproud/golang_protobuf_extensions v1.0.1/go.mod h1:D8He9yQNgCq6Z5Ld7szi9bcBfOoFv/3dc6xSMkL2PC0=
@@ -543,8 +536,6 @@ github.com/mwitkow/go-conntrack v0.0.0-20190716064945-2f068394615f/go.mod h1:qRW
 github.com/niemeyer/pretty v0.0.0-20200227124842-a10e7caefd8e/go.mod h1:zD1mROLANZcx1PVRCS0qkT7pwLkGfwJo4zjcN/Tysno=
 github.com/nxadm/tail v1.4.4/go.mod h1:kenIhsEOeOJmVchQTgglprH7qJGnHDVpk1VPCcaMI8A=
 github.com/nxadm/tail v1.4.8/go.mod h1:+ncqLTQzXmGhMZNUePPaPqPvBxHAIsmXswZKocGu+AU=
-github.com/olekukonko/tablewriter v0.0.5 h1:P2Ga83D34wi1o9J6Wh1mRuqd4mF/x/lgBS7N7AbDhec=
-github.com/olekukonko/tablewriter v0.0.5/go.mod h1:hPp6KlRPjbx+hW8ykQs1w3UBbZlj6HuIJcUGPhkA7kY=
 github.com/onsi/ginkgo v1.6.0/go.mod h1:lLunBs/Ym6LB5Z9jYTR76FiuTmxDTDusOGeTQH+WWjE=
 github.com/onsi/ginkgo v1.12.1/go.mod h1:zj2OWP4+oCPe1qIXoGWkgMRwljMUYCdkwsT2108oapk=
 github.com/onsi/ginkgo v1.16.4 h1:29JGrr5oVBm5ulCWet69zQkzWipVXIol6ygQUe/EzNc=
@@ -609,7 +600,6 @@ github.com/ryanuber/columnize v2.1.0+incompatible/go.mod h1:sm1tb6uqfes/u+d4ooFo
 github.com/sagikazarmark/crypt v0.8.0/go.mod h1:TmKwZAo97S4Fy4sfMH/HX/cQP5D+ijra2NyLpNNmttY=
 github.com/sean-/seed v0.0.0-20170313163322-e2103e2c3529/go.mod h1:DxrIzT+xaE7yg65j358z/aeFdxmN0P9QXhEzd20vsDc=
 github.com/sergi/go-diff v1.0.0 h1:Kpca3qRNrduNnOQeazBd0ysaKrUJiIuISHxogkT9RPQ=
-github.com/sergi/go-diff v1.0.0/go.mod h1:0CfEIISq7TuYL3j771MWULgwwjU+GofnZX9QAmXWZgo=
 github.com/sirupsen/logrus v1.2.0/go.mod h1:LxeOpSwHxABJmUn/MG1IvRgCAasNZTLOkJPxbbu5VWo=
 github.com/sirupsen/logrus v1.4.2/go.mod h1:tLMulIdttU9McNUspp0xgXVQah82FyeX6MwdIuYE2rE=
 github.com/sirupsen/logrus v1.6.0/go.mod h1:7uNnSEd1DgxDLC74fIahvMZmmYsHGZGEOFrfsX/uA88=
@@ -617,10 +607,7 @@ github.com/spaolacci/murmur3 v0.0.0-20180118202830-f09979ecbc72/go.mod h1:JwIasO
 github.com/spf13/afero v1.9.2/go.mod h1:iUV7ddyEEZPO5gA3zD4fJt6iStLlL+Lg4m2cihcDf8Y=
 github.com/spf13/cast v1.5.0/go.mod h1:SpXXQ5YoyJw6s3/6cMTQuxvgRl3PCJiyaX9p6b155UU=
 github.com/spf13/cobra v1.6.1/go.mod h1:IOw/AERYS7UzyrGinqmz6HLUo219MORXGxhbaJUqzrY=
-github.com/spf13/cobra v1.7.0 h1:hyqWnYt1ZQShIddO5kBpj3vu05/++x6tJ6dg8EC572I=
-github.com/spf13/cobra v1.7.0/go.mod h1:uLxZILRyS/50WlhOIKD7W6V5bgeIt+4sICxh6uRMrb0=
 github.com/spf13/jwalterweatherman v1.1.0/go.mod h1:aNWZUN0dPAAO/Ljvb5BEdw96iTZ0EXowPYD95IqWIGo=
-github.com/spf13/pflag v1.0.5 h1:iy+VFUOCP1a+8yFto/drg2CJ5u0yRoB7fZw3DKv/JXA=
 github.com/spf13/pflag v1.0.5/go.mod h1:McXfInJRrz4CZXVZOBLb0bTZqETkiAhM9Iw0y3An2Bg=
 github.com/spf13/viper v1.14.0/go.mod h1:WT//axPky3FdvXHzGw33dNdXXXfFQqmEalje+egj8As=
 github.com/stretchr/objx v0.1.0/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+wExME=
@@ -645,7 +632,6 @@ github.com/swaggo/files v1.0.1 h1:J1bVJ4XHZNq0I46UU90611i9/YzdrF7x92oX1ig5IdE=
 github.com/swaggo/files v1.0.1/go.mod h1:0qXmMNH6sXNf+73t65aKeB+ApmgxdnkQzVTAj2uaMUg=
 github.com/swaggo/http-swagger v1.3.4 h1:q7t/XLx0n15H1Q9/tk3Y9L4n210XzJF5WtnDX64a5ww=
 github.com/swaggo/http-swagger v1.3.4/go.mod h1:9dAh0unqMBAlbp1uE2Uc2mQTxNMU/ha4UbucIg1MFkQ=
-github.com/swaggo/http-swagger/v2 v2.0.1/go.mod h1:XYhrQVIKz13CxuKD4p4kvpaRB4jJ1/MlfQXVOE+CX8Y=
 github.com/swaggo/swag v1.16.1 h1:fTNRhKstPKxcnoKsytm4sahr8FaYzUcT7i1/3nd/fBg=
 github.com/swaggo/swag v1.16.1/go.mod h1:9/LMvHycG3NFHfR6LwvikHv5iFvmPADQ359cKikGxto=
 github.com/tv42/httpunix v0.0.0-20150427012821-b75d8614f926/go.mod h1:9ESjWnEqriFuLhtthL60Sar/7RFoluCcXsuvEwTV5KM=
@@ -664,7 +650,6 @@ github.com/yuin/goldmark v1.4.1/go.mod h1:mwnBkeHKe2W/ZEtQ+71ViKU8L12m81fl3OWwC1
 github.com/yuin/goldmark v1.4.13/go.mod h1:6yULJ656Px+3vBD8DxQVa3kxgyrAnzto9xy5taEt/CY=
 github.com/zclconf/go-cty v1.13.2 h1:4GvrUxe/QUDYuJKAav4EYqdM47/kZa672LwmXFmEKT0=
 github.com/zclconf/go-cty v1.13.2/go.mod h1:YKQzy/7pZ7iq2jNFzy5go57xdxdWoLLpaEp4u238AE0=
-github.com/zclconf/go-cty-debug v0.0.0-20191215020915-b22d67c1ba0b/go.mod h1:ZRKQfBXbGkpdV6QMzT3rU1kSTAnfu1dO8dPKjYprgj8=
 go.etcd.io/etcd/api/v3 v3.5.5/go.mod h1:KFtNaxGDw4Yx/BA4iPPwevUTAuqcsPxzyX8PHydchN8=
 go.etcd.io/etcd/client/pkg/v3 v3.5.5/go.mod h1:ggrwbk069qxpKPq8/FKkQ3Xq9y39kbFR4LnKszpRXeQ=
 go.etcd.io/etcd/client/v2 v2.305.5/go.mod h1:zQjKllfqfBVyVStbt4FaosoX2iYd8fV/GRy/PbowgP4=

docs/docs/api/openapi-2.0.json

@@ -723,7 +723,7 @@
                     "422": {
                         "description": "Unprocessable Entity",
                         "schema": {
-                            "$ref": "#/definitions/mid.ErrorResponse"
+                            "$ref": "#/definitions/validate.ErrorResponse"
                         }
                     }
                 }
@@ -1791,20 +1791,6 @@
         }
     },
     "definitions": {
-        "mid.ErrorResponse": {
-            "type": "object",
-            "properties": {
-                "error": {
-                    "type": "string"
-                },
-                "fields": {
-                    "type": "object",
-                    "additionalProperties": {
-                        "type": "string"
-                    }
-                }
-            }
-        },
         "repo.DocumentOut": {
             "type": "object",
             "properties": {
@@ -2845,6 +2831,17 @@
             "properties": {
                 "item": {}
             }
+        },
+        "validate.ErrorResponse": {
+            "type": "object",
+            "properties": {
+                "error": {
+                    "type": "string"
+                },
+                "fields": {
+                    "type": "string"
+                }
+            }
         }
     },
     "securityDefinitions": {

frontend/components/Item/View/Selectable.vue

@@ -25,9 +25,8 @@
 
 <template>
   <section>
-    <BaseSectionHeader class="mb-5 flex justify-between items-center">
+    <BaseSectionHeader class="mb-2 flex justify-between items-center">
       Items
-
       <template #description>
         <div v-if="!viewSet" class="dropdown dropdown-hover dropdown-left">
           <label tabindex="0" class="btn btn-ghost m-1">
@@ -57,6 +56,7 @@
     <template v-else>
       <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
         <ItemCard v-for="item in items" :key="item.id" :item="item" />
+        <div class="first:block hidden text-lg">No Items to Display</div>
       </div>
     </template>
   </section>

frontend/lib/api/types/data-contracts.ts

@@ -10,11 +10,6 @@
  * ---------------------------------------------------------------
  */
 
-export interface MidErrorResponse {
-  error: string;
-  fields: Record<string, string>;
-}
-
 export interface DocumentOut {
   id: string;
   path: string;
@@ -432,3 +427,8 @@ export interface TokenResponse {
 export interface Wrapped {
   item: any;
 }
+
+export interface ValidateErrorResponse {
+  error: string;
+  fields: string;
+}

frontend/pages/label/[id].vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-  import type { AnyDetail, Details } from "~~/components/global/DetailsSection/types";
-
   definePageMeta({
     middleware: ["auth"],
   });
@@ -9,8 +7,6 @@
   const api = useUserApi();
   const toast = useNotifier();
 
-  const preferences = useViewPreferences();
-
   const labelId = computed<string>(() => route.params.id as string);
 
   const { data: label } = useAsyncData(labelId.value, async () => {
@@ -23,42 +19,6 @@
     return data;
   });
 
-  const details = computed<Details>(() => {
-    const details = [
-      {
-        name: "Name",
-        text: label.value?.name,
-      } as AnyDetail,
-      {
-        name: "Description",
-        type: "markdown",
-        text: label.value?.description,
-      } as AnyDetail,
-    ];
-
-    if (preferences.value.showDetails) {
-      return [
-        ...details,
-        {
-          name: "Created",
-          text: label.value?.createdAt,
-          type: "date",
-        } as AnyDetail,
-        {
-          name: "Updated",
-          text: label.value?.updatedAt,
-          type: "date",
-        } as AnyDetail,
-        {
-          name: "Database ID",
-          text: label.value?.id,
-        } as AnyDetail,
-      ];
-    }
-
-    return details;
-  });
-
   const confirm = useConfirm();
 
   async function confirmDelete() {
@@ -123,40 +83,50 @@
       </form>
     </BaseModal>
 
-    <BaseCard class="mb-16">
+    <BaseContainer v-if="label" class="space-y-6 mb-16">
-      <template #title>
+      <section>
-        <BaseSectionHeader>
+        <BaseSectionHeader v-if="label">
-          <Icon name="mdi-tag" class="mr-2 -mt-1 text-base-content" />
+          <Icon name="mdi-package-variant" class="mr-2 -mt-1 text-base-content" />
           <span class="text-base-content">
             {{ label ? label.name : "" }}
           </span>
-        </BaseSectionHeader>
-      </template>
 
-      <template #title-actions>
+          <template #description>
-        <div class="flex flex-wrap mt-2 gap-2">
+            <Markdown class="text-lg" :source="label.description"> </Markdown>
-          <div class="form-control max-w-[160px]">
+          </template>
-            <label class="label cursor-pointer">
+        </BaseSectionHeader>
-              <input v-model="preferences.showDetails" type="checkbox" class="toggle toggle-primary" />
+
-              <span class="label-text ml-2"> Detailed View </span>
+        <div class="flex gap-3 flex-wrap mb-6 text-sm italic">
-            </label>
+          <div>
+            Created
+            <DateTime :date="label?.createdAt" />
           </div>
+          <div>
+            <Icon name="mdi-circle-small" />
+          </div>
+          <div>
+            Last Updated
+            <DateTime :date="label?.updatedAt" />
+          </div>
+        </div>
+
+        <div class="flex flex-wrap items-center justify-between mb-6 mt-3">
+          <div class="btn-group">
+            <PageQRCode class="dropdown-right" />
             <BaseButton class="ml-auto" size="sm" @click="openUpdate">
               <Icon class="mr-1" name="mdi-pencil" />
               Edit
             </BaseButton>
-          <BaseButton size="sm" @click="confirmDelete">
+          </div>
-            <Icon class="mr-1" name="mdi-delete" />
+          <BaseButton class="btn btn-sm" @click="confirmDelete()">
+            <Icon name="mdi-delete" class="mr-2" />
             Delete
           </BaseButton>
-          <PageQRCode />
         </div>
-      </template>
+      </section>
+    </BaseContainer>
 
-      <DetailsSection :details="details" />
+    <section v-if="label && label.items">
-    </BaseCard>
-
-    <section v-if="label && label.items && label.items.length > 0">
       <ItemViewSelectable :items="label.items" />
     </section>
   </BaseContainer>

frontend/pages/location/[id].vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-  import { AnyDetail, Details } from "~~/components/global/DetailsSection/types";
   import { LocationSummary, LocationUpdate } from "~~/lib/api/types/data-contracts";
   import { useLocationStore } from "~~/stores/locations";
 
@@ -11,8 +10,6 @@
   const api = useUserApi();
   const toast = useNotifier();
 
-  const preferences = useViewPreferences();
-
   const locationId = computed<string>(() => route.params.id as string);
 
   const { data: location } = useAsyncData(locationId.value, async () => {
@@ -30,42 +27,6 @@
     return data;
   });
 
-  const details = computed<Details>(() => {
-    const details = [
-      {
-        name: "Name",
-        text: location.value?.name ?? "",
-      },
-      {
-        name: "Description",
-        type: "markdown",
-        text: location.value?.description ?? "",
-      } as AnyDetail,
-    ];
-
-    if (preferences.value.showDetails) {
-      return [
-        ...details,
-        {
-          name: "Created",
-          text: location.value?.createdAt,
-          type: "date",
-        } as AnyDetail,
-        {
-          name: "Updated",
-          text: location.value?.updatedAt,
-          type: "date",
-        } as AnyDetail,
-        {
-          name: "Database ID",
-          text: location.value?.id,
-        } as AnyDetail,
-      ];
-    }
-
-    return details;
-  });
-
   const confirm = useConfirm();
 
   async function confirmDelete() {
@@ -125,6 +86,7 @@
 
 <template>
   <div>
+    <!-- Update Dialog -->
     <BaseModal v-model="updateModal">
       <template #title> Update Location </template>
       <form v-if="location" @submit.prevent="update">
@@ -136,15 +98,16 @@
         </div>
       </form>
     </BaseModal>
-    <BaseContainer class="space-y-10 mb-16">
+
-      <BaseCard>
+    <BaseContainer v-if="location" class="space-y-6 mb-16">
-        <template #title>
+      <section>
-          <BaseSectionHeader>
+        <BaseSectionHeader v-if="location">
-            <Icon name="mdi-map-marker" class="mr-2 -mt-1 text-base-content" />
+          <Icon name="mdi-package-variant" class="mr-2 -mt-1 text-base-content" />
           <span class="text-base-content">
             {{ location ? location.name : "" }}
           </span>
-            <div v-if="location && location.parent" class="text-sm breadcrumbs pb-0">
+
+          <div v-if="location?.parent" class="text-sm breadcrumbs pb-0">
             <ul class="text-base-content/70">
               <li>
                 <NuxtLink :to="`/location/${location.parent.id}`"> {{ location.parent.name }}</NuxtLink>
@@ -152,31 +115,39 @@
               <li>{{ location.name }}</li>
             </ul>
           </div>
-          </BaseSectionHeader>
+          <template #description>
+            <Markdown class="text-lg" :source="location.description"> </Markdown>
           </template>
+        </BaseSectionHeader>
 
-        <template #title-actions>
+        <div class="flex gap-3 flex-wrap mb-6 text-sm italic">
-          <div class="flex flex-wrap mt-2 gap-2">
+          <div>
-            <div class="form-control max-w-[160px]">
+            Created
-              <label class="label cursor-pointer">
+            <DateTime :date="location?.createdAt" />
-                <input v-model="preferences.showDetails" type="checkbox" class="toggle toggle-primary" />
-                <span class="label-text ml-2"> Detailed View </span>
-              </label>
           </div>
+          <div>
+            <Icon name="mdi-circle-small" />
+          </div>
+          <div>
+            Last Updated
+            <DateTime :date="location?.updatedAt" />
+          </div>
+        </div>
+
+        <div class="flex flex-wrap items-center justify-between mb-6 mt-3">
+          <div class="btn-group">
+            <PageQRCode class="dropdown-right" />
             <BaseButton class="ml-auto" size="sm" @click="openUpdate">
               <Icon class="mr-1" name="mdi-pencil" />
               Edit
             </BaseButton>
-            <BaseButton size="sm" @click="confirmDelete">
+          </div>
-              <Icon class="mr-1" name="mdi-delete" />
+          <BaseButton class="btn btn-sm" @click="confirmDelete()">
+            <Icon name="mdi-delete" class="mr-2" />
             Delete
           </BaseButton>
-            <PageQRCode />
         </div>
-        </template>
+      </section>
-
-        <DetailsSection :details="details" />
-      </BaseCard>
 
       <template v-if="location && location.items.length > 0">
         <ItemViewSelectable :items="location.items" />

frontend/pnpm-lock.yaml

@@ -87,7 +87,7 @@ devDependencies:
     version: 6.0.0(eslint@8.29.0)(typescript@5.0.2)
   '@vite-pwa/nuxt':
     specifier: ^0.1.0
-    version: 0.1.0(@nuxt/kit@3.6.3)(vite-plugin-pwa@0.16.4)
+    version: 0.1.0(@nuxt/kit@3.6.5)(vite-plugin-pwa@0.16.4)
   eslint:
     specifier: ^8.23.0
     version: 8.29.0
@@ -1900,32 +1900,6 @@ packages:
       - supports-color
     dev: false
 
-  /@nuxt/kit@3.6.3(rollup@2.79.1):
-    resolution: {integrity: sha512-Eq+2whSIsZ+2IdB9J3okYOc+nZHassjt13vJZowxO3dw0rsXTnWGFHx40IX+wrBYE6eiOHjU/cXQ1XHdiU2GyQ==}
-    engines: {node: ^14.18.0 || >=16.10.0}
-    dependencies:
-      '@nuxt/schema': 3.6.3(rollup@2.79.1)
-      c12: 1.4.2
-      consola: 3.2.3
-      defu: 6.1.2
-      globby: 13.2.2
-      hash-sum: 2.0.0
-      ignore: 5.2.4
-      jiti: 1.19.1
-      knitwork: 1.0.0
-      mlly: 1.4.0
-      pathe: 1.1.1
-      pkg-types: 1.0.3
-      scule: 1.0.0
-      semver: 7.5.4
-      unctx: 2.3.1
-      unimport: 3.0.14(rollup@2.79.1)
-      untyped: 1.3.2
-    transitivePeerDependencies:
-      - rollup
-      - supports-color
-    dev: true
-
   /@nuxt/kit@3.6.5(rollup@2.79.1):
     resolution: {integrity: sha512-uBI5I2Zx6sk+vRHU+nBmifwxg/nyXCGZ1g5hUKrUfgv1ZfiKB8JkN5T9iRoduDOaqbwM6XSnEl1ja73iloDcrw==}
     engines: {node: ^14.18.0 || >=16.10.0}
@@ -2009,24 +1983,6 @@ packages:
       - supports-color
     dev: false
 
-  /@nuxt/schema@3.6.3(rollup@2.79.1):
-    resolution: {integrity: sha512-ZkcDt1DbgKX4Zv6Y+uLdn4Zt2WUDsZy+cuVx9XTRPoGVaG9PXZEgQr1XYoVH1vBMH/8VgDApvjok/Vzo+x+Nrg==}
-    engines: {node: ^14.18.0 || >=16.10.0}
-    dependencies:
-      defu: 6.1.2
-      hookable: 5.5.3
-      pathe: 1.1.1
-      pkg-types: 1.0.3
-      postcss-import-resolver: 2.0.0
-      std-env: 3.3.3
-      ufo: 1.1.2
-      unimport: 3.0.14(rollup@2.79.1)
-      untyped: 1.3.2
-    transitivePeerDependencies:
-      - rollup
-      - supports-color
-    dev: true
-
   /@nuxt/schema@3.6.5(rollup@2.79.1):
     resolution: {integrity: sha512-UPUnMB0W5TZ/Pi1fiF71EqIsPlj8LGZqzhSf8wOeh538KHwxbA9r7cuvEUU92eXRksOZaylbea3fJxZWhOITVw==}
     engines: {node: ^14.18.0 || >=16.10.0}
@@ -2896,13 +2852,13 @@ packages:
       - encoding
       - supports-color
 
-  /@vite-pwa/nuxt@0.1.0(@nuxt/kit@3.6.3)(vite-plugin-pwa@0.16.4):
+  /@vite-pwa/nuxt@0.1.0(@nuxt/kit@3.6.5)(vite-plugin-pwa@0.16.4):
     resolution: {integrity: sha512-w6wm/0Y9yIqo6UTj9LeQUMR+xuRTf2sRdUTffu03SbRyWBzF7SnQcTqTRkXQy+NK+XafZuIDDLC12VkhValg4g==}
     peerDependencies:
       '@nuxt/kit': ^3.5.3
       vite-plugin-pwa: '>=0.16.3 <1'
     dependencies:
-      '@nuxt/kit': 3.6.3(rollup@2.79.1)
+      '@nuxt/kit': 3.6.5(rollup@2.79.1)
       vite-plugin-pwa: 0.16.4(vite@4.3.9)(workbox-build@7.0.0)(workbox-window@7.0.0)
     dev: true