careermate 0.1.0 → 0.1.2

package/dist/public/pages/documents.js

@@ -1,7 +1,7 @@
 // Documents — cover letters (with version history) and résumés/other documents.
 // XSS-safe: all DB/user text rendered via el() textContent / .doc-preview (never innerHTML).
 import {
-  el, get, post, put, del, Card, Badge, Btn, IconBtn, EmptyState,
+  el, get, post, put, del, Card, Badge, Btn, IconBtn, SubmitBtn, EmptyState,
   Field, Input, Textarea, Select, openModal, confirmDialog,
   toastOk, toastError, copyText, downloadUrl, fmtRelative, mount, meta,
 } from '/lib.js';
@@ -9,7 +9,10 @@ import {
 const SOURCE_LABELS = { manual: '직접 입력', upload: '파일 업로드', ai: 'AI 생성', edit: '직접 수정' };
 const sourceLabel = (s) => SOURCE_LABELS[s] || s || '';
 
-let tab = 'cover'; // 'cover' | 'docs'
+// Module-scoped on purpose: remember the last-viewed tab ('cover' | 'docs') across
+// navigations so returning to Documents reopens where the user left off. The search
+// query is intentionally NOT persisted (it resets per visit).
+let tab = 'cover';
 
 export async function render(ctx) {
   const root = el('div', { class: 'stack-4' });
@@ -101,7 +104,7 @@ async function CoverLettersTab(reload) {
 function CoverRow(cl, reload) {
   const metaRow = el('div', { class: 'flex gap-2 wrap', style: { marginTop: '4px' } },
     el('span', { class: 'chip' }, `버전 ${cl.version_count}개`),
-    cl.is_primary ? Badge('final_passed', '대표') : null,
+    cl.is_primary ? Badge('accent', '대표') : null,
   );
 
   const actions = el('div', { class: 'flex gap-2 wrap' },
@@ -129,7 +132,7 @@ function CoverRow(cl, reload) {
 async function setPrimaryCover(id, reload) {
   try {
     await put(`/api/cover-letters/${id}/primary`, {});
-    toastOk('대표 자기소개서로 지정했습니다.');
+    toastOk('대표 자기소개서로 지정했어요.');
     await reload();
   } catch (err) { toastError(err); }
 }
@@ -143,45 +146,56 @@ async function removeCover(cl, reload) {
   if (!ok) return;
   try {
     await del(`/api/cover-letters/${cl.id}`);
-    toastOk('자기소개서를 삭제했습니다.');
+    toastOk('자기소개서를 삭제했어요.');
     await reload();
   } catch (err) { toastError(err); }
 }
 
-function openCoverCreate(reload) {
+async function openCoverCreate(reload) {
+  // Let the user PICK the job to link instead of typing an internal ID they've never seen.
+  let jobs = [];
+  try { ({ jobs } = await get('/api/jobs')); } catch { /* dropdown falls back to "연결 안 함" */ }
   const title = Input({ placeholder: '예: 백엔드 개발자 자기소개서', attrs: { maxlength: '200' } });
   const content = Textarea({ placeholder: '내용을 붙여넣으세요. 비워 두면 빈 자기소개서가 만들어집니다.', style: { minHeight: '200px' } });
-  const jobId = Input({ placeholder: '연결할 공고 ID (선택)' });
+  const jobPick = Select([
+    { value: '', label: '연결 안 함', selected: true },
+    ...jobs.map((j) => ({ value: j.id, label: `${j.company} · ${j.position}` })),
+  ]);
 
   openModal({
     title: '새 자기소개서',
     size: 'lg',
     body: el('div', { class: 'stack-3' },
       Field('제목 (필수)', title),
-      Field('내용 (선택)', content, '내용을 입력하면 v1 버전으로 저장됩니다.'),
-      Field('공고 ID (선택)', jobId, '특정 공고에 연결하려면 입력하세요.'),
+      Field('내용 (선택)', content, '내용을 입력하면 첫 버전으로 저장됩니다.'),
+      Field('연결할 공고 (선택)', jobPick,
+        jobs.length ? '특정 공고에 연결하면 그 공고 화면에서 함께 보여요.' : '저장된 공고가 아직 없어요.'),
     ),
     footer: (close) => [
       Btn('취소', { onClick: close }),
-      Btn('자기소개서 저장', { variant: 'primary', onClick: async () => {
+      SubmitBtn('자기소개서 저장', async () => {
         const t = title.value.trim();
-        if (!t) { toastError(new Error('제목을 입력해 주세요.')); title.focus(); return; }
-        try {
-          const body = { title: t, source: 'manual' };
-          if (content.value.trim()) body.content = content.value;
-          if (jobId.value.trim()) body.job_id = jobId.value.trim();
-          await post('/api/cover-letters', body);
-          toastOk('자기소개서를 추가했습니다.');
-          close();
-          await reload();
-        } catch (err) { toastError(err); }
-      } }),
+        if (!t) { title.focus(); throw new Error('제목을 입력해 주세요.'); }
+        const body = { title: t, source: 'manual' };
+        if (content.value.trim()) body.content = content.value;
+        if (jobPick.value) body.job_id = jobPick.value;
+        await post('/api/cover-letters', body);
+        toastOk('자기소개서를 추가했어요.');
+        close();
+        await reload();
+      }),
     ],
   });
 }
 
 async function openCoverDetail(id, reload) {
-  let data = (await get(`/api/cover-letters/${id}`)).cover_letter;
+  let data;
+  try {
+    data = (await get(`/api/cover-letters/${id}`)).cover_letter;
+  } catch (err) {
+    toastError(err);
+    return;
+  }
 
   openModal({
     title: data.title,
@@ -210,7 +224,7 @@ function CoverDetailBody(cl, { refresh }) {
   wrap.append(el('div', { class: 'flex between wrap gap-2' },
     el('div', { class: 'flex gap-2 wrap' },
       el('span', { class: 'chip' }, `버전 ${cl.version_count}개`),
-      cl.is_primary ? Badge('final_passed', '대표') : null,
+      cl.is_primary ? Badge('accent', '대표') : null,
     ),
     el('div', { class: 'flex gap-2 wrap' },
       Btn('MD 내보내기', { sm: true, variant: 'ghost', icon: 'download', onClick: () => downloadUrl(`/api/export/cover-letter/${cl.id}?format=md`) }),
@@ -277,7 +291,7 @@ function VersionItem(cl, v, { isCurrent, setPreview, refresh }) {
 async function makeCurrent(id, versionId, refresh) {
   try {
     await put(`/api/cover-letters/${id}/current-version`, { version_id: versionId });
-    toastOk('현재 버전을 변경했습니다.');
+    toastOk('현재 버전을 변경했어요.');
     await refresh();
   } catch (err) { toastError(err); }
 }
@@ -292,16 +306,14 @@ function EditNewVersion(cl, refresh) {
     Field('내용', content),
     Field('변경 메모 (선택)', note),
     el('div', { class: 'flex gap-2' },
-      Btn('새 버전으로 저장', { variant: 'primary', icon: 'check', onClick: async () => {
-        if (!content.value.trim()) { toastError(new Error('내용을 입력해 주세요.')); content.focus(); return; }
-        try {
-          await post(`/api/cover-letters/${cl.id}/versions`, {
-            content: content.value, note: note.value.trim() || undefined, source: 'edit',
-          });
-          toastOk('새 버전을 저장했습니다.');
-          await refresh();
-        } catch (err) { toastError(err); }
-      } }),
+      SubmitBtn('새 버전으로 저장', async () => {
+        if (!content.value.trim()) { content.focus(); throw new Error('내용을 입력해 주세요.'); }
+        await post(`/api/cover-letters/${cl.id}/versions`, {
+          content: content.value, note: note.value.trim() || undefined, source: 'edit',
+        });
+        toastOk('새 버전을 저장했어요.');
+        await refresh();
+      }, { icon: 'check' }),
       Btn('취소', { variant: 'ghost', onClick: () => { editor.style.display = 'none'; toggle.style.display = ''; } }),
     ),
   );
@@ -344,7 +356,7 @@ function DocRow(doc, kindLabels, m, reload) {
     el('div', { class: 'flex gap-2 wrap center' },
       el('span', { class: 'strong' }, doc.title),
       el('span', { class: 'chip' }, kindLabels[doc.kind] || doc.kind),
-      doc.is_primary ? Badge('final_passed', '대표') : null,
+      doc.is_primary ? Badge('accent', '대표') : null,
     ),
     el('span', { class: 'muted text-sm' }, fmtRelative(doc.updated_at)),
   );
@@ -363,7 +375,13 @@ function DocRow(doc, kindLabels, m, reload) {
 }
 
 async function openDocDetail(id, kindLabels, m, reload) {
-  const doc = (await get(`/api/documents/${id}`)).document;
+  let doc;
+  try {
+    doc = (await get(`/api/documents/${id}`)).document;
+  } catch (err) {
+    toastError(err);
+    return;
+  }
 
   openModal({
     title: doc.title,
@@ -371,7 +389,7 @@ async function openDocDetail(id, kindLabels, m, reload) {
     body: el('div', { class: 'stack-3' },
       el('div', { class: 'flex gap-2 wrap center' },
         el('span', { class: 'chip' }, kindLabels[doc.kind] || doc.kind),
-        doc.is_primary ? Badge('final_passed', '대표') : null,
+        doc.is_primary ? Badge('accent', '대표') : null,
         el('span', { class: 'chip' }, sourceLabel(doc.source)),
         el('span', { class: 'muted text-sm' }, `수정 ${fmtRelative(doc.updated_at)}`),
       ),
@@ -383,7 +401,7 @@ async function openDocDetail(id, kindLabels, m, reload) {
       Btn('삭제', { variant: 'danger', icon: 'trash', onClick: async () => {
         const ok = await confirmDialog({ title: '문서 삭제', message: `"${doc.title}"을(를) 삭제할까요?`, confirmLabel: '삭제', danger: true });
         if (!ok) return;
-        try { await del(`/api/documents/${doc.id}`); toastOk('문서를 삭제했습니다.'); close(); await reload(); }
+        try { await del(`/api/documents/${doc.id}`); toastOk('문서를 삭제했어요.'); close(); await reload(); }
         catch (err) { toastError(err); }
       } }),
       Btn('수정', { variant: 'primary', icon: 'edit', onClick: () => { close(); openDocEdit(doc, m, reload); } }),
@@ -392,7 +410,7 @@ async function openDocDetail(id, kindLabels, m, reload) {
 }
 
 function openDocCreate(reload) {
-  meta().then((m) => docForm(null, m, reload));
+  meta().then((m) => docForm(null, m, reload)).catch(toastError);
 }
 
 function openDocEdit(doc, m, reload) {
@@ -418,19 +436,17 @@ function docForm(doc, m, reload) {
     ),
     footer: (close) => [
       Btn('취소', { onClick: close }),
-      Btn('문서 저장', { variant: 'primary', onClick: async () => {
+      SubmitBtn('문서 저장', async () => {
         const t = title.value.trim();
-        if (!t) { toastError(new Error('제목을 입력해 주세요.')); title.focus(); return; }
-        if (!content.value.trim()) { toastError(new Error('내용을 입력해 주세요.')); content.focus(); return; }
+        if (!t) { title.focus(); throw new Error('제목을 입력해 주세요.'); }
+        if (!content.value.trim()) { content.focus(); throw new Error('내용을 입력해 주세요.'); }
         const body = { kind: kind.value, title: t, content: content.value, is_primary: primary.checked };
-        try {
-          if (doc) await put(`/api/documents/${doc.id}`, body);
-          else await post('/api/documents', { ...body, source: 'manual' });
-          toastOk(doc ? '문서를 수정했습니다.' : '문서를 추가했습니다.');
-          close();
-          await reload();
-        } catch (err) { toastError(err); }
-      } }),
+        if (doc) await put(`/api/documents/${doc.id}`, body);
+        else await post('/api/documents', { ...body, source: 'manual' });
+        toastOk(doc ? '문서를 수정했어요.' : '문서를 추가했어요.');
+        close();
+        await reload();
+      }),
     ],
   });
 }

package/dist/public/pages/home.js

@@ -5,16 +5,9 @@
 // the same "AI에게 보내면 저장됩니다" instruction across surfaces.
 import {
   el, get, icon, navigate, Card, Badge, Btn, EmptyState, ListRow, CheckRow,
-  Stat, PageHead, fmtDate, fmtRelative, scoreClass, mount,
+  Stat, PageHead, fmtDate, fmtRelative, scoreClass, STATUS_COLOR, statusColor, mount,
 } from '/lib.js';
 
-// status code → saturated theme colour. MUST track the badge--{status} hues so a
-// colour means the same stage in the pipeline bar, the badges, and the board.
-const STATUS_COLOR = {
-  draft: 'var(--slate)', planned: 'var(--blue)', applied: 'var(--violet)',
-  document_passed: 'var(--teal)', interview: 'var(--amber)',
-  final_passed: 'var(--green)', on_hold: 'var(--slate)', rejected: 'var(--red)',
-};
 const PIPE_ORDER = ['draft', 'planned', 'applied', 'document_passed', 'interview', 'final_passed', 'on_hold', 'rejected'];
 
 // activity type → icon + theme hue (soft tinted chip + coloured stroke)
@@ -84,6 +77,15 @@ function GettingStarted(o) {
     title: '시작하기',
     sub: `프로필 완성도 ${o.profile_completeness}%`,
     body: [
+      // The one place (per DESIGN_GUIDE rule 4) that teaches the core mental model:
+      // CareerMate stores; your own AI does the thinking. Without this, first-run users
+      // read the empty dashboard as a manual CRUD form and never find the real workflow.
+      el('div', { class: 'callout mb-3' },
+        icon('info'),
+        el('div', {},
+          el('div', { class: 'callout__title' }, '두뇌는 당신의 AI, 보관은 CareerMate'),
+          el('div', { class: 'callout__body' },
+            '공고 분석·자기소개서·면접 준비는 평소 쓰던 AI에게 말로 시키면, 결과가 이 대시보드에 쌓여요.'))),
       el('div', { class: 'progress' }, el('div', { class: 'progress__bar', style: { width: `${o.profile_completeness}%` } })),
       el('p', { class: 'text-secondary text-sm', style: { margin: '12px 0 8px' } },
         '완성할수록 AI의 적합도 분석과 자기소개서 품질이 좋아져요.'),
@@ -94,9 +96,8 @@ function GettingStarted(o) {
 
 /* ----------------------------------------------- KPI summary tiles (at-a-glance) */
 function StatTile(label, value, iconName, to) {
-  const tile = Stat({ label, value, iconName });
+  const tile = Stat({ label, value, iconName, onClick: () => navigate(to) });
   tile.classList.add('is-clickable');
-  tile.addEventListener('click', () => navigate(to));
   return tile;
 }
 function StatRow(counts) {
@@ -162,7 +163,7 @@ function Pipeline(breakdown) {
 
 /* ----------------------------------------------- action lane (what to do next) */
 function statusDot(status) {
-  return el('span', { class: 'list-row__dot', style: { background: STATUS_COLOR[status] || 'var(--text-tertiary)' } });
+  return el('span', { class: 'list-row__dot', style: { background: statusColor(status) } });
 }
 
 function ActionLane(interviewTodo, inProgress) {

package/dist/public/pages/interview.js

@@ -1,7 +1,7 @@
 // Interview — preparation materials for jobs that reached 서류 합격 or beyond.
 import {
-  el, get, put, icon, navigate, Card, Badge, Btn, EmptyState, Field, Input,
-  Textarea, openModal, closeModal, toastOk, toastError, copyText,
+  el, get, put, icon, navigate, Card, Badge, Btn, SubmitBtn, EmptyState, Field, Input,
+  Textarea, openModal, closeModal, toastOk, copyText,
   downloadUrl, mount,
 } from '/lib.js';
 
@@ -200,7 +200,7 @@ export async function render(ctx) {
       body: formBody,
       footer: (close) => [
         Btn('취소', { onClick: close }),
-        Btn('면접 준비 저장', { variant: 'primary', onClick: () => save(jobId) }),
+        SubmitBtn('면접 준비 저장', () => save(jobId)),
       ],
     });
 
@@ -216,15 +216,12 @@ export async function render(ctx) {
         self_introduction: introInput.value,
         notes: notesInput.value,
       };
-      try {
-        await put(`/api/jobs/${id}/interview`, payload);
-        closeModal();
-        toastOk('면접 준비를 저장했어요.');
-        await ctx.refreshNav();
-        await render(ctx);
-      } catch (err) {
-        toastError(err);
-      }
+      // Throws on failure so the SubmitBtn surfaces it inline.
+      await put(`/api/jobs/${id}/interview`, payload);
+      closeModal();
+      toastOk('면접 준비를 저장했어요.');
+      await ctx.refreshNav();
+      await render(ctx);
     }
   }
 }

package/dist/public/pages/jobs.js

@@ -3,10 +3,10 @@
 // cover letters, interview prep, and related history, all driven by the AI's
 // saved data with manual fallbacks throughout.
 import {
-  el, get, post, put, del, icon, navigate, Card, Badge, Btn,
+  el, get, post, put, del, icon, navigate, Card, Badge, Btn, SubmitBtn,
   EmptyState, Chips, Field, Input, Textarea, Select,
   openModal, closeModal, confirmDialog, toastOk, toastError,
-  fmtDate, scoreClass, mount, meta,
+  fmtDate, scoreClass, mount, meta, linesToArray, csvToArray,
 } from '/lib.js';
 
 export async function render(ctx) {
@@ -40,7 +40,9 @@ async function renderList(ctx) {
   const rowData = jobs.map((j) => ({
     tr: el('tr', { class: 'is-clickable', onClick: () => navigate(`/jobs/${j.id}`) },
       el('td', {},
-        el('div', { class: 'strong' }, j.company),
+        // Real link in the lead cell so keyboard/AT users can reach the row (a
+        // role=button on <tr> would be invalid ARIA); the whole row stays mouse-clickable.
+        el('a', { class: 'cell-link strong', href: `#/jobs/${j.id}` }, j.company),
         el('div', { class: 'muted text-sm' }, j.position)),
       el('td', {},
         el('div', {}, j.location || el('span', { class: 'muted' }, '위치 미정')),
@@ -61,13 +63,13 @@ async function renderList(ctx) {
   wrap.append(Card({
     title: '저장된 공고',
     sub: `${jobs.length}개`,
-    body: el('table', { class: 'table' },
+    body: el('div', { class: 'table-scroll' }, el('table', { class: 'table table--jobs' },
       el('thead', {}, el('tr', {},
         el('th', {}, '회사 · 직무'),
         el('th', {}, '위치 · 마감일'),
         el('th', { style: { textAlign: 'right' } }, '적합도'),
         el('th', {}, '상태'))),
-      tbody),
+      tbody)),
   }));
 
   mount(ctx.view, wrap);
@@ -82,13 +84,6 @@ async function renderList(ctx) {
 
 /* ---------------------------------------------------------- add/edit modal */
 
-function linesToArray(str) {
-  return (str || '').split('\n').map((s) => s.trim()).filter(Boolean);
-}
-function csvToArray(str) {
-  return (str || '').split(',').map((s) => s.trim()).filter(Boolean);
-}
-
 /**
  * Build a job form (used for both create and edit). `job` is the existing
  * record when editing, or null when creating. `onSaved(result)` receives the
@@ -114,12 +109,17 @@ function jobForm(ctx, { job, onSaved }) {
   });
 
   // "붙여넣은 텍스트 정리" — server-side clean + best-effort field extraction.
+  // Deterministic text parsing — NOT AI (CareerMate has no LLM). Use a neutral icon and
+  // show "정리 중…" so a slow parse of a long posting doesn't look frozen.
   const tidyBtn = Btn('붙여넣은 텍스트 정리', {
-    icon: 'sparkle', sm: true, variant: 'ghost',
+    icon: 'edit', sm: true, variant: 'ghost',
     onClick: async () => {
       const raw = description.value.trim();
       if (!raw) { toastError('먼저 공고 원문을 붙여넣어 주세요.'); return; }
+      const labelEl = tidyBtn.querySelector('span');
+      const origLabel = labelEl ? labelEl.textContent : '';
       tidyBtn.disabled = true;
+      if (labelEl) labelEl.textContent = '정리 중…';
       try {
         const r = await post('/api/parse/job', { raw });
         if (r.text) description.value = r.text;
@@ -133,11 +133,11 @@ function jobForm(ctx, { job, onSaved }) {
         }
         toastOk('붙여넣은 텍스트를 정리하고 일부 항목을 채웠어요.');
       } catch (e) { toastError(e); }
-      finally { tidyBtn.disabled = false; }
+      finally { tidyBtn.disabled = false; if (labelEl) labelEl.textContent = origLabel; }
     },
   });
 
-  const form = el('form', { class: 'stack-3', onSubmit: submit },
+  const form = el('form', { class: 'stack-3' },
     el('div', { class: 'grid grid--2' },
       Field('회사 *', company),
       Field('직무 *', position)),
@@ -155,8 +155,8 @@ function jobForm(ctx, { job, onSaved }) {
     Field('자격요건 · 우대사항', requirements, '한 줄에 하나씩'),
   );
 
-  async function submit(e) {
-    if (e) e.preventDefault();
+  // Throws on validation/API failure so the SubmitBtn shows it inline.
+  async function submit() {
     const body = {
       company: company.value.trim(),
       position: position.value.trim(),
@@ -169,21 +169,20 @@ function jobForm(ctx, { job, onSaved }) {
       keywords: csvToArray(keywords.value),
       requirements: linesToArray(requirements.value),
     };
-    if (!body.company || !body.position) {
-      toastError('회사와 직무는 필수입니다.');
-      return;
-    }
-    try {
-      const res = job
-        ? await put(`/api/jobs/${job.id}`, body)
-        : await post('/api/jobs', body);
-      toastOk(job ? '공고를 수정했습니다.' : '공고를 저장했습니다.');
-      closeModal();
-      await onSaved(res);
-    } catch (err) { toastError(err); }
+    if (!body.company || !body.position) throw new Error('회사와 직무는 필수입니다.');
+    const res = job
+      ? await put(`/api/jobs/${job.id}`, body)
+      : await post('/api/jobs', body);
+    toastOk(job ? '공고를 수정했어요.' : '공고를 저장했어요.');
+    closeModal();
+    await onSaved(res);
   }
 
-  return { form, submit };
+  // Route the form's Enter-to-submit through the footer SubmitBtn so it shares the
+  // same in-flight disable + inline error handling.
+  const bindSubmit = (btn) => form.addEventListener('submit', (e) => { e.preventDefault(); btn.click(); });
+
+  return { form, submit, bindSubmit };
 }
 
 function openJobModal(ctx) {
@@ -194,13 +193,15 @@ function openJobModal(ctx) {
       navigate(`/jobs/${res.job.id}`);
     },
   });
+  const saveBtn = SubmitBtn('공고 저장', built.submit);
+  built.bindSubmit(saveBtn);
   openModal({
     title: '공고 추가',
     size: 'lg',
     body: built.form,
     footer: (close) => [
       Btn('취소', { onClick: close }),
-      Btn('공고 저장', { variant: 'primary', onClick: built.submit }),
+      saveBtn,
     ],
   });
 }
@@ -210,13 +211,15 @@ function openEditModal(ctx, job, remount) {
     job,
     onSaved: async () => { await ctx.refreshNav(); await remount(); },
   });
+  const saveBtn = SubmitBtn('공고 저장', built.submit);
+  built.bindSubmit(saveBtn);
   openModal({
     title: '공고 수정',
     size: 'lg',
     body: built.form,
     footer: (close) => [
       Btn('취소', { onClick: close }),
-      Btn('공고 저장', { variant: 'primary', onClick: built.submit }),
+      saveBtn,
     ],
   });
 }
@@ -255,7 +258,7 @@ async function renderDetail(ctx, jobId) {
         if (status === job.status) return;
         try {
           const res = await put(`/api/applications/${jobId}/status`, { status });
-          toastOk('상태를 변경했습니다.');
+          toastOk('상태를 변경했어요.');
           if (res && res.hint) toastOk(res.hint);
           await ctx.refreshNav();
           await remount();
@@ -277,7 +280,7 @@ async function renderDetail(ctx, jobId) {
       if (!ok) return;
       try {
         await del(`/api/jobs/${jobId}`);
-        toastOk('공고를 삭제했습니다.');
+        toastOk('공고를 삭제했어요.');
         await ctx.refreshNav();
         navigate('/jobs');
       } catch (err) { toastError(err); }
@@ -436,7 +439,7 @@ function CoverLettersCard(coverLetters) {
       ...list.map((cl) => el('div', {
         class: 'flex between center is-clickable',
         style: { padding: '8px 0', cursor: 'pointer' },
-        onClick: () => navigate('/documents'),
+        activate: () => navigate('/documents'),
       },
         el('div', { class: 'flex gap-2 center' },
           icon('file', 'muted'),
@@ -484,7 +487,7 @@ function RelatedCard(related) {
       ...list.map((r) => el('div', {
         class: 'flex between center is-clickable',
         style: { padding: '8px 0', cursor: 'pointer' },
-        onClick: () => navigate(`/jobs/${r.id}`),
+        activate: () => navigate(`/jobs/${r.id}`),
       },
         el('div', {},
           el('div', { class: 'strong' }, r.position),