From 1bf09a66298c91e17bd186334f09d34f31efab1e Mon Sep 17 00:00:00 2001
From: Julien Calixte <julien.calixte@theodo.com>
Date: Sun, 17 May 2026 14:15:13 +0200
Subject: [PATCH] feat(profile): add shared UserPill and ProfileModal
 components

UserPill renders an avatar + display name button, preferring the ATProto
handle over the GitHub username, and emits @click so each view decides
what to open. ProfileModal extracts the previously duplicated
profile_modal dialog with self-contained DaisyUI-token styling.
---
 src/components/ProfileModal.vue | 153 ++++++++++++++++++++++++++++++++
 src/components/UserPill.vue     | 111 +++++++++++++++++++++++
 2 files changed, 264 insertions(+)
 create mode 100644 src/components/ProfileModal.vue
 create mode 100644 src/components/UserPill.vue

diff --git a/src/components/ProfileModal.vue b/src/components/ProfileModal.vue
new file mode 100644
index 0000000..ebf991a
--- /dev/null
+++ b/src/components/ProfileModal.vue
@@ -0,0 +1,153 @@
+<script setup lang="ts">
+import { computed } from "vue"
+
+import SignInAtproto from "@/components/SignInAtproto.vue"
+import SignInGithub from "@/components/SignInGithub.vue"
+import { useGitHubLogin } from "@/hooks/useGitHubLogin.hook"
+
+const { accessToken } = useGitHubLogin()
+const isGitHubLoggedIn = computed(() => !!accessToken.value)
+</script>
+
+<template>
+  <dialog id="profile_modal" class="modal profile-modal">
+    <div class="modal-box profile-modal-box">
+      <div class="profile-modal-head">
+        <h3>Profile</h3>
+        <form method="dialog">
+          <button class="profile-modal-x" aria-label="close">×</button>
+        </form>
+      </div>
+      <div class="profile-modal-section">
+        <div class="profile-modal-label">Bluesky / ATProto</div>
+        <sign-in-atproto :with-sign-out="true" />
+      </div>
+      <hr class="profile-modal-rule" />
+      <div class="profile-modal-section">
+        <div class="profile-modal-label">GitHub</div>
+        <sign-in-github />
+        <router-link
+          v-if="isGitHubLoggedIn"
+          :to="{ name: 'RepoList' }"
+          class="profile-modal-link"
+          >Manage your repos</router-link
+        >
+      </div>
+    </div>
+    <form method="dialog" class="modal-backdrop">
+      <button></button>
+    </form>
+  </dialog>
+</template>
+
+<style scoped lang="scss">
+.profile-modal {
+  --pm-rule: color-mix(
+    in oklch,
+    var(--color-base-content) 12%,
+    var(--color-base-200)
+  );
+  --pm-ink: var(--color-base-content);
+  --pm-ink-soft: color-mix(
+    in oklch,
+    var(--color-base-content) 65%,
+    var(--color-base-200)
+  );
+  --pm-ink-faint: color-mix(
+    in oklch,
+    var(--color-base-content) 38%,
+    var(--color-base-200)
+  );
+  --pm-accent: #e36598;
+  --pm-accent-wash: color-mix(in oklch, #e36598 12%, var(--color-base-200));
+  --pm-accent-deep: color-mix(
+    in oklch,
+    #e36598 75%,
+    var(--color-base-content)
+  );
+}
+
+.profile-modal-box {
+  background: var(--color-base-200);
+  border: 1px solid var(--pm-rule);
+  border-radius: 6px;
+  padding: 1.5rem;
+  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.3);
+  color: var(--pm-ink);
+}
+
+.profile-modal-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+
+  h3 {
+    font-size: 1.3rem;
+    margin: 0;
+    font-weight: 600;
+  }
+}
+
+.profile-modal-x {
+  border: 0;
+  background: transparent;
+  font-size: 1.5rem;
+  cursor: pointer;
+  color: var(--pm-ink-soft);
+  line-height: 1;
+  padding: 0.25rem 0.5rem;
+
+  &:hover {
+    color: var(--pm-accent-deep);
+  }
+}
+
+.profile-modal-section {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  align-items: center;
+  margin-bottom: 0.5rem;
+}
+
+.profile-modal-label {
+  display: block;
+  width: 100%;
+  font-size: 0.72rem;
+  letter-spacing: 0.14em;
+  color: var(--pm-ink-faint);
+  margin-bottom: 0.25rem;
+  text-transform: uppercase;
+}
+
+.profile-modal-rule {
+  border: 0;
+  border-top: 1px solid var(--pm-rule);
+  margin: 1.25rem 0;
+}
+
+.profile-modal-link {
+  font-size: 16px;
+  padding: 0.55rem 1rem;
+  border-radius: 2px;
+  border: 1px solid var(--pm-rule);
+  background: transparent;
+  color: var(--pm-ink-soft);
+  cursor: pointer;
+  transition:
+    background 0.15s,
+    color 0.15s,
+    border-color 0.15s;
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+
+  &:hover {
+    background: var(--pm-accent-wash);
+    border-color: var(--pm-accent);
+    color: var(--pm-accent-deep);
+  }
+}
+</style>
diff --git a/src/components/UserPill.vue b/src/components/UserPill.vue
new file mode 100644
index 0000000..00c6f9f
--- /dev/null
+++ b/src/components/UserPill.vue
@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import { computed } from "vue"
+
+import { useATProtoLogin } from "@/hooks/useATProtoLogin.hook"
+import { useGitHubLogin } from "@/hooks/useGitHubLogin.hook"
+
+const { username, accessToken } = useGitHubLogin()
+const { isLoggedIn: isATProtoLoggedIn, handle, avatarUrl } = useATProtoLogin()
+
+defineEmits<{
+  click: []
+}>()
+
+const isGitHubLoggedIn = computed(() => !!accessToken.value)
+const isAnyUserLoggedIn = computed(
+  () => isGitHubLoggedIn.value || isATProtoLoggedIn.value
+)
+const displayUsername = computed(() => handle.value || username.value || "")
+const displayInitial = computed(() =>
+  (displayUsername.value[0] || "?").toUpperCase()
+)
+</script>
+
+<template>
+  <button
+    v-if="isAnyUserLoggedIn"
+    class="profile-chip"
+    type="button"
+    @click="$emit('click')"
+  >
+    <img
+      v-if="isATProtoLoggedIn && avatarUrl"
+      :src="avatarUrl"
+      class="profile-avatar-small"
+      alt="Profile"
+    />
+    <span v-else class="profile-avatar-small profile-avatar-initial">
+      {{ displayInitial }}
+    </span>
+    <span class="profile-name">{{ displayUsername }}</span>
+  </button>
+  <button
+    v-else
+    class="profile-chip profile-chip--ghost"
+    type="button"
+    @click="$emit('click')"
+  >
+    Sign in
+  </button>
+</template>
+
+<style scoped lang="scss">
+.profile-chip {
+  --pill-rule: color-mix(
+    in oklch,
+    var(--color-base-content) 12%,
+    var(--color-base-200)
+  );
+  --pill-accent: #e36598;
+  --pill-accent-wash: color-mix(
+    in oklch,
+    #e36598 12%,
+    var(--color-base-200)
+  );
+
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.25rem 0.75rem 0.25rem 0.25rem;
+  border-radius: 999px;
+  border: 1px solid var(--pill-rule);
+  background: transparent;
+  cursor: pointer;
+  color: var(--color-base-content);
+  transition:
+    border-color 0.15s,
+    background 0.15s;
+
+  &:hover {
+    border-color: var(--pill-accent);
+    background: var(--pill-accent-wash);
+  }
+
+  &.profile-chip--ghost {
+    padding: 0.35rem 0.9rem;
+    font-size: 0.95rem;
+  }
+}
+
+.profile-avatar-small {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  object-fit: cover;
+  display: block;
+}
+
+.profile-avatar-initial {
+  background: var(--pill-accent, #e36598);
+  color: white;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+  font-size: 0.9rem;
+}
+
+.profile-name {
+  font-size: 0.95rem;
+}
+</style>