careermate 0.0.9 → 0.0.12

package/dist/public/pages/jobs.js

@@ -314,11 +314,11 @@ async function renderDetail(ctx, jobId) {
   ]);
 
   // --- Page head ------------------------------------------------------------
-  // 수정은 상단바(ctx.setActions)에만 둔다 — 여기엔 상태 변경·원문·삭제만.
+  // 수정은 상단바(ctx.setActions)에만 둔다 — 여기엔 상태 변경·원문만.
+  // 삭제는 위험 액션이라 페이지 최하단 '위험 구역'으로 강등한다(아래 DangerZone).
   const headActions = el('div', { class: 'flex gap-2 center wrap' },
     statusSelect,
     job.url ? el('a', { class: 'btn btn--ghost btn--sm', href: job.url, attrs: { target: '_blank', rel: 'noopener noreferrer' } }, icon('external'), el('span', {}, t('jobs.detail.openPosting'))) : null,
-    delBtn,
   );
 
   const head = el('div', { class: 'page-head' },
@@ -344,10 +344,23 @@ async function renderDetail(ctx, jobId) {
     FitCard(job.fit),
     TimelineCard(job.timeline),
     RelatedCard(job.related),
+    DangerZone(delBtn),
   );
   mount(ctx.view, wrap);
 }
 
+// Delete is destructive, so it sits at the very bottom in a quiet 위험 구역 row
+// (not a card, per the design guide) instead of competing in the top-right header.
+function DangerZone(delBtn) {
+  return el('div', { class: 'stack-2', style: { marginTop: '8px' } },
+    el('div', { class: 'divider' }),
+    el('div', { class: 'flex between center wrap gap-3' },
+      el('div', { style: { maxWidth: '440px' } },
+        el('div', { class: 'strong text-sm' }, t('jobs.detail.dangerZone')),
+        el('div', { class: 'muted text-sm', style: { lineHeight: '1.6' } }, t('jobs.detail.dangerZoneHint'))),
+      delBtn));
+}
+
 /* ----------------------------------------------------------- detail cards */
 
 function PostingCard(job) {
@@ -534,7 +547,12 @@ function CoverLettersCard(coverLetters) {
           icon('file', 'muted'),
           el('div', {},
             el('div', { class: 'strong' }, cl.title),
-            el('div', { class: 'muted text-sm' }, t('jobs.cover.versions', { count: cl.version_count ?? 1 })))),
+            // Preview line: version count + last-updated date so the row isn't a bare
+            // title. (The latest version's note isn't in this response — listByJob maps
+            // without versions — so we fall back to the date per the design.)
+            el('div', { class: 'muted text-sm' },
+              t('jobs.cover.versions', { count: cl.version_count ?? 1 }),
+              cl.updated_at ? ` · ${fmtDate(cl.updated_at)}` : ''))),
         icon('chevronRight', 'muted')))),
   });
 }

package/dist/public/pages/settings.js

@@ -30,12 +30,16 @@ export async function render(ctx) {
 }
 
 /* ----------------------------------------------------- 데이터 저장 위치 */
-function kvRow(label, value, copyable) {
+function kvRow(label, value, copyable, { wrapValue = false } = {}) {
   return [
     el('dt', {}, label),
     el('dd', {},
       el('div', { class: 'flex between gap-3' },
-        el('span', { class: 'truncate tnum', style: { fontFamily: 'var(--mono, ui-monospace, monospace)' }, title: value }, value || '—'),
+        el('span', {
+          class: `${wrapValue ? 'kv__value-wrap' : 'truncate'} tnum`,
+          style: { fontFamily: 'var(--mono, ui-monospace, monospace)' },
+          title: value,
+        }, value || '—'),
         copyable && value
           ? IconBtn('copy', { title: t('settings.copy'), onClick: () => copyText(value) })
           : null)),
@@ -70,9 +74,9 @@ function Connection(info) {
   async function createShortcut() {
     try {
       const { shortcut } = await post('/api/settings/dashboard-shortcut', { open: true });
-      toastOk(isDemo ? t('settings.connection.shortcutDemoToast') : t('settings.connection.shortcutToast'));
       openModal({
         title: isDemo ? t('settings.connection.shortcutDemoTitle') : t('settings.connection.shortcutTitle'),
+        intent: 'contextual',
         body: el('div', { class: 'stack-3' },
           el('div', { class: 'callout' },
             icon('info'),
@@ -83,11 +87,11 @@ function Connection(info) {
                   ? t('settings.connection.shortcutDemoCalloutBody')
                   : t('settings.connection.shortcutCalloutBody')))),
           el('dl', { class: 'kv' },
-            ...kvRow(t('settings.connection.shortcutFolder'), shortcut.shortcut_dir, true),
-            ...kvRow(t('settings.connection.shortcutLauncher'), shortcut.launcher_path, true))),
+            ...kvRow(t('settings.connection.shortcutFolder'), shortcut.shortcut_dir, true, { wrapValue: true }),
+            ...kvRow(t('settings.connection.shortcutLauncher'), shortcut.launcher_path, true, { wrapValue: true }))),
         footer: (close) => [
-          Btn(t('settings.copyPath'), { icon: 'copy', onClick: () => copyText(shortcut.launcher_path) }),
-          Btn(t('settings.confirm'), { variant: 'primary', onClick: close }),
+          Btn(t('settings.copyPath'), { icon: 'copy', variant: 'primary', onClick: () => copyText(shortcut.launcher_path) }),
+          Btn(t('common.close'), { variant: 'ghost', onClick: close }),
         ],
       });
     } catch (e) {
@@ -360,6 +364,7 @@ function openImportModal({ fileName, backup, preview, rerender }) {
   openModal({
     title: t('settings.import.title'),
     size: 'lg',
+    intent: 'alert',
     body: el('div', { class: 'stack-3' },
       el('div', { class: 'callout' },
         icon('info'),
@@ -409,15 +414,10 @@ function openImportModal({ fileName, backup, preview, rerender }) {
 /* -------------------------------------------------- 위험 구역 (Danger zone) */
 /* ----------------------------------------------------- 도움말 · 문제 신고 */
 function Support() {
-  const ext = (href, iconName, label) =>
-    el('a', { class: 'btn btn--ghost btn--sm', href, attrs: { target: '_blank', rel: 'noopener noreferrer' } },
-      icon(iconName), el('span', {}, label));
   return Card({
     title: t('settings.support.title'),
     sub: t('settings.support.sub'),
     body: el('div', { class: 'flex gap-2 wrap' },
-      ext('https://github.com/osntak/careermate/issues/new?template=bug_report.yml', 'external', t('settings.support.report')),
-      ext('https://github.com/osntak/careermate/discussions', 'external', t('settings.support.ask')),
       el('a', { class: 'btn btn--ghost btn--sm', href: 'mailto:osntak@gmail.com' }, icon('mail'), el('span', {}, t('settings.support.email'))),
     ),
   });
@@ -437,6 +437,7 @@ function DangerZone(ctx) {
 
     openModal({
       title: t('settings.reset.title'),
+      intent: 'alert',
       body: el('div', { class: 'stack-3' },
         el('div', { class: 'callout' },
           icon('info'),

package/dist/public/styles.css

@@ -406,6 +406,10 @@ h1,h2,h3,h4 { margin: 0; font-weight: 650; letter-spacing: -0.01em; }
 .list-row:focus-within .row-action { opacity: 1; pointer-events: auto; }
 @media (hover: none) { .list-row .row-action { opacity: 1; pointer-events: auto; } }
 
+/* Home's "next action" lane is scanned repeatedly on mobile, so keep it tighter
+   than generic cards while preserving the shared ListRow structure. */
+.home-action-card .list-row__trail .badge { max-width: 116px; overflow: hidden; text-overflow: ellipsis; }
+
 /* ----------------------------------------------------------------- pipeline bar + funnel
    Visualizes the application status_breakdown. Segment color == badge--{status} hue,
    so a colour means the same stage everywhere (board, badges, here). */
@@ -419,6 +423,9 @@ h1,h2,h3,h4 { margin: 0; font-weight: 650; letter-spacing: -0.01em; }
 .pipefunnel__value { font-size: 24px; font-weight: 700; letter-spacing: -.02em; margin-top: 5px; line-height: 1.1; }
 .pipefunnel__conv { font-size: 12px; color: var(--text-tertiary); margin-top: 2px; }
 @media (max-width: 560px){ .pipefunnel { grid-template-columns: repeat(2, 1fr); } }
+/* Home KPI tiles (the only .grid--4) read better as a 2×2 on phones than a single
+   full-width column; overrides the ≤900px collapse for this narrow range. */
+@media (max-width: 560px){ .grid--4 { grid-template-columns: repeat(2, 1fr); } }
 
 /* ----------------------------------------------------------------- check row (onboarding)
    The ONE place setup guidance lives. Outcome rows auto-detect completion. */
@@ -464,6 +471,7 @@ h1,h2,h3,h4 { margin: 0; font-weight: 650; letter-spacing: -0.01em; }
 /* min-width:0 overrides a grid item's default min-width:auto so the 1fr column
    can shrink below its content — otherwise a long path/value overflows the grid. */
 .kv dd { margin: 0; min-width: 0; }
+.kv__value-wrap { min-width: 0; white-space: normal; word-break: keep-all; overflow-wrap: anywhere; line-height: 1.5; }
 .settings-action-row { align-items: flex-start; min-width: 0; }
 .settings-action-row__main { flex: 1 1 auto; min-width: 0; }
 .settings-action-row__main > div:last-child { min-width: 0; }
@@ -473,10 +481,13 @@ h1,h2,h3,h4 { margin: 0; font-weight: 650; letter-spacing: -0.01em; }
 .modal-root { position: fixed; inset: 0; z-index: 60; display: none; }
 .modal-root.is-open { display: block; }
 .modal__scrim { position: absolute; inset: 0; background: rgba(16,16,20,.42); backdrop-filter: blur(2px); animation: fade .15s; }
+.modal-root[data-intent="contextual"] .modal__scrim { background: rgba(16,16,20,.22); backdrop-filter: blur(1px); }
+.modal-root[data-intent="alert"] .modal__scrim { background: rgba(16,16,20,.52); }
 .modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: min(640px, calc(100vw - 32px));
   max-height: calc(100vh - 48px); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
   box-shadow: var(--shadow-lg); display: flex; flex-direction: column; animation: pop .16s ease; }
 .modal--lg { width: min(880px, calc(100vw - 32px)); }
+.modal--alert { width: min(520px, calc(100vw - 32px)); }
 .modal__head { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; }
 .modal__head h3 { font-size: 15px; }
 .modal__body { padding: 20px; overflow-y: auto; }
@@ -485,6 +496,7 @@ h1,h2,h3,h4 { margin: 0; font-weight: 650; letter-spacing: -0.01em; }
 .modal__error[hidden] { display: none; }
 .modal__foot { padding: 14px 20px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; }
 @keyframes pop { from { transform: translate(-50%,-46%); opacity: 0; } to { transform: translate(-50%,-50%); opacity: 1; } }
+@keyframes sheetup { from { transform: translateY(18px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
 @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
 
 /* Dropdown menu (Menu/ExportMenu) — fixed popover anchored to its trigger so it
@@ -504,6 +516,7 @@ h1,h2,h3,h4 { margin: 0; font-weight: 650; letter-spacing: -0.01em; }
 
 /* ----------------------------------------------------------------- toast */
 .toasts { position: fixed; bottom: 20px; right: 20px; z-index: 80; display: flex; flex-direction: column; gap: 10px; }
+body[data-modal-intent] .toasts { top: 20px; bottom: auto; }
 .toast { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius);
   box-shadow: var(--shadow-md); padding: 12px 16px; min-width: 260px; max-width: 380px; animation: slidein .2s ease; font-size: 14px; }
 .toast--success { border-left-color: var(--green); }
@@ -575,7 +588,27 @@ h1,h2,h3,h4 { margin: 0; font-weight: 650; letter-spacing: -0.01em; }
   .settings-action-row > .btn{ width: 100%; justify-content: center; }
   .card__head{ align-items: flex-start; flex-wrap: wrap; }
   .card__head .right{ margin-left: 0; width: 100%; justify-content: flex-start; }
+  .home-action-card .card__head{ align-items: center; flex-wrap: nowrap; padding: 12px 14px; }
+  .home-action-card .card__head .right{ margin-left: auto; width: auto; justify-content: flex-end; }
+  .home-action-card .card__body{ padding: 8px 14px; }
+  .home-action-card .list-row{ gap: 10px; padding: 8px 0; }
+  .home-action-card .list-row__trail{ gap: 6px; }
   .page-head{ flex-wrap: wrap; }
+  .modal-root[data-intent="contextual"] .modal{
+    top: auto; left: 0; right: 0; bottom: 0; transform: none; width: 100%;
+    max-height: min(86vh, calc(100vh - 24px)); border-radius: var(--radius-lg) var(--radius-lg) 0 0;
+    border-bottom: 0; animation: sheetup .16s ease;
+  }
+  .modal-root[data-intent="contextual"] .modal__foot{ justify-content: stretch; }
+  .modal-root[data-intent="contextual"] .modal__foot .btn{ flex: 1 1 auto; justify-content: center; }
+  .modal__foot{
+    justify-content: stretch; flex-wrap: wrap;
+    padding-bottom: max(14px, env(safe-area-inset-bottom));
+  }
+  .modal__foot .btn{ flex: 1 1 0; min-width: 0; min-height: 44px; justify-content: center; }
+  .toasts{ left: 16px; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); }
+  body[data-modal-intent] .toasts{ top: calc(var(--topbar-h) + 16px); bottom: auto; }
+  .toast{ width: 100%; min-width: 0; max-width: none; }
 }
 
 /* ---------- reduced motion ----------