alexei.dolgolyov
1bfec521d8
- Template editors (notification & command) now use EntitySelect for locale switching and default to the configured primary locale instead of always 'en' when opening, editing, or cloning a config. - LocaleSelector's add-flow uses EntitySelect for catalog pick; custom BCP-47 codes (e.g. de-CH) keep a small dedicated input. - TimezoneSelector dropdown was being clipped by Card's overflow:hidden and backdrop-filter; portalled to <body> with an overlay backdrop and styled as a centered modal palette (same pattern as EntitySelect). - Removed top padding on the timezone scroll list so sticky region group headers no longer leak rows above them. - Extracted shared locale catalog to lib/locales.ts.
589 lines
14 KiB
Svelte
589 lines
14 KiB
Svelte
<script lang="ts">
|
||
import MdiIcon from './MdiIcon.svelte';
|
||
import { t } from '$lib/i18n';
|
||
import { LOCALE_CATALOG, getLocaleMeta, type LocaleMeta } from '$lib/locales';
|
||
import EntitySelect, { type EntityItem } from './EntitySelect.svelte';
|
||
|
||
const CATALOG: LocaleMeta[] = LOCALE_CATALOG;
|
||
|
||
// Locales that ship with default notification & command templates.
|
||
const SHIPPED = new Set(['en', 'ru']);
|
||
|
||
let {
|
||
value = $bindable<string>(''),
|
||
}: {
|
||
value: string;
|
||
} = $props();
|
||
|
||
// Parse the comma-separated backend string into an ordered array of codes.
|
||
const codes = $derived.by<string[]>(() => {
|
||
if (!value) return [];
|
||
const seen = new Set<string>();
|
||
const out: string[] = [];
|
||
for (const raw of value.split(',')) {
|
||
const c = raw.trim().toLowerCase();
|
||
if (!c || seen.has(c)) continue;
|
||
seen.add(c);
|
||
out.push(c);
|
||
}
|
||
return out;
|
||
});
|
||
|
||
function commit(next: string[]) {
|
||
// De-dupe (preserve order) and serialise back to the backend format.
|
||
const seen = new Set<string>();
|
||
const clean = next.map(c => c.trim().toLowerCase())
|
||
.filter(c => c && !seen.has(c) && (seen.add(c), true));
|
||
value = clean.join(',');
|
||
}
|
||
|
||
function meta(code: string): LocaleMeta {
|
||
return getLocaleMeta(code);
|
||
}
|
||
|
||
function remove(code: string) {
|
||
commit(codes.filter(c => c !== code));
|
||
}
|
||
|
||
function makePrimary(code: string) {
|
||
commit([code, ...codes.filter(c => c !== code)]);
|
||
}
|
||
|
||
function moveUp(code: string) {
|
||
const i = codes.indexOf(code);
|
||
if (i <= 0) return;
|
||
const next = [...codes];
|
||
[next[i - 1], next[i]] = [next[i], next[i - 1]];
|
||
commit(next);
|
||
}
|
||
|
||
function moveDown(code: string) {
|
||
const i = codes.indexOf(code);
|
||
if (i < 0 || i >= codes.length - 1) return;
|
||
const next = [...codes];
|
||
[next[i], next[i + 1]] = [next[i + 1], next[i]];
|
||
commit(next);
|
||
}
|
||
|
||
// --- Add flow ----------------------------------------------------------
|
||
|
||
// Valid BCP 47-ish: 2–3 letter primary, optional '-' subtag(s) 2-8 chars.
|
||
const CUSTOM_RE = /^[a-z]{2,3}(-[a-z0-9]{2,8})*$/i;
|
||
|
||
const selectedSet = $derived(new Set(codes));
|
||
|
||
/**
|
||
* Catalog languages not yet selected, surfaced through EntitySelect.
|
||
* Native name is the label so the user sees their own script; the
|
||
* English name + code lives in the description for searchability.
|
||
*/
|
||
const addItems = $derived<EntityItem[]>(
|
||
CATALOG
|
||
.filter(l => !selectedSet.has(l.code))
|
||
.map(l => ({
|
||
value: l.code,
|
||
label: l.native,
|
||
desc: `${l.name} · ${l.code.toUpperCase()}`,
|
||
})),
|
||
);
|
||
|
||
let customCode = $state('');
|
||
const customCodeValid = $derived.by(() => {
|
||
const c = customCode.trim().toLowerCase();
|
||
if (!c || !CUSTOM_RE.test(c)) return false;
|
||
if (selectedSet.has(c)) return false;
|
||
if (CATALOG.some(l => l.code === c)) return false;
|
||
return true;
|
||
});
|
||
|
||
function addCode(code: string | number | null) {
|
||
if (code === null) return;
|
||
const c = String(code).trim().toLowerCase();
|
||
if (!c) return;
|
||
commit([...codes, c]);
|
||
}
|
||
|
||
function addCustom() {
|
||
if (!customCodeValid) return;
|
||
addCode(customCode);
|
||
customCode = '';
|
||
}
|
||
|
||
// --- Drag & drop -------------------------------------------------------
|
||
|
||
let dragCode = $state<string | null>(null);
|
||
let dragOverCode = $state<string | null>(null);
|
||
|
||
function onDragStart(e: DragEvent, code: string) {
|
||
dragCode = code;
|
||
if (e.dataTransfer) {
|
||
e.dataTransfer.effectAllowed = 'move';
|
||
e.dataTransfer.setData('text/plain', code);
|
||
}
|
||
}
|
||
|
||
function onDragOver(e: DragEvent, code: string) {
|
||
if (!dragCode || dragCode === code) return;
|
||
e.preventDefault();
|
||
dragOverCode = code;
|
||
if (e.dataTransfer) e.dataTransfer.dropEffect = 'move';
|
||
}
|
||
|
||
function onDrop(e: DragEvent, code: string) {
|
||
e.preventDefault();
|
||
if (!dragCode || dragCode === code) return;
|
||
const from = codes.indexOf(dragCode);
|
||
const to = codes.indexOf(code);
|
||
if (from < 0 || to < 0) return;
|
||
const next = [...codes];
|
||
const [moved] = next.splice(from, 1);
|
||
next.splice(to, 0, moved);
|
||
commit(next);
|
||
dragCode = null;
|
||
dragOverCode = null;
|
||
}
|
||
|
||
function onDragEnd() {
|
||
dragCode = null;
|
||
dragOverCode = null;
|
||
}
|
||
</script>
|
||
|
||
<div class="ls-root">
|
||
{#if codes.length === 0}
|
||
<div class="ls-empty">
|
||
<div class="ls-empty-glyph" aria-hidden="true">A あ Я</div>
|
||
<p class="ls-empty-text">{t('locales.empty')}</p>
|
||
</div>
|
||
{:else}
|
||
<ul class="ls-list" role="list">
|
||
{#each codes as code, i (code)}
|
||
{@const m = meta(code)}
|
||
{@const isPrimary = i === 0}
|
||
{@const isShipped = SHIPPED.has(code)}
|
||
<li
|
||
class="ls-row"
|
||
class:ls-row-primary={isPrimary}
|
||
class:ls-row-dragover={dragOverCode === code}
|
||
class:ls-row-dragging={dragCode === code}
|
||
draggable="true"
|
||
ondragstart={(e) => onDragStart(e, code)}
|
||
ondragover={(e) => onDragOver(e, code)}
|
||
ondrop={(e) => onDrop(e, code)}
|
||
ondragend={onDragEnd}
|
||
>
|
||
<span class="ls-rail" aria-hidden="true"></span>
|
||
|
||
<button
|
||
type="button"
|
||
class="ls-handle"
|
||
aria-label={t('locales.reorder')}
|
||
title={t('locales.reorder')}
|
||
tabindex="-1"
|
||
>
|
||
<MdiIcon name="mdiDragVertical" size={16} />
|
||
</button>
|
||
|
||
<div class="ls-text">
|
||
<div class="ls-native" dir={m.rtl ? 'rtl' : 'ltr'} lang={code}>{m.native}</div>
|
||
<div class="ls-meta">
|
||
<span class="ls-name">{m.name}</span>
|
||
<span class="ls-dot" aria-hidden="true">·</span>
|
||
<span class="ls-code">{code}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="ls-badges">
|
||
{#if isPrimary}
|
||
<span class="ls-tag ls-tag-primary">
|
||
<MdiIcon name="mdiStar" size={10} />
|
||
{t('locales.primary')}
|
||
</span>
|
||
{/if}
|
||
{#if isShipped}
|
||
<span class="ls-tag ls-tag-shipped" title={t('locales.shippedHint')}>
|
||
<MdiIcon name="mdiPackageVariantClosedCheck" size={10} />
|
||
{t('locales.shipped')}
|
||
</span>
|
||
{/if}
|
||
</div>
|
||
|
||
<div class="ls-actions">
|
||
{#if !isPrimary}
|
||
<button
|
||
type="button"
|
||
class="ls-icon-btn"
|
||
onclick={() => makePrimary(code)}
|
||
aria-label={t('locales.makePrimary')}
|
||
title={t('locales.makePrimary')}
|
||
>
|
||
<MdiIcon name="mdiStarOutline" size={14} />
|
||
</button>
|
||
{/if}
|
||
<button
|
||
type="button"
|
||
class="ls-icon-btn"
|
||
onclick={() => moveUp(code)}
|
||
disabled={i === 0}
|
||
aria-label={t('locales.moveUp')}
|
||
title={t('locales.moveUp')}
|
||
>
|
||
<MdiIcon name="mdiChevronUp" size={14} />
|
||
</button>
|
||
<button
|
||
type="button"
|
||
class="ls-icon-btn"
|
||
onclick={() => moveDown(code)}
|
||
disabled={i === codes.length - 1}
|
||
aria-label={t('locales.moveDown')}
|
||
title={t('locales.moveDown')}
|
||
>
|
||
<MdiIcon name="mdiChevronDown" size={14} />
|
||
</button>
|
||
<button
|
||
type="button"
|
||
class="ls-icon-btn ls-icon-danger"
|
||
onclick={() => remove(code)}
|
||
disabled={codes.length <= 1}
|
||
aria-label={t('locales.remove')}
|
||
title={codes.length <= 1 ? t('locales.removeLast') : t('locales.remove')}
|
||
>
|
||
<MdiIcon name="mdiClose" size={14} />
|
||
</button>
|
||
</div>
|
||
</li>
|
||
{/each}
|
||
</ul>
|
||
{/if}
|
||
|
||
<!-- Add zone — EntitySelect for catalog languages, separate input for custom BCP-47 codes -->
|
||
<div class="ls-add">
|
||
<div class="ls-add-row">
|
||
<div class="ls-add-picker">
|
||
<EntitySelect
|
||
items={addItems}
|
||
value={null}
|
||
placeholder={t('locales.add')}
|
||
size="sm"
|
||
onselect={addCode}
|
||
/>
|
||
</div>
|
||
<div class="ls-add-custom">
|
||
<input
|
||
type="text"
|
||
bind:value={customCode}
|
||
onkeydown={(e) => { if (e.key === 'Enter') { e.preventDefault(); addCustom(); } }}
|
||
placeholder={t('locales.customPlaceholder')}
|
||
class="ls-add-custom-input"
|
||
autocomplete="off"
|
||
spellcheck="false"
|
||
/>
|
||
<button
|
||
type="button"
|
||
class="ls-add-custom-btn"
|
||
disabled={!customCodeValid}
|
||
onclick={addCustom}
|
||
title={t('locales.addCustom')}
|
||
>
|
||
<MdiIcon name="mdiPlus" size={14} />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<p class="ls-hint">
|
||
<MdiIcon name="mdiInformationOutline" size={12} />
|
||
<span>{t('locales.orderHint')}</span>
|
||
</p>
|
||
</div>
|
||
|
||
<style>
|
||
.ls-root {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.5rem;
|
||
width: 100%;
|
||
max-width: 34rem;
|
||
}
|
||
|
||
/* ---- Empty state -------------------------------------------------- */
|
||
.ls-empty {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.875rem;
|
||
padding: 1rem 1.125rem;
|
||
border: 1px dashed var(--color-border);
|
||
border-radius: 0.625rem;
|
||
background:
|
||
linear-gradient(135deg,
|
||
color-mix(in srgb, var(--color-primary) 4%, transparent) 0%,
|
||
transparent 60%),
|
||
var(--color-background);
|
||
}
|
||
.ls-empty-glyph {
|
||
font-family: var(--font-sans);
|
||
font-size: 1.5rem;
|
||
letter-spacing: 0.1em;
|
||
font-weight: 300;
|
||
color: color-mix(in srgb, var(--color-primary) 70%, var(--color-muted-foreground));
|
||
flex-shrink: 0;
|
||
line-height: 1;
|
||
}
|
||
.ls-empty-text {
|
||
margin: 0;
|
||
font-size: 0.8rem;
|
||
color: var(--color-muted-foreground);
|
||
}
|
||
|
||
/* ---- List --------------------------------------------------------- */
|
||
.ls-list {
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.375rem;
|
||
}
|
||
|
||
.ls-row {
|
||
position: relative;
|
||
display: grid;
|
||
grid-template-columns: auto 1fr auto auto;
|
||
align-items: center;
|
||
gap: 0.625rem;
|
||
padding: 0.625rem 0.75rem 0.625rem 0.875rem;
|
||
border: 1px solid var(--color-border);
|
||
border-radius: 0.5rem;
|
||
background: var(--color-background);
|
||
transition: border-color 0.15s, background 0.15s, transform 0.15s;
|
||
overflow: hidden;
|
||
}
|
||
.ls-row:hover {
|
||
border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
|
||
}
|
||
.ls-row.ls-row-dragging {
|
||
opacity: 0.4;
|
||
}
|
||
.ls-row.ls-row-dragover {
|
||
border-color: var(--color-primary);
|
||
background: color-mix(in srgb, var(--color-primary) 6%, var(--color-background));
|
||
}
|
||
.ls-row.ls-row-primary {
|
||
background:
|
||
linear-gradient(90deg,
|
||
color-mix(in srgb, var(--color-primary) 5%, transparent) 0%,
|
||
transparent 30%),
|
||
var(--color-background);
|
||
}
|
||
|
||
/* Accent rail — pronounced on primary, near-invisible otherwise */
|
||
.ls-rail {
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 3px;
|
||
background: transparent;
|
||
transition: background 0.15s;
|
||
}
|
||
.ls-row.ls-row-primary .ls-rail {
|
||
background: var(--color-primary);
|
||
}
|
||
|
||
.ls-handle {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 0.125rem;
|
||
border: none;
|
||
background: transparent;
|
||
color: var(--color-muted-foreground);
|
||
opacity: 0.4;
|
||
cursor: grab;
|
||
transition: opacity 0.15s;
|
||
}
|
||
.ls-row:hover .ls-handle {
|
||
opacity: 0.9;
|
||
}
|
||
.ls-handle:active {
|
||
cursor: grabbing;
|
||
}
|
||
|
||
.ls-text {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.125rem;
|
||
min-width: 0;
|
||
}
|
||
.ls-native {
|
||
font-family: var(--font-sans);
|
||
font-size: 1.125rem;
|
||
font-weight: 500;
|
||
line-height: 1.2;
|
||
letter-spacing: -0.005em;
|
||
color: var(--color-foreground);
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
.ls-meta {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.375rem;
|
||
font-size: 0.7rem;
|
||
color: var(--color-muted-foreground);
|
||
min-width: 0;
|
||
}
|
||
.ls-name {
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
font-weight: 500;
|
||
font-size: 0.625rem;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
.ls-dot {
|
||
opacity: 0.5;
|
||
}
|
||
.ls-code {
|
||
font-family: var(--font-mono);
|
||
font-size: 0.7rem;
|
||
padding: 0.05rem 0.375rem;
|
||
border-radius: 0.25rem;
|
||
background: var(--color-muted);
|
||
color: var(--color-muted-foreground);
|
||
}
|
||
|
||
.ls-badges {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.25rem;
|
||
flex-wrap: wrap;
|
||
}
|
||
.ls-tag {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.15rem;
|
||
font-size: 0.55rem;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
padding: 0.125rem 0.375rem;
|
||
border-radius: 9999px;
|
||
white-space: nowrap;
|
||
}
|
||
.ls-tag-primary {
|
||
background: var(--color-primary);
|
||
color: var(--color-primary-foreground, #fff);
|
||
}
|
||
.ls-tag-shipped {
|
||
background: color-mix(in srgb, var(--color-primary) 12%, transparent);
|
||
color: var(--color-primary);
|
||
border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
|
||
}
|
||
|
||
.ls-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.0625rem;
|
||
}
|
||
.ls-icon-btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 1.5rem;
|
||
height: 1.5rem;
|
||
padding: 0;
|
||
border: none;
|
||
background: transparent;
|
||
border-radius: 0.25rem;
|
||
color: var(--color-muted-foreground);
|
||
cursor: pointer;
|
||
transition: background 0.12s, color 0.12s;
|
||
}
|
||
.ls-icon-btn:hover:not(:disabled) {
|
||
background: var(--color-muted);
|
||
color: var(--color-foreground);
|
||
}
|
||
.ls-icon-btn:disabled {
|
||
opacity: 0.3;
|
||
cursor: not-allowed;
|
||
}
|
||
.ls-icon-btn.ls-icon-danger:hover:not(:disabled) {
|
||
background: color-mix(in srgb, #ef4444 14%, transparent);
|
||
color: #ef4444;
|
||
}
|
||
|
||
/* ---- Add zone ----------------------------------------------------- */
|
||
.ls-add {
|
||
margin-top: 0.125rem;
|
||
}
|
||
.ls-add-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
flex-wrap: wrap;
|
||
}
|
||
.ls-add-picker {
|
||
flex: 1;
|
||
min-width: 12rem;
|
||
}
|
||
.ls-add-custom {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.25rem;
|
||
padding: 0.15rem 0.15rem 0.15rem 0.55rem;
|
||
border: 1px dashed var(--color-border);
|
||
border-radius: 0.5rem;
|
||
background: transparent;
|
||
}
|
||
.ls-add-custom-input {
|
||
width: 6rem;
|
||
border: none;
|
||
outline: none;
|
||
background: transparent;
|
||
font-family: var(--font-mono);
|
||
font-size: 0.75rem;
|
||
color: var(--color-foreground);
|
||
padding: 0.25rem 0;
|
||
}
|
||
.ls-add-custom-input::placeholder {
|
||
color: var(--color-muted-foreground);
|
||
opacity: 0.7;
|
||
}
|
||
.ls-add-custom-btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 1.5rem;
|
||
height: 1.5rem;
|
||
padding: 0;
|
||
border: none;
|
||
background: transparent;
|
||
border-radius: 0.25rem;
|
||
color: var(--color-muted-foreground);
|
||
cursor: pointer;
|
||
transition: background 0.12s, color 0.12s;
|
||
}
|
||
.ls-add-custom-btn:hover:not(:disabled) {
|
||
background: var(--color-muted);
|
||
color: var(--color-primary);
|
||
}
|
||
.ls-add-custom-btn:disabled {
|
||
opacity: 0.3;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
/* ---- Hint --------------------------------------------------------- */
|
||
.ls-hint {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 0.3rem;
|
||
margin: 0.125rem 0 0;
|
||
font-size: 0.7rem;
|
||
color: var(--color-muted-foreground);
|
||
line-height: 1.4;
|
||
}
|
||
</style>
|