feat: ship phase 1 surface area (v0.2.0)

- primora CLI + @primora/mcp server over generated client
- auth users admin panel, mobile bottom nav
- release workflow: GHCR images, compiled binaries, npm tarballs
- fix gzip Content-Length truncation, nginx upstream re-resolution

Authored By: TDvorak <[email protected]>

Generated with [Devin](https://devin.ai)

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
This commit is contained in:
Tomas DvorakandDevin committed 2026-09-16 14:04:43 +02:00
1 parent f77823ad90
commit 420502eec1
90 files changed
+9172 -9718

No files matched your search

+2
View File
@@ -4,7 +4,9 @@ WORKDIR /app
# Copy root configs for workspace context
COPY package.json package-lock.json tsconfig.base.json ./
COPY apps/auth/package.json ./apps/auth/package.json
COPY apps/cli/package.json ./apps/cli/package.json
COPY apps/frontend/package.json ./apps/frontend/package.json
COPY apps/mcp/package.json ./apps/mcp/package.json
COPY packages/api-client/package.json ./packages/api-client/package.json
COPY packages/shared-types/package.json ./packages/shared-types/package.json
+13 -18
View File
@@ -1,32 +1,28 @@
<!doctype html>
<html lang="en" class="dark">
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="theme-color" content="#0d0d0f" />
<meta name="theme-color" content="#0b0d11" />
<meta name="color-scheme" content="dark" />
<meta name="description" content="Primora — A modern backend platform OS for developers" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<title>Primora — Backend Platform OS</title>
<!-- Favicon -->
<meta name="description" content="Primora — self-hosted backend console: storage, collections, API keys and audit logs." />
<title>Primora</title>
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&family=Inter:wght@400;500;600;700&display=swap"
href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap"
rel="stylesheet"
/>
<!-- Critical CSS for initial render -->
<style>
html { background: #0d0d0f; }
body { opacity: 0; animation: fadeIn 0.2s ease-out forwards; }
@keyframes fadeIn { to { opacity: 1; } }
html { background: #0a0a0b; color-scheme: dark; }
html.light { background: #fafaf9; color-scheme: light; }
body { opacity: 0; animation: primora-fade 0.2s ease-out forwards; }
@keyframes primora-fade { to { opacity: 1; } }
</style>
</head>
<body>
@@ -34,4 +30,3 @@
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
+8
View File
@@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<rect width="64" height="64" rx="14" fill="#f4693a"/>
<g fill="#ffffff">
<rect x="15" y="14" width="34" height="10" rx="5"/>
<rect x="15" y="27" width="23" height="10" rx="5" opacity="0.7"/>
<rect x="15" y="40" width="10" height="10" rx="5"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 334 B

-13
View File
@@ -1,13 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Primora - Neo-Brutalist Design Showcase</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main-showcase.tsx"></script>
</body>
</html>
+725 -953
View File
File diff suppressed because it is too large. Load diff
-350
View File
@@ -1,350 +0,0 @@
import { For, createSignal } from "solid-js";
import { Button, Card, CardHeader, Badge, Progress, Tabs, StatCard } from "./components";
export function ShowcasePage() {
const [activeTab, setActiveTab] = createSignal("components");
const stats = [
{ label: "Active Users", value: "1,247", trend: "up" as const, trendValue: "+12%" },
{ label: "Storage Used", value: "847 GB", trend: "up" as const, trendValue: "+8%" },
{ label: "API Requests", value: "2.4M", trend: "up" as const, trendValue: "+45%" },
{ label: "Projects", value: "23", trend: "neutral" as const },
];
const tableData = [
{ name: "Authentication Service", status: "active", uptime: "99.9%", requests: "1.2M" },
{ name: "Storage API", status: "active", uptime: "99.8%", requests: "847K" },
{ name: "Database", status: "active", uptime: "100%", requests: "2.1M" },
{ name: "Cache Layer", status: "degraded", uptime: "98.2%", requests: "3.4M" },
];
return (
<div class="min-h-screen bg-[var(--bg-main)] text-[var(--text-primary)] p-8">
<div class="max-w-7xl mx-auto space-y-12">
{/* Hero Section */}
<div class="space-y-4 animate-fade-in">
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-[var(--accent-muted)] border border-[var(--accent)] text-[var(--accent)] text-sm font-medium">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
Design System v1.0
</div>
<h1 class="text-5xl font-bold tracking-tight">
Primora Design System
</h1>
<p class="text-xl text-[var(--text-secondary)] max-w-2xl">
A refined, dark-first UI system built for developers. Clean, accessible, and production-ready.
</p>
</div>
{/* Stats Grid */}
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 animate-slide-up">
<For each={stats}>
{(stat) => (
<StatCard
label={stat.label}
value={stat.value}
trend={stat.trend}
trendValue={stat.trendValue}
/>
)}
</For>
</div>
{/* Tabs Section */}
<Card>
<Tabs
tabs={[
{ id: "components", label: "Components" },
{ id: "colors", label: "Colors" },
{ id: "typography", label: "Typography" },
]}
activeTab={activeTab()}
onChange={setActiveTab}
/>
<div class="mt-6">
{activeTab() === "components" && (
<div class="space-y-8">
{/* Buttons */}
<div>
<h3 class="text-lg font-semibold mb-4">Buttons</h3>
<div class="flex flex-wrap gap-3">
<Button variant="primary">Primary Button</Button>
<Button variant="secondary">Secondary Button</Button>
<Button variant="ghost">Ghost Button</Button>
<Button variant="danger">Danger Button</Button>
<Button variant="primary" size="sm">Small</Button>
<Button variant="primary" size="lg">Large</Button>
<Button variant="primary" loading>Loading...</Button>
</div>
</div>
{/* Badges */}
<div>
<h3 class="text-lg font-semibold mb-4">Badges</h3>
<div class="flex flex-wrap gap-3">
<Badge variant="primary">Primary</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="warning">Warning</Badge>
<Badge variant="error">Error</Badge>
<Badge variant="neutral">Neutral</Badge>
</div>
</div>
{/* Progress Bars */}
<div>
<h3 class="text-lg font-semibold mb-4">Progress Indicators</h3>
<div class="space-y-4">
<Progress value={75} showLabel label="CPU Usage" />
<Progress value={60} showLabel label="Memory" />
<Progress value={90} showLabel label="Disk Space" variant="warning" />
</div>
</div>
{/* Table */}
<div>
<h3 class="text-lg font-semibold mb-4">Data Table</h3>
<div class="table-container">
<table class="table">
<thead>
<tr>
<th>Service</th>
<th>Status</th>
<th>Uptime</th>
<th>Requests</th>
</tr>
</thead>
<tbody>
<For each={tableData}>
{(row) => (
<tr>
<td class="font-medium">{row.name}</td>
<td>
<Badge variant={row.status === "active" ? "success" : "warning"}>
{row.status}
</Badge>
</td>
<td class="text-[var(--text-secondary)]">{row.uptime}</td>
<td class="font-mono text-sm">{row.requests}</td>
</tr>
)}
</For>
</tbody>
</table>
</div>
</div>
</div>
)}
{activeTab() === "colors" && (
<div class="space-y-6">
<div>
<h3 class="text-lg font-semibold mb-4">Accent Color</h3>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
<div class="space-y-2">
<div class="h-20 rounded-lg bg-[var(--accent)] border border-[var(--border)]" />
<p class="text-sm font-mono text-[var(--text-secondary)]">#19a3d9</p>
<p class="text-xs text-[var(--text-muted)]">Primary Accent</p>
</div>
<div class="space-y-2">
<div class="h-20 rounded-lg bg-[var(--accent-hover)] border border-[var(--border)]" />
<p class="text-sm font-mono text-[var(--text-secondary)]">#22b8f0</p>
<p class="text-xs text-[var(--text-muted)]">Hover State</p>
</div>
<div class="space-y-2">
<div class="h-20 rounded-lg bg-[var(--accent-muted)] border border-[var(--border)]" />
<p class="text-sm font-mono text-[var(--text-secondary)]">rgba(25, 163, 217, 0.08)</p>
<p class="text-xs text-[var(--text-muted)]">Muted</p>
</div>
<div class="space-y-2">
<div class="h-20 rounded-lg bg-[var(--accent-subtle)] border border-[var(--border)]" />
<p class="text-sm font-mono text-[var(--text-secondary)]">rgba(25, 163, 217, 0.12)</p>
<p class="text-xs text-[var(--text-muted)]">Subtle</p>
</div>
</div>
</div>
<div>
<h3 class="text-lg font-semibold mb-4">Status Colors</h3>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
<div class="space-y-2">
<div class="h-20 rounded-lg bg-[var(--success)] border border-[var(--border)]" />
<p class="text-sm font-mono text-[var(--text-secondary)]">#22c55e</p>
<p class="text-xs text-[var(--text-muted)]">Success</p>
</div>
<div class="space-y-2">
<div class="h-20 rounded-lg bg-[var(--warning)] border border-[var(--border)]" />
<p class="text-sm font-mono text-[var(--text-secondary)]">#f59e0b</p>
<p class="text-xs text-[var(--text-muted)]">Warning</p>
</div>
<div class="space-y-2">
<div class="h-20 rounded-lg bg-[var(--error)] border border-[var(--border)]" />
<p class="text-sm font-mono text-[var(--text-secondary)]">#ef4444</p>
<p class="text-xs text-[var(--text-muted)]">Error</p>
</div>
<div class="space-y-2">
<div class="h-20 rounded-lg bg-[var(--info)] border border-[var(--border)]" />
<p class="text-sm font-mono text-[var(--text-secondary)]">#3b82f6</p>
<p class="text-xs text-[var(--text-muted)]">Info</p>
</div>
</div>
</div>
<div>
<h3 class="text-lg font-semibold mb-4">Surface Colors</h3>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
<div class="space-y-2">
<div class="h-20 rounded-lg bg-[var(--bg-main)] border border-[var(--border)]" />
<p class="text-sm font-mono text-[var(--text-secondary)]">#131315</p>
<p class="text-xs text-[var(--text-muted)]">Background</p>
</div>
<div class="space-y-2">
<div class="h-20 rounded-lg bg-[var(--surface-1)] border border-[var(--border)]" />
<p class="text-sm font-mono text-[var(--text-secondary)]">#1d1d21</p>
<p class="text-xs text-[var(--text-muted)]">Surface 1</p>
</div>
<div class="space-y-2">
<div class="h-20 rounded-lg bg-[var(--surface-2)] border border-[var(--border)]" />
<p class="text-sm font-mono text-[var(--text-secondary)]">#2d2d31</p>
<p class="text-xs text-[var(--text-muted)]">Surface 2</p>
</div>
<div class="space-y-2">
<div class="h-20 rounded-lg bg-[var(--surface-3)] border border-[var(--border)]" />
<p class="text-sm font-mono text-[var(--text-secondary)]">#4a4a4d</p>
<p class="text-xs text-[var(--text-muted)]">Surface 3</p>
</div>
</div>
</div>
</div>
)}
{activeTab() === "typography" && (
<div class="space-y-8">
<div>
<h3 class="text-lg font-semibold mb-4">Headings</h3>
<div class="space-y-4">
<div>
<h1 class="mb-1">Heading 1</h1>
<p class="text-sm text-[var(--text-muted)] font-mono">2rem / 32px - Bold</p>
</div>
<div>
<h2 class="mb-1">Heading 2</h2>
<p class="text-sm text-[var(--text-muted)] font-mono">1.5rem / 24px - Semibold</p>
</div>
<div>
<h3 class="mb-1">Heading 3</h3>
<p class="text-sm text-[var(--text-muted)] font-mono">1.25rem / 20px - Semibold</p>
</div>
<div>
<h4 class="mb-1">Heading 4</h4>
<p class="text-sm text-[var(--text-muted)] font-mono">1.125rem / 18px - Semibold</p>
</div>
</div>
</div>
<div>
<h3 class="text-lg font-semibold mb-4">Body Text</h3>
<div class="space-y-4">
<div>
<p class="text-[var(--text-primary)] mb-1">
Primary text color - used for main content and headings
</p>
<p class="text-sm text-[var(--text-muted)] font-mono">var(--text-primary) #ededf0</p>
</div>
<div>
<p class="text-[var(--text-secondary)] mb-1">
Secondary text color - used for supporting content
</p>
<p class="text-sm text-[var(--text-muted)] font-mono">var(--text-secondary) #bebec4</p>
</div>
<div>
<p class="text-[var(--text-muted)] mb-1">
Muted text color - used for labels and metadata
</p>
<p class="text-sm text-[var(--text-muted)] font-mono">var(--text-muted) #5b5b5f</p>
</div>
</div>
</div>
<div>
<h3 class="text-lg font-semibold mb-4">Code & Monospace</h3>
<div class="space-y-4">
<div>
<p class="mb-2">Inline code: <code>const value = "example";</code></p>
</div>
<div class="bg-[var(--surface-1)] border border-[var(--border)] rounded-lg p-4">
<pre class="font-mono text-sm text-[var(--text-secondary)]">
{`function greet(name: string) {
return \`Hello, \${name}!\`;
}
const message = greet("Primora");
console.log(message);`}
</pre>
</div>
</div>
</div>
</div>
)}
</div>
</Card>
{/* Design Principles */}
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<Card>
<div class="space-y-3">
<div class="w-12 h-12 rounded-lg bg-[var(--accent-muted)] flex items-center justify-center">
<svg class="w-6 h-6 text-[var(--accent)]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
</div>
<h3 class="text-lg font-semibold">Fast & Responsive</h3>
<p class="text-sm text-[var(--text-secondary)]">
Built with performance in mind. Smooth transitions and instant feedback.
</p>
</div>
</Card>
<Card>
<div class="space-y-3">
<div class="w-12 h-12 rounded-lg bg-[var(--success-muted)] flex items-center justify-center">
<svg class="w-6 h-6 text-[var(--success)]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<h3 class="text-lg font-semibold">Accessible</h3>
<p class="text-sm text-[var(--text-secondary)]">
WCAG AA compliant with full keyboard navigation and screen reader support.
</p>
</div>
</Card>
<Card>
<div class="space-y-3">
<div class="w-12 h-12 rounded-lg bg-[var(--warning-muted)] flex items-center justify-center">
<svg class="w-6 h-6 text-[var(--warning)]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
</svg>
</div>
<h3 class="text-lg font-semibold">Customizable</h3>
<p class="text-sm text-[var(--text-secondary)]">
CSS variables make it easy to adapt the design system to your brand.
</p>
</div>
</Card>
</div>
{/* Footer */}
<div class="text-center py-8 border-t border-[var(--border)]">
<p class="text-[var(--text-secondary)]">
Built with SolidJS, TypeScript, and Tailwind CSS
</p>
<p class="text-sm text-[var(--text-muted)] mt-2">
Primora Design System v1.0 - Dark-first, refined, developer-focused
</p>
</div>
</div>
</div>
);
}
+287
View File
@@ -0,0 +1,287 @@
import { type JSX, For, Show, createSignal, onCleanup, onMount } from "solid-js";
import type { OrganizationSummary, ProjectSummary } from "@primora/api-client";
import {
LogoMark,
IconOverview,
IconProjects,
IconMembers,
IconStorage,
IconCollections,
IconAudit,
IconAuth,
IconSettings,
IconSearch,
IconLogout,
IconMenu,
IconSun,
IconMoon,
IconX,
} from "./Icons";
export type ViewType =
| "dashboard"
| "projects"
| "members"
| "storage"
| "collections"
| "auth"
| "audit"
| "settings";
interface NavEntry {
id: ViewType;
label: string;
shortLabel?: string;
icon: (p: { class?: string }) => JSX.Element;
}
const projectNav: NavEntry[] = [
{ id: "dashboard", label: "Overview", icon: IconOverview },
{ id: "storage", label: "Storage", icon: IconStorage },
{ id: "collections", label: "Collections", icon: IconCollections },
{ id: "auth", label: "Authentication", shortLabel: "Auth", icon: IconAuth },
{ id: "audit", label: "Audit log", shortLabel: "Audit", icon: IconAudit },
];
// Instagram-style bottom bar caps at five slots — Audit stays reachable via Menu.
const bottomNav = projectNav.slice(0, 4);
const workspaceNav: NavEntry[] = [
{ id: "projects", label: "Projects", icon: IconProjects },
{ id: "members", label: "Members", icon: IconMembers },
{ id: "settings", label: "Settings", icon: IconSettings },
];
interface AppShellProps {
view: ViewType;
onNavigate: (view: ViewType) => void;
organizations: OrganizationSummary[];
projects: ProjectSummary[];
selectedOrgId: string | null;
selectedProjectId: string | null;
onSelectOrg: (id: string) => void;
onSelectProject: (id: string) => void;
userName?: string;
userEmail?: string;
onLogout: () => void;
onOpenPalette: () => void;
demoMode: boolean;
onExitDemo: () => void;
theme: "dark" | "light";
onToggleTheme: () => void;
health: "ok" | "warn" | "err";
healthLabel: string;
children?: JSX.Element;
}
const viewTitle: Record<ViewType, string> = {
dashboard: "Overview",
projects: "Projects",
members: "Members",
storage: "Storage",
collections: "Collections",
auth: "Authentication",
audit: "Audit log",
settings: "Settings",
};
function initials(name?: string, email?: string): string {
const src = name || email || "?";
return src
.split(/[\s@.]+/)
.filter(Boolean)
.slice(0, 2)
.map((s) => s[0]?.toUpperCase())
.join("");
}
export function AppShell(props: AppShellProps) {
const [sidebarOpen, setSidebarOpen] = createSignal(false);
const currentOrg = () =>
props.organizations.find((o) => o.id === props.selectedOrgId);
const currentProject = () =>
props.projects.find((p) => p.id === props.selectedProjectId);
const navigate = (view: ViewType) => {
props.onNavigate(view);
setSidebarOpen(false);
};
const handleKey = (e: KeyboardEvent) => {
if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
e.preventDefault();
props.onOpenPalette();
}
};
onMount(() => window.addEventListener("keydown", handleKey));
onCleanup(() => window.removeEventListener("keydown", handleKey));
const NavButton = (entry: NavEntry) => (
<button
class={`nav-item ${props.view === entry.id ? "active" : ""}`}
onClick={() => navigate(entry.id)}
aria-current={props.view === entry.id ? "page" : undefined}
>
<entry.icon class="w-4 h-4" />
{entry.label}
</button>
);
return (
<div class="shell">
<Show when={sidebarOpen()}>
<div class="sidebar-backdrop" onClick={() => setSidebarOpen(false)} />
</Show>
<aside class={`sidebar ${sidebarOpen() ? "open" : ""}`}>
<div class="sidebar-brand">
<LogoMark class="brand-mark" />
<span class="brand-name">Primora</span>
<button
class="icon-btn md:hidden ml-auto"
onClick={() => setSidebarOpen(false)}
aria-label="Close menu"
>
<IconX class="w-4 h-4" />
</button>
</div>
<div class="sidebar-context">
<div class="context-select">
<span class="ctx-icon">{(currentOrg()?.name ?? "?")[0]?.toUpperCase()}</span>
<span class="ctx-label">{currentOrg()?.name ?? "Select organization"}</span>
<select
aria-label="Select organization"
value={props.selectedOrgId ?? ""}
onChange={(e) => props.onSelectOrg(e.currentTarget.value)}
>
<For each={props.organizations}>
{(org) => <option value={org.id}>{org.name}</option>}
</For>
</select>
</div>
<div class="context-select">
<span class="ctx-icon" style="background: var(--accent-muted); color: var(--accent);">
{(currentProject()?.name ?? "?")[0]?.toUpperCase()}
</span>
<span class="ctx-label">{currentProject()?.name ?? "Select project"}</span>
<select
aria-label="Select project"
value={props.selectedProjectId ?? ""}
onChange={(e) => props.onSelectProject(e.currentTarget.value)}
>
<For each={props.projects}>
{(project) => <option value={project.id}>{project.name}</option>}
</For>
</select>
</div>
</div>
<nav class="sidebar-nav" aria-label="Primary">
<div class="nav-section">Project</div>
<For each={projectNav}>{NavButton}</For>
<div class="nav-section">Workspace</div>
<For each={workspaceNav}>{NavButton}</For>
</nav>
<div class="sidebar-footer">
<div class="user-card">
<span class="avatar" style="width: 1.75rem; height: 1.75rem; font-size: 0.625rem;">
{initials(props.userName, props.userEmail)}
</span>
<div class="flex-1 min-w-0">
<div class="user-name">{props.userName ?? "Account"}</div>
<div class="user-email">{props.userEmail ?? ""}</div>
</div>
<button
class="icon-btn"
onClick={props.onLogout}
aria-label="Sign out"
title="Sign out"
>
<IconLogout class="w-4 h-4" />
</button>
</div>
</div>
</aside>
<div class="main-col">
<header class="topbar">
<button
class="icon-btn md:hidden"
onClick={() => setSidebarOpen(true)}
aria-label="Open menu"
>
<IconMenu class="w-5 h-5" />
</button>
<nav class="topbar-breadcrumb" aria-label="Breadcrumb">
<span class="crumb">{currentOrg()?.name ?? "Workspace"}</span>
<span class="crumb-sep">/</span>
<span class="crumb">{currentProject()?.name ?? "—"}</span>
<span class="crumb-sep">/</span>
<span class="crumb current">{viewTitle[props.view]}</span>
</nav>
<div class="flex-1" />
<button class="topbar-search hidden sm:flex" onClick={props.onOpenPalette}>
<IconSearch class="w-3.5 h-3.5" />
<span>Search</span>
<span class="kbd">⌘K</span>
</button>
<div class="health-pill" title={`Backend ${props.healthLabel}`}>
<span class={`health-dot ${props.health}`} />
<span class="hidden md:inline">{props.healthLabel}</span>
</div>
<Show when={props.demoMode}>
<button class="demo-pill" onClick={props.onExitDemo} title="Exit demo mode">
<span class="health-dot warn" />
Demo — exit
</button>
</Show>
<button
class="icon-btn"
onClick={props.onToggleTheme}
aria-label="Toggle theme"
title={props.theme === "dark" ? "Switch to light theme" : "Switch to dark theme"}
>
<Show when={props.theme === "dark"} fallback={<IconMoon class="w-4 h-4" />}>
<IconSun class="w-4 h-4" />
</Show>
</button>
</header>
<main class="main-content">{props.children}</main>
<nav class="bottom-nav" aria-label="Primary">
<For each={bottomNav}>
{(entry) => (
<button
class={`bottom-nav-item ${props.view === entry.id ? "active" : ""}`}
onClick={() => navigate(entry.id)}
aria-current={props.view === entry.id ? "page" : undefined}
>
<entry.icon class="w-5 h-5" />
<span>{entry.shortLabel ?? entry.label}</span>
</button>
)}
</For>
<button
class={`bottom-nav-item ${bottomNav.some((e) => e.id === props.view) ? "" : "active"}`}
onClick={() => setSidebarOpen(true)}
aria-label="Open menu"
>
<IconMenu class="w-5 h-5" />
<span>Menu</span>
</button>
</nav>
</div>
</div>
);
}
+1 -1
View File
@@ -16,7 +16,7 @@ const variantClasses: Record<ButtonVariant, string> = {
secondary: "btn-secondary",
ghost: "btn-ghost",
danger: "btn-danger",
outline: "btn-secondary border border-gray-300",
outline: "btn-secondary",
};
const sizeClasses: Record<ButtonSize, string> = {
+3 -3
View File
@@ -121,11 +121,11 @@ export function StatCard(props: StatCardProps) {
<p class="stat-label">{props.label}</p>
<p class="stat-value">{props.value}</p>
<Show when={props.description}>
<p class="text-xs text-text-muted mt-1.5 leading-relaxed">{props.description}</p>
<p class="text-xs text-text-3 mt-1.5 leading-relaxed">{props.description}</p>
</Show>
</div>
<Show when={props.icon}>
<div class="text-text-muted opacity-40 group-hover:opacity-60 transition-opacity">{props.icon}</div>
<div class="text-text-3 opacity-40 group-hover:opacity-60 transition-opacity">{props.icon}</div>
</Show>
</div>
<Show when={props.trend && props.trendValue}>
@@ -135,7 +135,7 @@ export function StatCard(props: StatCardProps) {
? "text-success"
: props.trend === "down"
? "text-error"
: "text-text-muted"
: "text-text-3"
}`}
>
<Show when={props.trend === "up"}>
@@ -1,251 +0,0 @@
import { type JSX, For, Show, createSignal, createEffect, onCleanup } from "solid-js";
import { Portal } from "solid-js/web";
interface Command {
id: string;
label: string;
description?: string;
icon?: JSX.Element;
keywords?: string[];
shortcut?: string;
onExecute: () => void;
category?: string;
}
interface CommandPaletteProps {
commands: Command[];
placeholder?: string;
shortcut?: string;
}
export function CommandPalette(props: CommandPaletteProps) {
const [open, setOpen] = createSignal(false);
const [search, setSearch] = createSignal("");
const [selectedIndex, setSelectedIndex] = createSignal(0);
let inputRef: HTMLInputElement | undefined;
const shortcut = () => props.shortcut ?? "k";
// Filter commands based on search
const filteredCommands = () => {
const query = search().toLowerCase();
if (!query) return props.commands;
return props.commands.filter((cmd) => {
const searchText = [
cmd.label,
cmd.description,
...(cmd.keywords || []),
].join(" ").toLowerCase();
return searchText.includes(query);
});
};
// Group commands by category
const groupedCommands = () => {
const commands = filteredCommands();
const groups = new Map<string, Command[]>();
commands.forEach((cmd) => {
const category = cmd.category || "Commands";
if (!groups.has(category)) {
groups.set(category, []);
}
groups.get(category)!.push(cmd);
});
return Array.from(groups.entries());
};
// Keyboard shortcuts
createEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => {
// Open with Cmd/Ctrl + K
if ((e.metaKey || e.ctrlKey) && e.key === shortcut()) {
e.preventDefault();
setOpen(true);
return;
}
if (!open()) return;
// Close with Escape
if (e.key === "Escape") {
e.preventDefault();
setOpen(false);
setSearch("");
setSelectedIndex(0);
return;
}
// Navigate with arrows
if (e.key === "ArrowDown") {
e.preventDefault();
setSelectedIndex((i) => Math.min(i + 1, filteredCommands().length - 1));
} else if (e.key === "ArrowUp") {
e.preventDefault();
setSelectedIndex((i) => Math.max(i - 1, 0));
}
// Execute with Enter
if (e.key === "Enter") {
e.preventDefault();
const commands = filteredCommands();
if (commands[selectedIndex()]) {
executeCommand(commands[selectedIndex()]);
}
}
};
document.addEventListener("keydown", handleKeyDown);
onCleanup(() => document.removeEventListener("keydown", handleKeyDown));
});
// Focus input when opened
createEffect(() => {
if (open() && inputRef) {
requestAnimationFrame(() => inputRef?.focus());
}
});
// Reset selection when search changes
createEffect(() => {
search();
setSelectedIndex(0);
});
const executeCommand = (command: Command) => {
command.onExecute();
setOpen(false);
setSearch("");
setSelectedIndex(0);
};
return (
<>
{/* Trigger button */}
<button
class="flex items-center gap-2 px-3 py-1.5 text-sm text-text-secondary bg-surface-1 border border-border rounded-lg hover:border-border-hover transition-colors"
onClick={() => setOpen(true)}
>
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
<span>{props.placeholder ?? "Search..."}</span>
<kbd class="ml-auto px-1.5 py-0.5 text-xs bg-surface-2 border border-border rounded">
⌘{shortcut().toUpperCase()}
</kbd>
</button>
{/* Command palette modal */}
<Show when={open()}>
<Portal>
<div
class="fixed inset-0 z-50 flex items-start justify-center pt-[20vh] animate-fade-in"
onClick={() => setOpen(false)}
>
{/* Backdrop */}
<div class="absolute inset-0 bg-black/60 backdrop-blur-sm" />
{/* Palette */}
<div
class="relative w-full max-w-2xl bg-surface-1 border border-border-strong rounded-xl shadow-elevated animate-scale-in"
onClick={(e) => e.stopPropagation()}
>
{/* Search input */}
<div class="flex items-center gap-3 px-4 py-3 border-b border-border">
<svg class="h-5 w-5 text-text-muted" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
<input
ref={inputRef}
type="text"
class="flex-1 bg-transparent text-text-primary placeholder-text-muted outline-none"
placeholder={props.placeholder ?? "Type a command or search..."}
value={search()}
onInput={(e) => setSearch(e.currentTarget.value)}
/>
<kbd class="px-2 py-1 text-xs text-text-muted bg-surface-2 border border-border rounded">
ESC
</kbd>
</div>
{/* Commands list */}
<div class="max-h-[400px] overflow-y-auto py-2">
<Show
when={filteredCommands().length > 0}
fallback={
<div class="px-4 py-8 text-center text-text-muted">
<p>No commands found</p>
</div>
}
>
<For each={groupedCommands()}>
{([category, commands]) => (
<div class="mb-2">
<div class="px-4 py-1.5 text-xs font-semibold text-text-muted uppercase tracking-wider">
{category}
</div>
<For each={commands}>
{(command, index) => {
const globalIndex = filteredCommands().indexOf(command);
const isSelected = () => selectedIndex() === globalIndex;
return (
<button
class={`w-full flex items-center gap-3 px-4 py-2.5 text-left transition-colors ${
isSelected()
? "bg-accent-subtle text-accent"
: "text-text-primary hover:bg-surface-2"
}`}
onClick={() => executeCommand(command)}
onMouseEnter={() => setSelectedIndex(globalIndex)}
>
<Show when={command.icon}>
<span class="flex-shrink-0">{command.icon}</span>
</Show>
<div class="flex-1 min-w-0">
<div class="font-medium">{command.label}</div>
<Show when={command.description}>
<div class="text-xs text-text-muted truncate">
{command.description}
</div>
</Show>
</div>
<Show when={command.shortcut}>
<kbd class="px-2 py-1 text-xs bg-surface-2 border border-border rounded">
{command.shortcut}
</kbd>
</Show>
</button>
);
}}
</For>
</div>
)}
</For>
</Show>
</div>
{/* Footer */}
<div class="flex items-center justify-between px-4 py-2 border-t border-border text-xs text-text-muted">
<div class="flex items-center gap-4">
<span class="flex items-center gap-1">
<kbd class="px-1.5 py-0.5 bg-surface-2 border border-border rounded">↑</kbd>
<kbd class="px-1.5 py-0.5 bg-surface-2 border border-border rounded">↓</kbd>
to navigate
</span>
<span class="flex items-center gap-1">
<kbd class="px-1.5 py-0.5 bg-surface-2 border border-border rounded">↵</kbd>
to select
</span>
</div>
<span>{filteredCommands().length} commands</span>
</div>
</div>
</div>
</Portal>
</Show>
</>
);
}
@@ -1,7 +1,8 @@
import { Show, For, createSignal, createEffect, onCleanup } from "solid-js";
import { Portal } from "solid-js/web";
import { IconSearch } from "./Icons";
interface Command {
export interface PaletteCommand {
id: string;
label: string;
description?: string;
@@ -12,7 +13,7 @@ interface Command {
}
interface CommandPaletteEnhancedProps {
commands: Command[];
commands: PaletteCommand[];
isOpen: boolean;
onClose: () => void;
}
@@ -20,45 +21,40 @@ interface CommandPaletteEnhancedProps {
export function CommandPaletteEnhanced(props: CommandPaletteEnhancedProps) {
const [search, setSearch] = createSignal("");
const [selectedIndex, setSelectedIndex] = createSignal(0);
let inputRef: HTMLInputElement | undefined;
const filteredCommands = () => {
const query = search().toLowerCase();
const query = search().toLowerCase().trim();
if (!query) return props.commands;
return props.commands.filter(cmd => {
const searchText = `${cmd.label} ${cmd.description || ""} ${cmd.keywords?.join(" ") || ""}`.toLowerCase();
return props.commands.filter((cmd) => {
const searchText =
`${cmd.label} ${cmd.description || ""} ${cmd.keywords?.join(" ") || ""}`.toLowerCase();
return searchText.includes(query);
});
};
const groupedCommands = () => {
const commands = filteredCommands();
const groups: Record<string, Command[]> = {};
commands.forEach(cmd => {
const groups: Record<string, PaletteCommand[]> = {};
for (const cmd of filteredCommands()) {
const category = cmd.category || "General";
if (!groups[category]) {
groups[category] = [];
}
groups[category].push(cmd);
});
(groups[category] ??= []).push(cmd);
}
return groups;
};
const handleKeyDown = (e: KeyboardEvent) => {
if (!props.isOpen) return;
const commands = filteredCommands();
switch (e.key) {
case "ArrowDown":
e.preventDefault();
setSelectedIndex(i => Math.min(i + 1, commands.length - 1));
setSelectedIndex((i) => Math.min(i + 1, commands.length - 1));
break;
case "ArrowUp":
e.preventDefault();
setSelectedIndex(i => Math.max(i - 1, 0));
setSelectedIndex((i) => Math.max(i - 1, 0));
break;
case "Enter":
e.preventDefault();
@@ -79,6 +75,7 @@ export function CommandPaletteEnhanced(props: CommandPaletteEnhancedProps) {
document.addEventListener("keydown", handleKeyDown);
setSearch("");
setSelectedIndex(0);
queueMicrotask(() => inputRef?.focus());
}
onCleanup(() => {
@@ -86,84 +83,111 @@ export function CommandPaletteEnhanced(props: CommandPaletteEnhancedProps) {
});
});
createEffect(() => {
search();
setSelectedIndex(0);
});
return (
<Show when={props.isOpen}>
<Portal>
<div class="fixed inset-0 z-50 flex items-start justify-center pt-20 px-4 animate-fade-in">
{/* Backdrop */}
<div class="fixed inset-0 z-50 flex items-start justify-center pt-[15vh] px-4 animate-fade-in">
<div
class="absolute inset-0 bg-black/60 backdrop-blur-sm"
class="absolute inset-0"
style="background:rgba(0,0,0,0.55);backdrop-filter:blur(3px)"
onClick={props.onClose}
/>
{/* Command Palette */}
<div class="relative w-full max-w-2xl bg-white rounded-xl shadow-2xl animate-scale-in">
{/* Search Input */}
<div class="p-4 border-b border-gray-200">
<div class="flex items-center gap-3">
<svg class="w-5 h-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
<input
type="text"
placeholder="Search commands..."
value={search()}
onInput={(e) => setSearch(e.currentTarget.value)}
class="flex-1 bg-transparent border-none outline-none text-lg"
autofocus
/>
<kbd class="px-2 py-1 text-xs bg-gray-100 rounded border border-gray-300">ESC</kbd>
</div>
<div
class="relative w-full animate-scale-in"
style="max-width:34rem;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius-lg);box-shadow:var(--shadow-overlay);overflow:hidden"
role="dialog"
aria-label="Command palette"
>
{/* search */}
<div
class="flex items-center gap-3 px-4"
style="border-bottom:1px solid var(--border);height:3.25rem"
>
<IconSearch class="w-4 h-4 text-text-3" />
<input
ref={inputRef}
type="text"
placeholder="Type a command or search…"
value={search()}
onInput={(e) => setSearch(e.currentTarget.value)}
class="flex-1 bg-transparent border-none outline-none text-sm"
style="color:var(--text-1)"
/>
<kbd class="kbd">ESC</kbd>
</div>
{/* Commands List */}
<div class="max-h-96 overflow-y-auto">
{/* results */}
<div style="max-height:20rem;overflow-y:auto">
<Show
when={Object.keys(groupedCommands()).length > 0}
when={filteredCommands().length > 0}
fallback={
<div class="p-8 text-center text-gray-500">
<svg class="w-12 h-12 mx-auto mb-2 opacity-50" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<p>No commands found</p>
<div class="empty-state" style="padding:2.5rem 1.5rem">
<p class="empty-state-title">No results</p>
<p class="empty-state-description">
Nothing matches “{search()}”.
</p>
</div>
}
>
<For each={Object.entries(groupedCommands())}>
{([category, commands]) => (
<div>
<div class="px-4 py-2 text-xs font-semibold text-gray-500 uppercase bg-gray-50">
<div
class="px-4 py-1.5"
style="font-size:0.625rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-3)"
>
{category}
</div>
<For each={commands}>
{(command, index) => {
const globalIndex = filteredCommands().indexOf(command);
{(command) => {
const globalIndex = () =>
filteredCommands().indexOf(command);
return (
<button
class={`w-full flex items-center gap-3 px-4 py-3 text-left transition-colors ${
selectedIndex() === globalIndex
? "bg-blue-50 border-l-2 border-blue-500"
: "hover:bg-gray-50"
}`}
class="w-full flex items-center gap-3 px-4 text-left"
style={`padding-top:0.55rem;padding-bottom:0.55rem;background:${
selectedIndex() === globalIndex()
? "var(--accent-muted)"
: "transparent"
};border:none;cursor:pointer`}
onClick={() => {
command.action();
props.onClose();
}}
onMouseEnter={() => setSelectedIndex(globalIndex)}
onMouseEnter={() => setSelectedIndex(globalIndex())}
>
<Show when={command.icon}>
<div class="flex-shrink-0 w-8 h-8 flex items-center justify-center bg-gray-100 rounded-lg">
<span
class="flex items-center justify-center rounded-md flex-shrink-0"
style="width:1.75rem;height:1.75rem;background:var(--surface-2);color:var(--text-2)"
>
{command.icon}
</div>
</span>
</Show>
<div class="flex-1 min-w-0">
<div class="font-medium text-gray-900">{command.label}</div>
<span class="flex-1 min-w-0">
<span
class="block truncate"
style="font-size:0.8125rem;font-weight:500;color:var(--text-1)"
>
{command.label}
</span>
<Show when={command.description}>
<div class="text-sm text-gray-600 truncate">{command.description}</div>
<span
class="block truncate"
style="font-size:0.75rem;color:var(--text-3)"
>
{command.description}
</span>
</Show>
</div>
<Show when={selectedIndex() === globalIndex}>
<kbd class="px-2 py-1 text-xs bg-gray-100 rounded border border-gray-300">↵</kbd>
</span>
<Show when={selectedIndex() === globalIndex()}>
<kbd class="kbd">↵</kbd>
</Show>
</button>
);
@@ -175,17 +199,20 @@ export function CommandPaletteEnhanced(props: CommandPaletteEnhancedProps) {
</Show>
</div>
{/* Footer */}
<div class="p-3 border-t border-gray-200 bg-gray-50 flex items-center justify-between text-xs text-gray-600">
<div class="flex items-center gap-4">
{/* footer */}
<div
class="flex items-center justify-between px-4 text-xs"
style="height:2.5rem;border-top:1px solid var(--border);color:var(--text-3)"
>
<div class="flex items-center gap-3">
<span class="flex items-center gap-1">
<kbd class="px-1.5 py-0.5 bg-white rounded border border-gray-300">↑</kbd>
<kbd class="px-1.5 py-0.5 bg-white rounded border border-gray-300">↓</kbd>
Navigate
<kbd class="kbd">↑</kbd>
<kbd class="kbd">↓</kbd>
navigate
</span>
<span class="flex items-center gap-1">
<kbd class="px-1.5 py-0.5 bg-white rounded border border-gray-300">↵</kbd>
Select
<kbd class="kbd">↵</kbd>
select
</span>
</div>
<span>{filteredCommands().length} commands</span>
-296
View File
@@ -1,296 +0,0 @@
import { Show, For, createSignal, createMemo } from "solid-js";
import { Button, Input, Badge } from "./index";
export interface Column<T> {
key: keyof T | string;
label: string;
sortable?: boolean;
filterable?: boolean;
render?: (value: any, row: T) => any;
width?: string;
align?: "left" | "center" | "right";
}
export interface DataTableProps<T> {
data: T[];
columns: Column<T>[];
keyField: keyof T;
onRowClick?: (row: T) => void;
loading?: boolean;
emptyMessage?: string;
pageSize?: number;
searchable?: boolean;
exportable?: boolean;
onExport?: (data: T[]) => void;
}
export function DataTable<T extends Record<string, any>>(props: DataTableProps<T>) {
const [sortKey, setSortKey] = createSignal<keyof T | string | null>(null);
const [sortDirection, setSortDirection] = createSignal<"asc" | "desc">("asc");
const [searchQuery, setSearchQuery] = createSignal("");
const [currentPage, setCurrentPage] = createSignal(1);
const [filters, setFilters] = createSignal<Record<string, string>>({});
const pageSize = () => props.pageSize || 10;
// Filter data
const filteredData = createMemo(() => {
let result = [...props.data];
// Apply search
if (searchQuery().trim()) {
const query = searchQuery().toLowerCase();
result = result.filter(row => {
return props.columns.some(col => {
const value = row[col.key as keyof T];
return String(value).toLowerCase().includes(query);
});
});
}
// Apply column filters
const activeFilters = filters();
Object.entries(activeFilters).forEach(([key, value]) => {
if (value.trim()) {
result = result.filter(row => {
const cellValue = row[key as keyof T];
return String(cellValue).toLowerCase().includes(value.toLowerCase());
});
}
});
return result;
});
// Sort data
const sortedData = createMemo(() => {
const key = sortKey();
if (!key) return filteredData();
return [...filteredData()].sort((a, b) => {
const aVal = a[key as keyof T];
const bVal = b[key as keyof T];
let comparison = 0;
if (aVal < bVal) comparison = -1;
if (aVal > bVal) comparison = 1;
return sortDirection() === "asc" ? comparison : -comparison;
});
});
// Paginate data
const paginatedData = createMemo(() => {
const start = (currentPage() - 1) * pageSize();
const end = start + pageSize();
return sortedData().slice(start, end);
});
const totalPages = createMemo(() => Math.ceil(sortedData().length / pageSize()));
const handleSort = (key: keyof T | string) => {
if (sortKey() === key) {
setSortDirection(d => d === "asc" ? "desc" : "asc");
} else {
setSortKey(key);
setSortDirection("asc");
}
};
const handleFilterChange = (key: string, value: string) => {
setFilters(prev => ({ ...prev, [key]: value }));
setCurrentPage(1);
};
const getSortIcon = (key: keyof T | string) => {
if (sortKey() !== key) {
return (
<svg class="w-4 h-4 opacity-30" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4" />
</svg>
);
}
return sortDirection() === "asc" ? (
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" />
</svg>
) : (
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
);
};
return (
<div class="space-y-4">
{/* Toolbar */}
<div class="flex items-center justify-between gap-4">
<Show when={props.searchable}>
<Input
placeholder="Search..."
value={searchQuery()}
onInput={(e) => {
setSearchQuery(e.currentTarget.value);
setCurrentPage(1);
}}
class="max-w-sm"
/>
</Show>
<div class="flex items-center gap-2">
<Badge variant="secondary">
{sortedData().length} {sortedData().length === 1 ? "row" : "rows"}
</Badge>
<Show when={props.exportable && props.onExport}>
<Button
variant="outline"
size="sm"
onClick={() => props.onExport?.(sortedData())}
>
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
</svg>
Export
</Button>
</Show>
</div>
</div>
{/* Table */}
<div class="border border-gray-200 rounded-lg overflow-hidden">
<div class="overflow-x-auto">
<table class="w-full">
<thead class="bg-gray-50 border-b border-gray-200">
<tr>
<For each={props.columns}>
{(column) => (
<th
class={`px-4 py-3 text-${column.align || "left"} text-xs font-semibold text-gray-700 uppercase tracking-wider ${
column.sortable ? "cursor-pointer hover:bg-gray-100" : ""
}`}
style={column.width ? { width: column.width } : {}}
onClick={() => column.sortable && handleSort(column.key)}
>
<div class="flex items-center gap-2">
<span>{column.label}</span>
<Show when={column.sortable}>
{getSortIcon(column.key)}
</Show>
</div>
</th>
)}
</For>
</tr>
{/* Filter row */}
<Show when={props.columns.some(col => col.filterable)}>
<tr class="bg-gray-50">
<For each={props.columns}>
{(column) => (
<th class="px-4 py-2">
<Show when={column.filterable}>
<Input
placeholder={`Filter ${column.label}...`}
value={filters()[column.key as string] || ""}
onInput={(e) => handleFilterChange(column.key as string, e.currentTarget.value)}
class="text-sm"
size="sm"
/>
</Show>
</th>
)}
</For>
</tr>
</Show>
</thead>
<tbody class="divide-y divide-gray-200">
<Show
when={!props.loading && paginatedData().length > 0}
fallback={
<tr>
<td colspan={props.columns.length} class="px-4 py-12 text-center text-gray-500">
<Show when={props.loading} fallback={props.emptyMessage || "No data available"}>
<div class="flex items-center justify-center gap-2">
<div class="animate-spin rounded-full h-5 w-5 border-b-2 border-blue-600" />
<span>Loading...</span>
</div>
</Show>
</td>
</tr>
}
>
<For each={paginatedData()}>
{(row) => (
<tr
class={`hover:bg-gray-50 transition-colors ${props.onRowClick ? "cursor-pointer" : ""}`}
onClick={() => props.onRowClick?.(row)}
>
<For each={props.columns}>
{(column) => (
<td class={`px-4 py-3 text-${column.align || "left"} text-sm text-gray-900`}>
{column.render
? column.render(row[column.key as keyof T], row)
: String(row[column.key as keyof T] ?? "")}
</td>
)}
</For>
</tr>
)}
</For>
</Show>
</tbody>
</table>
</div>
{/* Pagination */}
<Show when={totalPages() > 1}>
<div class="px-4 py-3 bg-gray-50 border-t border-gray-200 flex items-center justify-between">
<div class="text-sm text-gray-700">
Showing {(currentPage() - 1) * pageSize() + 1} to{" "}
{Math.min(currentPage() * pageSize(), sortedData().length)} of {sortedData().length}
</div>
<div class="flex items-center gap-2">
<Button
variant="outline"
size="sm"
disabled={currentPage() === 1}
onClick={() => setCurrentPage(p => p - 1)}
>
Previous
</Button>
<div class="flex items-center gap-1">
<For each={Array.from({ length: Math.min(5, totalPages()) }, (_, i) => {
const page = i + 1;
if (totalPages() <= 5) return page;
if (currentPage() <= 3) return page;
if (currentPage() >= totalPages() - 2) return totalPages() - 4 + i;
return currentPage() - 2 + i;
})}>
{(page) => (
<button
class={`px-3 py-1 text-sm rounded ${
currentPage() === page
? "bg-blue-600 text-white"
: "text-gray-700 hover:bg-gray-100"
}`}
onClick={() => setCurrentPage(page)}
>
{page}
</button>
)}
</For>
</div>
<Button
variant="outline"
size="sm"
disabled={currentPage() === totalPages()}
onClick={() => setCurrentPage(p => p + 1)}
>
Next
</Button>
</div>
</div>
</Show>
</div>
</div>
);
}
+2 -2
View File
@@ -116,7 +116,7 @@ export function Dropdown(props: DropdownProps) {
<Portal>
<div
ref={menuRef}
class="fixed z-50 min-w-[200px] bg-surface-1 border border-border-strong rounded-lg shadow-elevated py-1 animate-scale-in"
class="fixed z-50 min-w-[200px] bg-surface border border-border-strong rounded-lg shadow-lg py-1 animate-scale-in"
style={{
left: `${position().x}px`,
top: `${position().y}px`,
@@ -135,7 +135,7 @@ export function Dropdown(props: DropdownProps) {
? "opacity-50 cursor-not-allowed"
: item.danger
? "text-error hover:bg-error-muted"
: "text-text-primary hover:bg-surface-2"
: "text-text-1 hover:bg-surface-2"
}`}
onClick={() => handleItemClick(item)}
disabled={item.disabled}
+168
View File
@@ -0,0 +1,168 @@
import type { JSX } from "solid-js";
interface IconProps {
class?: string;
}
const icon = (path: () => JSX.Element) =>
function Icon(props: IconProps) {
return (
<svg
class={props.class ?? "w-4 h-4"}
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
{path()}
</svg>
);
};
export const IconOverview = icon(() => (
<>
<rect x="3" y="3" width="7" height="9" rx="1.5" />
<rect x="14" y="3" width="7" height="5" rx="1.5" />
<rect x="14" y="12" width="7" height="9" rx="1.5" />
<rect x="3" y="16" width="7" height="5" rx="1.5" />
</>
));
export const IconProjects = icon(() => (
<>
<path d="M3 7a2 2 0 012-2h4l2 2h8a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2V7z" />
</>
));
export const IconMembers = icon(() => (
<>
<path d="M16 21v-2a4 4 0 00-4-4H6a4 4 0 00-4 4v2" />
<circle cx="9" cy="7" r="4" />
<path d="M22 21v-2a4 4 0 00-3-3.87" />
<path d="M16 3.13a4 4 0 010 7.75" />
</>
));
export const IconStorage = icon(() => (
<>
<ellipse cx="12" cy="5" rx="9" ry="3" />
<path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3" />
<path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5" />
</>
));
export const IconCollections = icon(() => (
<>
<path d="M4 7V5a2 2 0 012-2h12a2 2 0 012 2v2" />
<path d="M4 17v2a2 2 0 002 2h12a2 2 0 002-2v-2" />
<rect x="2" y="7" width="20" height="10" rx="2" />
<path d="M7 12h10" />
</>
));
export const IconAuth = icon(() => (
<>
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
<path d="M9 12l2 2 4-4" />
</>
));
export const IconAudit = icon(() => (
<>
<path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2" />
<rect x="9" y="3" width="6" height="4" rx="1" />
<path d="M9 13h6M9 17h4" />
</>
));
export const IconSettings = icon(() => (
<>
<circle cx="12" cy="12" r="3" />
<path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 11-2.83 2.83l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 11-4 0v-.09a1.65 1.65 0 00-1-1.51 1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 11-2.83-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 110-4h.09a1.65 1.65 0 001.51-1 1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 112.83-2.83l.06.06a1.65 1.65 0 001.82.33h.01a1.65 1.65 0 001-1.51V3a2 2 0 114 0v.09a1.65 1.65 0 001 1.51h.01a1.65 1.65 0 001.82-.33l.06-.06a2 2 0 112.83 2.83l-.06.06a1.65 1.65 0 00-.33 1.82v.01a1.65 1.65 0 001.51 1H21a2 2 0 110 4h-.09a1.65 1.65 0 00-1.51 1z" />
</>
));
export const IconPlus = icon(() => (<path d="M12 5v14M5 12h14" />));
export const IconSearch = icon(() => (<><circle cx="11" cy="11" r="8" /><path d="M21 21l-4.35-4.35" /></>));
export const IconRefresh = icon(() => (<><path d="M21 12a9 9 0 11-2.64-6.36L21 8" /><path d="M21 3v5h-5" /></>));
export const IconDownload = icon(() => (<><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4" /><path d="M7 10l5 5 5-5" /><path d="M12 15V3" /></>));
export const IconUpload = icon(() => (<><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4" /><path d="M17 8l-5-5-5 5" /><path d="M12 3v12" /></>));
export const IconTrash = icon(() => (<><path d="M3 6h18" /><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2" /><path d="M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6" /><path d="M10 11v6M14 11v6" /></>));
export const IconCopy = icon(() => (<><rect x="9" y="9" width="13" height="13" rx="2" /><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" /></>));
export const IconCheck = icon(() => (<path d="M20 6L9 17l-5-5" />));
export const IconX = icon(() => (<path d="M18 6L6 18M6 6l12 12" />));
export const IconEdit = icon(() => (<><path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7" /><path d="M18.5 2.5a2.12 2.12 0 013 3L12 15l-4 1 1-4 9.5-9.5z" /></>));
export const IconEye = icon(() => (<><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" /><circle cx="12" cy="12" r="3" /></>));
export const IconLogout = icon(() => (<><path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4" /><path d="M16 17l5-5-5-5" /><path d="M21 12H9" /></>));
export const IconChevronDown = icon(() => (<path d="M6 9l6 6 6-6" />));
export const IconChevronRight = icon(() => (<path d="M9 18l6-6-6-6" />));
export const IconArrowRight = icon(() => (<><path d="M5 12h14" /><path d="M12 5l7 7-7 7" /></>));
export const IconAlert = icon(() => (<><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" /><path d="M12 9v4" /><path d="M12 17h.01" /></>));
export const IconKey = icon(() => (<><path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 11-7.778 7.778 5.5 5.5 0 017.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4" /></>));
export const IconFile = icon(() => (<><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z" /><path d="M14 2v6h6" /></>));
export const IconGlobe = icon(() => (<><circle cx="12" cy="12" r="10" /><path d="M2 12h20" /><path d="M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z" /></>));
export const IconMenu = icon(() => (<path d="M4 6h16M4 12h16M4 18h16" />));
export const IconSun = icon(() => (<><circle cx="12" cy="12" r="4" /><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41" /></>));
export const IconMoon = icon(() => (<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" />));
export const IconLayers = icon(() => (<><path d="M12 2L2 7l10 5 10-5-10-5z" /><path d="M2 17l10 5 10-5" /><path d="M2 12l10 5 10-5" /></>));
export const IconZap = icon(() => (<path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" />));
export const IconClock = icon(() => (<><circle cx="12" cy="12" r="10" /><path d="M12 6v6l4 2" /></>));
export const IconLink = icon(() => (<><path d="M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71" /><path d="M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71" /></>));
export const IconOrganization = icon(() => (<><rect x="4" y="2" width="16" height="20" rx="2" /><path d="M9 22v-4h6v4" /><path d="M8 6h.01M16 6h.01M12 6h.01M12 10h.01M8 10h.01M16 10h.01M8 14h.01M16 14h.01M12 14h.01" /></>));
export const IconFolder = IconProjects;
export const IconDots = icon(() => (<><circle cx="12" cy="5" r="1" fill="currentColor" /><circle cx="12" cy="12" r="1" fill="currentColor" /><circle cx="12" cy="19" r="1" fill="currentColor" /></>));
export const IconMail = icon(() => (<><rect x="2" y="4" width="20" height="16" rx="2" /><path d="M22 7l-10 6L2 7" /></>));
/* Brand mark — descending stack collapsing to a point: the platform glyph.
Flat, single-color, scales to 16px favicon cleanly. */
export function LogoMark(props: IconProps) {
return (
<svg class={props.class ?? "w-4 h-4"} viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<rect x="3" y="4.4" width="10.6" height="3.1" rx="1.55" />
<rect x="3" y="8.45" width="7.2" height="3.1" rx="1.55" opacity="0.7" />
<rect x="3" y="12.5" width="3.1" height="3.1" rx="1.55" />
</svg>
);
}
/* Brand logos */
export function LogoGithub(props: IconProps) {
return (
<svg class={props.class ?? "w-4 h-4"} fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
</svg>
);
}
export function LogoGoogle(props: IconProps) {
return (
<svg class={props.class ?? "w-4 h-4"} viewBox="0 0 24 24" aria-hidden="true">
<path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" />
<path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" />
<path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" />
<path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" />
</svg>
);
}
export function LogoDiscord(props: IconProps) {
return (
<svg class={props.class ?? "w-4 h-4"} fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037 19.736 19.736 0 0 0-4.885 1.515.069.069 0 0 0-.032.027C.533 9.048-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z" />
</svg>
);
}
export function LogoMicrosoft(props: IconProps) {
return (
<svg class={props.class ?? "w-4 h-4"} viewBox="0 0 23 23" aria-hidden="true">
<path fill="#f35325" d="M1 1h10v10H1z" />
<path fill="#81bc06" d="M12 1h10v10H12z" />
<path fill="#05a6f0" d="M1 12h10v10H1z" />
<path fill="#ffba08" d="M12 12h10v10H12z" />
</svg>
);
}
+1 -1
View File
@@ -108,7 +108,7 @@ export function FileInput(props: FileInputProps) {
</Show>
<input
type="file"
class={`input cursor-pointer file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-medium file:bg-surface-2 file:text-text-secondary hover:file:bg-surface-3 ${local.error ? "border-error" : ""} ${local.class ?? ""}`}
class={`input cursor-pointer file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-medium file:bg-surface-2 file:text-text-2 hover:file:bg-surface-3 ${local.error ? "border-error" : ""} ${local.class ?? ""}`}
{...rest}
/>
<Show when={local.error}>
-253
View File
@@ -1,253 +0,0 @@
import { type JSX, Show, createSignal, For } from "solid-js";
interface NavItem {
id: string;
label: string;
icon?: JSX.Element;
badge?: string | number;
children?: NavItem[];
}
interface SidebarProps {
items: NavItem[];
activeId?: string;
onSelect?: (id: string) => void;
collapsed?: boolean;
onToggleCollapse?: () => void;
header?: JSX.Element;
footer?: JSX.Element;
}
function SidebarItem(props: { item: NavItem; activeId?: string; onSelect?: (id: string) => void; collapsed?: boolean }) {
const isActive = () => props.item.id === props.activeId;
const hasChildren = () => (props.item.children?.length ?? 0) > 0;
const [expanded, setExpanded] = createSignal(false);
return (
<div>
<button
class={`w-full text-left ${isActive() ? "sidebar-item-active" : "sidebar-item"}`}
onClick={() => {
if (hasChildren()) {
setExpanded(!expanded());
} else {
props.onSelect?.(props.item.id);
}
}}
aria-expanded={hasChildren() ? expanded() : undefined}
aria-current={isActive() ? "page" : undefined}
>
<Show when={props.item.icon}>
<span class="flex-shrink-0">{props.item.icon}</span>
</Show>
<Show when={!props.collapsed}>
<span class="flex-1 truncate">{props.item.label}</span>
</Show>
<Show when={props.item.badge && !props.collapsed}>
<span class="badge-neutral text-2xs">{props.item.badge}</span>
</Show>
<Show when={hasChildren() && !props.collapsed}>
<svg
class={`h-4 w-4 transition-transform ${expanded() ? "rotate-180" : ""}`}
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</Show>
</button>
<Show when={hasChildren() && expanded() && !props.collapsed}>
<div class="ml-4 mt-1 space-y-1">
<For each={props.item.children}>
{(child) => (
<button
class={`w-full text-left sidebar-item text-xs ${child.id === props.activeId ? "sidebar-item-active" : ""}`}
onClick={() => props.onSelect?.(child.id)}
>
{child.label}
</button>
)}
</For>
</div>
</Show>
</div>
);
}
export function Sidebar(props: SidebarProps) {
return (
<aside
class={`sidebar transition-all duration-fast ${props.collapsed ? "w-16" : "w-60"}`}
role="navigation"
aria-label="Main navigation"
>
<Show when={props.header}>
<div class="border-b border-border p-4 flex items-center justify-between">
{props.header}
</div>
</Show>
<nav class="sidebar-nav">
<div class="space-y-1">
<For each={props.items}>
{(item) => (
<SidebarItem
item={item}
activeId={props.activeId}
onSelect={props.onSelect}
collapsed={props.collapsed}
/>
)}
</For>
</div>
</nav>
<Show when={props.footer}>
<div class="border-t border-border p-4">{props.footer}</div>
</Show>
</aside>
);
}
interface HeaderProps {
title?: string;
subtitle?: string;
actions?: JSX.Element;
breadcrumbs?: { label: string; href?: string }[];
onMenuToggle?: () => void;
logo?: JSX.Element;
tabs?: { id: string; label: string }[];
activeTab?: string;
onTabChange?: (id: string) => void;
}
export function Header(props: HeaderProps) {
return (
<header class="top-nav">
<div class="top-nav-main">
<div class="flex items-center gap-6">
<Show when={props.logo}>
{props.logo}
</Show>
<Show when={props.breadcrumbs}>
<nav class="hidden items-center gap-2 text-sm sm:flex" aria-label="Breadcrumb">
<For each={props.breadcrumbs}>
{(crumb, index) => (
<>
<Show when={index() > 0}>
<span class="text-text-muted">/</span>
</Show>
<Show when={crumb.href} fallback={<span class="text-text-primary font-medium">{crumb.label}</span>}>
<a href={crumb.href} class="text-text-secondary hover:text-text-primary transition-colors">
{crumb.label}
</a>
</Show>
</>
)}
</For>
</nav>
</Show>
<Show when={props.title && !props.breadcrumbs}>
<div>
<h1 class="text-lg font-semibold text-text-primary">{props.title}</h1>
<Show when={props.subtitle}>
<p class="text-xs text-text-secondary">{props.subtitle}</p>
</Show>
</div>
</Show>
</div>
<Show when={props.actions}>
<div class="flex items-center gap-3">{props.actions}</div>
</Show>
</div>
<Show when={props.tabs && props.tabs.length > 0}>
<div class="top-nav-tabs">
<For each={props.tabs}>
{(tab) => (
<button
class={`top-nav-tab ${props.activeTab === tab.id ? 'top-nav-tab-active' : ''}`}
onClick={() => props.onTabChange?.(tab.id)}
>
{tab.label}
</button>
)}
</For>
</div>
</Show>
</header>
);
}
interface LayoutProps {
children: JSX.Element;
sidebar?: JSX.Element;
header?: JSX.Element;
sidebarCollapsed?: boolean;
}
export function Layout(props: LayoutProps) {
return (
<div class="flex h-screen flex-col overflow-hidden bg-bg-main">
<Show when={props.header}>
{props.header}
</Show>
<div class="flex flex-1 overflow-hidden">
<Show when={props.sidebar}>
{props.sidebar}
</Show>
<main class="main-content">{props.children}</main>
</div>
</div>
);
}
interface PageHeaderProps {
eyebrow?: string;
title: string;
description?: string;
actions?: JSX.Element;
}
export function PageHeader(props: PageHeaderProps) {
return (
<div class="mb-6 flex flex-col gap-3 md:flex-row md:items-start md:justify-between animate-fade-in">
<div class="space-y-1">
<Show when={props.eyebrow}>
<p class="text-xs font-semibold text-accent uppercase tracking-wider">{props.eyebrow}</p>
</Show>
<h1 class="text-2xl font-bold text-text-primary tracking-tight">{props.title}</h1>
<Show when={props.description}>
<p class="text-sm text-text-secondary max-w-2xl">{props.description}</p>
</Show>
</div>
<Show when={props.actions}>
<div class="flex flex-wrap gap-2">{props.actions}</div>
</Show>
</div>
);
}
interface EmptyStateProps {
icon?: JSX.Element;
title: string;
description?: string;
action?: JSX.Element;
}
export function EmptyState(props: EmptyStateProps) {
return (
<div class="flex flex-col items-center justify-center py-12 px-4 text-center animate-fade-in">
<Show when={props.icon}>
<div class="mb-4 text-text-muted opacity-40">{props.icon}</div>
</Show>
<h3 class="text-base font-semibold text-text-primary">{props.title}</h3>
<Show when={props.description}>
<p class="mt-1 text-sm text-text-secondary max-w-md">{props.description}</p>
</Show>
<Show when={props.action}>
<div class="mt-6">{props.action}</div>
</Show>
</div>
);
}
+12 -90
View File
@@ -1,4 +1,4 @@
import { type JSX } from "solid-js";
import { LogoMark } from "./Icons";
interface LogoProps {
size?: "sm" | "md" | "lg";
@@ -8,111 +8,33 @@ interface LogoProps {
}
const sizeClasses = {
sm: "h-7 w-7 text-xs",
md: "h-9 w-9 text-sm",
lg: "h-12 w-12 text-base",
sm: "h-5 w-5",
md: "h-6 w-6",
lg: "h-8 w-8",
};
const textSizeClasses = {
sm: "text-sm",
md: "text-lg",
lg: "text-xl",
md: "text-base",
lg: "text-lg",
};
export function Logo(props: LogoProps) {
const size = () => props.size ?? "md";
const showText = () => props.showText ?? true;
const animated = () => props.animated ?? true;
return (
<div class={`flex items-center gap-3 group ${props.class ?? ""}`}>
<div
class={`${sizeClasses[size()]} relative flex items-center justify-center rounded-xl bg-gradient-to-br from-accent via-accent-hover to-accent font-bold text-white shadow-lg ${animated() ? 'transition-all duration-300 group-hover:scale-110 group-hover:rotate-3 group-hover:shadow-xl' : ''}`}
style={{
"box-shadow": "0 4px 20px rgba(25, 163, 217, 0.3), 0 0 40px rgba(25, 163, 217, 0.15)",
}}
>
<span class="relative z-10 font-display font-extrabold">P</span>
{/* Animated glow effect */}
{animated() && (
<div
class="absolute inset-0 rounded-xl bg-gradient-to-br from-accent-hover to-accent opacity-0 group-hover:opacity-100 transition-opacity duration-300 blur-sm"
style={{ "z-index": "-1" }}
/>
)}
</div>
<div class={`flex items-center gap-2.5 ${props.class ?? ""}`}>
<LogoMark class={`${sizeClasses[size()]} text-accent`} />
{showText() && (
<div class="flex flex-col leading-none">
<span
class={`${textSizeClasses[size()]} font-display font-bold tracking-tight bg-gradient-to-r from-text-primary via-accent to-text-primary bg-clip-text text-transparent ${animated() ? 'transition-all duration-300 group-hover:tracking-wide' : ''}`}
style={{
"background-size": "200% auto",
"animation": animated() ? "shimmer 3s linear infinite" : "none",
}}
>
PRIMORA
</span>
<span class="text-2xs text-text-muted font-medium tracking-widest uppercase mt-0.5">
Platform
</span>
</div>
<span class={`${textSizeClasses[size()]} font-semibold tracking-tight text-text-1`}>
Primora
</span>
)}
</div>
);
}
export function LogoIcon(props: { class?: string; animated?: boolean }) {
const animated = () => props.animated ?? false;
return (
<svg
class={`${props.class ?? ''} ${animated() ? 'transition-transform duration-300 hover:scale-110 hover:rotate-6' : ''}`}
viewBox="0 0 32 32"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<linearGradient
id="logo-gradient"
x1="0"
y1="0"
x2="32"
y2="32"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#19a3d9" />
<stop offset="0.5" stop-color="#22b8f0" />
<stop offset="1" stop-color="#19a3d9" />
</linearGradient>
<filter id="glow">
<feGaussianBlur stdDeviation="2" result="coloredBlur"/>
<feMerge>
<feMergeNode in="coloredBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<rect width="32" height="32" rx="8" fill="url(#logo-gradient)" filter="url(#glow)" />
{/* P letter with modern design */}
<path
d="M10 9h7c3.866 0 7 3.134 7 7 0 3.866-3.134 7-7 7h-3v-5h3c1.657 0 3-1.343 3-3s-1.343-3-3-3h-5v14H10V9z"
fill="white"
opacity="0.95"
/>
{/* Accent dot */}
<circle cx="24" cy="24" r="2.5" fill="white" opacity="0.9">
{animated() && (
<animate
attributeName="opacity"
values="0.9;0.5;0.9"
dur="2s"
repeatCount="indefinite"
/>
)}
</circle>
</svg>
);
return <LogoMark class={props.class ?? "h-6 w-6 text-accent"} />;
}
+1 -1
View File
@@ -78,7 +78,7 @@ export function Loading(props: LoadingProps) {
const size = () => props.size ?? "md";
return (
<div class="flex items-center gap-3 text-text-secondary animate-fade-in">
<div class="flex items-center gap-3 text-text-2 animate-fade-in">
<div class={`${sizeClasses[size()]} spinner`} />
<Show when={props.text}>
<span class="text-sm font-medium">{props.text}</span>
+4 -4
View File
@@ -83,7 +83,7 @@ export function Modal(props: ModalProps) {
{/* Modal content */}
<div
class={`relative w-full ${sizeClasses[size()]} bg-surface-1 border border-border-strong rounded-xl shadow-elevated animate-scale-in ${local.class ?? ""}`}
class={`relative w-full ${sizeClasses[size()]} bg-surface border border-border-strong rounded-xl shadow-lg animate-scale-in ${local.class ?? ""}`}
{...rest}
>
{/* Header */}
@@ -91,19 +91,19 @@ export function Modal(props: ModalProps) {
<div class="flex items-start justify-between p-6 border-b border-border">
<div class="flex-1">
<Show when={local.title}>
<h2 id="modal-title" class="text-xl font-semibold text-text-primary">
<h2 id="modal-title" class="text-xl font-semibold text-text-1">
{local.title}
</h2>
</Show>
<Show when={local.description}>
<p id="modal-description" class="mt-1.5 text-sm text-text-secondary">
<p id="modal-description" class="mt-1.5 text-sm text-text-2">
{local.description}
</p>
</Show>
</div>
<Show when={showClose()}>
<button
class="ml-4 p-2 rounded-lg text-text-muted hover:text-text-primary hover:bg-surface-2 transition-colors"
class="ml-4 p-2 rounded-lg text-text-3 hover:text-text-1 hover:bg-surface-2 transition-colors"
onClick={local.onClose}
aria-label="Close modal"
>
+33 -57
View File
@@ -1,5 +1,6 @@
import { Show, createSignal, onMount } from "solid-js";
import { Show, createSignal } from "solid-js";
import { enableDemoMode } from "../lib/demo-mode";
import { IconAlert, IconX } from "./Icons";
interface NetworkErrorProps {
error: string;
@@ -15,69 +16,44 @@ export function NetworkError(props: NetworkErrorProps) {
props.onDismiss?.();
};
const handleDemoMode = () => {
enableDemoMode();
};
return (
<Show when={visible()}>
<div class="network-error-toast">
<div class="network-error-content">
<svg class="network-error-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
</svg>
<div class="network-error-text">
<div class="network-error-title">Connection Error</div>
<div class="network-error-message">{props.error}</div>
<div class="network-error-actions">
<Show when={props.onRetry}>
<button class="btn-sm btn-secondary" onClick={props.onRetry}>
Retry
<div
class="fixed bottom-4 right-4 z-[100] animate-toast-in"
role="alert"
style="max-width:24rem"
>
<div
class="card"
style="border-color:rgba(248,113,113,0.4);box-shadow:var(--shadow-lg)"
>
<div class="flex gap-3">
<span style="color:var(--error);flex-shrink:0">
<IconAlert class="w-5 h-5" />
</span>
<div class="flex-1 min-w-0">
<div class="font-medium text-sm text-text-1">Connection error</div>
<div class="text-xs text-text-3 mt-0.5">{props.error}</div>
<div class="flex gap-2 mt-3">
<Show when={props.onRetry}>
<button class="btn btn-secondary btn-sm" onClick={props.onRetry}>
Retry
</button>
</Show>
<button class="btn btn-primary btn-sm" onClick={enableDemoMode}>
Try demo mode
</button>
</Show>
<button class="btn-sm btn-primary" onClick={handleDemoMode}>
Try Demo Mode
</button>
<button class="btn-sm btn-ghost" onClick={handleDismiss}>
Dismiss
</button>
<button class="btn btn-ghost btn-sm" onClick={handleDismiss}>
Dismiss
</button>
</div>
</div>
<button class="icon-btn" style="width:1.5rem;height:1.5rem" onClick={handleDismiss} aria-label="Dismiss">
<IconX class="w-3.5 h-3.5" />
</button>
</div>
</div>
</div>
</Show>
);
}
interface DemoBannerProps {
onExit?: () => void;
}
export function DemoBanner(props: DemoBannerProps) {
const [visible, setVisible] = createSignal(true);
const handleClose = () => {
setVisible(false);
};
return (
<Show when={visible()}>
<div class="demo-banner">
<svg class="demo-banner-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<span>Demo Mode Active - All data is simulated</span>
<Show when={props.onExit}>
<button class="btn-sm btn-ghost text-white" onClick={props.onExit}>
Exit Demo
</button>
</Show>
<button class="demo-banner-close" onClick={handleClose} aria-label="Close">
<svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</Show>
);
}
@@ -17,18 +17,19 @@ const [notifications, setNotifications] = createSignal<Notification[]>([]);
export function addNotification(notification: Omit<Notification, "id">) {
const id = Math.random().toString(36).substring(7);
const duration = notification.duration ?? 5000;
const newNotification: Notification = {
...notification,
id,
duration: notification.duration ?? 5000,
duration,
};
setNotifications(prev => [...prev, newNotification]);
if (newNotification.duration > 0) {
if (duration > 0) {
setTimeout(() => {
removeNotification(id);
}, newNotification.duration);
}, duration);
}
return id;
@@ -75,26 +76,26 @@ export function NotificationCenter() {
const getColors = (type: Notification["type"]) => {
switch (type) {
case "success":
return "bg-green-50 border-green-200 text-green-800";
return "bg-success-muted border-success/25 text-success";
case "error":
return "bg-red-50 border-red-200 text-red-800";
return "bg-error-muted border-error/25 text-error";
case "warning":
return "bg-yellow-50 border-yellow-200 text-yellow-800";
return "bg-warning-muted border-warning/25 text-warning";
case "info":
return "bg-blue-50 border-blue-200 text-blue-800";
return "bg-info-muted border-info/25 text-info";
}
};
const getIconColors = (type: Notification["type"]) => {
switch (type) {
case "success":
return "text-green-600";
return "text-success";
case "error":
return "text-red-600";
return "text-error";
case "warning":
return "text-yellow-600";
return "text-warning";
case "info":
return "text-blue-600";
return "text-info";
}
};
@@ -104,7 +105,7 @@ export function NotificationCenter() {
<For each={notifications()}>
{(notification) => (
<div
class={`${getColors(notification.type)} border rounded-lg shadow-lg p-4 animate-slide-in-right`}
class={`${getColors(notification.type)} border rounded-lg shadow-lg p-4 animate-toast-in`}
>
<div class="flex items-start gap-3">
<div class={`flex-shrink-0 ${getIconColors(notification.type)}`}>
+76 -106
View File
@@ -1,5 +1,6 @@
import { Show, createSignal } from "solid-js";
import { Button, Input, Modal } from "./index";
import { For, Show, createSignal } from "solid-js";
import { Modal } from "./Modal";
import { IconCheck } from "./Icons";
interface OnboardingModalProps {
isOpen: boolean;
@@ -7,121 +8,90 @@ interface OnboardingModalProps {
onClose: () => void;
}
const steps = [
{
title: "Welcome aboard",
body: (projectName: string) =>
`${projectName} is ready. Three things worth doing first:`,
list: [
"Create an API key in Settings",
"Create a storage bucket for files",
"Invite teammates from Members",
],
},
{
title: "Authenticate requests",
body: () =>
"Every API call needs either a session JWT (this console uses it) or an X-API-Key header scoped to the project. Keys are shown once — store them like passwords.",
},
{
title: "Wire up your app",
body: () =>
"Point your client at /api/v1 on this host. The OpenAPI spec is served at /api/v1/openapi.yaml — regenerate the TypeScript client with `npm run generate:client`.",
},
];
export function OnboardingModal(props: OnboardingModalProps) {
const [step, setStep] = createSignal(1);
const [apiKey, setApiKey] = createSignal("");
const [step, setStep] = createSignal(0);
const handleNext = () => {
if (step() < 3) {
setStep(step() + 1);
} else {
props.onClose();
}
};
const handleSkip = () => {
const handleClose = () => {
setStep(0);
props.onClose();
};
return (
<Modal open={props.isOpen} onClose={props.onClose} title="Get Started with Your Project">
<div class="space-y-6">
<Show when={step() === 1}>
<div class="space-y-4">
<div class="text-center">
<div class="mx-auto w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4">
<svg class="w-8 h-8 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
</div>
<h3 class="text-lg font-semibold mb-2">Welcome to {props.projectName}!</h3>
<p class="text-gray-600 text-sm">
Let's get you set up in just a few steps. You'll be able to create API keys, set up storage, and start building.
</p>
</div>
<div class="bg-gray-50 rounded-lg p-4 space-y-2">
<div class="flex items-center gap-3">
<div class="w-6 h-6 rounded-full bg-blue-600 text-white flex items-center justify-center text-xs font-semibold">1</div>
<span class="text-sm">Create your first API key</span>
</div>
<div class="flex items-center gap-3">
<div class="w-6 h-6 rounded-full bg-gray-300 text-white flex items-center justify-center text-xs font-semibold">2</div>
<span class="text-sm">Set up storage buckets</span>
</div>
<div class="flex items-center gap-3">
<div class="w-6 h-6 rounded-full bg-gray-300 text-white flex items-center justify-center text-xs font-semibold">3</div>
<span class="text-sm">Connect your application</span>
</div>
</div>
</div>
</Show>
<Modal open={props.isOpen} onClose={handleClose} title="Get started" size="sm">
<div class="space-y-4">
{/* step indicator */}
<div class="flex items-center gap-1.5">
<For each={steps}>
{(_, i) => (
<div
class="flex-1 rounded-full"
style={`height:3px;background:${i() <= step() ? "var(--accent)" : "var(--surface-3)"}`}
/>
)}
</For>
</div>
<Show when={step() === 2}>
<div class="space-y-4">
<div class="text-center mb-4">
<div class="mx-auto w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-4">
<svg class="w-8 h-8 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
</svg>
</div>
<h3 class="text-lg font-semibold mb-2">Create Your First API Key</h3>
<p class="text-gray-600 text-sm">
API keys allow your applications to authenticate with Primora services.
</p>
</div>
<div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
<p class="text-sm text-blue-800">
<strong>Tip:</strong> You can create API keys from the Settings tab. Each key can have different permissions and scopes.
</p>
</div>
</div>
</Show>
<div>
<h3 style="font-size:0.9375rem">{steps[step()].title}</h3>
<p class="mt-1.5 text-sm text-text-2">{steps[step()].body(props.projectName)}</p>
<Show when={steps[step()].list}>
<ul class="mt-3 space-y-2">
<For each={steps[step()].list}>
{(item) => (
<li class="flex items-center gap-2 text-sm text-text-2">
<span
class="flex items-center justify-center w-4 h-4 rounded-full"
style="background:var(--accent-muted);color:var(--accent)"
>
<IconCheck class="w-2.5 h-2.5" />
</span>
{item}
</li>
)}
</For>
</ul>
</Show>
</div>
<Show when={step() === 3}>
<div class="space-y-4">
<div class="text-center mb-4">
<div class="mx-auto w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-4">
<svg class="w-8 h-8 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
</svg>
</div>
<h3 class="text-lg font-semibold mb-2">Connect Your Application</h3>
<p class="text-gray-600 text-sm mb-4">
Use the following code snippet to connect to your project:
</p>
</div>
<div class="bg-gray-900 rounded-lg p-4 text-sm font-mono text-gray-100 overflow-x-auto">
<pre>{`import { PrimoraClient } from '@primora/client';
const client = new PrimoraClient({
apiKey: 'your-api-key',
projectId: '${props.projectName.toLowerCase().replace(/\s+/g, '-')}'
});
// Upload a file
await client.storage.upload('bucket-name', file);`}</pre>
</div>
<div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
<p class="text-sm text-yellow-800">
<strong>Documentation:</strong> Visit our docs to learn more about authentication, storage, and other features.
</p>
</div>
</div>
</Show>
<div class="flex justify-between pt-4 border-t">
<Button variant="ghost" onClick={handleSkip}>
Skip for now
</Button>
<div class="flex items-center justify-between pt-2" style="border-top:1px solid var(--border)">
<button class="btn btn-ghost btn-sm" onClick={handleClose}>
Skip
</button>
<div class="flex gap-2">
<Show when={step() > 1}>
<Button variant="outline" onClick={() => setStep(step() - 1)}>
<Show when={step() > 0}>
<button class="btn btn-secondary btn-sm" onClick={() => setStep(step() - 1)}>
Back
</Button>
</button>
</Show>
<Button onClick={handleNext}>
{step() === 3 ? "Get Started" : "Next"}
</Button>
<button
class="btn btn-primary btn-sm"
onClick={() => (step() < steps.length - 1 ? setStep(step() + 1) : handleClose())}
>
{step() === steps.length - 1 ? "Done" : "Next"}
</button>
</div>
</div>
</div>
+5 -5
View File
@@ -44,8 +44,8 @@ export function Progress(props: ProgressProps) {
<div class={`w-full ${local.class ?? ""}`} {...rest}>
<Show when={local.showLabel || local.label}>
<div class="flex items-center justify-between mb-2">
<span class="text-xs font-medium text-text-secondary">{local.label ?? "Progress"}</span>
<span class="text-xs font-medium text-text-primary">{Math.round(percentage())}%</span>
<span class="text-xs font-medium text-text-2">{local.label ?? "Progress"}</span>
<span class="text-xs font-medium text-text-1">{Math.round(percentage())}%</span>
</div>
</Show>
<div
@@ -115,15 +115,15 @@ export function CircularProgress(props: CircularProgressProps) {
stroke={colorMap[variant()]}
stroke-width={strokeWidth()}
fill="none"
stroke-dasharray={circumference()}
stroke-dashoffset={offset()}
stroke-dasharray={`${circumference()}`}
stroke-dashoffset={`${offset()}`}
stroke-linecap="round"
class="transition-all duration-300 ease-out"
/>
</svg>
<Show when={props.showLabel}>
<div class="absolute inset-0 flex items-center justify-center">
<span class="text-sm font-semibold text-text-primary">
<span class="text-sm font-semibold text-text-1">
{Math.round(percentage())}%
</span>
</div>
+222 -148
View File
@@ -1,178 +1,252 @@
import { Show, For } from "solid-js";
import { Card, StatCard, Badge, Button } from "./index";
import type { ProjectOverview } from "@primora/api-client";
import { For, Show } from "solid-js";
import type { AuditLog, ProjectOverview, ProjectSummary } from "@primora/api-client";
import {
IconStorage,
IconKey,
IconMembers,
IconAudit,
IconCollections,
IconChevronRight,
} from "./Icons";
interface ProjectDashboardProps {
project: { id: string; name: string; slug: string; description?: string };
project: ProjectSummary;
overview?: ProjectOverview;
recentAudit?: AuditLog[];
onNavigate: (view: string) => void;
}
function formatBytes(bytes?: number): string {
if (bytes === undefined || bytes === null) return "0 B";
if (bytes < 1024) return `${bytes} B`;
const units = ["KB", "MB", "GB", "TB"];
let value = bytes;
let unit = -1;
do {
value /= 1024;
unit++;
} while (value >= 1024 && unit < units.length - 1);
return `${value.toFixed(value >= 10 ? 0 : 1)} ${units[unit]}`;
}
function formatRelative(value?: string | null): string {
if (!value) return "never";
const date = new Date(value);
if (Number.isNaN(date.getTime())) return "never";
const diff = Date.now() - date.getTime();
const mins = Math.floor(diff / 60000);
if (mins < 1) return "just now";
if (mins < 60) return `${mins}m ago`;
const hours = Math.floor(mins / 60);
if (hours < 24) return `${hours}h ago`;
const days = Math.floor(hours / 24);
return `${days}d ago`;
}
function actionTone(action: string): string {
if (action.includes("delet") || action.includes("revok") || action.includes("remov"))
return "var(--error)";
if (action.includes("creat") || action.includes("upload") || action.includes("invit"))
return "var(--success)";
return "var(--text-3)";
}
export function ProjectDashboard(props: ProjectDashboardProps) {
const stats = () => [
{
label: "Storage",
value: props.overview?.storage_buckets_count ?? 0,
unit: "buckets",
icon: (
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 3h4m-4 4h4" />
</svg>
),
},
{
label: "API Keys",
value: props.overview?.api_keys_count ?? 0,
unit: "keys",
icon: (
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
</svg>
),
},
const overview = () => props.overview;
const metrics = () => [
{
label: "Members",
value: props.overview?.project_members_count ?? 0,
unit: "users",
icon: (
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
</svg>
),
icon: IconMembers,
value: overview()?.member_count,
sub: `${overview()?.pending_invitation_count ?? 0} pending`,
view: "members",
},
{
label: "Audit Logs",
value: props.overview?.audit_logs_count ?? 0,
unit: "events",
icon: (
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
</svg>
),
label: "API keys",
icon: IconKey,
value: overview()?.active_api_key_count,
sub: "active credentials",
view: "settings",
},
{
label: "Objects",
icon: IconStorage,
value: overview()?.object_count,
sub: `${overview()?.bucket_count ?? 0} buckets · ${formatBytes(overview()?.object_bytes_total)}`,
view: "storage",
},
{
label: "Events 24h",
icon: IconAudit,
value: overview()?.audit_events_24h,
sub: `last ${formatRelative(overview()?.last_audit_at)}`,
view: "audit",
},
];
const resources = () => [
{
title: "Storage",
sub: `${overview()?.bucket_count ?? 0} buckets`,
icon: IconStorage,
view: "storage",
},
{
title: "Collections",
sub: "JSON documents",
icon: IconCollections,
view: "collections",
},
{
title: "Credentials",
sub: `${overview()?.active_api_key_count ?? 0} active keys`,
icon: IconKey,
view: "settings",
},
{
title: "Members",
sub: `${overview()?.member_count ?? 0} in project`,
icon: IconMembers,
view: "members",
},
];
const audit = () => (props.recentAudit ?? []).slice(0, 6);
return (
<div class="space-y-6">
{/* Project Header */}
<div class="flex items-start justify-between">
<div>
<h1 class="text-2xl font-bold text-gray-900">{props.project.name}</h1>
<Show when={props.project.description}>
<p class="text-gray-600 mt-1">{props.project.description}</p>
</Show>
<div class="flex items-center gap-2 mt-2">
<Badge variant="secondary">{props.project.slug}</Badge>
</div>
<div class="page">
<div class="page-header">
<div style="min-width: 0">
<h1 class="page-title">{props.project.name}</h1>
<p class="page-description">
<code>{props.project.slug}</code>
<Show when={props.project.description}>
<span style="color: var(--border-strong)">{" · "}</span>
{props.project.description}
</Show>
</p>
</div>
<div class="page-actions">
<button class="btn btn-secondary btn-sm" onClick={() => props.onNavigate("settings")}>
<IconKey class="w-3.5 h-3.5" />
Keys
</button>
<button class="btn btn-primary btn-sm" onClick={() => props.onNavigate("storage")}>
Open storage
</button>
</div>
</div>
{/* Stats Grid */}
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<For each={stats()}>
{(stat) => (
<Card class="p-6">
<div class="flex items-center justify-between">
<div>
<p class="text-sm text-gray-600 mb-1">{stat.label}</p>
<p class="text-3xl font-bold text-gray-900">{stat.value}</p>
<p class="text-xs text-gray-500 mt-1">{stat.unit}</p>
</div>
<div class="text-gray-400">{stat.icon}</div>
{/* metric strip — hairline divided, mono numerals */}
<div class="metric-strip">
<For each={metrics()}>
{(m) => (
<div
class="metric"
style="cursor:pointer"
onClick={() => props.onNavigate(m.view)}
role="button"
tabIndex={0}
onKeyDown={(e) => e.key === "Enter" && props.onNavigate(m.view)}
>
<div class="metric-label">
<m.icon />
{m.label}
</div>
</Card>
<Show
when={m.value !== undefined}
fallback={<div class="skeleton" style="height:1.75rem;width:2.5rem;margin-top:0.375rem;border-radius:4px" />}
>
<div class="metric-value">{m.value}</div>
</Show>
<div class="metric-sub">{m.sub}</div>
</div>
)}
</For>
</div>
{/* Usage Charts */}
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<Card class="p-6">
<h3 class="text-lg font-semibold mb-4">Bandwidth</h3>
<div class="h-48 flex items-center justify-center bg-gray-50 rounded-lg">
<div class="text-center text-gray-500">
<svg class="w-12 h-12 mx-auto mb-2 opacity-50" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
</svg>
<p class="text-sm">No data to show</p>
</div>
<div class="grid gap-8 lg:grid-cols-5" style="align-items: start">
{/* recent activity — real audit feed */}
<div class="lg:col-span-3" style="min-width: 0">
<div class="flex items-center justify-between" style="margin-bottom: 0.75rem">
<h2 class="section-title">Recent activity</h2>
<button
class="btn btn-ghost btn-sm"
style="color: var(--text-3)"
onClick={() => props.onNavigate("audit")}
>
All events
<IconChevronRight class="w-3.5 h-3.5" />
</button>
</div>
</Card>
<Show
when={audit().length > 0}
fallback={
<div class="row-list">
<div class="row-item">
<div class="row-main">
<div class="row-sub" style="font-family: var(--font-sans)">
No events yet — mutations against this project will appear here.
</div>
</div>
</div>
</div>
}
>
<div class="row-list">
<For each={audit()}>
{(event) => (
<div class="row-item">
<span
style={`width:6px;height:6px;border-radius:1.5px;flex-shrink:0;background:${actionTone(event.action)}`}
aria-hidden="true"
/>
<div class="row-main">
<div class="row-title mono" style="font-weight:500;font-size:0.75rem">
{event.action}
</div>
<div class="row-sub">
{event.resource_type} · {event.resource_id}
</div>
</div>
<div class="row-trailing">{formatRelative(event.created_at)}</div>
</div>
)}
</For>
</div>
</Show>
</div>
<Card class="p-6">
<h3 class="text-lg font-semibold mb-4">Requests</h3>
<div class="h-48 flex items-center justify-center bg-gray-50 rounded-lg">
<div class="text-center text-gray-500">
<svg class="w-12 h-12 mx-auto mb-2 opacity-50" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z" />
</svg>
<p class="text-sm">No data to show</p>
</div>
{/* resources — hairline rows */}
<div class="lg:col-span-2" style="min-width: 0">
<h2 class="section-title" style="margin-bottom: 0.75rem">Resources</h2>
<div class="row-list">
<For each={resources()}>
{(r) => (
<div
class="row-item clickable"
onClick={() => props.onNavigate(r.view)}
role="button"
tabIndex={0}
onKeyDown={(e) => e.key === "Enter" && props.onNavigate(r.view)}
>
<span class="row-icon">
<r.icon class="w-4 h-4" />
</span>
<div class="row-main">
<div class="row-title">{r.title}</div>
<div class="row-sub">{r.sub}</div>
</div>
<span class="row-trailing">
<IconChevronRight class="w-3.5 h-3.5" />
</span>
</div>
)}
</For>
</div>
</Card>
</div>
</div>
{/* Quick Actions */}
<Card class="p-6">
<h3 class="text-lg font-semibold mb-4">Quick Start</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<button
onClick={() => props.onNavigate("storage")}
class="p-4 border border-gray-200 rounded-lg hover:border-blue-500 hover:bg-blue-50 transition-colors text-left"
>
<div class="flex items-center gap-3 mb-2">
<div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
<svg class="w-5 h-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 3h4m-4 4h4" />
</svg>
</div>
<h4 class="font-semibold">Create Bucket</h4>
</div>
<p class="text-sm text-gray-600">Set up storage for your files and assets</p>
</button>
<button
onClick={() => props.onNavigate("settings")}
class="p-4 border border-gray-200 rounded-lg hover:border-green-500 hover:bg-green-50 transition-colors text-left"
>
<div class="flex items-center gap-3 mb-2">
<div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center">
<svg class="w-5 h-5 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
</svg>
</div>
<h4 class="font-semibold">Generate API Key</h4>
</div>
<p class="text-sm text-gray-600">Create keys to authenticate your apps</p>
</button>
<button
onClick={() => props.onNavigate("members")}
class="p-4 border border-gray-200 rounded-lg hover:border-purple-500 hover:bg-purple-50 transition-colors text-left"
>
<div class="flex items-center gap-3 mb-2">
<div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center">
<svg class="w-5 h-5 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" />
</svg>
</div>
<h4 class="font-semibold">Invite Members</h4>
</div>
<p class="text-sm text-gray-600">Add team members to collaborate</p>
</button>
</div>
</Card>
{/* Documentation Link */}
<Card class="p-6 bg-gradient-to-r from-blue-50 to-purple-50 border-blue-200">
<div class="flex items-center justify-between">
<div>
<h3 class="text-lg font-semibold mb-1">Need Help Getting Started?</h3>
<p class="text-sm text-gray-600">Check out our documentation and guides</p>
</div>
<Button variant="outline">View Docs</Button>
</div>
</Card>
</div>
);
}
+3 -3
View File
@@ -76,7 +76,7 @@ export function Table<T extends Record<string, unknown>>(props: TableProps<T>) {
<tr>
<td
colspan={local.columns.length}
class="py-8 text-center text-text-muted"
class="py-8 text-center text-text-3"
>
{local.emptyMessage ?? "No data available"}
</td>
@@ -194,7 +194,7 @@ export function Pagination(props: PaginationProps) {
return (
<nav class="flex items-center justify-between" aria-label="Pagination">
<div class="text-xs text-text-muted">
<div class="text-xs text-text-3">
Page {props.currentPage} of {props.totalPages}
</div>
<div class="flex items-center gap-1">
@@ -212,7 +212,7 @@ export function Pagination(props: PaginationProps) {
<For each={pages()}>
{(page) =>
page === "ellipsis" ? (
<span class="px-2 text-text-muted">...</span>
<span class="px-2 text-text-3">...</span>
) : (
<button
class={`btn-sm ${page === props.currentPage ? "btn-primary" : "btn-ghost"}`}
+6 -6
View File
@@ -40,7 +40,7 @@ export function Tabs(props: TabsProps) {
const getTabClasses = (tab: Tab) => {
const isActive = activeTab() === tab.id;
const base = `${sizeClasses[size()]} font-medium transition-all duration-fast flex items-center gap-2`;
const base = `${sizeClasses[size()]} font-medium transition-all duration-150 flex items-center gap-2`;
if (tab.disabled) {
return `${base} opacity-50 cursor-not-allowed`;
@@ -51,19 +51,19 @@ export function Tabs(props: TabsProps) {
return `${base} rounded-lg ${
isActive
? "bg-accent text-white shadow-sm"
: "text-text-secondary hover:text-text-primary hover:bg-surface-2"
: "text-text-2 hover:text-text-1 hover:bg-surface-2"
}`;
case "underline":
return `${base} border-b-2 ${
isActive
? "border-accent text-accent"
: "border-transparent text-text-secondary hover:text-text-primary hover:border-border-hover"
: "border-transparent text-text-2 hover:text-text-1 hover:border-border-strong"
}`;
default:
return `${base} rounded-lg ${
isActive
? "bg-surface-2 text-text-primary"
: "text-text-secondary hover:text-text-primary hover:bg-surface-1"
? "bg-surface-2 text-text-1"
: "text-text-2 hover:text-text-1 hover:bg-surface"
}`;
}
};
@@ -90,7 +90,7 @@ export function Tabs(props: TabsProps) {
</Show>
<span>{tab.label}</span>
<Show when={tab.badge}>
<span class="badge-neutral text-2xs">{tab.badge}</span>
<span class="badge-neutral text-xs">{tab.badge}</span>
</Show>
</button>
)}
+8 -8
View File
@@ -101,27 +101,27 @@ export function ToastContainer() {
aria-atomic="true"
>
<For each={toasts()}>
{(toast) => {
const config = variantConfig[toast.variant];
{(item) => {
const config = variantConfig[item.variant];
return (
<div
class={`${config.bg} ${config.border} border rounded-lg shadow-lg p-4 flex gap-3 animate-slide-up pointer-events-auto`}
role="alert"
>
<div class={`flex-shrink-0 ${config.text}`}>
{toast.icon ?? config.icon}
{item.icon ?? config.icon}
</div>
<div class="flex-1 min-w-0">
<Show when={toast.title}>
<p class={`font-semibold text-sm ${config.text}`}>{toast.title}</p>
<Show when={item.title}>
<p class={`font-semibold text-sm ${config.text}`}>{item.title}</p>
</Show>
<p class={`text-sm ${toast.title ? "mt-1" : ""} ${config.text}`}>
{toast.message}
<p class={`text-sm ${item.title ? "mt-1" : ""} ${config.text}`}>
{item.message}
</p>
</div>
<button
class={`flex-shrink-0 ${config.text} opacity-70 hover:opacity-100 transition-opacity`}
onClick={() => toast.dismiss(toast.id)}
onClick={() => toast.dismiss(item.id)}
aria-label="Dismiss notification"
>
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+1 -1
View File
@@ -92,7 +92,7 @@ export function Tooltip(props: TooltipProps) {
<Portal>
<div
ref={tooltipRef}
class="fixed z-50 px-3 py-2 text-xs font-medium text-text-primary bg-surface-3 border border-border-strong rounded-lg shadow-lg animate-fade-in pointer-events-none"
class="fixed z-50 px-3 py-2 text-xs font-medium text-text-1 bg-surface-3 border border-border-strong rounded-lg shadow-lg animate-fade-in pointer-events-none"
style={{
left: `${position().x}px`,
top: `${position().y}px`,
+5 -6
View File
@@ -1,13 +1,12 @@
// Components barrel export
export { AppShell, type ViewType } from "./AppShell";
export { Badge, StatusBadge } from "./Badge";
export { Button } from "./Button";
export { Card, CardHeader, CardContent, CardFooter, StatCard } from "./Card";
export { CommandPalette } from "./CommandPalette";
export { CommandPaletteEnhanced } from "./CommandPaletteEnhanced";
export { DataTable } from "./DataTable";
export { CommandPaletteEnhanced, type PaletteCommand } from "./CommandPaletteEnhanced";
export { Dropdown } from "./Dropdown";
export * as Icons from "./Icons";
export { Input, Textarea, Select, FileInput } from "./Input";
export { Layout, Sidebar, Header, PageHeader, EmptyState } from "./Layout";
export { Logo, LogoIcon } from "./Logo";
export { Message, Loading, Skeleton, SkeletonCard } from "./Message";
export { Modal, ModalFooter } from "./Modal";
@@ -15,9 +14,9 @@ export { NotificationCenter, addNotification, removeNotification, clearNotificat
export { OnboardingModal } from "./OnboardingModal";
export { Progress, CircularProgress, Spinner } from "./Progress";
export { ProjectDashboard } from "./ProjectDashboard";
export { Table, DataTable as DataTableOld, Pagination } from "./Table";
export { Table, DataTable, Pagination } from "./Table";
export { Tabs, TabPanel } from "./Tabs";
export { ToastContainer, toast } from "./Toast";
export { Tooltip } from "./Tooltip";
export { VirtualList } from "./VirtualList";
export { NetworkError, DemoBanner } from "./NetworkError";
export { NetworkError } from "./NetworkError";
+1165 -1247
View File
File diff suppressed because it is too large. Load diff
@@ -1,5 +1,6 @@
import { describe, it, expect, vi, beforeEach } from 'vitest';
import { OpenAPI } from '@primora/api-client';
import '../api';
describe('API Configuration', () => {
beforeEach(() => {
+2
View File
@@ -1,10 +1,12 @@
import { createAuthClient } from "better-auth/solid";
import { adminClient } from "better-auth/client/plugins";
// Use full URL for dev mode, relative path for production
const baseURL = import.meta.env.VITE_AUTH_BASE_URL ?? "http://localhost/auth";
export const authClient = createAuthClient({
baseURL,
plugins: [adminClient()],
});
export async function fetchApiToken() {
File diff suppressed because it is too large. Load diff
-14
View File
@@ -1,14 +0,0 @@
/* @refresh reload */
import { render } from "solid-js/web";
import "./index.css";
import { ShowcasePage } from "./ShowcasePage";
const root = document.getElementById("root");
if (import.meta.env.DEV && !(root instanceof HTMLElement)) {
throw new Error(
"Root element not found. Did you forget to add it to your index.html? Or maybe the id attribute got misspelled?",
);
}
render(() => <ShowcasePage />, root!);
+185 -242
View File
@@ -1,298 +1,241 @@
import { Show, For } from "solid-js";
import { Button, Card, Input, Select, Badge, Table, EmptyState } from "../components";
import type { AuditLog } from "@primora/api-client";
import { For, Show, createSignal } from "solid-js";
import type { AuditLog, AuditLogListResponse } from "@primora/api-client";
import { Badge } from "../components/Badge";
import { Input, Select } from "../components/Input";
import { IconAudit, IconRefresh, IconDownload } from "../components/Icons";
interface AuditPageProps {
auditLogs?: AuditLog[];
auditLogs: AuditLog[];
auditSearch: string;
auditAction: string;
auditOffset: number;
auditPage?: { items: AuditLog[]; total: number; limit: number; offset: number };
auditPage?: AuditLogListResponse;
onAuditSearchChange: (value: string) => void;
onAuditActionChange: (value: string) => void;
onAuditPageChange: (offset: number) => void;
onRefreshAudit: () => void;
formatDate: (date?: string | null) => string;
formatDate: (value?: string | null) => string;
}
const PAGE_SIZE = 25;
const ACTION_OPTIONS = [
"",
"project.created",
"project.updated",
"project.deleted",
"bucket.created",
"bucket.updated",
"bucket.deleted",
"object.uploaded",
"object.updated",
"object.deleted",
"api_key.created",
"api_key.revoked",
"member.invited",
"member.role_updated",
"member.removed",
"collection.created",
"collection.deleted",
"document.created",
"document.updated",
"document.deleted",
];
function actionVariant(action: string): "success" | "error" | "primary" | "warning" | "neutral" {
if (action.includes("delete") || action.includes("revoke") || action.includes("remove")) {
return "error";
}
if (action.includes("create") || action.includes("upload") || action.includes("invite")) {
return "success";
}
if (action.includes("update") || action.includes("role")) {
return "primary";
}
return "neutral";
}
function exportLogs(logs: AuditLog[], format: "json" | "csv") {
let content: string;
let mime: string;
let ext: string;
if (format === "csv") {
const header = "id,created_at,action,resource_type,resource_id,request_id";
const rows = logs.map((l) =>
[l.id, l.created_at, l.action, l.resource_type, l.resource_id, l.request_id]
.map((v) => `"${String(v ?? "").replace(/"/g, '""')}"`)
.join(","),
);
content = [header, ...rows].join("\n");
mime = "text/csv";
ext = "csv";
} else {
content = JSON.stringify(logs, null, 2);
mime = "application/json";
ext = "json";
}
const blob = new Blob([content], { type: mime });
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = `audit-log-${new Date().toISOString().slice(0, 10)}.${ext}`;
a.click();
URL.revokeObjectURL(url);
}
export function AuditPage(props: AuditPageProps) {
const getActionBadgeVariant = (action: string) => {
if (action.includes('create')) return 'success';
if (action.includes('delete')) return 'danger';
if (action.includes('update')) return 'primary';
return 'secondary';
};
const [expandedId, setExpandedId] = createSignal<string | null>(null);
const getActionIcon = (action: string) => {
if (action.includes('create')) {
return (
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
</svg>
);
}
if (action.includes('delete')) {
return (
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
);
}
if (action.includes('update')) {
return (
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
</svg>
);
}
return (
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
);
};
const formatResourceType = (type: string) => {
return type.split('_').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ');
};
const total = () => props.auditPage?.total ?? props.auditLogs.length;
const currentPage = () => Math.floor(props.auditOffset / PAGE_SIZE) + 1;
const totalPages = () => Math.max(1, Math.ceil(total() / PAGE_SIZE));
return (
<div class="space-y-6">
{/* Header */}
<div class="flex items-center justify-between">
<div class="page">
<div class="page-header">
<div>
<h1 class="text-3xl font-bold text-gray-900">Audit Logs</h1>
<p class="text-gray-600 mt-1">Track all activities and changes in your project</p>
<h1 class="page-title">Audit log</h1>
<p class="page-description">
Every mutating request against this project, recorded with request IDs.
</p>
</div>
<div class="page-actions">
<button class="btn btn-ghost" onClick={props.onRefreshAudit}>
<IconRefresh class="w-4 h-4" />
Refresh
</button>
<button class="btn btn-secondary" onClick={() => exportLogs(props.auditLogs, "csv")}>
<IconDownload class="w-4 h-4" />
CSV
</button>
<button class="btn btn-secondary" onClick={() => exportLogs(props.auditLogs, "json")}>
<IconDownload class="w-4 h-4" />
JSON
</button>
</div>
<Button variant="secondary" onClick={props.onRefreshAudit}>
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
</svg>
Refresh
</Button>
</div>
{/* Filters */}
<Card class="p-4">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="flex items-center gap-3 flex-wrap">
<div style="flex:1;min-width:14rem;max-width:24rem">
<Input
placeholder="Search by resource, actor, or details..."
placeholder="Search by resource, action or request ID…"
class="input-sm"
value={props.auditSearch}
onInput={(e) => props.onAuditSearchChange(e.currentTarget.value)}
/>
<Select
value={props.auditAction}
onChange={(e) => props.onAuditActionChange(e.currentTarget.value)}
>
<option value="">All Actions</option>
<option value="create">Create</option>
<option value="update">Update</option>
<option value="delete">Delete</option>
<option value="upload">Upload</option>
<option value="download">Download</option>
</Select>
</div>
</Card>
{/* Stats Cards */}
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
<Card class="p-4">
<div class="flex items-center gap-3">
<div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
<svg class="w-5 h-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
</svg>
</div>
<div>
<p class="text-2xl font-bold text-gray-900">{props.auditPage?.total ?? 0}</p>
<p class="text-sm text-gray-600">Total Events</p>
</div>
</div>
</Card>
<Card class="p-4">
<div class="flex items-center gap-3">
<div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center">
<svg class="w-5 h-5 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
</svg>
</div>
<div>
<p class="text-2xl font-bold text-gray-900">
{props.auditLogs?.filter(log => log.action.includes('create')).length ?? 0}
</p>
<p class="text-sm text-gray-600">Creates</p>
</div>
</div>
</Card>
<Card class="p-4">
<div class="flex items-center gap-3">
<div class="w-10 h-10 bg-yellow-100 rounded-lg flex items-center justify-center">
<svg class="w-5 h-5 text-yellow-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
</svg>
</div>
<div>
<p class="text-2xl font-bold text-gray-900">
{props.auditLogs?.filter(log => log.action.includes('update')).length ?? 0}
</p>
<p class="text-sm text-gray-600">Updates</p>
</div>
</div>
</Card>
<Card class="p-4">
<div class="flex items-center gap-3">
<div class="w-10 h-10 bg-red-100 rounded-lg flex items-center justify-center">
<svg class="w-5 h-5 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
</div>
<div>
<p class="text-2xl font-bold text-gray-900">
{props.auditLogs?.filter(log => log.action.includes('delete')).length ?? 0}
</p>
<p class="text-sm text-gray-600">Deletes</p>
</div>
</div>
</Card>
<Select
class="input-sm"
style="width:14rem"
value={props.auditAction}
onChange={(e) => props.onAuditActionChange(e.currentTarget.value)}
aria-label="Filter by action"
>
<option value="">All actions</option>
<For each={ACTION_OPTIONS.slice(1)}>
{(action) => <option value={action}>{action}</option>}
</For>
</Select>
<span class="text-xs text-text-3 ml-auto">
{total()} event{total() === 1 ? "" : "s"}
</span>
</div>
{/* Audit Logs Table */}
<Card>
<div class="card card-flush">
<Show
when={(props.auditLogs?.length ?? 0) > 0}
when={props.auditLogs.length > 0}
fallback={
<div class="p-12">
<EmptyState
icon={
<svg class="w-16 h-16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
</svg>
}
title="No audit logs"
description={props.auditSearch || props.auditAction ? "No logs match your filters" : "Activity will appear here as you use the platform"}
/>
<div class="empty-state">
<div class="empty-state-icon">
<IconAudit class="w-5 h-5" />
</div>
<p class="empty-state-title">No audit events</p>
<p class="empty-state-description">
Actions on this project — uploads, key creation, member changes — will appear here.
</p>
</div>
}
>
<div class="overflow-x-auto">
<Table>
<div class="table-container">
<table class="table">
<thead>
<tr>
<th>Timestamp</th>
<th>Action</th>
<th>Event</th>
<th>Resource</th>
<th>Actor</th>
<th>Details</th>
<th>Request</th>
<th style="width:1%">Time</th>
</tr>
</thead>
<tbody>
<For each={props.auditLogs}>
{(log) => (
<tr class="hover:bg-gray-50">
<td class="text-sm text-gray-600 whitespace-nowrap">
{props.formatDate(log.created_at)}
</td>
<td>
<div class="flex items-center gap-2">
<Badge variant={getActionBadgeVariant(log.action)} class="flex items-center gap-1">
{getActionIcon(log.action)}
{log.action}
</Badge>
</div>
</td>
<td>
<div>
<p class="font-medium text-gray-900">{formatResourceType(log.resource_type)}</p>
<Show when={log.resource_id}>
<code class="text-xs text-gray-500">{log.resource_id}</code>
</Show>
</div>
</td>
<td>
<div class="flex items-center gap-2">
<div class="w-8 h-8 rounded-full bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center text-white text-xs font-semibold">
{log.actor_name?.charAt(0).toUpperCase() ?? '?'}
</div>
<div>
<p class="text-sm font-medium text-gray-900">{log.actor_name}</p>
<p class="text-xs text-gray-500">{log.actor_email}</p>
</div>
</div>
</td>
<td>
<Show when={log.details}>
<details class="text-sm">
<summary class="cursor-pointer text-blue-600 hover:text-blue-700">
View details
</summary>
<pre class="mt-2 p-2 bg-gray-50 rounded text-xs overflow-x-auto">
{JSON.stringify(log.details, null, 2)}
<>
<tr
class="clickable"
onClick={() =>
setExpandedId(expandedId() === log.id ? null : log.id)
}
>
<td>
<Badge variant={actionVariant(log.action)}>{log.action}</Badge>
</td>
<td>
<span class="text-text-2">{log.resource_type}</span>{" "}
<code class="text-xs">{log.resource_id}</code>
</td>
<td>
<code class="text-xs text-text-3">{log.request_id}</code>
</td>
<td class="text-xs text-text-3 whitespace-nowrap">
{props.formatDate(log.created_at)}
</td>
</tr>
<Show when={expandedId() === log.id && Object.keys(log.metadata ?? {}).length > 0}>
<tr>
<td colspan={4} style="background:var(--bg-panel);padding:0.75rem 1.25rem">
<pre class="code-block" style="border:0;padding:0;background:transparent">
{JSON.stringify(log.metadata, null, 2)}
</pre>
</details>
</Show>
</td>
</tr>
</td>
</tr>
</Show>
</>
)}
</For>
</tbody>
</Table>
</table>
</div>
{/* Pagination */}
<Show when={props.auditPage && props.auditPage.total > props.auditPage.limit}>
<div class="p-4 border-t border-gray-200 flex items-center justify-between">
<p class="text-sm text-gray-600">
Showing {props.auditPage!.offset + 1} to {Math.min(props.auditPage!.offset + props.auditPage!.limit, props.auditPage!.total)} of {props.auditPage!.total}
</p>
<div class="flex gap-2">
<Button
variant="ghost"
size="sm"
disabled={props.auditPage!.offset === 0}
onClick={() => props.onAuditPageChange(Math.max(0, props.auditPage!.offset - props.auditPage!.limit))}
<Show when={totalPages() > 1}>
<div
class="flex items-center justify-between px-4 py-3"
style="border-top:1px solid var(--border)"
>
<span class="text-xs text-text-3">
Page {currentPage()} of {totalPages()}
</span>
<div class="flex gap-1">
<button
class="btn btn-ghost btn-sm"
disabled={currentPage() <= 1}
onClick={() => props.onAuditPageChange((currentPage() - 2) * PAGE_SIZE)}
>
Previous
</Button>
<Button
variant="ghost"
size="sm"
disabled={props.auditPage!.offset + props.auditPage!.limit >= props.auditPage!.total}
onClick={() => props.onAuditPageChange(props.auditPage!.offset + props.auditPage!.limit)}
</button>
<button
class="btn btn-ghost btn-sm"
disabled={!props.auditPage?.has_more}
onClick={() => props.onAuditPageChange(currentPage() * PAGE_SIZE)}
>
Next
</Button>
</button>
</div>
</div>
</Show>
</Show>
</Card>
{/* Export Section */}
<Card class="p-6 bg-gradient-to-r from-purple-50 to-blue-50 border-purple-200">
<div class="flex items-center justify-between">
<div>
<h3 class="text-lg font-semibold mb-1">Export Audit Logs</h3>
<p class="text-sm text-gray-600">Download audit logs for compliance and analysis</p>
</div>
<div class="flex gap-2">
<Button variant="outline">
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
</svg>
Export CSV
</Button>
<Button variant="outline">
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
</svg>
Export JSON
</Button>
</div>
</div>
</Card>
</div>
</div>
);
}
+228
View File
@@ -0,0 +1,228 @@
import { For, Show, createMemo, createSignal } from "solid-js";
import { Badge } from "../components/Badge";
import { Input } from "../components/Input";
import {
IconAuth,
IconRefresh,
IconTrash,
} from "../components/Icons";
/** Mirrors the better-auth admin `listUsers` user shape. */
export interface AuthUser {
id: string;
name: string;
email: string;
emailVerified: boolean;
role?: string | null;
banned?: boolean | null;
createdAt: string | Date;
}
interface AuthPageProps {
users?: AuthUser[];
pending: boolean;
message: string;
error?: string;
currentUserId?: string;
onRefresh: () => void;
onSetRole: (id: string, role: string) => void;
onSetBanned: (id: string, banned: boolean) => void;
onRemove: (id: string) => void;
}
const authRoles = ["admin", "user"] as const;
function initials(name?: string, email?: string): string {
const src = name || email || "?";
return src
.split(/[\s@.]+/)
.filter(Boolean)
.slice(0, 2)
.map((s) => s[0]?.toUpperCase())
.join("");
}
function formatDate(value?: string | Date | null): string {
if (!value) return "—";
const date = value instanceof Date ? value : new Date(value);
if (Number.isNaN(date.getTime())) return "—";
return date.toLocaleDateString(undefined, {
year: "numeric",
month: "short",
day: "numeric",
});
}
export function AuthPage(props: AuthPageProps) {
const [query, setQuery] = createSignal("");
const filtered = createMemo(() => {
const q = query().toLowerCase();
const list = props.users ?? [];
if (!q) return list;
return list.filter(
(u) => u.name.toLowerCase().includes(q) || u.email.toLowerCase().includes(q),
);
});
return (
<div class="page">
<div class="page-header">
<div>
<h1 class="page-title">Authentication</h1>
<p class="page-description">
Users who can sign in to this Primora instance.
</p>
</div>
<div class="page-actions">
<button
class="btn btn-ghost"
onClick={props.onRefresh}
disabled={props.pending}
aria-label="Refresh users"
>
<IconRefresh class="w-4 h-4" />
Refresh
</button>
</div>
</div>
<Show when={props.message}>
<div class="message message-neutral">{props.message}</div>
</Show>
<Show
when={!props.error}
fallback={
<div class="card empty-state" style="min-height:16rem">
<div class="empty-state-icon">
<IconAuth class="w-5 h-5" />
</div>
<p class="empty-state-title">Admin access required</p>
<p class="empty-state-description">{props.error}</p>
</div>
}
>
<div class="flex items-center justify-between gap-3 flex-wrap">
<div class="tabs">
<button class="tab active">
Users
<span class="nav-badge ml-1.5">{(props.users ?? []).length}</span>
</button>
</div>
<Input
placeholder="Filter users…"
value={query()}
onInput={(e) => setQuery(e.currentTarget.value)}
class="input-sm"
style="width:14rem"
/>
</div>
<div class="card card-flush">
<Show
when={filtered().length > 0}
fallback={
<div class="empty-state">
<div class="empty-state-icon">
<IconAuth class="w-5 h-5" />
</div>
<p class="empty-state-title">No users found</p>
<p class="empty-state-description">
{query() ? "No users match this filter." : "No one has signed up yet."}
</p>
</div>
}
>
<div class="table-container">
<table class="table">
<thead>
<tr>
<th>User</th>
<th>Status</th>
<th>Role</th>
<th>Joined</th>
<th style="width:1%" />
</tr>
</thead>
<tbody>
<For each={filtered()}>
{(user) => (
<tr>
<td>
<div class="flex items-center gap-2.5">
<span
class="avatar"
style="width:1.75rem;height:1.75rem;font-size:0.625rem"
>
{initials(user.name, user.email)}
</span>
<div>
<div class="font-medium text-text-1">
{user.name || "Unnamed"}
<Show when={user.id === props.currentUserId}>
<span class="text-xs text-text-3"> (you)</span>
</Show>
</div>
<div class="text-xs text-text-3">{user.email}</div>
</div>
</div>
</td>
<td>
<div class="flex items-center gap-1.5">
<Badge variant={user.emailVerified ? "success" : "warning"}>
<span class="badge-dot" />
{user.emailVerified ? "Verified" : "Unverified"}
</Badge>
<Show when={user.banned}>
<Badge variant="error">Banned</Badge>
</Show>
</div>
</td>
<td>
<select
class="select input-sm"
style="width:8.5rem"
value={user.role ?? "user"}
onChange={(e) => props.onSetRole(user.id, e.currentTarget.value)}
disabled={props.pending || user.id === props.currentUserId}
aria-label={`Role for ${user.email}`}
>
<For each={authRoles}>
{(role) => <option value={role}>{role}</option>}
</For>
</select>
</td>
<td class="text-text-3">{formatDate(user.createdAt)}</td>
<td style="width:1%">
<div class="flex items-center gap-1">
<button
class="btn btn-ghost btn-sm"
onClick={() => props.onSetBanned(user.id, !user.banned)}
disabled={props.pending || user.id === props.currentUserId}
>
{user.banned ? "Unban" : "Ban"}
</button>
<button
class="icon-btn"
title="Delete user"
aria-label={`Delete ${user.email}`}
onClick={() => props.onRemove(user.id)}
disabled={props.pending || user.id === props.currentUserId}
>
<IconTrash class="w-4 h-4" />
</button>
</div>
</td>
</tr>
)}
</For>
</tbody>
</table>
</div>
</Show>
</div>
</Show>
</div>
);
}
+287 -221
View File
@@ -1,284 +1,350 @@
import { Show, For, createSignal, createMemo } from "solid-js";
import {
Button,
Card,
Input,
Textarea,
Badge,
EmptyState,
Message,
Modal,
Table,
DataTable
} from "../components";
import { For, Show, createMemo, createSignal } from "solid-js";
import type { Collection, Document } from "@primora/api-client";
import { Badge } from "../components/Badge";
import { Modal, ModalFooter } from "../components/Modal";
import { Input, Textarea } from "../components/Input";
import {
IconPlus,
IconCollections,
IconTrash,
IconChevronRight,
IconFile,
} from "../components/Icons";
interface CollectionInput {
name: string;
slug: string;
description: string;
}
interface CollectionsPageProps {
collections: Collection[];
documents: Document[];
selectedCollectionID?: string;
collectionInput: { name: string; slug: string; description: string };
collectionInput: CollectionInput;
collectionMessage: string;
collectionPending: boolean;
documentPending: boolean;
canUpdate: boolean;
onCollectionInputChange: (field: string, value: string) => void;
onCreateCollection: (e: SubmitEvent) => void;
onCollectionInputChange: (field: keyof CollectionInput, value: string) => void;
onCreateCollection: (event: SubmitEvent) => void;
onDeleteCollection: (id: string) => void;
onSelectCollection: (id: string) => void;
onCreateDocument: (data: any) => void;
onUpdateDocument: (id: string, data: any) => void;
onCreateDocument: (data: Record<string, unknown>) => void;
onUpdateDocument: (id: string, data: Record<string, unknown>) => void;
onDeleteDocument: (id: string) => void;
formatDate: (date?: string | null) => string;
formatDate: (value?: string | null) => string;
}
function prettyJson(value: Record<string, unknown>): string {
return JSON.stringify(value, null, 2);
}
export function CollectionsPage(props: CollectionsPageProps) {
const [showCreateCollectionModal, setShowCreateCollectionModal] = createSignal(false);
const [showDocumentModal, setShowDocumentModal] = createSignal(false);
const [editingDocument, setEditingDocument] = createSignal<Document | null>(null);
const [documentData, setDocumentData] = createSignal("");
const [createOpen, setCreateOpen] = createSignal(false);
const [docEditorOpen, setDocEditorOpen] = createSignal(false);
const [editingDoc, setEditingDoc] = createSignal<Document | null>(null);
const [docJson, setDocJson] = createSignal("{}");
const [docError, setDocError] = createSignal("");
const activeCollection = createMemo(() =>
props.collections.find(c => c.id === props.selectedCollectionID)
const activeCollection = createMemo(() =>
props.collections.find((c) => c.id === props.selectedCollectionID),
);
const handleCreateCollection = (e: SubmitEvent) => {
props.onCreateCollection(e);
setShowCreateCollectionModal(false);
const openNewDoc = () => {
setEditingDoc(null);
setDocJson("{\n \n}");
setDocError("");
setDocEditorOpen(true);
};
const handleOpenDocumentModal = (doc: Document | null = null) => {
setEditingDocument(doc);
setDocumentData(doc ? JSON.stringify(doc.data, null, 2) : "{\n \n}");
setShowDocumentModal(true);
const openEditDoc = (doc: Document) => {
setEditingDoc(doc);
setDocJson(prettyJson(doc.data));
setDocError("");
setDocEditorOpen(true);
};
const handleSaveDocument = (e: SubmitEvent) => {
const submitDoc = (e: SubmitEvent) => {
e.preventDefault();
try {
const data = JSON.parse(documentData());
if (editingDocument()) {
props.onUpdateDocument(editingDocument()!.id, data);
} else {
props.onCreateDocument(data);
const parsed = JSON.parse(docJson());
if (typeof parsed !== "object" || parsed === null || Array.isArray(parsed)) {
setDocError("Document data must be a JSON object.");
return;
}
setShowDocumentModal(false);
} catch (err) {
alert("Invalid JSON data");
const doc = editingDoc();
if (doc) {
props.onUpdateDocument(doc.id, parsed);
} else {
props.onCreateDocument(parsed);
}
setDocEditorOpen(false);
} catch {
setDocError("Invalid JSON. Check syntax and try again.");
}
};
return (
<div class="flex flex-col md:flex-row gap-6 h-[calc(100vh-12rem)]">
{/* Sidebar: Collections List */}
<div class="w-full md:w-64 flex flex-col gap-4">
<div class="flex items-center justify-between">
<h2 class="text-xl font-bold">Collections</h2>
<Button size="sm" onClick={() => setShowCreateCollectionModal(true)}>
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
</svg>
</Button>
<div class="page">
<div class="page-header">
<div>
<h1 class="page-title">Collections</h1>
<p class="page-description">
Document collections stored in Postgres — schema-flexible records for your app.
</p>
</div>
<Card class="flex-1 overflow-y-auto p-2">
<Show
when={props.collections.length > 0}
fallback={<p class="text-sm text-gray-500 p-4 text-center">No collections</p>}
<div class="page-actions">
<button
class="btn btn-primary"
onClick={() => setCreateOpen(true)}
disabled={!props.canUpdate}
>
<div class="space-y-1">
<For each={props.collections}>
{(collection) => (
<button
onClick={() => props.onSelectCollection(collection.id)}
class={`w-full text-left px-3 py-2 rounded-md text-sm transition-colors ${
props.selectedCollectionID === collection.id
? 'bg-blue-50 text-blue-700 font-medium'
: 'text-gray-600 hover:bg-gray-50'
}`}
>
<div class="flex items-center justify-between">
<span>{collection.name}</span>
<Show when={props.selectedCollectionID === collection.id}>
<div class="w-1.5 h-1.5 rounded-full bg-blue-600" />
</Show>
</div>
</button>
)}
</For>
</div>
</Show>
</Card>
<IconPlus class="w-4 h-4" />
New collection
</button>
</div>
</div>
{/* Main Content: Documents Table */}
<div class="flex-1 flex flex-col gap-4 min-w-0">
<Show
when={activeCollection()}
fallback={
<Card class="flex-1 flex items-center justify-center p-8">
<EmptyState
title="No collection selected"
description="Select a collection from the sidebar to view its documents"
icon={
<svg class="w-12 h-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" />
</svg>
}
/>
</Card>
}
>
<div class="flex items-center justify-between">
<div>
<h2 class="text-2xl font-bold text-gray-900">{activeCollection()?.name}</h2>
<p class="text-sm text-gray-500">{activeCollection()?.slug}</p>
</div>
<div class="flex gap-2">
<Button variant="ghost" size="sm" onClick={() => props.onDeleteCollection(activeCollection()!.id)}>
Delete Collection
</Button>
<Button onClick={() => handleOpenDocumentModal()}>
Add Document
</Button>
</div>
</div>
<Show when={props.collectionMessage}>
<div class="message message-neutral">{props.collectionMessage}</div>
</Show>
<Card class="flex-1 overflow-hidden flex flex-col">
<Show
when={props.documents.length > 0}
<div class="grid gap-5" style="grid-template-columns: minmax(0, 17rem) minmax(0, 1fr)">
{/* collection list */}
<div class="card card-flush">
<div
class="card-header"
style="padding:1rem 1rem 0.75rem;margin-bottom:0;border-bottom:1px solid var(--border)"
>
<span class="card-header-title">Collections</span>
</div>
<div class="p-1.5">
<For
each={props.collections}
fallback={
<div class="flex-1 flex items-center justify-center p-8">
<EmptyState
title="No documents yet"
description="This collection is empty. Add your first document to get started."
action={<Button onClick={() => handleOpenDocumentModal()}>Add Document</Button>}
/>
<div class="p-4 text-center">
<p class="text-xs text-text-3">No collections yet</p>
</div>
}
>
<div class="overflow-auto">
<Table>
<thead>
<tr>
<th class="w-1/3">ID</th>
<th>Data</th>
<th class="w-48">Created At</th>
<th class="w-24 text-right">Actions</th>
</tr>
</thead>
<tbody>
<For each={props.documents}>
{(doc) => (
<tr class="hover:bg-gray-50">
<td class="font-mono text-xs text-gray-500">{doc.id}</td>
<td>
<div class="max-w-md truncate text-sm">
{JSON.stringify(doc.data)}
</div>
</td>
<td class="text-sm text-gray-500">{props.formatDate(doc.created_at)}</td>
<td class="text-right">
<div class="flex justify-end gap-1">
<button
onClick={() => handleOpenDocumentModal(doc)}
class="p-1 text-gray-400 hover:text-blue-600 transition-colors"
>
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
</svg>
</button>
<button
onClick={() => props.onDeleteDocument(doc.id)}
class="p-1 text-gray-400 hover:text-red-600 transition-colors"
>
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
</button>
</div>
</td>
</tr>
)}
</For>
</tbody>
</Table>
{(collection) => (
<button
class={`nav-item w-full ${collection.id === props.selectedCollectionID ? "active" : ""}`}
onClick={() => props.onSelectCollection(collection.id)}
>
<IconCollections class="w-4 h-4" />
<span class="flex-1 truncate">{collection.name}</span>
<Show when={props.canUpdate}>
<span
class="icon-btn"
role="button"
title="Delete collection"
aria-label={`Delete ${collection.name}`}
style="width:1.5rem;height:1.5rem"
onClick={(e) => {
e.stopPropagation();
props.onDeleteCollection(collection.id);
}}
>
<IconTrash class="w-3.5 h-3.5" />
</span>
</Show>
</button>
)}
</For>
</div>
</div>
{/* documents */}
<div class="card card-flush" style="min-height:28rem">
<Show
when={activeCollection()}
fallback={
<div class="empty-state" style="min-height:28rem">
<div class="empty-state-icon">
<IconCollections class="w-5 h-5" />
</div>
<p class="empty-state-title">Select a collection</p>
<p class="empty-state-description">
Choose a collection on the left, or create one to start adding documents.
</p>
</div>
</Show>
</Card>
</Show>
}
>
<div
class="card-header"
style="padding:1rem 1.25rem;margin-bottom:0;border-bottom:1px solid var(--border)"
>
<div class="flex items-center justify-between gap-3 w-full">
<div class="min-w-0">
<span class="card-header-title">{activeCollection()!.name}</span>
<span class="card-header-description">
<code>{activeCollection()!.slug}</code>
<Show when={activeCollection()!.description}>
{" · "}{activeCollection()!.description}
</Show>
</span>
</div>
<button
class="btn btn-secondary btn-sm"
onClick={openNewDoc}
disabled={!props.canUpdate}
>
<IconPlus class="w-3.5 h-3.5" />
New document
</button>
</div>
</div>
<div class="table-container">
<table class="table">
<thead>
<tr>
<th>Document</th>
<th style="width:1%">Updated</th>
<th style="width:1%" />
</tr>
</thead>
<tbody>
<For
each={props.documents}
fallback={
<tr>
<td colspan={3} class="py-10 text-center text-text-3">
No documents yet. Create one as a JSON object.
</td>
</tr>
}
>
{(doc) => (
<tr class="clickable" onClick={() => openEditDoc(doc)}>
<td>
<div class="flex items-center gap-2.5 min-w-0">
<IconFile class="w-4 h-4 text-text-3 flex-shrink-0" />
<div class="min-w-0">
<div class="font-mono text-xs text-text-1">{doc.id}</div>
<div class="text-xs text-text-3 truncate" style="max-width:30rem">
{JSON.stringify(doc.data)}
</div>
</div>
</div>
</td>
<td class="text-xs text-text-3 whitespace-nowrap">
{props.formatDate(doc.updated_at)}
</td>
<td>
<IconChevronRight class="w-4 h-4 text-text-3" />
</td>
</tr>
)}
</For>
</tbody>
</table>
</div>
</Show>
</div>
</div>
{/* Create Collection Modal */}
<Modal
open={showCreateCollectionModal()}
onClose={() => setShowCreateCollectionModal(false)}
title="Create New Collection"
{/* create collection modal */}
<Modal
open={createOpen()}
onClose={() => setCreateOpen(false)}
title="Create collection"
description="Collections store JSON documents scoped to a project."
>
<form class="space-y-4" onSubmit={handleCreateCollection}>
<form onSubmit={props.onCreateCollection} class="space-y-4">
<Input
label="Collection Name"
placeholder="Users, Products, etc."
label="Collection name"
placeholder="Posts"
value={props.collectionInput.name}
onInput={(e) => {
const name = e.currentTarget.value;
props.onCollectionInputChange('name', name);
const slug = name.toLowerCase().trim().replace(/[^a-z0-9\s-]/g, '').replace(/\s+/g, '-').replace(/-+/g, '-');
props.onCollectionInputChange('slug', slug);
}}
onInput={(e) => props.onCollectionInputChange("name", e.currentTarget.value)}
required
/>
<Input
label="Collection Slug"
placeholder="users"
label="Slug"
placeholder="posts"
value={props.collectionInput.slug}
onInput={(e) => props.onCollectionInputChange('slug', e.currentTarget.value)}
onInput={(e) => props.onCollectionInputChange("slug", e.currentTarget.value)}
required
/>
<Textarea
<Input
label="Description"
placeholder="What's in this collection?"
placeholder="Optional"
value={props.collectionInput.description}
onInput={(e) => props.onCollectionInputChange('description', e.currentTarget.value)}
rows={3}
onInput={(e) => props.onCollectionInputChange("description", e.currentTarget.value)}
/>
<div class="flex gap-3 justify-end pt-4">
<Button type="button" variant="ghost" onClick={() => setShowCreateCollectionModal(false)}>
<ModalFooter>
<button type="button" class="btn btn-ghost" onClick={() => setCreateOpen(false)}>
Cancel
</Button>
<Button type="submit" variant="primary" disabled={props.collectionPending}>
{props.collectionPending ? "Creating..." : "Create Collection"}
</Button>
</div>
</button>
<button type="submit" class="btn btn-primary" disabled={props.collectionPending}>
Create collection
</button>
</ModalFooter>
</form>
</Modal>
{/* Document Editor Modal */}
<Modal
open={showDocumentModal()}
onClose={() => setShowDocumentModal(false)}
title={editingDocument() ? "Edit Document" : "New Document"}
{/* document editor modal */}
<Modal
open={docEditorOpen()}
onClose={() => setDocEditorOpen(false)}
title={editingDoc() ? "Edit document" : "New document"}
description="Documents are arbitrary JSON objects validated against the collection schema when one is set."
size="lg"
>
<form class="space-y-4" onSubmit={handleSaveDocument}>
<div class="space-y-2">
<label class="block text-sm font-medium text-gray-700">JSON Data</label>
<div class="font-mono text-sm border rounded-md overflow-hidden bg-gray-50">
<textarea
value={documentData()}
onInput={(e) => setDocumentData(e.currentTarget.value)}
class="w-full h-64 p-4 bg-transparent outline-none focus:ring-2 focus:ring-blue-500"
spellcheck={false}
/>
<form onSubmit={submitDoc} class="space-y-4">
<Show when={editingDoc()}>
<div class="flex items-center gap-2 text-xs text-text-3">
<Badge variant="neutral"><code class="border-0 bg-transparent p-0">{editingDoc()!.id}</code></Badge>
<span>created {props.formatDate(editingDoc()!.created_at)}</span>
</div>
</div>
<div class="flex gap-3 justify-end pt-4">
<Button type="button" variant="ghost" onClick={() => setShowDocumentModal(false)}>
Cancel
</Button>
<Button type="submit" variant="primary" disabled={props.documentPending}>
{props.documentPending ? "Saving..." : "Save Document"}
</Button>
</div>
</Show>
<Textarea
label="Document data (JSON)"
class="font-mono"
style="min-height:16rem;font-size:0.75rem"
value={docJson()}
onInput={(e) => {
setDocJson(e.currentTarget.value);
setDocError("");
}}
spellcheck={false}
required
/>
<Show when={docError()}>
<div class="message message-error">{docError()}</div>
</Show>
<ModalFooter align="between">
<Show when={editingDoc()} fallback={<span />}>
<button
type="button"
class="btn btn-danger"
onClick={() => {
const doc = editingDoc();
if (doc) {
setDocEditorOpen(false);
props.onDeleteDocument(doc.id);
}
}}
disabled={!props.canUpdate || props.documentPending}
>
Delete document
</button>
</Show>
<div class="flex gap-2">
<button type="button" class="btn btn-ghost" onClick={() => setDocEditorOpen(false)}>
Cancel
</button>
<button
type="submit"
class="btn btn-primary"
disabled={!props.canUpdate || props.documentPending}
>
{editingDoc() ? "Save changes" : "Create document"}
</button>
</div>
</ModalFooter>
</form>
</Modal>
</div>
@@ -1,223 +0,0 @@
import { For } from "solid-js";
import { Logo } from "../components/Logo";
import { Button } from "../components/Button";
import { Card, CardHeader, StatCard } from "../components/Card";
import { Input, Textarea, Select } from "../components/Input";
import { Badge, StatusBadge } from "../components/Badge";
import { Message, Loading, Skeleton } from "../components/Message";
import { Table } from "../components/Table";
export function EnhancementsShowcase() {
const sampleData = [
{ id: 1, name: "Project Alpha", status: "active", users: 42 },
{ id: 2, name: "Project Beta", status: "pending", users: 18 },
{ id: 3, name: "Project Gamma", status: "completed", users: 156 },
];
const columns = [
{ key: "name", header: "Project Name" },
{ key: "status", header: "Status", render: (val: string) => <StatusBadge status={val as any} /> },
{ key: "users", header: "Users", align: "right" as const },
];
return (
<div class="min-h-screen bg-bg-main p-8">
<div class="max-w-7xl mx-auto space-y-12">
{/* Header */}
<div class="text-center space-y-4 animate-fade-in">
<div class="flex justify-center mb-6">
<Logo size="lg" animated />
</div>
<h1 class="text-5xl font-display font-extrabold">
Enhanced Design System
</h1>
<p class="text-lg text-text-secondary max-w-2xl mx-auto">
A distinctive, production-grade UI system with sophisticated micro-interactions,
refined typography, and purposeful animations.
</p>
</div>
{/* Typography Section */}
<section class="space-y-6 animate-slide-up stagger-1">
<div class="section-eyebrow">Typography</div>
<h2 class="section-title">Distinctive Font System</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<Card class="card-premium">
<h3 class="font-display text-2xl font-bold mb-2">Syne Display</h3>
<p class="text-text-secondary text-sm">
Bold, geometric display font for headings and brand elements
</p>
</Card>
<Card class="card-premium">
<h3 class="font-sans text-2xl font-semibold mb-2">DM Sans Body</h3>
<p class="text-text-secondary text-sm">
Clean, readable sans-serif for body text and UI elements
</p>
</Card>
<Card class="card-premium">
<h3 class="font-mono text-xl font-medium mb-2">JetBrains Mono</h3>
<p class="text-text-secondary text-sm">
Professional monospace for code and technical content
</p>
</Card>
</div>
</section>
{/* Buttons Section */}
<section class="space-y-6 animate-slide-up stagger-2">
<div class="section-eyebrow">Interactive Elements</div>
<h2 class="section-title">Enhanced Buttons</h2>
<div class="flex flex-wrap gap-4">
<Button variant="primary" class="btn-glow">
Primary Action
</Button>
<Button variant="secondary">
Secondary Action
</Button>
<Button variant="ghost">
Ghost Button
</Button>
<Button variant="danger">
Danger Action
</Button>
<Button variant="primary" loading>
Loading...
</Button>
</div>
</section>
{/* Cards Section */}
<section class="space-y-6 animate-slide-up stagger-3">
<div class="section-eyebrow">Data Display</div>
<h2 class="section-title">Stat Cards with Animations</h2>
<div class="grid grid-cols-1 md:grid-cols-4 gap-6">
<div class="stat-card-enhanced">
<p class="stat-label">Total Users</p>
<p class="stat-value-animated">2,847</p>
<p class="text-xs text-success mt-2">↑ 12.5% from last month</p>
</div>
<div class="stat-card-enhanced">
<p class="stat-label">Active Projects</p>
<p class="stat-value-animated">42</p>
<p class="text-xs text-accent mt-2">→ Stable</p>
</div>
<div class="stat-card-enhanced">
<p class="stat-label">Storage Used</p>
<p class="stat-value-animated">156 GB</p>
<p class="text-xs text-warning mt-2">↑ 8.2% from last month</p>
</div>
<div class="stat-card-enhanced">
<p class="stat-label">API Calls</p>
<p class="stat-value-animated">1.2M</p>
<p class="text-xs text-success mt-2">↑ 24.1% from last month</p>
</div>
</div>
</section>
{/* Forms Section */}
<section class="space-y-6 animate-slide-up stagger-4">
<div class="section-eyebrow">Form Elements</div>
<h2 class="section-title">Enhanced Inputs</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<Card class="card-premium">
<div class="space-y-4">
<div class="input-enhanced">
<Input label="Project Name" placeholder="Enter project name..." />
</div>
<div class="input-enhanced">
<Select label="Project Type" options={[
{ value: "web", label: "Web Application" },
{ value: "mobile", label: "Mobile App" },
{ value: "api", label: "API Service" },
]} />
</div>
<div class="input-enhanced">
<Textarea label="Description" placeholder="Describe your project..." />
</div>
</div>
</Card>
<Card class="card-premium">
<CardHeader
eyebrow="Form States"
title="Interactive Feedback"
description="Hover and focus states with smooth animations"
/>
<div class="space-y-4 mt-4">
<Badge variant="primary" class="badge-animated">Active</Badge>
<Badge variant="success" class="badge-animated">Completed</Badge>
<Badge variant="warning" class="badge-animated">Pending</Badge>
<Badge variant="error" class="badge-animated">Error</Badge>
</div>
</Card>
</div>
</section>
{/* Messages Section */}
<section class="space-y-6 animate-slide-up stagger-5">
<div class="section-eyebrow">Feedback</div>
<h2 class="section-title">Messages & Alerts</h2>
<div class="space-y-4">
<Message variant="success" title="Success!">
Your project has been created successfully.
</Message>
<Message variant="info" title="Information">
New features are available in the latest update.
</Message>
<Message variant="warning" title="Warning">
Your storage is almost full. Consider upgrading your plan.
</Message>
<Message variant="error" title="Error">
Failed to connect to the server. Please try again.
</Message>
</div>
</section>
{/* Table Section */}
<section class="space-y-6 animate-slide-up stagger-6">
<div class="section-eyebrow">Data Tables</div>
<h2 class="section-title">Enhanced Table Component</h2>
<Card class="card-premium">
<div class="table-enhanced">
<Table
columns={columns}
data={sampleData}
rowKey={(row) => row.id}
/>
</div>
</Card>
</section>
{/* Loading States */}
<section class="space-y-6 animate-slide-up">
<div class="section-eyebrow">Loading States</div>
<h2 class="section-title">Skeleton & Spinners</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<Card>
<Skeleton width="60%" height="20px" class="mb-3" />
<Skeleton width="100%" height="14px" class="mb-2" />
<Skeleton width="100%" height="14px" class="mb-2" />
<Skeleton width="80%" height="14px" />
</Card>
<Card class="flex items-center justify-center">
<Loading text="Loading data..." size="lg" />
</Card>
<Card class="flex items-center justify-center">
<div class="loading-dots">
<span></span>
<span></span>
<span></span>
</div>
</Card>
</div>
</section>
{/* Footer */}
<footer class="text-center py-12 border-t border-border">
<p class="text-text-muted text-sm">
PRIMORA Enhanced Design System — Production-grade UI components
</p>
</footer>
</div>
</div>
);
}
+185
View File
@@ -0,0 +1,185 @@
import { Show } from "solid-js";
import { Input } from "../components/Input";
import {
LogoMark,
LogoGithub,
LogoGoogle,
LogoDiscord,
LogoMicrosoft,
} from "../components/Icons";
type AuthMode = "sign-in" | "sign-up";
type Provider = "github" | "google" | "discord" | "microsoft";
interface LoginPageProps {
mode: AuthMode;
email: string;
password: string;
name: string;
authMessage: string;
authPending: boolean;
onModeChange: (mode: AuthMode) => void;
onEmailChange: (value: string) => void;
onPasswordChange: (value: string) => void;
onNameChange: (value: string) => void;
onSubmit: (event: SubmitEvent) => void;
onSocial: (provider: Provider) => void;
onTryDemo?: () => void;
}
const socialProviders: { id: Provider; label: string; logo: (p: { class?: string }) => import("solid-js").JSX.Element }[] = [
{ id: "github", label: "GitHub", logo: LogoGithub },
{ id: "google", label: "Google", logo: LogoGoogle },
{ id: "discord", label: "Discord", logo: LogoDiscord },
{ id: "microsoft", label: "Microsoft", logo: LogoMicrosoft },
];
export function LoginPage(props: LoginPageProps) {
const isSignIn = () => props.mode === "sign-in";
return (
<div class="auth-wrap">
{/* brand panel */}
<aside class="auth-brand" aria-hidden="true">
<div class="auth-brand-grid" />
<div class="auth-brand-inner">
<div class="flex items-center gap-2.5">
<LogoMark class="w-6 h-6 text-accent" />
<span class="font-semibold tracking-tight" style="color: var(--text-1)">Primora</span>
</div>
</div>
<div class="auth-brand-inner">
<p class="auth-tagline">The console for your self-hosted backend.</p>
<p class="mt-3" style="font-size: 0.875rem; color: var(--text-3); max-width: 22rem;">
Storage, documents, credentials and audit — one Postgres, one API, your hardware.
</p>
</div>
<div class="auth-points">
<div class="auth-point">Every mutation lands in the audit log</div>
<div class="auth-point">Generated TypeScript client, straight from OpenAPI</div>
<div class="auth-point">No hosted tier — your data never leaves the box</div>
</div>
</aside>
{/* form panel */}
<main class="auth-panel">
<div class="auth-card animate-scale-in">
<div class="mb-8">
<div class="flex items-center gap-2.5 mb-6" style="min-width: 0">
<LogoMark class="w-5 h-5 text-accent" />
<span class="font-semibold tracking-tight" style="color: var(--text-1)">Primora</span>
</div>
<h1 style="font-size: 1.25rem; letter-spacing: -0.02em;">
{isSignIn() ? "Sign in" : "Create your account"}
</h1>
<p class="mt-1" style="font-size: 0.8125rem; color: var(--text-3)">
{isSignIn()
? "Access your workspace"
: "One account for the whole workspace"}
</p>
</div>
{/* mode toggle */}
<div class="seg mb-6" role="tablist" aria-label="Authentication mode">
<button
type="button"
role="tab"
aria-selected={isSignIn()}
class={`seg-item ${isSignIn() ? "active" : ""}`}
onClick={() => props.onModeChange("sign-in")}
>
Sign in
</button>
<button
type="button"
role="tab"
aria-selected={!isSignIn()}
class={`seg-item ${!isSignIn() ? "active" : ""}`}
onClick={() => props.onModeChange("sign-up")}
>
Sign up
</button>
</div>
<form onSubmit={props.onSubmit} class="space-y-4">
<Show when={!isSignIn()}>
<Input
label="Name"
type="text"
placeholder="Ada Lovelace"
value={props.name}
onInput={(e) => props.onNameChange(e.currentTarget.value)}
autocomplete="name"
required
/>
</Show>
<Input
label="Email"
type="email"
placeholder="[email protected]"
value={props.email}
onInput={(e) => props.onEmailChange(e.currentTarget.value)}
autocomplete="email"
required
/>
<Input
label="Password"
type="password"
placeholder="••••••••"
value={props.password}
onInput={(e) => props.onPasswordChange(e.currentTarget.value)}
autocomplete={isSignIn() ? "current-password" : "new-password"}
required
/>
<Show when={props.authMessage}>
<div class="message message-neutral">{props.authMessage}</div>
</Show>
<button
type="submit"
class="btn btn-primary w-full"
disabled={props.authPending}
>
<Show
when={props.authPending}
fallback={isSignIn() ? "Sign in" : "Create account"}
>
<span class="spinner" /> Working…
</Show>
</button>
</form>
<div class="divider my-6">or continue with</div>
<div class="grid grid-cols-4 gap-2">
{socialProviders.map((p) => (
<button
type="button"
class="btn btn-secondary btn-icon w-full"
onClick={() => props.onSocial(p.id)}
disabled={props.authPending}
title={`Continue with ${p.label}`}
aria-label={`Continue with ${p.label}`}
>
<p.logo class="w-4 h-4" />
</button>
))}
</div>
<Show when={props.onTryDemo}>
<div class="divider my-6" />
<button
type="button"
class="btn btn-ghost w-full"
style="color: var(--text-3)"
onClick={props.onTryDemo}
>
No backend yet — <span style="color: var(--accent)">launch demo mode</span>
</button>
</Show>
</div>
</main>
</div>
);
}
+335 -285
View File
@@ -1,385 +1,435 @@
import { Show, For, createSignal } from "solid-js";
import { Button, Card, Input, Select, Badge, Table, EmptyState, Message, Modal, Tabs, TabPanel } from "../components";
import type { OrganizationMember, OrganizationInvitation, ProjectMember } from "@primora/api-client";
import { For, Show, createMemo, createSignal } from "solid-js";
import type {
OrganizationInvitation,
OrganizationMember,
ProjectMember,
} from "@primora/api-client";
import { Badge } from "../components/Badge";
import { Modal, ModalFooter } from "../components/Modal";
import { Input, Select } from "../components/Input";
import {
IconPlus,
IconMembers,
IconTrash,
IconMail,
} from "../components/Icons";
interface InvitationInput {
email: string;
orgRole: string;
attachProject: boolean;
projectRole: string;
}
interface MembersPageProps {
organizationMembers?: OrganizationMember[];
organizationInvitations?: OrganizationInvitation[];
projectMembers?: ProjectMember[];
invitationInput: {
email: string;
orgRole: string;
attachProject: boolean;
projectRole: string;
};
invitationInput: InvitationInput;
inviteMessage: string;
memberMessage: string;
invitationPending: boolean;
membersPending: boolean;
canManageMembers: boolean;
hasActiveProject: boolean;
onInvitationInputChange: (field: string, value: any) => void;
onSendInvitation: (e: SubmitEvent) => void;
onInvitationInputChange: (field: keyof InvitationInput, value: string | boolean) => void;
onSendInvitation: (event: SubmitEvent) => void;
onRevokeInvitation: (id: string) => void;
onRemoveMember: (id: string, type: 'org' | 'project') => void;
onUpdateMemberRole: (id: string, role: string, type: 'org' | 'project') => void;
onRemoveMember: (id: string, type: "org" | "project") => void;
onUpdateMemberRole: (id: string, role: string, type: "org" | "project") => void;
}
const orgRoles = ["owner", "admin", "member"] as const;
const projectRoles = ["admin", "developer", "viewer"] as const;
function roleVariant(role: string): "primary" | "success" | "warning" | "neutral" {
switch (role) {
case "owner":
return "primary";
case "admin":
return "success";
case "developer":
return "warning";
default:
return "neutral";
}
}
function initials(name?: string, email?: string): string {
const src = name || email || "?";
return src
.split(/[\s@.]+/)
.filter(Boolean)
.slice(0, 2)
.map((s) => s[0]?.toUpperCase())
.join("");
}
function formatDate(value?: string | null): string {
if (!value) return "—";
const date = new Date(value);
if (Number.isNaN(date.getTime())) return "—";
return date.toLocaleDateString(undefined, {
year: "numeric",
month: "short",
day: "numeric",
});
}
export function MembersPage(props: MembersPageProps) {
const [showInviteModal, setShowInviteModal] = createSignal(false);
const [activeTab, setActiveTab] = createSignal<'organization' | 'project'>('organization');
const [searchQuery, setSearchQuery] = createSignal("");
const [tab, setTab] = createSignal<"org" | "project">("org");
const [inviteOpen, setInviteOpen] = createSignal(false);
const [query, setQuery] = createSignal("");
const filteredOrgMembers = () => {
const query = searchQuery().toLowerCase();
if (!query || !props.organizationMembers) return props.organizationMembers || [];
return props.organizationMembers.filter(m =>
m.user_name?.toLowerCase().includes(query) ||
m.user_email?.toLowerCase().includes(query)
const filteredOrgMembers = createMemo(() => {
const q = query().toLowerCase();
const list = props.organizationMembers ?? [];
if (!q) return list;
return list.filter(
(m) =>
m.name.toLowerCase().includes(q) || m.email.toLowerCase().includes(q),
);
};
});
const filteredProjectMembers = () => {
const query = searchQuery().toLowerCase();
if (!query || !props.projectMembers) return props.projectMembers || [];
return props.projectMembers.filter(m =>
m.user_name?.toLowerCase().includes(query) ||
m.user_email?.toLowerCase().includes(query)
const filteredProjectMembers = createMemo(() => {
const q = query().toLowerCase();
const list = props.projectMembers ?? [];
if (!q) return list;
return list.filter(
(m) =>
m.name.toLowerCase().includes(q) || m.email.toLowerCase().includes(q),
);
};
});
const handleInviteSubmit = (e: SubmitEvent) => {
const pendingInvitations = createMemo(() =>
(props.organizationInvitations ?? []).filter((i) => i.status === "pending"),
);
const handleInvite = (e: SubmitEvent) => {
props.onSendInvitation(e);
setShowInviteModal(false);
setInviteOpen(false);
};
const getRoleBadgeVariant = (role: string) => {
switch (role) {
case 'owner': return 'primary';
case 'admin': return 'success';
default: return 'secondary';
}
};
const MemberRow = (p: {
member: OrganizationMember | ProjectMember;
type: "org" | "project";
roles: readonly string[];
}) => (
<tr>
<td>
<div class="flex items-center gap-2.5">
<span
class="avatar"
style="width:1.75rem;height:1.75rem;font-size:0.625rem"
>
{initials(p.member.name, p.member.email)}
</span>
<div>
<div class="font-medium text-text-1">{p.member.name || "Unnamed"}</div>
<div class="text-xs text-text-3">{p.member.email}</div>
</div>
</div>
</td>
<td>
<Badge variant={p.member.email_verified ? "success" : "warning"}>
<span class="badge-dot" />
{p.member.email_verified ? "Verified" : "Unverified"}
</Badge>
</td>
<td>
<Show
when={props.canManageMembers}
fallback={<Badge variant={roleVariant(p.member.role)}>{p.member.role}</Badge>}
>
<select
class="select input-sm"
style="width:8.5rem"
value={p.member.role}
onChange={(e) =>
props.onUpdateMemberRole(p.member.user_id, e.currentTarget.value, p.type)
}
disabled={props.membersPending}
aria-label={`Role for ${p.member.email}`}
>
<For each={p.roles}>
{(role) => <option value={role}>{role}</option>}
</For>
</select>
</Show>
</td>
<td class="text-text-3">{formatDate(p.member.joined_at)}</td>
<td style="width:1%">
<Show when={props.canManageMembers}>
<button
class="icon-btn"
title="Remove member"
aria-label={`Remove ${p.member.email}`}
onClick={() => props.onRemoveMember(p.member.user_id, p.type)}
disabled={props.membersPending}
>
<IconTrash class="w-4 h-4" />
</button>
</Show>
</td>
</tr>
);
return (
<div class="space-y-6">
{/* Header */}
<div class="flex items-center justify-between">
<div class="page">
<div class="page-header">
<div>
<h1 class="text-3xl font-bold text-gray-900">Team Members</h1>
<p class="text-gray-600 mt-1">Manage organization and project access</p>
<h1 class="page-title">Members</h1>
<p class="page-description">
Organization members share workspace access; project members get scoped roles.
</p>
</div>
<div class="page-actions">
<button
class="btn btn-primary"
onClick={() => setInviteOpen(true)}
disabled={!props.canManageMembers}
>
<IconPlus class="w-4 h-4" />
Invite member
</button>
</div>
<Show when={props.canManageMembers}>
<Button onClick={() => setShowInviteModal(true)}>
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" />
</svg>
Invite Member
</Button>
</Show>
</div>
{/* Tabs */}
<Tabs
tabs={[
{ id: 'organization', label: 'Organization Members' },
{ id: 'project', label: 'Project Members', disabled: !props.hasActiveProject },
]}
activeTab={activeTab()}
onChange={(id) => setActiveTab(id as 'organization' | 'project')}
/>
<Show when={props.inviteMessage}>
<div class="message message-info">{props.inviteMessage}</div>
</Show>
<Show when={props.memberMessage}>
<div class="message message-neutral">{props.memberMessage}</div>
</Show>
{/* Search Bar */}
<Card class="p-4">
<div class="flex items-center justify-between gap-3 flex-wrap">
<div class="tabs">
<button
class={`tab ${tab() === "org" ? "active" : ""}`}
onClick={() => setTab("org")}
>
Organization
<span class="nav-badge ml-1.5">{(props.organizationMembers ?? []).length}</span>
</button>
<button
class={`tab ${tab() === "project" ? "active" : ""}`}
onClick={() => setTab("project")}
disabled={!props.hasActiveProject}
>
Project
<span class="nav-badge ml-1.5">{(props.projectMembers ?? []).length}</span>
</button>
</div>
<Input
placeholder="Search members by name or email..."
value={searchQuery()}
onInput={(e) => setSearchQuery(e.currentTarget.value)}
class="w-full"
placeholder="Filter members…"
value={query()}
onInput={(e) => setQuery(e.currentTarget.value)}
class="input-sm"
style="width:14rem"
/>
</Card>
</div>
{/* Organization Members Tab */}
<Show when={activeTab() === 'organization'}>
<div class="space-y-6">
{/* Pending Invitations */}
<Show when={(props.organizationInvitations?.length ?? 0) > 0}>
<Card class="p-6">
<h2 class="text-lg font-semibold mb-4 flex items-center gap-2">
<svg class="w-5 h-5 text-yellow-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
Pending Invitations
</h2>
<div class="space-y-3">
<For each={props.organizationInvitations}>
{(invitation) => (
<div class="flex items-center justify-between p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
<div class="flex-1">
<p class="font-medium text-gray-900">{invitation.email}</p>
<div class="flex items-center gap-2 mt-1">
<Badge variant="secondary">{invitation.org_role}</Badge>
<Show when={invitation.project_id}>
<Badge variant="secondary">Project: {invitation.project_role}</Badge>
</Show>
<span class="text-xs text-gray-500">
Invited {new Date(invitation.created_at).toLocaleDateString()}
</span>
</div>
</div>
<Show when={props.canManageMembers}>
<Button
variant="ghost"
size="sm"
onClick={() => props.onRevokeInvitation(invitation.id)}
disabled={props.invitationPending}
>
Revoke
</Button>
</Show>
</div>
)}
</For>
</div>
</Card>
</Show>
{/* Members List */}
<Card>
<Show
when={filteredOrgMembers().length > 0}
fallback={
<div class="p-12">
<EmptyState
icon={
<svg class="w-16 h-16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
</svg>
}
title="No members found"
description={searchQuery() ? "Try adjusting your search" : "Invite team members to collaborate"}
/>
<div class="card card-flush">
<Show when={tab() === "org"}>
<Show
when={filteredOrgMembers().length > 0}
fallback={
<div class="empty-state">
<div class="empty-state-icon">
<IconMembers class="w-5 h-5" />
</div>
}
>
<Table>
<p class="empty-state-title">No members found</p>
<p class="empty-state-description">
Invite teammates to collaborate on this organization.
</p>
</div>
}
>
<div class="table-container">
<table class="table">
<thead>
<tr>
<th>Member</th>
<th>Email</th>
<th>Role</th>
<th>Joined</th>
<th class="text-right">Actions</th>
<th style="width:1%" />
</tr>
</thead>
<tbody>
<For each={filteredOrgMembers()}>
{(member) => (
<tr>
<td>
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-gradient-to-br from-blue-500 to-purple-500 flex items-center justify-center text-white font-semibold">
{member.user_name?.charAt(0).toUpperCase() ?? '?'}
</div>
<div>
<p class="font-medium text-gray-900">{member.user_name}</p>
<p class="text-sm text-gray-600">{member.user_email}</p>
</div>
</div>
</td>
<td>
<Show
when={props.canManageMembers && member.role !== 'owner'}
fallback={<Badge variant={getRoleBadgeVariant(member.role)}>{member.role}</Badge>}
>
<Select
value={member.role}
onChange={(e) => props.onUpdateMemberRole(member.user_id, e.currentTarget.value, 'org')}
disabled={props.membersPending}
class="w-32"
>
<option value="member">Member</option>
<option value="admin">Admin</option>
<option value="owner">Owner</option>
</Select>
</Show>
</td>
<td class="text-sm text-gray-600">
{new Date(member.created_at).toLocaleDateString()}
</td>
<td class="text-right">
<Show when={props.canManageMembers && member.role !== 'owner'}>
<Button
variant="ghost"
size="sm"
onClick={() => props.onRemoveMember(member.user_id, 'org')}
disabled={props.membersPending}
>
Remove
</Button>
</Show>
</td>
</tr>
)}
{(member) => <MemberRow member={member} type="org" roles={orgRoles} />}
</For>
</tbody>
</Table>
</Show>
</Card>
</div>
</Show>
</table>
</div>
</Show>
</Show>
{/* Project Members Tab */}
<Show when={activeTab() === 'project'}>
<Card>
<Show when={tab() === "project"}>
<Show
when={filteredProjectMembers().length > 0}
fallback={
<div class="p-12">
<EmptyState
icon={
<svg class="w-16 h-16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
</svg>
}
title="No project members"
description="Add members to this project to collaborate"
/>
<div class="empty-state">
<div class="empty-state-icon">
<IconMembers class="w-5 h-5" />
</div>
<p class="empty-state-title">No project members</p>
<p class="empty-state-description">
Invite someone with a project role to grant scoped access.
</p>
</div>
}
>
<Table>
<div class="table-container">
<table class="table">
<thead>
<tr>
<th>Member</th>
<th>Email</th>
<th>Role</th>
<th>Joined</th>
<th style="width:1%" />
</tr>
</thead>
<tbody>
<For each={filteredProjectMembers()}>
{(member) => (
<MemberRow member={member} type="project" roles={projectRoles} />
)}
</For>
</tbody>
</table>
</div>
</Show>
</Show>
</div>
<Show when={pendingInvitations().length > 0}>
<div class="card card-flush">
<div class="card-header" style="padding:1.25rem 1.25rem 1rem;margin-bottom:0;border-bottom:1px solid var(--border)">
<span class="card-header-title">Pending invitations</span>
<span class="card-header-description">
Invites that have been sent but not yet accepted.
</span>
</div>
<div class="table-container">
<table class="table">
<thead>
<tr>
<th>Member</th>
<th>Role</th>
<th>Added</th>
<th class="text-right">Actions</th>
<th>Email</th>
<th>Org role</th>
<th>Project role</th>
<th>Expires</th>
<th style="width:1%" />
</tr>
</thead>
<tbody>
<For each={filteredProjectMembers()}>
{(member) => (
<For each={pendingInvitations()}>
{(inv) => (
<tr>
<td>
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-gradient-to-br from-green-500 to-teal-500 flex items-center justify-center text-white font-semibold">
{member.user_name?.charAt(0).toUpperCase() ?? '?'}
</div>
<div>
<p class="font-medium text-gray-900">{member.user_name}</p>
<p class="text-sm text-gray-600">{member.user_email}</p>
</div>
<div class="flex items-center gap-2.5">
<span class="avatar" style="width:1.75rem;height:1.75rem;font-size:0.625rem;background:var(--surface-3);color:var(--text-2);border-color:var(--border)">
<IconMail class="w-3.5 h-3.5" />
</span>
<span class="font-medium text-text-1">{inv.email}</span>
</div>
</td>
<td>
<Show
when={props.canManageMembers}
fallback={<Badge variant={getRoleBadgeVariant(member.role)}>{member.role}</Badge>}
>
<Select
value={member.role}
onChange={(e) => props.onUpdateMemberRole(member.user_id, e.currentTarget.value, 'project')}
disabled={props.membersPending}
class="w-32"
>
<option value="viewer">Viewer</option>
<option value="developer">Developer</option>
<option value="admin">Admin</option>
</Select>
<Badge variant={roleVariant(inv.org_role)}>{inv.org_role}</Badge>
</td>
<td>
<Show when={inv.project_role} fallback={<span class="text-text-3">—</span>}>
<Badge variant="neutral">
{inv.project_role}
<Show when={inv.project_name}> · {inv.project_name}</Show>
</Badge>
</Show>
</td>
<td class="text-sm text-gray-600">
{new Date(member.created_at).toLocaleDateString()}
</td>
<td class="text-right">
<td class="text-text-3">{formatDate(inv.expires_at)}</td>
<td>
<Show when={props.canManageMembers}>
<Button
variant="ghost"
size="sm"
onClick={() => props.onRemoveMember(member.user_id, 'project')}
disabled={props.membersPending}
<button
class="btn btn-ghost btn-sm"
onClick={() => props.onRevokeInvitation(inv.id)}
disabled={props.invitationPending}
>
Remove
</Button>
Revoke
</button>
</Show>
</td>
</tr>
)}
</For>
</tbody>
</Table>
</Show>
</Card>
</table>
</div>
</div>
</Show>
<Show when={props.memberMessage}>
<Message variant="neutral">{props.memberMessage}</Message>
</Show>
{/* Invite Modal */}
<Modal open={showInviteModal()} onClose={() => setShowInviteModal(false)} title="Invite Team Member">
<form class="space-y-4" onSubmit={handleInviteSubmit}>
{/* Invite modal */}
<Modal
open={inviteOpen()}
onClose={() => setInviteOpen(false)}
title="Invite member"
description="Send an email invitation with an organization role, optionally scoped to the active project."
>
<form onSubmit={handleInvite} class="space-y-4">
<Input
label="Email Address"
label="Email address"
type="email"
placeholder="colleagu[email protected]"
placeholder="teammat[email protected]"
value={props.invitationInput.email}
onInput={(e) => props.onInvitationInputChange('email', e.currentTarget.value)}
disabled={props.invitationPending}
onInput={(e) => props.onInvitationInputChange("email", e.currentTarget.value)}
required
/>
<Select
label="Organization Role"
label="Organization role"
value={props.invitationInput.orgRole}
onChange={(e) => props.onInvitationInputChange('orgRole', e.currentTarget.value)}
disabled={props.invitationPending}
onChange={(e) => props.onInvitationInputChange("orgRole", e.currentTarget.value)}
>
<option value="member">Member</option>
<option value="admin">Admin</option>
<For each={orgRoles}>
{(role) => <option value={role}>{role}</option>}
</For>
</Select>
<Show when={props.hasActiveProject}>
<div class="flex items-center gap-2">
<label class="flex items-center gap-2.5 text-sm text-text-2 cursor-pointer">
<input
type="checkbox"
id="attachProject"
class="checkbox"
checked={props.invitationInput.attachProject}
onChange={(e) => props.onInvitationInputChange('attachProject', e.currentTarget.checked)}
disabled={props.invitationPending}
class="rounded border-gray-300"
onChange={(e) =>
props.onInvitationInputChange("attachProject", e.currentTarget.checked)
}
/>
<label for="attachProject" class="text-sm text-gray-700">
Add to current project
</label>
</div>
Also grant access to the active project
</label>
<Show when={props.invitationInput.attachProject}>
<Select
label="Project Role"
label="Project role"
value={props.invitationInput.projectRole}
onChange={(e) => props.onInvitationInputChange('projectRole', e.currentTarget.value)}
disabled={props.invitationPending}
onChange={(e) =>
props.onInvitationInputChange("projectRole", e.currentTarget.value)
}
>
<option value="viewer">Viewer</option>
<option value="developer">Developer</option>
<option value="admin">Admin</option>
<For each={projectRoles}>
{(role) => <option value={role}>{role}</option>}
</For>
</Select>
</Show>
</Show>
<div class="flex gap-3 justify-end pt-4">
<Button type="button" variant="ghost" onClick={() => setShowInviteModal(false)}>
<ModalFooter>
<button type="button" class="btn btn-ghost" onClick={() => setInviteOpen(false)}>
Cancel
</Button>
<Button type="submit" variant="primary" disabled={props.invitationPending}>
{props.invitationPending ? "Sending..." : "Send Invitation"}
</Button>
</div>
</button>
<button type="submit" class="btn btn-primary" disabled={props.invitationPending}>
<Show when={props.invitationPending} fallback="Send invitation">
<span class="spinner" /> Sending…
</Show>
</button>
</ModalFooter>
</form>
<Show when={props.inviteMessage}>
<Message variant="neutral" class="mt-4">{props.inviteMessage}</Message>
</Show>
</Modal>
</div>
);
+247 -189
View File
@@ -1,236 +1,294 @@
import { Show, For, createSignal } from "solid-js";
import { Button, Card, Input, Textarea, Badge, EmptyState, Message, Modal } from "../components";
import { For, Show, createSignal } from "solid-js";
import type { ProjectSummary } from "@primora/api-client";
import { Badge } from "../components/Badge";
import { Modal, ModalFooter } from "../components/Modal";
import { Input, Textarea } from "../components/Input";
import { IconPlus, IconProjects, IconArrowRight, IconEdit, IconTrash } from "../components/Icons";
interface ProjectInput {
name: string;
slug: string;
description: string;
}
interface ProjectsPageProps {
projects: ProjectSummary[];
selectedProjectID?: string;
projectInput: { name: string; slug: string; description: string };
projectEditInput: { name: string; slug: string; description: string };
projectInput: ProjectInput;
projectEditInput: ProjectInput;
projectMessage: string;
projectPending: boolean;
canUpdateProject: boolean;
onProjectInputChange: (field: string, value: string) => void;
onProjectEditInputChange: (field: string, value: string) => void;
onCreateProject: (e: SubmitEvent) => void;
onUpdateProject: (e: SubmitEvent) => void;
onProjectInputChange: (field: keyof ProjectInput, value: string) => void;
onProjectEditInputChange: (field: keyof ProjectInput, value: string) => void;
onCreateProject: (event: SubmitEvent) => void;
onUpdateProject: (event: SubmitEvent) => void;
onDeleteProject: () => void;
onSelectProject: (id: string) => void;
onNavigateToDashboard: () => void;
}
export function ProjectsPage(props: ProjectsPageProps) {
const [showCreateModal, setShowCreateModal] = createSignal(false);
const [searchQuery, setSearchQuery] = createSignal("");
const [createOpen, setCreateOpen] = createSignal(false);
const [settingsOpen, setSettingsOpen] = createSignal(false);
const [confirmDelete, setConfirmDelete] = createSignal(false);
const filteredProjects = () => {
const query = searchQuery().toLowerCase();
if (!query) return props.projects;
return props.projects.filter(p =>
p.name.toLowerCase().includes(query) ||
p.slug.toLowerCase().includes(query) ||
p.description?.toLowerCase().includes(query)
);
const activeProject = () =>
props.projects.find((p) => p.id === props.selectedProjectID);
const roleVariant = (role?: string | null) =>
role === "admin" ? "primary" : role === "developer" ? "success" : "neutral";
const handleCreate = async (e: SubmitEvent) => {
props.onCreateProject(e);
setCreateOpen(false);
};
const handleCreateSubmit = (e: SubmitEvent) => {
props.onCreateProject(e);
setShowCreateModal(false);
const handleUpdate = async (e: SubmitEvent) => {
props.onUpdateProject(e);
setSettingsOpen(false);
};
return (
<div class="space-y-6">
{/* Header */}
<div class="flex items-center justify-between">
<div class="page">
<div class="page-header">
<div>
<h1 class="text-3xl font-bold text-gray-900">Projects</h1>
<p class="text-gray-600 mt-1">Manage your organization's projects</p>
<h1 class="page-title">Projects</h1>
<p class="page-description">
Projects scope storage, collections, API keys, and members.
</p>
</div>
<div class="page-actions">
<button class="btn btn-primary" onClick={() => setCreateOpen(true)}>
<IconPlus class="w-4 h-4" />
New project
</button>
</div>
<Button onClick={() => setShowCreateModal(true)}>
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
</svg>
New Project
</Button>
</div>
{/* Search Bar */}
<Card class="p-4">
<Input
placeholder="Search projects by name, slug, or description..."
value={searchQuery()}
onInput={(e) => setSearchQuery(e.currentTarget.value)}
class="w-full"
/>
</Card>
<Show when={props.projectMessage}>
<div class="message message-neutral">{props.projectMessage}</div>
</Show>
{/* Projects Grid */}
<Show
when={filteredProjects().length > 0}
fallback={
<EmptyState
icon={
<svg class="w-16 h-16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
</svg>
}
title="No projects found"
description={searchQuery() ? "Try adjusting your search" : "Create your first project to get started"}
action={
<Show when={!searchQuery()}>
<Button onClick={() => setShowCreateModal(true)}>Create Project</Button>
</Show>
}
/>
}
>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<For each={filteredProjects()}>
{(project) => (
<Card
class={`p-6 cursor-pointer transition-all hover:shadow-lg hover:border-blue-500 ${
props.selectedProjectID === project.id ? 'border-blue-500 bg-blue-50' : ''
}`}
onClick={() => {
props.onSelectProject(project.id);
props.onNavigateToDashboard();
}}
>
<div class="flex items-start justify-between mb-4">
<div class="flex-1">
<h3 class="text-lg font-semibold text-gray-900 mb-1">{project.name}</h3>
<Badge variant="secondary" class="text-xs">{project.slug}</Badge>
</div>
<Show when={project.membershipRole}>
<Badge variant={project.membershipRole === 'admin' ? 'primary' : 'secondary'}>
{project.membershipRole}
</Badge>
</Show>
</div>
<Show when={project.description}>
<p class="text-sm text-gray-600 mb-4 line-clamp-2">{project.description}</p>
</Show>
<div class="flex items-center justify-between pt-4 border-t border-gray-200">
<button
onClick={(e) => {
e.stopPropagation();
props.onSelectProject(project.id);
props.onNavigateToDashboard();
}}
class="text-sm text-blue-600 hover:text-blue-700 font-medium"
>
View Dashboard →
</button>
<Show when={project.membershipRole === 'admin'}>
<button
onClick={(e) => {
e.stopPropagation();
<div class="card card-flush">
<Show
when={props.projects.length > 0}
fallback={
<div class="empty-state">
<div class="empty-state-icon">
<IconProjects class="w-5 h-5" />
</div>
<p class="empty-state-title">No projects yet</p>
<p class="empty-state-description">
Create your first project to start storing files, collections and issuing API keys.
</p>
<button class="btn btn-primary mt-4" onClick={() => setCreateOpen(true)}>
<IconPlus class="w-4 h-4" />
Create project
</button>
</div>
}
>
<div class="table-container">
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Slug</th>
<th>Role</th>
<th style="width: 1%">Status</th>
<th style="width: 1%" />
</tr>
</thead>
<tbody>
<For each={props.projects}>
{(project) => (
<tr
class="clickable"
onClick={() => {
props.onSelectProject(project.id);
props.onNavigateToDashboard();
}}
class="text-sm text-gray-600 hover:text-gray-700"
>
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
</button>
</Show>
</div>
</Card>
)}
</For>
<td>
<div class="flex items-center gap-2.5">
<span
class="ctx-icon"
style="display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border-radius:6px;background:var(--surface-3);font-size:0.625rem;font-weight:700;color:var(--text-2)"
>
{project.name[0]?.toUpperCase()}
</span>
<div>
<div class="font-medium text-text-1">{project.name}</div>
<Show when={project.description}>
<div class="text-xs text-text-3">{project.description}</div>
</Show>
</div>
</div>
</td>
<td>
<code>{project.slug}</code>
</td>
<td>
<Badge variant={roleVariant(project.membershipRole)}>
{project.membershipRole ?? "member"}
</Badge>
</td>
<td>
<Show when={project.id === props.selectedProjectID}>
<Badge variant="primary">
<span class="badge-dot" />
Active
</Badge>
</Show>
</td>
<td>
<IconArrowRight class="w-4 h-4 text-text-3" />
</td>
</tr>
)}
</For>
</tbody>
</table>
</div>
</Show>
</div>
<Show when={activeProject()}>
<div class="card">
<div class="card-header">
<span class="card-header-title">Project settings</span>
<span class="card-header-description">
Manage <strong>{activeProject()!.name}</strong>. Renaming changes the API-visible slug.
</span>
</div>
<div class="flex gap-2">
<button
class="btn btn-secondary"
onClick={() => setSettingsOpen(true)}
disabled={!props.canUpdateProject}
>
<IconEdit class="w-4 h-4" />
Edit project
</button>
<button
class="btn btn-danger"
onClick={() => setConfirmDelete(true)}
disabled={!props.canUpdateProject}
>
<IconTrash class="w-4 h-4" />
Delete project
</button>
</div>
<Show when={!props.canUpdateProject}>
<p class="label-hint mt-3">You need the admin role to modify this project.</p>
</Show>
</div>
</Show>
{/* Selected Project Settings */}
<Show when={props.selectedProjectID && props.canUpdateProject}>
<Card class="p-6">
<h2 class="text-xl font-semibold mb-4">Project Settings</h2>
<form class="space-y-4" onSubmit={props.onUpdateProject}>
<Input
label="Project Name"
placeholder="Enter project name"
value={props.projectEditInput.name}
onInput={(e) => props.onProjectEditInputChange('name', e.currentTarget.value)}
disabled={props.projectPending}
/>
<Input
label="Project Slug"
placeholder="project-slug"
value={props.projectEditInput.slug}
onInput={(e) => props.onProjectEditInputChange('slug', e.currentTarget.value)}
disabled={props.projectPending}
/>
<Textarea
label="Description"
placeholder="Describe your project..."
value={props.projectEditInput.description}
onInput={(e) => props.onProjectEditInputChange('description', e.currentTarget.value)}
disabled={props.projectPending}
rows={3}
/>
<div class="flex gap-3">
<Button type="submit" variant="primary" disabled={props.projectPending}>
{props.projectPending ? "Updating..." : "Update Project"}
</Button>
<Button type="button" variant="danger" onClick={props.onDeleteProject} disabled={props.projectPending}>
Delete Project
</Button>
</div>
</form>
<Show when={props.projectMessage}>
<Message variant="neutral" class="mt-4">{props.projectMessage}</Message>
</Show>
</Card>
</Show>
{/* Create Project Modal */}
<Modal open={showCreateModal()} onClose={() => setShowCreateModal(false)} title="Create New Project">
<form class="space-y-4" onSubmit={handleCreateSubmit}>
{/* Create modal */}
<Modal
open={createOpen()}
onClose={() => setCreateOpen(false)}
title="Create project"
description="A project groups buckets, collections, API keys and members."
>
<form onSubmit={handleCreate} class="space-y-4">
<Input
label="Project Name"
placeholder="My Awesome Project"
label="Project name"
placeholder="Production API"
value={props.projectInput.name}
onInput={(e) => {
const name = e.currentTarget.value;
props.onProjectInputChange('name', name);
// Auto-generate slug
const slug = name.toLowerCase().trim().replace(/[^a-z0-9\s-]/g, '').replace(/\s+/g, '-').replace(/-+/g, '-');
props.onProjectInputChange('slug', slug);
}}
disabled={props.projectPending}
onInput={(e) => props.onProjectInputChange("name", e.currentTarget.value)}
required
/>
<Input
label="Project Slug"
placeholder="my-awesome-project"
label="Slug"
placeholder="production-api"
value={props.projectInput.slug}
onInput={(e) => props.onProjectInputChange('slug', e.currentTarget.value)}
disabled={props.projectPending}
onInput={(e) => props.onProjectInputChange("slug", e.currentTarget.value)}
required
/>
<Textarea
label="Description (Optional)"
placeholder="What is this project about?"
label="Description"
placeholder="What does this project power?"
value={props.projectInput.description}
onInput={(e) => props.onProjectInputChange('description', e.currentTarget.value)}
disabled={props.projectPending}
rows={3}
onInput={(e) => props.onProjectInputChange("description", e.currentTarget.value)}
/>
<div class="flex gap-3 justify-end pt-4">
<Button type="button" variant="ghost" onClick={() => setShowCreateModal(false)}>
<ModalFooter>
<button type="button" class="btn btn-ghost" onClick={() => setCreateOpen(false)}>
Cancel
</Button>
<Button type="submit" variant="primary" disabled={props.projectPending}>
{props.projectPending ? "Creating..." : "Create Project"}
</Button>
</div>
</button>
<button type="submit" class="btn btn-primary" disabled={props.projectPending}>
<Show when={props.projectPending} fallback="Create project">
<span class="spinner" /> Creating…
</Show>
</button>
</ModalFooter>
</form>
<Show when={props.projectMessage}>
<Message variant="neutral" class="mt-4">{props.projectMessage}</Message>
</Show>
</Modal>
{/* Edit modal */}
<Modal
open={settingsOpen()}
onClose={() => setSettingsOpen(false)}
title="Edit project"
description="Update name, slug or description."
>
<form onSubmit={handleUpdate} class="space-y-4">
<Input
label="Project name"
value={props.projectEditInput.name}
onInput={(e) => props.onProjectEditInputChange("name", e.currentTarget.value)}
required
/>
<Input
label="Slug"
value={props.projectEditInput.slug}
onInput={(e) => props.onProjectEditInputChange("slug", e.currentTarget.value)}
required
/>
<Textarea
label="Description"
value={props.projectEditInput.description}
onInput={(e) => props.onProjectEditInputChange("description", e.currentTarget.value)}
/>
<ModalFooter>
<button type="button" class="btn btn-ghost" onClick={() => setSettingsOpen(false)}>
Cancel
</button>
<button type="submit" class="btn btn-primary" disabled={props.projectPending}>
Save changes
</button>
</ModalFooter>
</form>
</Modal>
{/* Delete confirmation */}
<Modal
open={confirmDelete()}
onClose={() => setConfirmDelete(false)}
title="Delete project"
size="sm"
>
<p class="text-sm text-text-2">
Deleting <strong class="text-text-1">{activeProject()?.name}</strong> permanently removes
its buckets, objects, collections, API keys, members and audit history. This cannot be undone.
</p>
<ModalFooter>
<button class="btn btn-ghost" onClick={() => setConfirmDelete(false)}>
Cancel
</button>
<button
class="btn btn-danger"
onClick={() => {
setConfirmDelete(false);
props.onDeleteProject();
}}
disabled={props.projectPending}
>
Delete permanently
</button>
</ModalFooter>
</Modal>
</div>
);
+302 -291
View File
@@ -1,6 +1,21 @@
import { Show, For, createSignal } from "solid-js";
import { Button, Card, Input, Badge, Table, EmptyState, Message, Modal, Tabs, TabPanel } from "../components";
import { For, Show, createSignal } from "solid-js";
import type { ApiKey } from "@primora/api-client";
import { Badge } from "../components/Badge";
import { Modal, ModalFooter } from "../components/Modal";
import { Input } from "../components/Input";
import {
IconPlus,
IconKey,
IconCopy,
IconCheck,
IconTrash,
IconAlert,
} from "../components/Icons";
interface OrgInput {
name: string;
slug: string;
}
interface SettingsPageProps {
apiKeys?: ApiKey[];
@@ -8,356 +23,352 @@ interface SettingsPageProps {
apiKeySecret: string;
apiKeyMessage: string;
apiKeyPending: boolean;
organizationInput: { name: string; slug: string };
organizationEditInput: { name: string; slug: string };
organizationInput: OrgInput;
organizationEditInput: OrgInput;
organizationMessage: string;
canUpdateOrganization: boolean;
workspacePending: boolean;
hasActiveOrganization: boolean;
onApiKeyNameChange: (name: string) => void;
onCreateApiKey: (e: SubmitEvent) => void;
onCreateApiKey: () => void;
onDeleteApiKey: (id: string) => void;
onOrganizationInputChange: (field: string, value: string) => void;
onOrganizationEditInputChange: (field: string, value: string) => void;
onCreateOrganization: (e: SubmitEvent) => void;
onUpdateOrganization: (e: SubmitEvent) => void;
onOrganizationInputChange: (field: keyof OrgInput, value: string) => void;
onOrganizationEditInputChange: (field: keyof OrgInput, value: string) => void;
onCreateOrganization: (event: SubmitEvent) => void;
onUpdateOrganization: (event: SubmitEvent) => void;
onDeleteOrganization: () => void;
formatDate: (date?: string | null) => string;
onDismissSecret: () => void;
formatDate: (value?: string | null) => string;
}
export function SettingsPage(props: SettingsPageProps) {
const [activeTab, setActiveTab] = createSignal<'api-keys' | 'organization' | 'general'>('api-keys');
const [showCreateKeyModal, setShowCreateKeyModal] = createSignal(false);
const [showKeySecret, setShowKeySecret] = createSignal(false);
const [copiedKey, setCopiedKey] = createSignal(false);
const [tab, setTab] = createSignal<"api-keys" | "organization">("api-keys");
const [copied, setCopied] = createSignal(false);
const [createOrgOpen, setCreateOrgOpen] = createSignal(false);
const [confirmDeleteOrg, setConfirmDeleteOrg] = createSignal(false);
const handleCreateKey = (e: SubmitEvent) => {
props.onCreateApiKey(e);
setShowCreateKeyModal(false);
setShowKeySecret(true);
const copySecret = async () => {
try {
await navigator.clipboard.writeText(props.apiKeySecret);
setCopied(true);
setTimeout(() => setCopied(false), 2000);
} catch {
/* clipboard unavailable */
}
};
const copyToClipboard = (text: string) => {
navigator.clipboard.writeText(text);
setCopiedKey(true);
setTimeout(() => setCopiedKey(false), 2000);
};
const activeKeys = () => (props.apiKeys ?? []).filter((k) => !k.revoked_at);
const revokedKeys = () => (props.apiKeys ?? []).filter((k) => k.revoked_at);
return (
<div class="space-y-6">
{/* Header */}
<div>
<h1 class="text-3xl font-bold text-gray-900">Settings</h1>
<p class="text-gray-600 mt-1">Manage API keys, organization, and project settings</p>
<div class="page">
<div class="page-header">
<div>
<h1 class="page-title">Settings</h1>
<p class="page-description">
API credentials and organization management.
</p>
</div>
</div>
{/* Tabs */}
<Tabs
tabs={[
{ id: 'api-keys', label: 'API Keys' },
{ id: 'organization', label: 'Organization' },
{ id: 'general', label: 'General' },
]}
activeTab={activeTab()}
onChange={(id) => setActiveTab(id as any)}
/>
<div class="tabs">
<button
class={`tab ${tab() === "api-keys" ? "active" : ""}`}
onClick={() => setTab("api-keys")}
>
API keys
<span class="nav-badge ml-1.5">{activeKeys().length}</span>
</button>
<button
class={`tab ${tab() === "organization" ? "active" : ""}`}
onClick={() => setTab("organization")}
>
Organization
</button>
</div>
{/* API Keys Tab */}
<Show when={activeTab() === 'api-keys'}>
<div class="space-y-6">
<Card class="p-6">
<div class="flex items-center justify-between mb-6">
<div>
<h2 class="text-xl font-semibold">API Keys</h2>
<p class="text-sm text-gray-600 mt-1">Manage authentication keys for your project</p>
</div>
<Button onClick={() => setShowCreateKeyModal(true)}>
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
</svg>
Create API Key
</Button>
{/* ---------------- API keys ---------------- */}
<Show when={tab() === "api-keys"}>
<Show when={props.apiKeyMessage}>
<div class="message message-neutral">{props.apiKeyMessage}</div>
</Show>
<div class="card">
<div class="card-header">
<span class="card-header-title">Create API key</span>
<span class="card-header-description">
Keys authenticate requests with the <code>X-API-Key</code> header. The secret is shown once.
</span>
</div>
<div class="flex items-end gap-2 flex-wrap">
<div style="flex:1;min-width:14rem;max-width:24rem">
<Input
label="Key name"
placeholder="Frontend key"
value={props.apiKeyName}
onInput={(e) => props.onApiKeyNameChange(e.currentTarget.value)}
/>
</div>
<Show
when={(props.apiKeys?.length ?? 0) > 0}
fallback={
<EmptyState
icon={
<svg class="w-16 h-16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
</svg>
}
title="No API keys"
description="Create an API key to authenticate your applications"
action={
<Button onClick={() => setShowCreateKeyModal(true)}>Create API Key</Button>
}
/>
}
<button
class="btn btn-primary"
onClick={props.onCreateApiKey}
disabled={props.apiKeyPending || !props.apiKeyName.trim()}
>
<Table>
<IconPlus class="w-4 h-4" />
Create key
</button>
</div>
</div>
<div class="card card-flush">
<Show
when={(props.apiKeys ?? []).length > 0}
fallback={
<div class="empty-state">
<div class="empty-state-icon">
<IconKey class="w-5 h-5" />
</div>
<p class="empty-state-title">No API keys</p>
<p class="empty-state-description">
Create a key to authenticate API requests from your application.
</p>
</div>
}
>
<div class="table-container">
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Key ID</th>
<th>Prefix</th>
<th>Last used</th>
<th>Status</th>
<th>Created</th>
<th>Last Used</th>
<th class="text-right">Actions</th>
<th style="width:1%" />
</tr>
</thead>
<tbody>
<For each={props.apiKeys}>
<For each={props.apiKeys ?? []}>
{(key) => (
<tr>
<td class="font-medium text-gray-900">{key.name}</td>
<td class="font-medium text-text-1">{key.name}</td>
<td>
<code class="text-xs bg-gray-100 px-2 py-1 rounded">
{key.key_id}
</code>
<code>{key.prefix}…</code>
</td>
<td class="text-text-3 text-xs">
{key.last_used_at ? props.formatDate(key.last_used_at) : "Never"}
</td>
<td>
<Badge variant={key.is_active ? 'success' : 'secondary'}>
{key.is_active ? 'Active' : 'Inactive'}
<Badge variant={key.revoked_at ? "neutral" : "success"}>
<span class="badge-dot" />
{key.revoked_at ? "Revoked" : "Active"}
</Badge>
</td>
<td class="text-sm text-gray-600">{props.formatDate(key.created_at)}</td>
<td class="text-sm text-gray-600">
{key.last_used_at ? props.formatDate(key.last_used_at) : 'Never'}
</td>
<td class="text-right">
<Button
variant="ghost"
size="sm"
onClick={() => props.onDeleteApiKey(key.id)}
disabled={props.apiKeyPending}
>
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
</Button>
<td>
<Show when={!key.revoked_at}>
<button
class="icon-btn"
title="Revoke key"
aria-label={`Revoke ${key.name}`}
onClick={() => props.onDeleteApiKey(key.id)}
disabled={props.apiKeyPending}
>
<IconTrash class="w-4 h-4" />
</button>
</Show>
</td>
</tr>
)}
</For>
</tbody>
</Table>
</Show>
</Card>
<Card class="p-6 bg-blue-50 border-blue-200">
<div class="flex gap-4">
<div class="flex-shrink-0">
<svg class="w-6 h-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<div>
<h3 class="font-semibold text-blue-900 mb-1">Keep your API keys secure</h3>
<p class="text-sm text-blue-800">
API keys provide full access to your project. Never share them publicly or commit them to version control.
Store them securely using environment variables or secret management services.
</p>
</div>
</table>
</div>
</Card>
<Show when={props.apiKeyMessage}>
<Message variant="neutral">{props.apiKeyMessage}</Message>
<Show when={revokedKeys().length > 0}>
<div class="px-4 py-2.5 text-xs text-text-3" style="border-top:1px solid var(--border)">
{revokedKeys().length} revoked key{revokedKeys().length === 1 ? "" : "s"} retained for audit.
</div>
</Show>
</Show>
</div>
</Show>
{/* Organization Tab */}
<Show when={activeTab() === 'organization'}>
<div class="space-y-6">
<Card class="p-6">
<h2 class="text-xl font-semibold mb-4">Organization Settings</h2>
<form class="space-y-4" onSubmit={props.onUpdateOrganization}>
<Input
label="Organization Name"
placeholder="My Organization"
value={props.organizationEditInput.name}
onInput={(e) => props.onOrganizationEditInputChange('name', e.currentTarget.value)}
disabled={props.workspacePending || !props.canUpdateOrganization}
/>
<Input
label="Organization Slug"
placeholder="my-organization"
value={props.organizationEditInput.slug}
onInput={(e) => props.onOrganizationEditInputChange('slug', e.currentTarget.value)}
disabled={props.workspacePending || !props.canUpdateOrganization}
/>
<Show when={props.canUpdateOrganization}>
<div class="flex gap-3">
<Button type="submit" variant="primary" disabled={props.workspacePending}>
{props.workspacePending ? "Updating..." : "Update Organization"}
</Button>
<Button type="button" variant="danger" onClick={props.onDeleteOrganization} disabled={props.workspacePending}>
Delete Organization
</Button>
</div>
{/* ---------------- Organization ---------------- */}
<Show when={tab() === "organization"}>
<Show when={props.organizationMessage}>
<div class="message message-neutral">{props.organizationMessage}</div>
</Show>
<Show when={props.hasActiveOrganization}>
<div class="card">
<div class="card-header">
<span class="card-header-title">Organization settings</span>
<span class="card-header-description">
Rename the active organization or change its slug.
</span>
</div>
<form onSubmit={props.onUpdateOrganization} class="space-y-4">
<div class="grid gap-4 sm:grid-cols-2">
<Input
label="Name"
value={props.organizationEditInput.name}
onInput={(e) =>
props.onOrganizationEditInputChange("name", e.currentTarget.value)
}
disabled={!props.canUpdateOrganization}
required
/>
<Input
label="Slug"
value={props.organizationEditInput.slug}
onInput={(e) =>
props.onOrganizationEditInputChange("slug", e.currentTarget.value)
}
disabled={!props.canUpdateOrganization}
required
/>
</div>
<div class="flex gap-2">
<button
type="submit"
class="btn btn-primary"
disabled={!props.canUpdateOrganization || props.workspacePending}
>
Save changes
</button>
</div>
<Show when={!props.canUpdateOrganization}>
<p class="label-hint">You need the owner or admin role to edit this organization.</p>
</Show>
</form>
<Show when={props.organizationMessage}>
<Message variant="neutral" class="mt-4">{props.organizationMessage}</Message>
</Show>
</Card>
</div>
</Show>
<Card class="p-6 bg-red-50 border-red-200">
<div class="flex gap-4">
<div class="flex-shrink-0">
<svg class="w-6 h-6 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
</svg>
</div>
<div>
<h3 class="font-semibold text-red-900 mb-1">Danger Zone</h3>
<p class="text-sm text-red-800">
Deleting an organization is permanent and cannot be undone. All projects, members, API keys, buckets, and data will be permanently deleted.
<div class="card">
<div class="flex items-center justify-between gap-3 flex-wrap">
<div>
<span class="card-header-title">New organization</span>
<p class="card-header-description mt-1">
Organizations are top-level workspaces containing projects and members.
</p>
</div>
<button class="btn btn-secondary" onClick={() => setCreateOrgOpen(true)}>
<IconPlus class="w-4 h-4" />
Create organization
</button>
</div>
</div>
<Show when={props.hasActiveOrganization && props.canUpdateOrganization}>
<div class="card" style="border-color:rgba(248,113,113,0.35)">
<div class="flex items-start gap-3">
<span class="icon-btn" style="color:var(--error);cursor:default">
<IconAlert class="w-5 h-5" />
</span>
<div class="flex-1">
<span class="card-header-title" style="color:var(--error)">Danger zone</span>
<p class="card-header-description mt-1">
Deleting the organization permanently removes all projects, buckets, objects,
members, invitations, API keys and audit history.
</p>
<button
class="btn btn-danger mt-3"
onClick={() => setConfirmDeleteOrg(true)}
disabled={props.workspacePending}
>
<IconTrash class="w-4 h-4" />
Delete organization
</button>
</div>
</div>
</Card>
</div>
</div>
</Show>
</Show>
{/* General Tab */}
<Show when={activeTab() === 'general'}>
<div class="space-y-6">
<Card class="p-6">
<h2 class="text-xl font-semibold mb-4">General Settings</h2>
<div class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Theme</label>
<select class="input w-full max-w-xs">
<option>Light</option>
<option>Dark</option>
<option>System</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Language</label>
<select class="input w-full max-w-xs">
<option>English</option>
<option>Spanish</option>
<option>French</option>
<option>German</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Timezone</label>
<select class="input w-full max-w-xs">
<option>UTC</option>
<option>America/New_York</option>
<option>America/Los_Angeles</option>
<option>Europe/London</option>
<option>Asia/Tokyo</option>
</select>
</div>
{/* API key secret modal — shown while App holds a fresh secret */}
<Show when={props.apiKeySecret}>
<Modal
open={true}
onClose={props.onDismissSecret}
title="API key created"
description="Store this secret securely — it will not be shown again."
size="sm"
>
<div class="space-y-4">
<div class="code-block break-all select-all" style="user-select:all">
{props.apiKeySecret}
</div>
</Card>
<Card class="p-6">
<h2 class="text-xl font-semibold mb-4">Notifications</h2>
<div class="space-y-3">
<label class="flex items-center gap-3">
<input type="checkbox" class="rounded border-gray-300" checked />
<div>
<p class="font-medium text-gray-900">Email notifications</p>
<p class="text-sm text-gray-600">Receive email updates about your projects</p>
</div>
</label>
<label class="flex items-center gap-3">
<input type="checkbox" class="rounded border-gray-300" checked />
<div>
<p class="font-medium text-gray-900">Security alerts</p>
<p class="text-sm text-gray-600">Get notified about security events</p>
</div>
</label>
<label class="flex items-center gap-3">
<input type="checkbox" class="rounded border-gray-300" />
<div>
<p class="font-medium text-gray-900">Product updates</p>
<p class="text-sm text-gray-600">Stay informed about new features</p>
</div>
</label>
</div>
</Card>
</div>
<button class="btn btn-secondary w-full" onClick={copySecret}>
<Show when={copied()} fallback={<IconCopy class="w-4 h-4" />}>
<IconCheck class="w-4 h-4" />
</Show>
{copied() ? "Copied" : "Copy secret"}
</button>
</div>
</Modal>
</Show>
{/* Create API Key Modal */}
<Modal open={showCreateKeyModal()} onClose={() => setShowCreateKeyModal(false)} title="Create API Key">
<form class="space-y-4" onSubmit={handleCreateKey}>
{/* create organization modal */}
<Modal
open={createOrgOpen()}
onClose={() => setCreateOrgOpen(false)}
title="Create organization"
>
<form
onSubmit={(e) => {
props.onCreateOrganization(e);
setCreateOrgOpen(false);
}}
class="space-y-4"
>
<Input
label="Key Name"
placeholder="Production API Key"
value={props.apiKeyName}
onInput={(e) => props.onApiKeyNameChange(e.currentTarget.value)}
disabled={props.apiKeyPending}
label="Organization name"
placeholder="Acme Corporation"
value={props.organizationInput.name}
onInput={(e) => props.onOrganizationInputChange("name", e.currentTarget.value)}
required
/>
<div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
<p class="text-sm text-yellow-800">
<strong>Important:</strong> The API key secret will only be shown once. Make sure to copy and store it securely.
</p>
</div>
<div class="flex gap-3 justify-end pt-4">
<Button type="button" variant="ghost" onClick={() => setShowCreateKeyModal(false)}>
<Input
label="Slug"
placeholder="acme-corp"
value={props.organizationInput.slug}
onInput={(e) => props.onOrganizationInputChange("slug", e.currentTarget.value)}
required
/>
<ModalFooter>
<button type="button" class="btn btn-ghost" onClick={() => setCreateOrgOpen(false)}>
Cancel
</Button>
<Button type="submit" variant="primary" disabled={props.apiKeyPending}>
{props.apiKeyPending ? "Creating..." : "Create Key"}
</Button>
</div>
</button>
<button type="submit" class="btn btn-primary" disabled={props.workspacePending}>
Create organization
</button>
</ModalFooter>
</form>
</Modal>
{/* API Key Secret Modal */}
<Modal open={showKeySecret()} onClose={() => setShowKeySecret(false)} title="API Key Created">
<div class="space-y-4">
<div class="bg-green-50 border border-green-200 rounded-lg p-4">
<p class="text-sm text-green-800 mb-2">
<strong>Success!</strong> Your API key has been created.
</p>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">API Key Secret</label>
<div class="flex gap-2">
<code class="flex-1 p-3 bg-gray-900 text-gray-100 rounded-lg text-sm font-mono break-all">
{props.apiKeySecret}
</code>
<Button
variant="outline"
onClick={() => copyToClipboard(props.apiKeySecret)}
>
{copiedKey() ? (
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
) : (
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
</svg>
)}
</Button>
</div>
</div>
<div class="bg-red-50 border border-red-200 rounded-lg p-4">
<p class="text-sm text-red-800">
<strong>Warning:</strong> This is the only time you'll see this secret. Copy it now and store it securely.
</p>
</div>
<div class="flex justify-end pt-4">
<Button onClick={() => setShowKeySecret(false)}>
I've Saved the Key
</Button>
</div>
</div>
{/* delete org confirm */}
<Modal
open={confirmDeleteOrg()}
onClose={() => setConfirmDeleteOrg(false)}
title="Delete organization"
size="sm"
>
<p class="text-sm text-text-2">
This permanently deletes the organization and everything inside it. This cannot be undone.
</p>
<ModalFooter>
<button class="btn btn-ghost" onClick={() => setConfirmDeleteOrg(false)}>
Cancel
</button>
<button
class="btn btn-danger"
onClick={() => {
setConfirmDeleteOrg(false);
props.onDeleteOrganization();
}}
disabled={props.workspacePending}
>
Delete permanently
</button>
</ModalFooter>
</Modal>
</div>
);
+491 -384
View File
@@ -1,440 +1,547 @@
import { Show, For, createSignal } from "solid-js";
import { Button, Card, Input, Select, Badge, Table, EmptyState, Message, Modal, FileInput } from "../components";
import type { Bucket, BucketObject } from "@primora/api-client";
import { For, Show, createMemo, createSignal } from "solid-js";
import type {
Bucket,
BucketObject,
BucketObjectListResponse,
} from "@primora/api-client";
import { Badge } from "../components/Badge";
import { Modal, ModalFooter } from "../components/Modal";
import { Input, Select } from "../components/Input";
import {
IconPlus,
IconStorage,
IconFile,
IconUpload,
IconDownload,
IconTrash,
IconCopy,
IconEdit,
IconChevronRight,
IconEye,
IconLink,
} from "../components/Icons";
type ObjectPreview =
| { kind: "image"; objectURL: string }
| { kind: "text"; text: string; truncated: boolean }
| { kind: "unsupported"; message: string };
interface BucketInput {
name: string;
slug: string;
visibility: string;
}
interface StoragePageProps {
buckets?: Bucket[];
objects?: BucketObject[];
objects: BucketObject[];
selectedBucketID?: string;
selectedObjectKey?: string;
bucketInput: { name: string; slug: string; visibility: string };
bucketEditInput: { name: string; slug: string; visibility: string };
bucketInput: BucketInput;
bucketEditInput: BucketInput;
storageMessage: string;
storagePending: boolean;
canUpdateBucket: boolean;
objectsPage?: { items: BucketObject[]; total: number; limit: number; offset: number };
objectPreview?: any;
onBucketInputChange: (field: string, value: string) => void;
onBucketEditInputChange: (field: string, value: string) => void;
onCreateBucket: (e: SubmitEvent) => void;
onUpdateBucket: (e: SubmitEvent) => void;
objectsPage?: BucketObjectListResponse;
objectPreview?: ObjectPreview;
previewLoading?: boolean;
renameObjectKey: string;
moveDestinationBucketID: string;
onBucketInputChange: (field: keyof BucketInput, value: string) => void;
onBucketEditInputChange: (field: keyof BucketInput, value: string) => void;
onCreateBucket: () => void;
onUpdateBucket: () => void;
onDeleteBucket: () => void;
onSelectBucket: (id: string) => void;
onSelectObject: (key: string) => void;
onUploadObject: (file: File) => void;
onDeleteObject: (key: string) => void;
onDownloadObject: (bucketId: string, key: string) => void;
onCopyObjectURL: (object: BucketObject) => void;
onMoveObject: () => void;
onCopyObject: () => void;
onRenameObjectKeyChange: (value: string) => void;
onMoveDestinationChange: (value: string) => void;
onObjectPageChange: (offset: number) => void;
formatBytes: (bytes: number) => string;
formatDate: (date?: string | null) => string;
formatDate: (value?: string | null) => string;
}
const OBJECTS_PAGE_SIZE = 25;
export function StoragePage(props: StoragePageProps) {
const [showCreateBucketModal, setShowCreateBucketModal] = createSignal(false);
const [showUploadModal, setShowUploadModal] = createSignal(false);
const [showObjectPreview, setShowObjectPreview] = createSignal(false);
const [searchQuery, setSearchQuery] = createSignal("");
const [selectedFile, setSelectedFile] = createSignal<File | undefined>();
const [createOpen, setCreateOpen] = createSignal(false);
const [bucketSettingsOpen, setBucketSettingsOpen] = createSignal(false);
const [objectSearch, setObjectSearch] = createSignal("");
const [dragging, setDragging] = createSignal(false);
const filteredBuckets = () => {
const query = searchQuery().toLowerCase();
if (!query || !props.buckets) return props.buckets || [];
return props.buckets.filter(b =>
b.name.toLowerCase().includes(query) ||
b.slug.toLowerCase().includes(query)
);
};
const activeBucket = createMemo(() =>
(props.buckets ?? []).find((b) => b.id === props.selectedBucketID),
);
const handleCreateBucket = (e: SubmitEvent) => {
props.onCreateBucket(e);
setShowCreateBucketModal(false);
};
const selectedObject = createMemo(() =>
props.objects.find((o) => o.object_key === props.selectedObjectKey),
);
const handleUpload = () => {
const file = selectedFile();
if (file) {
props.onUploadObject(file);
setSelectedFile(undefined);
setShowUploadModal(false);
}
};
const filteredObjects = createMemo(() => {
const q = objectSearch().toLowerCase();
if (!q) return props.objects;
return props.objects.filter((o) => o.object_key.toLowerCase().includes(q));
});
const getVisibilityBadge = (visibility: string) => {
return visibility === 'public' ?
<Badge variant="success">Public</Badge> :
<Badge variant="secondary">Private</Badge>;
const pageMeta = () => props.objectsPage;
const currentPage = () => Math.floor((pageMeta()?.offset ?? 0) / OBJECTS_PAGE_SIZE) + 1;
const totalPages = () =>
Math.max(1, Math.ceil((pageMeta()?.total ?? props.objects.length) / OBJECTS_PAGE_SIZE));
const handleFiles = (files: FileList | null) => {
const file = files?.[0];
if (file) props.onUploadObject(file);
};
return (
<div class="space-y-6">
{/* Header */}
<div class="flex items-center justify-between">
<div class="page">
<div class="page-header">
<div>
<h1 class="text-3xl font-bold text-gray-900">Storage</h1>
<p class="text-gray-600 mt-1">Manage buckets and objects</p>
<h1 class="page-title">Storage</h1>
<p class="page-description">
Buckets hold files on your own filesystem — no external object store required.
</p>
</div>
<div class="flex gap-3">
<Show when={props.selectedBucketID}>
<Button variant="secondary" onClick={() => setShowUploadModal(true)}>
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
</svg>
Upload File
</Button>
</Show>
<Button onClick={() => setShowCreateBucketModal(true)}>
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
</svg>
New Bucket
</Button>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
{/* Buckets List */}
<div class="lg:col-span-1 space-y-4">
<Card class="p-4">
<Input
placeholder="Search buckets..."
value={searchQuery()}
onInput={(e) => setSearchQuery(e.currentTarget.value)}
class="w-full"
/>
</Card>
<Card class="p-4">
<h2 class="text-lg font-semibold mb-4">Buckets</h2>
<Show
when={filteredBuckets().length > 0}
fallback={
<EmptyState
icon={
<svg class="w-12 h-12" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 3h4m-4 4h4" />
</svg>
}
title="No buckets"
description="Create a bucket to store files"
/>
}
>
<div class="space-y-2">
<For each={filteredBuckets()}>
{(bucket) => (
<button
onClick={() => props.onSelectBucket(bucket.id)}
class={`w-full text-left p-3 rounded-lg border transition-all ${
props.selectedBucketID === bucket.id
? 'border-blue-500 bg-blue-50'
: 'border-gray-200 hover:border-gray-300 hover:bg-gray-50'
}`}
>
<div class="flex items-center justify-between mb-1">
<span class="font-medium text-gray-900">{bucket.name}</span>
{getVisibilityBadge(bucket.visibility)}
</div>
<p class="text-xs text-gray-600">{bucket.slug}</p>
<p class="text-xs text-gray-500 mt-1">
{bucket.object_count} objects • {props.formatBytes(bucket.size_bytes)}
</p>
</button>
)}
</For>
</div>
</Show>
</Card>
{/* Bucket Settings */}
<Show when={props.selectedBucketID && props.canUpdateBucket}>
<Card class="p-4">
<h2 class="text-lg font-semibold mb-4">Bucket Settings</h2>
<form class="space-y-3" onSubmit={props.onUpdateBucket}>
<Input
label="Name"
value={props.bucketEditInput.name}
onInput={(e) => props.onBucketEditInputChange('name', e.currentTarget.value)}
disabled={props.storagePending}
/>
<Input
label="Slug"
value={props.bucketEditInput.slug}
onInput={(e) => props.onBucketEditInputChange('slug', e.currentTarget.value)}
disabled={props.storagePending}
/>
<Select
label="Visibility"
value={props.bucketEditInput.visibility}
onChange={(e) => props.onBucketEditInputChange('visibility', e.currentTarget.value)}
disabled={props.storagePending}
>
<option value="private">Private</option>
<option value="public">Public</option>
</Select>
<div class="flex flex-col gap-2">
<Button type="submit" variant="primary" size="sm" disabled={props.storagePending}>
Update
</Button>
<Button type="button" variant="danger" size="sm" onClick={props.onDeleteBucket} disabled={props.storagePending}>
Delete Bucket
</Button>
</div>
</form>
</Card>
</Show>
</div>
{/* Objects List */}
<div class="lg:col-span-2">
<Show
when={props.selectedBucketID}
fallback={
<Card class="p-12">
<EmptyState
icon={
<svg class="w-16 h-16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 3h4m-4 4h4" />
</svg>
}
title="Select a bucket"
description="Choose a bucket from the left to view its contents"
/>
</Card>
}
<div class="page-actions">
<button
class="btn btn-primary"
onClick={() => setCreateOpen(true)}
disabled={!props.canUpdateBucket}
>
<Card>
<div class="p-4 border-b border-gray-200">
<div class="flex items-center justify-between">
<h2 class="text-lg font-semibold">Objects</h2>
<Button size="sm" onClick={() => setShowUploadModal(true)}>
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
</svg>
Upload
</Button>
</div>
</div>
<Show
when={(props.objects?.length ?? 0) > 0}
fallback={
<div class="p-12">
<EmptyState
icon={
<svg class="w-16 h-16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
</svg>
}
title="No objects"
description="Upload files to this bucket"
action={
<Button onClick={() => setShowUploadModal(true)}>Upload File</Button>
}
/>
</div>
}
>
<Table>
<thead>
<tr>
<th>Name</th>
<th>Size</th>
<th>Type</th>
<th>Modified</th>
<th class="text-right">Actions</th>
</tr>
</thead>
<tbody>
<For each={props.objects}>
{(object) => (
<tr class="hover:bg-gray-50">
<td>
<button
onClick={() => {
props.onSelectObject(object.object_key);
setShowObjectPreview(true);
}}
class="flex items-center gap-2 text-left hover:text-blue-600"
>
<svg class="w-5 h-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
</svg>
<span class="font-medium">{object.object_key}</span>
</button>
</td>
<td class="text-sm text-gray-600">{props.formatBytes(object.size_bytes)}</td>
<td>
<Badge variant="secondary" class="text-xs">
{object.content_type || 'unknown'}
</Badge>
</td>
<td class="text-sm text-gray-600">{props.formatDate(object.updated_at)}</td>
<td class="text-right">
<div class="flex items-center justify-end gap-2">
<Button
variant="ghost"
size="sm"
onClick={() => props.onDownloadObject(props.selectedBucketID!, object.object_key)}
>
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
</svg>
</Button>
<Button
variant="ghost"
size="sm"
onClick={() => props.onDeleteObject(object.object_key)}
>
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
</Button>
</div>
</td>
</tr>
)}
</For>
</tbody>
</Table>
{/* Pagination */}
<Show when={props.objectsPage && props.objectsPage.total > props.objectsPage.limit}>
<div class="p-4 border-t border-gray-200 flex items-center justify-between">
<p class="text-sm text-gray-600">
Showing {props.objectsPage!.offset + 1} to {Math.min(props.objectsPage!.offset + props.objectsPage!.limit, props.objectsPage!.total)} of {props.objectsPage!.total}
</p>
<div class="flex gap-2">
<Button
variant="ghost"
size="sm"
disabled={props.objectsPage!.offset === 0}
onClick={() => props.onObjectPageChange(Math.max(0, props.objectsPage!.offset - props.objectsPage!.limit))}
>
Previous
</Button>
<Button
variant="ghost"
size="sm"
disabled={props.objectsPage!.offset + props.objectsPage!.limit >= props.objectsPage!.total}
onClick={() => props.onObjectPageChange(props.objectsPage!.offset + props.objectsPage!.limit)}
>
Next
</Button>
</div>
</div>
</Show>
</Show>
</Card>
</Show>
<IconPlus class="w-4 h-4" />
New bucket
</button>
</div>
</div>
<Show when={props.storageMessage}>
<Message variant="neutral">{props.storageMessage}</Message>
<div class="message message-neutral">{props.storageMessage}</div>
</Show>
{/* Create Bucket Modal */}
<Modal open={showCreateBucketModal()} onClose={() => setShowCreateBucketModal(false)} title="Create New Bucket">
<form class="space-y-4" onSubmit={handleCreateBucket}>
<div class="storage-grid">
{/* Bucket list */}
<div class="card card-flush">
<div
class="card-header"
style="padding:1rem 1rem 0.75rem;margin-bottom:0;border-bottom:1px solid var(--border)"
>
<span class="card-header-title">Buckets</span>
</div>
<div class="p-1.5">
<For
each={props.buckets ?? []}
fallback={
<div class="p-4 text-center">
<p class="text-xs text-text-3">No buckets yet</p>
</div>
}
>
{(bucket) => (
<button
class={`nav-item w-full ${bucket.id === props.selectedBucketID ? "active" : ""}`}
onClick={() => props.onSelectBucket(bucket.id)}
>
<IconStorage class="w-4 h-4" />
<span class="flex-1 truncate">{bucket.name}</span>
<Badge variant={bucket.visibility === "public" ? "success" : "neutral"}>
{bucket.visibility}
</Badge>
</button>
)}
</For>
</div>
</div>
{/* Objects */}
<div class="card card-flush" style="min-height:28rem">
<Show
when={activeBucket()}
fallback={
<div class="empty-state" style="min-height:28rem">
<div class="empty-state-icon">
<IconStorage class="w-5 h-5" />
</div>
<p class="empty-state-title">Select a bucket</p>
<p class="empty-state-description">
Choose a bucket on the left to browse and manage its objects.
</p>
</div>
}
>
<div
class="card-header"
style="padding:1rem 1.25rem;margin-bottom:0;border-bottom:1px solid var(--border)"
>
<div class="flex items-center justify-between gap-3 w-full flex-wrap">
<div class="min-w-0">
<div class="flex items-center gap-2">
<span class="card-header-title">{activeBucket()!.name}</span>
<Badge variant={activeBucket()!.visibility === "public" ? "success" : "neutral"}>
{activeBucket()!.visibility}
</Badge>
</div>
<span class="card-header-description">
<code>{activeBucket()!.slug}</code> · {pageMeta()?.total ?? props.objects.length} objects
</span>
</div>
<div class="flex items-center gap-2">
<button
class="icon-btn"
title="Bucket settings"
onClick={() => setBucketSettingsOpen(true)}
disabled={!props.canUpdateBucket}
>
<IconEdit class="w-4 h-4" />
</button>
<label class="btn btn-secondary btn-sm" style="cursor:pointer">
<IconUpload class="w-3.5 h-3.5" />
Upload
<input
type="file"
class="hidden"
onChange={(e) => handleFiles(e.currentTarget.files)}
/>
</label>
</div>
</div>
</div>
{/* drop zone */}
<div
class={`mx-4 mt-3 rounded-lg border border-dashed px-4 py-3 text-center text-xs transition-colors ${
dragging() ? "text-accent" : "text-text-3"
}`}
style={`border-color:${dragging() ? "var(--accent)" : "var(--border-strong)"};background:${dragging() ? "var(--accent-muted)" : "transparent"}`}
onDragOver={(e) => {
e.preventDefault();
setDragging(true);
}}
onDragLeave={() => setDragging(false)}
onDrop={(e) => {
e.preventDefault();
setDragging(false);
handleFiles(e.dataTransfer?.files ?? null);
}}
>
Drag & drop a file here to upload it to <code>{activeBucket()!.slug}</code>
</div>
<div class="px-4 pt-3">
<Input
placeholder="Filter objects…"
class="input-sm"
value={objectSearch()}
onInput={(e) => setObjectSearch(e.currentTarget.value)}
/>
</div>
<div class="table-container mt-1">
<table class="table">
<thead>
<tr>
<th>Key</th>
<th style="width:1%">Type</th>
<th style="width:1%">Size</th>
<th style="width:1%">Created</th>
<th style="width:1%" />
</tr>
</thead>
<tbody>
<For
each={filteredObjects()}
fallback={
<tr>
<td colspan={5} class="py-10 text-center text-text-3">
This bucket is empty. Upload your first object.
</td>
</tr>
}
>
{(object) => (
<tr
class={`clickable ${object.object_key === props.selectedObjectKey ? "bg-surface-2" : ""}`}
onClick={() => props.onSelectObject(object.object_key)}
>
<td>
<div class="flex items-center gap-2.5">
<IconFile class="w-4 h-4 text-text-3 flex-shrink-0" />
<span class="font-mono text-xs text-text-1 truncate" style="max-width:22rem">
{object.object_key}
</span>
</div>
</td>
<td class="text-xs text-text-3 whitespace-nowrap">{object.content_type}</td>
<td class="text-xs text-text-2 whitespace-nowrap">{props.formatBytes(object.size_bytes)}</td>
<td class="text-xs text-text-3 whitespace-nowrap">{props.formatDate(object.created_at)}</td>
<td>
<IconChevronRight class="w-4 h-4 text-text-3" />
</td>
</tr>
)}
</For>
</tbody>
</table>
</div>
<Show when={totalPages() > 1}>
<div class="flex items-center justify-between px-4 py-3 border-t" style="border-color:var(--border)">
<span class="text-xs text-text-3">
Page {currentPage()} of {totalPages()}
</span>
<div class="flex gap-1">
<button
class="btn btn-ghost btn-sm"
disabled={currentPage() <= 1}
onClick={() => props.onObjectPageChange((currentPage() - 2) * OBJECTS_PAGE_SIZE)}
>
Previous
</button>
<button
class="btn btn-ghost btn-sm"
disabled={!pageMeta()?.has_more}
onClick={() => props.onObjectPageChange(currentPage() * OBJECTS_PAGE_SIZE)}
>
Next
</button>
</div>
</div>
</Show>
</Show>
</div>
</div>
{/* Object inspector */}
<Show when={selectedObject()}>
<div class="card">
<div class="card-header">
<div class="flex items-center justify-between w-full gap-3 flex-wrap">
<div class="min-w-0">
<div class="card-header-title font-mono" style="font-size:0.875rem">
{selectedObject()!.object_key}
</div>
<div class="card-header-description">
{selectedObject()!.content_type} · {props.formatBytes(selectedObject()!.size_bytes)} ·{" "}
{props.formatDate(selectedObject()!.created_at)}
</div>
</div>
<div class="flex items-center gap-2">
<button
class="btn btn-secondary btn-sm"
onClick={() =>
props.onDownloadObject(props.selectedBucketID!, selectedObject()!.object_key)
}
>
<IconDownload class="w-3.5 h-3.5" />
Download
</button>
<Show when={activeBucket()?.visibility === "public"}>
<button
class="btn btn-secondary btn-sm"
onClick={() => props.onCopyObjectURL(selectedObject()!)}
>
<IconLink class="w-3.5 h-3.5" />
Copy URL
</button>
</Show>
<button
class="btn btn-danger btn-sm"
onClick={() => props.onDeleteObject(selectedObject()!.object_key)}
disabled={!props.canUpdateBucket}
>
<IconTrash class="w-3.5 h-3.5" />
Delete
</button>
</div>
</div>
</div>
<div class="grid gap-4 md:grid-cols-2">
{/* preview */}
<div>
<p class="label">Preview</p>
<div class="card card-flush flex items-center justify-center" style="min-height:12rem;background:var(--bg-panel)">
<Show
when={!props.previewLoading}
fallback={<span class="spinner" />}
>
<Show
when={props.objectPreview?.kind === "image"}
fallback={
<Show
when={props.objectPreview?.kind === "text"}
fallback={
<div class="p-6 text-center">
<IconEye class="w-6 h-6 mx-auto text-text-3 mb-2" />
<p class="text-xs text-text-3">
{props.objectPreview?.kind === "unsupported"
? props.objectPreview.message
: "Select an object to preview"}
</p>
</div>
}
>
<pre class="code-block w-full border-0" style="max-height:20rem;overflow:auto;border-radius:0">
{(props.objectPreview as { kind: "text"; text: string }).text}
</pre>
</Show>
}
>
<img
src={(props.objectPreview as { kind: "image"; objectURL: string }).objectURL}
alt={selectedObject()!.object_key}
style="max-height:20rem;max-width:100%;object-fit:contain"
/>
</Show>
</Show>
</div>
</div>
{/* move/copy */}
<Show when={props.canUpdateBucket}>
<div>
<p class="label">Rename, move or copy</p>
<div class="space-y-3">
<Input
label="New object key"
value={props.renameObjectKey}
onInput={(e) => props.onRenameObjectKeyChange(e.currentTarget.value)}
/>
<Select
label="Destination bucket"
value={props.moveDestinationBucketID}
onChange={(e) => props.onMoveDestinationChange(e.currentTarget.value)}
>
<For each={props.buckets ?? []}>
{(bucket) => (
<option value={bucket.id}>{bucket.name}</option>
)}
</For>
</Select>
<div class="flex gap-2">
<button class="btn btn-secondary btn-sm" onClick={props.onMoveObject}>
Move / rename
</button>
<button class="btn btn-ghost btn-sm" onClick={props.onCopyObject}>
<IconCopy class="w-3.5 h-3.5" />
Copy
</button>
</div>
</div>
</div>
</Show>
</div>
</div>
</Show>
{/* Create bucket modal */}
<Modal
open={createOpen()}
onClose={() => setCreateOpen(false)}
title="Create bucket"
description="Buckets are folders on the server's filesystem with metadata in Postgres."
>
<form
onSubmit={(e) => {
e.preventDefault();
props.onCreateBucket();
setCreateOpen(false);
}}
class="space-y-4"
>
<Input
label="Bucket Name"
placeholder="my-bucket"
label="Bucket name"
placeholder="User avatars"
value={props.bucketInput.name}
onInput={(e) => {
const name = e.currentTarget.value;
props.onBucketInputChange('name', name);
const slug = name.toLowerCase().trim().replace(/[^a-z0-9\s-]/g, '').replace(/\s+/g, '-');
props.onBucketInputChange('slug', slug);
}}
disabled={props.storagePending}
onInput={(e) => props.onBucketInputChange("name", e.currentTarget.value)}
required
/>
<Input
label="Bucket Slug"
placeholder="my-bucket"
label="Slug"
placeholder="avatars"
value={props.bucketInput.slug}
onInput={(e) => props.onBucketInputChange('slug', e.currentTarget.value)}
disabled={props.storagePending}
onInput={(e) => props.onBucketInputChange("slug", e.currentTarget.value)}
required
/>
<Select
label="Visibility"
value={props.bucketInput.visibility}
onChange={(e) => props.onBucketInputChange('visibility', e.currentTarget.value)}
disabled={props.storagePending}
onChange={(e) => props.onBucketInputChange("visibility", e.currentTarget.value)}
>
<option value="private">Private</option>
<option value="public">Public</option>
<option value="private">private — authenticated download only</option>
<option value="public">public — anyone with the URL can download</option>
</Select>
<div class="flex gap-3 justify-end pt-4">
<Button type="button" variant="ghost" onClick={() => setShowCreateBucketModal(false)}>
<ModalFooter>
<button type="button" class="btn btn-ghost" onClick={() => setCreateOpen(false)}>
Cancel
</Button>
<Button type="submit" variant="primary" disabled={props.storagePending}>
{props.storagePending ? "Creating..." : "Create Bucket"}
</Button>
</div>
</button>
<button type="submit" class="btn btn-primary" disabled={props.storagePending}>
Create bucket
</button>
</ModalFooter>
</form>
</Modal>
{/* Upload Modal */}
<Modal open={showUploadModal()} onClose={() => setShowUploadModal(false)} title="Upload File">
<div class="space-y-4">
<FileInput
label="Select File"
onChange={(file) => setSelectedFile(file)}
accept="*/*"
/>
<Show when={selectedFile()}>
<div class="p-4 bg-gray-50 rounded-lg">
<p class="text-sm font-medium text-gray-900">{selectedFile()!.name}</p>
<p class="text-xs text-gray-600 mt-1">
{props.formatBytes(selectedFile()!.size)} • {selectedFile()!.type || 'unknown type'}
</p>
</div>
</Show>
<div class="flex gap-3 justify-end pt-4">
<Button type="button" variant="ghost" onClick={() => setShowUploadModal(false)}>
Cancel
</Button>
<Button
variant="primary"
disabled={!selectedFile() || props.storagePending}
onClick={handleUpload}
>
{props.storagePending ? "Uploading..." : "Upload"}
</Button>
</div>
</div>
</Modal>
{/* Object Preview Modal */}
<Modal
open={showObjectPreview()}
onClose={() => setShowObjectPreview(false)}
title="Object Preview"
size="lg"
{/* Bucket settings modal */}
<Modal
open={bucketSettingsOpen()}
onClose={() => setBucketSettingsOpen(false)}
title="Bucket settings"
>
<Show when={props.objectPreview}>
<div class="space-y-4">
<Show when={props.objectPreview.kind === 'image'}>
<img src={props.objectPreview.objectURL} alt="Preview" class="w-full rounded-lg" />
</Show>
<Show when={props.objectPreview.kind === 'text'}>
<pre class="p-4 bg-gray-900 text-gray-100 rounded-lg overflow-x-auto text-sm">
{props.objectPreview.text}
</pre>
<Show when={props.objectPreview.truncated}>
<p class="text-sm text-yellow-600">Preview truncated. Download to view full content.</p>
</Show>
</Show>
<Show when={props.objectPreview.kind === 'unsupported'}>
<div class="text-center p-8">
<p class="text-gray-600">{props.objectPreview.message}</p>
</div>
</Show>
</div>
</Show>
<form
onSubmit={(e) => {
e.preventDefault();
props.onUpdateBucket();
setBucketSettingsOpen(false);
}}
class="space-y-4"
>
<Input
label="Bucket name"
value={props.bucketEditInput.name}
onInput={(e) => props.onBucketEditInputChange("name", e.currentTarget.value)}
required
/>
<Input
label="Slug"
value={props.bucketEditInput.slug}
onInput={(e) => props.onBucketEditInputChange("slug", e.currentTarget.value)}
required
/>
<Select
label="Visibility"
value={props.bucketEditInput.visibility}
onChange={(e) => props.onBucketEditInputChange("visibility", e.currentTarget.value)}
>
<option value="private">private</option>
<option value="public">public</option>
</Select>
<ModalFooter align="between">
<button
type="button"
class="btn btn-danger"
onClick={() => {
setBucketSettingsOpen(false);
props.onDeleteBucket();
}}
>
Delete bucket
</button>
<div class="flex gap-2">
<button type="button" class="btn btn-ghost" onClick={() => setBucketSettingsOpen(false)}>
Cancel
</button>
<button type="submit" class="btn btn-primary" disabled={props.storagePending}>
Save
</button>
</div>
</ModalFooter>
</form>
</Modal>
</div>
);
+3
View File
@@ -1,6 +1,9 @@
// Pages barrel export
export { LoginPage } from "./LoginPage";
export { ProjectsPage } from "./ProjectsPage";
export { MembersPage } from "./MembersPage";
export { StoragePage } from "./StoragePage";
export { CollectionsPage } from "./CollectionsPage";
export { SettingsPage } from "./SettingsPage";
export { AuditPage } from "./AuditPage";
export { AuthPage, type AuthUser } from "./AuthPage";
-539
View File
@@ -1,539 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Primora - Neo-Brutalist Design System Showcase</title>
<link rel="stylesheet" href="./styles/distinctive.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
background: #000;
color: #fff;
font-family: 'IBM Plex Mono', monospace;
overflow-x: hidden;
}
.showcase {
max-width: 1400px;
margin: 0 auto;
padding: 80px 40px;
}
.hero {
margin-bottom: 120px;
position: relative;
}
.hero-title {
font-family: 'JetBrains Mono', monospace;
font-size: clamp(3rem, 8vw, 6rem);
font-weight: 800;
text-transform: uppercase;
letter-spacing: -0.03em;
line-height: 0.9;
margin-bottom: 40px;
position: relative;
}
.hero-title span {
display: block;
animation: slide-in 0.8s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}
.hero-title span:nth-child(1) {
color: #00ffff;
text-shadow: 0 0 40px rgba(0, 255, 255, 0.5);
animation-delay: 0ms;
}
.hero-title span:nth-child(2) {
color: #ff00ff;
text-shadow: 0 0 40px rgba(255, 0, 255, 0.5);
animation-delay: 100ms;
}
.hero-title span:nth-child(3) {
color: #ffff00;
text-shadow: 0 0 40px rgba(255, 255, 0, 0.5);
animation-delay: 200ms;
}
@keyframes slide-in {
from {
opacity: 0;
transform: translateX(-100px);
}
}
.hero-subtitle {
font-size: 1.2rem;
color: #808080;
max-width: 600px;
line-height: 1.6;
animation: fade-in 1s ease-out 0.5s backwards;
}
@keyframes fade-in {
from { opacity: 0; }
}
.section {
margin-bottom: 100px;
}
.section-title {
font-family: 'JetBrains Mono', monospace;
font-size: 2rem;
font-weight: 800;
text-transform: uppercase;
color: #00ffff;
margin-bottom: 40px;
position: relative;
display: inline-block;
}
.section-title::after {
content: '';
position: absolute;
bottom: -8px;
left: 0;
right: 0;
height: 2px;
background: #00ffff;
box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 32px;
}
.data-card {
background: #000;
border: 2px solid #00ffff;
padding: 32px;
position: relative;
box-shadow:
0 0 20px rgba(0, 255, 255, 0.2),
inset 0 0 20px rgba(0, 255, 255, 0.1);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.data-card:hover {
transform: translate(-4px, -4px);
box-shadow:
8px 8px 0 #00ffff,
0 0 40px rgba(0, 255, 255, 0.4);
}
.data-card::before {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(
0deg,
transparent,
transparent 2px,
#00ffff 2px,
#00ffff 4px
);
opacity: 0.05;
pointer-events: none;
}
.data-card-label {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.15em;
color: #00ffff;
margin-bottom: 16px;
font-weight: 600;
}
.data-card-value {
font-family: 'Space Mono', monospace;
font-size: 3.5rem;
font-weight: 700;
color: #00ffff;
text-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
font-variant-numeric: tabular-nums;
line-height: 1;
margin-bottom: 8px;
}
.data-card-unit {
font-size: 1rem;
color: #808080;
font-family: 'Space Mono', monospace;
}
.data-card-trend {
margin-top: 16px;
font-size: 0.875rem;
color: #00ff00;
font-family: 'Space Mono', monospace;
}
/* Corner brackets */
.brackets {
position: relative;
}
.brackets::before,
.brackets::after {
content: '';
position: absolute;
width: 16px;
height: 16px;
border: 2px solid #00ffff;
}
.brackets::before {
top: 0;
left: 0;
border-right: none;
border-bottom: none;
}
.brackets::after {
bottom: 0;
right: 0;
border-left: none;
border-top: none;
}
/* Terminal window */
.terminal {
background: #000;
border: 2px solid #00ff00;
padding: 0;
box-shadow: 0 0 20px rgba(0, 255, 0, 0.3);
font-family: 'Space Mono', monospace;
}
.terminal-header {
background: #00ff00;
color: #000;
padding: 12px 20px;
font-weight: 700;
display: flex;
align-items: center;
gap: 8px;
}
.terminal-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: #000;
}
.terminal-body {
padding: 24px;
font-size: 0.875rem;
line-height: 1.8;
}
.terminal-line {
display: flex;
gap: 12px;
margin-bottom: 8px;
}
.terminal-prompt {
color: #00ff00;
user-select: none;
}
.terminal-cursor {
display: inline-block;
width: 8px;
height: 16px;
background: #00ff00;
animation: blink 1s step-end infinite;
margin-left: 4px;
}
@keyframes blink {
50% { opacity: 0; }
}
/* Button showcase */
.button-grid {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.neo-btn {
font-family: 'JetBrains Mono', monospace;
background: #000;
border: 2px solid;
padding: 16px 32px;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 0.1em;
cursor: pointer;
position: relative;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
font-size: 0.875rem;
}
.neo-btn:hover {
transform: translate(-2px, -2px);
}
.neo-btn:active {
transform: translate(0, 0);
}
.neo-btn-cyan {
border-color: #00ffff;
color: #00ffff;
}
.neo-btn-cyan:hover {
background: #00ffff;
color: #000;
box-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
}
.neo-btn-magenta {
border-color: #ff00ff;
color: #ff00ff;
}
.neo-btn-magenta:hover {
background: #ff00ff;
color: #000;
box-shadow: 0 0 20px rgba(255, 0, 255, 0.5);
}
.neo-btn-yellow {
border-color: #ffff00;
color: #ffff00;
}
.neo-btn-yellow:hover {
background: #ffff00;
color: #000;
box-shadow: 0 0 20px rgba(255, 255, 0, 0.5);
}
/* Animated background grid */
.bg-grid {
position: fixed;
inset: 0;
background-image:
linear-gradient(#00ffff 1px, transparent 1px),
linear-gradient(90deg, #00ffff 1px, transparent 1px);
background-size: 40px 40px;
opacity: 0.03;
animation: grid-move 20s linear infinite;
pointer-events: none;
z-index: -1;
}
@keyframes grid-move {
0% { background-position: 0 0; }
100% { background-position: 40px 40px; }
}
/* Status indicators */
.status-row {
display: flex;
gap: 32px;
align-items: center;
}
.status-item {
display: flex;
align-items: center;
gap: 12px;
font-family: 'Space Mono', monospace;
font-size: 0.875rem;
}
.status-dot {
width: 12px;
height: 12px;
border-radius: 50%;
position: relative;
}
.status-dot::before {
content: '';
position: absolute;
inset: -6px;
border-radius: 50%;
background: currentColor;
opacity: 0.3;
animation: pulse-ring 2s ease-out infinite;
}
@keyframes pulse-ring {
0% {
transform: scale(0.8);
opacity: 0.5;
}
100% {
transform: scale(1.8);
opacity: 0;
}
}
.status-online {
background: #00ff00;
box-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
color: #00ff00;
}
.status-warning {
background: #ffff00;
box-shadow: 0 0 10px rgba(255, 255, 0, 0.5);
color: #ffff00;
}
.status-error {
background: #ff0000;
box-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
color: #ff0000;
}
</style>
</head>
<body>
<div class="bg-grid"></div>
<div class="showcase">
<!-- Hero -->
<div class="hero">
<h1 class="hero-title">
<span>NEO-</span>
<span>BRUTALIST</span>
<span>PRIMORA</span>
</h1>
<p class="hero-subtitle">
A distinctive design system where terminal aesthetics meet kinetic typography.
Raw materials. Honest borders. Data that breathes.
</p>
</div>
<!-- Data Cards -->
<section class="section">
<h2 class="section-title">Data Cards</h2>
<div class="grid">
<div class="data-card brackets">
<div class="data-card-label">Active Users</div>
<div class="data-card-value">1,247</div>
<div class="data-card-unit">online now</div>
<div class="data-card-trend">↑ 23.5% from yesterday</div>
</div>
<div class="data-card brackets" style="border-color: #ff00ff; box-shadow: 0 0 20px rgba(255, 0, 255, 0.2), inset 0 0 20px rgba(255, 0, 255, 0.1);">
<div class="data-card-label" style="color: #ff00ff;">Storage Used</div>
<div class="data-card-value" style="color: #ff00ff; text-shadow: 0 0 20px rgba(255, 0, 255, 0.5);">847</div>
<div class="data-card-unit">GB / 2 TB</div>
<div class="data-card-trend">↑ 12.3% this week</div>
</div>
<div class="data-card brackets" style="border-color: #ffff00; box-shadow: 0 0 20px rgba(255, 255, 0, 0.2), inset 0 0 20px rgba(255, 255, 0, 0.1);">
<div class="data-card-label" style="color: #ffff00;">API Requests</div>
<div class="data-card-value" style="color: #ffff00; text-shadow: 0 0 20px rgba(255, 255, 0, 0.5);">2.4M</div>
<div class="data-card-unit">last 24h</div>
<div class="data-card-trend">↑ 45.2% from last week</div>
</div>
</div>
</section>
<!-- Terminal -->
<section class="section">
<h2 class="section-title">Terminal Interface</h2>
<div class="terminal">
<div class="terminal-header">
<div class="terminal-dot"></div>
<div class="terminal-dot"></div>
<div class="terminal-dot"></div>
<span>primora@system:~</span>
</div>
<div class="terminal-body">
<div class="terminal-line">
<span class="terminal-prompt">$</span>
<span>primora status --verbose</span>
</div>
<div class="terminal-line">
<span style="color: #00ff00;">✓</span>
<span>Backend API: <span style="color: #00ff00;">ONLINE</span></span>
</div>
<div class="terminal-line">
<span style="color: #00ff00;">✓</span>
<span>Database: <span style="color: #00ff00;">CONNECTED</span></span>
</div>
<div class="terminal-line">
<span style="color: #00ff00;">✓</span>
<span>Storage: <span style="color: #00ff00;">READY</span></span>
</div>
<div class="terminal-line">
<span class="terminal-prompt">$</span>
<span class="terminal-cursor"></span>
</div>
</div>
</div>
</section>
<!-- Buttons -->
<section class="section">
<h2 class="section-title">Interactive Elements</h2>
<div class="button-grid">
<button class="neo-btn neo-btn-cyan">Primary Action</button>
<button class="neo-btn neo-btn-magenta">Secondary</button>
<button class="neo-btn neo-btn-yellow">Warning</button>
</div>
</section>
<!-- Status Indicators -->
<section class="section">
<h2 class="section-title">System Status</h2>
<div class="status-row">
<div class="status-item">
<div class="status-dot status-online"></div>
<span style="color: #00ff00;">API Online</span>
</div>
<div class="status-item">
<div class="status-dot status-online"></div>
<span style="color: #00ff00;">Database Connected</span>
</div>
<div class="status-item">
<div class="status-dot status-warning"></div>
<span style="color: #ffff00;">High Load</span>
</div>
</div>
</section>
</div>
<script>
// Animate numbers counting up
document.querySelectorAll('.data-card-value').forEach(el => {
const target = parseInt(el.textContent.replace(/,/g, ''));
let current = 0;
const increment = target / 60;
const timer = setInterval(() => {
current += increment;
if (current >= target) {
el.textContent = target.toLocaleString();
clearInterval(timer);
} else {
el.textContent = Math.floor(current).toLocaleString();
}
}, 20);
});
</script>
</body>
</html>
-461
View File
@@ -1,461 +0,0 @@
/**
* PRIMORA DISTINCTIVE DESIGN SYSTEM
* Refined Cyberpunk meets Swiss Precision
*
* Core Principles:
* - Precision typography with character
* - Layered depth through transparency
* - Kinetic micro-interactions
* - Data-first visual language
* - Atmospheric backgrounds
*/
/* ============================================
TYPOGRAPHY - Distinctive Font Choices
============================================ */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=Azeret+Mono:wght@400;500;600;700&family=DM+Mono:wght@400;500&display=swap');
:root {
/* Typography - Distinctive & Refined */
--font-display: 'Syne', system-ui, sans-serif;
--font-body: 'Azeret Mono', 'Courier New', monospace;
--font-data: 'DM Mono', monospace;
/* Refined Cyberpunk Palette */
--electric-blue: #00d9ff;
--neon-purple: #b794f6;
--cyber-pink: #ff6ec7;
--matrix-green: #00ff9f;
--warning-amber: #ffb84d;
--danger-red: #ff5757;
--pure-white: #ffffff;
--deep-black: #0a0a0f;
--slate-gray: #8892b0;
/* Atmospheric Glows */
--glow-blue: rgba(0, 217, 255, 0.4);
--glow-purple: rgba(183, 148, 246, 0.4);
--glow-pink: rgba(255, 110, 199, 0.4);
--glow-green: rgba(0, 255, 159, 0.4);
--glow-ambient: rgba(25, 163, 217, 0.15);
/* Layered Backgrounds */
--bg-layer-0: #0a0a0f;
--bg-layer-1: rgba(15, 15, 25, 0.8);
--bg-layer-2: rgba(20, 20, 35, 0.9);
--bg-layer-3: rgba(30, 30, 50, 0.95);
/* Glass Morphism */
--glass-bg: rgba(255, 255, 255, 0.03);
--glass-border: rgba(255, 255, 255, 0.08);
--glass-blur: blur(20px);
/* Grid System */
--grid-size: 8px;
--border-width: 1px;
--border-width-thick: 2px;
}
/* ============================================
BASE STYLES - Refined Cyberpunk Aesthetic
============================================ */
body {
font-family: var(--font-body);
background: var(--bg-layer-0);
color: var(--pure-white);
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
position: relative;
overflow-x: hidden;
}
/* Atmospheric background */
body::before {
content: '';
position: fixed;
inset: 0;
background:
radial-gradient(circle at 20% 30%, var(--glow-blue) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, var(--glow-purple) 0%, transparent 50%),
radial-gradient(circle at 50% 50%, var(--glow-pink) 0%, transparent 70%);
opacity: 0.15;
pointer-events: none;
z-index: 0;
animation: atmospheric-shift 20s ease-in-out infinite;
}
@keyframes atmospheric-shift {
0%, 100% { transform: translate(0, 0) scale(1); }
33% { transform: translate(5%, -5%) scale(1.1); }
66% { transform: translate(-5%, 5%) scale(0.9); }
}
/* Typography with character */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.2;
color: var(--pure-white);
}
h1 {
font-size: clamp(2rem, 5vw, 3.5rem);
font-weight: 800;
background: linear-gradient(135deg, var(--electric-blue), var(--neon-purple));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* ============================================
NEO-BRUTALIST COMPONENTS
============================================ */
.neo-card {
background: var(--neo-black);
border: var(--border-width) solid var(--neo-cyan);
padding: calc(var(--grid-size) * 3);
position: relative;
box-shadow:
0 0 20px var(--glow-cyan),
inset 0 0 20px var(--glow-cyan);
}
.neo-card::before {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(
0deg,
transparent,
transparent 2px,
var(--neo-cyan) 2px,
var(--neo-cyan) 4px
);
opacity: 0.05;
pointer-events: none;
animation: scanline 8s linear infinite;
}
.neo-button {
font-family: var(--font-display);
background: var(--neo-black);
border: var(--border-width) solid var(--neo-cyan);
color: var(--neo-cyan);
padding: calc(var(--grid-size) * 1.5) calc(var(--grid-size) * 3);
text-transform: uppercase;
font-weight: 700;
letter-spacing: 0.1em;
cursor: pointer;
position: relative;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.neo-button:hover {
background: var(--neo-cyan);
color: var(--neo-black);
box-shadow: 0 0 20px var(--glow-cyan);
transform: translate(-2px, -2px);
}
.neo-button:active {
transform: translate(0, 0);
}
/* Corner brackets for emphasis */
.neo-brackets {
position: relative;
}
.neo-brackets::before,
.neo-brackets::after {
content: '';
position: absolute;
width: 12px;
height: 12px;
border: var(--border-width) solid currentColor;
}
.neo-brackets::before {
top: 0;
left: 0;
border-right: none;
border-bottom: none;
}
.neo-brackets::after {
bottom: 0;
right: 0;
border-left: none;
border-top: none;
}
/* ============================================
KINETIC TYPOGRAPHY
============================================ */
.kinetic-number {
font-family: var(--font-data);
font-variant-numeric: tabular-nums;
font-weight: 700;
display: inline-block;
animation: number-pulse 2s ease-in-out infinite;
}
@keyframes number-pulse {
0%, 100% {
transform: scale(1);
text-shadow: 0 0 10px currentColor;
}
50% {
transform: scale(1.05);
text-shadow: 0 0 20px currentColor;
}
}
/* Staggered reveal for data */
.stagger-reveal > * {
opacity: 0;
transform: translateY(20px);
animation: reveal 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.stagger-reveal > *:nth-child(1) { animation-delay: 0ms; }
.stagger-reveal > *:nth-child(2) { animation-delay: 100ms; }
.stagger-reveal > *:nth-child(3) { animation-delay: 200ms; }
.stagger-reveal > *:nth-child(4) { animation-delay: 300ms; }
.stagger-reveal > *:nth-child(5) { animation-delay: 400ms; }
.stagger-reveal > *:nth-child(6) { animation-delay: 500ms; }
@keyframes reveal {
to {
opacity: 1;
transform: translateY(0);
}
}
/* ============================================
TERMINAL EFFECTS
============================================ */
.terminal-cursor::after {
content: '▊';
animation: blink 1s step-end infinite;
margin-left: 2px;
}
@keyframes blink {
50% { opacity: 0; }
}
.scanline {
position: relative;
overflow: hidden;
}
.scanline::before {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(
0deg,
transparent,
transparent 2px,
rgba(255, 255, 255, 0.03) 2px,
rgba(255, 255, 255, 0.03) 4px
);
pointer-events: none;
animation: scanline 8s linear infinite;
}
@keyframes scanline {
0% { transform: translateY(-100%); }
100% { transform: translateY(100%); }
}
/* CRT screen effect */
.crt-effect {
position: relative;
}
.crt-effect::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, 0.3) 100%);
pointer-events: none;
}
/* ============================================
DATA VISUALIZATION ELEMENTS
============================================ */
.data-bar {
height: 4px;
background: var(--neo-cyan);
box-shadow: 0 0 10px var(--glow-cyan);
animation: data-flow 2s ease-in-out infinite;
}
@keyframes data-flow {
0%, 100% { opacity: 0.5; }
50% { opacity: 1; }
}
.data-grid {
background-image:
linear-gradient(var(--neo-cyan) 1px, transparent 1px),
linear-gradient(90deg, var(--neo-cyan) 1px, transparent 1px);
background-size: var(--grid-size) var(--grid-size);
opacity: 0.1;
}
/* Animated grid */
.animated-grid {
background-image:
linear-gradient(var(--neo-cyan) 1px, transparent 1px),
linear-gradient(90deg, var(--neo-cyan) 1px, transparent 1px);
background-size: 20px 20px;
opacity: 0.1;
animation: grid-move 20s linear infinite;
}
@keyframes grid-move {
0% { background-position: 0 0; }
100% { background-position: 20px 20px; }
}
/* ============================================
STATUS INDICATORS
============================================ */
.status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
position: relative;
}
.status-dot::before {
content: '';
position: absolute;
inset: -4px;
border-radius: 50%;
background: currentColor;
opacity: 0.3;
animation: pulse-ring 2s ease-out infinite;
}
@keyframes pulse-ring {
0% {
transform: scale(0.8);
opacity: 0.5;
}
100% {
transform: scale(1.5);
opacity: 0;
}
}
.status-online {
background: var(--neo-green);
box-shadow: 0 0 10px var(--glow-green);
}
.status-offline {
background: var(--neo-red);
box-shadow: 0 0 10px rgba(255, 0, 0, 0.3);
}
.status-warning {
background: var(--neo-yellow);
box-shadow: 0 0 10px var(--glow-yellow);
}
/* ============================================
INTERACTIVE STATES
============================================ */
.neo-hover {
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.neo-hover:hover {
transform: translate(-2px, -2px);
box-shadow:
4px 4px 0 var(--neo-cyan),
0 0 20px var(--glow-cyan);
}
/* Glitch effect on hover */
.glitch-hover {
position: relative;
}
.glitch-hover:hover::before,
.glitch-hover:hover::after {
content: attr(data-text);
position: absolute;
inset: 0;
opacity: 0.8;
}
.glitch-hover:hover::before {
color: var(--neo-cyan);
animation: glitch-1 0.3s infinite;
clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
}
.glitch-hover:hover::after {
color: var(--neo-magenta);
animation: glitch-2 0.3s infinite;
clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
}
@keyframes glitch-1 {
0%, 100% { transform: translate(0); }
33% { transform: translate(-2px, 2px); }
66% { transform: translate(2px, -2px); }
}
@keyframes glitch-2 {
0%, 100% { transform: translate(0); }
33% { transform: translate(2px, -2px); }
66% { transform: translate(-2px, 2px); }
}
/* ============================================
UTILITY CLASSES
============================================ */
.text-cyan { color: var(--neo-cyan); }
.text-magenta { color: var(--neo-magenta); }
.text-yellow { color: var(--neo-yellow); }
.text-green { color: var(--neo-green); }
.text-red { color: var(--neo-red); }
.border-cyan { border-color: var(--neo-cyan); }
.border-magenta { border-color: var(--neo-magenta); }
.border-yellow { border-color: var(--neo-yellow); }
.border-green { border-color: var(--neo-green); }
.glow-cyan { box-shadow: 0 0 20px var(--glow-cyan); }
.glow-magenta { box-shadow: 0 0 20px var(--glow-magenta); }
.glow-yellow { box-shadow: 0 0 20px var(--glow-yellow); }
.glow-green { box-shadow: 0 0 20px var(--glow-green); }
/* Monospace utilities */
.font-display { font-family: var(--font-display); }
.font-data { font-family: var(--font-data); }
.tabular-nums { font-variant-numeric: tabular-nums; }
/* Grid utilities */
.grid-8 { width: calc(var(--grid-size) * 8); }
.grid-16 { width: calc(var(--grid-size) * 16); }
.grid-24 { width: calc(var(--grid-size) * 24); }
.grid-32 { width: calc(var(--grid-size) * 32); }
-516
View File
@@ -1,516 +0,0 @@
/* PRIMORA Enhanced Visual Effects & Micro-interactions */
/* ============================================
ADVANCED ANIMATIONS
============================================ */
@keyframes float {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
@keyframes pulse-glow {
0%, 100% {
box-shadow: 0 0 20px rgba(25, 163, 217, 0.2);
}
50% {
box-shadow: 0 0 40px rgba(25, 163, 217, 0.4);
}
}
@keyframes slide-in-right {
from {
opacity: 0;
transform: translateX(20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes bounce-in {
0% {
opacity: 0;
transform: scale(0.3);
}
50% {
transform: scale(1.05);
}
70% {
transform: scale(0.9);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@keyframes gradient-shift {
0%, 100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}
/* ============================================
ENHANCED CARD EFFECTS
============================================ */
.card-premium {
position: relative;
background: var(--surface-1);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: var(--space-5);
overflow: hidden;
transition: all var(--duration-normal) var(--ease-out);
}
.card-premium::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(25, 163, 217, 0.1),
transparent
);
transition: left 0.5s ease;
}
.card-premium:hover::before {
left: 100%;
}
.card-premium:hover {
border-color: var(--accent);
transform: translateY(-4px);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6),
0 0 0 1px rgba(25, 163, 217, 0.1),
var(--glow-accent);
}
/* ============================================
BUTTON ENHANCEMENTS
============================================ */
.btn-glow {
position: relative;
overflow: hidden;
}
.btn-glow::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
transform: translate(-50%, -50%);
transition: width 0.6s, height 0.6s;
}
.btn-glow:active::after {
width: 300px;
height: 300px;
}
.btn-icon-shift {
transition: all var(--duration-normal) var(--ease-out);
}
.btn-icon-shift:hover svg {
transform: translateX(4px);
transition: transform var(--duration-normal) var(--ease-spring);
}
/* ============================================
NAVIGATION ENHANCEMENTS
============================================ */
.nav-item-enhanced {
position: relative;
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
border-radius: var(--radius);
transition: all var(--duration-normal) var(--ease-out);
cursor: pointer;
}
.nav-item-enhanced::after {
content: '';
position: absolute;
right: var(--space-3);
width: 0;
height: 2px;
background: var(--accent);
transition: width var(--duration-normal) var(--ease-spring);
}
.nav-item-enhanced:hover::after {
width: 20px;
}
.nav-item-enhanced.active {
background: var(--accent-subtle);
color: var(--accent);
}
.nav-item-enhanced.active::before {
content: '';
position: absolute;
left: 0;
top: 20%;
height: 60%;
width: 3px;
background: linear-gradient(180deg, var(--accent), var(--accent-hover));
border-radius: 0 4px 4px 0;
box-shadow: 0 0 10px var(--accent);
}
/* ============================================
DATA VISUALIZATION
============================================ */
.stat-card-enhanced {
position: relative;
background: var(--surface-1);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: var(--space-5);
overflow: hidden;
transition: all var(--duration-normal) var(--ease-out);
}
.stat-card-enhanced::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, var(--accent), var(--accent-hover));
transform: scaleX(0);
transform-origin: left;
transition: transform var(--duration-normal) var(--ease-spring);
}
.stat-card-enhanced:hover::before {
transform: scaleX(1);
}
.stat-card-enhanced:hover {
border-color: var(--accent);
transform: translateY(-3px) scale(1.02);
box-shadow: var(--shadow-lg), var(--glow-accent);
}
.stat-value-animated {
font-family: var(--font-display);
font-size: 2.5rem;
font-weight: 800;
background: linear-gradient(135deg, var(--text-primary), var(--accent));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: gradient-shift 3s ease infinite;
background-size: 200% 200%;
}
/* ============================================
FORM ENHANCEMENTS
============================================ */
.input-enhanced {
position: relative;
width: 100%;
}
.input-enhanced input,
.input-enhanced textarea {
width: 100%;
background: var(--surface-1);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: var(--space-3) var(--space-4);
font-size: 0.875rem;
color: var(--text-primary);
transition: all var(--duration-normal) var(--ease-out);
}
.input-enhanced input:focus,
.input-enhanced textarea:focus {
border-color: var(--accent);
outline: none;
box-shadow: 0 0 0 3px var(--accent-muted), var(--glow-accent);
transform: translateY(-1px);
}
.input-enhanced::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 2px;
background: var(--accent);
transform: translateX(-50%);
transition: width var(--duration-normal) var(--ease-spring);
}
.input-enhanced:focus-within::after {
width: 100%;
}
/* ============================================
TABLE ENHANCEMENTS
============================================ */
.table-enhanced {
width: 100%;
border-collapse: separate;
border-spacing: 0;
}
.table-enhanced thead tr {
background: var(--bg-elevated);
}
.table-enhanced thead th {
padding: var(--space-4);
text-align: left;
font-size: 0.75rem;
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
border-bottom: 2px solid var(--border-strong);
position: relative;
}
.table-enhanced thead th::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background: var(--accent);
transition: width var(--duration-normal) var(--ease-out);
}
.table-enhanced thead th:hover::after {
width: 100%;
}
.table-enhanced tbody tr {
transition: all var(--duration-fast) var(--ease-out);
position: relative;
}
.table-enhanced tbody tr::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 0;
background: var(--accent);
transition: width var(--duration-fast) var(--ease-spring);
}
.table-enhanced tbody tr:hover::before {
width: 3px;
}
.table-enhanced tbody tr:hover {
background: var(--surface-2);
transform: translateX(3px);
}
.table-enhanced tbody td {
padding: var(--space-4);
border-bottom: 1px solid var(--border-subtle);
}
/* ============================================
BADGE ENHANCEMENTS
============================================ */
.badge-animated {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 0.375rem 0.75rem;
border-radius: var(--radius);
font-size: 0.75rem;
font-weight: 600;
position: relative;
overflow: hidden;
}
.badge-animated::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.2),
transparent
);
animation: shimmer 2s infinite;
}
.badge-pulse {
animation: pulse-glow 2s ease-in-out infinite;
}
/* ============================================
LOADING STATES
============================================ */
.loading-dots {
display: inline-flex;
gap: 4px;
}
.loading-dots span {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--accent);
animation: bounce 1.4s infinite ease-in-out both;
}
.loading-dots span:nth-child(1) {
animation-delay: -0.32s;
}
.loading-dots span:nth-child(2) {
animation-delay: -0.16s;
}
@keyframes bounce {
0%, 80%, 100% {
transform: scale(0);
opacity: 0.5;
}
40% {
transform: scale(1);
opacity: 1;
}
}
/* ============================================
UTILITY CLASSES
============================================ */
.animate-float {
animation: float 3s ease-in-out infinite;
}
.animate-pulse-glow {
animation: pulse-glow 2s ease-in-out infinite;
}
.animate-slide-in-right {
animation: slide-in-right var(--duration-normal) var(--ease-out);
}
.animate-bounce-in {
animation: bounce-in 0.5s var(--ease-spring);
}
.animate-gradient-shift {
animation: gradient-shift 3s ease infinite;
background-size: 200% 200%;
}
.backdrop-blur-strong {
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
.text-shadow-glow {
text-shadow: 0 0 20px var(--accent-glow);
}
.border-glow {
box-shadow: 0 0 0 1px var(--accent), var(--glow-accent);
}
/* ============================================
RESPONSIVE UTILITIES
============================================ */
@media (max-width: 768px) {
.card-premium:hover {
transform: translateY(-2px);
}
.stat-card-enhanced:hover {
transform: translateY(-2px) scale(1.01);
}
.table-enhanced tbody tr:hover {
transform: translateX(0);
}
}
/* ============================================
ACCESSIBILITY ENHANCEMENTS
============================================ */
@media (prefers-reduced-motion: reduce) {
.card-premium::before,
.btn-glow::after,
.nav-item-enhanced::after,
.stat-card-enhanced::before,
.input-enhanced::after,
.table-enhanced thead th::after,
.table-enhanced tbody tr::before,
.badge-animated::before {
transition: none;
animation: none;
}
.animate-float,
.animate-pulse-glow,
.animate-slide-in-right,
.animate-bounce-in,
.animate-gradient-shift {
animation: none;
}
}
/* High contrast mode support */
@media (prefers-contrast: high) {
.card-premium,
.stat-card-enhanced,
.nav-item-enhanced {
border-width: 2px;
}
.btn-primary {
border: 2px solid var(--accent);
}
}
-495
View File
@@ -1,495 +0,0 @@
/**
* PRIMORA LOGIN PAGE STYLES
* Clean, responsive authentication experience
*/
/* ============================================
LOGIN CONTAINER & BACKGROUND
============================================ */
.login-container {
position: fixed;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
background: var(--bg-main);
overflow: hidden;
}
.login-background-glow {
display: none;
}
/* ============================================
LOGIN CARD
============================================ */
.login-card-wrapper {
width: 100%;
max-width: 420px;
z-index: 1;
}
.login-card {
background: var(--surface-1);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 2rem;
box-shadow: var(--shadow-md);
}
@media (max-width: 640px) {
.login-card {
padding: 1.5rem;
}
}
@media (max-height: 650px) {
.login-card {
padding: 1.25rem;
}
}
/* ============================================
LOGIN HEADER
============================================ */
.login-header {
text-align: center;
margin-bottom: 1.5rem;
}
@media (max-height: 650px) {
.login-header {
margin-bottom: 1rem;
}
}
.login-logo-wrapper {
display: flex;
justify-content: center;
margin-bottom: 1rem;
}
@media (max-height: 650px) {
.login-logo-wrapper {
margin-bottom: 0.75rem;
}
}
.login-logo {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius);
background: var(--accent);
box-shadow: 0 4px 12px rgba(25, 163, 217, 0.25);
}
@media (max-height: 650px) {
.login-logo {
width: 40px;
height: 40px;
}
}
.login-logo-text {
font-family: var(--font-display);
font-size: 1.5rem;
font-weight: 700;
color: white;
}
@media (max-height: 650px) {
.login-logo-text {
font-size: 1.25rem;
}
}
.login-logo-glow {
display: none;
}
.login-title {
font-family: var(--font-display);
font-size: 1.5rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 0.375rem;
letter-spacing: -0.02em;
}
@media (max-width: 640px) {
.login-title {
font-size: 1.375rem;
}
}
@media (max-height: 650px) {
.login-title {
font-size: 1.25rem;
margin-bottom: 0.25rem;
}
}
.login-subtitle {
font-size: 0.875rem;
color: var(--text-secondary);
line-height: 1.4;
}
@media (max-height: 650px) {
.login-subtitle {
font-size: 0.8125rem;
}
}
/* ============================================
LOGIN FORM
============================================ */
.login-form {
position: relative;
}
/* Mode Toggle */
.login-mode-toggle {
position: relative;
display: flex;
gap: 0.25rem;
padding: 0.25rem;
background: var(--bg-elevated);
border-radius: var(--radius);
margin-bottom: 1.25rem;
border: 1px solid var(--border);
}
@media (max-height: 650px) {
.login-mode-toggle {
margin-bottom: 1rem;
}
}
.login-mode-btn {
flex: 1;
position: relative;
z-index: 2;
padding: 0.5rem 0.75rem;
font-size: 0.875rem;
font-weight: 500;
color: var(--text-secondary);
background: transparent;
border: none;
border-radius: calc(var(--radius) - 2px);
cursor: pointer;
transition: color var(--duration-fast) var(--ease-out);
outline: none;
}
.login-mode-btn:hover {
color: var(--text-primary);
}
.login-mode-btn-active {
color: white;
}
.login-mode-indicator {
position: absolute;
top: 0.25rem;
left: 0.25rem;
width: calc(50% - 0.375rem);
height: calc(100% - 0.5rem);
background: var(--accent);
border-radius: calc(var(--radius) - 2px);
transition: transform var(--duration-normal) var(--ease-out);
box-shadow: 0 2px 4px rgba(25, 163, 217, 0.3);
z-index: 1;
}
.login-mode-indicator-right {
transform: translateX(calc(100% + 0.25rem));
}
/* Input Groups */
.login-inputs {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-bottom: 1rem;
}
@media (max-height: 650px) {
.login-inputs {
gap: 0.625rem;
margin-bottom: 0.875rem;
}
}
.login-input-group {
position: relative;
}
.login-input {
width: 100%;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 0.625rem 0.875rem;
font-size: 0.875rem;
color: var(--text-primary);
transition: all var(--duration-fast) var(--ease-out);
outline: none;
}
@media (max-height: 650px) {
.login-input {
padding: 0.5rem 0.75rem;
font-size: 0.8125rem;
}
}
.login-input::placeholder {
color: var(--text-muted);
}
.login-input:hover {
border-color: var(--border-hover);
}
.login-input:focus {
border-color: var(--accent);
background: var(--surface-1);
box-shadow: 0 0 0 3px var(--accent-muted);
}
/* Submit Button */
.login-submit-btn {
width: 100%;
padding: 0.75rem 1.25rem;
font-size: 0.9375rem;
font-weight: 600;
background: var(--accent);
color: white;
border: none;
border-radius: var(--radius);
cursor: pointer;
transition: all var(--duration-fast) var(--ease-out);
box-shadow: 0 2px 8px rgba(25, 163, 217, 0.25);
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
@media (max-height: 650px) {
.login-submit-btn {
padding: 0.625rem 1rem;
font-size: 0.875rem;
}
}
.login-submit-btn:hover:not(:disabled) {
background: var(--accent-hover);
box-shadow: 0 4px 12px rgba(25, 163, 217, 0.35);
}
.login-submit-btn:active:not(:disabled) {
transform: scale(0.98);
}
.login-submit-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
/* Divider */
.login-divider {
display: flex;
align-items: center;
gap: 0.75rem;
margin: 1.25rem 0 1rem;
}
@media (max-height: 650px) {
.login-divider {
margin: 1rem 0 0.875rem;
}
}
.login-divider-line {
flex: 1;
height: 1px;
background: var(--border);
}
.login-divider-text {
font-size: 0.75rem;
color: var(--text-muted);
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 500;
}
/* Social Buttons */
.login-social-buttons {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.625rem;
margin-bottom: 1rem;
}
@media (max-height: 650px) {
.login-social-buttons {
gap: 0.5rem;
margin-bottom: 0.875rem;
}
}
.login-social-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.625rem 0.875rem;
font-size: 0.875rem;
font-weight: 500;
background: var(--bg-elevated);
color: var(--text-primary);
border: 1px solid var(--border);
border-radius: var(--radius);
cursor: pointer;
transition: all var(--duration-fast) var(--ease-out);
}
@media (max-height: 650px) {
.login-social-btn {
padding: 0.5rem 0.75rem;
font-size: 0.8125rem;
}
}
.login-social-btn svg {
width: 1.125rem;
height: 1.125rem;
flex-shrink: 0;
}
@media (max-height: 650px) {
.login-social-btn svg {
width: 1rem;
height: 1rem;
}
}
.login-social-btn:hover:not(:disabled) {
background: var(--surface-1);
border-color: var(--border-hover);
}
.login-social-btn:active:not(:disabled) {
transform: scale(0.98);
}
.login-social-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
@media (max-width: 640px) {
.login-social-buttons {
grid-template-columns: 1fr;
}
}
/* Message */
.login-message {
margin-top: 0.875rem;
}
@media (max-height: 650px) {
.login-message {
margin-top: 0.75rem;
}
}
/* ============================================
LOGIN FOOTER
============================================ */
.login-footer {
margin-top: 1.25rem;
padding-top: 1rem;
border-top: 1px solid var(--border-subtle);
text-align: center;
}
@media (max-height: 650px) {
.login-footer {
margin-top: 1rem;
padding-top: 0.875rem;
}
}
.login-footer-text {
font-size: 0.8125rem;
color: var(--text-secondary);
}
.login-footer-link {
color: var(--accent);
font-weight: 600;
background: none;
border: none;
cursor: pointer;
transition: color var(--duration-fast) var(--ease-out);
text-decoration: none;
padding: 0;
}
.login-footer-link:hover {
color: var(--accent-hover);
text-decoration: underline;
}
/* ============================================
ANIMATIONS
============================================ */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-10px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
+10 -180
View File
@@ -4,46 +4,31 @@ module.exports = {
darkMode: "class",
theme: {
extend: {
/* ============================================
COLORS — OKLCH Design System
============================================ */
colors: {
// Background layers
bg: {
main: "var(--bg-main)",
subtle: "var(--bg-subtle)",
elevated: "var(--bg-elevated)",
},
// Surface layers
bg: "var(--bg)",
panel: "var(--bg-panel)",
surface: {
1: "var(--surface-1)",
DEFAULT: "var(--surface)",
2: "var(--surface-2)",
3: "var(--surface-3)",
},
// Border colors
border: {
DEFAULT: "var(--border)",
subtle: "var(--border-subtle)",
strong: "var(--border-strong)",
hover: "var(--border-hover)",
},
// Text colors
text: {
primary: "var(--text-primary)",
secondary: "var(--text-secondary)",
muted: "var(--text-muted)",
faint: "var(--text-faint)",
1: "var(--text-1)",
2: "var(--text-2)",
3: "var(--text-3)",
},
// Accent — refined cyan
accent: {
DEFAULT: "var(--accent)",
hover: "var(--accent-hover)",
active: "var(--accent-active)",
fg: "var(--accent-fg)",
muted: "var(--accent-muted)",
subtle: "var(--accent-subtle)",
glow: "var(--accent-glow)",
border: "var(--accent-border)",
},
// Status colors — semantic
success: {
DEFAULT: "var(--success)",
muted: "var(--success-muted)",
@@ -61,178 +46,23 @@ module.exports = {
muted: "var(--info-muted)",
},
},
/* ============================================
GEOMETRY — Radii & Shadows
============================================ */
borderRadius: {
sm: "var(--radius-sm)",
DEFAULT: "var(--radius)",
lg: "var(--radius-lg)",
xl: "var(--radius-xl)",
full: "var(--radius-full)",
},
boxShadow: {
sm: "var(--shadow-sm)",
DEFAULT: "var(--shadow-md)",
lg: "var(--shadow-lg)",
elevated: "var(--shadow-elevated)",
inner: "var(--shadow-inner)",
glow: "var(--glow-accent)",
"glow-success": "var(--glow-success)",
"glow-error": "var(--glow-error)",
overlay: "var(--shadow-overlay)",
},
/* ============================================
TYPOGRAPHY — Space Grotesk + Plus Jakarta Sans
============================================ */
fontFamily: {
sans: ["var(--font-sans)", { fontFeatureSettings: '"ss01", "ss02", "cv01"' }],
display: ["var(--font-display)"],
sans: ["var(--font-sans)"],
mono: ["var(--font-mono)"],
},
fontSize: {
// Fluid type scale
"2xs": ["var(--text-2xs)", { lineHeight: "1rem" }],
xs: ["var(--text-xs)", { lineHeight: "1.25rem" }],
sm: ["var(--text-sm)", { lineHeight: "1.5rem" }],
base: ["var(--text-base)", { lineHeight: "1.6" }],
lg: ["var(--text-lg)", { lineHeight: "1.6" }],
xl: ["var(--text-xl)", { lineHeight: "1.75rem" }],
"2xl": ["var(--text-2xl)", { lineHeight: "2rem" }],
"3xl": ["var(--text-3xl)", { lineHeight: "2.25rem" }],
"4xl": ["var(--text-4xl)", { lineHeight: "1.1" }],
},
letterSpacing: {
tighter: "-0.03em",
tight: "-0.02em",
normal: "-0.01em",
wide: "0.02em",
wider: "0.08em",
widest: "0.12em",
},
lineHeight: {
tighter: "1.1",
tight: "1.2",
snug: "1.4",
normal: "1.6",
relaxed: "1.8",
},
/* ============================================
SPACING — Rhythmic fluid scale
============================================ */
spacing: {
1: "var(--space-1)",
2: "var(--space-2)",
3: "var(--space-3)",
4: "var(--space-4)",
5: "var(--space-5)",
6: "var(--space-6)",
8: "var(--space-8)",
10: "var(--space-10)",
12: "var(--space-12)",
16: "var(--space-16)",
},
/* ============================================
ANIMATION — Purposeful motion
============================================ */
transitionDuration: {
instant: "var(--duration-instant)",
fast: "var(--duration-fast)",
normal: "var(--duration-normal)",
slow: "var(--duration-slow)",
slower: "var(--duration-slower)",
},
transitionTimingFunction: {
"ease-out": "var(--ease-out)",
"ease-out-expo": "var(--ease-out-expo)",
"ease-in-out": "var(--ease-in-out)",
spring: "var(--ease-spring)",
bounce: "var(--ease-bounce)",
},
animation: {
// Entrances
"fade-in": "fadeIn var(--duration-normal) var(--ease-out) forwards",
"slide-up": "slideUp var(--duration-normal) var(--ease-out) forwards",
"slide-in-left": "slideInLeft var(--duration-normal) var(--ease-out) forwards",
"slide-in-right": "slideInRight var(--duration-normal) var(--ease-out) forwards",
"scale-in": "scaleIn var(--duration-fast) var(--ease-spring) forwards",
// Continuous
pulse: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
spin: "spin 0.8s linear infinite",
"spin-slow": "spin 8s linear infinite",
shimmer: "shimmer 2s ease-in-out infinite",
},
keyframes: {
fadeIn: {
from: { opacity: "0" },
to: { opacity: "1" },
},
slideUp: {
from: { opacity: "0", transform: "translateY(12px)" },
to: { opacity: "1", transform: "translateY(0)" },
},
slideInLeft: {
from: { opacity: "0", transform: "translateX(-16px)" },
to: { opacity: "1", transform: "translateX(0)" },
},
slideInRight: {
from: { opacity: "0", transform: "translateX(16px)" },
to: { opacity: "1", transform: "translateX(0)" },
},
scaleIn: {
from: { opacity: "0", transform: "scale(0.96)" },
to: { opacity: "1", transform: "scale(1)" },
},
pulse: {
"0%, 100%": { opacity: "1" },
"50%": { opacity: "0.5" },
},
spin: {
to: { transform: "rotate(360deg)" },
},
shimmer: {
"0%": { backgroundPosition: "-1000px 0" },
"100%": { backgroundPosition: "1000px 0" },
},
},
/* ============================================
Z-INDEX — Purposeful scale
============================================ */
zIndex: {
base: "0",
dropdown: "100",
sticky: "200",
fixed: "300",
overlay: "400",
modal: "500",
popover: "600",
tooltip: "700",
},
/* ============================================
SCREENS — Responsive breakpoints
============================================ */
screens: {
xs: "480px",
sm: "640px",
md: "768px",
lg: "1024px",
xl: "1280px",
"2xl": "1536px",
},
},
},
plugins: [],
};