Aislo/A00_Common/app_settings.ts

/* =============================================================================
 * app_settings.ts
 * ☰ [설정] 창(PLAN 332-2 · 요구 224-8) — 탭 셋: ① 마우스 ② CAD 단축키 ③ 다른 곳 단축키(읽기 전용).
 *
 * - 고침은 창 안 사본에만 · [저장] 때만 계정 pref(`input-prefs`)로 한 번 씀 — 읽기는 `input_prefs.ts`
 * - 저장 안 한 고침이 있으면 닫을 때 물음(askLeave) · 잘못 있는 별칭은 저장 안 함
 * - 로그인 전엔 이 브라우저에만 남음(계정 올리기는 `b_page_state` 가 로그인 뒤에)
 * ========================================================================== */

import { createBadge } from "@ui/ui_template_badge";
import { createCheckbox } from "@ui/ui_template_checkbox";
import { createKv } from "@ui/ui_template_kv";
import { createButton, el, showToast } from "@ui/ui_template_elements";
import { askLeave } from "@ui/ui_template_leave_dialog";
import { t as L } from "@ui/ui_template_locale";
import { openModal } from "@ui/ui_template_modal";
import { writeState } from "./b_page_state";
import { inputPrefs, type InputPrefs, type WheelZoom } from "./input_prefs";
import { fillTabs } from "./b_page_tabs";
import { buildCadAliasTab, checkCadAliases } from "./app_settings_cad";
import "./app_settings.css";

type LocaleKey = Parameters<typeof L>[0];
type TabId = "mouse" | "cad" | "keys";

const TABS: [TabId, LocaleKey][] = [
  ["mouse", "App_Settings_Tab_Mouse"],
  ["cad", "App_Settings_Tab_Cad"],
  ["keys", "App_Settings_Tab_Keys"],
];

const WHEEL: [WheelZoom, LocaleKey][] = [
  ["pull", "App_Settings_Wheel_Pull"],
  ["push", "App_Settings_Wheel_Push"],
];

const MOUSE_RULES: LocaleKey[] = [
  "App_Settings_Rule_Pan",
  "App_Settings_Rule_Pick",
  "App_Settings_Rule_Right",
  "App_Settings_Rule_Pinch",
];

/** ③ 안내 — [자리, 키] */
const KEY_ROWS: [LocaleKey, LocaleKey][] = [
  ["App_Settings_Keys_All", "App_Settings_Keys_All_Keys"],
  ["App_Settings_Keys_Profile", "App_Settings_Keys_Profile_Keys"],
  ["App_Settings_Keys_RouteEdit", "App_Settings_Keys_RouteEdit_Keys"],
  ["App_Settings_Keys_Section", "App_Settings_Keys_Section_Keys"],
  ["App_Settings_Keys_Cad", "App_Settings_Keys_Cad_Keys"],
  ["App_Settings_Keys_Table", "App_Settings_Keys_Table_Keys"],
  ["App_Settings_Keys_M02", "App_Settings_Keys_M02_Keys"],
];

/** 비교 · 저장 꼴 — 별칭 명령 차례를 맞춤 */
const normalize = (p: InputPrefs): InputPrefs => ({
  wheelZoom: p.wheelZoom,
  cadAliases: Object.fromEntries(Object.entries(p.cadAliases).sort(([a], [b]) => (a < b ? -1 : 1))),
});
const snapshot = (p: InputPrefs): string => JSON.stringify(normalize(p));

/** 규칙 목록 = 값 목록 부품 규칙 꼴 — 한 줄 = 「입력 = 동작」 · 입력은 키 칩(` · ` 로 여럿) · 동작 없는 줄은 칩만 */
function ruleList(keys: LocaleKey[]): HTMLElement {
  const rows = keys
    .flatMap((key) => L(key).split("\n"))
    .map((line) => {
      const at = line.indexOf(" = ");
      const input = at < 0 ? line : line.slice(0, at);
      const chips = document.createDocumentFragment();
      chips.append(...input.split(" · ").map((text) => createBadge(text, "neutral")));
      return { label: chips, value: at < 0 ? undefined : line.slice(at + 3) };
    });
  return createKv(rows, { rule: true });
}

function mouseTab(draft: InputPrefs): HTMLElement {
  const group = el("div", {
    className: "app-settings__radios",
    attrs: { role: "radiogroup", "aria-label": L("App_Settings_Wheel") },
  });
  for (const [mode, key] of WHEEL) {
    group.append(
      createCheckbox(L(key), {
        radio: "app-settings-wheel",
        value: mode,
        checked: draft.wheelZoom === mode,
        onChange: () => (draft.wheelZoom = mode),
      }).root,
    );
  }
  return el("div", {
    children: [
      el("h4", { text: L("App_Settings_Wheel") }),
      group,
      el("h4", { text: L("App_Settings_Rules") }),
      ruleList(MOUSE_RULES),
    ],
  });
}

function keysTab(): HTMLElement {
  return el("div", {
    children: KEY_ROWS.flatMap(([place, keys]) => [el("h4", { text: L(place) }), ruleList([keys])]),
  });
}

/** ☰ [설정] — 창을 열고 지금 설정을 사본으로 고침 */
export function openAppSettings(): void {
  const draft = normalize(inputPrefs());
  let saved = snapshot(draft);
  const cad = buildCadAliasTab(draft.cadAliases);
  const panels: Record<TabId, HTMLElement> = {
    mouse: mouseTab(draft),
    cad: cad.root,
    keys: keysTab(),
  };
  const tabs = el("div", { className: "app-settings__tabs" });
  const show = (id: TabId): void => {
    fillTabs(tabs, {
      tabs: TABS.map(([tab, key]) => ({ key: tab, label: L(key) })),
      value: id,
      kind: "pill",
      data: "settingsTab",
      onChange: (tab) => show(tab as TabId),
    });
    for (const [tab, panel] of Object.entries(panels)) panel.hidden = tab !== id;
  };

  /** [저장] — 잘못 있는 별칭이면 CAD 탭을 보이고 안 씀 */
  const save = (): boolean => {
    const errors = checkCadAliases(draft.cadAliases);
    cad.mark(errors);
    if (Object.keys(errors).length) {
      show("cad");
      showToast(L("App_Settings_Cad_Invalid"), "error");
      return false;
    }
    if (snapshot(draft) !== saved) writeState("input-prefs", normalize(draft));
    saved = snapshot(draft);
    showToast(L("App_Settings_Saved"), "success");
    return true;
  };

  const saveButton = createButton({
    label: L("Common_Btn_Save"),
    variant: "filled",
    onClick: () => save() && modal.close(),
  });
  const modal = openModal({
    title: L("App_Settings"),
    closeLabel: L("Common_Btn_Close"),
    dialogClass: "app-settings",
    actions: [saveButton],
    beforeClose: async () => {
      if (snapshot(draft) === saved) return true;
      const choice = await askLeave(L("App_Settings_Leave"));
      return choice === "discard" || (choice === "save" && save());
    },
    mount: (body) => {
      show("mouse");
      body.append(tabs, ...Object.values(panels));
    },
  });
}