Hyungi Ahn
|
d83842ccd8
|
feat(ui): Phase D.4/D.5 — keyboard nav + density toggle
D.4 useListKeyboardNav:
- 신규: frontend/src/lib/composables/useListKeyboardNav.svelte.ts
j/k/Arrow/Enter/Esc, isTypingTarget 가드 (input/textarea/select/
contenteditable 포커스 시 비활성)
- documents/+page.svelte: kbIndex $state, kbSelectedId $derived,
items 변경 시 clamp, URL 변경 시 0 리셋
- DocumentTable/DocumentCard: kbSelectedId prop → data-kb-selected
속성 + ring-accent-ring 시각 표시
- scrollSelectedIntoView: queueMicrotask + querySelector로 현재
커서를 뷰포트 내로 스크롤 (block: nearest)
D.5 Table density:
- DocumentTable: density prop (compact/comfortable), rowPaddingClass
($derived: py-1 | py-2.5), rowTextClass (text-[10px] | text-xs)
- documents/+page.svelte: tableDensity $state, toggleDensity 헬퍼,
localStorage.tableDensity persistent, 테이블 뷰에서만 토글 버튼
노출 (Rows2/Rows3 아이콘)
- 뷰 모드 버튼도 token 기반으로 리팩토링
검증:
- npm run build 통과
- npm run lint:tokens 231 → 229 (뷰 모드 버튼 token swap으로 -2)
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
|
2026-04-08 12:42:03 +09:00 |
|
Hyungi Ahn
|
3375a5f1b1
|
feat(ui): Phase D.3 — multi-select + batch actions (pLimit)
- DocumentTable/DocumentCard: selectable/selectedIds/onselectionchange props
* Table: 왼쪽 6px 너비 체크박스 컬럼
* Card: 좌상단 absolute 체크박스 (hover 또는 selected 시 표시)
* 체크박스 onclick stopPropagation으로 행 select와 분리
- documents/+page.svelte:
* selectedIds = $state(new Set()), URL/필터 변경 시 자동 초기화
* sticky 선택 toolbar (selection > 0): N건 / 전체 선택 / 선택 해제 /
일괄 도메인 / 일괄 태그 / 일괄 삭제
* 50건 상한 UI 가드 (초과 시 경고 + 모든 bulk 버튼 disabled)
* Bulk modals:
- 일괄 도메인: Select (Knowledge/* 6종 + Reference)
- 일괄 태그: TextInput (기존 ai_tags에 추가, 중복 skip)
- 일괄 삭제: ConfirmDialog (delete_file=true)
* runBulk 헬퍼: pLimit(5) + Promise.allSettled로 concurrency 제한,
성공/실패 카운트 toast (5대 원칙 #4)
* TODO(backend): POST /documents/batch-update — 단일 트랜잭션으로 교체
검증:
- npm run build 통과 (새 경고 없음, label → span 교체로 a11y clean)
- npm run lint:tokens 231 유지 (신규 코드 위반 0)
- 기존 pLimit.ts (Phase A 머지) 재사용, 외부 의존성 없음
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
|
2026-04-08 12:34:02 +09:00 |
|
Hyungi Ahn
|
8ec89517ee
|
refactor(tokens): A-8 Batch 2 — Sidebar / DocumentCard / DocumentTable
목록/사이드바 영역의 var() 토큰을 의미 토큰으로 swap. Phase A 디자인
시스템 정착의 두 번째 mechanical refactor batch (8 파일 중 5/8 누적).
Sidebar:
- bg-[var(--sidebar-bg)] → bg-sidebar (이름 변경)
- border-[var(--border)] → border-default
- text-[var(--text)] → text-text
- text-[var(--text-dim)] → text-dim
- bg-[var(--accent)]/15 → bg-accent/15
- hover:bg-[var(--surface)] → hover:bg-surface
- domain 색상 inline style (DOMAIN_COLORS)은 그대로 유지
DocumentCard:
- bg/border/text/hover 토큰 일괄 swap
- DOMAIN_COLORS의 var(--domain-*) 유지 (plan B2 비고)
- blue-400/blue-900/30 (news icon, data_origin work) 그대로
(lint:tokens 미검출 + plan 명시 없음)
DocumentTable:
- 헤더 + 행 + selected 상태 + 컬럼 텍스트 일괄 swap
- border-l-[var(--accent)] → border-l-accent
- border-default/30 opacity suffix (행 구분선) v4 시각 검증 필요
검증:
- npm run lint:tokens : 407 → 360 (-47, B2 파일 0 hit)
- npm run build : ✅
- npx svelte-check : ✅ 0 errors
- ⚠ 3-risk grep : hover/border-border/var() 잔여 0건
플랜: ~/.claude/plans/compressed-churning-dragon.md §A.4 Batch 2
|
2026-04-07 12:04:37 +09:00 |
|