Initial commit Home OS
This commit is contained in:
klemens committed
commit
36046fa59c
45 files changed
+13508
No files matched your search
@@ -0,0 +1,5 @@
|
||||
node_modules
|
||||
.next
|
||||
.git
|
||||
data/*.json
|
||||
npm-debug.log
|
||||
+41
@@ -0,0 +1,41 @@
|
||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.*
|
||||
.yarn/*
|
||||
!.yarn/patches
|
||||
!.yarn/plugins
|
||||
!.yarn/releases
|
||||
!.yarn/versions
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# next.js
|
||||
/.next/
|
||||
/out/
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
*.pem
|
||||
|
||||
# debug
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
.pnpm-debug.log*
|
||||
|
||||
# env files (can opt-in for committing if needed)
|
||||
.env*
|
||||
|
||||
# vercel
|
||||
.vercel
|
||||
|
||||
# typescript
|
||||
*.tsbuildinfo
|
||||
next-env.d.ts
|
||||
@@ -0,0 +1,9 @@
|
||||
<!-- BEGIN:nextjs-agent-rules -->
|
||||
|
||||
## This is NOT the Next.js you know
|
||||
|
||||
This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` (resolved from this file's directory; in monorepos the `next` package may not be visible from the repo root) before writing any code. Heed deprecation notices.
|
||||
|
||||
This block is written and re-added by `next dev` — verify at `node_modules/next/dist/server/lib/generate-agent-files.js`. Removing it from a diff only re-creates the uncommitted change; committing it with your work keeps the tree clean.
|
||||
|
||||
<!-- END:nextjs-agent-rules -->
|
||||
+39
@@ -0,0 +1,39 @@
|
||||
# Étape 1 : Dépendances
|
||||
FROM node:22-alpine AS deps
|
||||
WORKDIR /app
|
||||
COPY package.json package-lock.json ./
|
||||
RUN npm ci
|
||||
|
||||
# Étape 2 : Build Next.js (Standalone)
|
||||
FROM node:22-alpine AS builder
|
||||
WORKDIR /app
|
||||
COPY --from=deps /app/node_modules ./node_modules
|
||||
COPY . .
|
||||
ENV NEXT_TELEMETRY_DISABLED=1
|
||||
RUN npm run build
|
||||
|
||||
# Étape 3 : Image d'exécution ultra-légère pour Intel Core i3 / 8 Go RAM
|
||||
FROM node:22-alpine AS runner
|
||||
WORKDIR /app
|
||||
|
||||
ENV NODE_ENV=production
|
||||
ENV NEXT_TELEMETRY_DISABLED=1
|
||||
ENV PORT=3000
|
||||
ENV HOSTNAME="0.0.0.0"
|
||||
|
||||
RUN addgroup --system --gid 1001 nodejs && \
|
||||
adduser --system --uid 1001 nextjs
|
||||
|
||||
COPY --from=builder /app/public ./public
|
||||
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
|
||||
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
|
||||
|
||||
# Dossier persistant pour data.json
|
||||
RUN mkdir -p /app/data && chown -R nextjs:nodejs /app/data
|
||||
VOLUME ["/app/data"]
|
||||
|
||||
USER nextjs
|
||||
|
||||
EXPOSE 3000
|
||||
|
||||
CMD ["node", "server.js"]
|
||||
@@ -0,0 +1,36 @@
|
||||
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
|
||||
|
||||
## Getting Started
|
||||
|
||||
First, run the development server:
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
# or
|
||||
yarn dev
|
||||
# or
|
||||
pnpm dev
|
||||
# or
|
||||
bun dev
|
||||
```
|
||||
|
||||
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
|
||||
|
||||
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
|
||||
|
||||
This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
|
||||
|
||||
## Learn More
|
||||
|
||||
To learn more about Next.js, take a look at the following resources:
|
||||
|
||||
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
|
||||
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
|
||||
|
||||
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
|
||||
|
||||
## Deploy on Vercel
|
||||
|
||||
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
|
||||
|
||||
Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
|
||||
@@ -0,0 +1,25 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema.json",
|
||||
"style": "base-nova",
|
||||
"rsc": true,
|
||||
"tsx": true,
|
||||
"tailwind": {
|
||||
"config": "",
|
||||
"css": "src/app/globals.css",
|
||||
"baseColor": "neutral",
|
||||
"cssVariables": true,
|
||||
"prefix": ""
|
||||
},
|
||||
"iconLibrary": "lucide",
|
||||
"rtl": false,
|
||||
"aliases": {
|
||||
"components": "@/components",
|
||||
"utils": "@/lib/utils",
|
||||
"ui": "@/components/ui",
|
||||
"lib": "@/lib",
|
||||
"hooks": "@/hooks"
|
||||
},
|
||||
"menuColor": "default",
|
||||
"menuAccent": "subtle",
|
||||
"registries": {}
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"version": "1.0.0",
|
||||
"note": "Fichier de persistance locale pour le portail Home. Synchronisé avec src/data/initial-data.ts."
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
services:
|
||||
home-os:
|
||||
build:
|
||||
context: .
|
||||
dockerfile: Dockerfile
|
||||
container_name: home-os
|
||||
restart: unless-stopped
|
||||
ports:
|
||||
- "3000:3000"
|
||||
environment:
|
||||
- NODE_ENV=production
|
||||
- GEMINI_API_KEY=${GEMINI_API_KEY:-}
|
||||
- GEMINI_MODEL=${GEMINI_MODEL:-gemini-2.5-flash}
|
||||
volumes:
|
||||
- ./data:/app/data
|
||||
@@ -0,0 +1,18 @@
|
||||
import { defineConfig, globalIgnores } from "eslint/config";
|
||||
import nextVitals from "eslint-config-next/core-web-vitals";
|
||||
import nextTs from "eslint-config-next/typescript";
|
||||
|
||||
const eslintConfig = defineConfig([
|
||||
...nextVitals,
|
||||
...nextTs,
|
||||
// Override default ignores of eslint-config-next.
|
||||
globalIgnores([
|
||||
// Default ignores of eslint-config-next:
|
||||
".next/**",
|
||||
"out/**",
|
||||
"build/**",
|
||||
"next-env.d.ts",
|
||||
]),
|
||||
]);
|
||||
|
||||
export default eslintConfig;
|
||||
@@ -0,0 +1,17 @@
|
||||
import type { NextConfig } from "next";
|
||||
|
||||
const nextConfig: NextConfig = {
|
||||
output: "standalone",
|
||||
cacheComponents: true,
|
||||
partialPrefetching: true,
|
||||
turbopack: {
|
||||
rules: {
|
||||
"*.css": {
|
||||
loaders: ["@tailwindcss/turbopack"],
|
||||
as: "*.css",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default nextConfig;
|
||||
Generated
+9865
File diff suppressed because it is too large.
Load diff
@@ -0,0 +1,32 @@
|
||||
{
|
||||
"name": "home-dashboard",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"lint": "eslint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@base-ui/react": "^1.9.0",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"cn": "^0.5.0",
|
||||
"lucide-react": "^1.61.0",
|
||||
"next": "16.4.2",
|
||||
"react": "19.3.0",
|
||||
"react-dom": "19.3.0",
|
||||
"shadcn": "^4.22.1",
|
||||
"tw-animate-css": "^1.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/turbopack": "^4",
|
||||
"@types/node": "^20",
|
||||
"@types/react": "^19",
|
||||
"@types/react-dom": "^19",
|
||||
"eslint": "^9",
|
||||
"eslint-config-next": "16.4.2",
|
||||
"tailwindcss": "^4",
|
||||
"typescript": "^5"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>
|
||||
|
After Width: | Height: | Size: 391 B |
@@ -0,0 +1 @@
|
||||
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
@@ -0,0 +1 @@
|
||||
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>
|
||||
|
After Width: | Height: | Size: 128 B |
@@ -0,0 +1 @@
|
||||
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>
|
||||
|
After Width: | Height: | Size: 385 B |
@@ -0,0 +1,58 @@
|
||||
import { NextResponse } from "next/server";
|
||||
import { promises as fs } from "fs";
|
||||
import path from "path";
|
||||
import { initialDashboardData } from "@/data/initial-data";
|
||||
import { DashboardData } from "@/types/dashboard";
|
||||
|
||||
const DATA_DIR = path.join(process.cwd(), "data");
|
||||
const DATA_FILE = path.join(DATA_DIR, "data.json");
|
||||
|
||||
async function readOrInitData(): Promise<DashboardData> {
|
||||
try {
|
||||
await fs.mkdir(DATA_DIR, { recursive: true });
|
||||
const raw = await fs.readFile(DATA_FILE, "utf-8");
|
||||
const parsed = JSON.parse(raw);
|
||||
if (parsed && Array.isArray(parsed.categories)) {
|
||||
return parsed as DashboardData;
|
||||
}
|
||||
await fs.writeFile(
|
||||
DATA_FILE,
|
||||
JSON.stringify(initialDashboardData, null, 2),
|
||||
"utf-8"
|
||||
);
|
||||
return initialDashboardData;
|
||||
} catch {
|
||||
await fs.mkdir(DATA_DIR, { recursive: true });
|
||||
await fs.writeFile(
|
||||
DATA_FILE,
|
||||
JSON.stringify(initialDashboardData, null, 2),
|
||||
"utf-8"
|
||||
);
|
||||
return initialDashboardData;
|
||||
}
|
||||
}
|
||||
|
||||
export async function GET() {
|
||||
const data = await readOrInitData();
|
||||
return NextResponse.json(data);
|
||||
}
|
||||
|
||||
export async function POST(request: Request) {
|
||||
try {
|
||||
const body = (await request.json()) as DashboardData;
|
||||
if (!body || !Array.isArray(body.categories)) {
|
||||
return NextResponse.json(
|
||||
{ error: "Format de données invalide" },
|
||||
{ status: 400 }
|
||||
);
|
||||
}
|
||||
await fs.mkdir(DATA_DIR, { recursive: true });
|
||||
await fs.writeFile(DATA_FILE, JSON.stringify(body, null, 2), "utf-8");
|
||||
return NextResponse.json({ ok: true, data: body });
|
||||
} catch (error) {
|
||||
return NextResponse.json(
|
||||
{ error: "Impossible de sauvegarder data.json", details: String(error) },
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
import { NextResponse } from "next/server";
|
||||
|
||||
export async function POST(request: Request) {
|
||||
try {
|
||||
const { prompt } = (await request.json()) as { prompt?: string };
|
||||
if (!prompt || !prompt.trim()) {
|
||||
return NextResponse.json(
|
||||
{ error: "Veuillez saisir une question ou un texte." },
|
||||
{ status: 400 }
|
||||
);
|
||||
}
|
||||
|
||||
const apiKey = process.env.GEMINI_API_KEY;
|
||||
if (!apiKey) {
|
||||
return NextResponse.json({
|
||||
answer:
|
||||
"Clé `GEMINI_API_KEY` non configurée sur le serveur. Ajoutez `GEMINI_API_KEY=votre_cle` dans votre `docker-compose.yml` sur le serveur pour activer les réponses en direct de Google Gemini.",
|
||||
configured: false,
|
||||
});
|
||||
}
|
||||
|
||||
const model = process.env.GEMINI_MODEL || "gemini-2.5-flash";
|
||||
const response = await fetch(
|
||||
`https://generativelanguage.googleapis.com/v1beta/models/${model}:generateContent?key=${apiKey}`,
|
||||
{
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
systemInstruction: {
|
||||
parts: [
|
||||
{
|
||||
text: "Tu es l'assistant intégré à Home OS, un portail personnel. Réponds de manière concise, structurée et directement utile (en français par défaut).",
|
||||
},
|
||||
],
|
||||
},
|
||||
contents: [
|
||||
{
|
||||
parts: [{ text: prompt }],
|
||||
},
|
||||
],
|
||||
}),
|
||||
}
|
||||
);
|
||||
|
||||
if (!response.ok) {
|
||||
const errText = await response.text();
|
||||
return NextResponse.json(
|
||||
{
|
||||
error: `Erreur Gemini API (${response.status})`,
|
||||
details: errText,
|
||||
},
|
||||
{ status: response.status }
|
||||
);
|
||||
}
|
||||
|
||||
const result = await response.json();
|
||||
const answer =
|
||||
result?.candidates?.[0]?.content?.parts
|
||||
?.map((p: { text?: string }) => p.text || "")
|
||||
.join("\n") || "Aucune réponse générée.";
|
||||
|
||||
return NextResponse.json({ answer, configured: true });
|
||||
} catch (error) {
|
||||
return NextResponse.json(
|
||||
{ error: "Erreur lors de l'appel à Gemini", details: String(error) },
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
@@ -0,0 +1,130 @@
|
||||
@import "tailwindcss";
|
||||
@import "tw-animate-css";
|
||||
@import "shadcn/tailwind.css";
|
||||
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--font-sans: var(--font-sans);
|
||||
--font-mono: var(--font-geist-mono);
|
||||
--font-heading: var(--font-sans);
|
||||
--color-sidebar-ring: var(--sidebar-ring);
|
||||
--color-sidebar-border: var(--sidebar-border);
|
||||
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||
--color-sidebar-accent: var(--sidebar-accent);
|
||||
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||||
--color-sidebar-primary: var(--sidebar-primary);
|
||||
--color-sidebar-foreground: var(--sidebar-foreground);
|
||||
--color-sidebar: var(--sidebar);
|
||||
--color-chart-5: var(--chart-5);
|
||||
--color-chart-4: var(--chart-4);
|
||||
--color-chart-3: var(--chart-3);
|
||||
--color-chart-2: var(--chart-2);
|
||||
--color-chart-1: var(--chart-1);
|
||||
--color-ring: var(--ring);
|
||||
--color-input: var(--input);
|
||||
--color-border: var(--border);
|
||||
--color-destructive: var(--destructive);
|
||||
--color-accent-foreground: var(--accent-foreground);
|
||||
--color-accent: var(--accent);
|
||||
--color-muted-foreground: var(--muted-foreground);
|
||||
--color-muted: var(--muted);
|
||||
--color-secondary-foreground: var(--secondary-foreground);
|
||||
--color-secondary: var(--secondary);
|
||||
--color-primary-foreground: var(--primary-foreground);
|
||||
--color-primary: var(--primary);
|
||||
--color-popover-foreground: var(--popover-foreground);
|
||||
--color-popover: var(--popover);
|
||||
--color-card-foreground: var(--card-foreground);
|
||||
--color-card: var(--card);
|
||||
--radius-sm: calc(var(--radius) * 0.6);
|
||||
--radius-md: calc(var(--radius) * 0.8);
|
||||
--radius-lg: var(--radius);
|
||||
--radius-xl: calc(var(--radius) * 1.4);
|
||||
--radius-2xl: calc(var(--radius) * 1.8);
|
||||
--radius-3xl: calc(var(--radius) * 2.2);
|
||||
--radius-4xl: calc(var(--radius) * 2.6);
|
||||
}
|
||||
|
||||
:root {
|
||||
--background: oklch(1 0 0);
|
||||
--foreground: oklch(0.145 0 0);
|
||||
--card: oklch(1 0 0);
|
||||
--card-foreground: oklch(0.145 0 0);
|
||||
--popover: oklch(1 0 0);
|
||||
--popover-foreground: oklch(0.145 0 0);
|
||||
--primary: oklch(0.205 0 0);
|
||||
--primary-foreground: oklch(0.985 0 0);
|
||||
--secondary: oklch(0.97 0 0);
|
||||
--secondary-foreground: oklch(0.205 0 0);
|
||||
--muted: oklch(0.97 0 0);
|
||||
--muted-foreground: oklch(0.556 0 0);
|
||||
--accent: oklch(0.97 0 0);
|
||||
--accent-foreground: oklch(0.205 0 0);
|
||||
--destructive: oklch(0.577 0.245 27.325);
|
||||
--border: oklch(0.922 0 0);
|
||||
--input: oklch(0.922 0 0);
|
||||
--ring: oklch(0.708 0 0);
|
||||
--chart-1: oklch(0.87 0 0);
|
||||
--chart-2: oklch(0.556 0 0);
|
||||
--chart-3: oklch(0.439 0 0);
|
||||
--chart-4: oklch(0.371 0 0);
|
||||
--chart-5: oklch(0.269 0 0);
|
||||
--radius: 0.625rem;
|
||||
--sidebar: oklch(0.985 0 0);
|
||||
--sidebar-foreground: oklch(0.145 0 0);
|
||||
--sidebar-primary: oklch(0.205 0 0);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
--sidebar-accent: oklch(0.97 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.205 0 0);
|
||||
--sidebar-border: oklch(0.922 0 0);
|
||||
--sidebar-ring: oklch(0.708 0 0);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: oklch(0.145 0 0);
|
||||
--foreground: oklch(0.985 0 0);
|
||||
--card: oklch(0.205 0 0);
|
||||
--card-foreground: oklch(0.985 0 0);
|
||||
--popover: oklch(0.205 0 0);
|
||||
--popover-foreground: oklch(0.985 0 0);
|
||||
--primary: oklch(0.922 0 0);
|
||||
--primary-foreground: oklch(0.205 0 0);
|
||||
--secondary: oklch(0.269 0 0);
|
||||
--secondary-foreground: oklch(0.985 0 0);
|
||||
--muted: oklch(0.269 0 0);
|
||||
--muted-foreground: oklch(0.708 0 0);
|
||||
--accent: oklch(0.269 0 0);
|
||||
--accent-foreground: oklch(0.985 0 0);
|
||||
--destructive: oklch(0.704 0.191 22.216);
|
||||
--border: oklch(1 0 0 / 10%);
|
||||
--input: oklch(1 0 0 / 15%);
|
||||
--ring: oklch(0.556 0 0);
|
||||
--chart-1: oklch(0.87 0 0);
|
||||
--chart-2: oklch(0.556 0 0);
|
||||
--chart-3: oklch(0.439 0 0);
|
||||
--chart-4: oklch(0.371 0 0);
|
||||
--chart-5: oklch(0.269 0 0);
|
||||
--sidebar: oklch(0.205 0 0);
|
||||
--sidebar-foreground: oklch(0.985 0 0);
|
||||
--sidebar-primary: oklch(0.488 0.243 264.376);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
--sidebar-accent: oklch(0.269 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.985 0 0);
|
||||
--sidebar-border: oklch(1 0 0 / 10%);
|
||||
--sidebar-ring: oklch(0.556 0 0);
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border outline-ring/50;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
html {
|
||||
@apply font-sans;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
import type { Metadata, Viewport } from "next";
|
||||
import { Geist, Geist_Mono } from "next/font/google";
|
||||
import { TooltipProvider } from "@/components/ui/tooltip";
|
||||
import "./globals.css";
|
||||
|
||||
const geistSans = Geist({
|
||||
variable: "--font-geist-sans",
|
||||
subsets: ["latin"],
|
||||
});
|
||||
|
||||
const geistMono = Geist_Mono({
|
||||
variable: "--font-geist-mono",
|
||||
subsets: ["latin"],
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Home OS — Portail Personnel",
|
||||
description:
|
||||
"Système d'exploitation web personnel ultra-léger (Nextcloud, Google Docs/Drive, Gitea, Gemini)",
|
||||
appleWebApp: {
|
||||
capable: true,
|
||||
statusBarStyle: "black-translucent",
|
||||
title: "Home OS",
|
||||
},
|
||||
};
|
||||
|
||||
export const viewport: Viewport = {
|
||||
themeColor: "#09090b",
|
||||
width: "device-width",
|
||||
initialScale: 1,
|
||||
maximumScale: 1,
|
||||
userScalable: false,
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
return (
|
||||
<html
|
||||
lang="fr"
|
||||
className={`${geistSans.variable} ${geistMono.variable} dark h-full antialiased`}
|
||||
>
|
||||
<body className="min-h-full flex flex-col bg-zinc-950 text-zinc-100 overflow-hidden">
|
||||
<TooltipProvider>{children}</TooltipProvider>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
import type { MetadataRoute } from "next";
|
||||
|
||||
export default function manifest(): MetadataRoute.Manifest {
|
||||
return {
|
||||
name: "Home OS — Portail Personnel",
|
||||
short_name: "Home OS",
|
||||
description:
|
||||
"Système d'exploitation web personnel pour CachyOS et Galaxy S20 FE",
|
||||
start_url: "/",
|
||||
display: "standalone",
|
||||
background_color: "#09090b",
|
||||
theme_color: "#09090b",
|
||||
orientation: "any",
|
||||
icons: [
|
||||
{
|
||||
src: "/favicon.ico",
|
||||
sizes: "any",
|
||||
type: "image/x-icon",
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
import { DashboardShell } from "@/components/dashboard/dashboard-shell";
|
||||
import { initialDashboardData } from "@/data/initial-data";
|
||||
|
||||
export default function HomePage() {
|
||||
return <DashboardShell initialData={initialDashboardData} />;
|
||||
}
|
||||
@@ -0,0 +1,278 @@
|
||||
"use client";
|
||||
|
||||
import { ShortcutTile } from "@/types/dashboard";
|
||||
import { DynamicIcon } from "./icon-mapper";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import {
|
||||
ExternalLink,
|
||||
Pencil,
|
||||
Trash2,
|
||||
Plus,
|
||||
AppWindow,
|
||||
Layers,
|
||||
ArrowLeft,
|
||||
ArrowRight,
|
||||
} from "lucide-react";
|
||||
|
||||
interface BentoGridProps {
|
||||
tiles: ShortcutTile[];
|
||||
isEditMode: boolean;
|
||||
onLaunchTile: (tile: ShortcutTile, forceMode?: "workspace" | "popup" | "external") => void;
|
||||
onAddTile: () => void;
|
||||
onEditTile: (tile: ShortcutTile) => void;
|
||||
onDeleteTile: (tileId: string) => void;
|
||||
onMoveTile: (tileId: string, direction: "left" | "right") => void;
|
||||
}
|
||||
|
||||
const accentStyles: Record<
|
||||
string,
|
||||
{ iconBg: string; borderHover: string; glow: string }
|
||||
> = {
|
||||
emerald: {
|
||||
iconBg: "bg-emerald-500/15 text-emerald-400 ring-emerald-500/30",
|
||||
borderHover: "hover:border-emerald-500/30",
|
||||
glow: "from-emerald-500/10 via-transparent to-transparent",
|
||||
},
|
||||
blue: {
|
||||
iconBg: "bg-blue-500/15 text-blue-400 ring-blue-500/30",
|
||||
borderHover: "hover:border-blue-500/30",
|
||||
glow: "from-blue-500/10 via-transparent to-transparent",
|
||||
},
|
||||
violet: {
|
||||
iconBg: "bg-violet-500/15 text-violet-400 ring-violet-500/30",
|
||||
borderHover: "hover:border-violet-500/30",
|
||||
glow: "from-violet-500/10 via-transparent to-transparent",
|
||||
},
|
||||
sky: {
|
||||
iconBg: "bg-sky-500/15 text-sky-400 ring-sky-500/30",
|
||||
borderHover: "hover:border-sky-500/30",
|
||||
glow: "from-sky-500/10 via-transparent to-transparent",
|
||||
},
|
||||
amber: {
|
||||
iconBg: "bg-amber-500/15 text-amber-400 ring-amber-500/30",
|
||||
borderHover: "hover:border-amber-500/30",
|
||||
glow: "from-amber-500/10 via-transparent to-transparent",
|
||||
},
|
||||
teal: {
|
||||
iconBg: "bg-teal-500/15 text-teal-400 ring-teal-500/30",
|
||||
borderHover: "hover:border-teal-500/30",
|
||||
glow: "from-teal-500/10 via-transparent to-transparent",
|
||||
},
|
||||
purple: {
|
||||
iconBg: "bg-purple-500/15 text-purple-400 ring-purple-500/30",
|
||||
borderHover: "hover:border-purple-500/30",
|
||||
glow: "from-purple-500/10 via-transparent to-transparent",
|
||||
},
|
||||
pink: {
|
||||
iconBg: "bg-pink-500/15 text-pink-400 ring-pink-500/30",
|
||||
borderHover: "hover:border-pink-500/30",
|
||||
glow: "from-pink-500/10 via-transparent to-transparent",
|
||||
},
|
||||
cyan: {
|
||||
iconBg: "bg-cyan-500/15 text-cyan-400 ring-cyan-500/30",
|
||||
borderHover: "hover:border-cyan-500/30",
|
||||
glow: "from-cyan-500/10 via-transparent to-transparent",
|
||||
},
|
||||
indigo: {
|
||||
iconBg: "bg-indigo-500/15 text-indigo-400 ring-indigo-500/30",
|
||||
borderHover: "hover:border-indigo-500/30",
|
||||
glow: "from-indigo-500/10 via-transparent to-transparent",
|
||||
},
|
||||
rose: {
|
||||
iconBg: "bg-rose-500/15 text-rose-400 ring-rose-500/30",
|
||||
borderHover: "hover:border-rose-500/30",
|
||||
glow: "from-rose-500/10 via-transparent to-transparent",
|
||||
},
|
||||
slate: {
|
||||
iconBg: "bg-zinc-500/15 text-zinc-300 ring-zinc-500/30",
|
||||
borderHover: "hover:border-zinc-400/30",
|
||||
glow: "from-zinc-500/10 via-transparent to-transparent",
|
||||
},
|
||||
};
|
||||
|
||||
function formatHostname(url: string) {
|
||||
try {
|
||||
const parsed = new URL(url);
|
||||
return parsed.host;
|
||||
} catch {
|
||||
return url;
|
||||
}
|
||||
}
|
||||
|
||||
export function BentoGrid({
|
||||
tiles,
|
||||
isEditMode,
|
||||
onLaunchTile,
|
||||
onAddTile,
|
||||
onEditTile,
|
||||
onDeleteTile,
|
||||
onMoveTile,
|
||||
}: BentoGridProps) {
|
||||
return (
|
||||
<div className="grid grid-cols-1 gap-3.5 sm:grid-cols-2 lg:grid-cols-4 auto-rows-[152px]">
|
||||
{tiles.map((tile, idx) => {
|
||||
const spanClass =
|
||||
tile.size === "2x2"
|
||||
? "sm:col-span-2 sm:row-span-2"
|
||||
: tile.size === "2x1"
|
||||
? "sm:col-span-2"
|
||||
: "col-span-1";
|
||||
|
||||
const style =
|
||||
accentStyles[tile.accentColor || "indigo"] || accentStyles.indigo;
|
||||
const behavior = tile.openBehavior || "workspace";
|
||||
|
||||
return (
|
||||
<div
|
||||
key={tile.id}
|
||||
onClick={() => {
|
||||
if (!isEditMode) {
|
||||
onLaunchTile(tile);
|
||||
}
|
||||
}}
|
||||
className={`group relative flex flex-col justify-between overflow-hidden rounded-2xl border border-white/10 bg-zinc-900/60 p-4 sm:p-5 backdrop-blur-md transition-all duration-200 select-none ${spanClass} ${
|
||||
isEditMode
|
||||
? "border-dashed border-amber-500/40 bg-zinc-900/80"
|
||||
: `cursor-pointer ${style.borderHover} hover:-translate-y-0.5 hover:bg-zinc-900/90 hover:shadow-xl hover:shadow-black/40`
|
||||
}`}
|
||||
>
|
||||
{/* Subtle top-left radial gradient */}
|
||||
<div
|
||||
className={`pointer-events-none absolute inset-0 bg-gradient-to-br ${style.glow} opacity-60 transition-opacity group-hover:opacity-100`}
|
||||
/>
|
||||
|
||||
{/* Top Row: Icon + Quick Launch Modes or Edit Controls */}
|
||||
<div className="relative z-10 flex items-start justify-between gap-2">
|
||||
<div
|
||||
className={`flex size-11 items-center justify-center rounded-xl ring-1 ${style.iconBg}`}
|
||||
>
|
||||
<DynamicIcon name={tile.icon} className="size-5" />
|
||||
</div>
|
||||
|
||||
{isEditMode ? (
|
||||
<div
|
||||
className="flex items-center gap-1 rounded-lg border border-white/10 bg-zinc-950/90 p-1"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
disabled={idx === 0}
|
||||
onClick={() => onMoveTile(tile.id, "left")}
|
||||
title="Déplacer avant"
|
||||
className="rounded p-1 text-zinc-400 hover:bg-white/10 hover:text-white disabled:opacity-30"
|
||||
>
|
||||
<ArrowLeft className="size-3.5" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
disabled={idx === tiles.length - 1}
|
||||
onClick={() => onMoveTile(tile.id, "right")}
|
||||
title="Déplacer après"
|
||||
className="rounded p-1 text-zinc-400 hover:bg-white/10 hover:text-white disabled:opacity-30"
|
||||
>
|
||||
<ArrowRight className="size-3.5" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onEditTile(tile)}
|
||||
title="Modifier la tuile"
|
||||
className="rounded p-1 text-amber-300 hover:bg-amber-500/20"
|
||||
>
|
||||
<Pencil className="size-3.5" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onDeleteTile(tile.id)}
|
||||
title="Supprimer la tuile"
|
||||
className="rounded p-1 text-rose-400 hover:bg-rose-500/20"
|
||||
>
|
||||
<Trash2 className="size-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
className="flex items-center gap-1.5"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{tile.badge && (
|
||||
<Badge
|
||||
variant="secondary"
|
||||
className="border border-white/8 bg-white/5 text-[11px] font-medium text-zinc-300"
|
||||
>
|
||||
{tile.badge}
|
||||
</Badge>
|
||||
)}
|
||||
|
||||
{/* Quick override buttons on hover */}
|
||||
<div className="flex items-center gap-0.5 rounded-lg border border-white/8 bg-zinc-950/70 p-0.5 opacity-80 sm:opacity-0 transition-opacity group-hover:opacity-100">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onLaunchTile(tile, "workspace")}
|
||||
title="Ouvrir dans un onglet intégré à Home"
|
||||
className={`rounded p-1 transition-colors ${
|
||||
behavior === "workspace"
|
||||
? "text-indigo-400 bg-indigo-500/15"
|
||||
: "text-zinc-400 hover:text-white"
|
||||
}`}
|
||||
>
|
||||
<Layers className="size-3" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onLaunchTile(tile, "popup")}
|
||||
title="Ouvrir en fenêtre App Chromium (idéal Google Docs/Drive)"
|
||||
className={`rounded p-1 transition-colors ${
|
||||
behavior === "popup"
|
||||
? "text-cyan-400 bg-cyan-500/15"
|
||||
: "text-zinc-400 hover:text-white"
|
||||
}`}
|
||||
>
|
||||
<AppWindow className="size-3" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onLaunchTile(tile, "external")}
|
||||
title="Ouvrir dans un nouvel onglet navigateur"
|
||||
className="rounded p-1 text-zinc-400 hover:text-white"
|
||||
>
|
||||
<ExternalLink className="size-3" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Bottom Row: Title, Description, Host */}
|
||||
<div className="relative z-10 mt-2">
|
||||
<div className="flex items-baseline justify-between gap-2">
|
||||
<h3 className="text-base font-semibold tracking-tight text-zinc-100 group-hover:text-white truncate">
|
||||
{tile.title}
|
||||
</h3>
|
||||
<span className="font-mono text-[10px] text-zinc-500 truncate max-w-[130px] shrink-0">
|
||||
{formatHostname(tile.url)}
|
||||
</span>
|
||||
</div>
|
||||
<p className="mt-1 line-clamp-1 text-xs text-zinc-400">
|
||||
{tile.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
{/* Add Tile Card when in Edit Mode */}
|
||||
{isEditMode && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onAddTile}
|
||||
className="flex flex-col items-center justify-center gap-2 rounded-2xl border-2 border-dashed border-white/15 bg-zinc-900/30 p-5 text-zinc-400 transition-all hover:border-amber-400/50 hover:bg-amber-500/5 hover:text-amber-300"
|
||||
>
|
||||
<div className="flex size-10 items-center justify-center rounded-xl bg-white/5">
|
||||
<Plus className="size-5" />
|
||||
</div>
|
||||
<span className="text-xs font-medium">Ajouter un raccourci</span>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,574 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useMemo, useEffect, useCallback } from "react";
|
||||
import {
|
||||
DashboardData,
|
||||
ShortcutTile,
|
||||
OpenWindowTab,
|
||||
} from "@/types/dashboard";
|
||||
import { DashboardSidebar } from "./sidebar";
|
||||
import { OsTopBar } from "./os-top-bar";
|
||||
import { HeaderOmnibox } from "./header-omnibox";
|
||||
import { BentoGrid } from "./bento-grid";
|
||||
import { WindowWorkspace } from "./window-workspace";
|
||||
import { TileEditorModal } from "./tile-editor-modal";
|
||||
import { DynamicIcon } from "./icon-mapper";
|
||||
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Plus, Layers, Trash2, StickyNote, X, Check } from "lucide-react";
|
||||
|
||||
interface DashboardShellProps {
|
||||
initialData: DashboardData;
|
||||
}
|
||||
|
||||
export function DashboardShell({ initialData }: DashboardShellProps) {
|
||||
const [data, setData] = useState<DashboardData>(initialData);
|
||||
const [activeCategoryId, setActiveCategoryId] = useState<string>(
|
||||
initialData.categories[0]?.id || "work"
|
||||
);
|
||||
const [activeTabByCategory, setActiveTabByCategory] = useState<
|
||||
Record<string, string>
|
||||
>({});
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const [isEditMode, setIsEditMode] = useState(false);
|
||||
|
||||
// OS Window Manager state ("bento" or window.id)
|
||||
const [openWindows, setOpenWindows] = useState<OpenWindowTab[]>([]);
|
||||
const [activeViewId, setActiveViewId] = useState<string>("bento");
|
||||
const [splitWindowId, setSplitWindowId] = useState<string | null>(null);
|
||||
|
||||
// Scratchpad / Quick Notes drawer
|
||||
const [isNotesOpen, setIsNotesOpen] = useState(false);
|
||||
const [noteText, setNoteText] = useState(initialData.quickNote || "");
|
||||
const [saveIndicator, setSaveIndicator] = useState(false);
|
||||
|
||||
// Tile Editor Modal state
|
||||
const [editorOpen, setEditorOpen] = useState(false);
|
||||
const [editingTile, setEditingTile] = useState<ShortcutTile | null>(null);
|
||||
|
||||
// New Tab inline creation
|
||||
const [addingTab, setAddingTab] = useState(false);
|
||||
const [newTabLabel, setNewTabLabel] = useState("");
|
||||
|
||||
// Load persisted data from /api/dashboard on mount
|
||||
useEffect(() => {
|
||||
fetch("/api/dashboard")
|
||||
.then((res) => (res.ok ? res.json() : null))
|
||||
.then((persisted: DashboardData | null) => {
|
||||
if (persisted && Array.isArray(persisted.categories)) {
|
||||
setData(persisted);
|
||||
if (persisted.quickNote !== undefined) {
|
||||
setNoteText(persisted.quickNote);
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
// Fallback to initialData
|
||||
});
|
||||
}, []);
|
||||
|
||||
const persistDashboard = useCallback(async (updated: DashboardData) => {
|
||||
setData(updated);
|
||||
try {
|
||||
await fetch("/api/dashboard", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(updated),
|
||||
});
|
||||
setSaveIndicator(true);
|
||||
setTimeout(() => setSaveIndicator(false), 1500);
|
||||
} catch {
|
||||
// Ignore network error in offline mode
|
||||
}
|
||||
}, []);
|
||||
|
||||
const currentCategory = useMemo(
|
||||
() =>
|
||||
data.categories.find((c) => c.id === activeCategoryId) ||
|
||||
data.categories[0],
|
||||
[data.categories, activeCategoryId]
|
||||
);
|
||||
|
||||
const currentTabId =
|
||||
activeTabByCategory[currentCategory.id] ||
|
||||
currentCategory.tabs[0]?.id ||
|
||||
"";
|
||||
|
||||
const handleTabChange = (value: string) => {
|
||||
setActiveTabByCategory((prev) => ({
|
||||
...prev,
|
||||
[currentCategory.id]: value,
|
||||
}));
|
||||
};
|
||||
|
||||
// Chromium App-mode Popout Window (ideal on CachyOS F11 for Google Docs / Drive)
|
||||
const openChromiumAppPopup = useCallback((url: string, title: string) => {
|
||||
const width = Math.min(1440, window.screen.availWidth - 80);
|
||||
const height = Math.min(920, window.screen.availHeight - 80);
|
||||
const left = Math.round((window.screen.availWidth - width) / 2);
|
||||
const top = Math.round((window.screen.availHeight - height) / 2);
|
||||
|
||||
window.open(
|
||||
url,
|
||||
`home_app_${title.replace(/\s+/g, "_")}`,
|
||||
`popup=yes,width=${width},height=${height},left=${left},top=${top},menubar=no,toolbar=no,location=no,status=no`
|
||||
);
|
||||
}, []);
|
||||
|
||||
// Launch a tile according to its configured behavior (or forced mode)
|
||||
const handleLaunchTile = useCallback(
|
||||
(
|
||||
tile: ShortcutTile,
|
||||
forceMode?: "workspace" | "popup" | "external"
|
||||
) => {
|
||||
const mode = forceMode || tile.openBehavior || "workspace";
|
||||
|
||||
if (mode === "external") {
|
||||
window.open(tile.url, "_blank", "noopener,noreferrer");
|
||||
return;
|
||||
}
|
||||
|
||||
if (mode === "popup") {
|
||||
openChromiumAppPopup(tile.url, tile.title);
|
||||
return;
|
||||
}
|
||||
|
||||
// Default: "workspace" -> Open or focus an in-OS tab
|
||||
const existing = openWindows.find((w) => w.tileId === tile.id);
|
||||
if (existing) {
|
||||
setActiveViewId(existing.id);
|
||||
return;
|
||||
}
|
||||
|
||||
const newWin: OpenWindowTab = {
|
||||
id: `win-${tile.id}-${Date.now()}`,
|
||||
tileId: tile.id,
|
||||
title: tile.title,
|
||||
url: tile.url,
|
||||
icon: tile.icon,
|
||||
accentColor: tile.accentColor,
|
||||
};
|
||||
setOpenWindows((prev) => [...prev, newWin]);
|
||||
setActiveViewId(newWin.id);
|
||||
},
|
||||
[openWindows, openChromiumAppPopup]
|
||||
);
|
||||
|
||||
const handleOpenCustomUrl = useCallback(
|
||||
(url: string, label?: string) => {
|
||||
const newWin: OpenWindowTab = {
|
||||
id: `win-custom-${Date.now()}`,
|
||||
tileId: `custom-${Date.now()}`,
|
||||
title: label || url,
|
||||
url,
|
||||
icon: "Globe",
|
||||
accentColor: "cyan",
|
||||
};
|
||||
setOpenWindows((prev) => [...prev, newWin]);
|
||||
setActiveViewId(newWin.id);
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
||||
const handleCloseWindow = useCallback(
|
||||
(winId: string) => {
|
||||
setOpenWindows((prev) => {
|
||||
const remaining = prev.filter((w) => w.id !== winId);
|
||||
if (activeViewId === winId) {
|
||||
setActiveViewId(
|
||||
remaining.length > 0 ? remaining[remaining.length - 1].id : "bento"
|
||||
);
|
||||
}
|
||||
if (splitWindowId === winId) {
|
||||
setSplitWindowId(null);
|
||||
}
|
||||
return remaining;
|
||||
});
|
||||
},
|
||||
[activeViewId, splitWindowId]
|
||||
);
|
||||
|
||||
// CRUD Operations for Tiles & Tabs
|
||||
const handleSaveTile = (savedTile: ShortcutTile) => {
|
||||
const updatedCategories = data.categories.map((cat) => {
|
||||
if (cat.id !== currentCategory.id) return cat;
|
||||
return {
|
||||
...cat,
|
||||
tabs: cat.tabs.map((tab) => {
|
||||
if (tab.id !== currentTabId) return tab;
|
||||
const exists = tab.tiles.some((t) => t.id === savedTile.id);
|
||||
return {
|
||||
...tab,
|
||||
tiles: exists
|
||||
? tab.tiles.map((t) => (t.id === savedTile.id ? savedTile : t))
|
||||
: [...tab.tiles, savedTile],
|
||||
};
|
||||
}),
|
||||
};
|
||||
});
|
||||
|
||||
persistDashboard({ ...data, categories: updatedCategories });
|
||||
};
|
||||
|
||||
const handleDeleteTile = (tileId: string) => {
|
||||
const updatedCategories = data.categories.map((cat) => {
|
||||
if (cat.id !== currentCategory.id) return cat;
|
||||
return {
|
||||
...cat,
|
||||
tabs: cat.tabs.map((tab) => {
|
||||
if (tab.id !== currentTabId) return tab;
|
||||
return {
|
||||
...tab,
|
||||
tiles: tab.tiles.filter((t) => t.id !== tileId),
|
||||
};
|
||||
}),
|
||||
};
|
||||
});
|
||||
|
||||
persistDashboard({ ...data, categories: updatedCategories });
|
||||
};
|
||||
|
||||
const handleMoveTile = (tileId: string, direction: "left" | "right") => {
|
||||
const updatedCategories = data.categories.map((cat) => {
|
||||
if (cat.id !== currentCategory.id) return cat;
|
||||
return {
|
||||
...cat,
|
||||
tabs: cat.tabs.map((tab) => {
|
||||
if (tab.id !== currentTabId) return tab;
|
||||
const index = tab.tiles.findIndex((t) => t.id === tileId);
|
||||
if (index === -1) return tab;
|
||||
const targetIndex = direction === "left" ? index - 1 : index + 1;
|
||||
if (targetIndex < 0 || targetIndex >= tab.tiles.length) return tab;
|
||||
const copy = [...tab.tiles];
|
||||
const [moved] = copy.splice(index, 1);
|
||||
copy.splice(targetIndex, 0, moved);
|
||||
return { ...tab, tiles: copy };
|
||||
}),
|
||||
};
|
||||
});
|
||||
|
||||
persistDashboard({ ...data, categories: updatedCategories });
|
||||
};
|
||||
|
||||
const handleCreateTab = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!newTabLabel.trim()) return;
|
||||
const newTabId = `tab-${Date.now()}`;
|
||||
const updatedCategories = data.categories.map((cat) => {
|
||||
if (cat.id !== currentCategory.id) return cat;
|
||||
return {
|
||||
...cat,
|
||||
tabs: [
|
||||
...cat.tabs,
|
||||
{ id: newTabId, label: newTabLabel.trim(), tiles: [] },
|
||||
],
|
||||
};
|
||||
});
|
||||
persistDashboard({ ...data, categories: updatedCategories });
|
||||
setActiveTabByCategory((prev) => ({
|
||||
...prev,
|
||||
[currentCategory.id]: newTabId,
|
||||
}));
|
||||
setNewTabLabel("");
|
||||
setAddingTab(false);
|
||||
};
|
||||
|
||||
const handleDeleteCurrentTab = () => {
|
||||
if (currentCategory.tabs.length <= 1) return;
|
||||
const remainingTabs = currentCategory.tabs.filter(
|
||||
(t) => t.id !== currentTabId
|
||||
);
|
||||
const updatedCategories = data.categories.map((cat) =>
|
||||
cat.id === currentCategory.id ? { ...cat, tabs: remainingTabs } : cat
|
||||
);
|
||||
persistDashboard({ ...data, categories: updatedCategories });
|
||||
setActiveTabByCategory((prev) => ({
|
||||
...prev,
|
||||
[currentCategory.id]: remainingTabs[0].id,
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSaveNotes = () => {
|
||||
persistDashboard({ ...data, quickNote: noteText });
|
||||
};
|
||||
|
||||
const activeWindow = openWindows.find((w) => w.id === activeViewId) || null;
|
||||
const splitWindow = openWindows.find((w) => w.id === splitWindowId) || null;
|
||||
|
||||
return (
|
||||
<div className="flex h-dvh w-full overflow-hidden bg-zinc-950 text-zinc-100 select-none">
|
||||
{/* Subtle ambient background glow */}
|
||||
<div className="pointer-events-none fixed inset-0 z-0 overflow-hidden">
|
||||
<div className="absolute -top-40 left-1/4 h-96 w-96 rounded-full bg-indigo-600/10 blur-3xl" />
|
||||
<div className="absolute right-10 bottom-10 h-80 w-80 rounded-full bg-cyan-500/8 blur-3xl" />
|
||||
</div>
|
||||
|
||||
{/* Desktop Left Sidebar */}
|
||||
<div className="relative z-10 hidden md:flex">
|
||||
<DashboardSidebar
|
||||
categories={data.categories}
|
||||
activeCategoryId={currentCategory.id}
|
||||
onSelectCategory={(id) => {
|
||||
setActiveCategoryId(id);
|
||||
setActiveViewId("bento");
|
||||
setSearchQuery("");
|
||||
}}
|
||||
isEditMode={isEditMode}
|
||||
onToggleEditMode={() => setIsEditMode((prev) => !prev)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Central OS Area */}
|
||||
<div className="relative z-10 flex flex-1 flex-col overflow-hidden">
|
||||
{/* Top OS Window & Tab Bar (Always visible even when inside Nextcloud / Gitea) */}
|
||||
<OsTopBar
|
||||
openWindows={openWindows}
|
||||
activeViewId={activeViewId}
|
||||
splitWindowId={splitWindowId}
|
||||
onSelectView={(id) => setActiveViewId(id)}
|
||||
onCloseWindow={handleCloseWindow}
|
||||
onToggleSplitWindow={(id) =>
|
||||
setSplitWindowId((prev) => (prev === id ? null : id))
|
||||
}
|
||||
isEditMode={isEditMode}
|
||||
onToggleEditMode={() => setIsEditMode((prev) => !prev)}
|
||||
isNotesOpen={isNotesOpen}
|
||||
onToggleNotes={() => setIsNotesOpen((prev) => !prev)}
|
||||
onPopoutWindow={openChromiumAppPopup}
|
||||
/>
|
||||
|
||||
{/* Quick Notes Floating Drawer */}
|
||||
{isNotesOpen && (
|
||||
<div className="absolute top-13 right-4 z-40 w-80 sm:w-96 rounded-2xl border border-amber-500/30 bg-zinc-900/95 p-4 shadow-2xl backdrop-blur-xl">
|
||||
<div className="flex items-center justify-between pb-2.5 border-b border-white/10">
|
||||
<div className="flex items-center gap-2 text-xs font-semibold text-amber-300">
|
||||
<StickyNote className="size-4" />
|
||||
<span>Bloc-notes rapide (Synchronisé sur le serveur)</span>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsNotesOpen(false)}
|
||||
className="rounded p-1 text-zinc-400 hover:bg-white/10 hover:text-white"
|
||||
>
|
||||
<X className="size-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
<textarea
|
||||
value={noteText}
|
||||
onChange={(e) => setNoteText(e.target.value)}
|
||||
rows={6}
|
||||
placeholder="Notez vos devoirs, commandes Linux CachyOS, tâches Nextcloud..."
|
||||
className="mt-3 w-full resize-none rounded-xl border border-white/10 bg-zinc-950/80 p-3 text-xs text-zinc-100 placeholder:text-zinc-500 focus:border-amber-500/50 focus:outline-none"
|
||||
/>
|
||||
<div className="mt-2.5 flex items-center justify-between">
|
||||
<span className="text-[11px] text-zinc-500">
|
||||
{saveIndicator
|
||||
? "Sauvegardé dans data.json !"
|
||||
: "Accessible sur CachyOS & Galaxy S20 FE"}
|
||||
</span>
|
||||
<Button
|
||||
size="xs"
|
||||
onClick={handleSaveNotes}
|
||||
className="bg-amber-500 text-zinc-950 hover:bg-amber-400"
|
||||
>
|
||||
<Check className="size-3 mr-1" />
|
||||
Sauvegarder
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* VIEW 1: Active Embedded Web Window (or Split Screen) */}
|
||||
{activeViewId !== "bento" && activeWindow ? (
|
||||
<WindowWorkspace
|
||||
primaryWindow={activeWindow}
|
||||
splitWindow={splitWindow}
|
||||
onCloseWindow={handleCloseWindow}
|
||||
onCloseSplit={() => setSplitWindowId(null)}
|
||||
onBackToBento={() => setActiveViewId("bento")}
|
||||
onPopoutWindow={openChromiumAppPopup}
|
||||
/>
|
||||
) : (
|
||||
/* VIEW 2: Bento Grid Desktop */
|
||||
<>
|
||||
<HeaderOmnibox
|
||||
categoryName={currentCategory.name}
|
||||
categorySubtitle={currentCategory.subtitle}
|
||||
searchQuery={searchQuery}
|
||||
onSearchChange={setSearchQuery}
|
||||
onOpenCustomUrl={handleOpenCustomUrl}
|
||||
/>
|
||||
|
||||
<main className="flex-1 overflow-y-auto px-4 py-5 pb-24 sm:px-6 md:pb-8">
|
||||
<div className="mx-auto max-w-7xl">
|
||||
<Tabs
|
||||
value={currentTabId}
|
||||
onValueChange={handleTabChange}
|
||||
className="space-y-5"
|
||||
>
|
||||
{/* Sub-category Tabs Bar */}
|
||||
<div className="flex flex-wrap items-center justify-between gap-3">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<TabsList className="h-9 rounded-xl border border-white/8 bg-zinc-900/80 p-1">
|
||||
{currentCategory.tabs.map((tab) => (
|
||||
<TabsTrigger
|
||||
key={tab.id}
|
||||
value={tab.id}
|
||||
className="rounded-lg px-3 py-1 text-xs font-medium text-zinc-400 data-active:bg-zinc-800 data-active:text-white data-active:shadow-sm"
|
||||
>
|
||||
<Layers className="mr-1.5 size-3.5 opacity-70" />
|
||||
<span>{tab.label}</span>
|
||||
<span className="ml-1.5 rounded-full bg-white/8 px-1.5 py-0.2 font-mono text-[10px] text-zinc-400">
|
||||
{tab.tiles.length}
|
||||
</span>
|
||||
</TabsTrigger>
|
||||
))}
|
||||
</TabsList>
|
||||
|
||||
{isEditMode && !addingTab && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setAddingTab(true)}
|
||||
className="inline-flex h-8 items-center gap-1 rounded-xl border border-dashed border-amber-500/40 bg-amber-500/10 px-2.5 text-xs font-medium text-amber-300 transition-colors hover:bg-amber-500/20"
|
||||
>
|
||||
<Plus className="size-3.5" />
|
||||
<span>Nouvel onglet</span>
|
||||
</button>
|
||||
)}
|
||||
|
||||
{isEditMode && addingTab && (
|
||||
<form
|
||||
onSubmit={handleCreateTab}
|
||||
className="flex items-center gap-1.5"
|
||||
>
|
||||
<Input
|
||||
value={newTabLabel}
|
||||
onChange={(e) => setNewTabLabel(e.target.value)}
|
||||
placeholder="Nom de l'onglet..."
|
||||
className="h-8 w-36 border-amber-500/40 bg-zinc-900 text-xs"
|
||||
autoFocus
|
||||
/>
|
||||
<Button
|
||||
type="submit"
|
||||
size="xs"
|
||||
className="bg-amber-500 text-zinc-950"
|
||||
>
|
||||
Créer
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="xs"
|
||||
onClick={() => setAddingTab(false)}
|
||||
>
|
||||
Annuler
|
||||
</Button>
|
||||
</form>
|
||||
)}
|
||||
|
||||
{isEditMode && currentCategory.tabs.length > 1 && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleDeleteCurrentTab}
|
||||
title="Supprimer cet onglet"
|
||||
className="inline-flex h-8 items-center gap-1 rounded-xl border border-rose-500/30 bg-rose-500/10 px-2.5 text-xs text-rose-300 hover:bg-rose-500/20"
|
||||
>
|
||||
<Trash2 className="size-3.5" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="hidden sm:flex items-center gap-2 text-xs text-zinc-500">
|
||||
{saveIndicator && (
|
||||
<span className="text-emerald-400 font-medium">
|
||||
✓ Modifications enregistrées
|
||||
</span>
|
||||
)}
|
||||
<span>
|
||||
Cliquez sur une tuile pour l'ouvrir dans Home OS
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tab Panels */}
|
||||
{currentCategory.tabs.map((tab) => {
|
||||
const filteredTiles = searchQuery.trim()
|
||||
? tab.tiles.filter(
|
||||
(tile) =>
|
||||
tile.title
|
||||
.toLowerCase()
|
||||
.includes(searchQuery.toLowerCase()) ||
|
||||
tile.description
|
||||
.toLowerCase()
|
||||
.includes(searchQuery.toLowerCase()) ||
|
||||
tile.url
|
||||
.toLowerCase()
|
||||
.includes(searchQuery.toLowerCase())
|
||||
)
|
||||
: tab.tiles;
|
||||
|
||||
return (
|
||||
<TabsContent key={tab.id} value={tab.id} className="mt-0">
|
||||
<BentoGrid
|
||||
tiles={filteredTiles}
|
||||
isEditMode={isEditMode}
|
||||
onLaunchTile={handleLaunchTile}
|
||||
onAddTile={() => {
|
||||
setEditingTile(null);
|
||||
setEditorOpen(true);
|
||||
}}
|
||||
onEditTile={(tile) => {
|
||||
setEditingTile(tile);
|
||||
setEditorOpen(true);
|
||||
}}
|
||||
onDeleteTile={handleDeleteTile}
|
||||
onMoveTile={handleMoveTile}
|
||||
/>
|
||||
</TabsContent>
|
||||
);
|
||||
})}
|
||||
</Tabs>
|
||||
</div>
|
||||
</main>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Mobile Bottom Dock for Samsung Galaxy S20 FE */}
|
||||
<nav className="fixed right-0 bottom-0 left-0 z-30 flex items-center justify-around border-t border-white/10 bg-zinc-950/95 px-2 py-2 backdrop-blur-xl md:hidden">
|
||||
{data.categories.map((cat) => {
|
||||
const isActive =
|
||||
cat.id === currentCategory.id && activeViewId === "bento";
|
||||
return (
|
||||
<button
|
||||
key={cat.id}
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setActiveCategoryId(cat.id);
|
||||
setActiveViewId("bento");
|
||||
}}
|
||||
className={`flex flex-col items-center gap-1 rounded-xl px-3 py-1.5 text-[10px] font-medium transition-all ${
|
||||
isActive
|
||||
? "bg-indigo-500/20 text-indigo-300"
|
||||
: "text-zinc-400 hover:text-zinc-200"
|
||||
}`}
|
||||
>
|
||||
<DynamicIcon name={cat.icon} className="size-4" />
|
||||
<span className="truncate max-w-[64px]">{cat.name}</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
{/* Tile Create / Edit Modal */}
|
||||
<TileEditorModal
|
||||
key={editingTile?.id || (editorOpen ? "new-tile" : "closed")}
|
||||
open={editorOpen}
|
||||
onOpenChange={setEditorOpen}
|
||||
initialTile={editingTile}
|
||||
onSave={handleSaveTile}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,218 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Sparkles,
|
||||
Search,
|
||||
Globe,
|
||||
ArrowRight,
|
||||
Loader2,
|
||||
X,
|
||||
} from "lucide-react";
|
||||
|
||||
interface HeaderOmniboxProps {
|
||||
categoryName: string;
|
||||
categorySubtitle: string;
|
||||
searchQuery: string;
|
||||
onSearchChange: (q: string) => void;
|
||||
onOpenCustomUrl: (url: string, title?: string) => void;
|
||||
}
|
||||
|
||||
export function HeaderOmnibox({
|
||||
categoryName,
|
||||
categorySubtitle,
|
||||
searchQuery,
|
||||
onSearchChange,
|
||||
onOpenCustomUrl,
|
||||
}: HeaderOmniboxProps) {
|
||||
const [mode, setMode] = useState<"search" | "gemini" | "url">("search");
|
||||
const [geminiPrompt, setGeminiPrompt] = useState("");
|
||||
const [geminiLoading, setGeminiLoading] = useState(false);
|
||||
const [geminiAnswer, setGeminiAnswer] = useState<string | null>(null);
|
||||
const [customUrlInput, setCustomUrlInput] = useState("");
|
||||
|
||||
const handleGeminiSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!geminiPrompt.trim() || geminiLoading) return;
|
||||
|
||||
setGeminiLoading(true);
|
||||
try {
|
||||
const res = await fetch("/api/gemini", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ prompt: geminiPrompt }),
|
||||
});
|
||||
const json = await res.json();
|
||||
setGeminiAnswer(
|
||||
json.answer || json.error || "Aucune réponse reçue de Gemini."
|
||||
);
|
||||
} catch {
|
||||
setGeminiAnswer("Impossible de joindre la route /api/gemini.");
|
||||
} finally {
|
||||
setGeminiLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleUrlSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
const raw = customUrlInput.trim();
|
||||
if (!raw) return;
|
||||
|
||||
let finalUrl = raw;
|
||||
if (!/^https?:\/\//i.test(raw)) {
|
||||
if (raw.includes(".") && !raw.includes(" ")) {
|
||||
finalUrl = `https://${raw}`;
|
||||
} else {
|
||||
// DuckDuckGo / Wikipedia embed-friendly search or direct URL
|
||||
finalUrl = `https://fr.wikipedia.org/w/index.php?search=${encodeURIComponent(raw)}`;
|
||||
}
|
||||
}
|
||||
|
||||
onOpenCustomUrl(finalUrl, raw);
|
||||
setCustomUrlInput("");
|
||||
};
|
||||
|
||||
return (
|
||||
<header className="shrink-0 border-b border-white/8 bg-zinc-950/60 px-4 py-3 sm:px-6 backdrop-blur-xl">
|
||||
<div className="mx-auto flex max-w-7xl flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
|
||||
{/* Active Environment Title */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-lg sm:text-xl font-semibold tracking-tight text-white">
|
||||
{categoryName}
|
||||
</h1>
|
||||
<p className="text-xs text-zinc-400 line-clamp-1">
|
||||
{categorySubtitle}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Central Omnibox : Filter + Open Web Tab + Gemini AI */}
|
||||
<div className="flex flex-1 max-w-2xl items-center gap-2">
|
||||
<div className="relative flex flex-1 items-center rounded-2xl border border-white/10 bg-zinc-900/85 p-1 shadow-inner transition-colors focus-within:border-indigo-500/50 focus-within:ring-2 focus-within:ring-indigo-500/20">
|
||||
{/* Mode Switcher Pill */}
|
||||
<div className="flex items-center rounded-xl bg-zinc-950/90 p-0.5 shrink-0">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setMode("search")}
|
||||
className={`flex items-center gap-1 rounded-lg px-2.5 py-1.5 text-xs font-medium transition-all ${
|
||||
mode === "search"
|
||||
? "bg-zinc-800 text-zinc-100 shadow-xs"
|
||||
: "text-zinc-400 hover:text-zinc-200"
|
||||
}`}
|
||||
>
|
||||
<Search className="size-3.5" />
|
||||
<span className="hidden sm:inline">Filtrer</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setMode("url")}
|
||||
className={`flex items-center gap-1 rounded-lg px-2.5 py-1.5 text-xs font-medium transition-all ${
|
||||
mode === "url"
|
||||
? "bg-cyan-500/20 text-cyan-200 ring-1 ring-cyan-500/40"
|
||||
: "text-zinc-400 hover:text-zinc-200"
|
||||
}`}
|
||||
>
|
||||
<Globe className="size-3.5" />
|
||||
<span className="hidden sm:inline">Ouvrir URL</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setMode("gemini")}
|
||||
className={`flex items-center gap-1 rounded-lg px-2.5 py-1.5 text-xs font-medium transition-all ${
|
||||
mode === "gemini"
|
||||
? "bg-gradient-to-r from-indigo-500 to-blue-500 text-white shadow-xs"
|
||||
: "text-zinc-400 hover:text-zinc-200"
|
||||
}`}
|
||||
>
|
||||
<Sparkles className="size-3.5" />
|
||||
<span className="hidden sm:inline">Gemini</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{mode === "search" && (
|
||||
<Input
|
||||
value={searchQuery}
|
||||
onChange={(e) => onSearchChange(e.target.value)}
|
||||
placeholder="Rechercher Nextcloud, Docs, Drive, Gitea..."
|
||||
className="h-8 border-0 bg-transparent text-sm text-zinc-100 placeholder:text-zinc-500 focus-visible:ring-0 dark:bg-transparent"
|
||||
/>
|
||||
)}
|
||||
|
||||
{mode === "url" && (
|
||||
<form
|
||||
onSubmit={handleUrlSubmit}
|
||||
className="flex flex-1 items-center"
|
||||
>
|
||||
<Input
|
||||
value={customUrlInput}
|
||||
onChange={(e) => setCustomUrlInput(e.target.value)}
|
||||
placeholder="Entrer une URL (ex: cloud.lafabriquedesgenies.be) à ouvrir en onglet..."
|
||||
className="h-8 border-0 bg-transparent text-sm text-zinc-100 placeholder:text-zinc-500 focus-visible:ring-0 dark:bg-transparent"
|
||||
/>
|
||||
<Button
|
||||
type="submit"
|
||||
size="icon-sm"
|
||||
className="mr-1 rounded-xl bg-cyan-500 text-zinc-950 hover:bg-cyan-400"
|
||||
>
|
||||
<ArrowRight className="size-3.5" />
|
||||
</Button>
|
||||
</form>
|
||||
)}
|
||||
|
||||
{mode === "gemini" && (
|
||||
<form
|
||||
onSubmit={handleGeminiSubmit}
|
||||
className="flex flex-1 items-center"
|
||||
>
|
||||
<Input
|
||||
value={geminiPrompt}
|
||||
onChange={(e) => setGeminiPrompt(e.target.value)}
|
||||
placeholder="Demander à Gemini (résumer un cours, traduire, formule Excel)..."
|
||||
className="h-8 border-0 bg-transparent text-sm text-zinc-100 placeholder:text-zinc-500 focus-visible:ring-0 dark:bg-transparent"
|
||||
/>
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={geminiLoading}
|
||||
size="icon-sm"
|
||||
className="mr-1 rounded-xl bg-indigo-500 text-white hover:bg-indigo-400"
|
||||
>
|
||||
{geminiLoading ? (
|
||||
<Loader2 className="size-3.5 animate-spin" />
|
||||
) : (
|
||||
<ArrowRight className="size-3.5" />
|
||||
)}
|
||||
</Button>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Gemini Instant Answer Drawer */}
|
||||
{mode === "gemini" && geminiAnswer && (
|
||||
<div className="mx-auto mt-3 max-w-7xl rounded-xl border border-indigo-500/30 bg-indigo-950/40 p-3.5 text-xs text-indigo-100">
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="flex items-start gap-2.5">
|
||||
<Sparkles className="mt-0.5 size-4 text-indigo-400 shrink-0" />
|
||||
<div className="whitespace-pre-wrap leading-relaxed">
|
||||
{geminiAnswer}
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setGeminiAnswer(null)}
|
||||
className="rounded-md p-1 text-indigo-300 hover:bg-indigo-500/20"
|
||||
>
|
||||
<X className="size-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</header>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,102 @@
|
||||
import {
|
||||
Server,
|
||||
User,
|
||||
Briefcase,
|
||||
Wrench,
|
||||
Sparkles,
|
||||
Container,
|
||||
ShieldCheck,
|
||||
Activity,
|
||||
Cloud,
|
||||
KeyRound,
|
||||
Radar,
|
||||
Film,
|
||||
Image,
|
||||
RefreshCw,
|
||||
Network,
|
||||
Router,
|
||||
Mail,
|
||||
Rss,
|
||||
Bookmark,
|
||||
Wallet,
|
||||
FileText,
|
||||
GitBranch,
|
||||
Code2,
|
||||
BookOpen,
|
||||
NotebookPen,
|
||||
Kanban,
|
||||
Cpu,
|
||||
FileSpreadsheet,
|
||||
PenTool,
|
||||
Terminal,
|
||||
Share2,
|
||||
Bot,
|
||||
Search,
|
||||
Globe,
|
||||
Folder,
|
||||
Database,
|
||||
Layers,
|
||||
ExternalLink,
|
||||
HardDrive,
|
||||
Calendar,
|
||||
GraduationCap,
|
||||
AppWindow,
|
||||
type LucideIcon,
|
||||
} from "lucide-react";
|
||||
|
||||
export const iconRegistry: Record<string, LucideIcon> = {
|
||||
Server,
|
||||
User,
|
||||
Briefcase,
|
||||
Wrench,
|
||||
Sparkles,
|
||||
Container,
|
||||
ShieldCheck,
|
||||
Activity,
|
||||
Cloud,
|
||||
KeyRound,
|
||||
Radar,
|
||||
Film,
|
||||
Image,
|
||||
RefreshCw,
|
||||
Network,
|
||||
Router,
|
||||
Mail,
|
||||
Rss,
|
||||
Bookmark,
|
||||
Wallet,
|
||||
FileText,
|
||||
GitBranch,
|
||||
Code2,
|
||||
BookOpen,
|
||||
NotebookPen,
|
||||
Kanban,
|
||||
Cpu,
|
||||
FileSpreadsheet,
|
||||
PenTool,
|
||||
Terminal,
|
||||
Share2,
|
||||
Bot,
|
||||
Search,
|
||||
Globe,
|
||||
Folder,
|
||||
Database,
|
||||
Layers,
|
||||
ExternalLink,
|
||||
HardDrive,
|
||||
Calendar,
|
||||
GraduationCap,
|
||||
AppWindow,
|
||||
};
|
||||
|
||||
export const availableIconNames = Object.keys(iconRegistry);
|
||||
|
||||
interface DynamicIconProps {
|
||||
name: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function DynamicIcon({ name, className = "size-5" }: DynamicIconProps) {
|
||||
const IconComponent = iconRegistry[name] || Globe;
|
||||
return <IconComponent className={className} />;
|
||||
}
|
||||
@@ -0,0 +1,234 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { OpenWindowTab } from "@/types/dashboard";
|
||||
import { DynamicIcon } from "./icon-mapper";
|
||||
import {
|
||||
LayoutGrid,
|
||||
X,
|
||||
Maximize2,
|
||||
Minimize2,
|
||||
StickyNote,
|
||||
SlidersHorizontal,
|
||||
ExternalLink,
|
||||
Columns2,
|
||||
} from "lucide-react";
|
||||
|
||||
interface OsTopBarProps {
|
||||
openWindows: OpenWindowTab[];
|
||||
activeViewId: string; // "bento" or window.id
|
||||
splitWindowId: string | null;
|
||||
onSelectView: (id: string) => void;
|
||||
onCloseWindow: (id: string) => void;
|
||||
onToggleSplitWindow: (id: string) => void;
|
||||
isEditMode: boolean;
|
||||
onToggleEditMode: () => void;
|
||||
isNotesOpen: boolean;
|
||||
onToggleNotes: () => void;
|
||||
onPopoutWindow: (url: string, title: string) => void;
|
||||
}
|
||||
|
||||
export function OsTopBar({
|
||||
openWindows,
|
||||
activeViewId,
|
||||
splitWindowId,
|
||||
onSelectView,
|
||||
onCloseWindow,
|
||||
onToggleSplitWindow,
|
||||
isEditMode,
|
||||
onToggleEditMode,
|
||||
isNotesOpen,
|
||||
onToggleNotes,
|
||||
onPopoutWindow,
|
||||
}: OsTopBarProps) {
|
||||
const [clock, setClock] = useState<{ time: string; date: string }>({
|
||||
time: "--:--",
|
||||
date: "",
|
||||
});
|
||||
const [isFullscreen, setIsFullscreen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const updateClock = () => {
|
||||
const now = new Date();
|
||||
setClock({
|
||||
time: now.toLocaleTimeString("fr-BE", {
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
}),
|
||||
date: now.toLocaleDateString("fr-BE", {
|
||||
weekday: "short",
|
||||
day: "numeric",
|
||||
month: "short",
|
||||
}),
|
||||
});
|
||||
};
|
||||
updateClock();
|
||||
const timer = setInterval(updateClock, 15000);
|
||||
|
||||
const onFullscreenChange = () => {
|
||||
setIsFullscreen(Boolean(document.fullscreenElement));
|
||||
};
|
||||
document.addEventListener("fullscreenchange", onFullscreenChange);
|
||||
|
||||
return () => {
|
||||
clearInterval(timer);
|
||||
document.removeEventListener("fullscreenchange", onFullscreenChange);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const toggleFullscreen = async () => {
|
||||
try {
|
||||
if (!document.fullscreenElement) {
|
||||
await document.documentElement.requestFullscreen();
|
||||
} else {
|
||||
await document.exitFullscreen();
|
||||
}
|
||||
} catch {
|
||||
// Fallback F11 handled by browser
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex h-11 shrink-0 items-center justify-between gap-2 border-b border-white/10 bg-zinc-950/95 px-3 select-none backdrop-blur-xl">
|
||||
{/* Left: Home Desktop Button + Running App Tabs (Browser inside OS) */}
|
||||
<div className="flex flex-1 items-center gap-1.5 overflow-x-auto no-scrollbar">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onSelectView("bento")}
|
||||
className={`flex h-8 shrink-0 items-center gap-2 rounded-lg px-3 text-xs font-medium transition-all ${
|
||||
activeViewId === "bento"
|
||||
? "bg-indigo-500/20 text-indigo-200 ring-1 ring-indigo-500/40 shadow-xs"
|
||||
: "bg-zinc-900/80 text-zinc-400 hover:bg-zinc-800 hover:text-zinc-200"
|
||||
}`}
|
||||
>
|
||||
<LayoutGrid className="size-3.5 text-indigo-400" />
|
||||
<span>Bureau Bento</span>
|
||||
</button>
|
||||
|
||||
{openWindows.length > 0 && (
|
||||
<div className="mx-1 h-4 w-px shrink-0 bg-white/10" />
|
||||
)}
|
||||
|
||||
{/* Active Web App Tabs */}
|
||||
{openWindows.map((win) => {
|
||||
const isFocused = activeViewId === win.id;
|
||||
const isSplit = splitWindowId === win.id;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={win.id}
|
||||
className={`group flex h-8 max-w-[220px] shrink-0 items-center gap-1.5 rounded-lg border px-2.5 text-xs transition-all ${
|
||||
isFocused
|
||||
? "border-white/20 bg-zinc-800/90 text-white shadow-sm"
|
||||
: isSplit
|
||||
? "border-cyan-500/30 bg-cyan-950/30 text-cyan-200"
|
||||
: "border-white/5 bg-zinc-900/60 text-zinc-400 hover:bg-zinc-900 hover:text-zinc-200"
|
||||
}`}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onSelectView(win.id)}
|
||||
className="flex items-center gap-1.5 truncate py-1 text-left"
|
||||
>
|
||||
<DynamicIcon
|
||||
name={win.icon}
|
||||
className="size-3.5 shrink-0 text-indigo-400"
|
||||
/>
|
||||
<span className="truncate font-medium">{win.title}</span>
|
||||
</button>
|
||||
|
||||
<div className="ml-1 flex items-center gap-0.5">
|
||||
{activeViewId !== "bento" && activeViewId !== win.id && (
|
||||
<button
|
||||
type="button"
|
||||
title="Afficher en écran scindé (Split View)"
|
||||
onClick={() => onToggleSplitWindow(win.id)}
|
||||
className={`hidden md:inline-flex rounded p-0.5 transition-colors ${
|
||||
isSplit
|
||||
? "bg-cyan-500/20 text-cyan-300"
|
||||
: "text-zinc-500 hover:bg-white/10 hover:text-zinc-200"
|
||||
}`}
|
||||
>
|
||||
<Columns2 className="size-3" />
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
title="Ouvrir en fenêtre Chromium dédiée"
|
||||
onClick={() => onPopoutWindow(win.url, win.title)}
|
||||
className="rounded p-0.5 text-zinc-500 hover:bg-white/10 hover:text-zinc-200"
|
||||
>
|
||||
<ExternalLink className="size-3" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
title="Fermer cet onglet"
|
||||
onClick={() => onCloseWindow(win.id)}
|
||||
className="rounded p-0.5 text-zinc-500 hover:bg-rose-500/20 hover:text-rose-300"
|
||||
>
|
||||
<X className="size-3" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Right: OS System Tray (Scratchpad, Edit Mode, Fullscreen F11, Clock) */}
|
||||
<div className="flex shrink-0 items-center gap-1.5">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onToggleNotes}
|
||||
title="Bloc-notes rapide (Idées, devoirs, liens)"
|
||||
className={`flex h-7 items-center gap-1.5 rounded-lg px-2.5 text-xs font-medium transition-colors ${
|
||||
isNotesOpen
|
||||
? "bg-amber-500/20 text-amber-300 ring-1 ring-amber-500/40"
|
||||
: "text-zinc-400 hover:bg-white/8 hover:text-zinc-200"
|
||||
}`}
|
||||
>
|
||||
<StickyNote className="size-3.5" />
|
||||
<span className="hidden lg:inline">Notes</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={onToggleEditMode}
|
||||
title="Personnaliser le tableau de bord"
|
||||
className={`flex h-7 items-center gap-1.5 rounded-lg px-2.5 text-xs font-medium transition-colors ${
|
||||
isEditMode
|
||||
? "bg-amber-500 text-zinc-950 font-semibold"
|
||||
: "text-zinc-400 hover:bg-white/8 hover:text-zinc-200"
|
||||
}`}
|
||||
>
|
||||
<SlidersHorizontal className="size-3.5" />
|
||||
<span className="hidden sm:inline">
|
||||
{isEditMode ? "Édition active" : "Éditer"}
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={toggleFullscreen}
|
||||
title="Plein écran (ou touche F11 sur CachyOS)"
|
||||
className="hidden sm:flex h-7 items-center gap-1 rounded-lg bg-zinc-900/90 px-2 text-xs text-zinc-400 hover:bg-zinc-800 hover:text-white border border-white/5"
|
||||
>
|
||||
{isFullscreen ? (
|
||||
<Minimize2 className="size-3.5 text-emerald-400" />
|
||||
) : (
|
||||
<Maximize2 className="size-3.5" />
|
||||
)}
|
||||
<span className="hidden xl:inline text-[11px] font-mono">F11</span>
|
||||
</button>
|
||||
|
||||
<div className="ml-1 flex items-center gap-2 rounded-lg border border-white/8 bg-zinc-900/70 px-2.5 py-1 text-xs">
|
||||
<span className="hidden md:inline text-zinc-400 capitalize">
|
||||
{clock.date}
|
||||
</span>
|
||||
<span className="font-mono font-semibold text-zinc-100">
|
||||
{clock.time}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,165 @@
|
||||
"use client";
|
||||
|
||||
import { EnvironmentCategory } from "@/types/dashboard";
|
||||
import { DynamicIcon } from "./icon-mapper";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import { Cpu, HardDrive, Lock, Unlock, Plus, Command } from "lucide-react";
|
||||
|
||||
interface SidebarProps {
|
||||
categories: EnvironmentCategory[];
|
||||
activeCategoryId: string;
|
||||
onSelectCategory: (id: string) => void;
|
||||
isEditMode: boolean;
|
||||
onToggleEditMode: () => void;
|
||||
}
|
||||
|
||||
export function DashboardSidebar({
|
||||
categories,
|
||||
activeCategoryId,
|
||||
onSelectCategory,
|
||||
isEditMode,
|
||||
onToggleEditMode,
|
||||
}: SidebarProps) {
|
||||
return (
|
||||
<aside className="flex h-screen w-68 shrink-0 flex-col border-r border-white/10 bg-zinc-950/80 backdrop-blur-xl select-none">
|
||||
{/* Brand / OS Header */}
|
||||
<div className="flex items-center justify-between px-5 py-5">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex size-9 items-center justify-center rounded-xl bg-gradient-to-br from-indigo-500 via-blue-500 to-cyan-400 text-white shadow-lg shadow-blue-500/20">
|
||||
<Command className="size-5" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-base font-semibold tracking-tight text-zinc-100">
|
||||
Home
|
||||
</span>
|
||||
<span className="rounded-full border border-emerald-500/30 bg-emerald-500/10 px-1.5 py-0.5 text-[10px] font-medium text-emerald-400">
|
||||
OS v1
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-xs text-zinc-400">Portail Personnel</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Separator className="bg-white/8" />
|
||||
|
||||
{/* Environments Navigation */}
|
||||
<div className="flex-1 overflow-y-auto px-3 py-4">
|
||||
<div className="mb-2 px-2.5 flex items-center justify-between">
|
||||
<span className="text-[11px] font-semibold tracking-wider text-zinc-500 uppercase">
|
||||
Environnements
|
||||
</span>
|
||||
{isEditMode && (
|
||||
<button
|
||||
type="button"
|
||||
title="Ajouter une catégorie"
|
||||
className="flex size-5 items-center justify-center rounded-md text-zinc-400 hover:bg-white/10 hover:text-zinc-100 transition-colors"
|
||||
>
|
||||
<Plus className="size-3.5" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<nav className="space-y-1">
|
||||
{categories.map((category) => {
|
||||
const isActive = category.id === activeCategoryId;
|
||||
const totalTiles = category.tabs.reduce(
|
||||
(acc, tab) => acc + tab.tiles.length,
|
||||
0
|
||||
);
|
||||
|
||||
return (
|
||||
<button
|
||||
key={category.id}
|
||||
type="button"
|
||||
onClick={() => onSelectCategory(category.id)}
|
||||
className={`group flex w-full items-center justify-between rounded-xl px-3 py-2.5 text-sm font-medium transition-all duration-150 ${
|
||||
isActive
|
||||
? "bg-white/10 text-white shadow-sm ring-1 ring-white/15"
|
||||
: "text-zinc-400 hover:bg-white/5 hover:text-zinc-200"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<div
|
||||
className={`flex size-8 items-center justify-center rounded-lg transition-colors ${
|
||||
isActive
|
||||
? "bg-indigo-500/20 text-indigo-300 ring-1 ring-indigo-400/30"
|
||||
: "bg-zinc-900/80 text-zinc-400 group-hover:bg-zinc-800 group-hover:text-zinc-200"
|
||||
}`}
|
||||
>
|
||||
<DynamicIcon name={category.icon} className="size-4" />
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<div className="leading-none">{category.name}</div>
|
||||
<div className="mt-1 text-[11px] font-normal text-zinc-500 line-clamp-1">
|
||||
{category.tabs.length}{" "}
|
||||
{category.tabs.length > 1 ? "onglets" : "onglet"}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Badge
|
||||
variant="secondary"
|
||||
className={`border-0 text-[11px] font-mono ${
|
||||
isActive
|
||||
? "bg-white/15 text-zinc-100"
|
||||
: "bg-zinc-900 text-zinc-500 group-hover:text-zinc-300"
|
||||
}`}
|
||||
>
|
||||
{totalTiles}
|
||||
</Badge>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
{/* Footer : Edit Mode + Lightweight Server Status */}
|
||||
<div className="border-t border-white/8 p-3.5 space-y-3">
|
||||
<Button
|
||||
variant={isEditMode ? "default" : "outline"}
|
||||
size="lg"
|
||||
onClick={onToggleEditMode}
|
||||
className={`w-full justify-center gap-2 rounded-xl font-medium transition-all ${
|
||||
isEditMode
|
||||
? "bg-amber-500 text-zinc-950 hover:bg-amber-400 shadow-lg shadow-amber-500/20"
|
||||
: "border-white/10 bg-zinc-900/70 text-zinc-300 hover:bg-zinc-800/80 hover:text-white"
|
||||
}`}
|
||||
>
|
||||
{isEditMode ? (
|
||||
<>
|
||||
<Unlock className="size-4" />
|
||||
<span>Mode Édition actif</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Lock className="size-4" />
|
||||
<span>Déverrouiller la grille</span>
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
|
||||
<div className="rounded-xl border border-white/6 bg-zinc-900/50 px-3 py-2.5">
|
||||
<div className="flex items-center justify-between text-[11px] text-zinc-400">
|
||||
<span className="flex items-center gap-1.5">
|
||||
<span className="size-1.5 rounded-full bg-emerald-400" />
|
||||
Statique & Zéro Polling
|
||||
</span>
|
||||
<span className="font-mono text-[10px] text-zinc-500">Docker</span>
|
||||
</div>
|
||||
<div className="mt-1.5 flex items-center gap-3 text-[11px] text-zinc-500">
|
||||
<span className="flex items-center gap-1">
|
||||
<Cpu className="size-3 text-zinc-400" /> Core i3
|
||||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<HardDrive className="size-3 text-zinc-400" /> 8 Go RAM
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,283 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { ShortcutTile, TileSize, OpenBehavior } from "@/types/dashboard";
|
||||
import { availableIconNames, DynamicIcon } from "./icon-mapper";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
|
||||
interface TileEditorModalProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
initialTile: ShortcutTile | null;
|
||||
onSave: (tile: ShortcutTile) => void;
|
||||
}
|
||||
|
||||
const accentOptions = [
|
||||
"indigo",
|
||||
"blue",
|
||||
"sky",
|
||||
"cyan",
|
||||
"teal",
|
||||
"emerald",
|
||||
"amber",
|
||||
"rose",
|
||||
"violet",
|
||||
"purple",
|
||||
"slate",
|
||||
];
|
||||
|
||||
export function TileEditorModal({
|
||||
open,
|
||||
onOpenChange,
|
||||
initialTile,
|
||||
onSave,
|
||||
}: TileEditorModalProps) {
|
||||
const [title, setTitle] = useState(initialTile?.title || "");
|
||||
const [description, setDescription] = useState(
|
||||
initialTile?.description || ""
|
||||
);
|
||||
const [url, setUrl] = useState(initialTile?.url || "https://");
|
||||
const [icon, setIcon] = useState(initialTile?.icon || "Globe");
|
||||
const [badge, setBadge] = useState(initialTile?.badge || "");
|
||||
const [size, setSize] = useState<TileSize>(initialTile?.size || "1x1");
|
||||
const [accentColor, setAccentColor] = useState(
|
||||
initialTile?.accentColor || "indigo"
|
||||
);
|
||||
const [openBehavior, setOpenBehavior] = useState<OpenBehavior>(
|
||||
initialTile?.openBehavior || "workspace"
|
||||
);
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!title.trim() || !url.trim()) return;
|
||||
|
||||
onSave({
|
||||
id: initialTile?.id || `tile-${Date.now()}`,
|
||||
title: title.trim(),
|
||||
description: description.trim() || "Raccourci personnalisé",
|
||||
url: url.trim(),
|
||||
icon,
|
||||
badge: badge.trim() || undefined,
|
||||
size,
|
||||
accentColor,
|
||||
openBehavior,
|
||||
});
|
||||
onOpenChange(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="sm:max-w-lg border-white/10 bg-zinc-950 text-zinc-100">
|
||||
<DialogHeader>
|
||||
<DialogTitle>
|
||||
{initialTile ? "Modifier le raccourci" : "Nouveau raccourci"}
|
||||
</DialogTitle>
|
||||
<DialogDescription className="text-zinc-400">
|
||||
Configurez la tuile et la manière dont elle s'ouvre dans votre
|
||||
environnement Home OS.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4 py-2">
|
||||
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-xs font-medium text-zinc-300">
|
||||
Titre de l'application
|
||||
</label>
|
||||
<Input
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
placeholder="Ex: Nextcloud Office, Google Docs..."
|
||||
required
|
||||
className="border-white/10 bg-zinc-900 text-zinc-100"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-xs font-medium text-zinc-300">
|
||||
Badge (optionnel)
|
||||
</label>
|
||||
<Input
|
||||
value={badge}
|
||||
onChange={(e) => setBadge(e.target.value)}
|
||||
placeholder="Ex: École, Word/Excel, Docker..."
|
||||
className="border-white/10 bg-zinc-900 text-zinc-100"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-xs font-medium text-zinc-300">
|
||||
Adresse URL complète
|
||||
</label>
|
||||
<Input
|
||||
value={url}
|
||||
onChange={(e) => setUrl(e.target.value)}
|
||||
placeholder="https://cloud.lafabriquedesgenies.be"
|
||||
required
|
||||
className="border-white/10 bg-zinc-900 font-mono text-xs text-zinc-100"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-xs font-medium text-zinc-300">
|
||||
Description courte
|
||||
</label>
|
||||
<Input
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
placeholder="Documents de cours, feuilles de calcul..."
|
||||
className="border-white/10 bg-zinc-900 text-zinc-100"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Open Behavior Selection */}
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-xs font-medium text-zinc-300">
|
||||
Mode d'ouverture (Comportement OS)
|
||||
</label>
|
||||
<div className="grid grid-cols-1 gap-2 sm:grid-cols-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOpenBehavior("workspace")}
|
||||
className={`rounded-xl border p-2.5 text-left text-xs transition-all ${
|
||||
openBehavior === "workspace"
|
||||
? "border-indigo-500 bg-indigo-500/15 text-white"
|
||||
: "border-white/10 bg-zinc-900/60 text-zinc-400 hover:text-zinc-200"
|
||||
}`}
|
||||
>
|
||||
<div className="font-semibold">Onglet Home (Intégré)</div>
|
||||
<div className="mt-0.5 text-[10px] opacity-80">
|
||||
Idéal pour Nextcloud, Gitea, outils perso
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOpenBehavior("popup")}
|
||||
className={`rounded-xl border p-2.5 text-left text-xs transition-all ${
|
||||
openBehavior === "popup"
|
||||
? "border-indigo-500 bg-indigo-500/15 text-white"
|
||||
: "border-white/10 bg-zinc-900/60 text-zinc-400 hover:text-zinc-200"
|
||||
}`}
|
||||
>
|
||||
<div className="font-semibold">Fenêtre App (Pop-up)</div>
|
||||
<div className="mt-0.5 text-[10px] opacity-80">
|
||||
Idéal pour Google Docs, Drive, Mail
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOpenBehavior("external")}
|
||||
className={`rounded-xl border p-2.5 text-left text-xs transition-all ${
|
||||
openBehavior === "external"
|
||||
? "border-indigo-500 bg-indigo-500/15 text-white"
|
||||
: "border-white/10 bg-zinc-900/60 text-zinc-400 hover:text-zinc-200"
|
||||
}`}
|
||||
>
|
||||
<div className="font-semibold">Nouvel onglet</div>
|
||||
<div className="mt-0.5 text-[10px] opacity-80">
|
||||
Onglet navigateur classique
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-xs font-medium text-zinc-300">
|
||||
Taille Bento
|
||||
</label>
|
||||
<div className="flex gap-1.5">
|
||||
{(["1x1", "2x1", "2x2"] as TileSize[]).map((s) => (
|
||||
<button
|
||||
key={s}
|
||||
type="button"
|
||||
onClick={() => setSize(s)}
|
||||
className={`flex-1 rounded-lg border py-1.5 text-xs font-mono transition-colors ${
|
||||
size === s
|
||||
? "border-indigo-500 bg-indigo-500/20 text-white"
|
||||
: "border-white/10 bg-zinc-900 text-zinc-400"
|
||||
}`}
|
||||
>
|
||||
{s}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-xs font-medium text-zinc-300">
|
||||
Couleur
|
||||
</label>
|
||||
<div className="flex flex-wrap gap-1.5 pt-1">
|
||||
{accentOptions.map((c) => (
|
||||
<button
|
||||
key={c}
|
||||
type="button"
|
||||
onClick={() => setAccentColor(c)}
|
||||
className={`rounded-md px-2 py-1 text-[10px] capitalize border ${
|
||||
accentColor === c
|
||||
? "border-white bg-white/15 text-white font-semibold"
|
||||
: "border-white/10 bg-zinc-900 text-zinc-400"
|
||||
}`}
|
||||
>
|
||||
{c}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Icon Picker */}
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-xs font-medium text-zinc-300">Icône</label>
|
||||
<div className="grid max-h-28 grid-cols-9 gap-1.5 overflow-y-auto rounded-xl border border-white/10 bg-zinc-900/70 p-2">
|
||||
{availableIconNames.map((iconName) => (
|
||||
<button
|
||||
key={iconName}
|
||||
type="button"
|
||||
title={iconName}
|
||||
onClick={() => setIcon(iconName)}
|
||||
className={`flex size-8 items-center justify-center rounded-lg transition-colors ${
|
||||
icon === iconName
|
||||
? "bg-indigo-500 text-white"
|
||||
: "text-zinc-400 hover:bg-white/10 hover:text-white"
|
||||
}`}
|
||||
>
|
||||
<DynamicIcon name={iconName} className="size-4" />
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogFooter className="border-t border-white/10 bg-transparent pt-3">
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
onClick={() => onOpenChange(false)}
|
||||
>
|
||||
Annuler
|
||||
</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
className="bg-indigo-500 text-white hover:bg-indigo-400"
|
||||
>
|
||||
Enregistrer
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,172 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { OpenWindowTab } from "@/types/dashboard";
|
||||
import { DynamicIcon } from "./icon-mapper";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
RotateCw,
|
||||
ExternalLink,
|
||||
AppWindow,
|
||||
X,
|
||||
Columns2,
|
||||
ShieldAlert,
|
||||
LayoutGrid,
|
||||
} from "lucide-react";
|
||||
|
||||
interface WindowWorkspaceProps {
|
||||
primaryWindow: OpenWindowTab;
|
||||
splitWindow: OpenWindowTab | null;
|
||||
onCloseWindow: (id: string) => void;
|
||||
onCloseSplit: () => void;
|
||||
onBackToBento: () => void;
|
||||
onPopoutWindow: (url: string, title: string) => void;
|
||||
}
|
||||
|
||||
function EmbeddedFrame({
|
||||
win,
|
||||
isSplitPane,
|
||||
onClose,
|
||||
onPopout,
|
||||
}: {
|
||||
win: OpenWindowTab;
|
||||
isSplitPane?: boolean;
|
||||
onClose: () => void;
|
||||
onPopout: (url: string, title: string) => void;
|
||||
}) {
|
||||
const [reloadKey, setReloadKey] = useState(0);
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-1 flex-col overflow-hidden rounded-xl border border-white/10 bg-zinc-900/90 shadow-2xl">
|
||||
{/* Compact Window Toolbar */}
|
||||
<div className="flex h-9 shrink-0 items-center justify-between gap-2 border-b border-white/8 bg-zinc-950/90 px-3 text-xs">
|
||||
<div className="flex items-center gap-2 truncate">
|
||||
<DynamicIcon
|
||||
name={win.icon}
|
||||
className="size-3.5 shrink-0 text-indigo-400"
|
||||
/>
|
||||
<span className="font-medium text-zinc-200 truncate">{win.title}</span>
|
||||
<span className="hidden sm:inline font-mono text-[11px] text-zinc-500 truncate max-w-[280px]">
|
||||
— {win.url}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setReloadKey((k) => k + 1)}
|
||||
title="Recharger la fenêtre"
|
||||
className="rounded-md p-1 text-zinc-400 hover:bg-white/10 hover:text-white"
|
||||
>
|
||||
<RotateCw className="size-3.5" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onPopout(win.url, win.title)}
|
||||
title="Ouvrir en fenêtre d'application dédiée (sans barre d'adresse)"
|
||||
className="flex items-center gap-1 rounded-md bg-indigo-500/15 px-2 py-1 text-[11px] font-medium text-indigo-300 hover:bg-indigo-500/25"
|
||||
>
|
||||
<AppWindow className="size-3" />
|
||||
<span className="hidden md:inline">Mode App Pop-up</span>
|
||||
</button>
|
||||
|
||||
<a
|
||||
href={win.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
title="Ouvrir dans un nouvel onglet Chromium"
|
||||
className="rounded-md p-1 text-zinc-400 hover:bg-white/10 hover:text-white"
|
||||
>
|
||||
<ExternalLink className="size-3.5" />
|
||||
</a>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
title={isSplitPane ? "Quitter l'écran scindé" : "Fermer la fenêtre"}
|
||||
className="rounded-md p-1 text-zinc-400 hover:bg-rose-500/20 hover:text-rose-300"
|
||||
>
|
||||
<X className="size-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Help Banner for X-Frame-Options */}
|
||||
<div className="flex items-center justify-between gap-2 border-b border-white/5 bg-zinc-900/95 px-3 py-1 text-[11px] text-zinc-400">
|
||||
<span className="flex items-center gap-1.5 truncate">
|
||||
<ShieldAlert className="size-3 text-amber-400 shrink-0" />
|
||||
<span>
|
||||
Si le site refuse l'intégration (écran blanc/gris dû aux
|
||||
sécurités CSP comme Google), cliquez sur{" "}
|
||||
<strong className="text-zinc-200">Mode App Pop-up</strong>.
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Actual Embedded Web View */}
|
||||
<div className="relative flex-1 bg-white">
|
||||
<iframe
|
||||
key={`${win.id}-${reloadKey}`}
|
||||
src={win.url}
|
||||
title={win.title}
|
||||
className="h-full w-full border-0"
|
||||
allow="clipboard-read; clipboard-write; fullscreen"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function WindowWorkspace({
|
||||
primaryWindow,
|
||||
splitWindow,
|
||||
onCloseWindow,
|
||||
onCloseSplit,
|
||||
onBackToBento,
|
||||
onPopoutWindow,
|
||||
}: WindowWorkspaceProps) {
|
||||
return (
|
||||
<div className="flex flex-1 flex-col overflow-hidden p-2 sm:p-3 gap-2">
|
||||
<div className="flex flex-1 gap-2 overflow-hidden">
|
||||
<EmbeddedFrame
|
||||
win={primaryWindow}
|
||||
onClose={() => onCloseWindow(primaryWindow.id)}
|
||||
onPopout={onPopoutWindow}
|
||||
/>
|
||||
|
||||
{splitWindow && splitWindow.id !== primaryWindow.id && (
|
||||
<div className="hidden lg:flex flex-1 overflow-hidden">
|
||||
<EmbeddedFrame
|
||||
win={splitWindow}
|
||||
isSplitPane
|
||||
onClose={onCloseSplit}
|
||||
onPopout={onPopoutWindow}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Subtle Bottom Return Bar */}
|
||||
<div className="flex items-center justify-between px-2 text-[11px] text-zinc-500">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="xs"
|
||||
onClick={onBackToBento}
|
||||
className="text-zinc-400 hover:text-white"
|
||||
>
|
||||
<LayoutGrid className="size-3 mr-1" />
|
||||
Retourner à la grille Bento (garder l'onglet ouvert en haut)
|
||||
</Button>
|
||||
|
||||
{!splitWindow && (
|
||||
<span className="hidden lg:flex items-center gap-1">
|
||||
<Columns2 className="size-3" />
|
||||
Astuce : ouvrez un 2e onglet puis cliquez sur l'icône Split
|
||||
dans la barre supérieure pour travailler côte à côte.
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
import { mergeProps } from "@base-ui/react/merge-props"
|
||||
import { useRender } from "@base-ui/react/use-render"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
import { cn } from "cn"
|
||||
|
||||
const badgeVariants = cva(
|
||||
"group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
|
||||
secondary:
|
||||
"bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
|
||||
destructive:
|
||||
"bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
|
||||
outline:
|
||||
"border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
|
||||
ghost:
|
||||
"hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
|
||||
link: "text-primary underline-offset-4 hover:underline",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function Badge({
|
||||
className,
|
||||
variant = "default",
|
||||
render,
|
||||
...props
|
||||
}: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>) {
|
||||
return useRender({
|
||||
defaultTagName: "span",
|
||||
props: mergeProps<"span">(
|
||||
{
|
||||
className: cn(badgeVariants({ variant }), className),
|
||||
},
|
||||
props
|
||||
),
|
||||
render,
|
||||
state: {
|
||||
slot: "badge",
|
||||
variant,
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
export { Badge, badgeVariants }
|
||||
@@ -0,0 +1,57 @@
|
||||
import { Button as ButtonPrimitive } from "@base-ui/react/button"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
import { cn } from "cn"
|
||||
|
||||
const buttonVariants = cva(
|
||||
"group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-primary text-primary-foreground hover:bg-primary/80",
|
||||
outline:
|
||||
"border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
|
||||
secondary:
|
||||
"bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
|
||||
ghost:
|
||||
"hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
|
||||
destructive:
|
||||
"bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
|
||||
link: "text-primary underline-offset-4 hover:underline",
|
||||
},
|
||||
size: {
|
||||
default:
|
||||
"h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
|
||||
xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
|
||||
sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
|
||||
lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
|
||||
icon: "size-8",
|
||||
"icon-xs":
|
||||
"size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
|
||||
"icon-sm":
|
||||
"size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
|
||||
"icon-lg": "size-9",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function Button({
|
||||
className,
|
||||
variant = "default",
|
||||
size = "default",
|
||||
...props
|
||||
}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
|
||||
return (
|
||||
<ButtonPrimitive
|
||||
data-slot="button"
|
||||
className={cn(buttonVariants({ variant, size, className }))}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Button, buttonVariants }
|
||||
@@ -0,0 +1,102 @@
|
||||
import * as React from "react"
|
||||
import { cn } from "cn"
|
||||
|
||||
function Card({
|
||||
className,
|
||||
size = "default",
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & { size?: "default" | "sm" }) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card"
|
||||
data-size={size}
|
||||
className={cn(
|
||||
"group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl bg-card py-(--card-spacing) text-sm text-card-foreground ring-1 ring-foreground/10 [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-header"
|
||||
className={cn(
|
||||
"group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-title"
|
||||
className={cn(
|
||||
"font-heading text-base leading-snug font-medium group-data-[size=sm]/card:text-sm",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-description"
|
||||
className={cn("text-sm text-muted-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardAction({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-action"
|
||||
className={cn(
|
||||
"col-start-2 row-span-2 row-start-1 self-start justify-self-end",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardContent({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-content"
|
||||
className={cn("px-(--card-spacing)", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-footer"
|
||||
className={cn(
|
||||
"flex items-center rounded-b-xl border-t bg-muted/50 p-(--card-spacing)",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Card,
|
||||
CardHeader,
|
||||
CardFooter,
|
||||
CardTitle,
|
||||
CardAction,
|
||||
CardDescription,
|
||||
CardContent,
|
||||
}
|
||||
@@ -0,0 +1,160 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { Dialog as DialogPrimitive } from "@base-ui/react/dialog"
|
||||
import { cn } from "cn"
|
||||
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { XIcon } from "lucide-react"
|
||||
|
||||
function Dialog({ ...props }: DialogPrimitive.Root.Props) {
|
||||
return <DialogPrimitive.Root data-slot="dialog" {...props} />
|
||||
}
|
||||
|
||||
function DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {
|
||||
return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
|
||||
}
|
||||
|
||||
function DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {
|
||||
return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
|
||||
}
|
||||
|
||||
function DialogClose({ ...props }: DialogPrimitive.Close.Props) {
|
||||
return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
|
||||
}
|
||||
|
||||
function DialogOverlay({
|
||||
className,
|
||||
...props
|
||||
}: DialogPrimitive.Backdrop.Props) {
|
||||
return (
|
||||
<DialogPrimitive.Backdrop
|
||||
data-slot="dialog-overlay"
|
||||
className={cn(
|
||||
"fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DialogContent({
|
||||
className,
|
||||
children,
|
||||
showCloseButton = true,
|
||||
...props
|
||||
}: DialogPrimitive.Popup.Props & {
|
||||
showCloseButton?: boolean
|
||||
}) {
|
||||
return (
|
||||
<DialogPortal>
|
||||
<DialogOverlay />
|
||||
<DialogPrimitive.Popup
|
||||
data-slot="dialog-content"
|
||||
className={cn(
|
||||
"fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
{showCloseButton && (
|
||||
<DialogPrimitive.Close
|
||||
data-slot="dialog-close"
|
||||
render={
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="absolute top-2 right-2"
|
||||
size="icon-sm"
|
||||
/>
|
||||
}
|
||||
>
|
||||
<XIcon
|
||||
/>
|
||||
<span className="sr-only">Close</span>
|
||||
</DialogPrimitive.Close>
|
||||
)}
|
||||
</DialogPrimitive.Popup>
|
||||
</DialogPortal>
|
||||
)
|
||||
}
|
||||
|
||||
function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="dialog-header"
|
||||
className={cn("flex flex-col gap-2", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DialogFooter({
|
||||
className,
|
||||
showCloseButton = false,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & {
|
||||
showCloseButton?: boolean
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
data-slot="dialog-footer"
|
||||
className={cn(
|
||||
"-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
{showCloseButton && (
|
||||
<DialogPrimitive.Close render={<Button variant="outline" />}>
|
||||
Close
|
||||
</DialogPrimitive.Close>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
|
||||
return (
|
||||
<DialogPrimitive.Title
|
||||
data-slot="dialog-title"
|
||||
className={cn(
|
||||
"font-heading text-base leading-none font-medium",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DialogDescription({
|
||||
className,
|
||||
...props
|
||||
}: DialogPrimitive.Description.Props) {
|
||||
return (
|
||||
<DialogPrimitive.Description
|
||||
data-slot="dialog-description"
|
||||
className={cn(
|
||||
"text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Dialog,
|
||||
DialogClose,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogOverlay,
|
||||
DialogPortal,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
import * as React from "react"
|
||||
import { Input as InputPrimitive } from "@base-ui/react/input"
|
||||
import { cn } from "cn"
|
||||
|
||||
function Input({ className, type, ...props }: React.ComponentProps<"input">) {
|
||||
return (
|
||||
<InputPrimitive
|
||||
type={type}
|
||||
data-slot="input"
|
||||
className={cn(
|
||||
"h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Input }
|
||||
@@ -0,0 +1,54 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area"
|
||||
import { cn } from "cn"
|
||||
|
||||
function ScrollArea({
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: ScrollAreaPrimitive.Root.Props) {
|
||||
return (
|
||||
<ScrollAreaPrimitive.Root
|
||||
data-slot="scroll-area"
|
||||
className={cn("relative", className)}
|
||||
{...props}
|
||||
>
|
||||
<ScrollAreaPrimitive.Viewport
|
||||
data-slot="scroll-area-viewport"
|
||||
className="size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1"
|
||||
>
|
||||
{children}
|
||||
</ScrollAreaPrimitive.Viewport>
|
||||
<ScrollBar />
|
||||
<ScrollAreaPrimitive.Corner />
|
||||
</ScrollAreaPrimitive.Root>
|
||||
)
|
||||
}
|
||||
|
||||
function ScrollBar({
|
||||
className,
|
||||
orientation = "vertical",
|
||||
...props
|
||||
}: ScrollAreaPrimitive.Scrollbar.Props) {
|
||||
return (
|
||||
<ScrollAreaPrimitive.Scrollbar
|
||||
data-slot="scroll-area-scrollbar"
|
||||
data-orientation={orientation}
|
||||
orientation={orientation}
|
||||
className={cn(
|
||||
"flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<ScrollAreaPrimitive.Thumb
|
||||
data-slot="scroll-area-thumb"
|
||||
className="relative flex-1 rounded-full bg-border"
|
||||
/>
|
||||
</ScrollAreaPrimitive.Scrollbar>
|
||||
)
|
||||
}
|
||||
|
||||
export { ScrollArea, ScrollBar }
|
||||
@@ -0,0 +1,24 @@
|
||||
"use client"
|
||||
|
||||
import { Separator as SeparatorPrimitive } from "@base-ui/react/separator"
|
||||
import { cn } from "cn"
|
||||
|
||||
function Separator({
|
||||
className,
|
||||
orientation = "horizontal",
|
||||
...props
|
||||
}: SeparatorPrimitive.Props) {
|
||||
return (
|
||||
<SeparatorPrimitive
|
||||
data-slot="separator"
|
||||
orientation={orientation}
|
||||
className={cn(
|
||||
"shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Separator }
|
||||
@@ -0,0 +1,81 @@
|
||||
"use client"
|
||||
|
||||
import { Tabs as TabsPrimitive } from "@base-ui/react/tabs"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
import { cn } from "cn"
|
||||
|
||||
function Tabs({
|
||||
className,
|
||||
orientation = "horizontal",
|
||||
...props
|
||||
}: TabsPrimitive.Root.Props) {
|
||||
return (
|
||||
<TabsPrimitive.Root
|
||||
data-slot="tabs"
|
||||
data-orientation={orientation}
|
||||
className={cn(
|
||||
"group/tabs flex gap-2 data-horizontal:flex-col",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const tabsListVariants = cva(
|
||||
"group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-muted",
|
||||
line: "gap-1 bg-transparent",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function TabsList({
|
||||
className,
|
||||
variant = "default",
|
||||
...props
|
||||
}: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>) {
|
||||
return (
|
||||
<TabsPrimitive.List
|
||||
data-slot="tabs-list"
|
||||
data-variant={variant}
|
||||
className={cn(tabsListVariants({ variant }), className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
|
||||
return (
|
||||
<TabsPrimitive.Tab
|
||||
data-slot="tabs-trigger"
|
||||
className={cn(
|
||||
"relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
"group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
|
||||
"data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
|
||||
"after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {
|
||||
return (
|
||||
<TabsPrimitive.Panel
|
||||
data-slot="tabs-content"
|
||||
className={cn("flex-1 text-sm outline-none", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }
|
||||
@@ -0,0 +1,65 @@
|
||||
"use client"
|
||||
|
||||
import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip"
|
||||
import { cn } from "cn"
|
||||
|
||||
function TooltipProvider({
|
||||
delay = 0,
|
||||
...props
|
||||
}: TooltipPrimitive.Provider.Props) {
|
||||
return (
|
||||
<TooltipPrimitive.Provider
|
||||
data-slot="tooltip-provider"
|
||||
delay={delay}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function Tooltip({ ...props }: TooltipPrimitive.Root.Props) {
|
||||
return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
|
||||
}
|
||||
|
||||
function TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {
|
||||
return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
|
||||
}
|
||||
|
||||
function TooltipContent({
|
||||
className,
|
||||
side = "top",
|
||||
sideOffset = 4,
|
||||
align = "center",
|
||||
alignOffset = 0,
|
||||
children,
|
||||
...props
|
||||
}: TooltipPrimitive.Popup.Props &
|
||||
Pick<
|
||||
TooltipPrimitive.Positioner.Props,
|
||||
"align" | "alignOffset" | "side" | "sideOffset"
|
||||
>) {
|
||||
return (
|
||||
<TooltipPrimitive.Portal>
|
||||
<TooltipPrimitive.Positioner
|
||||
align={align}
|
||||
alignOffset={alignOffset}
|
||||
side={side}
|
||||
sideOffset={sideOffset}
|
||||
className="isolate z-50"
|
||||
>
|
||||
<TooltipPrimitive.Popup
|
||||
data-slot="tooltip-content"
|
||||
className={cn(
|
||||
"z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" />
|
||||
</TooltipPrimitive.Popup>
|
||||
</TooltipPrimitive.Positioner>
|
||||
</TooltipPrimitive.Portal>
|
||||
)
|
||||
}
|
||||
|
||||
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
|
||||
@@ -0,0 +1,335 @@
|
||||
import { DashboardData } from "@/types/dashboard";
|
||||
|
||||
export const initialDashboardData: DashboardData = {
|
||||
version: "2.0.0",
|
||||
dockTileIds: [
|
||||
"nextcloud-files",
|
||||
"nextcloud-office",
|
||||
"google-docs",
|
||||
"google-drive",
|
||||
"gitea-server",
|
||||
"dockge",
|
||||
],
|
||||
quickNote:
|
||||
"Bienvenue sur Home OS. Utilisez F11 sur CachyOS (Chromium) ou ajoutez l'application à l'écran d'accueil sur votre Galaxy S20 FE.",
|
||||
categories: [
|
||||
{
|
||||
id: "work",
|
||||
name: "Bureautique & École",
|
||||
subtitle: "Nextcloud Office, Google Docs, Drive & Cours",
|
||||
icon: "Briefcase",
|
||||
tabs: [
|
||||
{
|
||||
id: "cloud-office",
|
||||
label: "Documents & Suites",
|
||||
tiles: [
|
||||
{
|
||||
id: "nextcloud-files",
|
||||
title: "Nextcloud Hub",
|
||||
description: "Tous mes fichiers, dossiers personnels et synchronisation",
|
||||
url: "https://cloud.lafabriquedesgenies.be",
|
||||
icon: "Cloud",
|
||||
size: "2x1",
|
||||
badge: "Fichiers",
|
||||
accentColor: "sky",
|
||||
openBehavior: "workspace",
|
||||
},
|
||||
{
|
||||
id: "nextcloud-office",
|
||||
title: "Nextcloud Office",
|
||||
description: "Traitement de texte (Word), Tableur (Excel) & Présentations",
|
||||
url: "https://cloud.lafabriquedesgenies.be/apps/richdocuments",
|
||||
icon: "FileSpreadsheet",
|
||||
size: "2x1",
|
||||
badge: "Word / Excel",
|
||||
accentColor: "emerald",
|
||||
openBehavior: "workspace",
|
||||
},
|
||||
{
|
||||
id: "google-docs",
|
||||
title: "Google Docs",
|
||||
description: "Travaux d'école, rapports et rédaction collaborative",
|
||||
url: "https://docs.google.com",
|
||||
icon: "FileText",
|
||||
size: "2x1",
|
||||
badge: "École • Docs",
|
||||
accentColor: "blue",
|
||||
openBehavior: "popup",
|
||||
},
|
||||
{
|
||||
id: "google-drive",
|
||||
title: "Google Drive",
|
||||
description: "Stockage scolaire, cours partagés et Google Sheets",
|
||||
url: "https://drive.google.com",
|
||||
icon: "HardDrive",
|
||||
size: "1x1",
|
||||
badge: "École • Drive",
|
||||
accentColor: "amber",
|
||||
openBehavior: "popup",
|
||||
},
|
||||
{
|
||||
id: "nextcloud-notes",
|
||||
title: "Notes & Aide-mémoire",
|
||||
description: "Prise de notes rapide en Markdown sur Nextcloud",
|
||||
url: "https://cloud.lafabriquedesgenies.be/apps/notes",
|
||||
icon: "NotebookPen",
|
||||
size: "1x1",
|
||||
badge: "Markdown",
|
||||
accentColor: "violet",
|
||||
openBehavior: "workspace",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "dev-git",
|
||||
label: "Code & Projets",
|
||||
tiles: [
|
||||
{
|
||||
id: "gitea-server",
|
||||
title: "Gitea — La Fabrique",
|
||||
description: "Dépôts Git personnels (klemens/home) et CI",
|
||||
url: "https://git.lafabriquedesgenies.be/klemens/home",
|
||||
icon: "GitBranch",
|
||||
size: "2x1",
|
||||
badge: "Git Serveur",
|
||||
accentColor: "emerald",
|
||||
openBehavior: "workspace",
|
||||
},
|
||||
{
|
||||
id: "github",
|
||||
title: "GitHub",
|
||||
description: "Projets open-source et dépôts externes",
|
||||
url: "https://github.com",
|
||||
icon: "Code2",
|
||||
size: "1x1",
|
||||
badge: "Externe",
|
||||
accentColor: "slate",
|
||||
openBehavior: "popup",
|
||||
},
|
||||
{
|
||||
id: "excalidraw",
|
||||
title: "Excalidraw",
|
||||
description: "Schémas d'architecture, croquis et diagrammes de cours",
|
||||
url: "https://excalidraw.com",
|
||||
icon: "PenTool",
|
||||
size: "1x1",
|
||||
badge: "Tableau blanc",
|
||||
accentColor: "indigo",
|
||||
openBehavior: "workspace",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "server",
|
||||
name: "Mon Serveur",
|
||||
subtitle: "Infrastructure Docker (Core i3 / 8 Go RAM) & Réseau",
|
||||
icon: "Server",
|
||||
tabs: [
|
||||
{
|
||||
id: "containers",
|
||||
label: "Conteneurs & Infra",
|
||||
tiles: [
|
||||
{
|
||||
id: "dockge",
|
||||
title: "Dockge",
|
||||
description: "Gestionnaire de stacks Docker Compose ultra-léger",
|
||||
url: "http://localhost:5001",
|
||||
icon: "Container",
|
||||
size: "2x1",
|
||||
badge: "Docker",
|
||||
accentColor: "emerald",
|
||||
openBehavior: "workspace",
|
||||
},
|
||||
{
|
||||
id: "nginx-proxy",
|
||||
title: "Nginx Reverse Proxy",
|
||||
description: "Gestion des domaines *.lafabriquedesgenies.be et SSL",
|
||||
url: "http://localhost:81",
|
||||
icon: "ShieldCheck",
|
||||
size: "1x1",
|
||||
badge: "Proxy SSL",
|
||||
accentColor: "blue",
|
||||
openBehavior: "workspace",
|
||||
},
|
||||
{
|
||||
id: "beszel",
|
||||
title: "Monitoring i3",
|
||||
description: "Charge CPU, mémoire 8 Go et stockage disque",
|
||||
url: "http://localhost:8090",
|
||||
icon: "Activity",
|
||||
size: "1x1",
|
||||
badge: "Système",
|
||||
accentColor: "violet",
|
||||
openBehavior: "workspace",
|
||||
},
|
||||
{
|
||||
id: "vaultwarden",
|
||||
title: "Vaultwarden",
|
||||
description: "Gestionnaire de mots de passe auto-hébergé",
|
||||
url: "http://localhost:8222",
|
||||
icon: "KeyRound",
|
||||
size: "1x1",
|
||||
badge: "Sécurité",
|
||||
accentColor: "amber",
|
||||
openBehavior: "workspace",
|
||||
},
|
||||
{
|
||||
id: "adguard",
|
||||
title: "AdGuard DNS",
|
||||
description: "Filtrage publicitaire et résolution DNS locale",
|
||||
url: "http://localhost:3000",
|
||||
icon: "Radar",
|
||||
size: "1x1",
|
||||
badge: "DNS",
|
||||
accentColor: "teal",
|
||||
openBehavior: "workspace",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "private",
|
||||
name: "Privé",
|
||||
subtitle: "Quotidien, Mails, Agenda & Médias",
|
||||
icon: "User",
|
||||
tabs: [
|
||||
{
|
||||
id: "daily",
|
||||
label: "Quotidien",
|
||||
tiles: [
|
||||
{
|
||||
id: "nextcloud-calendar",
|
||||
title: "Agenda & Tâches",
|
||||
description: "Planning des cours, échéances et rendez-vous",
|
||||
url: "https://cloud.lafabriquedesgenies.be/apps/calendar",
|
||||
icon: "Calendar",
|
||||
size: "2x1",
|
||||
badge: "Planning",
|
||||
accentColor: "sky",
|
||||
openBehavior: "workspace",
|
||||
},
|
||||
{
|
||||
id: "webmail",
|
||||
title: "Messagerie",
|
||||
description: "Boîte mail personnelle et scolaire",
|
||||
url: "https://mail.proton.me",
|
||||
icon: "Mail",
|
||||
size: "1x1",
|
||||
badge: "Emails",
|
||||
accentColor: "violet",
|
||||
openBehavior: "popup",
|
||||
},
|
||||
{
|
||||
id: "freshrss",
|
||||
title: "Lecteur RSS",
|
||||
description: "Veille technologique et actualités sans pub",
|
||||
url: "http://localhost:8085",
|
||||
icon: "Rss",
|
||||
size: "1x1",
|
||||
badge: "Flux",
|
||||
accentColor: "amber",
|
||||
openBehavior: "workspace",
|
||||
},
|
||||
{
|
||||
id: "jellyfin",
|
||||
title: "Médiathèque",
|
||||
description: "Films, séries et musique en streaming local",
|
||||
url: "http://localhost:8096",
|
||||
icon: "Film",
|
||||
size: "2x1",
|
||||
badge: "Média",
|
||||
accentColor: "purple",
|
||||
openBehavior: "workspace",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "tools",
|
||||
name: "Outils",
|
||||
subtitle: "Utilitaires rapides PDF, Réseau & Partage S20 FE <-> CachyOS",
|
||||
icon: "Wrench",
|
||||
tabs: [
|
||||
{
|
||||
id: "utilities",
|
||||
label: "Boîte à outils",
|
||||
tiles: [
|
||||
{
|
||||
id: "pairdrop",
|
||||
title: "PairDrop (CachyOS ↔ S20 FE)",
|
||||
description: "Transfert instantané de fichiers entre le PC et le Galaxy S20 FE",
|
||||
url: "https://pairdrop.net",
|
||||
icon: "Share2",
|
||||
size: "2x1",
|
||||
badge: "AirDrop Local",
|
||||
accentColor: "cyan",
|
||||
openBehavior: "workspace",
|
||||
},
|
||||
{
|
||||
id: "stirling-pdf",
|
||||
title: "Stirling PDF",
|
||||
description: "Convertir, fusionner et signer des PDF pour l'école",
|
||||
url: "http://localhost:8083",
|
||||
icon: "FileText",
|
||||
size: "1x1",
|
||||
badge: "PDF",
|
||||
accentColor: "rose",
|
||||
openBehavior: "workspace",
|
||||
},
|
||||
{
|
||||
id: "it-tools",
|
||||
title: "IT-Tools",
|
||||
description: "Convertisseurs, générateurs de tokens, JSON et réseau",
|
||||
url: "https://it-tools.tech",
|
||||
icon: "Cpu",
|
||||
size: "1x1",
|
||||
badge: "DevTools",
|
||||
accentColor: "teal",
|
||||
openBehavior: "workspace",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "ai",
|
||||
name: "IA",
|
||||
subtitle: "Assistant Gemini intégré & Outils de recherche",
|
||||
icon: "Sparkles",
|
||||
tabs: [
|
||||
{
|
||||
id: "assistants",
|
||||
label: "Studios IA",
|
||||
tiles: [
|
||||
{
|
||||
id: "aistudio",
|
||||
title: "Google AI Studio",
|
||||
description: "Tests avancés Gemini et gestion de la clé API",
|
||||
url: "https://aistudio.google.com",
|
||||
icon: "Sparkles",
|
||||
size: "2x1",
|
||||
badge: "Gemini",
|
||||
accentColor: "blue",
|
||||
openBehavior: "popup",
|
||||
},
|
||||
{
|
||||
id: "wikipedia",
|
||||
title: "Wikipédia FR",
|
||||
description: "Encyclopédie libre consultable directement dans un onglet Home",
|
||||
url: "https://fr.wikipedia.org",
|
||||
icon: "BookOpen",
|
||||
size: "2x1",
|
||||
badge: "Encyclopédie",
|
||||
accentColor: "slate",
|
||||
openBehavior: "workspace",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
@@ -0,0 +1 @@
|
||||
export { cn } from "cn"
|
||||
@@ -0,0 +1,53 @@
|
||||
export type CategoryId = "server" | "private" | "work" | "tools" | "ai";
|
||||
|
||||
export type TileSize = "1x1" | "2x1" | "2x2";
|
||||
|
||||
export type OpenBehavior = "workspace" | "external" | "popup";
|
||||
|
||||
export interface ShortcutTile {
|
||||
id: string;
|
||||
title: string;
|
||||
description: string;
|
||||
url: string;
|
||||
icon: string;
|
||||
size?: TileSize;
|
||||
badge?: string;
|
||||
accentColor?: string;
|
||||
/**
|
||||
* "workspace" = ouvre dans un onglet intégré à Home (iframe)
|
||||
* "popup" = ouvre une fenêtre Chromium dédiée sans barre d'adresse (idéal pour Google Docs/Drive qui bloquent les iframes)
|
||||
* "external" = ouvre un onglet navigateur classique
|
||||
*/
|
||||
openBehavior?: OpenBehavior;
|
||||
}
|
||||
|
||||
export interface WorkspaceTab {
|
||||
id: string;
|
||||
label: string;
|
||||
icon?: string;
|
||||
tiles: ShortcutTile[];
|
||||
}
|
||||
|
||||
export interface EnvironmentCategory {
|
||||
id: CategoryId | string;
|
||||
name: string;
|
||||
subtitle: string;
|
||||
icon: string;
|
||||
tabs: WorkspaceTab[];
|
||||
}
|
||||
|
||||
export interface OpenWindowTab {
|
||||
id: string;
|
||||
tileId: string;
|
||||
title: string;
|
||||
url: string;
|
||||
icon: string;
|
||||
accentColor?: string;
|
||||
}
|
||||
|
||||
export interface DashboardData {
|
||||
version: string;
|
||||
categories: EnvironmentCategory[];
|
||||
dockTileIds?: string[];
|
||||
quickNote?: string;
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2017",
|
||||
"lib": ["dom", "dom.iterable", "esnext"],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": true,
|
||||
"noEmit": true,
|
||||
"esModuleInterop": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "bundler",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"jsx": "react-jsx",
|
||||
"incremental": true,
|
||||
"plugins": [
|
||||
{
|
||||
"name": "next"
|
||||
}
|
||||
],
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
},
|
||||
"include": [
|
||||
"next-env.d.ts",
|
||||
"**/*.ts",
|
||||
"**/*.tsx",
|
||||
".next/types/**/*.ts",
|
||||
".next/dev/types/**/*.ts",
|
||||
"**/*.mts"
|
||||
],
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
Reference in new issue
Block a user