From 895063fa36dd12ba4ffe7be0d7300bd390cd4b3f Mon Sep 17 00:00:00 2001
From: Crumb Owl <crumbowl@proton.me>
Date: Mon, 14 Jul 2025 21:28:40 +0000
Subject: [PATCH] ProductBarcode: improve readability  on CreateModal

---
 frontend/components/App/CreateModal.vue  |  8 +++-
 frontend/components/Item/CreateModal.vue | 57 +++++++++++-------------
 frontend/locales/en.json                 |  5 +--
 3 files changed, 36 insertions(+), 34 deletions(-)

diff --git a/frontend/components/App/CreateModal.vue b/frontend/components/App/CreateModal.vue
index 504c83db..1394ad18 100644
--- a/frontend/components/App/CreateModal.vue
+++ b/frontend/components/App/CreateModal.vue
@@ -2,7 +2,10 @@
   <Dialog v-if="isDesktop" :dialog-id="dialogId">
     <DialogScrollContent>
       <DialogHeader>
-        <DialogTitle>{{ title }}</DialogTitle>
+        <div class="flex items-center justify-items-center justify-between mr-4">
+          <DialogTitle>{{ title }}</DialogTitle>
+          <slot name="header-actions"/>
+        </div>
       </DialogHeader>
 
       <slot />
@@ -29,6 +32,9 @@
       <DrawerHeader>
         <DrawerTitle>{{ title }}</DrawerTitle>
       </DrawerHeader>
+      <div class="flex justify-center">
+        <slot name="header-actions" />
+      </div>
 
       <div class="m-2 overflow-y-auto p-2">
         <slot />
diff --git a/frontend/components/Item/CreateModal.vue b/frontend/components/Item/CreateModal.vue
index e8927669..a2ca6519 100644
--- a/frontend/components/Item/CreateModal.vue
+++ b/frontend/components/Item/CreateModal.vue
@@ -1,36 +1,33 @@
 <template>
   <BaseModal :dialog-id="DialogID.CreateItem" :title="$t('components.item.create_modal.title')">
-    <div class="flex flex-row-reverse">
-      <TooltipProvider :delay-duration="0">
-        <ButtonGroup>
-          <Tooltip>
-            <TooltipTrigger>
-              <Button variant="outline" :disabled="loading" data-pos="start" @click="openBarcodeDialog()">
-                <MdiBarcode class="size-5" />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent>
-              <p>{{ $t("components.item.create_modal.product_tooltip_input_barcode") }}</p>
-            </TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger>
-              <Button variant="outline" :disabled="loading" data-pos="end" @click="openQrScannerPage()">
-                <MdiBarcodeScan class="size-5" />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent>
-              <p>{{ $t("components.item.create_modal.product_tooltip_scan_barcode") }}</p>
-            </TooltipContent>
-          </Tooltip>
-        </ButtonGroup>
-      </TooltipProvider>
-      <div class="mx-2 flex items-center justify-center">
-        {{ $t("components.item.create_modal.product_autofill") }}
+     <template v-slot:header-actions>
+      <div class="flex flex-end">
+        <TooltipProvider :delay-duration="0">
+          <ButtonGroup>
+            <Tooltip>
+              <TooltipTrigger>
+                <Button variant="outline" :disabled="loading" data-pos="start" @click="openQrScannerPage()">
+                  <MdiBarcodeScan class="size-5" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>{{ $t("components.item.create_modal.product_tooltip_scan_barcode") }}</p>
+              </TooltipContent>
+            </Tooltip>
+            <Tooltip>
+              <TooltipTrigger>
+                <Button variant="outline" :disabled="loading" data-pos="end" @click="openBarcodeDialog()">
+                  <MdiBarcode class="size-5" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>{{ $t("components.item.create_modal.product_tooltip_input_barcode") }}</p>
+              </TooltipContent>
+            </Tooltip>
+          </ButtonGroup>
+        </TooltipProvider>
       </div>
-    </div>
-
-    <div class="border-t" />
+    </template>
 
     <form class="flex flex-col gap-2" @submit.prevent="create()">
       <LocationSelector v-model="form.location" />
diff --git a/frontend/locales/en.json b/frontend/locales/en.json
index a7a3ebc3..9024299d 100644
--- a/frontend/locales/en.json
+++ b/frontend/locales/en.json
@@ -100,9 +100,8 @@
                 "item_photo": "Item Photo 📷",
                 "item_quantity": "Item Quantity",
                 "parent_item": "Parent Item",
-                "product_autofill": "Product autofill:",
-                "product_tooltip_input_barcode": "Manually input barcode",
-                "product_tooltip_scan_barcode": "Scan barcode with 📷",
+                "product_tooltip_input_barcode": "Autofill with a manually provided barcode",
+                "product_tooltip_scan_barcode": "Autofill with a barcode from 📷",
                 "rotate_photo": "Rotate photo",
                 "set_as_primary_photo": "Set as { isPrimary, select, true {non-} false {} other {}}primary photo",
                 "title": "Create Item",