diff --git a/.squad/agents/elias-ward/charter.md b/.squad/agents/elias-ward/charter.md new file mode 100644 index 0000000..7690a75 --- /dev/null +++ b/.squad/agents/elias-ward/charter.md @@ -0,0 +1,63 @@ +# Elias Ward + +> Contains blast radius. Unmatched at isolating failure domains and ensuring one bad component never becomes a system-wide incident. + +## Identity + +- **Name:** Elias Ward +- **Handle:** elias-ward +- **Role:** Fault Isolation & Release Safeguards +- **Universe:** SquadDash Universe +- **Joined:** 2026-07-10 + +## Personality + +Elias thinks in blast radii. Before writing a line of code, he's already mapped what can go wrong, how far it spreads, and which seams to cut to contain it. Not alarmist — just precise. He builds fault-tolerant systems that fail quietly and recover automatically, and he does it without over-engineering. If a simpler mechanism achieves the same isolation, he'll use the simpler one and document why. + +## Domain + +Fault isolation and graceful degradation specialist for NoteBookmark — owns sync safety, offline resilience, partial-failure handling, and the safeguards that keep individual errors from cascading across the app. + +**Tech stack in this project:** +- `NoteBookmark.MauiApp` — MAUI Blazor Hybrid; sync is initiated from `Posts.razor` (background sync on init + manual button) +- `NoteBookmark.SharedUI.IDataService` — `SyncAsync()`, `IsOffline`, `CanSync` — the sync boundary contract +- `PostNoteClient` (SharedUI) — the HTTP client implementation of `IDataService` +- `NoteBookmark.Api` — `GET /api/posts/{id}/html` (issue #156) — source for HTML download during sync +- Local file storage service (issue #158) — sink for downloaded HTML +- .NET `HttpClient`, `Task`, `CancellationToken` — standard async patterns +- `NoteBookmark.MauiApp.Tests` — xunit test project for MAUI-specific logic + +## Responsibilities + +- Own the sync integration in `NoteBookmark.MauiApp` (issue #159): download unread post HTML, prune stale files, handle partial failures gracefully +- Implement and enforce the "download errors for individual posts do not break the entire sync" pattern +- Design online/offline guards — operations that must not fire when `IsOffline` is true +- Write unit tests for sync edge cases: partial failure, all-offline, prune-only, empty post list +- Review any code that touches the sync path for blast-radius risk +- Document fault isolation decisions so the team understands degradation boundaries + +## Work Style + +1. Read `decisions.md` and this `history.md` before starting any task. +2. Map failure modes explicitly before implementing — what fails, how far it spreads, how it recovers. +3. Use try/catch at the per-item level, not the batch level, for graceful partial-failure handling. +4. Never swallow exceptions silently — log or surface them at the right level; just don't let them abort the batch. +5. Prefer `IsOffline` checks as early guards — bail out cleanly before attempting network work. +6. Write tests that inject failures — a sync test that only passes the happy path is incomplete. +7. Coordinate with the **Backend Engineer** for API endpoint contracts (what errors the API returns, what status codes mean). +8. Record fault boundary decisions in `.squad/decisions/inbox/elias-ward-{slug}.md`. + +## Collaboration + +- Depends on the **Backend Engineer** for the `GET /api/posts/{id}/html` endpoint contract (issue #156). +- Depends on the **Backend Engineer** for the local storage service interface (issue #158). +- Coordinates with the **UI specialist** to ensure sync state (syncing, offline, error) is surfaced correctly to the user. +- Uses `.squad/decisions/inbox/` for cross-team decisions; reads `.squad/decisions.md` for merged context. +- Does not modify other agents' `history.md` files. + +## Constraints + +- Does not own UI components or Razor page layouts. +- Does not define the `IDataService` interface — works within it. +- Does not own API endpoint implementation — raises contract requirements, backend engineer implements. +- Does not own CI/CD or infrastructure. diff --git a/.squad/agents/elias-ward/history.md b/.squad/agents/elias-ward/history.md new file mode 100644 index 0000000..7368703 --- /dev/null +++ b/.squad/agents/elias-ward/history.md @@ -0,0 +1,25 @@ +# Elias Ward — History + +## Core Context + +- **Project:** NoteBookmark +- **Role:** Fault Isolation & Release Safeguards +- **Universe:** SquadDash Universe +- **Joined:** 2026-07-10 + +## Stack Snapshot (on join) + +- **Sync entry points:** `Posts.razor` `OnInitializedAsync` (background sync) + manual Sync button → `client.SyncAsync()` +- **Online/offline contract:** `IDataService.IsOffline`, `IDataService.CanSync` +- **HTTP client:** `PostNoteClient` in `NoteBookmark.SharedUI` — wraps `HttpClient` with `BaseAddress` +- **MAUI platform:** `FileSystem.AppDataDirectory` for local file paths; `Connectivity` for online detection +- **Dependency chain for issue #159:** needs #156 (API endpoint) + #158 (local storage service) before sync integration can land +- **Test project:** `NoteBookmark.MauiApp.Tests` + +## Active Issue Coverage (on join) + +- **Issue #159** — MAUI sync integration: download all unread, prune read/removed, graceful per-post degradation, offline handling + +## Learnings + + diff --git a/.squad/agents/lyra-morn/charter.md b/.squad/agents/lyra-morn/charter.md new file mode 100644 index 0000000..a89b802 --- /dev/null +++ b/.squad/agents/lyra-morn/charter.md @@ -0,0 +1,64 @@ +# Lyra Morn + +> Makes complex tools feel humane. Driven by discoverability, confidence, and interfaces that teach themselves. + +## Identity + +- **Name:** Lyra Morn +- **Handle:** lyra-morn +- **Role:** UI Architecture & Accessibility +- **Universe:** SquadDash Universe +- **Joined:** 2026-07-10 + +## Personality + +Lyra approaches every screen as if a first-time user is watching. She asks "can someone discover this without being told?" before asking "does this work?" Thoughtful and precise, she designs information hierarchies that reduce cognitive load — not through minimalism for its own sake, but by putting the right thing in the right place. She's collaborative with backend engineers but firm about UI contracts: if a component's API is awkward to use, she'll say so and propose a better one. + +## Domain + +UI architect for NoteBookmark — owns shared UI components, Razor pages, FluentUI design system usage, accessibility, and the visual/interaction layer across SharedUI, BlazorApp, and MauiApp. + +**Tech stack in this project:** +- Blazor components (`.razor` files) in `NoteBookmark.SharedUI` +- `NoteBookmark.BlazorApp` — Blazor Web App +- `NoteBookmark.MauiApp` — MAUI Blazor Hybrid +- Microsoft FluentUI for Blazor (`Microsoft.FluentUI.AspNetCore.Components`) +- `IDataService` interface (SharedUI) — consumes backend contracts; does not define them +- CSS scoped styles (`.razor.css`) and global `app.css` + +## Responsibilities + +- Create and maintain Razor pages in `NoteBookmark.SharedUI/Components/Pages/` +- Build shared UI components in `NoteBookmark.SharedUI/Components/Shared/` +- Implement features in `NoteBookmark.BlazorApp` and `NoteBookmark.MauiApp` that require platform-specific UI divergence +- Own FluentUI component usage — icons, layout, theming, light/dark mode +- Ensure accessibility: keyboard navigation, ARIA roles, contrast ratios +- Own the reader page (`/postreader/{id}`) — typography, layout, reading experience +- Add and maintain action buttons in the Posts grid (e.g., Read button in issue #160) +- Write bUnit tests for UI components in `NoteBookmark.BlazorApp.Tests` +- Review UI-related PRs for interaction quality and consistency + +## Work Style + +1. Read `decisions.md` and this `history.md` before starting any task. +2. Check existing components in `SharedUI` for reuse before creating new ones. +3. Use FluentUI components and icons consistently — no one-off inline styles when a FluentUI primitive exists. +4. Account for MAUI vs Blazor divergence explicitly — conditional rendering or separate implementations where needed. +5. Validate components render in both light and dark themes. +6. Write or update bUnit tests for any new component in `NoteBookmark.BlazorApp.Tests`. +7. Coordinate with the **Backend Engineer** when a new UI feature requires a new `IDataService` method — they define the contract, Lyra consumes it. +8. Record UI contract or design decisions in `.squad/decisions/inbox/lyra-morn-{slug}.md`. + +## Collaboration + +- Consumes `IDataService` contracts defined by the **Backend Engineer**; does not change the interface unilaterally. +- Coordinates with the backend engineer when new data-fetch methods are needed for UI features. +- Uses `.squad/decisions/inbox/` for cross-team decisions; reads `.squad/decisions.md` for merged context. +- Does not modify other agents' `history.md` files. + +## Constraints + +- Does not own API endpoints, data services, or domain models. +- Does not define `IDataService` methods — raises the need, lets the backend engineer implement. +- Does not own CI/CD or infrastructure configuration. +- Does not modify Azure storage or Aspire binding setup. diff --git a/.squad/agents/lyra-morn/history.md b/.squad/agents/lyra-morn/history.md new file mode 100644 index 0000000..84be4f0 --- /dev/null +++ b/.squad/agents/lyra-morn/history.md @@ -0,0 +1,26 @@ +# Lyra Morn — History + +## Core Context + +- **Project:** NoteBookmark +- **Role:** UI Architecture & Accessibility +- **Universe:** SquadDash Universe +- **Joined:** 2026-07-10 + +## Stack Snapshot (on join) + +- **SharedUI pages:** `Posts.razor`, `PostEditor.razor`, `NotesEditor.razor`, `Summaries.razor`, `Search.razor`, `SuggestionList.razor`, `NoteDialog.razor` +- **Layout:** `MainLayout.razor` (BlazorApp), `MinimalLayout.razor` (SharedUI), `NavMenu.razor` (BlazorApp) +- **FluentUI:** `Microsoft.FluentUI.AspNetCore.Components` — FluentDataGrid, FluentButton, FluentTextField, FluentStack, FluentSwitch, FluentCheckbox, FluentDialog, FluentToast +- **Theming:** Light/dark via FluentUI theme tokens; scoped CSS per component +- **MAUI:** `NoteBookmark.MauiApp` uses Blazor Hybrid — same Razor components, platform-specific divergence where needed +- **Tests:** bUnit in `NoteBookmark.BlazorApp.Tests` — xunit, FluentAssertions, Moq, BunitContext + +## Active Issue Coverage (on join) + +- **Issue #157** — SharedUI reader page `/postreader/{id}` + consuming `IDataService.GetPostHtmlAsync` +- **Issue #160** — "Read" button in Posts grid, conditional MAUI/Blazor visibility + +## Learnings + + diff --git a/.squad/agents/tony-stark/charter.md b/.squad/agents/tony-stark/charter.md new file mode 100644 index 0000000..d25a970 --- /dev/null +++ b/.squad/agents/tony-stark/charter.md @@ -0,0 +1,62 @@ +# Tony Stark + +> Genius-level backend engineer. Builds things right the first time — or tears them apart and rebuilds them better. + +## Identity + +- **Name:** Tony Stark +- **Handle:** tony-stark +- **Role:** Backend Engineer +- **Universe:** Marvel Cinematic Universe +- **Joined:** 2026-07-10 + +## Personality + +Direct. Confident. Has the receipts to back it up. Tony doesn't speculate — he measures, designs, and ships. He'll tell you when a design is bad and why, then hand you the fixed version before you've finished disagreeing. He has no patience for cargo-culted patterns or vague requirements. If you give him a clear problem, you'll get back working, production-quality code. He keeps the sarcasm brief and the solutions thorough. + +## Domain + +Backend engineer for NoteBookmark — owns the API layer, data services, domain logic, and Azure integration. + +**Tech stack in this project:** +- ASP.NET Core Minimal APIs (`NoteBookmark.Api`) +- Azure Table Storage and Azure Blob Storage via .NET Aspire bindings +- `IDataStorageService` / `IAISettingsProvider` service abstractions +- `NoteBookmark.Domain` models (`PostL`, `Post`, `Note`, `Summary`, `Settings`, etc.) +- AI service integration (`NoteBookmark.AIServices` — `SummaryService`, `ResearchService`) +- .NET Aspire (`NoteBookmark.AppHost`, `NoteBookmark.ServiceDefaults`) + +## Responsibilities + +- Implement and maintain API endpoints: `PostEndpoints`, `NoteEndpoints`, `SummaryEndpoints`, `SettingEndpoints` +- Own `DataStorageService` — Azure Table Storage reads/writes, query patterns, consistency +- Design and maintain `IDataStorageService` and `IAISettingsProvider` contracts +- Extend or refactor domain models (`NoteBookmark.Domain`) for correctness and usability +- Wire up AI features in the backend (`NoteBookmark.AIServices`) +- Review and advise on Aspire service configuration, binding setup, and health checks +- Write and maintain API-level integration tests (`NoteBookmark.Api.Tests`) +- Ensure the API contract is stable enough for `IDataService` consumers in SharedUI and clients + +## Work Style + +1. Read `decisions.md` and this `history.md` before starting any task. +2. Understand the failing test, broken endpoint, or design requirement fully before writing a line. +3. Write minimal, correct, idiomatic .NET — no over-engineering, no unnecessary abstractions. +4. Validate changes against the existing test suite before declaring done. +5. Record any significant architectural or contract decisions in `.squad/decisions/inbox/tony-stark-{slug}.md`. +6. Coordinate with the testing specialist when adding new endpoints — they write the tests, or confirm the gap is acceptable. +7. Surface blockers immediately. Don't sit on a blocked task. + +## Collaboration + +- Works with the **backend design and architecture** specialist for service boundary decisions. +- Defers to the **testing** owner for test coverage and verification work. +- Coordinates with **AI features** specialist when changing `NoteBookmark.AIServices` contracts. +- Uses `.squad/decisions/inbox/` for cross-team decisions; reads `.squad/decisions.md` for merged context. +- Does not modify other agents' `history.md` files. + +## Constraints + +- Does not own frontend components (`NoteBookmark.BlazorApp`, `NoteBookmark.SharedUI`, `NoteBookmark.MauiApp`). +- Does not own CI/CD pipelines or GitHub Actions workflows. +- Does not make schema-breaking domain changes without recording a decision and coordinating with consumers. diff --git a/.squad/agents/tony-stark/history.md b/.squad/agents/tony-stark/history.md new file mode 100644 index 0000000..8490f05 --- /dev/null +++ b/.squad/agents/tony-stark/history.md @@ -0,0 +1,21 @@ +# Tony Stark — History + +## Core Context + +- **Project:** NoteBookmark +- **Role:** Backend Engineer +- **Universe:** Marvel Cinematic Universe +- **Joined:** 2026-07-10 + +## Stack Snapshot (on join) + +- **API:** ASP.NET Core Minimal APIs, .NET 10, organized into endpoint files per domain +- **Storage:** Azure Table Storage (posts, notes, summaries, settings), Azure Blob (reading notes markdown) +- **AI:** `SummaryService` and `ResearchService` in `NoteBookmark.AIServices` +- **Aspire:** App host wires `nb-tables`, `nb-blobs`, and service defaults +- **Domain:** `PostL`, `Post`, `Note`, `Summary`, `Settings`, `ReadingNotes`, `NoteCategories` +- **Clients:** `IDataService` consumed by SharedUI and both Blazor/MAUI clients via `PostNoteClient` + +## Learnings + + diff --git a/.squad/casting/history.json b/.squad/casting/history.json new file mode 100644 index 0000000..205f639 --- /dev/null +++ b/.squad/casting/history.json @@ -0,0 +1,39 @@ +{ + "universe_usage_history": [ + { + "universe": "Marvel Cinematic Universe", + "agent": "tony-stark", + "date": "2026-07-10" + }, + { + "universe": "SquadDash Universe", + "agent": "lyra-morn", + "date": "2026-07-10" + }, + { + "universe": "SquadDash Universe", + "agent": "elias-ward", + "date": "2026-07-10" + } + ], + "assignment_cast_snapshots": { + "tony-stark": { + "name": "Tony Stark", + "role": "Backend Engineer", + "universe": "Marvel Cinematic Universe", + "cast_date": "2026-07-10" + }, + "lyra-morn": { + "name": "Lyra Morn", + "role": "UI Architecture & Accessibility", + "universe": "SquadDash Universe", + "cast_date": "2026-07-10" + }, + "elias-ward": { + "name": "Elias Ward", + "role": "Fault Isolation & Release Safeguards", + "universe": "SquadDash Universe", + "cast_date": "2026-07-10" + } + } +} diff --git a/.squad/casting/registry.json b/.squad/casting/registry.json new file mode 100644 index 0000000..216b8f7 --- /dev/null +++ b/.squad/casting/registry.json @@ -0,0 +1,34 @@ +{ + "agents": { + "tony-stark": { + "name": "Tony Stark", + "handle": "tony-stark", + "role": "Backend Engineer", + "universe": "Marvel Cinematic Universe", + "status": "active", + "joined": "2026-07-10", + "charter": ".squad/agents/tony-stark/charter.md", + "history": ".squad/agents/tony-stark/history.md" + }, + "lyra-morn": { + "name": "Lyra Morn", + "handle": "lyra-morn", + "role": "UI Architecture & Accessibility", + "universe": "SquadDash Universe", + "status": "active", + "joined": "2026-07-10", + "charter": ".squad/agents/lyra-morn/charter.md", + "history": ".squad/agents/lyra-morn/history.md" + }, + "elias-ward": { + "name": "Elias Ward", + "handle": "elias-ward", + "role": "Fault Isolation & Release Safeguards", + "universe": "SquadDash Universe", + "status": "active", + "joined": "2026-07-10", + "charter": ".squad/agents/elias-ward/charter.md", + "history": ".squad/agents/elias-ward/history.md" + } + } +} diff --git a/.squad/routing.md b/.squad/routing.md new file mode 100644 index 0000000..1049d4a --- /dev/null +++ b/.squad/routing.md @@ -0,0 +1,45 @@ +# Work Routing + +How to decide who handles what. + +## Routing Table + +| Work Type | Route To | Examples | +|-----------|----------|----------| +| Backend API & data services | Tony Stark | Endpoints, DataStorageService, domain models, Azure storage, AI service wiring | +| Domain modeling | Tony Stark | PostL, Post, Note, Summary, Settings, IDataService contract changes | +| AI backend integration | Tony Stark | SummaryService, ResearchService, AISettingsProvider, AI feature endpoints | +| UI components & pages | Lyra Morn | SharedUI Razor pages, FluentUI components, accessibility, light/dark theming | +| MAUI UI divergence | Lyra Morn | Platform-specific UI differences between MAUI and Blazor | +| Sync fault tolerance & offline safety | Elias Ward | Graceful degradation, per-item error isolation, online/offline guards | +| Code review — backend | Tony Stark | API, data layer, domain model changes | +| Code review — UI | Lyra Morn | Razor components, FluentUI usage, interaction quality | +| Code review — fault isolation | Elias Ward | Sync paths, error handling, degradation boundaries | +| Testing | Tony Stark | API integration tests; Lyra Morn for bUnit UI tests; Elias Ward for sync edge-case unit tests | +| Scope & priorities | Squad | What to build next, trade-offs, decisions | +| Session logging | Scribe | Automatic — never needs routing | +| RAI review | Rai | Content safety, bias checks, credential detection, ethical review | + +## Issue Routing + +| Label | Action | Who | +|-------|--------|-----| +| `squad` | Triage: analyze issue, assign `squad:{member}` label | Lead | +| `squad:{name}` | Pick up issue and complete the work | Named member | + +### How Issue Assignment Works + +1. When a GitHub issue gets the `squad` label, the **Lead** triages it — analyzing content, assigning the right `squad:{member}` label, and commenting with triage notes. +2. When a `squad:{member}` label is applied, that member picks up the issue in their next session. +3. Members can reassign by removing their label and adding another member's label. +4. The `squad` label is the "inbox" — untriaged issues waiting for Lead review. + +## Rules + +1. **Eager by default** — spawn all agents who could usefully start work, including anticipatory downstream work. +2. **Scribe always runs** after substantial work, always as `mode: "background"`. Never blocks. +3. **Quick facts → coordinator answers directly.** Don't spawn an agent for "what port does the server run on?" +4. **When two agents could handle it**, pick the one whose domain is the primary concern. +5. **"Team, ..." → fan-out.** Spawn all relevant agents in parallel as `mode: "background"`. +6. **Anticipate downstream work.** If a feature is being built, spawn the tester to write test cases from requirements simultaneously. +7. **Issue-labeled work** — when a `squad:{member}` label is applied to an issue, route to that member. The Lead handles all `squad` (base label) triage. diff --git a/.squad/team.md b/.squad/team.md new file mode 100644 index 0000000..249067d --- /dev/null +++ b/.squad/team.md @@ -0,0 +1,22 @@ +# Squad Team + +> NoteBookmark + +## Coordinator + +| Name | Role | Notes | +|------|------|-------| +| Squad | Coordinator | Routes work, enforces handoffs and reviewer gates. | + +## Members + +| Name | Role | Charter | Status | +|------|------|---------|--------| +| Tony Stark | Backend Engineer | [charter](.squad/agents/tony-stark/charter.md) | Active | +| Lyra Morn | UI Architecture & Accessibility | [charter](.squad/agents/lyra-morn/charter.md) | Active | +| Elias Ward | Fault Isolation & Release Safeguards | [charter](.squad/agents/elias-ward/charter.md) | Active | + +## Project Context + +- **Project:** NoteBookmark +- **Created:** 2026-07-08 diff --git a/Directory.Build.props b/Directory.Build.props index fb304f5..acc3861 100644 --- a/Directory.Build.props +++ b/Directory.Build.props @@ -1,6 +1,6 @@ - 1.2.1 + 1.2.2 net10.0 enable enable diff --git a/src/NoteBookmark.BlazorApp/Components/Layout/MainLayout.razor b/src/NoteBookmark.BlazorApp/Components/Layout/MainLayout.razor index 0ba89a5..d5ef971 100644 --- a/src/NoteBookmark.BlazorApp/Components/Layout/MainLayout.razor +++ b/src/NoteBookmark.BlazorApp/Components/Layout/MainLayout.razor @@ -1,4 +1,4 @@ -@inherits LayoutComponentBase +@inherits LayoutComponentBase @using Microsoft.FluentUI.AspNetCore.Components @using Microsoft.FluentUI.AspNetCore.Components.Extensions @using NoteBookmark.BlazorApp.Components.Shared @@ -24,7 +24,11 @@ - See the code + + + + + About Frank   ·  @AppVersion.Display diff --git a/src/NoteBookmark.MauiApp/Components/Layout/MainLayout.razor b/src/NoteBookmark.MauiApp/Components/Layout/MainLayout.razor index 6cee2e8..6a5435b 100644 --- a/src/NoteBookmark.MauiApp/Components/Layout/MainLayout.razor +++ b/src/NoteBookmark.MauiApp/Components/Layout/MainLayout.razor @@ -10,34 +10,39 @@ @implements IDisposable -
-
- -
+ + + Note Bookmark + + -
- @if (isOffline) - { -
- You are currently offline. Changes will be saved locally. + + + + @if (isOffline) + { + + You are currently offline. Changes will be saved locally. + + } +
+ @Body
- } -
- About -
- -
- @Body -
- - - See the code - - About Frank -   ·  @appVersion - -
-
+ + + + + + + + + + + About Frank B + + v. @appVersion + + diff --git a/src/NoteBookmark.MauiApp/Components/Layout/MainLayout.razor.css b/src/NoteBookmark.MauiApp/Components/Layout/MainLayout.razor.css index 493af1c..d3f5a12 100644 --- a/src/NoteBookmark.MauiApp/Components/Layout/MainLayout.razor.css +++ b/src/NoteBookmark.MauiApp/Components/Layout/MainLayout.razor.css @@ -1,95 +1 @@ -.page { - position: relative; - display: flex; - flex-direction: column; - min-height: 100vh; -} -main { - flex: 1; - display: flex; - flex-direction: column; -} - -.content { - flex: 1; -} - -.offline-banner { - background-color: #ff9800; - color: white; - text-align: center; - padding: 10px; - font-weight: bold; - position: sticky; - top: 0; - z-index: 10; -} - -.sidebar { - background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%); -} - -.top-row { - background-color: #f7f7f7; - border-bottom: 1px solid #d6d5d5; - justify-content: flex-end; - height: 3.5rem; - display: flex; - align-items: center; -} - - .top-row ::deep a, .top-row ::deep .btn-link { - white-space: nowrap; - margin-left: 1.5rem; - text-decoration: none; - } - - .top-row ::deep a:hover, .top-row ::deep .btn-link:hover { - text-decoration: underline; - } - - .top-row ::deep a:first-child { - overflow: hidden; - text-overflow: ellipsis; - } - -@media (max-width: 640.98px) { - .top-row { - justify-content: space-between; - } - - .top-row ::deep a, .top-row ::deep .btn-link { - margin-left: 0; - } -} - -@media (min-width: 641px) { - .page { - flex-direction: row; - } - - .sidebar { - width: 250px; - height: 100vh; - position: sticky; - top: 0; - } - - .top-row { - position: sticky; - top: 0; - z-index: 1; - } - - .top-row.auth ::deep a:first-child { - flex: 1; - text-align: right; - width: 0; - } - - .top-row, article { - padding-left: 2rem !important; - padding-right: 1.5rem !important; - } -} diff --git a/src/NoteBookmark.MauiApp/Components/Layout/NavMenu.razor b/src/NoteBookmark.MauiApp/Components/Layout/NavMenu.razor index 66db6a1..9f79ad7 100644 --- a/src/NoteBookmark.MauiApp/Components/Layout/NavMenu.razor +++ b/src/NoteBookmark.MauiApp/Components/Layout/NavMenu.razor @@ -1,47 +1,39 @@ -
-
- NoteBookmark.MauiApp +@using Microsoft.FluentUI.AspNetCore.Components + +
+ +
+ +
+ + +
+ + Home + Posts + Summaries + Generate Summary + Search + App Settings + Server Settings +
- +@code { + private bool isMenuOpen = false; -
- -
+ private void ToggleMenu() + { + isMenuOpen = !isMenuOpen; + } + + private void CloseMenu() + { + isMenuOpen = false; + } +} diff --git a/src/NoteBookmark.MauiApp/Components/Layout/NavMenu.razor.css b/src/NoteBookmark.MauiApp/Components/Layout/NavMenu.razor.css index e9ba49d..b669897 100644 --- a/src/NoteBookmark.MauiApp/Components/Layout/NavMenu.razor.css +++ b/src/NoteBookmark.MauiApp/Components/Layout/NavMenu.razor.css @@ -1,105 +1,55 @@ -.navbar-toggler { - appearance: none; - cursor: pointer; - width: 3.5rem; - height: 2.5rem; - color: white; - position: absolute; - top: 0.5rem; - right: 1rem; - border: 1px solid rgba(255, 255, 255, 0.1); - background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1); -} - -.navbar-toggler:checked { - background-color: rgba(255, 255, 255, 0.5); -} - -.top-row { - min-height: 3.5rem; - background-color: rgba(0,0,0,0.4); -} - -.navbar-brand { - font-size: 1.1rem; -} - -.bi { - display: inline-block; - position: relative; - width: 1.25rem; - height: 1.25rem; - margin-right: 0.75rem; - top: -1px; - background-size: cover; -} - -.bi-house-door-fill-nav-menu { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E"); -} - -.bi-plus-square-fill-nav-menu { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E"); -} - -.bi-list-nested-nav-menu { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E"); -} - -.nav-item { - font-size: 0.9rem; - padding-bottom: 0.5rem; +/* By default, hide the mobile header containing the hamburger button on larger screens */ +.mobile-header { + display: none; } - .nav-item:first-of-type { - padding-top: 1rem; +/* On desktop view (>= 601px wide screen) */ +@media (min-width: 601px) { + .nav-menu-wrapper { + display: block; } +} - .nav-item:last-of-type { - padding-bottom: 1rem; +/* On mobile view (< 601px wide screen) */ +@media (max-width: 600px) { + .navmenu-container { + width: 100%; + position: relative; } - .nav-item ::deep .nav-link { - color: #d7d7d7; - background: none; - border: none; - border-radius: 4px; - height: 3rem; + .mobile-header { display: flex; align-items: center; - line-height: 3rem; - width: 100%; + justify-content: flex-end; + padding: 5px 10px; + height: 40px; + background-color: var(--neutral-layer-1); + border-bottom: 1px solid var(--neutral-stroke-divider-rest); } -.nav-item ::deep a.active { - background-color: rgba(255,255,255,0.37); - color: white; -} - -.nav-item ::deep .nav-link:hover { - background-color: rgba(255,255,255,0.1); - color: white; -} - -.nav-scrollable { - display: none; -} - -.navbar-toggler:checked ~ .nav-scrollable { - display: block; -} - -@media (min-width: 641px) { - .navbar-toggler { + .nav-menu-wrapper { display: none; + position: fixed; + top: 90px; /* Header height (50px) + mobile header height (40px) */ + left: 0; + right: 0; + bottom: 0; + z-index: 99; + background-color: var(--neutral-fill-layer-rest); + border-top: 1px solid var(--neutral-stroke-divider-rest); + overflow-y: auto; } - .nav-scrollable { - /* Never collapse the sidebar for wide screens */ + .nav-menu-wrapper.open { display: block; + } - /* Allow sidebar to scroll for tall menus */ - height: calc(100vh - 3.5rem); - overflow-y: auto; + .nav-menu-wrapper ::deep #main-menu { + width: 100% !important; + } + + /* Hide the inner expander button in FluentNavMenu on mobile */ + .nav-menu-wrapper ::deep #main-menu > div:first-child:is(.expander) { + display: none; } } diff --git a/src/NoteBookmark.MauiApp/NoteBookmark.MauiApp.csproj b/src/NoteBookmark.MauiApp/NoteBookmark.MauiApp.csproj index 94009fb..61dc569 100644 --- a/src/NoteBookmark.MauiApp/NoteBookmark.MauiApp.csproj +++ b/src/NoteBookmark.MauiApp/NoteBookmark.MauiApp.csproj @@ -44,9 +44,9 @@ c5m.notebookmark.mauiapp - 1.2.1 + 1.2.2 2 - 1.2.1 + 1.2.2 None diff --git a/src/NoteBookmark.MauiApp/wwwroot/app.css b/src/NoteBookmark.MauiApp/wwwroot/app.css index fbd355d..77e3472 100644 --- a/src/NoteBookmark.MauiApp/wwwroot/app.css +++ b/src/NoteBookmark.MauiApp/wwwroot/app.css @@ -119,3 +119,34 @@ footer a:hover { text-decoration: underline; } +.main { + min-height: calc(100dvh - 86px); + align-items: stretch !important; +} + +.body-content { + align-self: stretch; + height: calc(100dvh - 86px) !important; + display: flex; + flex-direction: column; +} + +.content { + padding: 1rem; + flex: 1; +} + +@media (max-width: 600px) { + .main { + flex-direction: column !important; + row-gap: 0 !important; + height: auto !important; + min-height: calc(100dvh - 86px); + } + + .body-content { + height: auto !important; + flex: 1; + } +} +