Skip to content

Commit f5f5e0a

Browse files
omargfhomargfh
committed
wip
1 parent f3ac04c commit f5f5e0a

33 files changed

Lines changed: 670 additions & 1403 deletions

‎apps/modeling-commons-frontend/.Codex/DECISIONS.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,4 @@
44
- 2026-04-21: Use a single `/reset-password` page for both reset-link requests and token-based password updates so Better Auth's redirect callback lands on one stable frontend route.
55
- 2026-04-21: Route successful email/password sign-ins through `/passkey?next=...` so users can add a platform passkey before continuing to the destination page.
66
- 2026-04-21: Scaffold profile settings at `/profile/settings`, but only persist fields the backend currently patches (`userKind` and `isProfilePublic`); keep name, email, and avatar as read-only account metadata for now.
7-
- 2026-04-21: Keep auth/settings pages thin by routing auth and passkey mutations through composables, and prefer Nuxt UI defaults plus scoped semantic CSS over utility-heavy page markup for new UI in this app.
7+
- 2026-04-21: Keep auth/settings pages thin by routing auth and passkey mutations through composables, and express their UI with Nuxt UI defaults plus inline Tailwind utilities rather than custom scoped class systems.

‎apps/modeling-commons-frontend/app/app.config.ts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -213,6 +213,11 @@ export default defineAppConfig({
213213
class:
214214
"ring-neutral-darkest/15 text-highlighted hover:bg-neutral-light/5 focus-visible:ring-neutral-darkest/25",
215215
},
216+
{
217+
square: true,
218+
size: "lg",
219+
class: "p-[0.625rem] text-[1.4rem]",
220+
},
216221
{
217222
square: true,
218223
size: "md",
@@ -269,6 +274,17 @@ export default defineAppConfig({
269274
variant: "outline",
270275
class: {
271276
base: "bg-royal-blue-lightest/20 hover:bg-royal-blue-lightest/50 data-[dragging=true]:bg-royal-blue-lightest/80",
277+
file: "group/file",
278+
fileTrailingButton: "hover:text-error",
279+
},
280+
},
281+
{
282+
layout: "grid",
283+
multiple: false,
284+
class: {
285+
file: "p-5",
286+
fileTrailingButton:
287+
"bg-royal-blue-lightest hover:bg-error text-dimmed hover:text-white p-0.5 transition-colors",
272288
},
273289
},
274290
],

‎apps/modeling-commons-frontend/app/components/ClientNavbar.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@
5252
size="sm"
5353
class="rounded-full bg-neutral-lighter"
5454
/>
55-
<span class="text-sm text-muted">{{ user.name }}</span>
55+
<span class="text-sm text-muted hidden sm:block">{{ user.name }}</span>
5656
<UIcon
5757
name="i-lucide-chevron-down"
5858
class="text-muted group-hover:text-toned transition-transform"

‎apps/modeling-commons-frontend/app/components/SearchBar.vue‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,7 @@ defineShortcuts({
1515
</script>
1616

1717
<template>
18-
<UInput
19-
ref="input"
20-
placeholder="Search models by keyword..."
21-
icon="i-lucide-search"
22-
class="max-w-md lg:max-w-3xl"
23-
>
18+
<UInput ref="input" placeholder="Search models by keyword..." icon="i-lucide-search">
2419
<template #trailing>
2520
<UKbd value="meta" />
2621
<UKbd value="K" />

‎apps/modeling-commons-frontend/app/components/auth/AuthPageIntro.vue‎

Lines changed: 5 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<template>
2-
<div class="auth-page-intro">
3-
<UIcon :name="icon" class="auth-page-intro__icon" />
4-
<div class="auth-page-intro__copy">
5-
<h1 class="auth-page-intro__title">{{ title }}</h1>
6-
<p class="auth-page-intro__description">
2+
<div class="grid justify-items-center gap-3 text-center">
3+
<UIcon :name="icon" class="text-primary text-4xl" />
4+
<div class="grid gap-2">
5+
<h1 class="m-0 text-2xl font-medium text-highlighted">{{ title }}</h1>
6+
<p class="m-0 text-sm text-muted">
77
<slot>{{ description }}</slot>
88
</p>
99
</div>
@@ -17,35 +17,3 @@ defineProps<{
1717
description?: string;
1818
}>();
1919
</script>
20-
21-
<style scoped>
22-
.auth-page-intro {
23-
display: grid;
24-
gap: 0.75rem;
25-
justify-items: center;
26-
text-align: center;
27-
}
28-
29-
.auth-page-intro__icon {
30-
font-size: 2.5rem;
31-
color: var(--ui-color-primary-500);
32-
}
33-
34-
.auth-page-intro__copy {
35-
display: grid;
36-
gap: 0.5rem;
37-
}
38-
39-
.auth-page-intro__title {
40-
margin: 0;
41-
font-size: 1.5rem;
42-
font-weight: 500;
43-
color: var(--ui-text-highlighted);
44-
}
45-
46-
.auth-page-intro__description {
47-
margin: 0;
48-
font-size: 0.9375rem;
49-
color: var(--ui-text-muted);
50-
}
51-
</style>

‎apps/modeling-commons-frontend/app/components/profile-settings/ProfileSettingsAccountCard.vue‎

Lines changed: 19 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,10 @@
11
<template>
22
<ProfileSettingsCard eyebrow="Account" title="Profile overview">
3-
<div class="profile-account-card__summary">
4-
<UUser
5-
:name="displayName"
6-
:avatar="{ src: displayImage, alt: displayName, size: '3xl' }"
7-
>
3+
<div class="border-b border-neutral-darkest/10 pb-6">
4+
<UUser :name="displayName" :avatar="{ src: displayImage, alt: displayName, size: 'xl' }">
85
<template #description>
9-
<div class="profile-account-card__identity">
10-
<span class="profile-account-card__email">
6+
<div class="flex flex-wrap items-center gap-3">
7+
<span class="inline-flex items-center gap-2 text-muted">
118
<UIcon name="i-lucide-mail" />
129
{{ displayEmail }}
1310
</span>
@@ -19,24 +16,24 @@
1916
</UUser>
2017
</div>
2118

22-
<div class="profile-account-card__details">
23-
<article class="profile-account-card__detail">
24-
<p class="profile-account-card__label">Member since</p>
25-
<p class="profile-account-card__value">{{ formatDate(createdAt) }}</p>
19+
<div class="grid gap-4 sm:grid-cols-2">
20+
<article class="grid gap-2 rounded-md bg-neutral-darkest/5 p-4">
21+
<p class="m-0 text-xs uppercase tracking-widest text-muted">Member since</p>
22+
<p class="m-0 font-medium text-highlighted">{{ formatDate(createdAt) }}</p>
2623
</article>
27-
<article class="profile-account-card__detail">
28-
<p class="profile-account-card__label">System role</p>
29-
<p class="profile-account-card__value">{{ systemRoleLabel }}</p>
24+
<article class="grid gap-2 rounded-md bg-neutral-darkest/5 p-4">
25+
<p class="m-0 text-xs uppercase tracking-widest text-muted">System role</p>
26+
<p class="m-0 font-medium text-highlighted">{{ systemRoleLabel }}</p>
3027
</article>
31-
<article class="profile-account-card__detail">
32-
<p class="profile-account-card__label">Display name</p>
33-
<p class="profile-account-card__value">{{ displayName }}</p>
34-
<p class="profile-account-card__hint">Name editing is not available in this app yet.</p>
28+
<article class="grid gap-2 rounded-md bg-neutral-darkest/5 p-4">
29+
<p class="m-0 text-xs uppercase tracking-widest text-muted">Display name</p>
30+
<p class="m-0 font-medium text-highlighted">{{ displayName }}</p>
31+
<p class="m-0 text-sm text-muted">Name editing is not available in this app yet.</p>
3532
</article>
36-
<article class="profile-account-card__detail">
37-
<p class="profile-account-card__label">Email</p>
38-
<p class="profile-account-card__value profile-account-card__value--break">{{ displayEmail }}</p>
39-
<p class="profile-account-card__hint">
33+
<article class="grid gap-2 rounded-md bg-neutral-darkest/5 p-4">
34+
<p class="m-0 text-xs uppercase tracking-widest text-muted">Email</p>
35+
<p class="m-0 break-words font-medium text-highlighted">{{ displayEmail }}</p>
36+
<p class="m-0 text-sm text-muted">
4037
Email changes still go through the auth service rather than this settings page.
4138
</p>
4239
</article>
@@ -54,68 +51,3 @@ defineProps<{
5451
systemRoleLabel: string;
5552
}>();
5653
</script>
57-
58-
<style scoped>
59-
.profile-account-card__summary {
60-
padding-bottom: 1.5rem;
61-
border-bottom: 1px solid color-mix(in srgb, var(--ui-border) 80%, transparent);
62-
}
63-
64-
.profile-account-card__identity {
65-
display: flex;
66-
flex-wrap: wrap;
67-
align-items: center;
68-
gap: 0.75rem;
69-
}
70-
71-
.profile-account-card__email {
72-
display: inline-flex;
73-
align-items: center;
74-
gap: 0.5rem;
75-
color: var(--ui-text-muted);
76-
}
77-
78-
.profile-account-card__details {
79-
display: grid;
80-
grid-template-columns: repeat(2, minmax(0, 1fr));
81-
gap: 1rem;
82-
}
83-
84-
.profile-account-card__detail {
85-
display: grid;
86-
gap: 0.5rem;
87-
padding: 1rem;
88-
border-radius: 0.5rem;
89-
background: color-mix(in srgb, var(--ui-bg-muted) 65%, transparent);
90-
}
91-
92-
.profile-account-card__label {
93-
margin: 0;
94-
color: var(--ui-text-muted);
95-
font-size: 0.75rem;
96-
letter-spacing: 0.16em;
97-
text-transform: uppercase;
98-
}
99-
100-
.profile-account-card__value {
101-
margin: 0;
102-
color: var(--ui-text-highlighted);
103-
font-weight: 500;
104-
}
105-
106-
.profile-account-card__value--break {
107-
overflow-wrap: anywhere;
108-
}
109-
110-
.profile-account-card__hint {
111-
margin: 0;
112-
color: var(--ui-text-muted);
113-
font-size: 0.875rem;
114-
}
115-
116-
@media (max-width: 640px) {
117-
.profile-account-card__details {
118-
grid-template-columns: minmax(0, 1fr);
119-
}
120-
}
121-
</style>

‎apps/modeling-commons-frontend/app/components/profile-settings/ProfileSettingsCard.vue‎

Lines changed: 13 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -2,24 +2,26 @@
22
<UCard
33
:variant="variant"
44
:ui="{
5-
root: 'profile-settings-card-root border-0 ring-1 ring-neutral-darkest/8',
6-
body: 'profile-settings-card-body',
5+
root: 'rounded-xl border-0 ring-1 ring-neutral-darkest/8 bg-background',
6+
body: 'p-6 sm:p-8',
77
}"
88
>
9-
<section class="profile-settings-card">
10-
<header v-if="title || description || eyebrow || $slots.header" class="profile-settings-card__header">
11-
<div class="profile-settings-card__intro">
12-
<p v-if="eyebrow" class="profile-settings-card__eyebrow">{{ eyebrow }}</p>
13-
<div class="profile-settings-card__heading">
14-
<div class="profile-settings-card__copy">
15-
<h2 v-if="title" class="profile-settings-card__title">{{ title }}</h2>
16-
<p v-if="description" class="profile-settings-card__description">{{ description }}</p>
9+
<section class="grid gap-6">
10+
<header v-if="title || description || eyebrow || $slots.header" class="grid gap-3">
11+
<div class="grid gap-3">
12+
<p v-if="eyebrow" class="m-0 text-xs uppercase tracking-widest text-muted">
13+
{{ eyebrow }}
14+
</p>
15+
<div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
16+
<div class="grid gap-1.5">
17+
<h2 v-if="title" class="m-0 text-xl font-medium text-highlighted">{{ title }}</h2>
18+
<p v-if="description" class="m-0 text-sm text-muted">{{ description }}</p>
1719
</div>
1820
<slot name="header" />
1921
</div>
2022
</div>
2123
</header>
22-
<div class="profile-settings-card__content">
24+
<div class="grid gap-5">
2325
<slot />
2426
</div>
2527
</section>
@@ -42,77 +44,3 @@ withDefaults(
4244
},
4345
);
4446
</script>
45-
46-
<style scoped>
47-
.profile-settings-card :deep(.profile-settings-card-root) {
48-
background: var(--ui-bg);
49-
border-radius: 0.75rem;
50-
}
51-
52-
.profile-settings-card :deep(.profile-settings-card-body) {
53-
padding: 2rem;
54-
}
55-
56-
.profile-settings-card {
57-
display: grid;
58-
gap: 1.5rem;
59-
}
60-
61-
.profile-settings-card__header {
62-
display: grid;
63-
gap: 0.75rem;
64-
}
65-
66-
.profile-settings-card__intro {
67-
display: grid;
68-
gap: 0.75rem;
69-
}
70-
71-
.profile-settings-card__eyebrow {
72-
margin: 0;
73-
color: var(--ui-text-muted);
74-
font-size: 0.75rem;
75-
letter-spacing: 0.18em;
76-
text-transform: uppercase;
77-
}
78-
79-
.profile-settings-card__heading {
80-
display: flex;
81-
justify-content: space-between;
82-
align-items: flex-start;
83-
gap: 1rem;
84-
}
85-
86-
.profile-settings-card__copy {
87-
display: grid;
88-
gap: 0.35rem;
89-
}
90-
91-
.profile-settings-card__title {
92-
margin: 0;
93-
color: var(--ui-text-highlighted);
94-
font-size: 1.25rem;
95-
font-weight: 500;
96-
}
97-
98-
.profile-settings-card__description {
99-
margin: 0;
100-
color: var(--ui-text-muted);
101-
font-size: 0.9375rem;
102-
}
103-
104-
.profile-settings-card__content {
105-
display: grid;
106-
gap: 1.25rem;
107-
}
108-
109-
@media (max-width: 640px) {
110-
.profile-settings-card :deep(.profile-settings-card-body) {
111-
padding: 1.5rem;
112-
}
113-
114-
.profile-settings-card__heading {
115-
flex-direction: column;
116-
}
117-
}
118-
</style>

0 commit comments

Comments
 (0)