feat: profile page

app/components/Header/AuthModal.client.vue

@@ -3,6 +3,8 @@
 import { authRedirect } from '~/utils/atproto/helpers'
 import { isAtIdentifierString } from '@atproto/lex'
 
+const authModal = useModal('auth-modal')
+
 const handleInput = shallowRef('')
 const errorMessage = shallowRef('')
 const route = useRoute()
@@ -72,9 +74,27 @@
           </p>
         </div>
       </div>
-      <ButtonBase class="w-full" @click="logout">
-        {{ $t('auth.modal.disconnect') }}
-      </ButtonBase>
+
+      <div class="flex flex-col space-y-4">
+        <NuxtLink
+          :to="{ name: 'profile-handle', params: { handle: user.handle } }"
+          :prefetch-on="prefetch ? 'visibility' : 'interaction'"
+        >
+          <button
+            class="w-full px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+            @click="authModal.close()"
+          >
+            Profile
+          </button>
+        </NuxtLink>
+
+        <button
+          class="w-full px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+          @click="logout"
+        >
+          {{ $t('auth.modal.disconnect') }}
+        </button>
+      </div>
     </div>
 
     <!-- Disconnected state -->

app/components/Package/LikeCard.vue

@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import { useAtproto } from '~/composables/atproto/useAtproto'
+import { togglePackageLike } from '~/utils/atproto/likes'
+const props = defineProps<{
+  packageUrl: string
+}>()
+
+const compactNumberFormatter = useCompactNumberFormatter()
+
+function extractPackageFromRef(ref: string) {
+  const { pkg } = /https:\/\/npmx.dev\/package\/(?<pkg>.*)/.exec(ref).groups
+  return pkg
+}
+
+const name = computed(() => extractPackageFromRef(props.packageUrl))
+
+const { user } = useAtproto()
+
+const authModal = useModal('auth-modal')
+
+const { data: likesData } = useFetch(() => `/api/social/likes/${name.value}`, {
+  default: () => ({ totalLikes: 0, userHasLiked: false }),
+  server: false,
+})
+
+const isLikeActionPending = ref(false)
+
+const likeAction = async () => {
+  if (user.value?.handle == null) {
+    authModal.open()
+    return
+  }
+
+  if (isLikeActionPending.value) return
+
+  const currentlyLiked = likesData.value?.userHasLiked ?? false
+  const currentLikes = likesData.value?.totalLikes ?? 0
+
+  // Optimistic update
+  likesData.value = {
+    totalLikes: currentlyLiked ? currentLikes - 1 : currentLikes + 1,
+    userHasLiked: !currentlyLiked,
+  }
+
+  isLikeActionPending.value = true
+
+  try {
+    const result = await togglePackageLike(name.value, currentlyLiked, user.value?.handle)
+
+    isLikeActionPending.value = false
+
+    if (result.success) {
+      // Update with server response
+      likesData.value = result.data
+    } else {
+      // Revert on error
+      likesData.value = {
+        totalLikes: currentLikes,
+        userHasLiked: currentlyLiked,
+      }
+    }
+  } catch (e) {
+    // Revert on error
+    likesData.value = {
+      totalLikes: currentLikes,
+      userHasLiked: currentlyLiked,
+    }
+    isLikeActionPending.value = false
+  }
+}
+</script>
+
+<template>
+  <NuxtLink :to="packageRoute(name)">
+    <BaseCard class="group font-mono flex justify-between">
+      {{ name }}
+      <div class="flex items-center gap-4 justify-between">
+        <ClientOnly>
+          <TooltipApp
+            :text="likesData?.userHasLiked ? $t('package.likes.unlike') : $t('package.likes.like')"
+            position="bottom"
+          >
+            <button
+              @click.prevent="likeAction"
+              type="button"
+              :title="
+                likesData?.userHasLiked ? $t('package.likes.unlike') : $t('package.likes.like')
+              "
+              class="inline-flex items-center gap-1.5 font-mono text-sm text-fg hover:text-fg-muted transition-colors duration-200"
+              :aria-label="
+                likesData?.userHasLiked ? $t('package.likes.unlike') : $t('package.likes.like')
+              "
+            >
+              <span
+                :class="
+                  likesData?.userHasLiked
+                    ? 'i-lucide-heart-minus text-red-500'
+                    : 'i-lucide-heart-plus'
+                "
+                class="w-4 h-4"
+                aria-hidden="true"
+              />
+              <span>{{
+                compactNumberFormatter.format(likesData?.totalLikes ?? 0, { decimals: 1 })
+              }}</span>
+            </button>
+          </TooltipApp>
+        </ClientOnly>
+        <p class="transition-transform duration-150 group-hover:rotate-45 pb-1">↗</p>
+      </div>
+    </BaseCard>
+  </NuxtLink>
+</template>

app/composables/atproto/useProfileLikes.ts

@@ -0,0 +1,30 @@
+export type LikesResult = {
+  records: {
+    value: {
+      subjectRef: string
+    }
+  }[]
+}
+
+export function useProfileLikes(handle: MaybeRefOrGetter<string>) {
+  const cachedFetch = useCachedFetch()
+  const asyncData = useLazyAsyncData(
+    `profile:${toValue(handle)}:likes`,
+    async (_nuxtApp, { signal }) => {
+      const { data: likes, isStale } = await cachedFetch<LikesResult>(
+        `/api/social/profile/${toValue(handle)}/likes`,
+        { signal },
+      )
+
+      return { likes, isStale }
+    },
+  )
+
+  if (import.meta.client) {
+    onMounted(() => {
+      asyncData.refresh()
+    })
+  }
+
+  return asyncData
+}

app/pages/profile/[handle]/index.vue

@@ -0,0 +1,198 @@
+<script setup lang="ts">
+import { debounce } from 'perfect-debounce'
+import { updateProfile as updateProfileUtil } from '~/utils/atproto/profile'
+import { normalizeSearchParam } from '#shared/utils/url'
+
+type LikesResult = {
+  records: {
+    value: {
+      subjectRef: string
+    }
+  }[]
+}
+
+const route = useRoute('/profile/[handle]')
+const router = useRouter()
+const handle = computed(() => route.params.handle)
+
+const { data: profile }: { data?: NPMXProfile } = useFetch(
+  () => `/api/social/profile/${handle.value}`,
+  {
+    default: () => ({ profile: { displayName: handle.value } }),
+    server: false,
+  },
+)
+
+const { user } = useAtproto()
+const isEditing = ref(false)
+const displayNameInput = ref()
+const descriptionInput = ref()
+const websiteInput = ref()
+const isUpdateProfileActionPending = ref(false)
+
+watchEffect(() => {
+  if (isEditing) {
+    if (profile) {
+      displayNameInput.value = profile.value.displayName
+      descriptionInput.value = profile.value.description
+      websiteInput.value = profile.value.website
+    }
+  }
+})
+
+async function updateProfile() {
+  if (!user.value.handle || !displayNameInput.value) {
+    return
+  }
+
+  isUpdateProfileActionPending.value = true
+  const currentProfile = profile.value
+
+  // optimistic update
+  profile.value = {
+    displayName: displayNameInput.value,
+    description: descriptionInput.value,
+    website: websiteInput.value,
+  }
+
+  try {
+    const result = await updateProfileUtil(handle, {
+      displayName: displayNameInput.value,
+      description: descriptionInput.value,
+      website: websiteInput.value,
+    })
+
+    if (!result.success) {
+      profile.value = currentProfile
+    }
+
+    isUpdateProfileActionPending.value = false
+    isEditing.value = false
+  } catch (e) {
+    profile.value = currentProfile
+    isUpdateProfileActionPending.value = false
+  }
+}
+
+const { data: likesData, status } = await useProfileLikes(handle)
+
+useSeoMeta({
+  title: () => `${handle.value} - npmx`,
+  description: () => `npmx profile by ${handle.value}`,
+})
+
+/**
+defineOgImageComponent('Default', {
+  title: () => `~${username.value}`,
+  description: () => (results.value ? `${results.value.total} packages` : 'npm user profile'),
+  primaryColor: '#60a5fa',
+})
+**/
+</script>
+
+<template>
+  <main class="container flex-1 flex flex-col py-8 sm:py-12 w-full">
+    <!-- Header -->
+    <header class="mb-8 pb-8 border-b border-border">
+      <!-- Editing Profile -->
+      <div v-if="isEditing" class="flex flex-col flex-wrap gap-4">
+        <label for="displayName" class="text-sm flex flex-col gap-2">
+          Display Name
+          <input
+            required
+            name="displayName"
+            type="text"
+            class="w-full min-w-25 bg-bg-subtle border border-border rounded-md ps-3 pe-3 py-1.5 font-mono text-sm text-fg placeholder:text-fg-subtle transition-[border-color,outline-color] duration-300 hover:border-fg-subtle outline-2 outline-transparent focus:border-accent focus-visible:(outline-2 outline-accent/70)"
+            v-model="displayNameInput"
+          />
+        </label>
+        <label for="description" class="text-sm flex flex-col gap-2">
+          Description
+          <input
+            name="description"
+            type="text"
+            placeholder="No description"
+            v-model="descriptionInput"
+            class="w-full min-w-25 bg-bg-subtle border border-border rounded-md ps-3 pe-3 py-1.5 font-mono text-sm text-fg placeholder:text-fg-subtle transition-[border-color,outline-color] duration-300 hover:border-fg-subtle outline-2 outline-transparent focus:border-accent focus-visible:(outline-2 outline-accent/70)"
+          />
+        </label>
+        <div class="flex gap-4 items-center font-mono text-sm">
+          <h2>@{{ handle }}</h2>
+          <div class="link-subtle font-mono text-sm inline-flex items-center gap-1.5">
+            <span class="i-carbon:link w-4 h-4" aria-hidden="true" />
+            <input
+              name="website"
+              type="url"
+              v-model="websiteInput"
+              class="w-full min-w-25 bg-bg-subtle border border-border rounded-md ps-3 pe-3 py-1.5 font-mono text-sm text-fg placeholder:text-fg-subtle transition-[border-color,outline-color] duration-300 hover:border-fg-subtle outline-2 outline-transparent focus:border-accent focus-visible:(outline-2 outline-accent/70)"
+            />
+          </div>
+          <button
+            @click="isEditing = false"
+            class="hidden sm:inline-flex link-subtle font-mono text-sm items-center gap-2 px-2 py-1.5 hover:bg-bg-subtle focus-visible:outline-accent/70 rounded"
+          >
+            Cancel
+          </button>
+          <button
+            @click.prevent="updateProfile"
+            :disabled="isUpdateProfileActionPending"
+            class="hidden sm:inline-flex link-subtle font-mono text-sm items-center gap-2 px-2 py-1.5 hover:bg-bg-subtle focus-visible:outline-accent/70 rounded"
+          >
+            Save
+          </button>
+        </div>
+      </div>
+
+      <!-- Display Profile -->
+      <div v-else class="flex flex-col flex-wrap gap-4">
+        <h1 v-if="profile.displayName" class="font-mono text-2xl sm:text-3xl font-medium">
+          {{ profile.displayName }}
+        </h1>
+        <p v-if="profile.description">{{ profile.description }}</p>
+        <div class="flex gap-4 items-center font-mono text-sm">
+          <h2>@{{ handle }}</h2>
+          <a
+            v-if="profile.website"
+            :href="profile.website"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
+          >
+            <span class="i-carbon:link w-4 h-4" aria-hidden="true" />
+            {{ profile.website }}
+          </a>
+          <button
+            v-if="user?.handle === handle"
+            @click="isEditing = true"
+            class="hidden sm:inline-flex link-subtle font-mono text-sm items-center gap-2 px-2 py-1.5 hover:bg-bg-subtle focus-visible:outline-accent/70 rounded"
+          >
+            Edit
+          </button>
+        </div>
+      </div>
+    </header>
+
+    <section class="flex flex-col gap-8">
+      <h2
+        class="font-mono text-2xl sm:text-3xl font-medium min-w-0 break-words"
+        :title="Likes"
+        dir="ltr"
+      >
+        Likes <span v-if="likesData">({{ likesData.likes.records.length ?? 0 }})</span>
+      </h2>
+      <div v-if="status === 'pending'">
+        <p>Loading...</p>
+      </div>
+      <div v-else-if="status === 'error'">
+        <p>Error</p>
+      </div>
+      <div v-else-if="likesData.likes.records" class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+        <PackageLikeCard
+          v-if="likesData.likes.records"
+          v-for="like in likesData.likes.records"
+          :packageUrl="like.value.subjectRef"
+        />
+      </div>
+    </section>
+  </main>
+</template>