Introduces an inline administration panel accessible via a sidebar button, allowing users to edit application metadata (repo URL, deployment date, user name, role, initials) and manage data through JSON export/import functionality. The API server now includes routes for exporting all application data and importing it, overwriting existing data after confirmation. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 55837015-10e9-4be9-b857-7f5e6be73772 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Event-Id: 018e63b4-5f39-4959-a629-0ca47a1538c3 Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/1cc377db-7ea0-49f2-97ce-c3e87e0228cc/55837015-10e9-4be9-b857-7f5e6be73772/KWU6fDX Replit-Helium-Checkpoint-Created: true
38 lines
1.3 KiB
TypeScript
38 lines
1.3 KiB
TypeScript
import { AppSidebar } from "./sidebar";
|
|
import { Github } from "lucide-react";
|
|
import { useEffect, useState } from "react";
|
|
import { APP_INFO_EVENT, getAppInfo, type AppInfo } from "@/lib/app-info";
|
|
|
|
export function AppLayout({ children }: { children: React.ReactNode }) {
|
|
const [info, setInfo] = useState<AppInfo>(() => getAppInfo());
|
|
|
|
useEffect(() => {
|
|
const handleUpdate = () => setInfo(getAppInfo());
|
|
window.addEventListener(APP_INFO_EVENT, handleUpdate);
|
|
return () => window.removeEventListener(APP_INFO_EVENT, handleUpdate);
|
|
}, []);
|
|
|
|
return (
|
|
<div className="flex h-screen w-full bg-background overflow-hidden">
|
|
<AppSidebar />
|
|
<main className="flex-1 flex flex-col min-w-0 overflow-y-auto">
|
|
<div className="flex-1 p-8 container mx-auto max-w-7xl">
|
|
{children}
|
|
</div>
|
|
<footer className="shrink-0 border-t px-8 py-3 flex items-center justify-between text-xs text-muted-foreground">
|
|
<a
|
|
href={info.repoUrl}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="flex items-center gap-1.5 hover:text-foreground transition-colors"
|
|
>
|
|
<Github className="h-3.5 w-3.5" />
|
|
Repo GitHub
|
|
</a>
|
|
<span>Déployé le {info.deployDate}</span>
|
|
</footer>
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|