stash

frontend/src/components/TreeView.vue

@@ -8,7 +8,7 @@
                     <b-icon-chevron-down v-else></b-icon-chevron-down>
                 </button>
                 <span v-else class="tree-view-toggle-spacer"></span>
-                <div class="tree-view-content">
+                <div class="tree-view-content text-truncate">
                     <slot :item="node" :expanded="isExpanded(node)" :has-children="hasChildren(node)"
                           :depth="depth" :toggle="() => toggleNode(node)"></slot>
                 </div>
@@ -64,9 +64,6 @@
 .tree-view-content {
     flex: 1 1 auto;
     min-width: 0;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
 }
 </style>
 

frontend/src/components/workflow/workflows/BulkItemImportWorkflow.vue

@@ -13,14 +13,8 @@
             <div class="upload-section mb-4">
                 <div class="card">
                     <div class="card-body">
-                        <div v-if="!uploadedFile" class="upload-dropzone text-center py-5"
-                             @dragover.prevent
-                             @dragenter.prevent
-                             @drop.prevent="handleFileDrop"
-                             :class="{ 'dragover': isDragOver }"
-                             @dragenter="isDragOver = true"
-                             @dragleave="isDragOver = false">
-
+                        <drag-drop-file-source v-if="!uploadedFile" @input="handleFilesDropped">
+                            <div class="upload-dropzone text-center py-5">
                                 <b-icon-cloud-upload class="text-primary mb-3" style="font-size: 4rem;"></b-icon-cloud-upload>
                                 <h5 class="mb-3">Upload Your Data File</h5>
                                 <p class="text-muted mb-4">
@@ -52,6 +46,7 @@
                                     </small>
                                 </div>
                             </div>
+                        </drag-drop-file-source>
 
                         <!-- File Info Display -->
                         <div v-else class="file-info">
@@ -264,6 +259,7 @@
 <script>
 import * as BIcons from "bootstrap-icons-vue";
 import { mapActions } from 'vuex';
+import DragDropFileSource from "@/components/inputs/DragDropFileSource.vue";
 
 // Implements every step of 'import-items'; steps 2-5,7 use a generic placeholder. See docs/implementation.md#bulk-item-import-workflow.
 export default {
@@ -299,6 +295,7 @@ export default {
         }
     },
     components: {
+        DragDropFileSource,
         ...BIcons
     },
     props: {
@@ -322,7 +319,6 @@ export default {
             uploadTime: null,
             processingFile: false,
             processingStatus: '',
-            isDragOver: false,
             uploadError: null,
             fileAnalysis: null,
             detectedColumns: [],
@@ -372,9 +368,9 @@ export default {
         ...mapActions(['createInventoryItem']),
 
         // --- Step 1: File upload ---
-        handleFileDrop(event) {
-            this.isDragOver = false;
-            const files = event.dataTransfer.files;
+        // DragDropFileSource already hashed/base64-encoded the dropped file to match the
+        // content-addressed file model - readAsText() below reverses that back to text.
+        handleFilesDropped(files) {
             if (files.length > 0) {
                 this.processFile(files[0]);
             }
@@ -418,10 +414,20 @@ export default {
             }
         },
 
+        // Accepts either a browser File (from the "Choose File" input) or the hashed
+        // {name, size, mime_type, data, hash} descriptor DragDropFileSource emits on drop.
+        async readAsText(file) {
+            if (typeof file.text === 'function') {
+                return file.text();
+            }
+            const bytes = Uint8Array.from(atob(file.data), c => c.charCodeAt(0));
+            return new TextDecoder().decode(bytes);
+        },
+
         async analyzeFile(file) {
             // Parsing happens entirely client-side; the backend only ever sees the resulting `items` list.
             if (file.name.endsWith('.csv')) {
-                const text = await file.text();
+                const text = await this.readAsText(file);
                 this.parsedRows = this.parseCsv(text);
             } else {
                 // Mock implementation; a real Excel parser would use a library like SheetJS.
@@ -619,7 +625,7 @@ export default {
 }
 
 .upload-dropzone:hover,
-.upload-dropzone.dragover {
+.dragover .upload-dropzone {
     border-color: #007bff;
     background-color: #f8f9ff;
 }

frontend/src/scss/_card.scss

@@ -68,3 +68,7 @@
   height: auto;
   object-fit: cover;
 }
+
+.table-action {
+  white-space: nowrap;
+}

frontend/src/scss/_forms.scss

@@ -78,3 +78,11 @@
 .input-group-text:not(:last-child) {
   border-right-width: 0;
 }
+
+.is-invalid input, .is-invalid select {
+  border: 1px solid var(--bs-danger);
+}
+
+.is-invalid .invalid-feedback {
+  display: block;
+}

frontend/src/views/Inventory.vue

@@ -300,10 +300,6 @@ export default {
 </script>
 
 <style scoped>
-.table-action {
-    white-space: nowrap;
-}
-
 .unguarded.btn-danger,
 .unguarded.btn-danger:hover,
 .unguarded.btn-danger:focus {

frontend/src/views/Pairing.vue

@@ -222,14 +222,6 @@ export default {
 </script>
 
 <style scoped>
-.is-invalid input, .is-invalid select {
-    border: 1px solid var(--bs-danger);
-}
-
-.is-invalid .invalid-feedback {
-    display: block;
-}
-
 .input-group-text svg {
     overflow: visible;
 }

frontend/src/views/Register.vue

@@ -196,14 +196,6 @@ export default {
 </script>
 
 <style scoped>
-.is-invalid input, .is-invalid select {
-    border: 1px solid var(--bs-danger);
-}
-
-.is-invalid .invalid-feedback {
-    display: block;
-}
-
 .visually-hidden {
     display: none;
 }

frontend/src/views/StorageLocation.vue

@@ -312,11 +312,6 @@ export default {
     align-items: center;
 }
 
-/* The th widths above leave Actions only the leftover 5% - without this it wraps mid-icon. */
-.table-action {
-    white-space: nowrap;
-}
-
 .btn-group.mt-auto {
     width: 100%;
 }