diff --git a/modules/cal/components/folk-calendar-view.ts b/modules/cal/components/folk-calendar-view.ts index 133dd50..5886d3d 100644 --- a/modules/cal/components/folk-calendar-view.ts +++ b/modules/cal/components/folk-calendar-view.ts @@ -79,13 +79,13 @@ class FolkCalendarView extends HTMLElement { :host { display: block; font-family: system-ui, -apple-system, sans-serif; color: #e0e0e0; } * { box-sizing: border-box; } - .header { display: flex; gap: 8px; margin-bottom: 16px; align-items: center; } - .nav-btn { padding: 6px 12px; border-radius: 6px; border: 1px solid #444; background: #1e1e2e; color: #ccc; cursor: pointer; font-size: 16px; } - .nav-btn:hover { border-color: #666; } - .header-title { font-size: 18px; font-weight: 600; flex: 1; text-align: center; } - .toggle-btn { padding: 6px 12px; border-radius: 6px; border: 1px solid #444; background: #1e1e2e; color: #ccc; cursor: pointer; font-size: 12px; } + .rapp-nav { display: flex; gap: 8px; margin-bottom: 16px; align-items: center; min-height: 36px; } + .rapp-nav__back { padding: 4px 10px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.1); background: transparent; color: #94a3b8; cursor: pointer; font-size: 16px; } + .rapp-nav__back:hover { color: #e2e8f0; border-color: rgba(255,255,255,0.2); } + .rapp-nav__title { font-size: 15px; font-weight: 600; flex: 1; text-align: center; color: #e2e8f0; } + .toggle-btn { padding: 4px 10px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.1); background: transparent; color: #94a3b8; cursor: pointer; font-size: 12px; } .toggle-btn.active { border-color: #6366f1; color: #6366f1; } - .create-btn { padding: 6px 14px; border-radius: 6px; border: none; background: #6366f1; color: #fff; font-weight: 600; cursor: pointer; font-size: 12px; } + .rapp-nav__btn { padding: 6px 14px; border-radius: 6px; border: none; background: #4f46e5; color: #fff; font-weight: 600; cursor: pointer; font-size: 12px; } .weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 4px; } .weekday { text-align: center; font-size: 11px; color: #666; padding: 4px; font-weight: 600; } @@ -119,11 +119,11 @@ class FolkCalendarView extends HTMLElement { ${this.error ? `
${this.esc(this.error)}
` : ""} -
- - ${monthName} ${year} +
+ + ${monthName} ${year} - +
${this.sources.length > 0 ? `
diff --git a/modules/cart/components/folk-cart-shop.ts b/modules/cart/components/folk-cart-shop.ts index f5b6b2a..c38abc6 100644 --- a/modules/cart/components/folk-cart-shop.ts +++ b/modules/cart/components/folk-cart-shop.ts @@ -49,8 +49,8 @@ class FolkCartShop extends HTMLElement { this.shadow.innerHTML = ` -
-

\u{1F6D2} Community Shop

+
+ Shop
diff --git a/modules/choices/components/folk-choices-dashboard.ts b/modules/choices/components/folk-choices-dashboard.ts index d5af20b..911e6ce 100644 --- a/modules/choices/components/folk-choices-dashboard.ts +++ b/modules/choices/components/folk-choices-dashboard.ts @@ -55,8 +55,8 @@ class FolkChoicesDashboard extends HTMLElement { this.shadow.innerHTML = ` -
-

\u2611 Choices

+
+ Choices
\u2795 New on Canvas
diff --git a/modules/data/components/folk-analytics-view.ts b/modules/data/components/folk-analytics-view.ts index e723d43..799ec2a 100644 --- a/modules/data/components/folk-analytics-view.ts +++ b/modules/data/components/folk-analytics-view.ts @@ -37,9 +37,7 @@ class FolkAnalyticsView extends HTMLElement {
-
-

Privacy-First Analytics

-

Zero-knowledge, cookieless, self-hosted analytics for the r* ecosystem. Know how your tools are used without compromising anyone's privacy.

-
+

Zero-knowledge, cookieless, self-hosted analytics for the r* ecosystem. Know how your tools are used without compromising anyone's privacy.

@@ -108,14 +103,14 @@ class FolkAnalyticsView extends HTMLElement {
-
Tracking the r* Ecosystem
+
Tracked Apps
${(stats.apps || []).map((a: string) => `${a}`).join("")}
- Open Dashboard + Open Full Dashboard →
`; diff --git a/modules/forum/components/folk-forum-dashboard.ts b/modules/forum/components/folk-forum-dashboard.ts index 08b4986..4694cb5 100644 --- a/modules/forum/components/folk-forum-dashboard.ts +++ b/modules/forum/components/folk-forum-dashboard.ts @@ -164,15 +164,19 @@ class FolkForumDashboard extends HTMLElement { @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } - .toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } + .rapp-nav { display: flex; gap: 8px; margin-bottom: 16px; align-items: center; min-height: 36px; } + .rapp-nav__back { padding: 4px 10px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.1); background: transparent; color: #94a3b8; cursor: pointer; font-size: 13px; } + .rapp-nav__back:hover { color: #e2e8f0; border-color: rgba(255,255,255,0.2); } + .rapp-nav__title { font-size: 15px; font-weight: 600; flex: 1; color: #e2e8f0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } + .rapp-nav__btn { padding: 6px 14px; border-radius: 6px; border: none; background: #4f46e5; color: #fff; font-weight: 600; cursor: pointer; font-size: 13px; } + .rapp-nav__btn:hover { background: #6366f1; } button { - padding: 6px 14px; border-radius: 4px; border: 1px solid #555; - background: #2a4a7a; color: #e0e0e0; cursor: pointer; font-size: 13px; + padding: 6px 14px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.1); + background: transparent; color: #94a3b8; cursor: pointer; font-size: 13px; } - button:hover { background: #3a5a9a; } - button.danger { background: #7a2a2a; } - button.danger:hover { background: #9a3a3a; } - button.secondary { background: #333; } + button:hover { color: #e2e8f0; border-color: rgba(255,255,255,0.2); } + button.danger { background: rgba(239,68,68,0.15); border-color: rgba(239,68,68,0.3); color: #ef4444; } + button.danger:hover { background: rgba(239,68,68,0.25); } input, select { background: #2a2a3e; border: 1px solid #444; color: #e0e0e0; @@ -229,9 +233,9 @@ class FolkForumDashboard extends HTMLElement { private renderList(): string { return ` -
-

\uD83D\uDCAC Forum Instances

- +
+ Forum Instances +
${this.loading ? '
Loading...
' : ""} @@ -259,8 +263,9 @@ class FolkForumDashboard extends HTMLElement { if (!inst) return ""; return ` -
- +
+ + ${this.esc(inst.name)} ${inst.status !== "destroyed" ? `` : ""}
@@ -303,8 +308,9 @@ class FolkForumDashboard extends HTMLElement { private renderCreate(): string { return ` -
- +
+ + Deploy New Forum
diff --git a/modules/funds/components/folk-funds-app.ts b/modules/funds/components/folk-funds-app.ts index e6b0a9b..a581669 100644 --- a/modules/funds/components/folk-funds-app.ts +++ b/modules/funds/components/folk-funds-app.ts @@ -193,23 +193,23 @@ class FolkFundsApp extends HTMLElement { return `
-
-

rFunds

-

Token Bonding Flow Funnel

-

- Design transparent resource flows with sufficiency-based cascading. - Funnels fill to their threshold, then overflow routes surplus to the next layer — - ensuring every level has enough before abundance cascades forward. -

-
- Try the Demo → +
+ Flows +
+ Demo ${authed - ? `` - : `Sign in to create flows` + ? `` + : `Sign in to create flows` }
+
+ Design transparent resource flows with sufficiency-based cascading. + Funnels fill to their threshold, then overflow routes surplus to the next layer — + ensuring every level has enough before abundance cascades forward. +
+
@@ -316,10 +316,10 @@ class FolkFundsApp extends HTMLElement { return `
-
- ← All Flows -

${this.esc(this.flowName || "Flow Detail")}

- ${this.isDemo ? 'Demo' : ""} +
+ ← Flows + ${this.esc(this.flowName || "Flow Detail")} + ${this.isDemo ? 'Demo' : ""}
diff --git a/modules/funds/components/funds.css b/modules/funds/components/funds.css index 78d02aa..b099487 100644 --- a/modules/funds/components/funds.css +++ b/modules/funds/components/funds.css @@ -1,9 +1,4 @@ /* ── Funds module theme ───────────────────────────────── */ -body[data-theme="light"] main { - background: #0f172a; - min-height: calc(100vh - 56px); - padding: 0; -} /* ── Shared utility classes ──────────────────────────── */ .funds-loading { text-align: center; color: #64748b; padding: 48px 16px; font-size: 14px; } @@ -12,34 +7,6 @@ body[data-theme="light"] main { /* ── Landing page ────────────────────────────────────── */ .funds-landing { max-width: 960px; margin: 0 auto; padding: 24px 20px 64px; } -.funds-hero { - text-align: center; - padding: 56px 20px 48px; - border-bottom: 1px solid #1e293b; - margin-bottom: 48px; -} -.funds-hero__title { - font-size: 42px; font-weight: 800; margin: 0 0 8px; - background: linear-gradient(135deg, #0ea5e9, #6366f1, #ec4899); - -webkit-background-clip: text; -webkit-text-fill-color: transparent; - background-clip: text; -} -.funds-hero__subtitle { font-size: 18px; color: #94a3b8; margin: 0 0 16px; font-weight: 500; } -.funds-hero__desc { font-size: 15px; color: #64748b; line-height: 1.7; max-width: 560px; margin: 0 auto 28px; } -.funds-hero__desc em { color: #fbbf24; font-style: normal; font-weight: 600; } -.funds-hero__actions { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; } -.funds-hero__cta { - display: inline-block; padding: 10px 24px; border-radius: 8px; - background: #4f46e5; color: #fff; text-decoration: none; font-weight: 600; font-size: 14px; - border: none; cursor: pointer; transition: background 0.2s; -} -.funds-hero__cta:hover { background: #6366f1; } -.funds-hero__cta--secondary { - background: transparent; border: 1px solid #4f46e5; color: #a5b4fc; -} -.funds-hero__cta--secondary:hover { background: rgba(79,70,229,0.15); } -.funds-hero__auth-hint { font-size: 13px; color: #64748b; } - /* Features grid */ .funds-features { margin-bottom: 48px; } .funds-features__grid { @@ -106,16 +73,6 @@ body[data-theme="light"] main { /* ── Detail view ─────────────────────────────────────── */ .funds-detail { max-width: 1100px; margin: 0 auto; padding: 16px 20px 64px; } -.funds-detail__header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; } -.funds-detail__back { - color: #64748b; text-decoration: none; font-size: 13px; padding: 4px 0; -} -.funds-detail__back:hover { color: #e2e8f0; } -.funds-detail__title { font-size: 22px; font-weight: 700; color: #e2e8f0; margin: 0; flex: 1; } -.funds-detail__badge { - font-size: 11px; font-weight: 600; color: #fbbf24; background: rgba(251,191,36,0.15); - border: 1px solid rgba(251,191,36,0.3); border-radius: 4px; padding: 2px 8px; -} /* ── Tabs ────────────────────────────────────────────── */ .funds-tabs { diff --git a/modules/inbox/components/folk-inbox-client.ts b/modules/inbox/components/folk-inbox-client.ts index d43ad5f..1df423f 100644 --- a/modules/inbox/components/folk-inbox-client.ts +++ b/modules/inbox/components/folk-inbox-client.ts @@ -90,11 +90,11 @@ class FolkInboxClient extends HTMLElement { -
-

\u{1F3ED} Provider Directory

+
+ Provider Directory
diff --git a/modules/trips/components/folk-route-planner.ts b/modules/trips/components/folk-route-planner.ts index 65fa8e7..5391ac6 100644 --- a/modules/trips/components/folk-route-planner.ts +++ b/modules/trips/components/folk-route-planner.ts @@ -409,9 +409,9 @@ class FolkRoutePlanner extends HTMLElement {
-
-

rTrips — Route Planner

-

Plan paths between destinations. Fit conic arcs and find where routes intersect.

+
+ Route Planner + Plan paths between destinations. Fit conic arcs and find where routes intersect.
diff --git a/modules/trips/components/folk-trips-planner.ts b/modules/trips/components/folk-trips-planner.ts index 0a28dfb..54b93ef 100644 --- a/modules/trips/components/folk-trips-planner.ts +++ b/modules/trips/components/folk-trips-planner.ts @@ -69,11 +69,12 @@ class FolkTripsPlanner extends HTMLElement { :host { display: block; font-family: system-ui, -apple-system, sans-serif; color: #e0e0e0; } * { box-sizing: border-box; } - .header { display: flex; gap: 8px; margin-bottom: 16px; align-items: center; } - .nav-btn { padding: 6px 14px; border-radius: 6px; border: 1px solid #444; background: #1e1e2e; color: #ccc; cursor: pointer; font-size: 13px; } - .header-title { font-size: 18px; font-weight: 600; margin-left: 8px; flex: 1; } - .create-btn { padding: 8px 16px; border-radius: 8px; border: none; background: #14b8a6; color: #fff; font-weight: 600; cursor: pointer; font-size: 13px; } - .create-btn:hover { background: #0d9488; } + .rapp-nav { display: flex; gap: 8px; margin-bottom: 16px; align-items: center; min-height: 36px; } + .rapp-nav__back { padding: 4px 10px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.1); background: transparent; color: #94a3b8; cursor: pointer; font-size: 13px; } + .rapp-nav__back:hover { color: #e2e8f0; border-color: rgba(255,255,255,0.2); } + .rapp-nav__title { font-size: 15px; font-weight: 600; flex: 1; color: #e2e8f0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } + .rapp-nav__btn { padding: 6px 14px; border-radius: 6px; border: none; background: #14b8a6; color: #fff; font-weight: 600; cursor: pointer; font-size: 13px; } + .rapp-nav__btn:hover { background: #0d9488; } .trip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; } .trip-card { background: #1e1e2e; border: 1px solid #333; border-radius: 10px; padding: 16px; cursor: pointer; transition: border-color 0.2s; } @@ -114,9 +115,9 @@ class FolkTripsPlanner extends HTMLElement { private renderList(): string { return ` -
- \u2708\uFE0F My Trips - +
+ My Trips +
${this.trips.length > 0 ? `
${this.trips.map(t => ` @@ -141,9 +142,9 @@ class FolkTripsPlanner extends HTMLElement { if (!this.trip) return '
Loading...
'; const t = this.trip; return ` -
- - \u2708\uFE0F ${this.esc(t.title)} +
+ + ${this.esc(t.title)} ${t.status || "PLANNING"}
diff --git a/modules/vote/components/folk-vote-dashboard.ts b/modules/vote/components/folk-vote-dashboard.ts index a9f01c3..fce8e08 100644 --- a/modules/vote/components/folk-vote-dashboard.ts +++ b/modules/vote/components/folk-vote-dashboard.ts @@ -145,14 +145,10 @@ class FolkVoteDashboard extends HTMLElement { :host { display: block; font-family: system-ui, -apple-system, sans-serif; color: #e0e0e0; } * { box-sizing: border-box; } - .nav { display: flex; gap: 8px; margin-bottom: 20px; align-items: center; } - .nav-btn { - padding: 6px 14px; border-radius: 6px; border: 1px solid #444; - background: #1e1e2e; color: #ccc; cursor: pointer; font-size: 13px; - } - .nav-btn:hover { border-color: #666; } - .nav-btn.active { border-color: #6366f1; color: #a5b4fc; } - .nav-title { font-size: 18px; font-weight: 600; margin-left: 8px; } + .rapp-nav { display: flex; gap: 8px; margin-bottom: 16px; align-items: center; min-height: 36px; } + .rapp-nav__back { padding: 4px 10px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.1); background: transparent; color: #94a3b8; cursor: pointer; font-size: 13px; } + .rapp-nav__back:hover { color: #e2e8f0; border-color: rgba(255,255,255,0.2); } + .rapp-nav__title { font-size: 15px; font-weight: 600; flex: 1; color: #e2e8f0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .card { background: #1e1e2e; border: 1px solid #333; border-radius: 10px; @@ -213,8 +209,8 @@ class FolkVoteDashboard extends HTMLElement { private renderSpaces(): string { return ` -
- Voting Spaces +
+ Voting Spaces
${this.spaces.length === 0 ? '
No voting spaces yet. Create one to get started.
' : ""} ${this.spaces.map((s) => ` @@ -234,9 +230,9 @@ class FolkVoteDashboard extends HTMLElement { private renderProposals(): string { const s = this.selectedSpace!; return ` -
- - ${this.esc(s.name)} — Proposals +
+ + ${this.esc(s.name)} — Proposals
${this.proposals.length === 0 ? '
No proposals yet.
' : ""} ${this.proposals.map((p) => ` @@ -267,9 +263,9 @@ class FolkVoteDashboard extends HTMLElement { private renderProposal(): string { const p = this.selectedProposal!; return ` -
- - ${this.esc(p.title)} +
+ + ${this.esc(p.title)} ${p.status}
diff --git a/modules/work/components/folk-work-board.ts b/modules/work/components/folk-work-board.ts index 59e00ad..596dc7c 100644 --- a/modules/work/components/folk-work-board.ts +++ b/modules/work/components/folk-work-board.ts @@ -110,12 +110,12 @@ class FolkWorkBoard extends HTMLElement { :host { display: block; font-family: system-ui, -apple-system, sans-serif; color: #e0e0e0; } * { box-sizing: border-box; } - .header { display: flex; gap: 8px; margin-bottom: 16px; align-items: center; } - .nav-btn { padding: 6px 14px; border-radius: 6px; border: 1px solid #444; background: #1e1e2e; color: #ccc; cursor: pointer; font-size: 13px; } - .nav-btn:hover { border-color: #666; } - .header-title { font-size: 18px; font-weight: 600; margin-left: 8px; flex: 1; } - .create-btn { padding: 8px 16px; border-radius: 8px; border: none; background: #6366f1; color: #fff; font-weight: 600; cursor: pointer; font-size: 13px; } - .create-btn:hover { background: #4f46e5; } + .rapp-nav { display: flex; gap: 8px; margin-bottom: 16px; align-items: center; min-height: 36px; } + .rapp-nav__back { padding: 4px 10px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.1); background: transparent; color: #94a3b8; cursor: pointer; font-size: 13px; text-decoration: none; } + .rapp-nav__back:hover { color: #e2e8f0; border-color: rgba(255,255,255,0.2); } + .rapp-nav__title { font-size: 15px; font-weight: 600; flex: 1; color: #e2e8f0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } + .rapp-nav__btn { padding: 6px 14px; border-radius: 6px; border: none; background: #4f46e5; color: #fff; font-weight: 600; cursor: pointer; font-size: 13px; } + .rapp-nav__btn:hover { background: #6366f1; } .workspace-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; } .workspace-card { @@ -160,9 +160,9 @@ class FolkWorkBoard extends HTMLElement { private renderList(): string { return ` -
- Workspaces - +
+ Workspaces +
${this.workspaces.length > 0 ? `
${this.workspaces.map(ws => ` @@ -180,10 +180,10 @@ class FolkWorkBoard extends HTMLElement { private renderBoard(): string { return ` -
- - ${this.esc(this.workspaceSlug)} - +
+ + ${this.esc(this.workspaceSlug)} +
${this.statuses.map(status => { diff --git a/website/public/shell.css b/website/public/shell.css index 5416bdc..6168e26 100644 --- a/website/public/shell.css +++ b/website/public/shell.css @@ -112,6 +112,89 @@ body { gap: 0; } +/* ── Shared in-app navigation bar (used by module components) ── */ + +.rapp-nav { + display: flex; + align-items: center; + gap: 8px; + margin-bottom: 16px; + padding: 0; + min-height: 36px; +} + +.rapp-nav__back { + padding: 4px 10px; + border-radius: 6px; + border: 1px solid rgba(255,255,255,0.1); + background: transparent; + color: #94a3b8; + cursor: pointer; + font-size: 13px; + text-decoration: none; + transition: color 0.15s, border-color 0.15s; +} + +.rapp-nav__back:hover { + color: #e2e8f0; + border-color: rgba(255,255,255,0.2); +} + +.rapp-nav__title { + font-size: 15px; + font-weight: 600; + color: #e2e8f0; + flex: 1; + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.rapp-nav__actions { + display: flex; + align-items: center; + gap: 8px; + flex-shrink: 0; +} + +.rapp-nav__btn { + padding: 6px 14px; + border-radius: 6px; + border: none; + background: #4f46e5; + color: #fff; + font-weight: 600; + cursor: pointer; + font-size: 13px; + transition: background 0.15s; +} + +.rapp-nav__btn:hover { + background: #6366f1; +} + +.rapp-nav__btn--secondary { + background: transparent; + border: 1px solid rgba(255,255,255,0.15); + color: #94a3b8; +} + +.rapp-nav__btn--secondary:hover { + border-color: rgba(255,255,255,0.3); + color: #e2e8f0; +} + +.rapp-nav__badge { + font-size: 11px; + font-weight: 600; + color: #fbbf24; + background: rgba(251,191,36,0.15); + border: 1px solid rgba(251,191,36,0.3); + border-radius: 4px; + padding: 2px 8px; +} + /* ── Mobile adjustments ── */ @media (max-width: 640px) {