giteadmin/lifeos-dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 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:
M Dombaugh
2026-03-01 22:44:41 +00:00
parent 8499c99721
commit bcb0007217
7 changed files with 178 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
routers/capture.py
View File

@@ -77,6 +77,7 @@ async def list_capture(request: Request, show: str = "inbox", db: AsyncSession =
async def add_capture(
request: Request,
raw_text: str = Form(...),
redirect_to: Optional[str] = Form(None),
area_id: Optional[str] = Form(None),
project_id: Optional[str] = Form(None),
db: AsyncSession = Depends(get_db),
@@ -95,7 +96,8 @@ async def add_capture(
data["project_id"] = project_id
await repo.create(data)
return RedirectResponse(url="/capture", status_code=303)
url = redirect_to if redirect_to and redirect_to.startswith("/") else "/capture"
return RedirectResponse(url=url, status_code=303)
# ---- Batch undo (must be before /{capture_id} routes) ----

2
static/app.js
View File

@@ -174,7 +174,9 @@ function escHtml(s) {
function toggleMobileMore() {
const panel = document.getElementById('mobile-more-panel');
const btn = document.getElementById('mobile-more-btn');
if (panel) panel.classList.toggle('open');
if (btn) btn.classList.toggle('active');
}
// ---- Timer Pill (topbar running timer) ----

151
static/style.css
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 {

44
templates/base.html
View File

@@ -156,6 +156,12 @@
<button type="submit" class="timer-pill-stop" title="Stop timer">&#9632;</button>
</form>
</div>
<form class="quick-capture-form" method="POST" action="/capture/add">
<input type="hidden" name="redirect_to" value="{{ request.url.path }}{% if request.url.query %}?{{ request.url.query }}{% endif %}">
<span class="quick-capture-icon">+</span>
<input type="text" name="raw_text" class="quick-capture-input" placeholder="Quick capture..." autocomplete="off" required>
<button type="submit" class="quick-capture-submit" title="Capture">+</button>
</form>
<button class="search-trigger" onclick="openSearch()" title="Search (Cmd/K)">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
<span>Search...</span>
@@ -195,9 +201,9 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>
<span>Tasks</span>
</a>
<a href="/calendar" class="mobile-nav-item {% if active_nav == 'calendar' %}active{% endif %}">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
<span>Calendar</span>
<a href="/capture" class="mobile-nav-item {% if active_nav == 'capture' %}active{% endif %}">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12"/><path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/></svg>
<span>Capture</span>
</a>
<button class="mobile-nav-item" id="mobile-more-btn" onclick="toggleMobileMore()">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
@@ -209,29 +215,37 @@
<div id="mobile-more-panel" class="mobile-more-panel">
<div class="mobile-more-backdrop" onclick="toggleMobileMore()"></div>
<div class="mobile-more-content">
<a href="/calendar" class="mobile-more-item">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
<span>Calendar</span>
</a>
<a href="/notes" class="mobile-more-item">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/></svg>
Notes
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/></svg>
<span>Notes</span>
</a>
<a href="/meetings" class="mobile-more-item">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
Meetings
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
<span>Meetings</span>
</a>
<a href="/decisions" class="mobile-more-item">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"/><path d="M9 12l2 2 4-4"/></svg>
Decisions
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"/><path d="M9 12l2 2 4-4"/></svg>
<span>Decisions</span>
</a>
<a href="/contacts" class="mobile-more-item">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
Contacts
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
<span>Contacts</span>
</a>
<a href="/processes" class="mobile-more-item">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
<span>Processes</span>
</a>
<a href="/weblinks" class="mobile-more-item">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
Weblinks
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
<span>Weblinks</span>
</a>
<a href="/admin/trash" class="mobile-more-item">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
Admin
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
<span>Admin</span>
</a>
</div>
</div>

19
tests/conftest.py
View File

@@ -33,6 +33,7 @@ SEED_IDS = {
"process_step": "a0000000-0000-0000-0000-000000000011",
"process_run": "a0000000-0000-0000-0000-000000000012",
"time_budget": "a0000000-0000-0000-0000-000000000013",
"file": "a0000000-0000-0000-0000-000000000014",
}
@@ -228,6 +229,21 @@ def all_seeds(sync_conn):
ON CONFLICT (id) DO NOTHING
""", (d["time_budget"], d["domain"]))
# File (create a dummy file on disk for download/serve tests)
import os
from pathlib import Path
file_storage = os.getenv("FILE_STORAGE_PATH", "/opt/lifeos/files/dev")
Path(file_storage).mkdir(parents=True, exist_ok=True)
dummy_file_path = os.path.join(file_storage, "test_seed_file.txt")
with open(dummy_file_path, "w") as f:
f.write("test seed file content")
cur.execute("""
INSERT INTO files (id, filename, original_filename, storage_path, mime_type, size_bytes, is_deleted, created_at, updated_at)
VALUES (%s, 'test_seed_file.txt', 'test_seed_file.txt', %s, 'text/plain', 22, false, now(), now())
ON CONFLICT (id) DO NOTHING
""", (d["file"], dummy_file_path))
sync_conn.commit()
except Exception as e:
sync_conn.rollback()
@@ -237,6 +253,9 @@ def all_seeds(sync_conn):
# Cleanup: delete all seed data (reverse dependency order)
try:
cur.execute("DELETE FROM files WHERE id = %s", (d["file"],))
if os.path.exists(dummy_file_path):
os.remove(dummy_file_path)
cur.execute("DELETE FROM time_budgets WHERE id = %s", (d["time_budget"],))
cur.execute("DELETE FROM process_runs WHERE id = %s", (d["process_run"],))
cur.execute("DELETE FROM process_steps WHERE id = %s", (d["process_step"],))

2
tests/form_factory.py
View File

@@ -78,6 +78,8 @@ NAME_PATTERNS: list[tuple[str, Any]] = [
("location", "Test Location"),
("tags", ""),
("notes", "Test notes field"),
("weekly_hours", "10"),
("effective_from", None), # Resolved dynamically as date
]

2
tests/registry.py
View File

@@ -44,7 +44,7 @@ PREFIX_TO_SEED = {
"/processes": "process",
"/processes/runs": "process_run",
"/time-budgets": "time_budget",
"/files": None,
"/files": "file",
"/admin/trash": None,
}