refactor: focus admin dashboard layout
This commit is contained in:
@@ -1,9 +1,15 @@
|
||||
import {
|
||||
Activity,
|
||||
ChevronRight,
|
||||
Clock3,
|
||||
Database,
|
||||
FileText,
|
||||
Folder,
|
||||
FolderGit2,
|
||||
FolderOpen,
|
||||
LogIn,
|
||||
LogOut,
|
||||
PanelLeftClose,
|
||||
PanelLeftOpen,
|
||||
RefreshCw,
|
||||
Shield,
|
||||
UserPlus,
|
||||
@@ -12,6 +18,7 @@ import {
|
||||
import { useEffect, useState } from "preact/hooks";
|
||||
|
||||
type Role = "admin" | "editor" | "viewer";
|
||||
type View = "workspace" | "users";
|
||||
|
||||
type User = {
|
||||
id: string;
|
||||
@@ -47,32 +54,66 @@ type Session = {
|
||||
user: User;
|
||||
};
|
||||
|
||||
type BrowserItem = {
|
||||
type: "folder" | "document";
|
||||
name: string;
|
||||
path: string;
|
||||
document?: DocumentRecord;
|
||||
indexDocument?: DocumentRecord;
|
||||
};
|
||||
|
||||
type BrowserColumn = {
|
||||
title: string;
|
||||
prefix: string;
|
||||
items: BrowserItem[];
|
||||
};
|
||||
|
||||
const sessionKey = "mdhub.admin.session";
|
||||
|
||||
export function App() {
|
||||
const [session, setSession] = useState<Session | null>(() => readSession());
|
||||
const [activeView, setActiveView] = useState<View>("workspace");
|
||||
const [sidebarOpen, setSidebarOpen] = useState(true);
|
||||
const [users, setUsers] = useState<User[]>([]);
|
||||
const [workspace, setWorkspace] = useState<WorkspaceResponse | null>(null);
|
||||
const [status, setStatus] = useState("Idle");
|
||||
const [syncing, setSyncing] = useState(false);
|
||||
const [lastSyncedAt, setLastSyncedAt] = useState("");
|
||||
const [activePath, setActivePath] = useState("");
|
||||
const [selectedUserId, setSelectedUserId] = useState("");
|
||||
|
||||
async function refresh() {
|
||||
if (!session) {
|
||||
return;
|
||||
}
|
||||
setStatus("Refreshing");
|
||||
const [usersResponse, workspaceResponse] = await Promise.all([
|
||||
api<{ users: User[] }>("/api/admin/users"),
|
||||
api<WorkspaceResponse>("/api/admin/workspace"),
|
||||
]);
|
||||
setUsers(usersResponse.users);
|
||||
setWorkspace(workspaceResponse);
|
||||
setStatus("Current");
|
||||
setLastSyncedAt(new Date().toISOString());
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
void refresh();
|
||||
}, [session?.user.email]);
|
||||
|
||||
useEffect(() => {
|
||||
const documents = workspace?.documents ?? [];
|
||||
if (
|
||||
documents.length > 0 &&
|
||||
!isKnownDocumentLocation(documents, activePath)
|
||||
) {
|
||||
setActivePath(documents[0].path);
|
||||
}
|
||||
}, [workspace?.documents, activePath]);
|
||||
|
||||
useEffect(() => {
|
||||
if (users.length > 0 && !users.some((user) => user.id === selectedUserId)) {
|
||||
setSelectedUserId(users[0].id);
|
||||
}
|
||||
}, [users, selectedUserId]);
|
||||
|
||||
async function handleLogin(email: string, displayName: string) {
|
||||
const response = await api<{ user: User }>("/api/admin/login", {
|
||||
method: "POST",
|
||||
@@ -88,17 +129,22 @@ export function App() {
|
||||
displayName: string;
|
||||
role: Role;
|
||||
}) {
|
||||
await api<{ user: User }>("/api/admin/users", {
|
||||
const response = await api<{ user: User }>("/api/admin/users", {
|
||||
method: "POST",
|
||||
body: JSON.stringify(input),
|
||||
});
|
||||
await refresh();
|
||||
setSelectedUserId(response.user.id);
|
||||
}
|
||||
|
||||
async function handleSync() {
|
||||
setStatus("Syncing");
|
||||
await api("/api/admin/workspace/sync", { method: "POST" });
|
||||
await refresh();
|
||||
setSyncing(true);
|
||||
try {
|
||||
await api("/api/admin/workspace/sync", { method: "POST" });
|
||||
await refresh();
|
||||
} finally {
|
||||
setSyncing(false);
|
||||
}
|
||||
}
|
||||
|
||||
function logout() {
|
||||
@@ -106,56 +152,122 @@ export function App() {
|
||||
setSession(null);
|
||||
setUsers([]);
|
||||
setWorkspace(null);
|
||||
setStatus("Idle");
|
||||
setActivePath("");
|
||||
setSelectedUserId("");
|
||||
}
|
||||
|
||||
if (!session) {
|
||||
return <LoginScreen onLogin={handleLogin} />;
|
||||
}
|
||||
|
||||
const selectedDocument = selectDocument(
|
||||
workspace?.documents ?? [],
|
||||
activePath,
|
||||
);
|
||||
const selectedUser =
|
||||
users.find((user) => user.id === selectedUserId) ?? users[0];
|
||||
|
||||
return (
|
||||
<main class="admin-shell">
|
||||
<main class={`admin-shell ${sidebarOpen ? "" : "is-collapsed"}`}>
|
||||
<aside class="admin-sidebar">
|
||||
<a class="brand" href="/docs">
|
||||
<Shield size={20} />
|
||||
<span>MD Hub Secure</span>
|
||||
</a>
|
||||
<nav>
|
||||
<a class="is-active" href="#workspace">
|
||||
<div class="sidebar-header">
|
||||
<a class="brand" href="/docs" title="Open public docs">
|
||||
<Shield size={18} />
|
||||
<span>MD Hub</span>
|
||||
</a>
|
||||
<button
|
||||
class="icon-button"
|
||||
type="button"
|
||||
onClick={() => setSidebarOpen((open) => !open)}
|
||||
aria-label={sidebarOpen ? "Collapse sidebar" : "Expand sidebar"}
|
||||
>
|
||||
{sidebarOpen ? (
|
||||
<PanelLeftClose size={17} />
|
||||
) : (
|
||||
<PanelLeftOpen size={17} />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<nav class="nav-list" aria-label="Admin sections">
|
||||
<button
|
||||
class={activeView === "workspace" ? "is-active" : ""}
|
||||
type="button"
|
||||
onClick={() => setActiveView("workspace")}
|
||||
title="Workspace"
|
||||
>
|
||||
<FolderGit2 size={17} />
|
||||
<span>Workspace</span>
|
||||
</a>
|
||||
<a href="#users">
|
||||
</button>
|
||||
<button
|
||||
class={activeView === "users" ? "is-active" : ""}
|
||||
type="button"
|
||||
onClick={() => setActiveView("users")}
|
||||
title="Users"
|
||||
>
|
||||
<Users size={17} />
|
||||
<span>Users</span>
|
||||
</a>
|
||||
</button>
|
||||
</nav>
|
||||
<button class="ghost-button" type="button" onClick={logout}>
|
||||
|
||||
<button
|
||||
class="nav-button"
|
||||
type="button"
|
||||
onClick={logout}
|
||||
title="Sign out"
|
||||
>
|
||||
<LogOut size={16} />
|
||||
<span>Sign out</span>
|
||||
</button>
|
||||
</aside>
|
||||
|
||||
<section class="admin-main">
|
||||
<header class="admin-topbar">
|
||||
<header class="compact-topbar">
|
||||
<div>
|
||||
<p class="eyebrow">Admin</p>
|
||||
<h1>Workspace control</h1>
|
||||
<span class="section-label">{activeView}</span>
|
||||
<strong>
|
||||
{activeView === "workspace" ? "Documents" : "Accounts"}
|
||||
</strong>
|
||||
</div>
|
||||
<div class="topbar-actions">
|
||||
<span class="status-pill">
|
||||
<Activity size={14} />
|
||||
{status}
|
||||
{activeView === "workspace" && (
|
||||
<button
|
||||
type="button"
|
||||
class="primary-button sync-button"
|
||||
onClick={handleSync}
|
||||
disabled={syncing}
|
||||
aria-label="Sync workspace"
|
||||
>
|
||||
<RefreshCw size={15} />
|
||||
<span>Sync</span>
|
||||
</button>
|
||||
)}
|
||||
<span class="sync-label">
|
||||
<Clock3 size={14} />
|
||||
{syncing
|
||||
? "Syncing"
|
||||
: lastSyncedAt
|
||||
? `Synced ${formatTime(lastSyncedAt)}`
|
||||
: "Not synced"}
|
||||
</span>
|
||||
<button type="button" class="primary-button" onClick={handleSync}>
|
||||
<RefreshCw size={16} />
|
||||
Sync
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<WorkspacePanel data={workspace} />
|
||||
<UsersPanel users={users} onCreateUser={handleCreateUser} />
|
||||
{activeView === "workspace" ? (
|
||||
<WorkspaceView
|
||||
data={workspace}
|
||||
activePath={activePath}
|
||||
selectedDocument={selectedDocument}
|
||||
onSelectPath={setActivePath}
|
||||
/>
|
||||
) : (
|
||||
<UsersView
|
||||
users={users}
|
||||
selectedUser={selectedUser}
|
||||
onSelectUser={setSelectedUserId}
|
||||
onCreateUser={handleCreateUser}
|
||||
/>
|
||||
)}
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
@@ -182,7 +294,7 @@ function LoginScreen(props: {
|
||||
<main class="login-shell">
|
||||
<form class="login-panel" onSubmit={submit}>
|
||||
<div class="login-mark">
|
||||
<Shield size={22} />
|
||||
<Shield size={20} />
|
||||
</div>
|
||||
<h1>Admin login</h1>
|
||||
<label>
|
||||
@@ -205,7 +317,7 @@ function LoginScreen(props: {
|
||||
</label>
|
||||
{error && <p class="form-error">{error}</p>}
|
||||
<button type="submit" class="primary-button">
|
||||
<LogIn size={16} />
|
||||
<LogIn size={15} />
|
||||
Sign in
|
||||
</button>
|
||||
</form>
|
||||
@@ -213,47 +325,170 @@ function LoginScreen(props: {
|
||||
);
|
||||
}
|
||||
|
||||
function WorkspacePanel(props: { data: WorkspaceResponse | null }) {
|
||||
const workspace = props.data?.workspace;
|
||||
function WorkspaceView(props: {
|
||||
data: WorkspaceResponse | null;
|
||||
activePath: string;
|
||||
selectedDocument?: DocumentRecord;
|
||||
onSelectPath: (path: string) => void;
|
||||
}) {
|
||||
const documents = props.data?.documents ?? [];
|
||||
const columns = buildDocumentColumns(documents, props.activePath);
|
||||
|
||||
return (
|
||||
<section id="workspace" class="panel">
|
||||
<div class="panel-header">
|
||||
<div>
|
||||
<p class="eyebrow">Workspace</p>
|
||||
<h2>Storage and documents</h2>
|
||||
</div>
|
||||
<Database size={19} />
|
||||
</div>
|
||||
|
||||
<div class="metric-grid">
|
||||
<Metric label="Documents" value={workspace?.documentCount ?? 0} />
|
||||
<Metric label="Users" value={workspace?.userCount ?? 0} />
|
||||
<Metric label="Database" value={workspace?.databasePath ?? "Loading"} />
|
||||
<Metric label="Content" value={workspace?.sourceDir ?? "Loading"} />
|
||||
</div>
|
||||
|
||||
<div class="document-table">
|
||||
<div class="table-row table-row--head">
|
||||
<span>Document</span>
|
||||
<span>Hash</span>
|
||||
<span>Updated</span>
|
||||
</div>
|
||||
{(props.data?.documents ?? []).map((document) => (
|
||||
<div class="table-row" key={document.path}>
|
||||
<a href={`/docs/${document.path.replace(/\.md$/, "")}`}>
|
||||
{document.title}
|
||||
</a>
|
||||
<code>{document.currentHash.slice(0, 12)}</code>
|
||||
<span>{formatDate(document.updatedAt)}</span>
|
||||
<div class="workspace-grid">
|
||||
<section class="column-browser" aria-label="Workspace files">
|
||||
{columns.map((column) => (
|
||||
<div class="browser-column" key={column.prefix || "root"}>
|
||||
<header>{column.title}</header>
|
||||
<div class="item-list">
|
||||
{column.items.map((item) => (
|
||||
<button
|
||||
class={
|
||||
isActiveItem(item, props.activePath)
|
||||
? "list-item is-active"
|
||||
: "list-item"
|
||||
}
|
||||
type="button"
|
||||
key={`${item.type}:${item.path}`}
|
||||
onClick={() =>
|
||||
props.onSelectPath(item.indexDocument?.path ?? item.path)
|
||||
}
|
||||
>
|
||||
{item.type === "folder" ? (
|
||||
isActiveItem(item, props.activePath) ? (
|
||||
<FolderOpen size={15} />
|
||||
) : (
|
||||
<Folder size={15} />
|
||||
)
|
||||
) : (
|
||||
<FileText size={15} />
|
||||
)}
|
||||
<span>{item.name}</span>
|
||||
{item.type === "folder" && <ChevronRight size={14} />}
|
||||
</button>
|
||||
))}
|
||||
{column.items.length === 0 && (
|
||||
<p class="empty-state">No documents</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<WorkspaceDetails
|
||||
workspace={props.data?.workspace}
|
||||
document={props.selectedDocument}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function UsersPanel(props: {
|
||||
function WorkspaceDetails(props: {
|
||||
workspace?: Workspace;
|
||||
document?: DocumentRecord;
|
||||
}) {
|
||||
return (
|
||||
<aside class="detail-panel">
|
||||
<header class="detail-header">
|
||||
<Database size={17} />
|
||||
<span>Details</span>
|
||||
</header>
|
||||
|
||||
{props.document ? (
|
||||
<>
|
||||
<h2>{props.document.title}</h2>
|
||||
<a class="open-link" href={documentHref(props.document.path)}>
|
||||
Open document
|
||||
</a>
|
||||
<dl class="detail-list">
|
||||
<div>
|
||||
<dt>File</dt>
|
||||
<dd>{props.document.path}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Hash</dt>
|
||||
<dd>
|
||||
<code>{props.document.currentHash.slice(0, 12)}</code>
|
||||
</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Updated</dt>
|
||||
<dd>{formatDate(props.document.updatedAt)}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</>
|
||||
) : (
|
||||
<p class="empty-state">Select a document.</p>
|
||||
)}
|
||||
|
||||
{props.workspace && (
|
||||
<dl class="detail-list compact">
|
||||
<div>
|
||||
<dt>Documents</dt>
|
||||
<dd>{props.workspace.documentCount}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Content</dt>
|
||||
<dd>{props.workspace.sourceDir}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Storage</dt>
|
||||
<dd>{props.workspace.storeDir}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Database</dt>
|
||||
<dd>{props.workspace.databasePath}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
)}
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
|
||||
function UsersView(props: {
|
||||
users: User[];
|
||||
selectedUser?: User;
|
||||
onSelectUser: (id: string) => void;
|
||||
onCreateUser: (input: {
|
||||
email: string;
|
||||
displayName: string;
|
||||
role: Role;
|
||||
}) => Promise<void>;
|
||||
}) {
|
||||
return (
|
||||
<div class="workspace-grid">
|
||||
<section class="browser-column user-column" aria-label="Users">
|
||||
<header>Users</header>
|
||||
<div class="item-list">
|
||||
{props.users.map((user) => (
|
||||
<button
|
||||
class={
|
||||
user.id === props.selectedUser?.id
|
||||
? "list-item is-active"
|
||||
: "list-item"
|
||||
}
|
||||
type="button"
|
||||
key={user.id}
|
||||
onClick={() => props.onSelectUser(user.id)}
|
||||
>
|
||||
<Users size={15} />
|
||||
<span>{user.displayName}</span>
|
||||
<small>{user.role}</small>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<UserDetails
|
||||
selectedUser={props.selectedUser}
|
||||
onCreateUser={props.onCreateUser}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function UserDetails(props: {
|
||||
selectedUser?: User;
|
||||
onCreateUser: (input: {
|
||||
email: string;
|
||||
displayName: string;
|
||||
@@ -273,16 +508,13 @@ function UsersPanel(props: {
|
||||
}
|
||||
|
||||
return (
|
||||
<section id="users" class="panel">
|
||||
<div class="panel-header">
|
||||
<div>
|
||||
<p class="eyebrow">Users</p>
|
||||
<h2>Accounts and roles</h2>
|
||||
</div>
|
||||
<Users size={19} />
|
||||
</div>
|
||||
<aside class="detail-panel">
|
||||
<header class="detail-header">
|
||||
<UserPlus size={17} />
|
||||
<span>Add user</span>
|
||||
</header>
|
||||
|
||||
<form class="user-form" onSubmit={submit}>
|
||||
<form class="stack-form" onSubmit={submit}>
|
||||
<input
|
||||
type="email"
|
||||
placeholder="email@example.com"
|
||||
@@ -306,35 +538,148 @@ function UsersPanel(props: {
|
||||
<option value="admin">Admin</option>
|
||||
</select>
|
||||
<button type="submit" class="primary-button">
|
||||
<UserPlus size={16} />
|
||||
<UserPlus size={15} />
|
||||
Add
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div class="user-list">
|
||||
{props.users.map((user) => (
|
||||
<article class="user-row" key={user.id}>
|
||||
{props.selectedUser && (
|
||||
<>
|
||||
<h2>{props.selectedUser.displayName}</h2>
|
||||
<dl class="detail-list">
|
||||
<div>
|
||||
<strong>{user.displayName}</strong>
|
||||
<span>{user.email}</span>
|
||||
<dt>Email</dt>
|
||||
<dd>{props.selectedUser.email}</dd>
|
||||
</div>
|
||||
<span class="role-pill">{user.role}</span>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
<div>
|
||||
<dt>Role</dt>
|
||||
<dd>{props.selectedUser.role}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Created</dt>
|
||||
<dd>{formatDate(props.selectedUser.createdAt)}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</>
|
||||
)}
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
|
||||
function Metric(props: { label: string; value: string | number }) {
|
||||
function buildDocumentColumns(
|
||||
documents: DocumentRecord[],
|
||||
activePath: string,
|
||||
): BrowserColumn[] {
|
||||
const activeSegments = activePath.split("/").filter(Boolean);
|
||||
const prefixes = [""];
|
||||
const maxFolderDepth = activePath.endsWith(".md")
|
||||
? activeSegments.length - 1
|
||||
: activeSegments.length;
|
||||
|
||||
for (let index = 0; index < maxFolderDepth; index += 1) {
|
||||
prefixes.push(activeSegments.slice(0, index + 1).join("/"));
|
||||
}
|
||||
|
||||
return prefixes.map((prefix) => ({
|
||||
title: prefix ? folderLabel(prefix) : "Documents",
|
||||
prefix,
|
||||
items: collectItems(documents, prefix),
|
||||
}));
|
||||
}
|
||||
|
||||
function collectItems(
|
||||
documents: DocumentRecord[],
|
||||
prefix: string,
|
||||
): BrowserItem[] {
|
||||
const items = new Map<string, BrowserItem>();
|
||||
const prefixWithSlash = prefix ? `${prefix}/` : "";
|
||||
|
||||
for (const document of documents) {
|
||||
if (!document.path.startsWith(prefixWithSlash)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
const remainder = document.path.slice(prefixWithSlash.length);
|
||||
if (!remainder || remainder === "index.md") {
|
||||
continue;
|
||||
}
|
||||
|
||||
const [nextSegment, ...rest] = remainder.split("/");
|
||||
if (rest.length > 0) {
|
||||
const folderPath = `${prefixWithSlash}${nextSegment}`;
|
||||
const indexDocument = documents.find(
|
||||
(candidate) => candidate.path === `${folderPath}/index.md`,
|
||||
);
|
||||
items.set(folderPath, {
|
||||
type: "folder",
|
||||
name: folderLabel(nextSegment),
|
||||
path: folderPath,
|
||||
indexDocument,
|
||||
});
|
||||
continue;
|
||||
}
|
||||
|
||||
items.set(document.path, {
|
||||
type: "document",
|
||||
name: document.title || fileLabel(document.path),
|
||||
path: document.path,
|
||||
document,
|
||||
});
|
||||
}
|
||||
|
||||
return [...items.values()].sort((left, right) => {
|
||||
if (left.type !== right.type) {
|
||||
return left.type === "folder" ? -1 : 1;
|
||||
}
|
||||
return left.name.localeCompare(right.name);
|
||||
});
|
||||
}
|
||||
|
||||
function selectDocument(documents: DocumentRecord[], activePath: string) {
|
||||
if (!activePath) {
|
||||
return documents[0];
|
||||
}
|
||||
return (
|
||||
<article class="metric">
|
||||
<span>{props.label}</span>
|
||||
<strong>{props.value}</strong>
|
||||
</article>
|
||||
documents.find((document) => document.path === activePath) ??
|
||||
documents.find((document) => document.path === `${activePath}/index.md`)
|
||||
);
|
||||
}
|
||||
|
||||
function isKnownDocumentLocation(documents: DocumentRecord[], path: string) {
|
||||
if (!path) {
|
||||
return false;
|
||||
}
|
||||
return documents.some(
|
||||
(document) =>
|
||||
document.path === path ||
|
||||
document.path === `${path}/index.md` ||
|
||||
document.path.startsWith(`${path}/`),
|
||||
);
|
||||
}
|
||||
|
||||
function isActiveItem(item: BrowserItem, activePath: string) {
|
||||
return (
|
||||
activePath === item.path ||
|
||||
activePath === item.indexDocument?.path ||
|
||||
activePath.startsWith(`${item.path}/`)
|
||||
);
|
||||
}
|
||||
|
||||
function documentHref(path: string) {
|
||||
return `/docs/${path.replace(/(^|\/)index\.md$/, "").replace(/\.md$/, "")}`;
|
||||
}
|
||||
|
||||
function folderLabel(path: string) {
|
||||
return fileLabel(path.split("/").filter(Boolean).at(-1) ?? path);
|
||||
}
|
||||
|
||||
function fileLabel(path: string) {
|
||||
return path
|
||||
.replace(/\.md$/, "")
|
||||
.replace(/[-_]/g, " ")
|
||||
.replace(/\b\w/g, (match) => match.toUpperCase());
|
||||
}
|
||||
|
||||
async function api<T = unknown>(path: string, init?: RequestInit): Promise<T> {
|
||||
const response = await fetch(path, {
|
||||
...init,
|
||||
@@ -368,3 +713,10 @@ function formatDate(value: string) {
|
||||
timeStyle: "short",
|
||||
}).format(new Date(value));
|
||||
}
|
||||
|
||||
function formatTime(value: string) {
|
||||
return new Intl.DateTimeFormat(undefined, {
|
||||
hour: "numeric",
|
||||
minute: "2-digit",
|
||||
}).format(new Date(value));
|
||||
}
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
:root {
|
||||
color-scheme: light;
|
||||
--bg: #f4f1ea;
|
||||
--surface: rgba(255, 255, 255, 0.78);
|
||||
--surface: rgba(255, 255, 255, 0.76);
|
||||
--surface-strong: #ffffff;
|
||||
--text: #202227;
|
||||
--muted: #5f6471;
|
||||
--muted: #626775;
|
||||
--accent: #1947e5;
|
||||
--accent-2: #0f8a6c;
|
||||
--accent-soft: rgba(25, 71, 229, 0.1);
|
||||
--border: rgba(32, 34, 39, 0.12);
|
||||
--shadow: 0 20px 60px rgba(25, 71, 229, 0.12);
|
||||
--shadow: 0 18px 54px rgba(25, 71, 229, 0.1);
|
||||
font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
|
||||
}
|
||||
|
||||
@@ -23,15 +23,15 @@ body {
|
||||
background:
|
||||
radial-gradient(
|
||||
circle at top left,
|
||||
rgba(25, 71, 229, 0.16),
|
||||
transparent 36%
|
||||
rgba(25, 71, 229, 0.12),
|
||||
transparent 34%
|
||||
),
|
||||
radial-gradient(
|
||||
circle at bottom right,
|
||||
rgba(15, 138, 108, 0.18),
|
||||
rgba(15, 138, 108, 0.14),
|
||||
transparent 30%
|
||||
),
|
||||
linear-gradient(180deg, #faf7f2 0%, var(--bg) 100%);
|
||||
linear-gradient(180deg, #fbf8f2 0%, var(--bg) 100%);
|
||||
}
|
||||
|
||||
button,
|
||||
@@ -44,6 +44,11 @@ button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
cursor: wait;
|
||||
opacity: 0.72;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--accent);
|
||||
}
|
||||
@@ -54,228 +59,341 @@ code {
|
||||
|
||||
.admin-shell {
|
||||
display: grid;
|
||||
grid-template-columns: 15rem minmax(0, 1fr);
|
||||
grid-template-columns: 11rem minmax(0, 1fr);
|
||||
min-height: 100vh;
|
||||
transition: grid-template-columns 160ms ease;
|
||||
}
|
||||
|
||||
.admin-shell.is-collapsed {
|
||||
grid-template-columns: 4rem minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.admin-sidebar {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
padding: 1.25rem;
|
||||
gap: 1rem;
|
||||
padding: 0.8rem;
|
||||
border-right: 1px solid var(--border);
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
backdrop-filter: blur(12px);
|
||||
background: rgba(255, 255, 255, 0.55);
|
||||
backdrop-filter: blur(14px);
|
||||
}
|
||||
|
||||
.sidebar-header,
|
||||
.compact-topbar,
|
||||
.topbar-actions,
|
||||
.detail-header,
|
||||
.brand,
|
||||
.admin-sidebar nav a,
|
||||
.ghost-button,
|
||||
.nav-list button,
|
||||
.nav-button,
|
||||
.icon-button,
|
||||
.primary-button,
|
||||
.status-pill {
|
||||
display: inline-flex;
|
||||
.sync-label,
|
||||
.list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
justify-content: space-between;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.brand {
|
||||
min-width: 0;
|
||||
gap: 0.5rem;
|
||||
color: var(--text);
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.admin-sidebar nav {
|
||||
display: grid;
|
||||
gap: 0.35rem;
|
||||
.brand span,
|
||||
.nav-list span,
|
||||
.nav-button span {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.admin-sidebar nav a,
|
||||
.ghost-button {
|
||||
min-height: 2.4rem;
|
||||
padding: 0.55rem 0.65rem;
|
||||
.icon-button,
|
||||
.nav-list button,
|
||||
.nav-button {
|
||||
border: 0;
|
||||
border-radius: 0.5rem;
|
||||
color: var(--text);
|
||||
background: transparent;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.admin-sidebar nav a.is-active,
|
||||
.admin-sidebar nav a:hover,
|
||||
.ghost-button:hover {
|
||||
.icon-button {
|
||||
justify-content: center;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
flex: 0 0 auto;
|
||||
border-radius: 0.45rem;
|
||||
}
|
||||
|
||||
.icon-button:hover,
|
||||
.nav-list button:hover,
|
||||
.nav-button:hover,
|
||||
.nav-list button.is-active {
|
||||
color: var(--accent);
|
||||
background: var(--accent-soft, rgba(25, 71, 229, 0.1));
|
||||
background: var(--accent-soft);
|
||||
}
|
||||
|
||||
.ghost-button {
|
||||
.nav-list {
|
||||
display: grid;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.nav-list button,
|
||||
.nav-button {
|
||||
min-width: 0;
|
||||
min-height: 2.25rem;
|
||||
gap: 0.55rem;
|
||||
padding: 0.45rem 0.55rem;
|
||||
border-radius: 0.5rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.nav-button {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.admin-shell.is-collapsed .brand span,
|
||||
.admin-shell.is-collapsed .nav-list span,
|
||||
.admin-shell.is-collapsed .nav-button span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.admin-shell.is-collapsed .sidebar-header,
|
||||
.admin-shell.is-collapsed .nav-list button,
|
||||
.admin-shell.is-collapsed .nav-button {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.admin-main {
|
||||
min-width: 0;
|
||||
padding: 1.5rem;
|
||||
padding: 0.85rem;
|
||||
}
|
||||
|
||||
.admin-topbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.compact-topbar {
|
||||
min-height: 3rem;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
margin-bottom: 0.8rem;
|
||||
}
|
||||
|
||||
.admin-topbar h1,
|
||||
.panel h2,
|
||||
.login-panel h1 {
|
||||
margin: 0;
|
||||
.compact-topbar > div:first-child {
|
||||
display: grid;
|
||||
gap: 0.1rem;
|
||||
}
|
||||
|
||||
.topbar-actions {
|
||||
display: flex;
|
||||
gap: 0.65rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin: 0 0 0.35rem;
|
||||
.section-label {
|
||||
color: var(--accent);
|
||||
font-family: ui-monospace, SFMono-Regular, monospace;
|
||||
font-size: 0.75rem;
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.status-pill,
|
||||
.role-pill {
|
||||
min-height: 2.2rem;
|
||||
padding: 0.35rem 0.6rem;
|
||||
.topbar-actions {
|
||||
gap: 0.55rem;
|
||||
}
|
||||
|
||||
.sync-label {
|
||||
gap: 0.4rem;
|
||||
min-height: 2.1rem;
|
||||
padding: 0.25rem 0.55rem;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 999px;
|
||||
color: var(--muted);
|
||||
background: var(--surface);
|
||||
background: rgba(255, 255, 255, 0.58);
|
||||
font-size: 0.92rem;
|
||||
}
|
||||
|
||||
.primary-button {
|
||||
min-height: 2.4rem;
|
||||
padding: 0.55rem 0.8rem;
|
||||
justify-content: center;
|
||||
gap: 0.45rem;
|
||||
min-height: 2.25rem;
|
||||
padding: 0.45rem 0.75rem;
|
||||
border: 0;
|
||||
border-radius: 0.5rem;
|
||||
color: white;
|
||||
background: var(--accent);
|
||||
}
|
||||
|
||||
.panel,
|
||||
.sync-button {
|
||||
width: 2.25rem;
|
||||
padding-inline: 0;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.sync-button span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.workspace-grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(12rem, 1fr) clamp(11.5rem, 20vw, 15rem);
|
||||
gap: 0.65rem;
|
||||
min-height: calc(100vh - 4.8rem);
|
||||
}
|
||||
|
||||
.column-browser {
|
||||
display: grid;
|
||||
grid-auto-columns: minmax(11rem, 1fr);
|
||||
grid-auto-flow: column;
|
||||
gap: 0.65rem;
|
||||
min-width: 0;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.browser-column,
|
||||
.detail-panel,
|
||||
.login-panel {
|
||||
margin-bottom: 1rem;
|
||||
padding: 1rem;
|
||||
min-width: 0;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 0.5rem;
|
||||
border-radius: 0.55rem;
|
||||
background: var(--surface);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.metric-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.metric {
|
||||
min-width: 0;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 0.5rem;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.metric span,
|
||||
.user-row span,
|
||||
.table-row span {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.metric strong {
|
||||
display: block;
|
||||
margin-top: 0.35rem;
|
||||
.browser-column,
|
||||
.detail-panel {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.document-table,
|
||||
.user-list {
|
||||
display: grid;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.table-row {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(11rem, 1fr) 8rem 10rem;
|
||||
gap: 0.75rem;
|
||||
align-items: center;
|
||||
min-height: 2.35rem;
|
||||
padding: 0.4rem 0.55rem;
|
||||
border-radius: 0.4rem;
|
||||
}
|
||||
|
||||
.table-row--head {
|
||||
.browser-column > header,
|
||||
.detail-header {
|
||||
min-height: 2.5rem;
|
||||
padding: 0.7rem 0.8rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
color: var(--muted);
|
||||
font-family: ui-monospace, SFMono-Regular, monospace;
|
||||
font-size: 0.76rem;
|
||||
font-size: 0.72rem;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.table-row:not(.table-row--head),
|
||||
.user-row {
|
||||
background: rgba(255, 255, 255, 0.48);
|
||||
.detail-header {
|
||||
gap: 0.45rem;
|
||||
}
|
||||
|
||||
.table-row > * {
|
||||
.item-list {
|
||||
display: grid;
|
||||
gap: 0.15rem;
|
||||
padding: 0.45rem;
|
||||
}
|
||||
|
||||
.list-item {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
gap: 0.45rem;
|
||||
min-height: 2.35rem;
|
||||
padding: 0.45rem 0.5rem;
|
||||
border: 0;
|
||||
border-radius: 0.42rem;
|
||||
color: var(--text);
|
||||
background: transparent;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.list-item:hover,
|
||||
.list-item.is-active {
|
||||
color: var(--accent);
|
||||
background: var(--accent-soft);
|
||||
}
|
||||
|
||||
.list-item span {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.user-form {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(10rem, 1fr) minmax(10rem, 1fr) 8rem auto;
|
||||
gap: 0.65rem;
|
||||
margin-bottom: 1rem;
|
||||
.list-item small {
|
||||
color: var(--muted);
|
||||
font-family: ui-monospace, SFMono-Regular, monospace;
|
||||
font-size: 0.72rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.user-form input,
|
||||
.user-form select,
|
||||
.user-column {
|
||||
min-height: 22rem;
|
||||
}
|
||||
|
||||
.detail-panel {
|
||||
padding-bottom: 0.9rem;
|
||||
}
|
||||
|
||||
.detail-panel h2 {
|
||||
margin: 0.85rem 0.85rem 0.35rem;
|
||||
font-size: 1.45rem;
|
||||
line-height: 1.05;
|
||||
}
|
||||
|
||||
.open-link {
|
||||
display: inline-flex;
|
||||
margin: 0 0.85rem 0.7rem;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.detail-list {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
margin: 0;
|
||||
padding: 0.85rem;
|
||||
}
|
||||
|
||||
.detail-list.compact {
|
||||
margin-top: 0.35rem;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.detail-list div {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.detail-list dt {
|
||||
margin-bottom: 0.16rem;
|
||||
color: var(--muted);
|
||||
font-family: ui-monospace, SFMono-Regular, monospace;
|
||||
font-size: 0.72rem;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.detail-list dd {
|
||||
min-width: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.stack-form {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
padding: 0.85rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.stack-form input,
|
||||
.stack-form select,
|
||||
.login-panel input {
|
||||
width: 100%;
|
||||
min-height: 2.4rem;
|
||||
padding: 0.5rem 0.65rem;
|
||||
min-height: 2.25rem;
|
||||
padding: 0.45rem 0.6rem;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 0.5rem;
|
||||
border-radius: 0.45rem;
|
||||
color: var(--text);
|
||||
background: rgba(255, 255, 255, 0.72);
|
||||
}
|
||||
|
||||
.user-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
padding: 0.65rem 0.75rem;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.user-row div {
|
||||
display: grid;
|
||||
gap: 0.15rem;
|
||||
.empty-state {
|
||||
margin: 0;
|
||||
padding: 0.8rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.login-shell {
|
||||
@@ -286,21 +404,27 @@ code {
|
||||
}
|
||||
|
||||
.login-panel {
|
||||
width: min(24rem, 100%);
|
||||
display: grid;
|
||||
gap: 0.85rem;
|
||||
width: min(23rem, 100%);
|
||||
gap: 0.75rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.login-panel h1 {
|
||||
margin: 0;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
.login-panel label {
|
||||
display: grid;
|
||||
gap: 0.35rem;
|
||||
gap: 0.3rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.login-mark {
|
||||
display: inline-flex;
|
||||
width: 2.6rem;
|
||||
height: 2.6rem;
|
||||
width: 2.4rem;
|
||||
height: 2.4rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 0.5rem;
|
||||
@@ -313,8 +437,9 @@ code {
|
||||
color: #a43131;
|
||||
}
|
||||
|
||||
@media (max-width: 920px) {
|
||||
.admin-shell {
|
||||
@media (max-width: 1080px) {
|
||||
.admin-shell,
|
||||
.admin-shell.is-collapsed {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
@@ -326,23 +451,54 @@ code {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.admin-sidebar nav {
|
||||
.nav-list {
|
||||
display: flex;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.ghost-button {
|
||||
.nav-button {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.metric-grid,
|
||||
.user-form,
|
||||
.table-row {
|
||||
.admin-shell.is-collapsed .brand span,
|
||||
.admin-shell.is-collapsed .nav-list span,
|
||||
.admin-shell.is-collapsed .nav-button span {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.workspace-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.admin-topbar {
|
||||
.sync-label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.column-browser {
|
||||
min-height: 18rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.admin-sidebar,
|
||||
.compact-topbar {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sidebar-header,
|
||||
.topbar-actions,
|
||||
.nav-list {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.nav-list button,
|
||||
.nav-button,
|
||||
.primary-button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.column-browser {
|
||||
grid-auto-flow: row;
|
||||
grid-auto-columns: auto;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user