@deckbuilderkit/build 0.0.0-stage → 0.1.0

package/template/web/src/screens/SettingsModal.tsx

@@ -0,0 +1,541 @@
+import { type CSSProperties, type ReactNode, useMemo, useRef, useState } from 'react';
+import { AppearanceFields, DockField, IconsField, LayoutIconField, LayoutField, MainMenuField, ZoomField, type ApiError, detectLanguage, ErrorBanner, errorMessage, errorOf, GLOBAL, isDesktop, KeybindingsEditor, LANGUAGES, isModified, resetPatch, Modal, parseSettingsQuery, settingDescriptionText, toggleModifiedFilter, SettingLinksProvider, type SettingLinks, SettingRow, Spinner, useRevealSetting, useRovingList, SETTING_ROW_CONTROLS, useAsync, useKeybindings, type Language, type SettingDef, type SettingsSectionNode, sectionKey } from '@deckbuilderkit/ui';
+import { APP } from '../../../app';
+import { api, type Settings } from '../api';
+import { type MessageKey, t } from '../i18n';
+import { en } from '../i18n/en';
+import { settingsRegistry } from '../settings';
+
+interface Props {
+  settings: Settings;
+  onChange: (patch: Partial<Settings>) => void;
+  /** Called once the server accepted the quit. */
+  onQuit: () => void;
+}
+
+type Change = (patch: Partial<Settings>) => void;
+
+/** Translates `key` when it is a message, else falls back. */
+const tr = (key: string | undefined, fallback?: string): string =>
+  !key ? (fallback ?? '') : Object.hasOwn(en, key) ? t(key as MessageKey) : (fallback ?? key);
+
+const sectionLabel = (node: SettingsSectionNode): string => {
+  const key = sectionKey(node.path);
+  const last = node.path[node.path.length - 1] ?? key;
+  return tr(node.label, last.charAt(0).toUpperCase() + last.slice(1));
+};
+
+interface FlatNode {
+  node: SettingsSectionNode;
+  key: string;
+  depth: number;
+  /** Labels from the top level down to this node. */
+  trail: string[];
+}
+
+const flatten = (nodes: SettingsSectionNode[], depth = 0, trail: string[] = []): FlatNode[] =>
+  nodes.flatMap((node) => {
+    const here = [...trail, sectionLabel(node)];
+    return [{ node, key: sectionKey(node.path), depth, trail: here }, ...flatten(node.children, depth + 1, here)];
+  });
+
+const isUnder = (key: string, parent: string) => key === parent || key.startsWith(`${parent}.`);
+
+interface SectionHit {
+  /** The section label matched, so the whole section shows. */
+  whole: boolean;
+  /** Matching settings directly in the section. */
+  ids: string[];
+}
+
+/** Structural equality for JSON-like values (arrays, plain objects, primitives). */
+function deepEqual(a: unknown, b: unknown): boolean {
+  if (a === b) return true;
+  if (typeof a !== 'object' || typeof b !== 'object' || a === null || b === null) return false;
+  if (Array.isArray(a) !== Array.isArray(b)) return false;
+  const ka = Object.keys(a);
+  const kb = Object.keys(b);
+  return ka.length === kb.length && ka.every((k) => Object.hasOwn(b, k) && deepEqual((a as Record<string, unknown>)[k], (b as Record<string, unknown>)[k]));
+}
+
+/** Whether the screen can read and reset the setting (custom ones have no generic getter). */
+const handled = (def: SettingDef<Settings>): def is Exclude<SettingDef<Settings>, { kind: 'custom' }> => def.kind !== 'custom';
+
+/** The patch that sets every one of `defs` back to its default, built on `s`. */
+function defaultsPatch(defs: SettingDef<Settings>[], s: Settings): Partial<Settings> {
+  let acc = s;
+  let patch: Partial<Settings> = {};
+  for (const def of defs) {
+    const p = resetPatch(def, acc);
+    if (!p) continue;
+    acc = { ...acc, ...p };
+    patch = { ...patch, ...p };
+  }
+  return patch;
+}
+
+/** A setting's translated label, or the id when it has none. */
+const labelOf = (id: string): string | undefined => {
+  const def = settingsRegistry.setting(id);
+  return def && tr(def.label, id);
+};
+
+/**
+ * Searches the schema like VS Code's settings search: a setting matches when its label, rendered description or id
+ * holds every word; a section whose label matches (or sits under one that does) shows whole. `@modified` and
+ * `@id:<id>` filters AND with the words; while one is on, a matching section shows only its filtered schema rows,
+ * since hand-written fields have no schema entry to filter. Returns the sections with hits.
+ */
+function searchSchema(flat: FlatNode[], query: string, settings: Settings): Map<string, SectionHit> {
+  const { text, modified, ids: only } = parseSettingsQuery(query);
+  const words = norm(text).trim().split(' ').filter(Boolean);
+  const filtered = modified || only.length > 0;
+  const found = new Map<string, SectionHit>();
+  if (words.length === 0 && !filtered) return found;
+  const labelKeys: string[] = [];
+  for (const { node, key } of flat) {
+    const labelHit = words.length > 0 && (words.every((w) => norm(sectionLabel(node)).includes(w)) || labelKeys.some((k) => isUnder(key, k)));
+    if (labelHit) labelKeys.push(key);
+    const whole = labelHit && !filtered;
+    const ids = settingsRegistry
+      .settingsIn(node.path)
+      .filter((s) => {
+        if (modified && !isModified(s, settings)) return false;
+        if (only.length > 0 && !only.includes(s.id)) return false;
+        if (labelHit) return true;
+        const hay = norm([tr(s.label), settingDescriptionText(tr(s.description), labelOf), s.id].join(' '));
+        return words.every((w) => hay.includes(w));
+      })
+      .map((s) => s.id);
+    if (whole || ids.length > 0) found.set(key, { whole, ids });
+  }
+  return found;
+}
+
+/**
+ * Settings as VS Code opens them: a modal editor over the current screen, closed with Escape or a click outside.
+ * The nav is the schema's section tree; a parent shows its own settings and its children's. Keyboard › Shortcuts
+ * holds the keybindings editor, which has its own filter; `initialSection` opens a section directly.
+ * Changes stay a draft until Apply or Ok; closing with changes asks whether to save them. The Shortcuts page saves at once.
+ */
+export function SettingsModal({ settings, onChange, onQuit, onClose, initialSection }: Props & { onClose: () => void; initialSection?: string }) {
+  const flat = useMemo(() => flatten(settingsRegistry.sectionTree()), []);
+  const [section, setSection] = useState(initialSection ?? flat[0]?.key ?? 'general');
+  // The initial section's ancestors start expanded, so the nav shows it.
+  const [expanded, setExpanded] = useState<ReadonlySet<string>>(() => {
+    const path = initialSection?.split('.') ?? [];
+    return new Set(path.slice(0, -1).map((_, i) => path.slice(0, i + 1).join('.')));
+  });
+  const [query, setQuery] = useState('');
+  const [pending, setPending] = useState<Partial<Settings>>({});
+  const draft = useMemo<Settings>(() => ({ ...settings, ...pending }), [settings, pending]);
+  const change: Change = (patch) => setPending((p) => ({ ...p, ...patch }));
+  const dirty = Object.keys(pending).length > 0;
+  const apply = () => {
+    if (!dirty) return;
+    onChange(pending);
+    setPending({});
+  };
+  // Closing (Ok, X, Escape, backdrop) with unsaved changes asks first.
+  const [asking, setAsking] = useState(false);
+  const requestClose = () => (dirty ? setAsking(true) : onClose());
+  const body = useRef<HTMLDivElement>(null);
+  const searching = query.trim() !== '';
+  const hits = useMemo(() => searchSchema(flat, query, draft), [flat, query, draft]);
+  const modifiedOnly = parseSettingsQuery(query).modified;
+  const deepCount = (key: string) => [...hits].reduce((n, [k, h]) => (isUnder(k, key) ? n + h.ids.length : n), 0);
+  const total = [...hits.values()].reduce((n, h) => n + h.ids.length, 0);
+
+  const render = (key: string): ReactNode => {
+    switch (key) {
+      case 'general': return <GeneralSection settings={draft} onChange={change} onQuit={onQuit} />;
+      case 'appearance':
+        return (
+          <section className="section">
+            <div className="card form">
+              <AppearanceFields value={draft} onChange={change} />
+                <LayoutField value={draft} onChange={change} />
+                <MainMenuField value={draft} onChange={change} />
+                <DockField value={draft} onChange={change} />
+                <IconsField value={draft} onChange={change} />
+                <LayoutIconField value={draft} onChange={change} />
+            </div>
+          </section>
+        );
+      case 'window':
+        return (
+          <section className="section">
+            <div className="card form">
+              <ZoomField value={draft} onChange={change} />
+            </div>
+          </section>
+        );
+      case 'keyboard.shortcuts': return <ShortcutsSection settings={settings} onChange={onChange} />;
+      case 'system.updates': return <UpdatesCard folder={draft.updateFolder} onFolder={(updateFolder) => change({ updateFolder })} />;
+      default: {
+        // Sections other packages add: their schema rows.
+        const defs = settingsRegistry.settingsIn(key.split('.'));
+        return defs.length > 0 ? <SettingRows ids={defs.map((d) => d.id)} settings={draft} onChange={change} /> : null;
+      }
+    }
+  };
+
+  const open = (key: string) => {
+    setQuery('');
+    setSection(key);
+    body.current?.scrollTo({ top: 0 });
+  };
+  const toggle = (key: string) => setExpanded((prev) => {
+    const next = new Set(prev);
+    if (!next.delete(key)) next.add(key);
+    return next;
+  });
+  // A node shows when its ancestors are expanded; while searching, when it or a descendant has hits.
+  const visible = (f: FlatNode) =>
+    searching
+      ? [...hits.keys()].some((k) => isUnder(k, f.key))
+      : f.node.path.slice(0, -1).every((_, i) => expanded.has(sectionKey(f.node.path.slice(0, i + 1))));
+  const selected = flat.find((f) => f.key === section) ?? flat[0];
+  // A node has unsaved changes when a setting in it (or under it) differs in the draft from the saved settings.
+  const unsaved = (path: readonly string[]) =>
+    dirty && settingsRegistry.settingsIn(path, true).some((s) => handled(s) && !deepEqual(s.get(draft), s.get(settings)));
+  // Reset restores the defaults of the page shown: the selected section and its children.
+  const pageDefs = selected && !searching ? settingsRegistry.settingsIn(selected.node.path, true).filter(handled) : [];
+  const canReset = pageDefs.some((d) => !deepEqual(d.get(draft), d.default));
+  const footer = selected?.key === 'keyboard.shortcuts' && !searching ? undefined : (
+    <>
+      <button className="btn btn-sm" disabled={!canReset} onClick={() => change(defaultsPatch(pageDefs, draft))}>{t('settings.footer.reset')}</button>
+      <button className="btn btn-sm" disabled={!dirty} onClick={apply}>{t('settings.footer.apply')}</button>
+      <button
+        className="btn btn-sm btn-primary"
+        onClick={requestClose}
+      >
+        {t('settings.footer.ok')}
+      </button>
+    </>
+  );
+  // `#setting.id#` links in descriptions: open the target's section (unless search already shows it), then its row.
+  const reveal = useRevealSetting(body);
+  // Up/Down/Home/End/PageUp/PageDown between rows; Enter or F2 into a row's control, Escape back to the row.
+  useRovingList(body, '[data-setting]', { control: SETTING_ROW_CONTROLS });
+  const links = useMemo<SettingLinks>(() => ({
+    labelOf,
+    onNavigate: (id) => {
+      const def = settingsRegistry.setting(id);
+      if (!def) return;
+      const hit = hits.get(sectionKey(def.section));
+      if (!hit || !(hit.whole || hit.ids.includes(id))) {
+        setQuery('');
+        setSection(sectionKey(def.section));
+        setExpanded((prev) => new Set([...prev, ...def.section.slice(0, -1).map((_, i) => sectionKey(def.section.slice(0, i + 1)))]));
+      }
+      reveal(id);
+    },
+  }), [hits, reveal]);
+
+  return (
+    <Modal title={t('settings.title')} onClose={requestClose} footer={footer} large>
+      <SettingLinksProvider value={links}>
+      <div className="settings-layout">
+        <nav className="settings-nav" aria-label={t('settings.title')}>
+          <div className="settings-nav-search-box">
+          <input
+            className="settings-search settings-nav-search"
+            type="search"
+            value={query}
+            placeholder={t('settings.search')}
+            aria-label={t('settings.search')}
+            onChange={(e) => setQuery(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Escape' && query) {
+                e.stopPropagation();
+                setQuery('');
+              } else if (e.key === 'ArrowDown') {
+                // Like VS Code: down from the search box goes into the settings.
+                const first = body.current?.querySelector<HTMLElement>(`.field :is(${CONTROLS})`);
+                if (first) {
+                  e.preventDefault();
+                  first.focus();
+                }
+              }
+            }}
+          />
+          <button
+            type="button"
+            className="settings-nav-filter"
+            title={t('settings.search.modified')}
+            aria-label={t('settings.search.modified')}
+            aria-pressed={modifiedOnly}
+            onClick={() => setQuery(toggleModifiedFilter)}
+          >
+            <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round" aria-hidden="true">
+              <path d="M2 3h12l-4.5 5.5V13l-3 1.5V8.5z" />
+            </svg>
+          </button>
+          </div>
+          {searching && <span className="settings-count">{t(total === 1 ? 'settings.search.count.one' : 'settings.search.count', { n: total })}</span>}
+          {flat.filter(visible).map((f) => {
+            const parent = f.node.children.length > 0;
+            const isOpen = searching || expanded.has(f.key);
+            const active = !searching && section === f.key;
+            return (
+              <button
+                key={f.key}
+                className={`settings-nav-item${active ? ' active' : ''}`}
+                style={{ '--depth': f.depth } as CSSProperties}
+                aria-current={active}
+                aria-expanded={parent ? isOpen : undefined}
+                onClick={() => {
+                  if (parent && (!expanded.has(f.key) || active)) toggle(f.key);
+                  open(f.key);
+                }}
+              >
+                <span
+                  className={`settings-nav-twisty${parent ? '' : ' leaf'}${isOpen ? ' open' : ''}`}
+                  onClick={(e) => {
+                    if (!parent || searching) return;
+                    e.stopPropagation();
+                    toggle(f.key);
+                  }}
+                >
+                  ▶
+                </span>
+                {sectionLabel(f.node)}
+                {unsaved(f.node.path) && (
+                  <span className="settings-nav-modified" title={t('settings.row.modified')} aria-label={t('settings.row.modified')} />
+                )}
+                {searching && <span className="settings-nav-count">{deepCount(f.key)}</span>}
+              </button>
+            );
+          })}
+        </nav>
+        <div className="scroll" ref={body}>
+          {searching
+            ? flat.filter((f) => hits.has(f.key)).map((f) => {
+                const hit = hits.get(f.key)!;
+                return (
+                  <div key={f.key} className="settings-group" data-section={f.key}>
+                    <h3 className="settings-group-title">{f.trail.join(' › ')}</h3>
+                    {hit.whole ? render(f.key) : <SettingRows ids={hit.ids} settings={draft} onChange={change} />}
+                  </div>
+                );
+              })
+            : selected && (
+                <div key={`page-${selected.key}`} className="settings-page">
+                  <h3 className="settings-group-title">{selected.trail.join(' › ')}</h3>
+                  {render(selected.key)}
+                  {flat.filter((f) => f.key !== selected.key && isUnder(f.key, selected.key)).map((f) => (
+                    <div key={f.key} className="settings-group" data-section={f.key}>
+                      <h3 className="settings-subgroup-title">{f.trail.slice(selected.trail.length).join(' › ')}</h3>
+                      {render(f.key)}
+                    </div>
+                  ))}
+                </div>
+              )}
+          {searching && hits.size === 0 && (
+            <div className="settings-empty">
+              <span className="muted">{t('settings.search.none')}</span>
+              <button className="btn btn-sm" onClick={() => setQuery('')}>{t('settings.search.clear')}</button>
+            </div>
+          )}
+        </div>
+      </div>
+      </SettingLinksProvider>
+      {asking && (
+        <Modal
+          title={t('settings.unsaved.title')}
+          onClose={() => setAsking(false)}
+          footer={
+            <>
+              <button className="btn" onClick={() => setAsking(false)} autoFocus>{t('settings.unsaved.cancel')}</button>
+              <button className="btn" onClick={onClose}>{t('settings.unsaved.discard')}</button>
+              <button
+                className="btn btn-primary"
+                onClick={() => {
+                  apply();
+                  onClose();
+                }}
+              >
+                {t('settings.unsaved.save')}
+              </button>
+            </>
+          }
+        >
+          <p>{t('settings.unsaved.message')}</p>
+        </Modal>
+      )}
+    </Modal>
+  );
+}
+
+/** Schema settings as one card of rows (search results, sections with no screen of their own). */
+function SettingRows({ ids, settings, onChange }: { ids: string[]; settings: Settings; onChange: Change }) {
+  return (
+    <section className="section">
+      <div className="card form">
+        {ids.map((id) => <SettingRow key={id} def={settingsRegistry.setting(id)!} settings={settings} onChange={onChange} />)}
+      </div>
+    </section>
+  );
+}
+
+// What ArrowDown in the search box focuses first.
+const CONTROLS = 'input, select, textarea, button';
+
+const norm = (s: string | null | undefined) => (s ?? '').toLocaleLowerCase().replace(/\s+/g, ' ');
+
+function GeneralSection({ settings, onChange, onQuit }: Props) {
+  return (
+    <>
+      <div className="card form">
+        <label className="field">
+          <span className="mono-label">{t('settings.language')}</span>
+          <select value={settings.language ?? detectLanguage()} onChange={(e) => onChange({ language: e.target.value as Language })}>
+            {LANGUAGES.map((l) => <option key={l.id} value={l.id}>{l.label}</option>)}
+          </select>
+        </label>
+        {settingsRegistry.settingsIn(['general']).map((def) => <SettingRow key={def.id} def={def} settings={settings} onChange={onChange} />)}
+      </div>
+      {(!isDesktop || settings.closeToTray) && <GeneralCard onQuit={onQuit} />}
+    </>
+  );
+}
+
+/** Every command of the app, with the keys the user can change; a change applies at once. It has its own filter. */
+function ShortcutsSection({ settings, onChange }: { settings: Settings; onChange: Change }) {
+  const keys = useKeybindings();
+  if (!keys) return null;
+  const scopeLabel = (scope: string) => (scope === GLOBAL ? t('keys.global') : tr(`nav.${scope}`, scope));
+  return <KeybindingsEditor defs={keys.defs} keymap={settings.keybindings ?? {}} onChange={(keybindings) => onChange({ keybindings })} scopeLabel={scopeLabel} />;
+}
+
+
+/**
+ * Where closing the window doesn't stop the app: browser and app mode, and with the tray (the
+ * setting, which applies after a restart; until then the tray menu or the close button quits).
+ */
+function GeneralCard({ onQuit }: { onQuit: () => void }) {
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<ApiError | null>(null);
+
+  const quit = async () => {
+    setBusy(true);
+    setError(null);
+    try {
+      await api.quit();
+      onQuit();
+    } catch (err) {
+      setError(errorOf(err));
+      setBusy(false);
+    }
+  };
+
+  return (
+    <section className="section">
+      <div className="card form">
+        <div className="field">
+          <div className="row">
+            <button className="btn btn-sm btn-danger" disabled={busy} onClick={quit}>
+              {t('settings.quit')}
+            </button>
+          </div>
+          <span className="muted">{t(isDesktop ? 'settings.quit.hintTray' : 'settings.quit.hint', { name: APP.name })}</span>
+        </div>
+        {error && <ErrorBanner error={error} compact />}
+      </div>
+    </section>
+  );
+}
+
+function UpdatesCard({ folder, onFolder }: { folder: string; onFolder: (folder: string) => void }) {
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<ApiError | null>(null);
+  const [restarting, setRestarting] = useState<string | null>(null);
+  const state = useAsync(() => api.update(), [folder], 60_000);
+
+  const run = async (fn: () => Promise<unknown>) => {
+    setBusy(true);
+    setError(null);
+    try {
+      await fn();
+    } catch (err) {
+      setError(errorOf(err));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const u = state.data;
+  const status = !u
+    ? null
+    : u.code
+      ? errorMessage({ kind: 'internal', code: u.code, message: u.message ?? '' })
+      : u.status === 'not-configured'
+      ? t('settings.update.notConfigured')
+      : u.available
+        ? t('settings.update.available', { version: u.version ?? '' })
+        : u.status === 'offline'
+          ? t('settings.update.offline')
+          : u.status === 'error'
+            ? (u.message ?? '')
+            : t('settings.update.latest');
+
+  return (
+    <section className="section">
+      <div className="card form">
+        <div className="field">
+          <label className="mono-label" htmlFor="update-folder">{t('settings.updateFolder')}</label>
+          <div className="row">
+            <input id="update-folder" value={folder} placeholder={t('settings.updateFolder.none')} readOnly />
+            <button
+              className="btn btn-sm"
+              disabled={busy}
+              onClick={() => run(async () => {
+                const next = (await api.pickUpdateFolder(t('settings.updateFolder.pick'))).updateFolder;
+                if (next !== folder) onFolder(next);
+              })}
+            >
+              {t('settings.updateFolder.browse')}
+            </button>
+            {folder && (
+              <button className="btn btn-sm" disabled={busy} onClick={() => onFolder('')}>
+                {t('settings.updateFolder.clear')}
+              </button>
+            )}
+          </div>
+          <span className="muted">{t('settings.updateFolder.hint')}</span>
+        </div>
+        {!u && !state.error && <Spinner small />}
+        {state.error && <ErrorBanner error={state.error} onRetry={state.reload} compact />}
+        {u && (
+          <div className="field">
+            <span>
+              {t('settings.update.current', { version: u.current })} {status}
+            </span>
+            {u.source && <span className="muted">{t('settings.update.source', { source: sourceLabel(u.source) })}</span>}
+            {u.available && u.notes && <pre className="mono muted">{u.notes}</pre>}
+            {u.available && !u.canApply && <span className="muted">{t('settings.update.fromSource')}</span>}
+            <div className="row">
+              <button className="btn btn-sm" disabled={busy || !u.source} onClick={() => run(() => api.checkUpdate().then(() => state.reload()))}>
+                {t('settings.update.check')}
+              </button>
+              {u.available && u.canApply && (
+                <button
+                  className="btn btn-sm btn-primary"
+                  disabled={busy || restarting !== null}
+                  onClick={() => run(async () => setRestarting((await api.applyUpdate()).version))}
+                >
+                  {t('settings.update.apply')}
+                </button>
+              )}
+            </div>
+          </div>
+        )}
+        {restarting && <span className="muted">{t('settings.update.restarting', { version: restarting })}</span>}
+        {error && <ErrorBanner error={error} compact />}
+      </div>
+    </section>
+  );
+}
+
+const sourceLabel = (id: string): string => (id.startsWith('github:') ? `GitHub ${id.slice(7)}` : `${t('settings.update.folder')} ${id.slice(7)}`);

package/template/web/src/settings.ts

@@ -0,0 +1,33 @@
+import { createSettingsRegistry, DEFAULT_SECTIONS, sectionKey } from '@deckbuilderkit/ui';
+import type { Settings } from './api';
+
+/** The built-in sections this app has screens for; add more (e.g. `editor`, `terminal`) as the app grows. */
+const SECTIONS = ['general', 'appearance', 'window', 'keyboard', 'keyboard.shortcuts', 'system', 'system.updates'];
+
+export const settingsRegistry = createSettingsRegistry<Settings>();
+for (const s of DEFAULT_SECTIONS) if (SECTIONS.includes(sectionKey(s.path))) settingsRegistry.registerSection(s);
+
+settingsRegistry.registerSettings([
+  {
+    id: 'general.autostart',
+    kind: 'boolean',
+    section: ['general'],
+    order: 10,
+    label: 'settings.autostart',
+    description: 'settings.autostart.hint',
+    default: false,
+    get: (s) => s.autostart,
+    set: (_, autostart) => ({ autostart }),
+  },
+  {
+    id: 'general.closeToTray',
+    kind: 'boolean',
+    section: ['general'],
+    order: 20,
+    label: 'settings.closeToTray',
+    description: 'settings.closeToTray.hint',
+    default: false,
+    get: (s) => s.closeToTray,
+    set: (_, closeToTray) => ({ closeToTray }),
+  },
+]);

package/template/web/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "jsx": "react-jsx",
+    "types": []
+  },
+  "include": ["src", "../app.ts"]
+}

package/view-template/README.md

@@ -0,0 +1,10 @@
+# @deckbuilderkit/view-__VIEW_ID__
+
+__VIEW_TITLE__ view for DeckBuilder.
+
+- `src/view.tsx`: web entry (`__VIEW_CAMEL__View`, built with `defineView`).
+- `src/server.ts`: server entry (`__VIEW_CAMEL__ServerView`, built with `defineServerView`).
+- `src/i18n.ts`: messages (en, pt-BR) and the view's typed `t`.
+- `src/styles.css`: styles; import `@deckbuilderkit/view-__VIEW_ID__/styles.css` in the app.
+
+Settings cards: add `settingsCards` (see `ViewSettingsCards` in `@deckbuilderkit/ui`) to the view definition and put the components in `src/settings/cards.tsx`.

package/view-template/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@deckbuilderkit/view-__VIEW_ID__",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "exports": {
+    "./web": "./src/web.ts",
+    "./server": "./src/server.ts",
+    "./styles.css": "./src/styles.css"
+  },
+  "dependencies": {
+    "@deckbuilderkit/server-core": "workspace:*",
+    "@deckbuilderkit/ui": "workspace:*"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.12",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "@types/react-dom": "^18.3.1"
+  }
+}

package/view-template/src/i18n.ts

@@ -0,0 +1,14 @@
+import { createT, type Messages } from '@deckbuilderkit/ui';
+
+export const en = {
+  'nav.__VIEW_ID__': '__VIEW_TITLE__',
+  '__VIEW_CAMEL__.heading': '__VIEW_TITLE__',
+};
+
+export const ptBR: Messages<typeof en> = {
+  'nav.__VIEW_ID__': '__VIEW_TITLE__',
+  '__VIEW_CAMEL__.heading': '__VIEW_TITLE__',
+};
+
+export type __VIEW_NAME__MessageKey = keyof typeof en;
+export const t = createT<__VIEW_NAME__MessageKey>();

package/view-template/src/server.ts

@@ -0,0 +1,9 @@
+import { defineServerView } from '@deckbuilderkit/server-core';
+
+/** Server half of the __VIEW_TITLE__ view: add routes, sockets and settings validators here. */
+export function __VIEW_CAMEL__ServerView() {
+  return defineServerView({
+    id: '__VIEW_ID__',
+    routes: () => ({}),
+  });
+}

package/view-template/src/styles.css

@@ -0,0 +1 @@
+.view-__VIEW_ID__ { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; padding: 16px; }

package/view-template/src/view.tsx

@@ -0,0 +1,22 @@
+import type { ReactNode } from 'react';
+import { defineView } from '@deckbuilderkit/ui';
+import { en, ptBR, t } from './i18n';
+
+export interface __VIEW_NAME__ViewOptions {
+  /** i18n key of the nav section title. */
+  group: string;
+  order: number;
+}
+
+export function __VIEW_CAMEL__View({ group, order }: __VIEW_NAME__ViewOptions) {
+  return defineView<'__VIEW_ID__', Record<string, never>, 'nav.__VIEW_ID__'>({
+    id: '__VIEW_ID__',
+    nav: { group, icon: 'home', label: 'nav.__VIEW_ID__', order },
+    render: (): ReactNode => (
+      <div className="view-__VIEW_ID__">
+        <h1>{t('__VIEW_CAMEL__.heading')}</h1>
+      </div>
+    ),
+    messages: { en, 'pt-BR': ptBR },
+  });
+}