fix: moved "share list" to list overview, rather than list detail view

src/views/ListDetailView.vue

@@ -10,7 +10,6 @@ const router = useRouter()
 const listsStore = useListsStore()
 
 const newItemTitle = ref('')
-const newUserId = ref('')
 const isAddingItem = ref(false)
 const itemError = ref('')
 
@@ -38,13 +37,6 @@ async function handleAddItem() {
     isAddingItem.value = false
   }
 }
-
-async function handleAddUser() {
-  const userId = newUserId.value.trim()
-  if (!userId) return
-  await listsStore.addUserToList(props.id, userId)
-  newUserId.value = ''
-}
 </script>
 
 <template>
@@ -89,16 +81,6 @@ async function handleAddUser() {
       </section>
 
       <p v-if="items.length === 0" class="empty-hint">No items yet — add your first one above.</p>
-
-      <section class="card share-card">
-        <h4>Share this list</h4>
-        <form class="add-user-form" @submit.prevent="handleAddUser">
-          <div class="field">
-            <input v-model="newUserId" type="text" placeholder="User ID" />
-          </div>
-          <button type="submit" class="btn btn-secondary">Add</button>
-        </form>
-      </section>
     </template>
 
     <p v-else class="empty-hint">List not found on this device.</p>
@@ -157,6 +139,8 @@ h1 {
 
 .items-list {
   list-style: none;
+  padding: 0;
+  margin: 0;
 }
 
 .empty-hint {
@@ -165,28 +149,4 @@ h1 {
   text-align: center;
   padding: 1.5rem 0;
 }
-
-.share-card {
-  padding: 1rem 1.1rem;
-  margin-top: 1.5rem;
-}
-
-.share-card h4 {
-  font-size: 0.85rem;
-  margin-bottom: 0.75rem;
-}
-
-.add-user-form {
-  display: flex;
-  gap: 0.6rem;
-}
-
-.add-user-form .field {
-  flex: 1;
-}
-
-.add-user-form .btn {
-  width: auto;
-  flex-shrink: 0;
-}
 </style>

src/views/ListsView.vue

@@ -1,18 +1,29 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 import { useListsStore } from '@/stores/lists'
+import type { LocalList } from '@/database/db'
 import ListCard from '@/components/ListCard.vue'
+import ShareListModal from '@/components/ShareListModal.vue'
 
 const listsStore = useListsStore()
 
 const newListName = ref('')
 const isCreating = ref(false)
 const createError = ref('')
+const sharingList = ref<LocalList | null>(null)
 
 onMounted(() => {
   listsStore.loadLists()
 })
 
+function handleOpenShare(list: LocalList) {
+  sharingList.value = list
+}
+
+function handleCloseShare() {
+  sharingList.value = null
+}
+
 async function handleCreateList() {
   const name = newListName.value.trim()
   if (!name) return
@@ -43,7 +54,11 @@ async function handleCreateList() {
           :disabled="isCreating"
         />
       </div>
-      <button type="submit" class="btn btn-primary add-btn" :disabled="isCreating || !newListName.trim()">
+      <button
+        type="submit"
+        class="btn btn-primary add-btn"
+        :disabled="isCreating || !newListName.trim()"
+      >
         +
       </button>
     </form>
@@ -52,7 +67,7 @@ async function handleCreateList() {
 
     <ul v-if="listsStore.sortedLists.length > 0" class="lists">
       <li v-for="list in listsStore.sortedLists" :key="list.id">
-        <ListCard :list="list" />
+        <ListCard :list="list" @share="handleOpenShare(list)" />
       </li>
     </ul>
 
@@ -60,6 +75,8 @@ async function handleCreateList() {
       <p>No lists yet</p>
       <p class="empty-hint">Create your first list above to get started.</p>
     </div>
+
+    <ShareListModal v-if="sharingList" :list="sharingList" @close="handleCloseShare" />
   </main>
 </template>