altair823-org/inkling
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 18 Wiki Activity

feat(quickcapture): React UI with v0.2 recovery-friendly copy

Browse Source 
Task 19 of the slice plan. Frameless dark card with:
- placeholder "지금 머릿속에 있는 것 한 줄. 정리는 나중입니다."
- hint "Ctrl+Enter 구출 · Esc 취소 · 이미지 붙여넣기"
- Ctrl/Cmd+Enter to submit (window.inkling.capture.submit then
  hide), Esc to cancel (with "이 한 줄을 흘려보낼까요?" confirm
  when text > 5 chars)
- clipboard image paste -> thumbnail strip with ArrayBuffer
  retained for submit
- fallback "저장에 실패했습니다. 다시 시도해주세요." in-card on
  IPC error (window stays open with content preserved)

api.ts wraps window.inkling.capture as the typed CaptureApi.
main.tsx mounts <App /> on #root.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
altair823
2026-04-25 12:12:53 +09:00
parent 7bd8276493
commit 7148ad0f17
4 changed files with 106 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/renderer/quickcapture/index.html Normal file
View File

@@ -0,0 +1,28 @@
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'" />
<title>Inkling Capture</title>
<style>
html, body, #root { margin: 0; height: 100%; background: transparent; font-family: system-ui, sans-serif; }
body { -webkit-app-region: drag; }
.card {
-webkit-app-region: no-drag;
background: #1e1e24; color: #eee;
border-radius: 12px; box-shadow: 0 12px 48px rgba(0,0,0,0.4);
height: calc(100% - 24px); margin: 12px;
display: flex; flex-direction: column; padding: 12px;
}
textarea { flex: 1; background: transparent; color: inherit; border: none; outline: none; font-size: 14px; resize: none; }
.thumbs { display: flex; gap: 6px; }
.thumbs img { width: 48px; height: 48px; object-fit: cover; border-radius: 4px; }
.hint { color: #888; font-size: 11px; margin-top: 6px; }
.err { color: #ff6a6a; font-size: 11px; margin-top: 6px; }
</style>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/renderer/quickcapture/main.tsx"></script>
</body>
</html>