feat: accounts part 2

app/components/Package/Header.vue

@@ -182,6 +182,75 @@ const timelineLink = computed((): RouteLocationRaw | null => {
   return packageTimelineRoute(props.pkg.name, props.resolvedVersion)
 })
 
+const navLinks = computed(() => {
+  const links: {
+    key: string
+    label: string
+    to: RouteLocationRaw
+    ariaKeyshortcuts?: string
+    title?: string
+    class?: string
+  }[] = []
+
+  if (mainLink.value) {
+    links.push({
+      key: 'main',
+      label: $t('package.links.main'),
+      to: mainLink.value,
+      ariaKeyshortcuts: 'm',
+      class: 'lowercase',
+    })
+  }
+
+  if (docsLink.value) {
+    links.push({
+      key: 'docs',
+      label: $t('package.links.docs'),
+      to: docsLink.value,
+      ariaKeyshortcuts: 'd',
+    })
+  }
+
+  if (codeLink.value) {
+    links.push({
+      key: 'code',
+      label: $t('package.links.code'),
+      to: codeLink.value,
+      ariaKeyshortcuts: '.',
+    })
+  }
+
+  if (diffLink.value) {
+    links.push({
+      key: 'diff',
+      label: $t('compare.compare_versions'),
+      to: diffLink.value,
+      ariaKeyshortcuts: 'f',
+      title: $t('compare.compare_versions_title'),
+    })
+  }
+
+  if (changelogLink.value) {
+    links.push({
+      key: 'changelog',
+      label: $t('package.links.changelog'),
+      to: changelogLink.value,
+      ariaKeyshortcuts: '-',
+    })
+  }
+
+  if (timelineLink.value) {
+    links.push({
+      key: 'timeline',
+      label: $t('package.links.timeline'),
+      to: timelineLink.value,
+      ariaKeyshortcuts: 't',
+    })
+  }
+
+  return links
+})
+
 useShortcuts({
   '.': () => codeLink.value,
   'm': () => mainLink.value,
@@ -308,69 +377,14 @@ useShortcuts({
         </div>
       </div>
       <!-- Docs + Code — inline on desktop, floating bottom bar on mobile -->
-      <nav
-        v-if="resolvedVersion"
+      <TabLinks
+        v-if="resolvedVersion && navLinks.length > 0"
         :aria-label="$t('package.navigation')"
-        class="flex gap-4 me-auto -mb-px max-w-full overflow-x-auto"
+        :links="navLinks"
+        :active-key="page"
         :style="navExtraOffsetStyle"
         :class="$style.packageNav"
-      >
-        <LinkBase
-          v-if="mainLink"
-          :to="mainLink"
-          aria-keyshortcuts="m"
-          class="decoration-none border-b-2 p-1 hover:border-accent/50 lowercase focus-visible:[outline-offset:-2px]!"
-          :class="page === 'main' ? 'border-accent text-accent!' : 'border-transparent'"
-        >
-          {{ $t('package.links.main') }}
-        </LinkBase>
-        <LinkBase
-          v-if="docsLink"
-          :to="docsLink"
-          aria-keyshortcuts="d"
-          class="decoration-none border-b-2 p-1 hover:border-accent/50 focus-visible:[outline-offset:-2px]!"
-          :class="page === 'docs' ? 'border-accent text-accent!' : 'border-transparent'"
-        >
-          {{ $t('package.links.docs') }}
-        </LinkBase>
-        <LinkBase
-          v-if="codeLink"
-          :to="codeLink"
-          aria-keyshortcuts="."
-          class="decoration-none border-b-2 p-1 hover:border-accent/50 focus-visible:[outline-offset:-2px]!"
-          :class="page === 'code' ? 'border-accent text-accent!' : 'border-transparent'"
-        >
-          {{ $t('package.links.code') }}
-        </LinkBase>
-        <LinkBase
-          v-if="diffLink"
-          :to="diffLink"
-          :title="$t('compare.compare_versions_title')"
-          aria-keyshortcuts="f"
-          class="decoration-none border-b-2 p-1 hover:border-accent/50 focus-visible:[outline-offset:-2px]!"
-          :class="page === 'diff' ? 'border-accent text-accent!' : 'border-transparent'"
-        >
-          {{ $t('compare.compare_versions') }}
-        </LinkBase>
-        <LinkBase
-          v-if="changelogLink"
-          :to="changelogLink"
-          aria-keyshortcuts="-"
-          class="decoration-none border-b-2 p-1 hover:border-accent/50 focus-visible:[outline-offset:-2px]!"
-          :class="page === 'changelog' ? 'border-accent text-accent!' : 'border-transparent'"
-        >
-          {{ $t('package.links.changelog') }}
-        </LinkBase>
-        <LinkBase
-          v-if="timelineLink"
-          :to="timelineLink"
-          aria-keyshortcuts="t"
-          class="decoration-none border-b-2 p-1 hover:border-accent/50 focus-visible:[outline-offset:-2px]!"
-          :class="page === 'timeline' ? 'border-accent text-accent!' : 'border-transparent'"
-        >
-          {{ $t('package.links.timeline') }}
-        </LinkBase>
-      </nav>
+      />
     </div>
   </div>
 </template>

app/components/Profile/AccountsList.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+export type AccountEntry = {
+  account?: {
+    uri?: string
+    handle?: string
+    actor?: {
+      handle?: string
+      name?: string
+      displayName?: string
+      description?: string
+    }
+  }
+}
+
+defineProps<{
+  entries: AccountEntry[] | null
+  status: string
+  error?: unknown
+  emptyLabel: string
+}>()
+</script>
+
+<template>
+  <div v-if="status === 'pending'" class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+    <SkeletonBlock v-for="i in 4" :key="i" class="h-20 rounded-lg" />
+  </div>
+  <div v-else-if="status === 'error' || error">
+    <p>{{ $t('common.error') }}</p>
+  </div>
+  <template v-else-if="entries?.length">
+    <p class="text-sm p-4 bg-badge-orange/10 border border-badge-orange/40 rounded-lg">
+      {{ $t('profile.account.warning') }}
+    </p>
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mt-4">
+      <div
+        v-for="(entry, index) in entries"
+        :key="entry.account?.uri || `entry-${index}`"
+        class="p-4 bg-bg-subtle border border-border rounded-lg decoration-none"
+      >
+        <p class="font-mono font-medium truncate">
+          {{
+            entry.account?.actor?.displayName ||
+            entry.account?.actor?.name ||
+            entry.account?.actor?.handle ||
+            entry.account?.handle ||
+            $t('profile.related_accounts.unknown')
+          }}
+        </p>
+        <p v-if="entry.account?.handle" class="text-fg-muted text-sm truncate">
+          @{{ entry.account?.handle }}
+        </p>
+        <p v-if="entry.account?.actor?.description" class="text-sm mt-1 line-clamp-2">
+          {{ entry.account?.actor?.description }}
+        </p>
+      </div>
+    </div>
+  </template>
+  <div v-else class="p-4 bg-bg-subtle border border-border rounded-lg text-fg-muted">
+    {{ emptyLabel }}
+  </div>
+</template>

app/components/Profile/AddKnownAccountDialog.client.vue

@@ -0,0 +1,148 @@
+<script setup lang="ts">
+import type { FetchError } from 'ofetch'
+import { handleAuthError } from '~/utils/atproto/helpers'
+
+const props = defineProps<{
+  identity: string
+}>()
+
+const emit = defineEmits<{
+  added: []
+}>()
+
+const { user } = useAtproto()
+const modal = useModal('add-known-account-modal')
+
+const handleInput = ref('')
+const accountType = ref<'project' | 'user' | 'organisation' | 'collective'>('user')
+const isSubmitting = ref(false)
+const formError = ref<string | null>(null)
+
+const accountTypeItems = computed(() => [
+  { label: $t('profile.known_accounts.add_dialog.type_user'), value: 'user' as const },
+  { label: $t('profile.known_accounts.add_dialog.type_project'), value: 'project' as const },
+  {
+    label: $t('profile.known_accounts.add_dialog.type_organisation'),
+    value: 'organisation' as const,
+  },
+  { label: $t('profile.known_accounts.add_dialog.type_collective'), value: 'collective' as const },
+])
+
+function resetForm() {
+  handleInput.value = ''
+  accountType.value = 'user'
+  formError.value = null
+  isSubmitting.value = false
+}
+
+function open() {
+  resetForm()
+  modal.open()
+}
+
+function close() {
+  modal.close()
+}
+
+function resolveFormError(statusCode?: number, message?: string): string {
+  if (statusCode === 409 || message === 'Account already exists') {
+    return $t('profile.known_accounts.add_dialog.duplicate')
+  }
+  if (statusCode === 404 || message === 'Actor profile not found') {
+    return $t('profile.known_accounts.add_dialog.not_found')
+  }
+  if (statusCode === 400 && message === 'Cannot add your own account') {
+    return $t('profile.known_accounts.add_dialog.self')
+  }
+  return $t('common.error')
+}
+
+async function handleSubmit() {
+  const handle = handleInput.value.replace(/^@/, '').trim()
+  if (!handle || isSubmitting.value) return
+
+  isSubmitting.value = true
+  formError.value = null
+
+  try {
+    await $fetch(`/api/social/profile/${props.identity}/accounts`, {
+      method: 'POST',
+      body: {
+        handle,
+        type: accountType.value,
+      },
+    })
+
+    emit('added')
+    close()
+  } catch (error) {
+    const fetchError = error as FetchError<{ message?: string }>
+    formError.value = resolveFormError(fetchError.statusCode, fetchError.data?.message)
+
+    try {
+      await handleAuthError(fetchError, user.value?.handle)
+    } catch {
+      // Error message already set for non-auth failures.
+    }
+  } finally {
+    isSubmitting.value = false
+  }
+}
+
+defineExpose({
+  open,
+  close,
+})
+</script>
+
+<template>
+  <Modal
+    id="add-known-account-modal"
+    :modal-title="$t('profile.known_accounts.add_dialog.title')"
+    :modal-subtitle="$t('profile.known_accounts.add_dialog.description')"
+    class="max-w-md"
+  >
+    <form class="space-y-4" @submit.prevent="handleSubmit">
+      <div>
+        <label
+          for="known-account-handle"
+          class="block text-xs text-fg-subtle uppercase tracking-wider mb-1.5"
+        >
+          {{ $t('profile.known_accounts.add_dialog.handle_label') }}
+        </label>
+        <InputBase
+          id="known-account-handle"
+          v-model="handleInput"
+          type="text"
+          name="known-account-handle"
+          :placeholder="$t('profile.known_accounts.add_dialog.handle_placeholder')"
+          autocomplete="username"
+          required
+          class="w-full min-w-25"
+        />
+      </div>
+
+      <SelectField
+        id="known-account-type"
+        v-model="accountType"
+        name="known-account-type"
+        :label="$t('profile.known_accounts.add_dialog.type_label')"
+        block
+        :items="accountTypeItems"
+      />
+
+      <p v-if="formError" class="text-sm text-badge-orange" role="alert">
+        {{ formError }}
+      </p>
+
+      <div class="flex gap-3 justify-end">
+        <ButtonBase type="button" @click="close">
+          {{ $t('common.cancel') }}
+        </ButtonBase>
+        <ButtonBase variant="primary" type="submit" :disabled="!handleInput.trim() || isSubmitting">
+          {{ $t('profile.known_accounts.add_dialog.submit') }}
+        </ButtonBase>
+      </div>
+    </form>
+  </Modal>
+</template>