luckberg/familysync
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(17): IN-05 normalize AdminPage JSX formatting with Prettier

Browse Source
This commit is contained in:
Lucas Berger
2026-06-18 13:48:34 -04:00
parent 11b6b36cb9
commit 4bc1e2a820
1 changed files with 261 additions and 271 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/pwa/src/routes/AdminPage.tsx
+261 -271
View File
@@ -244,9 +244,7 @@ export function AdminPage() {
e.preventDefault(); e.preventDefault();
setActiveTab(next); setActiveTab(next);
( (
e.currentTarget.parentElement?.querySelector( e.currentTarget.parentElement?.querySelector(`[id="admin-tab-${next}"]`) as HTMLElement | null
`[id="admin-tab-${next}"]`,
) as HTMLElement | null
)?.focus(); )?.focus();
} }
@@ -370,13 +368,9 @@ export function AdminPage() {
fontSize: 'var(--text-label-size, 13px)', fontSize: 'var(--text-label-size, 13px)',
fontWeight: activeTab === id ? 600 : 400, fontWeight: activeTab === id ? 600 : 400,
color: color:
activeTab === id activeTab === id ? 'var(--color-text-primary)' : 'var(--color-text-secondary)',
? 'var(--color-text-primary)'
: 'var(--color-text-secondary)',
borderBottom: borderBottom:
activeTab === id activeTab === id ? '2px solid var(--color-member-0)' : '2px solid transparent',
? '2px solid var(--color-member-0)'
: '2px solid transparent',
transition: 'color 0.1s ease, border-color 0.1s ease', transition: 'color 0.1s ease, border-color 0.1s ease',
fontFamily: 'var(--font-family-base)', fontFamily: 'var(--font-family-base)',
}} }}
@@ -394,281 +388,280 @@ export function AdminPage() {
tabIndex={0} tabIndex={0}
hidden={activeTab !== 'members'} hidden={activeTab !== 'members'}
> >
{/* ── MEMBERS section ───────────────────────────────────────────── */} {/* ── MEMBERS section ───────────────────────────────────────────── */}
<section aria-label="Members" style={{ marginBottom: 'var(--space-8, 32px)' }}> <section aria-label="Members" style={{ marginBottom: 'var(--space-8, 32px)' }}>
<div style={sectionLabelStyle}>Members</div> <div style={sectionLabelStyle}>Members</div>
{membersQuery.isLoading && ( {membersQuery.isLoading && (
<div <div
style={{ style={{
padding: 'var(--space-4, 16px) 0', padding: 'var(--space-4, 16px) 0',
color: 'var(--color-text-muted)', color: 'var(--color-text-muted)',
fontSize: 'var(--text-body-size, 15px)', fontSize: 'var(--text-body-size, 15px)',
}} }}
> >
Loading members… Loading members…
</div> </div>
)} )}
{membersQuery.isError && ( {membersQuery.isError && (
<div <div
style={{ style={{
color: 'var(--color-destructive)', color: 'var(--color-destructive)',
fontSize: 'var(--text-body-size, 15px)', fontSize: 'var(--text-body-size, 15px)',
padding: 'var(--space-4, 16px) 0', padding: 'var(--space-4, 16px) 0',
}} }}
> >
Could not load members. Could not load members.
</div> </div>
)} )}
{membersQuery.data && ( {membersQuery.data && (
<div> <div>
{membersQuery.data.members.map((member, idx) => ( {membersQuery.data.members.map((member, idx) => (
<MemberRow <MemberRow
key={member.id} key={member.id}
member={member} member={member}
colorIndex={idx} colorIndex={idx}
onAction={(buttonRef) => openSheet(member, buttonRef)} onAction={(buttonRef) => openSheet(member, buttonRef)}
onResetPassword={(buttonRef) => { onResetPassword={(buttonRef) => {
// Capture trigger button so focus can return on close // Capture trigger button so focus can return on close
resetTriggerRef.current = buttonRef.current; resetTriggerRef.current = buttonRef.current;
setResetTargetMember(member); setResetTargetMember(member);
setResetSheetOpen(true); setResetSheetOpen(true);
}} }}
/> />
))} ))}
</div> </div>
)} )}
</section> </section>
{/* ── LOCAL ACCOUNTS section ──────────────────────────────────────── */} {/* ── LOCAL ACCOUNTS section ──────────────────────────────────────── */}
<section aria-label="Local Accounts" style={{ marginBottom: 'var(--space-8, 32px)' }}> <section aria-label="Local Accounts" style={{ marginBottom: 'var(--space-8, 32px)' }}>
<div style={sectionLabelStyle}>Local Accounts</div> <div style={sectionLabelStyle}>Local Accounts</div>
{/* Surface 11A — Add member inline form */} {/* Surface 11A — Add member inline form */}
<div
style={{
border: '1px solid var(--color-border-subtle, var(--color-border))',
borderRadius: '8px',
padding: 'var(--space-4, 16px)',
marginBottom: 'var(--space-6, 24px)',
}}
>
<div <div
style={{ style={{
fontSize: 'var(--text-body-size, 15px)', border: '1px solid var(--color-border-subtle, var(--color-border))',
fontWeight: 600, borderRadius: '8px',
color: 'var(--color-text-primary)', padding: 'var(--space-4, 16px)',
marginBottom: 'var(--space-4, 16px)', marginBottom: 'var(--space-6, 24px)',
}} }}
> >
Add member
</div>
{/* Display name */}
<div style={{ marginBottom: 'var(--space-3, 12px)' }}>
<label
htmlFor="admin-create-display-name"
style={{
display: 'block',
fontSize: 'var(--text-label-size, 13px)',
fontWeight: 600,
color: 'var(--color-text-primary)',
marginBottom: 'var(--space-1, 4px)',
}}
>
Display name
</label>
<input
id="admin-create-display-name"
type="text"
value={createDisplayName}
onChange={(e) => setCreateDisplayName(e.target.value)}
style={{
width: '100%',
boxSizing: 'border-box',
padding: 'var(--space-3, 12px) var(--space-4, 16px)',
border: '1px solid var(--color-border)',
borderRadius: 'var(--space-1, 4px)',
fontSize: 'var(--text-body-size, 15px)',
color: 'var(--color-text-primary)',
background: 'var(--color-surface)',
fontFamily: 'var(--font-family-base)',
outline: 'none',
minHeight: '44px',
}}
/>
</div>
{/* Username */}
<div style={{ marginBottom: 'var(--space-3, 12px)' }}>
<label
htmlFor="admin-create-username"
style={{
display: 'block',
fontSize: 'var(--text-label-size, 13px)',
fontWeight: 600,
color: 'var(--color-text-primary)',
marginBottom: 'var(--space-1, 4px)',
}}
>
Username
</label>
<input
id="admin-create-username"
type="text"
autoComplete="off"
spellCheck={false}
autoCapitalize="none"
value={createUsername}
onChange={(e) => setCreateUsername(e.target.value)}
style={{
width: '100%',
boxSizing: 'border-box',
padding: 'var(--space-3, 12px) var(--space-4, 16px)',
border: '1px solid var(--color-border)',
borderRadius: 'var(--space-1, 4px)',
fontSize: 'var(--text-body-size, 15px)',
color: 'var(--color-text-primary)',
background: 'var(--color-surface)',
fontFamily: 'var(--font-family-base)',
outline: 'none',
minHeight: '44px',
}}
/>
</div>
{/* Initial password */}
<div style={{ marginBottom: 'var(--space-3, 12px)' }}>
<label
htmlFor="admin-create-password"
style={{
display: 'block',
fontSize: 'var(--text-label-size, 13px)',
fontWeight: 600,
color: 'var(--color-text-primary)',
marginBottom: 'var(--space-1, 4px)',
}}
>
Initial password
</label>
<input
id="admin-create-password"
type="password"
autoComplete="new-password"
value={createPassword}
onChange={(e) => setCreatePassword(e.target.value)}
style={{
width: '100%',
boxSizing: 'border-box',
padding: 'var(--space-3, 12px) var(--space-4, 16px)',
border: '1px solid var(--color-border)',
borderRadius: 'var(--space-1, 4px)',
fontSize: 'var(--text-body-size, 15px)',
color: 'var(--color-text-primary)',
background: 'var(--color-surface)',
fontFamily: 'var(--font-family-base)',
outline: 'none',
minHeight: '44px',
}}
/>
</div>
{/* Confirm password */}
<div style={{ marginBottom: 'var(--space-4, 16px)' }}>
<label
htmlFor="admin-create-confirm-password"
style={{
display: 'block',
fontSize: 'var(--text-label-size, 13px)',
fontWeight: 600,
color: 'var(--color-text-primary)',
marginBottom: 'var(--space-1, 4px)',
}}
>
Confirm password
</label>
<input
id="admin-create-confirm-password"
type="password"
autoComplete="new-password"
value={createConfirmPassword}
onChange={(e) => setCreateConfirmPassword(e.target.value)}
style={{
width: '100%',
boxSizing: 'border-box',
padding: 'var(--space-3, 12px) var(--space-4, 16px)',
border: '1px solid var(--color-border)',
borderRadius: 'var(--space-1, 4px)',
fontSize: 'var(--text-body-size, 15px)',
color: 'var(--color-text-primary)',
background: 'var(--color-surface)',
fontFamily: 'var(--font-family-base)',
outline: 'none',
minHeight: '44px',
}}
/>
</div>
{/* Inline error */}
{createError && (
<div <div
style={{ style={{
fontSize: 'var(--text-label-size, 13px)', fontSize: 'var(--text-body-size, 15px)',
fontWeight: 400,
color: 'var(--color-destructive)',
marginBottom: 'var(--space-3, 12px)',
}}
>
{createError}
</div>
)}
{/* Action row */}
<div style={{ display: 'flex', justifyContent: 'flex-end' }}>
<button
type="button"
disabled={createSubmitDisabled}
onClick={() => {
setCreateError(null);
createMemberMutation.mutate();
}}
style={{
background: createSubmitDisabled
? 'var(--color-border, #e2e4e9)'
: 'var(--color-member-0, #4a90d9)',
color: '#ffffff',
border: 'none',
cursor: createSubmitDisabled ? 'default' : 'pointer',
fontSize: 'var(--text-label-size, 13px)',
fontWeight: 600, fontWeight: 600,
minHeight: '44px', color: 'var(--color-text-primary)',
minWidth: '44px', marginBottom: 'var(--space-4, 16px)',
padding: '0 var(--space-6, 24px)',
borderRadius: 'var(--space-1, 4px)',
fontFamily: 'var(--font-family-base)',
transition: 'background 0.15s ease',
display: 'flex',
alignItems: 'center',
gap: 'var(--space-2, 8px)',
}} }}
> >
{createMemberMutation.isPending && (
<Loader2
size={14}
aria-hidden="true"
style={{ animation: 'spin 1s linear infinite', flexShrink: 0 }}
/>
)}
Add member Add member
</button> </div>
</div>
</div>
</section>
</div>{/* end admin-panel-members */} {/* Display name */}
<div style={{ marginBottom: 'var(--space-3, 12px)' }}>
<label
htmlFor="admin-create-display-name"
style={{
display: 'block',
fontSize: 'var(--text-label-size, 13px)',
fontWeight: 600,
color: 'var(--color-text-primary)',
marginBottom: 'var(--space-1, 4px)',
}}
>
Display name
</label>
<input
id="admin-create-display-name"
type="text"
value={createDisplayName}
onChange={(e) => setCreateDisplayName(e.target.value)}
style={{
width: '100%',
boxSizing: 'border-box',
padding: 'var(--space-3, 12px) var(--space-4, 16px)',
border: '1px solid var(--color-border)',
borderRadius: 'var(--space-1, 4px)',
fontSize: 'var(--text-body-size, 15px)',
color: 'var(--color-text-primary)',
background: 'var(--color-surface)',
fontFamily: 'var(--font-family-base)',
outline: 'none',
minHeight: '44px',
}}
/>
</div>
{/* Username */}
<div style={{ marginBottom: 'var(--space-3, 12px)' }}>
<label
htmlFor="admin-create-username"
style={{
display: 'block',
fontSize: 'var(--text-label-size, 13px)',
fontWeight: 600,
color: 'var(--color-text-primary)',
marginBottom: 'var(--space-1, 4px)',
}}
>
Username
</label>
<input
id="admin-create-username"
type="text"
autoComplete="off"
spellCheck={false}
autoCapitalize="none"
value={createUsername}
onChange={(e) => setCreateUsername(e.target.value)}
style={{
width: '100%',
boxSizing: 'border-box',
padding: 'var(--space-3, 12px) var(--space-4, 16px)',
border: '1px solid var(--color-border)',
borderRadius: 'var(--space-1, 4px)',
fontSize: 'var(--text-body-size, 15px)',
color: 'var(--color-text-primary)',
background: 'var(--color-surface)',
fontFamily: 'var(--font-family-base)',
outline: 'none',
minHeight: '44px',
}}
/>
</div>
{/* Initial password */}
<div style={{ marginBottom: 'var(--space-3, 12px)' }}>
<label
htmlFor="admin-create-password"
style={{
display: 'block',
fontSize: 'var(--text-label-size, 13px)',
fontWeight: 600,
color: 'var(--color-text-primary)',
marginBottom: 'var(--space-1, 4px)',
}}
>
Initial password
</label>
<input
id="admin-create-password"
type="password"
autoComplete="new-password"
value={createPassword}
onChange={(e) => setCreatePassword(e.target.value)}
style={{
width: '100%',
boxSizing: 'border-box',
padding: 'var(--space-3, 12px) var(--space-4, 16px)',
border: '1px solid var(--color-border)',
borderRadius: 'var(--space-1, 4px)',
fontSize: 'var(--text-body-size, 15px)',
color: 'var(--color-text-primary)',
background: 'var(--color-surface)',
fontFamily: 'var(--font-family-base)',
outline: 'none',
minHeight: '44px',
}}
/>
</div>
{/* Confirm password */}
<div style={{ marginBottom: 'var(--space-4, 16px)' }}>
<label
htmlFor="admin-create-confirm-password"
style={{
display: 'block',
fontSize: 'var(--text-label-size, 13px)',
fontWeight: 600,
color: 'var(--color-text-primary)',
marginBottom: 'var(--space-1, 4px)',
}}
>
Confirm password
</label>
<input
id="admin-create-confirm-password"
type="password"
autoComplete="new-password"
value={createConfirmPassword}
onChange={(e) => setCreateConfirmPassword(e.target.value)}
style={{
width: '100%',
boxSizing: 'border-box',
padding: 'var(--space-3, 12px) var(--space-4, 16px)',
border: '1px solid var(--color-border)',
borderRadius: 'var(--space-1, 4px)',
fontSize: 'var(--text-body-size, 15px)',
color: 'var(--color-text-primary)',
background: 'var(--color-surface)',
fontFamily: 'var(--font-family-base)',
outline: 'none',
minHeight: '44px',
}}
/>
</div>
{/* Inline error */}
{createError && (
<div
style={{
fontSize: 'var(--text-label-size, 13px)',
fontWeight: 400,
color: 'var(--color-destructive)',
marginBottom: 'var(--space-3, 12px)',
}}
>
{createError}
</div>
)}
{/* Action row */}
<div style={{ display: 'flex', justifyContent: 'flex-end' }}>
<button
type="button"
disabled={createSubmitDisabled}
onClick={() => {
setCreateError(null);
createMemberMutation.mutate();
}}
style={{
background: createSubmitDisabled
? 'var(--color-border, #e2e4e9)'
: 'var(--color-member-0, #4a90d9)',
color: '#ffffff',
border: 'none',
cursor: createSubmitDisabled ? 'default' : 'pointer',
fontSize: 'var(--text-label-size, 13px)',
fontWeight: 600,
minHeight: '44px',
minWidth: '44px',
padding: '0 var(--space-6, 24px)',
borderRadius: 'var(--space-1, 4px)',
fontFamily: 'var(--font-family-base)',
transition: 'background 0.15s ease',
display: 'flex',
alignItems: 'center',
gap: 'var(--space-2, 8px)',
}}
>
{createMemberMutation.isPending && (
<Loader2
size={14}
aria-hidden="true"
style={{ animation: 'spin 1s linear infinite', flexShrink: 0 }}
/>
)}
Add member
</button>
</div>
</div>
</section>
</div>
{/* end admin-panel-members */}
{/* ── Tab panel: Settings ───────────────────────────────────────────── */} {/* ── Tab panel: Settings ───────────────────────────────────────────── */}
<div <div
@@ -678,7 +671,6 @@ export function AdminPage() {
tabIndex={0} tabIndex={0}
hidden={activeTab !== 'settings'} hidden={activeTab !== 'settings'}
> >
{/* ── SHARED CALENDAR section ──────────────────────────────────────── */} {/* ── SHARED CALENDAR section ──────────────────────────────────────── */}
<section aria-label="Shared Calendar" style={{ marginBottom: 'var(--space-8, 32px)' }}> <section aria-label="Shared Calendar" style={{ marginBottom: 'var(--space-8, 32px)' }}>
<div style={sectionLabelStyle}>Shared Calendar</div> <div style={sectionLabelStyle}>Shared Calendar</div>
@@ -984,9 +976,7 @@ export function AdminPage() {
color: 'var(--color-text-primary)', color: 'var(--color-text-primary)',
borderRadius: 'var(--space-1, 4px)', borderRadius: 'var(--space-1, 4px)',
cursor: 'pointer', cursor: 'pointer',
background: active background: active ? 'var(--color-member-0, #4A90D9)' : 'transparent',
? 'var(--color-member-0, #4A90D9)'
: 'transparent',
...(active ? { color: '#ffffff' } : null), ...(active ? { color: '#ffffff' } : null),
minHeight: '44px', minHeight: '44px',
display: 'flex', display: 'flex',
@@ -1069,10 +1059,10 @@ export function AdminPage() {
</> </>
)} )}
</section> </section>
</div>
</div>{/* end admin-panel-settings */} {/* end admin-panel-settings */}
</div>
</div>{/* end centered content column */} {/* end centered content column */}
{/* ── Success toast (D-08) ──────────────────────────────────────────────── */} {/* ── Success toast (D-08) ──────────────────────────────────────────────── */}
{toast && ( {toast && (