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.
This commit is contained in:
Julien Calixte
153
src/components/ProfileModal.vue
Normal file
153
src/components/ProfileModal.vue
Normal file
@@ -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>
|
||||||
111
src/components/UserPill.vue
Normal file
111
src/components/UserPill.vue
Normal file
@@ -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>
|
||||||
Reference in New Issue
Block a user