src/api/__tests__/invites.spec.ts

@@ -0,0 +1,101 @@
+import { describe, it, expect, beforeEach, vi, afterEach } from 'vitest'
+import { setActivePinia, createPinia } from 'pinia'
+import { getInvitesApi, createInviteApi, deleteInviteApi } from '../invites'
+import { useAuthStore } from '@/stores/auth'
+import { API_BASE_URL } from '@/api/http'
+
+describe('invites API', () => {
+  const originalFetch = global.fetch
+
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    localStorage.clear()
+    vi.restoreAllMocks()
+
+    const authStore = useAuthStore()
+    authStore.setTokens({ access_token: 'token-123', refresh_token: 'refresh-123' })
+  })
+
+  afterEach(() => {
+    global.fetch = originalFetch
+    localStorage.clear()
+  })
+
+  it('getInvitesApi sends GET to /user/invites and returns the invites', async () => {
+    const mockInvites = [{ id: 'invite-1', code: 'ABC123' }]
+    const fetchMock = vi.fn<typeof fetch>().mockResolvedValueOnce({
+      ok: true,
+      status: 200,
+      json: async () => mockInvites,
+    } as unknown as Response)
+    global.fetch = fetchMock
+
+    const result = await getInvitesApi()
+
+    expect(fetchMock).toHaveBeenCalledWith(
+      `${API_BASE_URL}/user/invites`,
+      expect.objectContaining({ method: 'GET' }),
+    )
+    expect(result).toEqual(mockInvites)
+  })
+
+  it('getInvitesApi throws on failure', async () => {
+    global.fetch = vi.fn<typeof fetch>().mockResolvedValueOnce({
+      ok: false,
+      json: async () => ({ message: 'Failed' }),
+    } as unknown as Response)
+
+    await expect(getInvitesApi()).rejects.toThrow('Failed')
+  })
+
+  it('createInviteApi sends POST to /user/invites and returns the created invite', async () => {
+    const mockInvite = { id: 'invite-1', code: 'ABC123' }
+    const fetchMock = vi.fn<typeof fetch>().mockResolvedValueOnce({
+      ok: true,
+      status: 201,
+      json: async () => mockInvite,
+    } as unknown as Response)
+    global.fetch = fetchMock
+
+    const result = await createInviteApi()
+
+    expect(fetchMock).toHaveBeenCalledWith(
+      `${API_BASE_URL}/user/invites`,
+      expect.objectContaining({ method: 'POST' }),
+    )
+    expect(result).toEqual(mockInvite)
+  })
+
+  it('createInviteApi throws on failure', async () => {
+    global.fetch = vi.fn<typeof fetch>().mockResolvedValueOnce({
+      ok: false,
+      json: async () => ({ message: 'Failed to create invite' }),
+    } as unknown as Response)
+
+    await expect(createInviteApi()).rejects.toThrow('Failed to create invite')
+  })
+
+  it('deleteInviteApi sends DELETE to /user/invites/:id', async () => {
+    const fetchMock = vi.fn<typeof fetch>().mockResolvedValueOnce({
+      ok: true,
+      status: 204,
+    } as unknown as Response)
+    global.fetch = fetchMock
+
+    await deleteInviteApi('invite-1')
+
+    expect(fetchMock).toHaveBeenCalledWith(
+      `${API_BASE_URL}/user/invites/invite-1`,
+      expect.objectContaining({ method: 'DELETE' }),
+    )
+  })
+
+  it('deleteInviteApi throws on failure', async () => {
+    global.fetch = vi.fn<typeof fetch>().mockResolvedValueOnce({
+      ok: false,
+      json: async () => ({ message: 'Failed to delete invite' }),
+    } as unknown as Response)
+
+    await expect(deleteInviteApi('invite-1')).rejects.toThrow('Failed to delete invite')
+  })
+})

src/api/invites.ts

@@ -0,0 +1,26 @@
+import { apiClient } from '@/api/client'
+import { extractErrorMessage } from '@/api/http'
+import type { Invite } from '@/types/invite'
+
+export async function getInvitesApi(): Promise<Invite[]> {
+  const response = await apiClient.get('/user/invites')
+  if (!response.ok) {
+    throw new Error(await extractErrorMessage(response, 'Failed to load invites'))
+  }
+  return response.json()
+}
+
+export async function createInviteApi(): Promise<Invite> {
+  const response = await apiClient.post('/user/invites')
+  if (!response.ok) {
+    throw new Error(await extractErrorMessage(response, 'Failed to create invite'))
+  }
+  return response.json()
+}
+
+export async function deleteInviteApi(id: string): Promise<void> {
+  const response = await apiClient.delete(`/user/invites/${id}`)
+  if (!response.ok) {
+    throw new Error(await extractErrorMessage(response, 'Failed to delete invite'))
+  }
+}

src/components/BottomNav.vue

@@ -16,7 +16,7 @@ const listsStore = useListsStore()
         listsStore.pendingCount
       }}</span>
     </RouterLink>
-    <RouterLink to="/about" class="nav-item" active-class="is-active">
+    <RouterLink to="/account" class="nav-item" active-class="is-active">
       <span class="nav-icon">⚙</span>
       <span class="nav-label">Account</span>
     </RouterLink>

src/components/InvitesPanel.vue

@@ -0,0 +1,441 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, ref } from 'vue'
+import { getInvitesApi, createInviteApi, deleteInviteApi } from '@/api/invites'
+import type { Invite } from '@/types/invite'
+
+type InviteStatus = 'active' | 'used' | 'expired'
+
+const expanded = ref(false)
+const invites = ref<Invite[]>([])
+const isLoading = ref(false)
+const isCreating = ref(false)
+const error = ref('')
+const pendingDeleteId = ref<string | null>(null)
+const deletingId = ref<string | null>(null)
+const copiedId = ref<string | null>(null)
+
+let hasLoaded = false
+let copiedTimeout: ReturnType<typeof setTimeout> | undefined
+
+const activeCount = computed(
+  () => invites.value.filter((invite) => inviteStatus(invite) === 'active').length,
+)
+
+onBeforeUnmount(() => {
+  clearTimeout(copiedTimeout)
+})
+
+function isOffline(): boolean {
+  return typeof navigator !== 'undefined' && !navigator.onLine
+}
+
+async function toggleExpanded() {
+  expanded.value = !expanded.value
+  if (expanded.value && !hasLoaded) {
+    await loadInvites()
+  }
+}
+
+async function loadInvites() {
+  error.value = ''
+  if (isOffline()) {
+    error.value = 'You must be online to manage invites.'
+    return
+  }
+
+  isLoading.value = true
+  try {
+    invites.value = await getInvitesApi()
+    hasLoaded = true
+  } catch (err) {
+    error.value = err instanceof Error ? err.message : 'Failed to load invites'
+  } finally {
+    isLoading.value = false
+  }
+}
+
+async function handleCreate() {
+  error.value = ''
+  if (isOffline()) {
+    error.value = 'You must be online to create an invite.'
+    return
+  }
+
+  isCreating.value = true
+  try {
+    const invite = await createInviteApi()
+    invites.value = [invite, ...invites.value]
+    hasLoaded = true
+  } catch (err) {
+    error.value = err instanceof Error ? err.message : 'Failed to create invite'
+  } finally {
+    isCreating.value = false
+  }
+}
+
+function requestDelete(id: string) {
+  error.value = ''
+  pendingDeleteId.value = id
+}
+
+function cancelDelete() {
+  pendingDeleteId.value = null
+}
+
+async function confirmDelete(id: string) {
+  error.value = ''
+  if (isOffline()) {
+    error.value = 'You must be online to delete an invite.'
+    pendingDeleteId.value = null
+    return
+  }
+
+  deletingId.value = id
+  try {
+    await deleteInviteApi(id)
+    invites.value = invites.value.filter((invite) => invite.id !== id)
+  } catch (err) {
+    error.value = err instanceof Error ? err.message : 'Failed to delete invite'
+  } finally {
+    deletingId.value = null
+    pendingDeleteId.value = null
+  }
+}
+
+async function copyCode(invite: Invite) {
+  try {
+    await navigator.clipboard.writeText(invite.code)
+    copiedId.value = invite.id
+    clearTimeout(copiedTimeout)
+    copiedTimeout = setTimeout(() => {
+      copiedId.value = null
+    }, 1500)
+  } catch {
+    // Clipboard access denied or unavailable; nothing sensible to do.
+  }
+}
+
+function inviteStatus(invite: Invite): InviteStatus {
+  if (invite.consumed_at) return 'used'
+  if (invite.expires_at && new Date(invite.expires_at).getTime() < Date.now()) return 'expired'
+  return 'active'
+}
+
+function statusLabel(invite: Invite): string {
+  const status = inviteStatus(invite)
+  return status === 'used' ? 'Used' : status === 'expired' ? 'Expired' : 'Active'
+}
+
+// Standard "time ago"/"time until" formatter: walk unit divisions until the
+// duration fits in one, so both past and future dates read naturally.
+function formatRelative(dateStr: string): string {
+  const divisions: [number, Intl.RelativeTimeFormatUnit][] = [
+    [60, 'seconds'],
+    [60, 'minutes'],
+    [24, 'hours'],
+    [7, 'days'],
+    [4.34524, 'weeks'],
+    [12, 'months'],
+    [Number.POSITIVE_INFINITY, 'years'],
+  ]
+  const rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' })
+
+  let duration = (new Date(dateStr).getTime() - Date.now()) / 1000
+  for (const [amount, unit] of divisions) {
+    if (Math.abs(duration) < amount) {
+      return rtf.format(Math.round(duration), unit)
+    }
+    duration /= amount
+  }
+  return rtf.format(Math.round(duration), 'years')
+}
+
+function inviteDetail(invite: Invite): string {
+  const status = inviteStatus(invite)
+  if (status === 'used') {
+    return invite.consumed_at ? `Used ${formatRelative(invite.consumed_at)}` : 'Used'
+  }
+  if (!invite.expires_at) {
+    return 'No expiry'
+  }
+  return `${status === 'expired' ? 'Expired' : 'Expires'} ${formatRelative(invite.expires_at)}`
+}
+</script>
+
+<template>
+  <section class="card info-card invites-card">
+    <button
+      type="button"
+      class="invites-toggle"
+      :aria-expanded="expanded"
+      aria-controls="invites-panel"
+      @click="toggleExpanded"
+    >
+      <span class="invites-toggle-label">
+        <h4>Invites</h4>
+        <span v-if="activeCount > 0" class="invites-count-badge">{{ activeCount }} active</span>
+      </span>
+      <span class="chevron" :class="{ 'is-open': expanded }" aria-hidden="true">⌄</span>
+    </button>
+
+    <div v-if="expanded" id="invites-panel" class="invites-body">
+      <p class="invites-hint">
+        Invite codes let someone new create an account. Creating, listing, and deleting invites
+        requires an internet connection.
+      </p>
+
+      <p v-if="isLoading" class="invites-loading">Loading invites…</p>
+
+      <ul v-else-if="invites.length > 0" class="invite-list">
+        <li
+          v-for="invite in invites"
+          :key="invite.id"
+          class="invite-ticket"
+          :class="`is-${inviteStatus(invite)}`"
+        >
+          <div class="invite-ticket-main">
+            <code class="invite-code">{{ invite.code }}</code>
+            <span class="invite-status-pill" :class="`pill-${inviteStatus(invite)}`">{{
+              statusLabel(invite)
+            }}</span>
+          </div>
+          <div class="invite-ticket-meta">
+            <span class="invite-detail">{{ inviteDetail(invite) }}</span>
+
+            <div v-if="pendingDeleteId !== invite.id" class="invite-actions">
+              <button type="button" class="ticket-btn" @click="copyCode(invite)">
+                {{ copiedId === invite.id ? 'Copied!' : 'Copy' }}
+              </button>
+              <button
+                type="button"
+                class="ticket-btn ticket-btn-danger"
+                :disabled="inviteStatus(invite) === 'used'"
+                :title="inviteStatus(invite) === 'used' ? 'Used invites cannot be deleted' : ''"
+                @click="requestDelete(invite.id)"
+              >
+                Delete
+              </button>
+            </div>
+            <div v-else class="invite-actions">
+              <span class="confirm-label">Delete this invite?</span>
+              <button type="button" class="ticket-btn" @click="cancelDelete">No</button>
+              <button
+                type="button"
+                class="ticket-btn ticket-btn-danger"
+                :disabled="deletingId === invite.id"
+                @click="confirmDelete(invite.id)"
+              >
+                {{ deletingId === invite.id ? 'Deleting…' : 'Yes' }}
+              </button>
+            </div>
+          </div>
+        </li>
+      </ul>
+
+      <p v-else class="invites-empty">No invites yet. Generate one to invite someone.</p>
+
+      <p v-if="error" class="banner banner-error">{{ error }}</p>
+
+      <button
+        type="button"
+        class="btn btn-primary generate-btn"
+        :disabled="isCreating"
+        @click="handleCreate"
+      >
+        {{ isCreating ? 'Generating…' : '+ Generate invite' }}
+      </button>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.invites-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  background: none;
+  border: none;
+  padding: 0;
+  color: inherit;
+  cursor: pointer;
+  text-align: left;
+}
+
+.invites-toggle-label {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.invites-toggle-label h4 {
+  font-size: 0.85rem;
+  margin: 0;
+}
+
+.invites-count-badge {
+  font-size: 0.65rem;
+  font-weight: 600;
+  padding: 0.15rem 0.5rem;
+  border-radius: 999px;
+  background-color: var(--c-accent-bg);
+  color: var(--c-accent-strong);
+}
+
+.chevron {
+  color: var(--c-text-soft);
+  transition: transform 0.15s ease-in-out;
+}
+
+.chevron.is-open {
+  transform: rotate(180deg);
+}
+
+.invites-body {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  margin-top: 0.85rem;
+}
+
+.invites-hint {
+  font-size: 0.8rem;
+  color: var(--c-text-soft);
+  margin: 0;
+}
+
+.invites-loading,
+.invites-empty {
+  font-size: 0.85rem;
+  color: var(--c-text-soft);
+  margin: 0;
+}
+
+.invite-list {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+}
+
+.invite-ticket {
+  border: 1px solid var(--c-border);
+  border-left: 3px solid var(--c-text-soft);
+  border-radius: var(--radius-md);
+  background-color: var(--c-bg-mute);
+  padding: 0.65rem 0.85rem;
+}
+
+.invite-ticket.is-active {
+  border-left-color: var(--c-success);
+}
+
+.invite-ticket.is-expired {
+  border-left-color: var(--c-danger);
+}
+
+.invite-ticket.is-used {
+  border-left-color: var(--c-text-soft);
+  opacity: 0.75;
+}
+
+.invite-ticket-main {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+
+.invite-code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 0.95rem;
+  letter-spacing: 0.06em;
+  color: var(--c-heading);
+}
+
+.invite-status-pill {
+  flex-shrink: 0;
+  font-size: 0.65rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  padding: 0.15rem 0.5rem;
+  border-radius: 999px;
+}
+
+.pill-active {
+  background-color: rgba(52, 211, 153, 0.14);
+  color: var(--c-success);
+}
+
+.pill-expired {
+  background-color: var(--c-danger-bg);
+  color: var(--c-danger);
+}
+
+.pill-used {
+  background-color: var(--c-bg-elevated);
+  color: var(--c-text-soft);
+}
+
+.invite-ticket-meta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  border-top: 1px dashed var(--c-border);
+  margin-top: 0.55rem;
+  padding-top: 0.5rem;
+}
+
+.invite-detail {
+  font-size: 0.75rem;
+  color: var(--c-text-soft);
+}
+
+.invite-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+
+.confirm-label {
+  font-size: 0.75rem;
+  color: var(--c-text-soft);
+}
+
+.ticket-btn {
+  background: none;
+  border: 1px solid var(--c-border);
+  color: var(--c-text);
+  font-size: 0.72rem;
+  padding: 0.25rem 0.55rem;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+}
+
+.ticket-btn:hover:not(:disabled) {
+  border-color: var(--c-border-hover);
+  color: var(--c-heading);
+}
+
+.ticket-btn:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.ticket-btn-danger {
+  color: var(--c-danger);
+  border-color: rgba(248, 113, 113, 0.35);
+}
+
+.ticket-btn-danger:hover:not(:disabled) {
+  background-color: var(--c-danger-bg);
+}
+
+.generate-btn {
+  width: auto;
+  align-self: flex-start;
+  padding: 0.55rem 1.1rem;
+}
+</style>

src/components/__tests__/InvitesPanel.spec.ts

@@ -0,0 +1,130 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import InvitesPanel from '../InvitesPanel.vue'
+import * as invitesApi from '@/api/invites'
+import type { Invite } from '@/types/invite'
+
+describe('InvitesPanel', () => {
+  beforeEach(() => {
+    vi.restoreAllMocks()
+    Object.defineProperty(navigator, 'onLine', { value: true, configurable: true })
+  })
+
+  it('renders collapsed by default without loading invites', () => {
+    const getSpy = vi.spyOn(invitesApi, 'getInvitesApi')
+
+    const wrapper = mount(InvitesPanel)
+
+    expect(wrapper.text()).toContain('Invites')
+    expect(wrapper.find('#invites-panel').exists()).toBe(false)
+    expect(getSpy).not.toHaveBeenCalled()
+  })
+
+  it('loads and displays invites on expand', async () => {
+    const mockInvites: Invite[] = [
+      { id: 'invite-1', code: 'ABC123', expires_at: '2099-01-01T00:00:00.000Z' },
+      {
+        id: 'invite-2',
+        code: 'USEDCODE',
+        expires_at: '2099-01-01T00:00:00.000Z',
+        consumed_at: '2026-01-01T00:00:00.000Z',
+      },
+    ]
+    vi.spyOn(invitesApi, 'getInvitesApi').mockResolvedValueOnce(mockInvites)
+
+    const wrapper = mount(InvitesPanel)
+    await wrapper.find('.invites-toggle').trigger('click')
+    await flushPromises()
+
+    expect(wrapper.text()).toContain('ABC123')
+    expect(wrapper.text()).toContain('USEDCODE')
+    expect(wrapper.text()).toContain('Active')
+    expect(wrapper.text()).toContain('Used')
+  })
+
+  it('shows an offline message instead of fetching when expanded offline', async () => {
+    Object.defineProperty(navigator, 'onLine', { value: false, configurable: true })
+    const getSpy = vi.spyOn(invitesApi, 'getInvitesApi')
+
+    const wrapper = mount(InvitesPanel)
+    await wrapper.find('.invites-toggle').trigger('click')
+
+    expect(getSpy).not.toHaveBeenCalled()
+    expect(wrapper.find('.banner-error').text()).toContain('must be online')
+  })
+
+  it('shows empty state when there are no invites', async () => {
+    vi.spyOn(invitesApi, 'getInvitesApi').mockResolvedValueOnce([])
+
+    const wrapper = mount(InvitesPanel)
+    await wrapper.find('.invites-toggle').trigger('click')
+    await flushPromises()
+
+    expect(wrapper.text()).toContain('No invites yet')
+  })
+
+  it('generates a new invite and prepends it to the list', async () => {
+    vi.spyOn(invitesApi, 'getInvitesApi').mockResolvedValueOnce([])
+    const newInvite: Invite = { id: 'invite-new', code: 'NEWCODE1' }
+    vi.spyOn(invitesApi, 'createInviteApi').mockResolvedValueOnce(newInvite)
+
+    const wrapper = mount(InvitesPanel)
+    await wrapper.find('.invites-toggle').trigger('click')
+    await flushPromises()
+
+    await wrapper.find('.generate-btn').trigger('click')
+    await flushPromises()
+
+    expect(wrapper.text()).toContain('NEWCODE1')
+  })
+
+  it('deletes an invite after confirming', async () => {
+    const mockInvite: Invite = { id: 'invite-1', code: 'ABC123' }
+    vi.spyOn(invitesApi, 'getInvitesApi').mockResolvedValueOnce([mockInvite])
+    const deleteSpy = vi.spyOn(invitesApi, 'deleteInviteApi').mockResolvedValueOnce()
+
+    const wrapper = mount(InvitesPanel)
+    await wrapper.find('.invites-toggle').trigger('click')
+    await flushPromises()
+
+    await wrapper.find('.ticket-btn-danger').trigger('click')
+    expect(wrapper.text()).toContain('Delete this invite?')
+
+    const confirmButtons = wrapper.findAll('.ticket-btn-danger')
+    await confirmButtons[confirmButtons.length - 1]?.trigger('click')
+    await flushPromises()
+
+    expect(deleteSpy).toHaveBeenCalledWith('invite-1')
+    expect(wrapper.text()).toContain('No invites yet')
+  })
+
+  it('disables delete for already-used invites', async () => {
+    const usedInvite: Invite = {
+      id: 'invite-1',
+      code: 'USEDCODE',
+      consumed_at: '2026-01-01T00:00:00.000Z',
+    }
+    vi.spyOn(invitesApi, 'getInvitesApi').mockResolvedValueOnce([usedInvite])
+
+    const wrapper = mount(InvitesPanel)
+    await wrapper.find('.invites-toggle').trigger('click')
+    await flushPromises()
+
+    const deleteBtn = wrapper.find('.ticket-btn-danger')
+    expect((deleteBtn.element as HTMLButtonElement).disabled).toBe(true)
+  })
+
+  it('shows an error banner when loading invites fails', async () => {
+    vi.spyOn(invitesApi, 'getInvitesApi').mockRejectedValueOnce(new Error('Network error'))
+
+    const wrapper = mount(InvitesPanel)
+    await wrapper.find('.invites-toggle').trigger('click')
+    await flushPromises()
+
+    expect(wrapper.find('.banner-error').text()).toContain('Network error')
+  })
+})
+
+function flushPromises() {
+  return new Promise((resolve) => setTimeout(resolve))
+}

src/router/index.ts

@@ -24,9 +24,9 @@ const router = createRouter({
       component: () => import('../views/LoginView.vue'),
     },
     {
-      path: '/about',
+      path: '/account',
-      name: 'about',
+      name: 'account',
-      component: () => import('../views/AboutView.vue'),
+      component: () => import('../views/AccountView.vue'),
     },
   ],
 })

src/types/invite.ts

@@ -0,0 +1,6 @@
+export interface Invite {
+  id: string
+  code: string
+  expires_at?: string
+  consumed_at?: string
+}

src/views/AccountView.vue

@@ -3,6 +3,7 @@ import { onMounted, ref } from 'vue'
 import { useListsStore } from '@/stores/lists'
 import { useAuthStore } from '@/stores/auth'
 import ChangePasswordModal from '@/components/ChangePasswordModal.vue'
+import InvitesPanel from '@/components/InvitesPanel.vue'
 
 const listsStore = useListsStore()
 const authStore = useAuthStore()
@@ -34,6 +35,8 @@ onMounted(() => {
       </button>
     </section>
 
+    <InvitesPanel />
+
     <h1>Pending changes</h1>
 
     <section class="card info-card">