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

src/api/__tests__/auth.spec.ts

@@ -43,9 +43,9 @@ describe('auth API', () => {
         json: async () => ({ message: 'Invalid email or password' }),
       } as unknown as Response)
 
-      await expect(
-        loginApi({ email: 'user@example.com', password: 'wrong' }),
-      ).rejects.toThrow('Invalid email or password')
+      await expect(loginApi({ email: 'user@example.com', password: 'wrong' })).rejects.toThrow(
+        'Invalid email or password',
+      )
     })
   })
 
@@ -83,9 +83,7 @@ describe('auth API', () => {
         },
       } as unknown as Response)
 
-      await expect(
-        refreshApi({ refresh_token: 'invalid-token' }),
-      ).rejects.toThrow('Unauthorized')
+      await expect(refreshApi({ refresh_token: 'invalid-token' })).rejects.toThrow('Unauthorized')
     })
   })
 
@@ -115,9 +113,9 @@ describe('auth API', () => {
         json: async () => ({ error: 'failed to logout' }),
       } as unknown as Response)
 
-      await expect(
-        logoutApi({ refresh_token: 'invalid-token' }),
-      ).rejects.toThrow('failed to logout')
+      await expect(logoutApi({ refresh_token: 'invalid-token' })).rejects.toThrow(
+        'failed to logout',
+      )
     })
   })
 
@@ -134,7 +132,7 @@ describe('auth API', () => {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
-          'Authorization': 'Bearer access-123',
+          Authorization: 'Bearer access-123',
         },
         body: JSON.stringify({}),
       })

src/assets/base.css

@@ -44,6 +44,11 @@
   font-weight: normal;
 }
 
+ul,
+ol {
+  padding: 0;
+}
+
 html {
   -webkit-tap-highlight-color: transparent;
 }

src/components/ListCard.vue

@@ -1,54 +1,155 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, ref, onMounted, onUnmounted } from 'vue'
 import { RouterLink } from 'vue-router'
 import type { LocalList } from '@/database/db'
 import { useListsStore } from '@/stores/lists'
 
 const props = defineProps<{ list: LocalList }>()
+const emit = defineEmits<{
+  (e: 'share', list: LocalList): void
+}>()
 
 const listsStore = useListsStore()
+const isMenuOpen = ref(false)
+const menuContainerRef = ref<HTMLElement | null>(null)
 
 const items = computed(() => listsStore.itemsForList(props.list.id))
 const completedCount = computed(() => items.value.filter((item) => item.is_completed).length)
+
+function toggleMenu(event: Event) {
+  event.preventDefault()
+  event.stopPropagation()
+  isMenuOpen.value = !isMenuOpen.value
+}
+
+function handleShare(event: Event) {
+  event.preventDefault()
+  event.stopPropagation()
+  isMenuOpen.value = false
+  emit('share', props.list)
+}
+
+function handleClickOutside(event: MouseEvent) {
+  if (menuContainerRef.value && !menuContainerRef.value.contains(event.target as Node)) {
+    isMenuOpen.value = false
+  }
+}
+
+function handleKeydown(event: KeyboardEvent) {
+  if (event.key === 'Escape' && isMenuOpen.value) {
+    isMenuOpen.value = false
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside)
+  document.addEventListener('keydown', handleKeydown)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside)
+  document.removeEventListener('keydown', handleKeydown)
+})
 </script>
 
 <template>
-  <RouterLink :to="`/lists/${list.id}`" class="list-card card">
-    <div class="list-card-main">
-      <h3>{{ list.name }}</h3>
-      <p class="meta">
-        {{ completedCount }}/{{ items.length }} done
-        <span v-if="list.pendingSync" class="pending-tag">syncing…</span>
-      </p>
+  <div class="list-card card">
+    <RouterLink :to="`/lists/${list.id}`" class="list-card-link">
+      <div class="list-card-main">
+        <h3>{{ list.name }}</h3>
+        <p class="meta">
+          {{ completedCount }}/{{ items.length }} done
+          <span v-if="list.pendingSync" class="pending-tag">syncing…</span>
+        </p>
+      </div>
+      <span class="chevron">›</span>
+    </RouterLink>
+
+    <div ref="menuContainerRef" class="menu-container">
+      <button
+        type="button"
+        class="menu-trigger-btn"
+        aria-label="List options"
+        aria-haspopup="true"
+        :aria-expanded="isMenuOpen"
+        title="More options"
+        @click="toggleMenu"
+      >
+        <svg class="dots-icon" viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
+          <circle cx="5" cy="12" r="2" />
+          <circle cx="12" cy="12" r="2" />
+          <circle cx="19" cy="12" r="2" />
+        </svg>
+      </button>
+
+      <div v-if="isMenuOpen" class="submenu-dropdown card" role="menu">
+        <button type="button" class="submenu-item" role="menuitem" @click="handleShare">
+          <svg
+            class="submenu-icon"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <circle cx="18" cy="5" r="3" />
+            <circle cx="6" cy="12" r="3" />
+            <circle cx="18" cy="19" r="3" />
+            <line x1="8.59" y1="13.51" x2="15.42" y2="17.49" />
+            <line x1="15.41" y1="6.51" x2="8.59" y2="10.49" />
+          </svg>
+          <span>Share list</span>
+        </button>
+      </div>
     </div>
-    <span class="chevron">›</span>
-  </RouterLink>
+  </div>
 </template>
 
 <style scoped>
 .list-card {
+  position: relative;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 0.75rem;
-  padding: 1rem 1.1rem;
+  gap: 0.5rem;
+  padding: 0.85rem 1rem;
   color: inherit;
   transition:
     border-color 0.15s ease-in-out,
     transform 0.1s ease-in-out;
 }
 
-.list-card:active {
-  transform: scale(0.995);
-}
-
 .list-card:hover {
   border-color: var(--c-border-hover);
 }
 
-.list-card h3 {
+.list-card-link {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  flex: 1;
+  min-width: 0;
+  color: inherit;
+  text-decoration: none;
+}
+
+.list-card-link:active {
+  transform: scale(0.995);
+}
+
+.list-card-main {
+  flex: 1;
+  min-width: 0;
+}
+
+.list-card-main h3 {
   font-size: 1.02rem;
   margin-bottom: 0.2rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .meta {
@@ -66,5 +167,96 @@ const completedCount = computed(() => items.value.filter((item) => item.is_compl
 .chevron {
   color: var(--c-text-soft);
   font-size: 1.3rem;
+  line-height: 1;
+  padding-right: 0.25rem;
+}
+
+.menu-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.menu-trigger-btn {
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+  color: var(--c-text-soft);
+  cursor: pointer;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  transition:
+    background-color 0.15s ease-in-out,
+    color 0.15s ease-in-out,
+    border-color 0.15s ease-in-out;
+}
+
+.menu-trigger-btn:hover,
+.menu-trigger-btn[aria-expanded='true'] {
+  background-color: var(--c-bg-mute);
+  color: var(--c-heading);
+  border-color: var(--c-border);
+}
+
+.dots-icon {
+  display: block;
+}
+
+.submenu-dropdown {
+  position: absolute;
+  top: calc(100% + 6px);
+  right: 0;
+  z-index: 30;
+  min-width: 140px;
+  background-color: var(--c-bg-elevated);
+  border: 1px solid var(--c-border-hover);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-md);
+  padding: 0.35rem;
+  animation: dropdownIn 0.12s ease-out;
+}
+
+.submenu-item {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  width: 100%;
+  padding: 0.5rem 0.65rem;
+  background: transparent;
+  border: none;
+  border-radius: var(--radius-sm);
+  color: var(--c-heading);
+  font-size: 0.85rem;
+  cursor: pointer;
+  text-align: left;
+  transition:
+    background-color 0.15s ease-in-out,
+    color 0.15s ease-in-out;
+}
+
+.submenu-item:hover {
+  background-color: var(--c-bg-mute);
+  color: var(--c-accent-strong);
+}
+
+.submenu-icon {
+  width: 15px;
+  height: 15px;
+  flex-shrink: 0;
+}
+
+@keyframes dropdownIn {
+  from {
+    opacity: 0;
+    transform: translateY(-4px) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
 }
 </style>

src/stores/__tests__/lists.spec.ts

@@ -84,14 +84,14 @@ vi.mock('@/database/db', () => ({
 }))
 
 const listsApiMocks = vi.hoisted(() => ({
-  getListsApi: vi.fn(),
-  createListApi: vi.fn(),
-  getListItemsApi: vi.fn(),
-  createListItemApi: vi.fn(),
-  updateListItemApi: vi.fn(),
-  setListItemCompletedApi: vi.fn(),
-  addUserToListApi: vi.fn(),
-  removeUserFromListApi: vi.fn(),
+  getListsApi: vi.fn<() => Promise<unknown>>(),
+  createListApi: vi.fn<() => Promise<unknown>>(),
+  getListItemsApi: vi.fn<() => Promise<unknown>>(),
+  createListItemApi: vi.fn<() => Promise<unknown>>(),
+  updateListItemApi: vi.fn<() => Promise<unknown>>(),
+  setListItemCompletedApi: vi.fn<() => Promise<unknown>>(),
+  addUserToListApi: vi.fn<() => Promise<unknown>>(),
+  removeUserFromListApi: vi.fn<() => Promise<unknown>>(),
 }))
 
 vi.mock('@/api/lists', () => listsApiMocks)
@@ -254,9 +254,7 @@ describe('useListsStore', () => {
     const store = useListsStore()
     const localList = await store.createList('Local only')
 
-    listsApiMocks.getListsApi.mockResolvedValueOnce([
-      { id: localList.id, name: 'Server version' },
-    ])
+    listsApiMocks.getListsApi.mockResolvedValueOnce([{ id: localList.id, name: 'Server version' }])
 
     await store.pullFromServer()
 

src/stores/lists.ts

@@ -211,9 +211,7 @@ export const useListsStore = defineStore('lists', () => {
       const payload = queueEntry.payload as { list_item_id?: string }
       await db.syncQueue.update(queueEntry.id!, {
         localListItemId: newId,
-        payload: payload?.list_item_id
-          ? { ...payload, list_item_id: newId }
-          : queueEntry.payload,
+        payload: payload?.list_item_id ? { ...payload, list_item_id: newId } : queueEntry.payload,
       })
     }
   }

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>