From cb0437c98b9549fa5ceda4923f5a136f44a2d006 Mon Sep 17 00:00:00 2001
From: jedi <git@m.j3d1.de>
Date: Sun, 6 Sep 2026 05:22:56 +0200
Subject: [PATCH 1/2] stash

---
 frontend/src/scss/_card.scss     | 11 ++++++
 frontend/src/scss/_masonry.scss  | 35 ++++++++++++++++
 frontend/src/scss/toolshed.scss  |  1 +
 frontend/src/views/Files.vue     | 46 +--------------------
 frontend/src/views/Inventory.vue | 53 ++-----------------------
 frontend/src/views/Search.vue    | 68 ++++++++++++++++++++++++--------
 6 files changed, 103 insertions(+), 111 deletions(-)
 create mode 100644 frontend/src/scss/_masonry.scss

diff --git a/frontend/src/scss/_card.scss b/frontend/src/scss/_card.scss
index 45c5794..bc5cd63 100644
--- a/frontend/src/scss/_card.scss
+++ b/frontend/src/scss/_card.scss
@@ -56,4 +56,15 @@
       padding-left: 1.25rem;
     }
   }
+}
+
+.img-preview-fixed {
+  height: 160px;
+  object-fit: cover;
+}
+
+.img-preview-fluid {
+  width: 100%;
+  height: auto;
+  object-fit: cover;
 }
\ No newline at end of file
diff --git a/frontend/src/scss/_masonry.scss b/frontend/src/scss/_masonry.scss
new file mode 100644
index 0000000..0425047
--- /dev/null
+++ b/frontend/src/scss/_masonry.scss
@@ -0,0 +1,35 @@
+// Shared by any view rendering a Pinterest-style image grid (Inventory.vue,
+// Search.vue, Files.vue) - keeps their column counts and breakpoints in sync.
+.masonry-grid {
+  column-count: 2;
+  column-gap: 1rem;
+}
+
+.masonry-item {
+  break-inside: avoid;
+  margin-bottom: 1rem;
+}
+
+@include media-breakpoint-up(md) {
+  .masonry-grid {
+    column-count: 3;
+  }
+}
+
+@include media-breakpoint-up(lg) {
+  .masonry-grid {
+    column-count: 4;
+  }
+}
+
+@include media-breakpoint-up(xl) {
+  .masonry-grid {
+    column-count: 6;
+  }
+}
+
+@include media-breakpoint-up(xxl) {
+  .masonry-grid {
+    column-count: 12;
+  }
+}
diff --git a/frontend/src/scss/toolshed.scss b/frontend/src/scss/toolshed.scss
index 5a41d97..0a4d36d 100644
--- a/frontend/src/scss/toolshed.scss
+++ b/frontend/src/scss/toolshed.scss
@@ -95,6 +95,7 @@ $body-color: $gray-700;
 @import "tags";
 @import "dropdown";
 @import "label-fonts";
+@import "masonry";
 
 #root, body, html {
   height: 100%;
diff --git a/frontend/src/views/Files.vue b/frontend/src/views/Files.vue
index 7668656..307bf53 100644
--- a/frontend/src/views/Files.vue
+++ b/frontend/src/views/Files.vue
@@ -12,7 +12,7 @@
                             <div class="masonry-item" v-for="file in only_images(files)" :key="file.id">
                                 <deletable-wrapper confirm-message="Delete this file? This cannot be undone." @delete="deleteFile(file)">
                                     <authenticated-image :src="thumbnailPathForHash(file.hash)" :owner="file.owner"
-                                                         class="img-preview-masonry"/>
+                                                         class="img-preview-fluid"/>
                                 </deletable-wrapper>
                             </div>
                         </div>
@@ -72,51 +72,9 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
-@import "../scss/breakpoints";
-
-.img-preview-masonry {
-    width: 100%;
-    height: auto;
-    object-fit: cover;
-}
-
+<style scoped>
 .masonry-item :deep(span) {
     display: block !important;
     width: 100%;
 }
-
-.masonry-grid {
-    column-count: 2;
-    column-gap: 1rem;
-}
-
-.masonry-item {
-    break-inside: avoid;
-    margin-bottom: 1rem;
-}
-
-@include media-breakpoint-up(md) {
-    .masonry-grid {
-        column-count: 3;
-    }
-}
-
-@include media-breakpoint-up(lg) {
-    .masonry-grid {
-        column-count: 4;
-    }
-}
-
-@include media-breakpoint-up(xl) {
-    .masonry-grid {
-        column-count: 6;
-    }
-}
-
-@include media-breakpoint-up(xxl) {
-    .masonry-grid {
-        column-count: 12;
-    }
-}
 </style>
\ No newline at end of file
diff --git a/frontend/src/views/Inventory.vue b/frontend/src/views/Inventory.vue
index f8f35a7..5445d21 100644
--- a/frontend/src/views/Inventory.vue
+++ b/frontend/src/views/Inventory.vue
@@ -83,7 +83,7 @@
                                             <authenticated-image v-if="only_images(item.files).length > 0"
                                                                  :src="only_images(item.files)[0].name"
                                                                  :owner="only_images(item.files)[0].owner"
-                                                                 class="card-img-top img-preview-masonry"/>
+                                                                 class="card-img-top img-preview-fluid"/>
                                             <div class="card-body">
                                                 <h5 class="card-title mb-0">
                                                     <router-link :to="itemRoute(item)">
@@ -127,7 +127,7 @@
                                             <authenticated-image v-if="only_images(item.files).length > 0"
                                                                  :src="only_images(item.files)[0].name"
                                                                  :owner="only_images(item.files)[0].owner"
-                                                                 class="card-img-top img-preview-grid"/>
+                                                                 class="card-img-top img-preview-fixed"/>
                                             <div class="card-body d-flex flex-column flex-grow-1">
                                                 <h5 class="card-title mb-0">
                                                     <router-link :to="itemRoute(item)">
@@ -299,58 +299,11 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
-@import "../scss/breakpoints";
-
-.img-preview-grid {
-    height: 160px;
-    object-fit: cover;
-}
-
-.img-preview-masonry {
-    width: 100%;
-    height: auto;
-    object-fit: cover;
-}
-
+<style scoped>
 .table-action {
     white-space: nowrap;
 }
 
-.masonry-grid {
-    column-count: 2;
-    column-gap: 1rem;
-}
-
-.masonry-item {
-    break-inside: avoid;
-    margin-bottom: 1rem;
-}
-
-@include media-breakpoint-up(md) {
-    .masonry-grid {
-        column-count: 3;
-    }
-}
-
-@include media-breakpoint-up(lg) {
-    .masonry-grid {
-        column-count: 4;
-    }
-}
-
-@include media-breakpoint-up(xl) {
-    .masonry-grid {
-        column-count: 6;
-    }
-}
-
-@include media-breakpoint-up(xxl) {
-    .masonry-grid {
-        column-count: 12;
-    }
-}
-
 .unguarded.btn-danger,
 .unguarded.btn-danger:hover,
 .unguarded.btn-danger:focus {
diff --git a/frontend/src/views/Search.vue b/frontend/src/views/Search.vue
index c922b5a..97998e3 100644
--- a/frontend/src/views/Search.vue
+++ b/frontend/src/views/Search.vue
@@ -6,14 +6,19 @@
                 <div class="row">
                     <div class="col-12">
                         <div class="card">
-                            <div class="card-header">
+                            <div class="card-header d-flex justify-content-between align-items-center flex-wrap">
                                 <h5 class="card-title mb-0">Results for "{{ query }}"</h5>
-                                <button v-if="layout === 'grid'" @click="layout = 'table'" class="btn">
-                                    <b-icon-list></b-icon-list>
-                                </button>
-                                <button v-else @click="layout = 'grid'" class="btn">
-                                    <b-icon-grid></b-icon-grid>
-                                </button>
+                                <div class="btn-group">
+                                    <button v-if="layout === 'grid'" @click="layout = 'masonry'" class="btn">
+                                        <b-icon-columns-gap></b-icon-columns-gap>
+                                    </button>
+                                    <button v-else-if="layout === 'masonry'" @click="layout = 'table'" class="btn">
+                                        <b-icon-list></b-icon-list>
+                                    </button>
+                                    <button v-else @click="layout = 'grid'" class="btn">
+                                        <b-icon-grid></b-icon-grid>
+                                    </button>
+                                </div>
                             </div>
                             <table class="table table-striped" v-if="layout === 'table'">
                                 <thead>
@@ -38,6 +43,29 @@
                                 </tr>
                                 </tbody>
                             </table>
+                            <div class="card-body" v-else-if="layout === 'masonry'">
+                                <div class="masonry-grid">
+                                    <div class="masonry-item" v-for="item in search_results" :key="item.id">
+                                        <div class="card">
+                                            <authenticated-image v-if="only_images(item.files).length > 0"
+                                                                 :src="only_images(item.files)[0].name"
+                                                                 :owner="only_images(item.files)[0].owner"
+                                                                 class="card-img-top img-preview-fluid"/>
+                                            <div class="card-body">
+                                                <h5 class="card-title mb-0">
+                                                    <router-link :to="item.route">
+                                                        {{ item.name }}
+                                                    </router-link></h5>
+                                                <div class="card-text text-black-50">
+                                                    <user-name-tag :user="item" :width="24" :height="24"/>
+                                                    <br>
+                                                    <span class="float-right">{{ item.owned_quantity }}</span>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
                             <div class="card-body" v-else>
                                 <div class="row">
                                     <div class="col-12 col-md-4 col-lg-3 col-xl-2" v-for="item in search_results"
@@ -46,7 +74,7 @@
                                             <authenticated-image v-if="only_images(item.files).length > 0"
                                                                  :src="only_images(item.files)[0].name"
                                                                  :owner="only_images(item.files)[0].owner"
-                                                                 class="card-img-top img-preview"/>
+                                                                 class="card-img-top img-preview-fixed"/>
                                             <div class="card-body">
                                                 <h5 class="card-title mb-0">
                                                     <router-link :to="item.route">
@@ -71,7 +99,7 @@
 </template>
 
 <script>
-import {mapActions} from 'vuex';
+import {mapActions, mapGetters} from 'vuex';
 import * as BIcons from "bootstrap-icons-vue";
 import BaseLayout from "@/components/BaseLayout.vue";
 import SearchBox from "@/components/SearchBox.vue";
@@ -96,12 +124,23 @@ export default {
     },
     data() {
         return {
-            search_results: [],
-            layout: 'table'
+            search_results: []
+        }
+    },
+    computed: {
+        ...mapGetters(['getPreference']),
+        // Implicit preference: remembers the last-used view without a settings-page entry. See docs/implementation.md#preferences.
+        layout: {
+            get() {
+                return this.getPreference('ui.remembered.search_view_mode', 'grid')
+            },
+            set(value) {
+                this.setDevicePreference({key: 'ui.remembered.search_view_mode', value})
+            }
         }
     },
     methods: {
-        ...mapActions(['fetchSearchResults']),
+        ...mapActions(['fetchSearchResults', 'setDevicePreference']),
         only_images(files) {
             if (!files) return [];
             return files.filter(file => file.mime_type.startsWith("image/"));
@@ -130,8 +169,3 @@ export default {
 }
 </script>
 
-<style scoped>
-.img-preview {
-    object-fit: cover;
-}
-</style>
\ No newline at end of file

From b489b56e6af03833337ff1858f9963085a5bed5e Mon Sep 17 00:00:00 2001
From: jedi <git@m.j3d1.de>
Date: Sun, 6 Sep 2026 11:50:11 +0200
Subject: [PATCH 2/2] stash

---
 frontend/src/components/TreeView.vue          |  5 +-
 .../workflows/BulkItemImportWorkflow.vue      | 88 ++++++++++---------
 frontend/src/scss/_card.scss                  |  4 +
 frontend/src/scss/_forms.scss                 |  8 ++
 frontend/src/views/Inventory.vue              |  4 -
 frontend/src/views/Pairing.vue                |  8 --
 frontend/src/views/Register.vue               |  8 --
 frontend/src/views/StorageLocation.vue        |  5 --
 8 files changed, 60 insertions(+), 70 deletions(-)

diff --git a/frontend/src/components/TreeView.vue b/frontend/src/components/TreeView.vue
index 0a78484..bb7595b 100644
--- a/frontend/src/components/TreeView.vue
+++ b/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>
 
diff --git a/frontend/src/components/workflow/workflows/BulkItemImportWorkflow.vue b/frontend/src/components/workflow/workflows/BulkItemImportWorkflow.vue
index cb0d3c3..d3eb6ba 100644
--- a/frontend/src/components/workflow/workflows/BulkItemImportWorkflow.vue
+++ b/frontend/src/components/workflow/workflows/BulkItemImportWorkflow.vue
@@ -13,45 +13,40 @@
             <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">
+                                    Drag and drop your CSV or Excel file here, or click to browse
+                                </p>
 
-                            <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">
-                                Drag and drop your CSV or Excel file here, or click to browse
-                            </p>
+                                <input
+                                    type="file"
+                                    ref="fileInput"
+                                    accept=".csv,.xlsx,.xls"
+                                    @change="handleFileSelect"
+                                    class="d-none"
+                                />
 
-                            <input
-                                type="file"
-                                ref="fileInput"
-                                accept=".csv,.xlsx,.xls"
-                                @change="handleFileSelect"
-                                class="d-none"
-                            />
+                                <div class="mb-3">
+                                    <button class="btn btn-primary btn-lg me-2" @click="$refs.fileInput.click()">
+                                        <b-icon-folder-open class="me-2"></b-icon-folder-open>
+                                        Choose File
+                                    </button>
+                                    <button class="btn btn-outline-info" @click="downloadTemplate">
+                                        <b-icon-download class="me-2"></b-icon-download>
+                                        Download Template
+                                    </button>
+                                </div>
 
-                            <div class="mb-3">
-                                <button class="btn btn-primary btn-lg me-2" @click="$refs.fileInput.click()">
-                                    <b-icon-folder-open class="me-2"></b-icon-folder-open>
-                                    Choose File
-                                </button>
-                                <button class="btn btn-outline-info" @click="downloadTemplate">
-                                    <b-icon-download class="me-2"></b-icon-download>
-                                    Download Template
-                                </button>
+                                <div class="supported-formats">
+                                    <small class="text-muted">
+                                        Supported formats: CSV (.csv), Excel (.xlsx, .xls)
+                                    </small>
+                                </div>
                             </div>
-
-                            <div class="supported-formats">
-                                <small class="text-muted">
-                                    Supported formats: CSV (.csv), Excel (.xlsx, .xls)
-                                </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;
 }
diff --git a/frontend/src/scss/_card.scss b/frontend/src/scss/_card.scss
index bc5cd63..82d579f 100644
--- a/frontend/src/scss/_card.scss
+++ b/frontend/src/scss/_card.scss
@@ -67,4 +67,8 @@
   width: 100%;
   height: auto;
   object-fit: cover;
+}
+
+.table-action {
+  white-space: nowrap;
 }
\ No newline at end of file
diff --git a/frontend/src/scss/_forms.scss b/frontend/src/scss/_forms.scss
index f8c1953..d4f61ce 100644
--- a/frontend/src/scss/_forms.scss
+++ b/frontend/src/scss/_forms.scss
@@ -77,4 +77,12 @@
 
 .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;
 }
\ No newline at end of file
diff --git a/frontend/src/views/Inventory.vue b/frontend/src/views/Inventory.vue
index 5445d21..b225273 100644
--- a/frontend/src/views/Inventory.vue
+++ b/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 {
diff --git a/frontend/src/views/Pairing.vue b/frontend/src/views/Pairing.vue
index 8a88e36..0268bcf 100644
--- a/frontend/src/views/Pairing.vue
+++ b/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;
 }
diff --git a/frontend/src/views/Register.vue b/frontend/src/views/Register.vue
index cb8f164..997e978 100644
--- a/frontend/src/views/Register.vue
+++ b/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;
 }
diff --git a/frontend/src/views/StorageLocation.vue b/frontend/src/views/StorageLocation.vue
index 3f95356..a806763 100644
--- a/frontend/src/views/StorageLocation.vue
+++ b/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%;
 }