feat: topbar quick capture, fix mobile bottom nav and more panel

- Add quick capture input to topbar (desktop: inline 250px, mobile: full-width
  with submit button) that POSTs to /capture/add with redirect back to current page
- Fix mobile bottom bar: 5 items (Dashboard, Focus, Tasks, Capture, More),
  nowrap/overflow:hidden to prevent multi-line wrapping
- Rebuild mobile More panel as 3-column grid overlay (z-index 998/999/1000 stack)
  with backdrop dismiss, 8 items: Calendar, Notes, Meetings, Decisions, Contacts,
  Processes, Weblinks, Admin
- Add file seed fixture and registry mapping to eliminate 4 test skips
- Add time_budgets form factory patterns to fix 2 test failures

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-01 22:44:41 +00:00
parent 8499c99721
commit bcb0007217
7 changed files with 178 additions and 46 deletions

View File

@@ -872,6 +872,51 @@ a:hover { color: var(--accent-hover); }
color: var(--muted);
}
/* ---- Quick Capture (Topbar) ---- */
.quick-capture-form {
display: flex;
align-items: center;
position: relative;
}
.quick-capture-icon {
position: absolute;
left: 10px;
color: var(--accent);
font-size: 0.88rem;
font-weight: 700;
pointer-events: none;
line-height: 1;
}
.quick-capture-input {
width: 250px;
font-family: var(--font-body);
font-size: 0.82rem;
padding: 6px 12px 6px 26px;
background: var(--surface2);
color: var(--text);
border: 1px solid var(--border);
border-left: 2px solid var(--accent);
border-radius: var(--radius);
transition: border-color var(--transition);
}
.quick-capture-input:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
border-left-color: var(--accent);
}
.quick-capture-input::placeholder {
color: var(--muted);
}
.quick-capture-submit {
display: none;
}
/* ---- Search Modal ---- */
.search-modal {
position: fixed;
@@ -1046,18 +1091,14 @@ a:hover { color: var(--accent-hover); }
border-top: 1px solid var(--border);
z-index: 1000;
flex-direction: row;
flex-wrap: nowrap;
overflow: hidden;
align-items: center;
justify-content: space-around;
padding: 0 4px;
padding-bottom: env(safe-area-inset-bottom, 0);
}
.mobile-bottom-bar svg {
width: 24px;
height: 24px;
flex-shrink: 0;
}
.mobile-nav-item {
display: flex;
flex-direction: column;
@@ -1065,6 +1106,7 @@ a:hover { color: var(--accent-hover); }
justify-content: center;
gap: 2px;
flex: 1;
min-width: 0;
padding: 6px 0;
color: var(--muted);
text-decoration: none;
@@ -1095,12 +1137,6 @@ a:hover { color: var(--accent-hover); }
/* Mobile More Panel */
.mobile-more-panel {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 199;
}
.mobile-more-panel.open {
@@ -1108,42 +1144,46 @@ a:hover { color: var(--accent-hover); }
}
.mobile-more-backdrop {
position: absolute;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.4);
background: rgba(0, 0, 0, 0.5);
z-index: 998;
}
.mobile-more-content {
position: absolute;
position: fixed;
bottom: 56px;
left: 0;
right: 0;
background: var(--surface);
border-top: 1px solid var(--border);
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
padding: 8px 0;
transform: translateY(100%);
transition: transform 200ms ease;
padding-bottom: env(safe-area-inset-bottom, 0);
}
.mobile-more-panel.open .mobile-more-content {
transform: translateY(0);
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
padding: 16px;
padding-bottom: calc(16px + env(safe-area-inset-bottom, 0));
z-index: 999;
}
.mobile-more-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
padding: 12px 20px;
color: var(--text);
justify-content: center;
gap: 6px;
padding: 12px 4px;
min-height: 48px;
color: var(--text-secondary);
text-decoration: none;
font-size: 0.92rem;
font-size: 0.78rem;
font-weight: 500;
border-radius: var(--radius);
transition: background var(--transition);
-webkit-tap-highlight-color: transparent;
}
.mobile-more-item:hover {
@@ -1152,12 +1192,16 @@ a:hover { color: var(--accent-hover); }
}
.mobile-more-item svg {
width: 20px;
height: 20px;
width: 24px;
height: 24px;
color: var(--muted);
flex-shrink: 0;
}
.mobile-more-item span {
line-height: 1;
}
/* ---- Responsive ---- */
@media (max-width: 768px) {
body { padding-bottom: 60px; }
@@ -1168,6 +1212,55 @@ a:hover { color: var(--accent-hover); }
.page-content { padding: 16px; padding-bottom: 72px; }
.mobile-bottom-bar { display: flex; }
/* Topbar: allow wrapping for quick capture row */
.topbar {
height: auto;
min-height: var(--topbar-height);
flex-wrap: wrap;
padding: 8px 16px;
gap: 8px;
}
.quick-capture-form {
order: 10;
width: 100%;
flex: 0 0 100%;
}
.quick-capture-input {
width: 100%;
flex: 1;
min-height: 44px;
font-size: 16px;
padding: 10px 12px 10px 32px;
}
.quick-capture-icon {
left: 12px;
font-size: 1rem;
}
.quick-capture-submit {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
background: var(--accent);
color: #fff;
border: none;
border-radius: var(--radius);
font-size: 1.2rem;
font-weight: 700;
cursor: pointer;
margin-left: 8px;
flex-shrink: 0;
}
.quick-capture-submit:hover {
background: var(--accent-hover);
}
/* Capture form mobile */
.capture-form-card { padding: 12px; }
.capture-form-card .form-textarea {