feat: expand profiles and weapon configuration
This commit is contained in:
JB
@@ -0,0 +1,188 @@
|
||||
<script lang="ts">
|
||||
import ImageUploadInput from '$lib/components/ImageUploadInput.svelte';
|
||||
import InfoPopover from '$lib/components/InfoPopover.svelte';
|
||||
import ModerationDisclosure from '$lib/components/ModerationDisclosure.svelte';
|
||||
import PendingForm from '$lib/components/PendingForm.svelte';
|
||||
import { toast } from '$lib/toast';
|
||||
import { browserSupportsWebAuthn, startRegistration } from '@simplewebauthn/browser';
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
let {
|
||||
account,
|
||||
displayName,
|
||||
avatarUrl
|
||||
}: {
|
||||
account: any;
|
||||
displayName: string;
|
||||
avatarUrl: string;
|
||||
} = $props();
|
||||
|
||||
type AccountPanel = 'identity' | 'access' | 'account';
|
||||
type AccessPanel = 'passkeys' | 'email' | 'local' | 'connections';
|
||||
type AvatarPanel = 'presets' | 'upload';
|
||||
function initialPanel(): AccountPanel {
|
||||
return (
|
||||
['identity', 'access', 'account'].includes(account.initialPanel)
|
||||
? account.initialPanel
|
||||
: 'identity'
|
||||
) as AccountPanel;
|
||||
}
|
||||
let accountPanel = $state<AccountPanel>(initialPanel());
|
||||
let accessPanel = $state<AccessPanel>('passkeys');
|
||||
let avatarPanel = $state<AvatarPanel>('presets');
|
||||
let avatarEditorOpen = $state(false);
|
||||
let passkeySupported = $state(true);
|
||||
let passkeyPending = $state(false);
|
||||
let passkeyName = $state('My passkey');
|
||||
let discordLinkPending = $state(false);
|
||||
let discordUnlinkConfirm = $state(false);
|
||||
|
||||
onMount(() => passkeySupported = browserSupportsWebAuthn());
|
||||
|
||||
async function registerPasskey() {
|
||||
if (passkeyPending) return;
|
||||
passkeyPending = true;
|
||||
try {
|
||||
const optionsRequest = await fetch('/auth/passkey/register/options', { method: 'POST' });
|
||||
if (!optionsRequest.ok) throw new Error('Could not start passkey registration.');
|
||||
const { options, challengeId } = await optionsRequest.json();
|
||||
const response = await startRegistration({ optionsJSON: options });
|
||||
const verification = await fetch('/auth/passkey/register/verify', {
|
||||
method: 'POST',
|
||||
headers: { 'content-type': 'application/json' },
|
||||
body: JSON.stringify({ challengeId, response, name: passkeyName })
|
||||
});
|
||||
const result = await verification.json();
|
||||
if (!verification.ok || !result.verified) {
|
||||
throw new Error(result.message || 'Passkey registration failed.');
|
||||
}
|
||||
toast.success('Passkey registered', 'Your new sign-in method is ready.');
|
||||
location.reload();
|
||||
} catch (error) {
|
||||
toast.error(
|
||||
'Passkey not registered',
|
||||
error instanceof Error ? error.message : 'Passkey registration was cancelled.'
|
||||
);
|
||||
passkeyPending = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<section class="account-console owner-account-control">
|
||||
<div class="console-head"><span>ACCOUNT CONTROL</span><i></i></div>
|
||||
<div class="account-tabs" aria-label="Account controls" role="tablist">
|
||||
<button class:active={accountPanel === 'identity'} role="tab" aria-selected={accountPanel === 'identity'} onclick={() => accountPanel = 'identity'}>PROFILE</button>
|
||||
<button class:active={accountPanel === 'access'} role="tab" aria-selected={accountPanel === 'access'} onclick={() => accountPanel = 'access'}>ACCESS</button>
|
||||
<button class:active={accountPanel === 'account'} role="tab" aria-selected={accountPanel === 'account'} onclick={() => accountPanel = 'account'}>ACCOUNT</button>
|
||||
</div>
|
||||
|
||||
{#if accountPanel === 'identity'}
|
||||
<div class="account-panel" role="tabpanel">
|
||||
<p class="eyebrow">AGENT PORTRAIT</p><h2>AVATAR</h2>
|
||||
<div class="current-avatar">
|
||||
<img src={avatarUrl} alt={`${displayName}'s current avatar`}/>
|
||||
<div><small>CURRENT AVATAR</small><strong>{displayName}</strong></div>
|
||||
<button type="button" class="secondary avatar-edit-trigger" aria-expanded={avatarEditorOpen} aria-controls="avatar-editor" onclick={() => avatarEditorOpen = !avatarEditorOpen}>{avatarEditorOpen ? 'CLOSE' : 'EDIT AVATAR'}</button>
|
||||
</div>
|
||||
{#if avatarEditorOpen}
|
||||
<div id="avatar-editor" class="avatar-editor">
|
||||
<div class="account-subtabs" role="tablist" aria-label="Avatar source">
|
||||
<button class:active={avatarPanel === 'presets'} role="tab" aria-selected={avatarPanel === 'presets'} onclick={() => avatarPanel = 'presets'}>SHD PRESETS</button>
|
||||
<button class:active={avatarPanel === 'upload'} role="tab" aria-selected={avatarPanel === 'upload'} onclick={() => avatarPanel = 'upload'}>CUSTOM UPLOAD</button>
|
||||
</div>
|
||||
{#if avatarPanel === 'presets'}
|
||||
<div class="avatar-picker" aria-label="SHD avatar presets">
|
||||
{#each account.avatarPresets as preset}
|
||||
<PendingForm action="/account?/selectAvatar" class="avatar-preset-form">
|
||||
<button class="avatar-preset" class:selected={avatarUrl === preset.url} name="preset" value={preset.id} aria-label={`Use ${preset.label} avatar`} aria-pressed={avatarUrl === preset.url}>
|
||||
<img src={preset.url} alt=""/><span>{preset.label}</span>
|
||||
</button>
|
||||
</PendingForm>
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
<PendingForm action="/account?/uploadAvatar" enctype="multipart/form-data" class="avatar-upload">
|
||||
<ImageUploadInput name="avatar" accept="image/jpeg,image/png,image/webp,image/avif" required emptyLabel="NO AVATAR SELECTED" browseLabel="CHOOSE AVATAR"/>
|
||||
<small class="identity-note">JPEG, PNG, WebP, or AVIF · 5 MiB maximum · cropped to a 256 px square.</small>
|
||||
<ModerationDisclosure compact/>
|
||||
<button class="secondary console-action">UPLOAD CUSTOM AVATAR →</button>
|
||||
</PendingForm>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
<hr/>
|
||||
<div class="account-section-heading">
|
||||
<div><p class="eyebrow">PUBLIC IDENTITY</p><h2>DISPLAY NAME</h2></div>
|
||||
<InfoPopover label="Display-name requirements" title="DISPLAY-NAME REQUIREMENTS" text="Use a unique name with 2–40 visible characters on one line. Unicode characters and spaces are supported."/>
|
||||
</div>
|
||||
<PendingForm action="/account?/changeDisplayName">
|
||||
<label class="field"><span class="sr-only">PUBLIC DISPLAY NAME</span><input name="displayName" value={displayName} maxlength="40" required/></label>
|
||||
<button class="primary console-action">UPDATE DISPLAY NAME →</button>
|
||||
</PendingForm>
|
||||
</div>
|
||||
{:else if accountPanel === 'access'}
|
||||
<div class="account-panel" role="tabpanel">
|
||||
<div class="access-subtabs" role="tablist" aria-label="Sign-in method controls">
|
||||
<button class:active={accessPanel === 'passkeys'} role="tab" aria-selected={accessPanel === 'passkeys'} onclick={() => accessPanel = 'passkeys'}><span>PASSKEYS</span><b>{account.passkeys.length}</b></button>
|
||||
<button class:active={accessPanel === 'email'} role="tab" aria-selected={accessPanel === 'email'} onclick={() => accessPanel = 'email'}><span>EMAIL</span><b>{account.emailIdentity ? 1 : 0}</b></button>
|
||||
<button class:active={accessPanel === 'local'} role="tab" aria-selected={accessPanel === 'local'} onclick={() => accessPanel = 'local'}><span>PASSWORD</span><b>{account.hasLocalCredentials ? 1 : 0}</b></button>
|
||||
<button class:active={accessPanel === 'connections'} role="tab" aria-selected={accessPanel === 'connections'} onclick={() => accessPanel = 'connections'}><span>LINKS</span><b>{account.discordConnection ? 1 : 0}</b></button>
|
||||
</div>
|
||||
{#if accessPanel === 'passkeys'}
|
||||
<p class="eyebrow">PREFERRED ACCESS</p><h2>PASSKEYS</h2>
|
||||
{#if account.passkeys.length}
|
||||
<div class="passkey-list">
|
||||
{#each account.passkeys as passkey}
|
||||
<div class="passkey-card"><div><b>{passkey.name}</b><small>{passkey.backedUp ? 'SYNCED PASSKEY' : 'DEVICE PASSKEY'}</small></div><PendingForm action="/account?/removePasskey"><input type="hidden" name="passkeyId" value={passkey.id}/><button class="passkey-remove" aria-label={`Remove ${passkey.name}`} disabled={account.authenticationMethods.total <= 1}>REMOVE</button></PendingForm></div>
|
||||
{/each}
|
||||
</div>
|
||||
{:else}<p class="account-method-empty">NO PASSKEYS REGISTERED</p>{/if}
|
||||
<label class="field">PASSKEY NAME<input bind:value={passkeyName} maxlength="60" placeholder="e.g. Windows Hello"/></label>
|
||||
<button class="primary console-action" disabled={!passkeySupported || passkeyPending || !passkeyName.trim()} aria-busy={passkeyPending} onclick={registerPasskey}>{passkeyPending ? 'REGISTERING…' : 'ADD A PASSKEY →'}</button>
|
||||
{:else if accessPanel === 'email'}
|
||||
<p class="eyebrow">PASSWORDLESS RECOVERY</p><h2>MAGIC LINK EMAIL</h2>
|
||||
{#if account.emailIdentity}
|
||||
<div class="verified-email"><div><b>{account.emailIdentity.email}</b><small>VERIFIED EMAIL IDENTITY</small></div><span>VERIFIED</span></div>
|
||||
<PendingForm action="/account?/removeEmailIdentity"><button class="secondary console-action" disabled={account.authenticationMethods.total <= 1}>REMOVE MAGIC-LINK EMAIL</button></PendingForm>
|
||||
{/if}
|
||||
<PendingForm action="/account?/requestEmailVerification">
|
||||
<label class="field">{account.emailIdentity ? 'CHANGE VERIFIED EMAIL' : 'EMAIL ADDRESS'}<input name="email" type="email" value={account.emailIdentity?.email ?? ''} autocomplete="email" required/></label>
|
||||
<button class="secondary console-action" disabled={!account.emailDeliveryConfigured}>SEND VERIFICATION LINK →</button>
|
||||
</PendingForm>
|
||||
{:else if accessPanel === 'local'}
|
||||
<p class="eyebrow">OPTIONAL FALLBACK</p><h2>USERNAME & PASSWORD</h2>
|
||||
{#if account.hasLocalCredentials}
|
||||
<PendingForm action="/account?/changeLoginUsername"><label class="field">PRIVATE LOGIN USERNAME<input name="username" value={account.loginUsername ?? ''} autocomplete="username" required/></label><button class="secondary console-action">UPDATE LOGIN USERNAME →</button></PendingForm>
|
||||
<hr/>
|
||||
<PendingForm action="/account?/changePassword"><label class="field">CURRENT PASSWORD<input name="currentPassword" type="password" autocomplete="current-password" required/></label><label class="field">NEW PASSWORD<input name="newPassword" type="password" autocomplete="new-password" minlength="12" required/></label><label class="field">CONFIRM PASSWORD<input name="confirmPassword" type="password" autocomplete="new-password" minlength="12" required/></label><button class="primary console-action">UPDATE PASSWORD →</button></PendingForm>
|
||||
<details class="method-removal"><summary>REMOVE USERNAME & PASSWORD</summary><PendingForm action="/account?/removeLocalCredentials"><label class="field">CURRENT PASSWORD<input name="password" type="password" autocomplete="current-password" required/></label><button class="danger console-action" disabled={account.authenticationMethods.total <= 1}>REMOVE PASSWORD SIGN-IN</button></PendingForm></details>
|
||||
{:else}
|
||||
<p class="account-method-empty">USERNAME AND PASSWORD SIGN-IN IS NOT CONFIGURED</p>
|
||||
<PendingForm action="/account?/addLocalCredentials"><label class="field">PRIVATE LOGIN USERNAME<input name="username" autocomplete="username" required/></label><label class="field">PASSWORD<input name="newPassword" type="password" autocomplete="new-password" minlength="12" required/></label><label class="field">CONFIRM PASSWORD<input name="confirmPassword" type="password" autocomplete="new-password" minlength="12" required/></label><button class="secondary console-action">ADD PASSWORD FALLBACK →</button></PendingForm>
|
||||
{/if}
|
||||
{:else}
|
||||
<p class="eyebrow">CONNECTIONS</p><h2>SIGN-IN PROVIDERS</h2>
|
||||
{#if account.discordConnection}
|
||||
<div class="connection-card discord-connection linked-connection provider-connection-card">
|
||||
<div class="connection-copy"><img src="/discord-symbol.svg" alt="" aria-hidden="true"/><div><b>{account.discordConnection.displayName ?? account.discordConnection.username ?? 'DISCORD USER'}</b><small>{account.discordConnection.username ? `@${account.discordConnection.username}` : `ID ${account.discordConnection.id}`}</small></div></div>
|
||||
<button class="connection-state provider-unlink-trigger" disabled={!account.discordConnection.canUnlink} onclick={() => discordUnlinkConfirm = true}>UNLINK</button>
|
||||
{#if discordUnlinkConfirm}<div class="provider-unlink-confirm"><b>UNLINK DISCORD?</b><div><button class="secondary" onclick={() => discordUnlinkConfirm = false}>CANCEL</button><PendingForm action="/account?/unlinkDiscord"><button class="primary">CONFIRM</button></PendingForm></div></div>{/if}
|
||||
</div>
|
||||
{:else}
|
||||
<a class="discord-link-button" class:interaction-pending={discordLinkPending} aria-busy={discordLinkPending} href="/auth/discord?mode=link" onclick={() => discordLinkPending = true}><img src="/discord-symbol.svg" alt="" aria-hidden="true"/><span>Link Discord</span></a>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
{:else}
|
||||
<div class="account-panel" role="tabpanel">
|
||||
<p class="eyebrow danger-eyebrow">ACCOUNT LIFECYCLE</p><h2>DELETE ACCOUNT</h2>
|
||||
<p class="account-retention">Your public contributions remain attributed to a deleted Agent.</p>
|
||||
<details class="danger-zone"><summary>OPEN DELETION CONTROLS</summary><PendingForm action="/account?/deleteAccount"><label class="field">TYPE DELETE TO CONFIRM<input name="confirmation" autocomplete="off" required/></label><label class="field">PASSWORD · IF CONFIGURED<input name="password" type="password" autocomplete="current-password"/></label><label class="deletion-purge-option"><input name="purgeSecurityData" type="checkbox"/><span><b>PURGE SECURITY HISTORY NOW</b><small>Delete retained login events and device metadata instead of waiting for normal retention cleanup.</small></span></label><button class="danger console-action">SOFT-DELETE MY ACCOUNT</button></PendingForm></details>
|
||||
</div>
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.owner-account-control{width:100%;min-width:0;padding:12px}.current-avatar{display:grid;grid-template-columns:58px minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px;border:1px solid var(--shd-border);background:#0d1011}.current-avatar>img{width:58px;height:58px;border:1px solid var(--shd-orange);border-radius:50%;object-fit:cover}.current-avatar>div{min-width:0;display:grid;gap:3px}.current-avatar small{color:var(--shd-text-dim);font-size:var(--shd-type-telemetry);font-weight:900;letter-spacing:.7px}.current-avatar strong{overflow:hidden;color:var(--shd-text);font-size:var(--shd-type-supporting);text-overflow:ellipsis;white-space:nowrap}.avatar-edit-trigger{min-height:40px;padding:0 10px}.avatar-editor{display:grid;gap:9px;margin-top:9px;padding-top:9px;border-top:1px solid var(--shd-border)}.account-section-heading{display:flex;align-items:start;justify-content:space-between;gap:8px}.account-section-heading h2{margin-bottom:0}.owner-account-control :global(.image-drop-input){grid-template-columns:58px minmax(0,1fr)}.owner-account-control :global(.image-upload-actions){grid-column:1/-1;grid-template-columns:1fr}.discord-link-button{width:100%;min-height:44px;display:flex;align-items:center;justify-content:center;gap:9px;border:1px solid #6571dc;background:#171a32;color:#fff}.discord-link-button img{width:22px}.provider-unlink-confirm{grid-column:1/-1;display:grid;gap:8px;margin-top:8px;padding-top:8px;border-top:1px solid var(--shd-border)}.provider-unlink-confirm>div{display:grid;grid-template-columns:1fr 1fr;gap:6px}.provider-unlink-confirm button{width:100%;min-height:40px}
|
||||
@media(max-width:650px){.current-avatar{grid-template-columns:52px minmax(0,1fr)}.current-avatar>img{width:52px;height:52px}.avatar-edit-trigger{grid-column:1/-1;width:100%;min-height:44px}}
|
||||
</style>
|
||||
@@ -1,29 +1,42 @@
|
||||
<script lang="ts">
|
||||
import { agentProfileHref } from '$lib/agents';
|
||||
import RoleBadgeList from '$lib/components/RoleBadgeList.svelte';
|
||||
|
||||
let {
|
||||
agent,
|
||||
size = 'default',
|
||||
meta = '',
|
||||
showId = false,
|
||||
linked = true
|
||||
linked = true,
|
||||
roles = null
|
||||
}: {
|
||||
agent: { id: string; displayName: string; avatarUrl: string; publicSlug?: string | null };
|
||||
size?: 'compact' | 'default' | 'large';
|
||||
meta?: string;
|
||||
showId?: boolean;
|
||||
linked?: boolean;
|
||||
roles?: string[] | null;
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
{#if linked}
|
||||
{#if linked && roles !== null}
|
||||
<div class="agent-profile-identity" class:compact={size === 'compact'} class:large={size === 'large'}>
|
||||
<img src={agent.avatarUrl} alt="" />
|
||||
<div class="agent-profile-content">
|
||||
<div class="agent-profile-name">
|
||||
<a href={agentProfileHref(agent)}>{agent.displayName}</a>
|
||||
<RoleBadgeList {roles} compact={size !== 'large'} />
|
||||
</div>
|
||||
{#if meta}<small>{meta}</small>{:else if showId}<small>AGENT {agent.id.slice(0,8).toUpperCase()}</small>{/if}
|
||||
</div>
|
||||
</div>
|
||||
{:else if linked}
|
||||
<a class="agent-identity" class:compact={size === 'compact'} class:large={size === 'large'} href={agentProfileHref(agent)}>
|
||||
<img src={agent.avatarUrl} alt="" />
|
||||
<span>
|
||||
<strong>{agent.displayName}</strong>
|
||||
{#if meta}<small>{meta}</small>{:else if showId}<small>AGENT {agent.id.slice(0,8).toUpperCase()}</small>{/if}
|
||||
</span>
|
||||
<i aria-hidden="true">›</i>
|
||||
</a>
|
||||
{:else}
|
||||
<div class="agent-identity unavailable" class:compact={size === 'compact'} class:large={size === 'large'}>
|
||||
@@ -33,14 +46,15 @@
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.agent-identity{min-width:0;display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:9px;color:var(--shd-text)}
|
||||
.agent-identity img{width:38px;height:38px;border:1px solid var(--shd-orange);border-radius:50%;background:var(--shd-surface);object-fit:cover}
|
||||
.agent-identity{min-width:0;display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:9px;color:var(--shd-text)}
|
||||
.agent-identity img{width:44px;height:44px;border:2px solid var(--shd-orange);border-radius:50%;background:var(--shd-surface);object-fit:cover}
|
||||
.agent-identity span{min-width:0;display:grid;gap:3px}.agent-identity strong,.agent-identity small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
||||
.agent-identity strong{font-size:var(--shd-type-supporting)}.agent-identity small{color:var(--shd-text-muted);font-size:var(--shd-type-telemetry);font-weight:900;letter-spacing:.7px}
|
||||
.agent-identity i{color:var(--shd-text-dim);font-size:18px;font-style:normal}.agent-identity:hover strong,.agent-identity:focus-visible strong,.agent-identity:hover i,.agent-identity:focus-visible i{color:var(--shd-orange)}
|
||||
.agent-identity.compact{grid-template-columns:30px minmax(0,1fr) auto;gap:7px}.agent-identity.compact img{width:30px;height:30px}.agent-identity.compact strong{font-size:var(--shd-type-telemetry)}
|
||||
.agent-identity.large{grid-template-columns:74px minmax(0,1fr) auto;gap:15px}.agent-identity.large img{width:74px;height:74px;box-shadow:0 0 0 5px var(--shd-bg),0 0 0 6px color-mix(in srgb,var(--shd-orange) 35%,transparent)}.agent-identity.large strong{font-size:clamp(1.5rem,3vw,2.6rem);line-height:1}.agent-identity.large small{font-size:var(--shd-type-supporting)}
|
||||
.agent-identity.unavailable{grid-template-columns:38px minmax(0,1fr)}.agent-identity.unavailable strong{color:var(--shd-text-muted)}
|
||||
.agent-identity:hover strong,.agent-identity:focus-visible strong{color:var(--shd-orange)}
|
||||
.agent-identity.compact{grid-template-columns:30px minmax(0,1fr);gap:7px}.agent-identity.compact img{width:30px;height:30px}.agent-identity.compact strong{font-size:var(--shd-type-telemetry)}
|
||||
.agent-identity.large{grid-template-columns:74px minmax(0,1fr);gap:15px}.agent-identity.large img,.agent-profile-identity.large>img{width:74px;height:74px;box-shadow:0 0 0 5px var(--shd-bg),0 0 0 6px var(--shd-orange)}.agent-identity.large strong{font-size:clamp(1.5rem,3vw,2.6rem);line-height:1}.agent-identity.large small{font-size:var(--shd-type-supporting)}
|
||||
.agent-profile-identity{min-width:0;display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:9px}.agent-profile-identity>img{width:44px;height:44px;border:2px solid var(--shd-orange);border-radius:50%;background:var(--shd-surface);object-fit:cover}.agent-profile-identity.compact{grid-template-columns:30px minmax(0,1fr);gap:7px}.agent-profile-identity.compact>img{width:30px;height:30px}.agent-profile-identity.large{grid-template-columns:74px minmax(0,1fr);gap:15px}.agent-profile-content{min-width:0;display:grid;gap:3px}.agent-profile-content>small{overflow:hidden;color:var(--shd-text-muted);font-size:var(--shd-type-telemetry);font-weight:900;letter-spacing:.7px;text-overflow:ellipsis;white-space:nowrap}.agent-profile-name{min-width:0;display:flex;align-items:center;flex-wrap:wrap;gap:5px 8px}.agent-profile-name>a{min-width:0;overflow:hidden;color:var(--shd-text);font-size:var(--shd-type-supporting);font-weight:700;line-height:1;text-overflow:ellipsis;white-space:nowrap}.agent-profile-identity.compact .agent-profile-name>a{font-size:var(--shd-type-telemetry)}.agent-profile-identity.large .agent-profile-name{gap:8px 12px}.agent-profile-identity.large .agent-profile-name>a{font-size:clamp(1.5rem,3vw,2.6rem)}.agent-profile-name>a:hover,.agent-profile-name>a:focus-visible{color:var(--shd-orange)}
|
||||
.agent-identity.unavailable{grid-template-columns:44px minmax(0,1fr)}.agent-identity.unavailable strong{color:var(--shd-text-muted)}
|
||||
.agent-identity.unavailable.compact{grid-template-columns:30px minmax(0,1fr)}.agent-identity.unavailable.large{grid-template-columns:74px minmax(0,1fr)}
|
||||
@media(max-width:600px){.agent-identity{min-height:44px}.agent-identity.large{grid-template-columns:58px minmax(0,1fr) auto}.agent-identity.large img{width:58px;height:58px}.agent-identity.large strong{font-size:1.6rem}.agent-identity.unavailable.large{grid-template-columns:58px minmax(0,1fr)}}
|
||||
@media(max-width:600px){.agent-identity,.agent-profile-identity{min-height:44px}.agent-identity.large,.agent-profile-identity.large{grid-template-columns:58px minmax(0,1fr)}.agent-identity.large img,.agent-profile-identity.large>img{width:58px;height:58px}.agent-identity.large strong,.agent-profile-identity.large .agent-profile-name>a{font-size:1.6rem}.agent-profile-identity.large .agent-profile-name{align-items:flex-start;flex-direction:column;gap:7px}.agent-identity.unavailable.large{grid-template-columns:58px minmax(0,1fr)}}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,51 @@
|
||||
<script lang="ts">
|
||||
let {
|
||||
value = $bindable(''),
|
||||
name,
|
||||
label,
|
||||
maxLength = 2000,
|
||||
rows = 4,
|
||||
required = false,
|
||||
id = `${name}-comment-composer`
|
||||
}: {
|
||||
value?: string;
|
||||
name: string;
|
||||
label: string;
|
||||
maxLength?: number;
|
||||
rows?: number;
|
||||
required?: boolean;
|
||||
id?: string;
|
||||
} = $props();
|
||||
|
||||
const remaining = $derived(maxLength - value.length);
|
||||
</script>
|
||||
|
||||
<div class="comment-composer">
|
||||
<label for={id}>{label}</label>
|
||||
<textarea
|
||||
bind:value
|
||||
{id}
|
||||
{name}
|
||||
{rows}
|
||||
{required}
|
||||
maxlength={maxLength}
|
||||
placeholder="Write a message…"
|
||||
spellcheck="true"
|
||||
></textarea>
|
||||
<footer>
|
||||
<span>MARKDOWN SUPPORTED</span>
|
||||
<small class:near-limit={remaining < 200}>{remaining.toLocaleString()} REMAINING</small>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.comment-composer{display:grid}
|
||||
.comment-composer label{margin-bottom:7px;color:var(--shd-text);font-size:var(--shd-type-telemetry);font-weight:900;letter-spacing:.7px}
|
||||
.comment-composer textarea{width:100%;min-height:112px;margin:0;padding:12px;border:1px solid var(--shd-border-strong);border-radius:0;background:var(--shd-bg);color:var(--shd-text);font-family:var(--shd-font-editorial);font-size:var(--shd-type-body);line-height:1.55;resize:vertical}
|
||||
.comment-composer textarea::placeholder{color:var(--shd-text-dim)}
|
||||
.comment-composer textarea:hover{border-color:var(--shd-text-dim)}
|
||||
.comment-composer textarea:focus-visible{outline:1px solid var(--shd-orange);outline-offset:1px;border-color:var(--shd-orange)}
|
||||
.comment-composer footer{display:flex;justify-content:space-between;gap:12px;padding-top:6px;color:var(--shd-text-dim);font-size:var(--shd-type-telemetry);font-weight:900;letter-spacing:.6px}
|
||||
.comment-composer small{font:inherit}.comment-composer small.near-limit{color:var(--shd-orange)}
|
||||
@media(max-width:650px){.comment-composer textarea{min-height:128px}.comment-composer footer{align-items:flex-end;flex-direction:column-reverse;gap:3px}}
|
||||
</style>
|
||||
@@ -5,12 +5,16 @@
|
||||
contentType,
|
||||
contentId,
|
||||
label = 'REPORT',
|
||||
result
|
||||
result,
|
||||
plain = false,
|
||||
menuItem = false
|
||||
}: {
|
||||
contentType: 'comment' | 'profile_bio' | 'guide' | 'avatar';
|
||||
contentId: string;
|
||||
label?: string;
|
||||
result?: Record<string, unknown> | null;
|
||||
plain?: boolean;
|
||||
menuItem?: boolean;
|
||||
} = $props();
|
||||
|
||||
const categories = [
|
||||
@@ -27,37 +31,45 @@
|
||||
String(result?.userReportContentId ?? '') === contentId
|
||||
&& String(result?.userReportContentType ?? '') === contentType
|
||||
);
|
||||
let reportOpen = $state(false);
|
||||
|
||||
function closeReport() {
|
||||
reportOpen = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<details class="content-report">
|
||||
<summary>{label}</summary>
|
||||
<div class="content-report-panel">
|
||||
<strong>REQUEST OVERSIGHT REVIEW</strong>
|
||||
<p>Send this content to Community Oversight. A report does not remove it automatically.</p>
|
||||
<PendingForm action="?/reportContent" toast={false}>
|
||||
{#snippet children(pending)}
|
||||
<input type="hidden" name="contentType" value={contentType}/>
|
||||
<input type="hidden" name="contentId" value={contentId}/>
|
||||
<label class="field">CONCERN
|
||||
<select name="category" required>
|
||||
{#each categories as category}<option value={category.value}>{category.label}</option>{/each}
|
||||
</select>
|
||||
</label>
|
||||
<label class="field">DETAILS — OPTIONAL
|
||||
<textarea name="details" maxlength="500" rows="3" placeholder="Give Oversight useful context without repeating sensitive information."></textarea>
|
||||
</label>
|
||||
{#if matchesResult && result?.userReportError}<p class="error">{String(result.userReportError)}</p>{/if}
|
||||
{#if matchesResult && result?.userReportSaved}<p class="success">Report sent to Community Oversight.</p>{/if}
|
||||
<div class="content-report-actions">
|
||||
<button class="primary" disabled={pending} aria-busy={pending}>{pending ? 'SENDING…' : 'SEND REPORT →'}</button>
|
||||
</div>
|
||||
{/snippet}
|
||||
</PendingForm>
|
||||
</div>
|
||||
<details bind:open={reportOpen} class="content-report" class:plain class:menu-item={menuItem}>
|
||||
<summary role={menuItem ? 'button' : undefined}>{label}</summary>
|
||||
{#if reportOpen}
|
||||
<div class="content-report-panel">
|
||||
<strong>REQUEST OVERSIGHT REVIEW</strong>
|
||||
<p>Send this content to Community Oversight. A report does not remove it automatically.</p>
|
||||
<PendingForm action="?/reportContent" toast={false}>
|
||||
{#snippet children(pending)}
|
||||
<input type="hidden" name="contentType" value={contentType}/>
|
||||
<input type="hidden" name="contentId" value={contentId}/>
|
||||
<label class="field">CONCERN
|
||||
<select name="category" required>
|
||||
{#each categories as category}<option value={category.value}>{category.label}</option>{/each}
|
||||
</select>
|
||||
</label>
|
||||
<label class="field">DETAILS — OPTIONAL
|
||||
<textarea name="details" maxlength="500" rows="3" placeholder="Give Oversight useful context without repeating sensitive information."></textarea>
|
||||
</label>
|
||||
{#if matchesResult && result?.userReportError}<p class="error">{String(result.userReportError)}</p>{/if}
|
||||
{#if matchesResult && result?.userReportSaved}<p class="success">Report sent to Community Oversight.</p>{/if}
|
||||
<div class="content-report-actions">
|
||||
<button type="button" class="secondary" onclick={closeReport}>CANCEL</button>
|
||||
<button class="primary" disabled={pending} aria-busy={pending}>{pending ? 'SENDING…' : 'SEND REPORT →'}</button>
|
||||
</div>
|
||||
{/snippet}
|
||||
</PendingForm>
|
||||
</div>
|
||||
{/if}
|
||||
</details>
|
||||
|
||||
<style>
|
||||
.content-report{position:relative}.content-report summary{list-style:none;min-height:32px;display:inline-flex;align-items:center;padding:0 7px;border:1px solid var(--shd-border);color:var(--shd-text-muted);font-size:var(--shd-type-telemetry);font-weight:900;letter-spacing:.7px;cursor:pointer}.content-report summary::-webkit-details-marker{display:none}.content-report summary:hover,.content-report summary:focus-visible{border-color:var(--shd-danger);color:var(--shd-danger)}.content-report[open] summary{border-color:var(--shd-orange);color:var(--shd-orange)}.content-report-panel{position:absolute;z-index:8;right:0;width:min(380px,calc(100vw - 32px));display:grid;gap:8px;padding:10px;border:1px solid var(--shd-border-strong);background:var(--shd-surface);box-shadow:0 18px 46px #000a}.content-report-panel>strong{color:var(--shd-orange);font-size:var(--shd-type-telemetry);letter-spacing:.8px}.content-report-panel>p{margin:0;color:var(--shd-text-muted);font-size:var(--shd-type-supporting)}.content-report-panel :global(form fieldset){display:grid;gap:8px}.content-report-panel :global(.field){margin:0}.content-report-panel textarea{min-height:80px}.content-report-actions{display:flex;justify-content:flex-end}.content-report-actions button{min-height:40px}
|
||||
@media(max-width:650px){.content-report-panel{position:fixed;right:16px;bottom:16px;left:16px;width:auto}.content-report summary{min-height:44px}.content-report-actions button{width:100%;min-height:44px}}
|
||||
.content-report{position:relative}.content-report summary{list-style:none;min-height:32px;display:inline-flex;align-items:center;padding:0 7px;border:1px solid var(--shd-border);color:var(--shd-text-muted);font-size:var(--shd-type-telemetry);font-weight:900;letter-spacing:.7px;cursor:pointer}.content-report summary::-webkit-details-marker{display:none}.content-report summary:hover,.content-report summary:focus-visible{border-color:var(--shd-danger);color:var(--shd-danger)}.content-report[open] summary{border-color:var(--shd-orange);color:var(--shd-orange)}.content-report.plain summary{min-height:32px;padding:0;border:0;background:transparent}.content-report.plain summary:hover,.content-report.plain summary:focus-visible{color:var(--shd-danger);text-decoration:underline;text-underline-offset:3px}.content-report.plain[open] summary{color:var(--shd-orange)}.content-report.menu-item summary{border:0}.content-report.menu-item summary:hover,.content-report.menu-item summary:focus-visible{color:var(--shd-orange);text-decoration:none}.content-report-panel{position:absolute;z-index:8;top:calc(100% + 6px);right:0;width:min(380px,calc(100vw - 32px));display:grid;gap:8px;padding:10px;border:1px solid var(--shd-border-strong);background:var(--shd-surface);box-shadow:0 18px 46px #000a}.content-report.plain:not(.menu-item) .content-report-panel{right:auto;left:0}.content-report-panel>strong{color:var(--shd-orange);font-size:var(--shd-type-telemetry);letter-spacing:.8px}.content-report-panel>p{margin:0;color:var(--shd-text-muted);font-size:var(--shd-type-supporting)}.content-report-panel :global(form fieldset){display:grid;gap:8px}.content-report-panel :global(.field){margin:0}.content-report-panel textarea{min-height:80px}.content-report-actions{display:flex;justify-content:flex-end;gap:7px}.content-report-actions button{min-height:40px}
|
||||
@media(max-width:650px){.content-report-panel{position:fixed;top:auto;right:16px;bottom:16px;left:16px;width:auto}.content-report summary{min-height:44px}.content-report-actions{display:grid;grid-template-columns:1fr 1fr}.content-report-actions button{width:100%;min-height:44px}}
|
||||
@media(prefers-reduced-motion:reduce){.content-report summary{transition:none}}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,48 @@
|
||||
<script lang="ts">
|
||||
let {
|
||||
label = 'More information',
|
||||
title,
|
||||
text
|
||||
}: {
|
||||
label?: string;
|
||||
title: string;
|
||||
text: string;
|
||||
} = $props();
|
||||
|
||||
let root: HTMLDetailsElement;
|
||||
let open = $state(false);
|
||||
|
||||
$effect(() => {
|
||||
if (!open) return;
|
||||
const closeOutside = (event: PointerEvent) => {
|
||||
if (!root.contains(event.target as Node)) open = false;
|
||||
};
|
||||
const closeOnEscape = (event: KeyboardEvent) => {
|
||||
if (event.key === 'Escape') {
|
||||
event.preventDefault();
|
||||
open = false;
|
||||
root.querySelector<HTMLElement>('summary')?.focus();
|
||||
}
|
||||
};
|
||||
document.addEventListener('pointerdown', closeOutside);
|
||||
document.addEventListener('keydown', closeOnEscape);
|
||||
return () => {
|
||||
document.removeEventListener('pointerdown', closeOutside);
|
||||
document.removeEventListener('keydown', closeOnEscape);
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<details bind:this={root} bind:open class="info-popover">
|
||||
<summary aria-label={label}>i</summary>
|
||||
<div class="info-popover-panel" role="note">
|
||||
<strong>{title}</strong>
|
||||
<p>{text}</p>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<style>
|
||||
.info-popover{position:relative}.info-popover summary{width:28px;height:28px;display:grid;place-items:center;list-style:none;border:1px solid var(--shd-border-strong);background:var(--shd-surface);color:var(--shd-text-muted);font-family:var(--shd-font-editorial);font-size:13px;font-style:italic;font-weight:700;cursor:pointer}.info-popover summary::-webkit-details-marker{display:none}.info-popover summary:hover,.info-popover summary:focus-visible,.info-popover[open] summary{border-color:var(--shd-orange);background:var(--shd-surface-active);color:var(--shd-orange)}.info-popover-panel{position:absolute;z-index:9;top:calc(100% + 6px);right:0;width:min(290px,calc(100vw - 32px));display:grid;gap:5px;padding:10px;border:1px solid var(--shd-border-strong);background:var(--shd-surface);box-shadow:8px 12px 28px #0009}.info-popover-panel strong{color:var(--shd-orange);font-size:var(--shd-type-telemetry);letter-spacing:.7px}.info-popover-panel p{margin:0;color:var(--shd-text-muted);font:var(--shd-type-supporting)/1.5 var(--shd-font-editorial)}
|
||||
@media(max-width:600px){.info-popover summary{width:44px;height:44px}.info-popover-panel{position:fixed;top:auto;right:12px;bottom:12px;left:12px;width:auto}}
|
||||
@media(prefers-reduced-motion:reduce){.info-popover summary{transition:none}}
|
||||
</style>
|
||||
@@ -27,6 +27,8 @@
|
||||
.markdown-content :global(li+li){margin-top:.3em}
|
||||
.markdown-content :global(a){color:var(--shd-orange);font-family:var(--shd-font-sans);font-weight:700}
|
||||
.markdown-content :global(a:hover),.markdown-content :global(a:focus-visible){color:var(--shd-orange-hover)}
|
||||
.markdown-content :global(strong){font-weight:700}
|
||||
.markdown-content :global(em){font-style:italic}
|
||||
.markdown-content :global(blockquote){padding:.2em 0 .2em 1em;border-left:2px solid var(--shd-orange);color:var(--shd-text-muted)}
|
||||
.markdown-content :global(code){padding:2px 4px;border:1px solid var(--shd-border);background:#0d0f10;color:var(--shd-text);font-family:var(--shd-font-mono);font-size:.9em}
|
||||
.markdown-content :global(:first-child){margin-top:0}
|
||||
|
||||
@@ -1,4 +1,8 @@
|
||||
<aside class="moderation-disclosure" aria-label="Automated safety review">
|
||||
<script lang="ts">
|
||||
let { compact = false }: { compact?: boolean } = $props();
|
||||
</script>
|
||||
|
||||
<aside class="moderation-disclosure" class:compact aria-label="Automated safety review">
|
||||
<span aria-hidden="true">i</span>
|
||||
<p>
|
||||
This submission may receive automated safety review.
|
||||
@@ -13,5 +17,6 @@
|
||||
.moderation-disclosure a{display:inline-block;margin-left:4px;color:var(--shd-orange);font-weight:900;letter-spacing:.4px}
|
||||
.moderation-disclosure a:hover{text-decoration:underline}
|
||||
.moderation-disclosure a:focus-visible{outline:2px solid var(--shd-orange);outline-offset:3px}
|
||||
.moderation-disclosure.compact{align-items:center;margin:0;padding:0;border:0;background:transparent}.moderation-disclosure.compact>span{display:none}.moderation-disclosure.compact p{color:var(--shd-text-dim)}.moderation-disclosure.compact a{color:var(--shd-text-muted)}
|
||||
@media(max-width:650px){.moderation-disclosure{padding:10px}.moderation-disclosure a{display:block;min-height:44px;margin:4px 0 0;padding-top:8px}}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,89 @@
|
||||
<script lang="ts">
|
||||
import { tick, type Snippet } from 'svelte';
|
||||
|
||||
let {
|
||||
label,
|
||||
open = $bindable(false),
|
||||
children
|
||||
}: {
|
||||
label: string;
|
||||
open?: boolean;
|
||||
children: Snippet<[() => void]>;
|
||||
} = $props();
|
||||
|
||||
let root: HTMLDivElement;
|
||||
let trigger: HTMLButtonElement;
|
||||
const close = () => {
|
||||
open = false;
|
||||
trigger?.focus();
|
||||
};
|
||||
|
||||
$effect(() => {
|
||||
if (!open) return;
|
||||
const handlePointer = (event: PointerEvent) => {
|
||||
if (!root.contains(event.target as Node)) open = false;
|
||||
};
|
||||
const handleKey = (event: KeyboardEvent) => {
|
||||
if (event.key === 'Escape') {
|
||||
event.preventDefault();
|
||||
close();
|
||||
}
|
||||
};
|
||||
document.addEventListener('pointerdown', handlePointer);
|
||||
document.addEventListener('keydown', handleKey);
|
||||
return () => {
|
||||
document.removeEventListener('pointerdown', handlePointer);
|
||||
document.removeEventListener('keydown', handleKey);
|
||||
};
|
||||
});
|
||||
|
||||
async function toggle() {
|
||||
open = !open;
|
||||
if (!open) return;
|
||||
await tick();
|
||||
root.querySelector<HTMLElement>('.overflow-menu-panel button, .overflow-menu-panel summary')?.focus();
|
||||
}
|
||||
|
||||
function navigate(event: KeyboardEvent) {
|
||||
if (!['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) return;
|
||||
const items = [...root.querySelectorAll<HTMLElement>(
|
||||
'.overflow-menu-panel button:not([disabled]), .overflow-menu-panel summary'
|
||||
)].filter((item) => item.getClientRects().length > 0);
|
||||
if (!items.length) return;
|
||||
event.preventDefault();
|
||||
const current = items.indexOf(document.activeElement as HTMLElement);
|
||||
const next = event.key === 'Home'
|
||||
? 0
|
||||
: event.key === 'End'
|
||||
? items.length - 1
|
||||
: event.key === 'ArrowDown'
|
||||
? (current + 1 + items.length) % items.length
|
||||
: (current - 1 + items.length) % items.length;
|
||||
items[next]?.focus();
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="overflow-menu" bind:this={root}>
|
||||
<button
|
||||
bind:this={trigger}
|
||||
type="button"
|
||||
class="overflow-menu-trigger"
|
||||
aria-label={label}
|
||||
aria-haspopup="true"
|
||||
aria-expanded={open}
|
||||
onclick={toggle}
|
||||
>
|
||||
<span aria-hidden="true">•••</span>
|
||||
</button>
|
||||
{#if open}
|
||||
<div class="overflow-menu-panel" role="toolbar" aria-label={label} tabindex="-1" onkeydown={navigate}>
|
||||
{@render children(close)}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.overflow-menu{position:relative}.overflow-menu-trigger{width:44px;height:44px;display:grid;place-items:center;padding:0;border:1px solid transparent;background:transparent;color:var(--shd-text-muted);font-size:15px;font-weight:900;letter-spacing:2px;cursor:pointer}.overflow-menu-trigger:hover,.overflow-menu-trigger:focus-visible,.overflow-menu-trigger[aria-expanded=true]{border-color:var(--shd-border-strong);background:var(--shd-surface-active);color:var(--shd-orange)}.overflow-menu-panel{position:absolute;z-index:7;top:calc(100% + 4px);left:0;width:max-content;min-width:210px;display:grid;padding:4px;border:1px solid var(--shd-border-strong);background:var(--shd-surface);box-shadow:8px 12px 28px #0009}.overflow-menu-panel :global(form>fieldset>button),.overflow-menu-panel :global(details>summary),.overflow-menu-panel :global(>button){width:100%;min-height:40px;display:flex;align-items:center;justify-content:flex-start;padding:0 10px;border:0;background:transparent;color:var(--shd-text-muted);font-size:var(--shd-type-telemetry);font-weight:900;letter-spacing:.65px;text-align:left;cursor:pointer}.overflow-menu-panel :global(form>fieldset>button:hover),.overflow-menu-panel :global(form>fieldset>button:focus-visible),.overflow-menu-panel :global(details>summary:hover),.overflow-menu-panel :global(details>summary:focus-visible),.overflow-menu-panel :global(>button:hover),.overflow-menu-panel :global(>button:focus-visible){background:var(--shd-surface-active);color:var(--shd-orange)}.overflow-menu-panel :global(>button.danger:hover),.overflow-menu-panel :global(>button.danger:focus-visible){color:var(--shd-danger)}
|
||||
@media(max-width:650px){.overflow-menu-panel{position:fixed;z-index:12;top:auto;right:12px;bottom:12px;left:12px;width:auto;padding:6px}.overflow-menu-panel :global(form>fieldset>button),.overflow-menu-panel :global(details>summary),.overflow-menu-panel :global(>button){min-height:48px}}
|
||||
@media(prefers-reduced-motion:reduce){.overflow-menu-trigger{transition:none}}
|
||||
</style>
|
||||
@@ -1,11 +1,22 @@
|
||||
<script lang="ts">
|
||||
type Item = { id: string; name: string; unit?: string; pending?: boolean; proposerName?: string };
|
||||
import ItemIcon from '$lib/components/ItemIcon.svelte';
|
||||
|
||||
type Item = {
|
||||
id: string;
|
||||
name: string;
|
||||
unit?: string;
|
||||
pending?: boolean;
|
||||
proposerName?: string;
|
||||
iconUrl?: string | null;
|
||||
showIcon?: boolean;
|
||||
};
|
||||
let {
|
||||
items,
|
||||
selected = $bindable<string[]>([]),
|
||||
value = $bindable(''),
|
||||
mode = 'multiple',
|
||||
compact = false,
|
||||
presentation = 'list',
|
||||
excludedIds = [],
|
||||
fieldName = '',
|
||||
emptyLabel = 'NO MATCHING RECORDS',
|
||||
@@ -20,6 +31,7 @@
|
||||
value?: string;
|
||||
mode?: 'multiple' | 'single';
|
||||
compact?: boolean;
|
||||
presentation?: 'list' | 'visual-grid' | 'toggle-grid';
|
||||
excludedIds?: string[];
|
||||
fieldName?: string;
|
||||
emptyLabel?: string;
|
||||
@@ -37,7 +49,7 @@
|
||||
!excludedIds.includes(item.id)
|
||||
&& (!normalizedQuery || `${item.name} ${item.unit ?? ''}`.toLocaleLowerCase().includes(normalizedQuery))
|
||||
));
|
||||
const visible = $derived(available.slice(0, 30));
|
||||
const visible = $derived(presentation === 'list' ? available.slice(0, 30) : available);
|
||||
const selectedItems = $derived(selectedIds.map((id) => items.find((item) => item.id === id)).filter((item): item is Item => Boolean(item)));
|
||||
const unitLabel = (item: Item) => item.unit === undefined ? '' : item.unit || 'FLAT';
|
||||
const accessibleName = (item: Item) => unitLabel(item) ? `${item.name}, unit ${unitLabel(item)}` : item.name;
|
||||
@@ -54,26 +66,36 @@
|
||||
};
|
||||
</script>
|
||||
|
||||
<div class="assignment-picker" class:compact class:open onfocusin={() => { if (compact) open = true; }} onfocusout={(event) => {
|
||||
<div class="assignment-picker" class:compact class:open class:visual-grid={presentation === 'visual-grid'} class:toggle-grid={presentation === 'toggle-grid'} onfocusin={() => { if (compact) open = true; }} onfocusout={(event) => {
|
||||
if (compact && !event.currentTarget.contains(event.relatedTarget as Node | null)) open = false;
|
||||
}}>
|
||||
{#if fieldName}{#each selectedIds as id}<input type="hidden" name={fieldName} value={id}/>{/each}{/if}
|
||||
<div class="assignment-selected">
|
||||
<div class="assignment-summary"><span>{mode === 'single' ? 'SELECTED' : 'ASSIGNED'}</span><b>{selectedIds.length}</b></div>
|
||||
<div class="assignment-chips">
|
||||
{#each selectedItems as item}
|
||||
<button type="button" class:pending-reference={item.pending} onclick={() => toggle(item.id)} aria-label={`Remove ${accessibleName(item)}`}><span>{item.name}{#if unitLabel(item)}<small class="assignment-item-unit">UNIT · {unitLabel(item)}</small>{/if}{#if item.pending}<small>PENDING</small>{/if}</span><b>×</b></button>
|
||||
{:else}
|
||||
<small>{emptySelectionLabel}</small>
|
||||
{/each}
|
||||
{#if presentation === 'list'}
|
||||
<div class="assignment-selected">
|
||||
<div class="assignment-summary"><span>{mode === 'single' ? 'SELECTED' : 'ASSIGNED'}</span><b>{selectedIds.length}</b></div>
|
||||
<div class="assignment-chips">
|
||||
{#each selectedItems as item}
|
||||
<button type="button" class:pending-reference={item.pending} onclick={() => toggle(item.id)} aria-label={`Remove ${accessibleName(item)}`}>
|
||||
{#if item.showIcon || item.iconUrl}<ItemIcon src={item.iconUrl} alt="" className="assignment-item-icon assignment-chip-icon"/>{/if}
|
||||
<span>{item.name}{#if unitLabel(item)}<small class="assignment-item-unit">UNIT · {unitLabel(item)}</small>{/if}{#if item.pending}<small>PENDING</small>{/if}</span><b>×</b>
|
||||
</button>
|
||||
{:else}
|
||||
<small>{emptySelectionLabel}</small>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<label class="assignment-search"><span>{searchLabel}</span><input type="search" bind:value={query} placeholder={searchPlaceholder} autocomplete="off"/></label>
|
||||
<div class="assignment-results-head"><span>{available.length} MATCHES</span>{#if available.length > visible.length}<b>SHOWING FIRST {visible.length}</b>{/if}</div>
|
||||
<label class="assignment-search"><span>{searchLabel}</span><input type="search" bind:value={query} placeholder={searchPlaceholder} autocomplete="off"/></label>
|
||||
<div class="assignment-results-head"><span>{available.length} MATCHES</span>{#if available.length > visible.length}<b>SHOWING FIRST {visible.length}</b>{/if}</div>
|
||||
{/if}
|
||||
<div class="assignment-results" role="list">
|
||||
{#each visible as item}
|
||||
<button type="button" class:selected={selectedIds.includes(item.id)} class:pending-reference={item.pending} aria-pressed={selectedIds.includes(item.id)} onclick={() => toggle(item.id)}>
|
||||
<span>{item.name}{#if unitLabel(item)}<small class="assignment-item-unit">UNIT · {unitLabel(item)}</small>{/if}{#if item.pending}<small>PENDING · {item.proposerName ?? 'CONTRIBUTOR'}</small>{/if}</span><b>{selectedIds.includes(item.id) ? (mode === 'single' ? 'SELECTED' : 'ASSIGNED') : (mode === 'single' ? 'SELECT →' : 'ADD ＋')}</b>
|
||||
<button type="button" class:selected={selectedIds.includes(item.id)} class:pending-reference={item.pending} class:with-icon={Boolean(item.showIcon || item.iconUrl)} class:visual-grid-option={presentation === 'visual-grid'} class:toggle-grid-option={presentation === 'toggle-grid'} aria-pressed={selectedIds.includes(item.id)} aria-label={presentation !== 'list' ? `${accessibleName(item)}, ${selectedIds.includes(item.id) ? 'assigned' : 'not assigned'}` : undefined} data-tooltip={presentation === 'visual-grid' ? item.name : undefined} onclick={() => toggle(item.id)}>
|
||||
{#if presentation === 'visual-grid' || item.showIcon || item.iconUrl}<ItemIcon src={item.iconUrl} alt="" className={`assignment-item-icon ${presentation === 'visual-grid' ? 'assignment-grid-icon' : 'assignment-result-icon'}`}/>{/if}
|
||||
{#if presentation === 'toggle-grid'}
|
||||
<span>{item.name}</span>
|
||||
{:else if presentation === 'list'}
|
||||
<span>{item.name}{#if unitLabel(item)}<small class="assignment-item-unit">UNIT · {unitLabel(item)}</small>{/if}{#if item.pending}<small>PENDING · {item.proposerName ?? 'CONTRIBUTOR'}</small>{/if}</span><b>{selectedIds.includes(item.id) ? (mode === 'single' ? 'SELECTED' : 'ASSIGNED') : (mode === 'single' ? 'SELECT →' : 'ADD ＋')}</b>
|
||||
{/if}
|
||||
</button>
|
||||
{:else}
|
||||
<p>{emptyLabel}</p>
|
||||
|
||||
Reference in New Issue
Block a user