andrea/faerro-kb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance text note functionality: add API for creating and managing written notes, implement draft saving, and improve UI for note capture modes

Browse Source
This commit is contained in:
andrea
2026-09-28 12:36:44 +02:00
parent f4100af8ec
commit 8d4f46a7d1
8 changed files with 214 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/styles.css
+16 -2
View File
@@ -24,6 +24,17 @@ body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(
.network-state.online i { background: #57986b; }
main { max-width: 1040px; margin: auto; padding: 0 24px; }
.capture { padding: 54px 0 40px; border-bottom: 1px solid var(--line); background-image: radial-gradient(#c7c9bf 0.55px, transparent 0.55px); background-size: 9px 9px; background-position: right 22px top 28px; background-repeat: no-repeat; }
.capture-modes { display: flex; width: fit-content; margin: 0 auto 24px; border-bottom: 1px solid var(--line); }
.capture-mode { min-width: 108px; min-height: 40px; border: 0; border-bottom: 2px solid transparent; padding: 0 16px; color: var(--muted); background: transparent; font: 12px var(--mono); cursor: pointer; }
.capture-mode.active { border-bottom-color: var(--moss); color: var(--moss-dark); }
.write-panel { max-width: 590px; margin: auto; }
.write-label { display: block; margin: 0 0 10px; font: 500 20px var(--serif); }
.written-note { display: block; width: 100%; min-height: 190px; resize: vertical; border: 1px solid var(--line); padding: 14px; color: var(--ink); background: #fffefa; font: 14px/1.6 var(--sans); }
.written-note:focus { outline: 2px solid var(--moss); outline-offset: 2px; }
.write-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px; }
.draft-status { color: var(--muted); font-size: 11px; }
.save-written-note { min-height: 40px; flex: 0 0 auto; border: 1px solid var(--moss-dark); padding: 0 16px; color: white; background: var(--moss-dark); font: 12px var(--mono); cursor: pointer; }
.save-written-note:disabled { opacity: .45; cursor: default; }
.section-kicker { display: flex; justify-content: space-between; color: var(--muted); font: 10px var(--mono); letter-spacing: 0; }
h1 { margin: 24px 0 11px; font: 500 clamp(42px, 7vw, 72px)/0.99 var(--serif); letter-spacing: 0; }
h1 em { color: var(--moss); font-weight: 500; }
@@ -44,7 +55,7 @@ h1 em { color: var(--moss); font-weight: 500; }
.record-meter { height: 2px; max-width: 590px; margin-inline: auto; background: #e4e3dc; }
.record-meter span { display: block; height: 100%; width: 0; background: var(--coral); transition: width .25s linear; }
.capture-message { min-height: 20px; max-width: 590px; margin: 8px auto 0; padding-top: 6px; color: var(--muted); font-size: 11px; text-align: center; }
.capture-message.upload-confirmed { display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: forestgreen; font-size: 16px; }
.capture-message.upload-confirmed { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; color: forestgreen; font-size: 16px; }
.capture-message.upload-confirmed::after { content: '✓'; color: forestgreen; font-size: 1.05em; line-height: 1; }
.audio-upload-row { max-width: 590px; margin: 14px auto 6px; display: flex; align-items: center; justify-content: center; gap: 12px; }
.audio-upload-button { display: inline-flex; min-height: 36px; align-items: center; gap: 7px; border: 1px solid var(--line); padding: 0 12px; color: var(--moss-dark); background: #fffefa; font-size: 12px; cursor: pointer; }
@@ -82,12 +93,15 @@ footer { max-width: 1040px; margin: auto; padding: 18px 24px calc(18px + env(saf
.topbar { height: 58px; padding: 0 18px; }
main { padding: 0 18px; }
.capture { padding: 38px 0 30px; background-position: right 8px top 25px; }
.capture-mode { min-width: 100px; }
.write-actions { align-items: flex-start; }
h1 { font-size: 48px; }
.recorder-row { gap: 12px; padding-right: 12px; }
.record-button { width: 46px; height: 46px; }
.record-copy strong { font-size: 12px; }
.record-copy span { font-size: 10px; }
.audio-upload-row { align-items: flex-start; flex-direction: column; }
.audio-upload-row { align-items: center; flex-direction: column; }
.audio-upload-row > span { text-align: center; }
h2 { font-size: 23px; }
.archive-date { width: 60px; font-size: 9px; }
footer { padding-left: 18px; padding-right: 18px; font-size: 8px; }