🎨 Palette: 대시보드 검색 단축키 및 빈 상태 CTA 추가 (UX 개선)

.Jules/palette.md

@@ -27,3 +27,7 @@
 ## 2024-07-13 - CLI 출력의 영문법적 복수형 및 에러 메시지 힌트 개선
 **Learning:** CLI 출력에서 `file(s)`, `issue(s)`, `rule(s) excluded`와 같이 괄호를 사용한 복수형 표기법은 가독성을 떨어뜨리고 투박한(developer-centric) 느낌을 줍니다. 또한, 에러 발생 시 단순 예외 내용만 출력하는 것보다 즉시 실행 가능한 해결책(Hint)을 함께 제공하는 것이 CLI 사용자 경험(DX) 향상에 매우 효과적입니다.
 **Action:** 조건부 f-string(예: `s_suffix = "s" if count != 1 else ""`)을 활용하여 동적으로 정확한 복수형 단어(file/files)를 출력하도록 개선하고, 예외 발생 로직에는 항상 `💡 Hint:`를 포함하여 후속 액션을 안내하도록 표준화해야 합니다. (단, Python 3.12 환경의 `black` 포매터 호환성을 위해 백슬래시가 포함된 중첩 f-string 사용을 피하고 변수 추출을 권장합니다.)
+
+## 2024-05-18 - Global Search Focus Shortcut and Empty State CTA
+**Learning:** Users often navigate complex dashboards primarily with the keyboard. Providing a global shortcut (`/`) to focus the search bar, alongside a visual hint in the placeholder, significantly improves navigability. Furthermore, users frequently encounter the "empty state" when loading the dashboard for the first time; instead of making them search the header for a small upload input, providing a prominent call-to-action button directly in the empty state greatly reduces friction.
+**Action:** When building dashboard or list views, always include a global shortcut (like `/`) to focus the primary search/filter input, and ensure empty states always have a clear, actionable CTA that allows users to resolve the empty state directly from where they are looking.

scanner/dashboard/index.html

@@ -124,7 +124,9 @@ <h1>No findings loaded</h1>
       <p>Generate a report-safe findings file, then load it above (or place it next to this page).</p>
       <p><code>appguardrail scan --findings-json reports/findings.json .</code></p>
       <p class="drop">Serve the repo (<code>python3 -m http.server</code>) and open <code>/dashboard/</code>, or drag a <code>findings.json</code> onto this window.</p>
+      <p><button id="btn-select-file">Select findings.json</button></p>
     </div>`;
+    document.getElementById('btn-select-file').addEventListener('click', () => document.getElementById('file').click());
     return;
   }
   const counts = {CRITICAL:0,HIGH:0,WARNING:0,INFO:0};
@@ -173,7 +175,7 @@ <h1>Dashboard</h1>
       <div class="panel"><h2>Findings by category</h2><div class="rowlist">${catRows||'<div class="r">—</div>'}</div></div>
       <div>
         <div class="toolbar">
-          <input type="search" id="q" placeholder="Search message, file, rule, category" aria-label="Search findings" value="${esc(query)}">
+          <input type="search" id="q" placeholder="Search message, file, rule, category (Press '/')" aria-label="Search findings" value="${esc(query)}">
           <select id="sev" aria-label="Filter by severity">
             <option value="">All severities</option>
             ${SEV_ORDER.map(s=>`<option value="${s}" ${s===filterSev?'selected':''}>${s}</option>`).join('')}
@@ -256,6 +258,15 @@ <h1>Dashboard</h1>
   render();
 }
 
+// Global keyboard shortcuts
+document.addEventListener('keydown', e => {
+  if (e.key === '/' && document.activeElement.tagName !== 'INPUT' && document.activeElement.tagName !== 'TEXTAREA') {
+    e.preventDefault();
+    const searchInput = document.getElementById('q');
+    if (searchInput) searchInput.focus();
+  }
+});
+
 document.getElementById('file').addEventListener('change', e=>{
   const f = e.target.files[0]; if(!f) return;
   f.text().then(t=>{ try{ load(JSON.parse(t), f.name); }catch(err){ alert('Invalid JSON: '+err.message); } });