{/* 페이크 IDE 배경 — 도크 옆에 깔리는 코드 에디터 느낌 (데스크탑 모드에선 숨김) */}
{!desktopMode &&
);
}
// 가장자리 8방향 리사이즈 핸들 (보이지 않는 hit-area)
function EdgeResizers() {
const start = (direction) => (e) => {
if (e.button !== 0) return;
try {
const T = window.__TAURI__;
if (!T || !T.window || !T.window.getCurrentWindow) return;
e.preventDefault();
T.window.getCurrentWindow().startResizeDragging(direction);
} catch (_) {}
};
const EDGE = 5; // 가장자리 두께
const CRN = 10; // 모서리 크기
const base = { position: "absolute", zIndex: 100 };
return (
);
}
// ---- 활성 탭 헤더 (sticky 글래스 영역) ----
function tabHeaderInfo(active, state) {
const sel = diary.select;
const project = sel.currentProject(state);
const autosave = L("header.autosave");
const sortHint = L("header.sortByUse");
const replyHint = L("header.replyHint");
const retroHint = L("header.retroHint");
switch (active) {
case "today": {
const notDone = sel.todosForCurrent(state).filter(t => !t.done).length;
const minutes = sel.workMinutesToday(state);
const unreplied = (state.emails ?? []).filter(e => !e.replied).length;
return {
ttl: L("header.todayTitle", { date: diary.fmtKDate(diary.today()) }),
sub: L("header.todaySub", { minutes, todos: notDone, mail: unreplied }),
};
}
case "cal":
return { ttl: L("tab.week"), sub: L("header.calSub", { autosave }) };
case "todo": {
const items = sel.todosForCurrent(state);
const notDone = items.filter(t => !t.done).length;
const hot = items.filter(t => t.hot && !t.done).length;
return {
ttl: L("tab.todo"),
sub: L("header.todoSub", { left: notDone, hot }),
};
}
case "memo": {
const cnt = (sel.memosForCurrent ? sel.memosForCurrent(state) : []).length;
return {
ttl: L("tab.memo"),
sub: L("header.memoSub", {
project: project?.name ?? L("proj.fallback"),
count: cnt,
autosave,
}),
};
}
case "prompt":
return {
ttl: L("header.promptTitle"),
sub: L("header.promptSub", { count: (state.prompts ?? []).length, sortHint }),
};
case "mail": {
const unreplied = (state.emails ?? []).filter(e => !e.replied).length;
return {
ttl: L("header.mailTitle"),
sub: L("header.mailSub", { unreplied, replyHint }),
};
}
case "retro":
return { ttl: L("header.retroTitle"), sub: L("header.retroSub", { retroHint }) };
default:
return { ttl: "", sub: "" };
}
}
function TabHeader({ active }) {
useI18n();
const { state } = diary.useDiary();
const { ttl, sub } = tabHeaderInfo(active, state);
return (
);
}
// ---- 스프레드 시트: 재생바 위 가로 탭 표 ----
function ExcelTabStrip({ tabs, active, onSelect, compact }) {
useI18n();
const n = tabs.length || 1;
return (
);
}
// ---- 다이어리 인덱스 탭 ----
function DiaryTabs({ tabs, active, onSelect, dockSide, tabSide, dockWidth, tabStyle, chrome, compact, autoHide, tabsTop = 68 }) {
const cm = (pct) => `color-mix(in srgb, ${chrome || "#a9cdf5"} ${pct}%, white)`;
const excelSkin = typeof window.isExcelSkin === "function" && window.isExcelSkin();
const officeTabs = typeof window.isOfficeSkin === "function" && window.isOfficeSkin();
// 탭이 도크의 어느 쪽 바깥에 붙는지 → 위치 계산
const onLeft = tabSide === "left";
// 탭 컨테이너 위치
const containerPos = {};
if (dockSide === "left") {
// 도크가 왼쪽에 있음 → 탭은 도크의 오른쪽 모서리에 붙음
containerPos.left = dockWidth;
} else {
// 도크가 오른쪽에 있음 → 탭은 도크의 왼쪽 모서리에 붙음
containerPos.right = dockWidth;
}
const stickRight = dockSide === "left"; // 탭이 오른쪽으로 삐쳐나옴
const TAB_W = officeTabs ? (excelSkin ? 40 : 44) : 32;
const TAB_H = officeTabs ? (compact ? 40 : 66) : (compact ? 40 : 74);
const TAB_GAP = officeTabs ? 0 : 4;
// ---- 자동 숨김 로직 ----
// autoHide=true 일 때: 처음엔 숨김. 가장자리에 마우스 ~1초 호버 → 슬라이드로 노출.
const REVEAL_DELAY = 1000;
const HIDE_DELAY = 220;
const [revealed, setRevealed] = useState(false);
const revealTimerRef = React.useRef(null);
const hideTimerRef = React.useRef(null);
React.useEffect(() => {
setRevealed(false);
return () => {
if (revealTimerRef.current) clearTimeout(revealTimerRef.current);
if (hideTimerRef.current) clearTimeout(hideTimerRef.current);
};
}, [autoHide]);
const onZoneEnter = () => {
if (!autoHide) return;
if (hideTimerRef.current) { clearTimeout(hideTimerRef.current); hideTimerRef.current = null; }
if (revealed) return;
if (revealTimerRef.current) return;
revealTimerRef.current = setTimeout(() => {
setRevealed(true); revealTimerRef.current = null;
}, REVEAL_DELAY);
};
const onZoneLeave = () => {
if (!autoHide) return;
if (revealTimerRef.current) { clearTimeout(revealTimerRef.current); revealTimerRef.current = null; }
if (!revealed) return;
if (hideTimerRef.current) clearTimeout(hideTimerRef.current);
hideTimerRef.current = setTimeout(() => {
setRevealed(false); hideTimerRef.current = null;
}, HIDE_DELAY);
};
const hidden = autoHide && !revealed;
const renderTab = (t) => {
const isActive = t.id === active;
const tabGlyph = typeof window.skinTabGlyph === "function" ? window.skinTabGlyph(t.id) : null;
const flatClass = officeTabs
? "diary-tab-cell" + (isActive ? " is-active" : "") + (excelSkin ? " diary-tab-excel" : " diary-tab-notion")
: "";
return (
);
};
const slideOffset = TAB_W + 8;
const hiddenTransform = stickRight ? `translateX(-${slideOffset}px)` : `translateX(${slideOffset}px)`;
const HOVER_ZONE_W = autoHide && !revealed ? 36 : (TAB_W + 12);
return (
);
}
// ---- 헤더 우측 창 컨트롤 (최소화 / 미니모드 / 종료) ----
// Tauri 창에 OS 보더가 없어서 작업표시줄 외엔 창 조작 수단이 없던 문제 해결.
function TitlebarIconButton({ onClick, title, ariaLabel, hoverStyle, children }) {
const [hover, setHover] = useState(false);
const hs = hover && hoverStyle ? hoverStyle : {};
return (
);
}
function TitlebarWindowControls({ setTweak }) {
const onMinimize = async (e) => {
e?.stopPropagation?.();
try {
const T = window.__TAURI__;
if (!T?.window?.getCurrentWindow) return;
await T.window.getCurrentWindow().minimize();
} catch (err) { console.warn("minimize failed:", err); }
};
const onMiniMode = async () => {
if (!setTweak) return;
try {
const pos = window.todoarySaveNormalWindowPos && await window.todoarySaveNormalWindowPos();
setTweak(pos
? { dockHidden: true, appPosX: pos.x, appPosY: pos.y, appPosPhysical: true }
: { dockHidden: true });
} catch (_) {
setTweak("dockHidden", true);
}
};
const onClose = async () => {
try {
const T = window.__TAURI__;
if (T && T.window && T.window.getCurrentWindow) {
await T.window.getCurrentWindow().close();
} else if (typeof window.close === "function") {
window.close();
}
} catch (e) { console.warn("close failed:", e); }
};
return (
);
}
// ---- 도크 미니화 시 디지털 타이머 위젯 ----
// Tauri 창 자체를 위젯 크기로 줄여서 데스크탑 위 어디든 갈 수 있음.
// 위젯은 창 전체를 채우고, 외곽(time row)에 data-tauri-drag-region 을 걸어 OS 레벨로 창을 끔.
function DockRevealEdge({ tweaks, setTweak, onReveal }) {
const reveal = React.useCallback((e) => {
e?.stopPropagation?.();
e?.preventDefault?.();
try {
const T = window.__TAURI__;
T?.window?.getCurrentWindow?.()?.setIgnoreCursorEvents(false)?.catch?.(() => {});
} catch (_) {}
if (setTweak) setTweak("dockHidden", false);
else onReveal?.();
}, [setTweak, onReveal]);
React.useEffect(() => {
window.todoaryExitMiniMode = reveal;
const onKey = (e) => {
if (e.key === "Escape" || (e.altKey && e.shiftKey && (e.key === "m" || e.key === "M"))) {
e.preventDefault();
reveal(e);
}
};
window.addEventListener("keydown", onKey);
const resetIgnore = () => {
try {
const T = window.__TAURI__;
T?.window?.getCurrentWindow?.()?.setIgnoreCursorEvents(false)?.catch?.(() => {});
} catch (_) {}
};
resetIgnore();
const t1 = setTimeout(resetIgnore, 100);
const t2 = setTimeout(resetIgnore, 500);
return () => {
delete window.todoaryExitMiniMode;
window.removeEventListener("keydown", onKey);
clearTimeout(t1);
clearTimeout(t2);
};
}, [reveal]);
// 음악 상태 구독
const [music, setMusic] = useState(
() => window.musicPlayer ? { ...window.musicPlayer.getState() } : { playing: false, hasQueue: false }
);
React.useEffect(() => {
if (!window.musicPlayer) return;
const sync = () => setMusic({ ...window.musicPlayer.getState() });
sync();
return window.musicPlayer.subscribe(sync);
}, []);
const themeBg = buildBackground(
tweaks?.bgType ?? "linear",
tweaks?.bgAngle ?? 180,
tweaks?.bgStops ?? [{ c: "#a9cdf5", p: 0 }, { c: "#ffffff", p: 100 }],
tweaks?.bgShape ?? "none"
);
const onPrev = () => { try { window.musicPlayer && window.musicPlayer.prev(); } catch (_) {} };
const onToggle = () => { try { window.musicPlayer && window.musicPlayer.toggle(); } catch (_) {} };
const onNext = () => { try { window.musicPlayer && window.musicPlayer.next(); } catch (_) {} };
const iconBtn = {
all: "unset", cursor: "pointer", flexShrink: 0,
width: 20, height: 20, borderRadius: 4,
display: "grid", placeItems: "center",
fontFamily: "var(--mono)", fontSize: 11, lineHeight: 1, color: "var(--ink)",
background: "rgba(255,255,255,0.4)",
border: "1px solid var(--ink-soft)",
};
const disabledBtn = { ...iconBtn, cursor: "default", opacity: 0.35 };
const miniSize = (window.TODOARY_DOCK_MINI && window.TODOARY_DOCK_MINI.getSize)
? window.TODOARY_DOCK_MINI.getSize()
: { w: 148, h: (window.TODOARY_WINDOW && window.TODOARY_WINDOW.DOCK_MINI_H) || 88 };
const WIDGET_W = miniSize.w;
const WIDGET_H = miniSize.h;
const WorkChip = window.WorkTimeUI && window.WorkTimeUI.WorkTimeChip;
const onDragMouseDown = async (e) => {
if (e.button !== 0) return;
try {
const T = window.__TAURI__;
if (T?.window?.getCurrentWindow) {
await T.window.getCurrentWindow().startDragging();
}
} catch (_) {}
};
return (
{ e.stopPropagation(); reveal(e); }}
style={{
position: "fixed", top: 0, left: 0,
width: WIDGET_W, height: WIDGET_H,
background: themeBg, backgroundSize: "200% 200%", backgroundPosition: "center",
border: "1.1px solid var(--ink)", borderRadius: 10, boxSizing: "border-box",
boxShadow: "inset 0 1px 2px rgba(255,255,255,0.35), inset 0 -1px 1px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.18)",
display: "flex", flexDirection: "column",
userSelect: "none", overflow: "visible",
color: "var(--ink)", fontFamily: "var(--mono)",
textShadow: "0 1px 0 rgba(255,255,255,0.55)",
zIndex: 9999,
}}>
{/* 드래그 — data-tauri-drag-region 대신 startDragging (OS drag 히트가 버튼 클릭을 가로채지 않음) */}
{ e.stopPropagation(); reveal(e); }}
style={{ position: "absolute", top: 0, left: 0, right: 36, bottom: 0, cursor: "grab" }}
/>
⏱
{WorkChip ? (
) : null}
);
}
// ---- 페이크 IDE 배경 ----
function FakeIde({ dockSide, dockWidth }) {
useI18n();
const ideStyle = {
position: "absolute", top: 0, bottom: 24,
[dockSide === "left" ? "left" : "right"]: dockWidth,
[dockSide === "left" ? "right" : "left"]: 0,
background: "var(--paper-2)",
color: "var(--ink-2)",
fontFamily: "var(--mono)", fontSize: 11,
padding: "30px 24px",
overflow: "hidden",
};
return (
<>
{L("fakeIde.caption")}
todoary / src / components / Timer.tsx
{`export function Timer({ minutes = 25 }) {
const [left, setLeft] = useState(minutes * 60);
useEffect(() => {
const id = setInterval(() => setLeft(s => s - 1), 1000);
return () => clearInterval(id);
}, []);
// TODO: 알림 권한 / 사운드 옵션 토글
return (
{format(left)}
);
}`}
{/* 페이크 작업표시줄 */}
start
VS Code
|
{L("fakeIde.taskbarApp")}
{L("fakeIde.taskbarStatus", { clock: "14:23", stretch: L("timer.next"), remain: 23 })}
);
}
// ===========================================================
// 앱 내 알림 토스트 (뽀모도로 등 — OS 알림 실패 시에도 표시)
// ===========================================================
function AppNotifyToast() {
const [msg, setMsg] = useState(null);
useI18n();
useEffect(() => {
let timerId = null;
const h = (e) => {
const { title, body } = e.detail || {};
const text = body ? `${title} — ${body}` : (title || "");
if (!text) return;
setMsg(text);
clearTimeout(timerId);
timerId = setTimeout(() => setMsg(null), 4200);
};
window.addEventListener("app-notify", h);
return () => {
window.removeEventListener("app-notify", h);
clearTimeout(timerId);
};
}, []);
if (!msg) return null;
return (
{msg}
);
}
// ===========================================================
// 헤더 — 제목/음악/타이머/디데이 각 한 줄 (별도 창 크롬 없음)
// ===========================================================
function HeaderDesktop({ tweaks }) {
return
;
}
// ===========================================================
// 설정 — 데이터 백업 / 복원
// ===========================================================
function dataBtnStyle(accent) {
return {
all: "unset", cursor: "pointer", display: "block", width: "100%", boxSizing: "border-box",
textAlign: "center", padding: "8px 12px", borderRadius: 10,
border: "1.1px solid var(--ink)",
background: accent || "rgba(255,255,255,0.72)",
color: accent ? "#fff" : "var(--ink)",
fontFamily: "var(--hand)", fontWeight: 700, fontSize: 14,
};
}
function DataBackupSection() {
const [storageInfo, setStorageInfo] = useState(null);
const [busy, setBusy] = useState(false);
const [msg, setMsg] = useState("");
const fileRef = React.useRef(null);
useEffect(() => {
let cancelled = false;
(async () => {
try {
const info = await diary.actions.getDataStorageInfo();
if (!cancelled) setStorageInfo(info);
} catch (_) {}
})();
return () => { cancelled = true; };
}, []);
const importErrorText = (code) => {
const key = {
"no-file": "set.importFailNoFile",
read: "set.importFailRead",
parse: "set.importFailParse",
format: "set.importFailFormat",
"missing-main": "set.importFailMissing",
"invalid-main": "set.importFailInvalid",
schema: "set.importFailSchema",
apply: "set.importFailApply",
}[code] || "set.importFail";
return L(key, { reason: code || "" });
};
const onExport = () => {
try {
const r = diary.actions.exportDataBackup();
setMsg(L("set.exportDone", { n: r.keyCount || 0 }));
} catch (e) {
setMsg(L("set.importFail", { reason: String(e?.message || e) }));
}
};
const onPickImport = () => {
if (busy) return;
if (fileRef.current) fileRef.current.click();
};
const onImportFile = async (e) => {
const file = e.target?.files?.[0];
e.target.value = "";
if (!file) return;
setBusy(true);
setMsg("");
try {
const r = await diary.actions.importDataBackup(file);
if (r.cancelled) return;
if (!r.ok) {
setMsg(importErrorText(r.error));
return;
}
setMsg(L("set.importDone"));
setTimeout(() => { try { location.reload(); } catch (_) {} }, 400);
} catch (err) {
setMsg(importErrorText(String(err?.message || err)));
} finally {
setBusy(false);
}
};
const onOpenFolder = async () => {
setMsg("");
const r = await diary.actions.openDataStorageFolder();
if (r.ok) return;
if (r.hint) {
setMsg(L("set.storagePathHint") + " " + r.hint);
return;
}
setMsg(L("set.storageWebOnly"));
};
return (
<>
{L("set.backupCaption")}
{L("set.storagePath")}
{storageInfo?.label || "…"}
{L("set.storagePathHint")}
{storageInfo?.canOpen ? (
) : null}
{msg ?
{msg}
: null}
);
}
// ===========================================================
// 설정 — 탭 (기본 / 데이터 / 문의·버그 / 고급)
// ===========================================================
const SETTINGS_TAB_KEY = "todoary.settings.tab";
function settingsTabs() {
const tabs = [
["general", "set.tab.general"],
["data", "set.tab.data"],
["support", "set.tab.support"],
];
if (typeof window.RoomDevSandboxPanel === "function") {
tabs.push(["advanced", "set.tab.advanced"]);
}
return tabs;
}
function SettingsTabBar({ active, onChange }) {
const tabs = settingsTabs();
return (
{tabs.map(([id, labelKey]) => {
const on = active === id;
return (
);
})}
);
}
function SettingsGeneralPanel({ t, set, i18, langOpen, setLangOpen, currentLang }) {
const excelSkin = typeof window.isExcelSkin === "function" && window.isExcelSkin();
return (
<>
{langOpen && (
{i18.list().map(([code, name, short]) => {
const active = i18.get() === code;
return (
);
})}
)}
set("appSize", v)}
options={[["normal", L("set.sizeNormal")], ["medium", L("set.sizeMedium")], ["compact", L("set.sizeCompact")]]} />
set("dockSide", v)}
options={[["left", L("set.left")], ["right", L("set.right")]]} />
set("desktopMode", v === "on")}
options={[["on", L("set.on")], ["off", L("set.off")]]} />
{L("set.desktopHint")}
set("alwaysOnTop", v === "on")}
options={[["on", L("set.on")], ["off", L("set.off")]]} />
{L("set.alwaysOnTopHint")}
set("showRoomTab", v === "on")}
options={[["on", L("set.on")], ["off", L("set.off")]]} />
{L("set.roomTabHint")}
set("showPomodoro", v === "on")}
options={[["on", L("set.on")], ["off", L("set.off")]]} />
{L("set.pomodoroHint")}
{excelSkin && (
set("excelGridLines", v === "on")}
options={[["on", L("set.on")], ["off", L("set.off")]]} />
{L("set.excelGridHint")}
)}
{
if (v === "on") {
try {
const pos = window.todoarySaveNormalWindowPos && await window.todoarySaveNormalWindowPos();
set(pos
? { dockHidden: true, appPosX: pos.x, appPosY: pos.y, appPosPhysical: true }
: { dockHidden: true });
} catch (_) {
set("dockHidden", true);
}
} else {
set("dockHidden", false);
}
}}
options={[["on", L("set.on")], ["off", L("set.off")]]} />
{L("set.dockHideHint")}
set("tabsHidden", v === "on")}
options={[["on", L("set.on")], ["off", L("set.off")]]} />
{L("set.tabsAutoHideHint")}
);
}
function SettingsDataPanel() {
return (
<>
{L("set.resetCaption")}
);
}
function buildSupportDiag(version) {
const lines = [
`todoary ${version || "?"}`,
`ua: ${typeof navigator !== "undefined" ? navigator.userAgent.slice(0, 120) : ""}`,
`lang: ${typeof window.i18n !== "undefined" && window.i18n.get ? window.i18n.get() : ""}`,
];
try {
const diag = localStorage.getItem("todoary.migration.diag");
if (diag) lines.push(`migration.diag: ${diag}`);
const corrupt = localStorage.getItem("todoary.v1.corrupt.meta");
if (corrupt) lines.push(`corrupt.meta: ${corrupt}`);
const keys = Object.keys(localStorage).filter((k) => k.startsWith("todoary.") || k.startsWith("vibe-diary."));
lines.push(`storage keys (${keys.length}): ${keys.slice(0, 24).join(", ")}${keys.length > 24 ? "…" : ""}`);
} catch (_) {}
return lines.join("\n");
}
const SUPPORT_FORM_URL = "https://forms.gle/RVvqJ8t8NRYzneh99";
function openExternalLink(url) {
try {
const op = window.__TAURI__?.opener;
if (op?.openUrl) { op.openUrl(url); return; }
} catch (_) {}
try { window.open(url, "_blank"); } catch (_) {}
}
function SettingsSupportPanel() {
const [version, setVersion] = useState("…");
const [msg, setMsg] = useState("");
const [updateBusy, setUpdateBusy] = useState(false);
useEffect(() => {
let cancelled = false;
(async () => {
try {
const T = window.__TAURI__;
if (T?.app?.getVersion) {
const v = await T.app.getVersion();
if (!cancelled) setVersion(v);
return;
}
} catch (_) {}
if (!cancelled) setVersion("web");
})();
return () => { cancelled = true; };
}, []);
const onCopyDiag = async () => {
const text = buildSupportDiag(version);
try {
await navigator.clipboard.writeText(text);
setMsg(L("set.diagCopied"));
} catch (_) {
setMsg(text.slice(0, 200) + "…");
}
};
const onOpenForm = () => {
openExternalLink(SUPPORT_FORM_URL);
};
const onCheckUpdate = async () => {
if (!window.todoaryUpdater?.checkAndPrompt) {
setMsg(L("set.updateDesktopOnly"));
return;
}
setUpdateBusy(true);
setMsg("");
try {
const r = await window.todoaryUpdater.checkAndPrompt({ respectDefer: false });
if (r.error) setMsg(L("update.fail", { msg: r.error }));
else if (!r.available) setMsg(L("set.updateNone"));
else if (r.declined) setMsg(L("set.updateDeclined"));
else if (r.deferred) setMsg(L("set.updateDeferred"));
} catch (e) {
setMsg(L("update.fail", { msg: String(e?.message || e) }));
} finally {
setUpdateBusy(false);
}
};
const linkBtn = {
all: "unset", cursor: "pointer", display: "block", width: "100%",
textAlign: "left", padding: "7px 10px", borderRadius: 8,
border: "1px solid var(--ink-soft)", background: "rgba(255,255,255,0.55)",
fontFamily: "var(--hand)", fontSize: 13, color: "var(--ink)",
marginTop: 6,
};
return (
<>
v{version}
{L("set.aboutCaption")}
{L("set.updateHint")}
{L("set.bugReportCaption")}
{L("set.diagExplain")}
{msg ?
{msg}
: null}
);
}
function SettingsAdvancedPanel() {
const Panel = window.RoomDevSandboxPanel;
if (!Panel) return
{L("set.advancedEmpty")}
;
return (
);
}
function SettingsView({ tweaks, setTweak }) {
const t = tweaks || {};
const set = setTweak || (() => {});
const i18 = useI18n();
const excelSkin = typeof window.isExcelSkin === "function" && window.isExcelSkin();
const [langOpen, setLangOpen] = useState(false);
const [tab, setTab] = useState(() => {
try { return sessionStorage.getItem(SETTINGS_TAB_KEY) || "general"; } catch (_) { return "general"; }
});
const currentLang = i18.list().find(([code]) => code === i18.get()) || i18.list()[0];
const changeTab = (id) => {
setTab(id);
try { sessionStorage.setItem(SETTINGS_TAB_KEY, id); } catch (_) {}
};
const sheetPad = excelSkin ? "0" : "14px 16px";
return (
{tab === "general" && (
)}
{tab === "data" && }
{tab === "support" && }
{tab === "advanced" && }
);
}
// ===========================================================
// 꾸미기 — 테마 / 포인트 컬러 / 그라데이션 편집기 (다중 색 스탑)
// ===========================================================
const DECO_THEMES = [
{ nameKey: "th.basic", type: "linear", angle: 180, chrome: "#a9cdf5", stops: [{ c: "#a9cdf5", p: 0 }, { c: "#ffffff", p: 100 }] },
{ nameKey: "th.melon", type: "linear", angle: 180, chrome: "#9ef0c4", stops: [{ c: "#9ef0c4", p: 0 }, { c: "#d9f7ea", p: 50 }, { c: "#ffffff", p: 100 }] },
{ nameKey: "th.summer", type: "linear", angle: 180, chrome: "#7fd8f0", stops: [{ c: "#7fd8f0", p: 0 }, { c: "#bafff0", p: 40 }, { c: "#fff7c0", p: 100 }] },
{ nameKey: "th.green", type: "linear", angle: 180, chrome: "#bce98f", stops: [{ c: "#bce98f", p: 0 }, { c: "#e2f6cf", p: 55 }, { c: "#ffffff", p: 100 }] },
{ nameKey: "th.milk", type: "radial", angle: 180, chrome: "#ffb3c8", stops: [{ c: "#ffb3c8", p: 0 }, { c: "#ffe3ec", p: 55 }, { c: "#fff6f0", p: 100 }] },
{ nameKey: "th.peach", type: "linear", angle: 180, chrome: "#ffd9c2", stops: [{ c: "#ffd9c2", p: 0 }, { c: "#fff0e6", p: 55 }, { c: "#ffffff", p: 100 }] },
{ nameKey: "th.lavender", type: "radial", angle: 180, chrome: "#d8cdf5", stops: [{ c: "#d8cdf5", p: 0 }, { c: "#ece6fb", p: 55 }, { c: "#ffffff", p: 100 }] },
{ nameKey: "th.night", type: "linear", angle: 180, chrome: "#8aa0c8", stops: [{ c: "#3a4a6b", p: 0 }, { c: "#8aa0c8", p: 60 }, { c: "#e3eefc", p: 100 }] },
];
const DECO_PALETTE = [
"#a9cdf5", "#7fb5f0", "#5b8fd6", "#7fd8f0", "#5ec8e0", "#bafff0",
"#aef0c8", "#9ef0c4", "#bce98f", "#a3d977", "#fdff85", "#fff0a0",
"#ffe3a0", "#ffd3b6", "#ffb38a", "#ffb3c8", "#ff9bb3", "#ffc7d4",
"#f7a8c4", "#d8cdf5", "#b9a3e8", "#c8dffb", "#cfd6e0", "#9aa7b8",
"#3a4a6b", "#28333f", "#1c1c1c", "#ffffff",
];
const DECO_ACCENTS = ["#fdff85", "#ffc7d4", "#c5e8d4", "#c8dffb", "#d8cdf5", "#ffd3b6", "#bafff0", "#ffb38a"];
const DECO_DIRS = [["↖", 315], ["↑", 0], ["↗", 45], ["←", 270], ["↓", 180], ["→", 90], ["↙", 225], ["↘", 135]];
// ---- 저장된 테이프 테마 스냅샷 ----
function snapshotTapeThemeFromTweaks(t) {
const palette = (t.todoTapePalette && t.todoTapePalette.length)
? t.todoTapePalette
: DEFAULT_TODO_TAPE_PALETTE;
return {
palette: [...palette],
pattern: t.todoTapePattern ?? "dots",
pinColor: t.todoTapePinColor ?? DEFAULT_TODO_TAPE_PIN,
borderWidth: t.todoTapeBorderWidth ?? DEFAULT_TODO_TAPE_BORDER_WIDTH,
borderColor: t.todoTapeBorderColor ?? DEFAULT_TODO_TAPE_BORDER_COLOR,
edgeFade: t.todoTapeEdgeFade ?? DEFAULT_TODO_TAPE_EDGE_FADE,
patternColor: t.todoTapePatternColor ?? DEFAULT_TODO_TAPE_PATTERN_COLOR,
gradFrom: t.todoTapeGradFrom ?? DEFAULT_TODO_TAPE_GRAD_FROM,
gradTo: t.todoTapeGradTo ?? DEFAULT_TODO_TAPE_GRAD_TO,
};
}
function tapeThemeToTweakPatch(th) {
return {
todoTapePalette: [...(th.palette || DEFAULT_TODO_TAPE_PALETTE)],
todoTapePattern: th.pattern ?? "dots",
todoTapePinColor: th.pinColor ?? DEFAULT_TODO_TAPE_PIN,
todoTapeBorderWidth: th.borderWidth ?? DEFAULT_TODO_TAPE_BORDER_WIDTH,
todoTapeBorderColor: th.borderColor ?? DEFAULT_TODO_TAPE_BORDER_COLOR,
todoTapeEdgeFade: th.edgeFade ?? DEFAULT_TODO_TAPE_EDGE_FADE,
todoTapePatternColor: th.patternColor ?? DEFAULT_TODO_TAPE_PATTERN_COLOR,
todoTapeGradFrom: th.gradFrom ?? DEFAULT_TODO_TAPE_GRAD_FROM,
todoTapeGradTo: th.gradTo ?? DEFAULT_TODO_TAPE_GRAD_TO,
};
}
function DecorateView({ tweaks, setTweak }) {
const t = tweaks || {};
const set = setTweak || (() => {});
const bgType = t.bgType ?? "linear";
const bgAngle = t.bgAngle ?? 180;
const bgShape = t.bgShape ?? "none";
const stops = t.bgStops ?? [{ c: "#a9cdf5", p: 0 }, { c: "#ffffff", p: 100 }];
const previewBg = buildBackground(bgType, bgAngle, stops, bgShape);
const setStops = (next) => set("bgStops", next);
const updColor = (i, c) => setStops(stops.map((s, idx) => idx === i ? { ...s, c } : s));
const updPos = (i, p) => setStops(stops.map((s, idx) => idx === i ? { ...s, p } : s));
const addStop = () => { if (stops.length >= 4) return; const n = [...stops]; n.splice(n.length - 1, 0, { c: "#ffd3b6", p: 50 }); setStops(n); };
const removeStop = (i) => { if (stops.length <= 2) return; setStops(stops.filter((_, idx) => idx !== i)); };
const applyTheme = (th) => {
set("bgType", th.type); set("bgAngle", th.angle); set("bgStops", th.stops);
if (th.chrome) set("chromeColor", th.chrome);
if (th.accent) { set("tabAccent", th.accent); document.documentElement.style.setProperty("--hi", th.accent); }
};
useI18n();
const myThemes = t.myThemes ?? [];
const saveMyTheme = async () => {
const name = window.dialog
? await window.dialog.prompt(L("deco.saveName"), L("deco.myThemeName") + (myThemes.length + 1))
: prompt(L("deco.saveName"), L("deco.myThemeName") + (myThemes.length + 1));
if (!name?.trim()) return;
const cur = { name: name.trim(), type: bgType, angle: bgAngle, stops, chrome: t.chromeColor ?? "#a9cdf5", accent: t.tabAccent };
set("myThemes", [...myThemes, cur]);
};
const delMyTheme = (i) => set("myThemes", myThemes.filter((_, idx) => idx !== i));
const [sec, setSec] = useState("skin");
const [skinGallery, setSkinGallery] = useState(() =>
(window.SkinRuntime?.getGalleryEntries?.() || SKINS || []).map((sk) => ({
...sk,
previewColors: sk.preview || sk.previewColors,
}))
);
const [redeemSkinId, setRedeemSkinId] = useState(null);
React.useEffect(() => {
const rt = window.SkinRuntime;
if (!rt?.init) return;
rt.init().then(() => {
setSkinGallery(rt.getGalleryEntries());
}).catch(() => {});
}, []);
const activeSkin = t.appSkin ?? SKIN_DEFAULT_ID;
const applySkin = async (skinId) => {
const rt = window.SkinRuntime;
if (rt?.applySkinFull) {
try {
await rt.applySkinFull(skinId, set);
setRedeemSkinId(null);
return;
} catch (e) {
if (!rt.isUnlocked(skinId)) {
setRedeemSkinId(skinId);
return;
}
console.warn("[skin] apply", e);
}
}
const patch = getSkinPatch(skinId);
applySkinRuntime(patch);
set(patch);
};
const tapePalette = (t.todoTapePalette && t.todoTapePalette.length)
? t.todoTapePalette
: (DEFAULT_TODO_TAPE_PALETTE || []);
const tapePattern = t.todoTapePattern ?? "dots";
const tapePin = t.todoTapePinColor ?? (DEFAULT_TODO_TAPE_PIN || "#fff5b8");
const tapeBorderWidth = t.todoTapeBorderWidth ?? (DEFAULT_TODO_TAPE_BORDER_WIDTH ?? 0);
const tapeBorderColor = t.todoTapeBorderColor ?? (DEFAULT_TODO_TAPE_BORDER_COLOR || "var(--ink-soft)");
const tapeEdgeFade = t.todoTapeEdgeFade ?? (DEFAULT_TODO_TAPE_EDGE_FADE ?? true);
const tapePatternColor = t.todoTapePatternColor ?? (DEFAULT_TODO_TAPE_PATTERN_COLOR || "#ffffff");
const tapeGradFrom = t.todoTapeGradFrom ?? (DEFAULT_TODO_TAPE_GRAD_FROM || "#fff5f8");
const tapeGradTo = t.todoTapeGradTo ?? (DEFAULT_TODO_TAPE_GRAD_TO || "#ff9bb3");
const tapeGradPreview = buildTapePaletteGradient(tapeGradFrom, tapeGradTo, 12);
const setTapePalette = (next) => set("todoTapePalette", next);
const updTapeColor = (i, c) => setTapePalette(tapePalette.map((col, idx) => (idx === i ? c : col)));
const applyAllTapeColors = (c) => setTapePalette(tapePalette.map(() => c));
const applyTapeGradient = () => {
set("todoTapePalette", buildTapePaletteGradient(tapeGradFrom, tapeGradTo, 12));
};
const addTapeColor = () => {
if (tapePalette.length >= 12) return;
setTapePalette([...tapePalette, "#ffd3b6"]);
};
const removeTapeColor = (i) => {
if (tapePalette.length <= 2) return;
setTapePalette(tapePalette.filter((_, idx) => idx !== i));
};
const resetTape = () => {
set("todoTapePalette", [...(DEFAULT_TODO_TAPE_PALETTE || [])]);
set("todoTapePattern", "dots");
set("todoTapePinColor", DEFAULT_TODO_TAPE_PIN || "#fff5b8");
set("todoTapeBorderWidth", DEFAULT_TODO_TAPE_BORDER_WIDTH ?? 0);
set("todoTapeBorderColor", DEFAULT_TODO_TAPE_BORDER_COLOR || "var(--ink-soft)");
set("todoTapeEdgeFade", DEFAULT_TODO_TAPE_EDGE_FADE ?? true);
set("todoTapePatternColor", DEFAULT_TODO_TAPE_PATTERN_COLOR || "#ffffff");
set("todoTapeGradFrom", DEFAULT_TODO_TAPE_GRAD_FROM || "#fff5f8");
set("todoTapeGradTo", DEFAULT_TODO_TAPE_GRAD_TO || "#ff9bb3");
};
const tapeClass = todoTapeClassName(tapeEdgeFade);
const tapeStyleFor = (index, pinned) => buildTodoTapeStyle({
index, pinned, palette: tapePalette, pattern: tapePattern, patternColor: tapePatternColor,
pinColor: tapePin, borderColor: tapeBorderColor, borderWidth: tapeBorderWidth,
});
const myTapeThemes = t.myTapeThemes ?? [];
const saveMyTapeTheme = async () => {
const name = window.dialog
? await window.dialog.prompt(L("deco.saveName"), L("deco.myTapeThemeName") + (myTapeThemes.length + 1))
: prompt(L("deco.saveName"), L("deco.myTapeThemeName") + (myTapeThemes.length + 1));
if (!name?.trim()) return;
set("myTapeThemes", [...myTapeThemes, { name: name.trim(), ...snapshotTapeThemeFromTweaks(t) }]);
};
const applyTapeTheme = (th) => set(tapeThemeToTweakPatch(th));
const delMyTapeTheme = (i) => set("myTapeThemes", myTapeThemes.filter((_, idx) => idx !== i));
const tapeThemeBtn = (th, i) => (
);
const themeBtn = (th, i, mine) => (
{mine && (
)}
);
const excelSkin = typeof window.isExcelSkin === "function" && window.isExcelSkin();
return (
{/* 상단 세그먼트 */}
{/* ── 스킨 ── */}
{sec === "skin" && (
<>
{L("deco.skinHint")}
{(skinGallery.length ? skinGallery : SKINS).map((sk) => (
applySkin(sk.id)}
/>
))}
{redeemSkinId && window.SkinRuntime?.SkinLicenseRedeem
? React.createElement(window.SkinRuntime.SkinLicenseRedeem, {
skinId: redeemSkinId,
onDone: () => applySkin(redeemSkinId),
})
: null}
{activeSkin === "excel" ? (
1✓
{L("todo.excelColTitle")}
{L("todo.excelColSchedule")}
{L("todo.excelColTime")}
{[0, 1].map((i) => (
{i + 2}
{i === 0 ? L("deco.tapeSample") : L("deco.tapePinLabel")}
{i === 0 ? "06/13" : ""}
{i === 0 ? "–" : ""}
))}
) : (
{[0, 1].map((i) => (
{i === 0 ? L("deco.tapeSample") : L("deco.tapePinLabel")}
))}
)}
{/* ── 테마 ── */}
{sec === "theme" && (
<>
{DECO_THEMES.map((th, i) => themeBtn(th, th.nameKey, false))}
{myThemes.length > 0 && (
{myThemes.map((th, i) => themeBtn(th, i, true))}
)}
)}
{/* ── 배경 ── */}
{sec === "bg" && (
<>
set("bgType", v)} options={[["linear", L("deco.linear")], ["radial", L("deco.radial")]]} />
{[["none", "deco.shapeNone"], ["heart", "deco.shapeHeart"], ["hearts", "deco.shapeHearts"], ["stars", "deco.shapeStars"], ["clover", "deco.shapeClover"], ["ribbon", "deco.shapeRibbon"], ["fish", "deco.shapeFish"]].map(([v, k]) => (
))}
{bgShape === "none" && bgType === "linear" && (
{DECO_DIRS.map(([a, ang]) => (
))}
)}
{stops.map((s, i) => (
updColor(i, c)} onPos={p => updPos(i, p)}
onRemove={() => removeStop(i)} canRemove={stops.length > 2} />
))}
{stops.length < 4 && (
)}
)}
{/* ── 색상 ── */}
{sec === "color" && (
<>
{DECO_ACCENTS.map(c => (
{DECO_PALETTE.map(c => (
set("chromeGradient", v === "on")}
options={[["on", L("set.on")], ["off", L("set.off")]]} />
)}
{/* ── 할일 테이프 ── */}
{sec === "tape" && (
<>
set("todoTapePinColor", c)}
onPickAllPalette={applyAllTapeColors}
onRemovePalette={removeTapeColor}
onAddPalette={addTapeColor}
onReset={resetTape}
/>
{L("deco.tapeGradientHint")}
{L("deco.tapeGradLight")}
{["#fff5f8", "#fffbd1", "#e9f8d8", "#ffffff"].map((c) => (
→
{L("deco.tapeGradDark")}
{["#ff9bb3", "#ffb38a", "#d8cdf5", "#5b8fd6"].map((c) => (
{tapeGradPreview.map((c, i) => (
))}
{[["dots", "deco.tapePatternDots"], ["diag", "deco.tapePatternDiag"], ["gingham", "deco.tapePatternGingham"], ["none", "deco.tapePatternNone"]].map(([v, k]) => (
))}
{tapePattern !== "none" && (
{L("deco.tapePatternColor")}
{["#ffffff", "#fdff85", "#ffc7d4", "#c8dffb", "#28333f"].map((c) => (
)}
0 ? 8 : 0 }}>
{[
[0, "deco.tapeBorderNone"],
[0.8, "deco.tapeBorderNormal"],
[1.2, "deco.tapeBorderBold"],
].map(([w, k]) => (
))}
{tapeBorderWidth > 0 && (
{[
["var(--ink-soft)", L("deco.tapeBorderSoft")],
["var(--ink)", L("deco.tapeBorderInk")],
].map(([c, lbl]) => (
)}
{myTapeThemes.length > 0 && (
{myTapeThemes.map((th, i) => tapeThemeBtn(th, i))}
)}
)}
);
}
// 꾸미기 — 할일 테이프 미리보기 (탭 클릭으로 색 편집)
function TapePreviewEditor({
palette, pinColor, tapeClass, tapeStyleFor, decoPalette,
onPickPalette, onPickPin, onPickAllPalette, onRemovePalette, onAddPalette, onReset,
}) {
const [picker, setPicker] = useState(null);
const [batchMode, setBatchMode] = useState(false);
const [resetAsk, setResetAsk] = useState(false);
const confirmBtn = (accent) => ({
all: "unset", cursor: "pointer", flex: 1, textAlign: "center",
padding: "6px 8px", borderRadius: 8,
border: "1.1px solid var(--ink)",
background: accent ? "linear-gradient(180deg, var(--point-soft), var(--point))" : "var(--paper)",
fontFamily: "var(--hand)", fontSize: 12, fontWeight: accent ? 700 : 400, color: "var(--ink)",
});
const pickerColor = picker?.kind === "pin"
? pinColor
: (picker?.kind === "palette" ? palette[picker.index] : "#ffd3b6");
const canBatch = picker?.kind === "palette";
const applyColor = (c) => {
if (batchMode && canBatch) onPickAllPalette(c);
else if (picker?.kind === "pin") onPickPin(c);
else if (picker?.kind === "palette") onPickPalette(picker.index, c);
};
const stripBtn = {
all: "unset", cursor: "pointer", width: "100%", textAlign: "left", position: "relative",
};
const stripStyle = (active, tapeStyle) => ({
height: 24,
borderRadius: 2,
display: "flex",
alignItems: "center",
padding: "0 8px",
boxSizing: "border-box",
outline: active ? "2px solid var(--point)" : "none",
outlineOffset: 0,
...tapeStyle,
});
return (
{L("deco.tapePreviewHint")}
{palette.map((c, i) => {
const active = picker?.kind === "palette" && picker.index === i;
return (
{palette.length > 2 && (
)}
);
})}
{picker && (
{canBatch && (
setBatchMode(v === "all")}
options={[["one", L("deco.tapePickOne")], ["all", L("deco.tapePickAll")]]}
/>
)}
)}
{palette.length < 12 && (
)}
{resetAsk ? (
{L("deco.tapeResetConfirm")}
) : (
)}
);
}
function TapeColorPopover({ color, decoPalette, onPick }) {
return (
{decoPalette.map((col) => (
);
}
// 꾸미기 상단 세그먼트 (테마 / 배경 / 색상 / 테이프)
function SegTabs({ value, onChange, options }) {
const tabCls = (typeof window.isExcelSkin === "function" && window.isExcelSkin()) ? "excel-seg-tabs" : "";
return (
{options.map(([v, lbl]) => (
))}
);
}
function StopRow({ stop, palette, onColor, onPos, onRemove, canRemove }) {
const [open, setOpen] = useState(false);
return (
{open && (
{palette.map(c => (
)}
);
}
// 직접 색 선택 (네이티브 컬러 피커)
function ColorPick({ value, onChange, round }) {
return (
);
}
function SetSection({ label, children }) {
return (
);
}
function SetSeg({ value, onChange, options }) {
const segCls = (typeof window.isExcelSkin === "function" && window.isExcelSkin()) ? "excel-set-seg" : "";
return (
{options.map(([v, lbl], i) => (
))}
);
}
// ===========================================================
// 키보드형 입력창 — 탭 맥락에 맞춰 빠르게 추가
// ===========================================================
function KeyboardInput({ active }) {
useI18n();
const { state, actions } = diary.useDiary();
const [v, setV] = useState("");
const CFG = {
todo: { ph: L("kbd.todoPh"), add: (t) => actions.addTodo(t) },
memo: { ph: L("kbd.memoPh"), add: (t) => actions.addMemo({ body: t }) },
mail: { ph: L("kbd.mailPh"), add: (t) => actions.addInquiry({ subject: t.split("\n")[0].slice(0, 60), body: t }) },
cal: { ph: L("kbd.calPh"), add: (t) => actions.appendNote(state.selectedDate || diary.today(), t) },
};
const cfg = CFG[active] || CFG.todo;
const submit = () => {
const t = v.trim();
if (!t) return;
cfg.add(t);
setV("");
};
const onKey = (e) => {
if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); submit(); }
};
return (