Dashboard UI overhaul: modern design with system stats, SVG icons, Inter font, theme toggle, loading states, and log modal
This commit is contained in:
Gan, Jimmy
@@ -1,24 +1,167 @@
|
||||
<script>
|
||||
import { onMount } from "svelte";
|
||||
import { get } from "../lib/api.js";
|
||||
|
||||
let containers = $state([]);
|
||||
let repos = $state([]);
|
||||
let stats = $state(null);
|
||||
let loading = $state(true);
|
||||
|
||||
async function load() {
|
||||
containers = await get("/docker/containers").catch(() => []);
|
||||
const data = await get("/gitea/repos").catch(() => ({ data: [] }));
|
||||
repos = data?.data || [];
|
||||
loading = true;
|
||||
const [c, g, s] = await Promise.all([
|
||||
get("/docker/containers"),
|
||||
get("/gitea/repos"),
|
||||
get("/system/stats"),
|
||||
]);
|
||||
containers = c || [];
|
||||
repos = Array.isArray(g) ? g : g?.data || [];
|
||||
stats = s;
|
||||
loading = false;
|
||||
}
|
||||
load();
|
||||
|
||||
function fmtBytes(b) {
|
||||
if (!b) return "0 B";
|
||||
const u = ["B", "KB", "MB", "GB", "TB"];
|
||||
const i = Math.floor(Math.log(b) / Math.log(1024));
|
||||
return (b / Math.pow(1024, i)).toFixed(1) + " " + u[i];
|
||||
}
|
||||
|
||||
function pctColor(pct) {
|
||||
if (pct > 90) return "text-rose-500";
|
||||
if (pct > 70) return "text-amber-500";
|
||||
return "text-emerald-500";
|
||||
}
|
||||
|
||||
onMount(load);
|
||||
</script>
|
||||
|
||||
<h2 class="text-2xl font-bold mb-6">Dashboard</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="border rounded-lg p-4">
|
||||
<h3 class="font-semibold mb-3">Docker Containers</h3>
|
||||
<p class="text-3xl font-bold">{containers.length}</p>
|
||||
<p class="text-sm text-gray-500">{containers.filter(c => c.status === "running").length} running</p>
|
||||
</div>
|
||||
<div class="border rounded-lg p-4">
|
||||
<h3 class="font-semibold mb-3">Gitea Repos</h3>
|
||||
<p class="text-3xl font-bold">{repos.length}</p>
|
||||
<div class="space-y-8">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-surface-900 tracking-tight">Overview</h1>
|
||||
<p class="text-sm text-surface-400 mt-1">System status at a glance</p>
|
||||
</div>
|
||||
|
||||
{#if loading}
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
{#each Array(4) as _}
|
||||
<div class="h-[120px] rounded-xl bg-surface-100 animate-pulse"></div>
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
<!-- Stats Cards -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<!-- CPU -->
|
||||
<div class="bg-white rounded-xl border border-surface-200 p-5 shadow-sm hover:shadow-md transition-shadow duration-200">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<p class="text-xs font-semibold uppercase tracking-wider text-surface-400">CPU</p>
|
||||
<div class="w-8 h-8 rounded-lg bg-sky-50 flex items-center justify-center">
|
||||
<svg class="w-4 h-4 text-sky-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2z" /></svg>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-2xl font-bold {pctColor(stats?.cpu_percent || 0)}">{stats?.cpu_percent || 0}%</p>
|
||||
<p class="text-xs text-surface-400 mt-1">{stats?.cpu_count || 0} cores · Load {stats?.load_avg?.[0] || 0}</p>
|
||||
</div>
|
||||
|
||||
<!-- Memory -->
|
||||
<div class="bg-white rounded-xl border border-surface-200 p-5 shadow-sm hover:shadow-md transition-shadow duration-200">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<p class="text-xs font-semibold uppercase tracking-wider text-surface-400">Memory</p>
|
||||
<div class="w-8 h-8 rounded-lg bg-violet-50 flex items-center justify-center">
|
||||
<svg class="w-4 h-4 text-violet-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-2xl font-bold {pctColor(stats?.memory?.percent || 0)}">{stats?.memory?.percent || 0}%</p>
|
||||
<p class="text-xs text-surface-400 mt-1">{fmtBytes(stats?.memory?.used)} / {fmtBytes(stats?.memory?.total)}</p>
|
||||
</div>
|
||||
|
||||
<!-- Disk -->
|
||||
<div class="bg-white rounded-xl border border-surface-200 p-5 shadow-sm hover:shadow-md transition-shadow duration-200">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<p class="text-xs font-semibold uppercase tracking-wider text-surface-400">Disk</p>
|
||||
<div class="w-8 h-8 rounded-lg bg-amber-50 flex items-center justify-center">
|
||||
<svg class="w-4 h-4 text-amber-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4" /></svg>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-2xl font-bold {pctColor(stats?.disk?.percent || 0)}">{stats?.disk?.percent || 0}%</p>
|
||||
<p class="text-xs text-surface-400 mt-1">{fmtBytes(stats?.disk?.free)} free of {fmtBytes(stats?.disk?.total)}</p>
|
||||
</div>
|
||||
|
||||
<!-- Uptime -->
|
||||
<div class="bg-white rounded-xl border border-surface-200 p-5 shadow-sm hover:shadow-md transition-shadow duration-200">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<p class="text-xs font-semibold uppercase tracking-wider text-surface-400">Uptime</p>
|
||||
<div class="w-8 h-8 rounded-lg bg-emerald-50 flex items-center justify-center">
|
||||
<svg class="w-4 h-4 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" /></svg>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-2xl font-bold text-surface-800">{stats?.uptime || "—"}</p>
|
||||
<p class="text-xs text-surface-400 mt-1 truncate" title={stats?.platform}>{stats?.platform || "—"}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Services Grid -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
<!-- Docker Summary -->
|
||||
<div class="bg-white rounded-xl border border-surface-200 p-5 shadow-sm">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h3 class="text-sm font-semibold text-surface-700">Docker Containers</h3>
|
||||
<span class="text-xs font-medium text-emerald-600 bg-emerald-50 px-2 py-0.5 rounded-full">{containers.filter(c => c.status === "running").length} running</span>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
{#each containers.slice(0, 5) as c}
|
||||
<div class="flex items-center justify-between py-1.5 text-sm">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-1.5 h-1.5 rounded-full {c.status === 'running' ? 'bg-emerald-400' : 'bg-surface-300'}"></span>
|
||||
<span class="font-medium text-surface-700">{c.name}</span>
|
||||
</div>
|
||||
<span class="text-xs text-surface-400 truncate max-w-[180px]">{c.image}</span>
|
||||
</div>
|
||||
{/each}
|
||||
{#if containers.length > 5}
|
||||
<p class="text-xs text-primary-500 font-medium pt-1">+{containers.length - 5} more</p>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Repos Summary -->
|
||||
<div class="bg-white rounded-xl border border-surface-200 p-5 shadow-sm">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h3 class="text-sm font-semibold text-surface-700">Git Repositories</h3>
|
||||
<span class="text-xs font-medium text-primary-600 bg-primary-50 px-2 py-0.5 rounded-full">{repos.length} repos</span>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
{#each repos.slice(0, 5) as r}
|
||||
<div class="flex items-center justify-between py-1.5 text-sm">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg class="w-3.5 h-3.5 text-surface-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" /></svg>
|
||||
<span class="font-medium text-surface-700">{r.name}</span>
|
||||
</div>
|
||||
<span class="text-xs text-surface-400">{r.language || "—"}</span>
|
||||
</div>
|
||||
{/each}
|
||||
{#if repos.length > 5}
|
||||
<p class="text-xs text-primary-500 font-medium pt-1">+{repos.length - 5} more</p>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Disk Usage Bar -->
|
||||
{#if stats?.disk}
|
||||
<div class="bg-white rounded-xl border border-surface-200 p-5 shadow-sm">
|
||||
<h3 class="text-sm font-semibold text-surface-700 mb-3">Storage Usage</h3>
|
||||
<div class="w-full h-3 bg-surface-100 rounded-full overflow-hidden">
|
||||
<div
|
||||
class="h-full rounded-full transition-all duration-700 ease-out {stats.disk.percent > 90 ? 'bg-gradient-to-r from-rose-400 to-rose-500' : stats.disk.percent > 70 ? 'bg-gradient-to-r from-amber-400 to-amber-500' : 'bg-gradient-to-r from-emerald-400 to-emerald-500'}"
|
||||
style="width: {stats.disk.percent}%"
|
||||
></div>
|
||||
</div>
|
||||
<div class="flex justify-between mt-2 text-xs text-surface-400">
|
||||
<span>{fmtBytes(stats.disk.used)} used</span>
|
||||
<span>{fmtBytes(stats.disk.free)} free</span>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
@@ -1,42 +1,133 @@
|
||||
<script>
|
||||
import { onMount } from "svelte";
|
||||
import { get, post } from "../lib/api.js";
|
||||
|
||||
let containers = $state([]);
|
||||
let logs = $state("");
|
||||
let loading = $state(true);
|
||||
let logTarget = $state("");
|
||||
async function load() { containers = await get("/docker/containers"); }
|
||||
async function action(id, act) { await post(`/docker/containers/${id}/${act}`); await load(); }
|
||||
async function showLogs(id, name) { logTarget = name; const r = await get(`/docker/containers/${id}/logs?tail=100`); logs = r.logs; }
|
||||
load();
|
||||
let logContent = $state("");
|
||||
let loadingLogs = $state(false);
|
||||
let actionLoading = $state("");
|
||||
|
||||
async function load() {
|
||||
loading = true;
|
||||
containers = (await get("/docker/containers")) || [];
|
||||
loading = false;
|
||||
}
|
||||
|
||||
async function action(id, act) {
|
||||
actionLoading = id + act;
|
||||
await post(`/docker/containers/${id}/${act}`);
|
||||
await load();
|
||||
actionLoading = "";
|
||||
}
|
||||
|
||||
async function showLogs(id, name) {
|
||||
logTarget = name;
|
||||
loadingLogs = true;
|
||||
const r = await get(`/docker/containers/${id}/logs?tail=200`);
|
||||
logContent = r?.logs || "No logs available";
|
||||
loadingLogs = false;
|
||||
}
|
||||
|
||||
onMount(load);
|
||||
</script>
|
||||
|
||||
<h2 class="text-2xl font-bold mb-6">Docker Containers</h2>
|
||||
<div class="space-y-3">
|
||||
{#each containers as c}
|
||||
<div class="border rounded-lg p-4 flex items-center justify-between">
|
||||
<div>
|
||||
<span class="font-medium">{c.name}</span>
|
||||
<span class="ml-2 text-xs px-2 py-0.5 rounded {c.status === 'running' ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-500'}">{c.status}</span>
|
||||
<p class="text-xs text-gray-400 mt-1">{c.image}</p>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
{#if c.status === "running"}
|
||||
<button class="text-xs px-3 py-1 bg-red-50 text-red-600 rounded hover:bg-red-100" onclick={() => action(c.id, "stop")}>Stop</button>
|
||||
<button class="text-xs px-3 py-1 bg-yellow-50 text-yellow-600 rounded hover:bg-yellow-100" onclick={() => action(c.id, "restart")}>Restart</button>
|
||||
{:else}
|
||||
<button class="text-xs px-3 py-1 bg-green-50 text-green-600 rounded hover:bg-green-100" onclick={() => action(c.id, "start")}>Start</button>
|
||||
{/if}
|
||||
<button class="text-xs px-3 py-1 bg-gray-50 text-gray-600 rounded hover:bg-gray-100" onclick={() => showLogs(c.id, c.name)}>Logs</button>
|
||||
</div>
|
||||
<div class="space-y-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-surface-900 tracking-tight">Docker</h1>
|
||||
<p class="text-sm text-surface-400 mt-1">{containers.length} containers · {containers.filter(c => c.status === "running").length} running</p>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
{#if logTarget}
|
||||
<div class="mt-6">
|
||||
<div class="flex justify-between items-center mb-2">
|
||||
<h3 class="font-semibold">Logs: {logTarget}</h3>
|
||||
<button class="text-xs text-gray-400 hover:text-gray-600" onclick={() => { logTarget = ""; logs = ""; }}>Close</button>
|
||||
</div>
|
||||
<pre class="bg-gray-900 text-green-400 text-xs p-4 rounded-lg overflow-auto max-h-96 whitespace-pre-wrap">{logs}</pre>
|
||||
<button onclick={load} class="text-xs font-medium text-primary-600 bg-primary-50 hover:bg-primary-100 px-3 py-1.5 rounded-lg transition-colors">
|
||||
Refresh
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if loading}
|
||||
<div class="space-y-3">
|
||||
{#each Array(5) as _}
|
||||
<div class="h-[72px] rounded-xl bg-surface-100 animate-pulse"></div>
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
<div class="space-y-2">
|
||||
{#each containers as c}
|
||||
<div class="bg-white rounded-xl border border-surface-200 p-4 flex items-center justify-between shadow-sm hover:shadow-md transition-all duration-200 group">
|
||||
<div class="flex items-center gap-3 min-w-0">
|
||||
<span class="relative flex h-2.5 w-2.5 shrink-0">
|
||||
{#if c.status === "running"}
|
||||
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
|
||||
<span class="relative inline-flex rounded-full h-2.5 w-2.5 bg-emerald-500"></span>
|
||||
{:else}
|
||||
<span class="relative inline-flex rounded-full h-2.5 w-2.5 bg-surface-300"></span>
|
||||
{/if}
|
||||
</span>
|
||||
<div class="min-w-0">
|
||||
<p class="text-sm font-semibold text-surface-800 truncate">{c.name}</p>
|
||||
<p class="text-xs text-surface-400 truncate mt-0.5">{c.image}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5 opacity-70 group-hover:opacity-100 transition-opacity">
|
||||
{#if c.status === "running"}
|
||||
<button
|
||||
class="text-xs font-medium px-2.5 py-1.5 rounded-lg text-rose-600 bg-rose-50 hover:bg-rose-100 transition-colors disabled:opacity-50"
|
||||
onclick={() => action(c.id, "stop")}
|
||||
disabled={actionLoading === c.id + "stop"}
|
||||
>
|
||||
{actionLoading === c.id + "stop" ? "..." : "Stop"}
|
||||
</button>
|
||||
<button
|
||||
class="text-xs font-medium px-2.5 py-1.5 rounded-lg text-amber-600 bg-amber-50 hover:bg-amber-100 transition-colors disabled:opacity-50"
|
||||
onclick={() => action(c.id, "restart")}
|
||||
disabled={actionLoading === c.id + "restart"}
|
||||
>
|
||||
{actionLoading === c.id + "restart" ? "..." : "Restart"}
|
||||
</button>
|
||||
{:else}
|
||||
<button
|
||||
class="text-xs font-medium px-2.5 py-1.5 rounded-lg text-emerald-600 bg-emerald-50 hover:bg-emerald-100 transition-colors disabled:opacity-50"
|
||||
onclick={() => action(c.id, "start")}
|
||||
disabled={actionLoading === c.id + "start"}
|
||||
>
|
||||
{actionLoading === c.id + "start" ? "..." : "Start"}
|
||||
</button>
|
||||
{/if}
|
||||
<button
|
||||
class="text-xs font-medium px-2.5 py-1.5 rounded-lg text-surface-600 bg-surface-100 hover:bg-surface-200 transition-colors"
|
||||
onclick={() => showLogs(c.id, c.name)}
|
||||
>
|
||||
Logs
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Log Modal -->
|
||||
{#if logTarget}
|
||||
<div class="fixed inset-0 bg-black/40 backdrop-blur-sm flex items-center justify-center z-50" role="dialog" aria-modal="true" onclick={() => { logTarget = ""; logContent = ""; }} onkeydown={(e) => e.key === "Escape" && (logTarget = "", logContent = "")}>
|
||||
<div class="bg-white rounded-2xl shadow-2xl w-[90vw] max-w-4xl max-h-[80vh] flex flex-col" role="document" onclick={(e) => e.stopPropagation()} onkeydown={(e) => e.stopPropagation()}>
|
||||
<div class="flex items-center justify-between px-5 py-4 border-b border-surface-200">
|
||||
<div>
|
||||
<h3 class="text-sm font-bold text-surface-800">Container Logs</h3>
|
||||
<p class="text-xs text-surface-400 mt-0.5">{logTarget}</p>
|
||||
</div>
|
||||
<button aria-label="Close logs" class="text-surface-400 hover:text-surface-600 transition-colors" onclick={() => { logTarget = ""; logContent = ""; }}>
|
||||
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex-1 overflow-auto p-1">
|
||||
{#if loadingLogs}
|
||||
<div class="flex items-center justify-center h-40">
|
||||
<div class="w-6 h-6 border-2 border-primary-500 border-t-transparent rounded-full animate-spin"></div>
|
||||
</div>
|
||||
{:else}
|
||||
<pre class="bg-surface-900 text-emerald-400 text-xs p-4 rounded-xl whitespace-pre-wrap leading-relaxed font-mono min-h-[200px]">{logContent}</pre>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
@@ -1,63 +1,151 @@
|
||||
<script>
|
||||
import { get, del } from "../lib/api.js";
|
||||
import { onMount } from "svelte";
|
||||
import { get, del, upload } from "../lib/api.js";
|
||||
|
||||
let entries = $state([]);
|
||||
let currentPath = $state("");
|
||||
let loading = $state(true);
|
||||
let uploading = $state(false);
|
||||
let fileInput;
|
||||
|
||||
async function browse(path) {
|
||||
loading = true;
|
||||
currentPath = path;
|
||||
const data = await get(`/files/browse?path=${encodeURIComponent(path)}`);
|
||||
entries = data.entries || [];
|
||||
entries = data?.entries || [];
|
||||
loading = false;
|
||||
}
|
||||
|
||||
function goUp() {
|
||||
const parts = currentPath.split("/").filter(Boolean);
|
||||
parts.pop();
|
||||
browse(parts.join("/"));
|
||||
}
|
||||
|
||||
async function remove(name) {
|
||||
if (!confirm(`Delete ${name}?`)) return;
|
||||
if (!confirm(`Delete "${name}"? This cannot be undone.`)) return;
|
||||
const path = currentPath ? `${currentPath}/${name}` : name;
|
||||
await del(`/files/delete?path=${encodeURIComponent(path)}`);
|
||||
browse(currentPath);
|
||||
}
|
||||
|
||||
function downloadUrl(name) {
|
||||
const path = currentPath ? `${currentPath}/${name}` : name;
|
||||
return `/api/files/download?path=${encodeURIComponent(path)}`;
|
||||
}
|
||||
function formatSize(bytes) {
|
||||
if (bytes < 1024) return `${bytes} B`;
|
||||
if (bytes < 1048576) return `${(bytes / 1024).toFixed(1)} KB`;
|
||||
if (bytes < 1073741824) return `${(bytes / 1048576).toFixed(1)} MB`;
|
||||
return `${(bytes / 1073741824).toFixed(1)} GB`;
|
||||
|
||||
async function handleUpload() {
|
||||
const file = fileInput?.files?.[0];
|
||||
if (!file) return;
|
||||
uploading = true;
|
||||
await upload(currentPath, file);
|
||||
fileInput.value = "";
|
||||
uploading = false;
|
||||
browse(currentPath);
|
||||
}
|
||||
browse("");
|
||||
|
||||
function formatSize(bytes) {
|
||||
if (!bytes) return "—";
|
||||
const u = ["B", "KB", "MB", "GB", "TB"];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(1024));
|
||||
return (bytes / Math.pow(1024, i)).toFixed(1) + " " + u[i];
|
||||
}
|
||||
|
||||
function fileIcon(name) {
|
||||
const ext = name.split(".").pop().toLowerCase();
|
||||
if (["jpg", "jpeg", "png", "gif", "webp", "svg"].includes(ext)) return "image";
|
||||
if (["mp4", "mkv", "avi", "mov"].includes(ext)) return "video";
|
||||
if (["mp3", "flac", "wav", "m4a", "ogg"].includes(ext)) return "audio";
|
||||
if (["zip", "tar", "gz", "7z", "rar"].includes(ext)) return "archive";
|
||||
if (["py", "js", "ts", "go", "rs", "sh", "yml", "yaml", "json", "md"].includes(ext)) return "code";
|
||||
return "file";
|
||||
}
|
||||
|
||||
const crumbs = $derived(currentPath.split("/").filter(Boolean));
|
||||
|
||||
onMount(() => browse(""));
|
||||
</script>
|
||||
|
||||
<h2 class="text-2xl font-bold mb-4">Files</h2>
|
||||
<div class="flex items-center gap-2 mb-4 text-sm text-gray-500">
|
||||
<button class="hover:text-blue-600" onclick={() => browse("")}>/volume1</button>
|
||||
{#each currentPath.split("/").filter(Boolean) as part, i}
|
||||
<span>/</span>
|
||||
<button class="hover:text-blue-600" onclick={() => browse(currentPath.split("/").slice(0, i + 1).join("/"))}>{part}</button>
|
||||
{/each}
|
||||
{#if currentPath}
|
||||
<button class="ml-4 text-xs px-2 py-1 bg-gray-100 rounded hover:bg-gray-200" onclick={goUp}>Up</button>
|
||||
<div class="space-y-5">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-surface-900 tracking-tight">Files</h1>
|
||||
<p class="text-sm text-surface-400 mt-1">/volume1{currentPath ? "/" + currentPath : ""}</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<input type="file" bind:this={fileInput} onchange={handleUpload} class="hidden" />
|
||||
<button
|
||||
onclick={() => fileInput.click()}
|
||||
class="text-xs font-medium text-primary-600 bg-primary-50 hover:bg-primary-100 px-3 py-1.5 rounded-lg transition-colors disabled:opacity-50"
|
||||
disabled={uploading}
|
||||
>
|
||||
{uploading ? "Uploading..." : "Upload"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Breadcrumbs -->
|
||||
<div class="flex items-center gap-1 text-sm flex-wrap">
|
||||
<button class="text-primary-600 hover:text-primary-700 font-medium transition-colors" onclick={() => browse("")}>volume1</button>
|
||||
{#each crumbs as part, i}
|
||||
<svg class="w-3.5 h-3.5 text-surface-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" /></svg>
|
||||
<button
|
||||
class="text-primary-600 hover:text-primary-700 font-medium transition-colors"
|
||||
onclick={() => browse(crumbs.slice(0, i + 1).join("/"))}
|
||||
>{part}</button>
|
||||
{/each}
|
||||
{#if currentPath}
|
||||
<button
|
||||
class="ml-auto text-xs font-medium text-surface-500 bg-surface-100 hover:bg-surface-200 px-2.5 py-1 rounded-lg transition-colors flex items-center gap-1"
|
||||
onclick={goUp}
|
||||
>
|
||||
<svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 10l7-7m0 0l7 7m-7-7v18" /></svg>
|
||||
Up
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- File List -->
|
||||
{#if loading}
|
||||
<div class="space-y-1">
|
||||
{#each Array(8) as _}
|
||||
<div class="h-11 rounded-lg bg-surface-100 animate-pulse"></div>
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
<div class="bg-white rounded-xl border border-surface-200 shadow-sm overflow-hidden">
|
||||
<!-- Header -->
|
||||
<div class="grid grid-cols-[1fr_100px_100px] px-4 py-2 text-[11px] font-semibold uppercase tracking-wider text-surface-400 border-b border-surface-100">
|
||||
<span>Name</span>
|
||||
<span class="text-right">Size</span>
|
||||
<span class="text-right">Actions</span>
|
||||
</div>
|
||||
<!-- Entries -->
|
||||
{#each entries as e}
|
||||
<div class="grid grid-cols-[1fr_100px_100px] items-center px-4 py-2.5 hover:bg-surface-50 border-b border-surface-100 last:border-0 transition-colors group">
|
||||
{#if e.is_dir}
|
||||
<button class="flex items-center gap-2.5 text-sm font-medium text-surface-700 hover:text-primary-600 transition-colors text-left truncate" onclick={() => browse(currentPath ? `${currentPath}/${e.name}` : e.name)}>
|
||||
<svg class="w-4 h-4 text-amber-400 shrink-0" fill="currentColor" viewBox="0 0 20 20"><path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" /></svg>
|
||||
{e.name}
|
||||
</button>
|
||||
{:else}
|
||||
<span class="flex items-center gap-2.5 text-sm text-surface-600 truncate">
|
||||
<svg class="w-4 h-4 text-surface-300 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" /></svg>
|
||||
{e.name}
|
||||
</span>
|
||||
{/if}
|
||||
<span class="text-xs text-surface-400 text-right">{e.is_dir ? "—" : formatSize(e.size)}</span>
|
||||
<div class="flex items-center justify-end gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
{#if !e.is_dir}
|
||||
<a href={downloadUrl(e.name)} class="text-[11px] text-primary-500 hover:text-primary-700 font-medium transition-colors">DL</a>
|
||||
{/if}
|
||||
<button class="text-[11px] text-rose-400 hover:text-rose-600 font-medium transition-colors" onclick={() => remove(e.name)}>Del</button>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
{#if entries.length === 0}
|
||||
<div class="px-4 py-8 text-center text-sm text-surface-400">Empty directory</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="border rounded-lg divide-y">
|
||||
{#each entries as e}
|
||||
<div class="flex items-center justify-between px-4 py-2 hover:bg-gray-50">
|
||||
{#if e.is_dir}
|
||||
<button class="text-blue-600 hover:underline text-sm" onclick={() => browse(currentPath ? `${currentPath}/${e.name}` : e.name)}>{e.name}/</button>
|
||||
{:else}
|
||||
<span class="text-sm">{e.name}</span>
|
||||
{/if}
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-xs text-gray-400">{e.is_dir ? "" : formatSize(e.size)}</span>
|
||||
{#if !e.is_dir}
|
||||
<a href={downloadUrl(e.name)} class="text-xs text-blue-500 hover:underline">Download</a>
|
||||
{/if}
|
||||
<button class="text-xs text-red-400 hover:text-red-600" onclick={() => remove(e.name)}>Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
@@ -1,38 +1,124 @@
|
||||
<script>
|
||||
import { onMount } from "svelte";
|
||||
import { get } from "../lib/api.js";
|
||||
|
||||
let repos = $state([]);
|
||||
let commits = $state([]);
|
||||
let selectedRepo = $state("");
|
||||
async function load() { const data = await get("/gitea/repos"); repos = data?.data || []; }
|
||||
let loading = $state(true);
|
||||
let loadingCommits = $state(false);
|
||||
|
||||
async function load() {
|
||||
loading = true;
|
||||
const data = await get("/gitea/repos");
|
||||
repos = Array.isArray(data) ? data : data?.data || [];
|
||||
loading = false;
|
||||
}
|
||||
|
||||
async function showCommits(owner, repo) {
|
||||
selectedRepo = `${owner}/${repo}`;
|
||||
loadingCommits = true;
|
||||
const data = await get(`/gitea/repos/${owner}/${repo}/commits`);
|
||||
commits = Array.isArray(data) ? data : [];
|
||||
loadingCommits = false;
|
||||
}
|
||||
load();
|
||||
|
||||
function timeAgo(d) {
|
||||
const s = Math.floor((Date.now() - new Date(d)) / 1000);
|
||||
if (s < 60) return "just now";
|
||||
if (s < 3600) return Math.floor(s / 60) + "m ago";
|
||||
if (s < 86400) return Math.floor(s / 3600) + "h ago";
|
||||
return Math.floor(s / 86400) + "d ago";
|
||||
}
|
||||
|
||||
const langColors = {
|
||||
Python: "#3572A5", JavaScript: "#f1e05a", Shell: "#89e051", Go: "#00ADD8",
|
||||
TypeScript: "#3178c6", Markdown: "#083fa1", CSS: "#563d7c", HTML: "#e34c26",
|
||||
};
|
||||
|
||||
onMount(load);
|
||||
</script>
|
||||
|
||||
<h2 class="text-2xl font-bold mb-6">Gitea Repos</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
{#each repos as r}
|
||||
<button class="border rounded-lg p-4 text-left hover:bg-gray-50" onclick={() => showCommits(r.owner?.login, r.name)}>
|
||||
<span class="font-medium">{r.full_name}</span>
|
||||
<p class="text-xs text-gray-400 mt-1">{r.description || "No description"}</p>
|
||||
<p class="text-xs text-gray-400">Updated {new Date(r.updated_at).toLocaleDateString()}</p>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
<div class="space-y-6">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-surface-900 tracking-tight">Repositories</h1>
|
||||
<p class="text-sm text-surface-400 mt-1">{repos.length} repositories on Gitea</p>
|
||||
</div>
|
||||
|
||||
{#if selectedRepo}
|
||||
<div class="mt-6">
|
||||
<h3 class="font-semibold mb-3">Commits: {selectedRepo}</h3>
|
||||
<div class="space-y-2">
|
||||
{#each commits.slice(0, 20) as c}
|
||||
<div class="border-b pb-2">
|
||||
<p class="text-sm">{c.commit?.message?.split("\n")[0]}</p>
|
||||
<p class="text-xs text-gray-400">{c.commit?.author?.name} - {new Date(c.commit?.author?.date).toLocaleString()}</p>
|
||||
</div>
|
||||
{#if loading}
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
{#each Array(4) as _}
|
||||
<div class="h-[100px] rounded-xl bg-surface-100 animate-pulse"></div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{:else}
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
{#each repos as r}
|
||||
<button
|
||||
class="bg-white rounded-xl border border-surface-200 p-4 text-left shadow-sm hover:shadow-md hover:border-primary-200 transition-all duration-200 group {selectedRepo === `${r.owner?.login}/${r.name}` ? 'ring-2 ring-primary-500 border-primary-300' : ''}"
|
||||
onclick={() => showCommits(r.owner?.login, r.name)}
|
||||
>
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="min-w-0">
|
||||
<p class="text-sm font-semibold text-surface-800 group-hover:text-primary-600 transition-colors truncate">{r.name}</p>
|
||||
<p class="text-xs text-surface-400 mt-1 line-clamp-1">{r.description || "No description"}</p>
|
||||
</div>
|
||||
{#if r.language}
|
||||
<span class="flex items-center gap-1 text-[11px] text-surface-500 shrink-0 ml-2">
|
||||
<span class="w-2 h-2 rounded-full" style="background: {langColors[r.language] || '#888'}"></span>
|
||||
{r.language}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
<p class="text-[11px] text-surface-400 mt-2.5">Updated {timeAgo(r.updated_at)}</p>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Commits Panel -->
|
||||
{#if selectedRepo}
|
||||
<div class="bg-white rounded-xl border border-surface-200 p-5 shadow-sm">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div>
|
||||
<h3 class="text-sm font-bold text-surface-800">Recent Commits</h3>
|
||||
<p class="text-xs text-surface-400 mt-0.5">{selectedRepo}</p>
|
||||
</div>
|
||||
<button
|
||||
aria-label="Close commits"
|
||||
class="text-xs text-surface-400 hover:text-surface-600 transition-colors"
|
||||
onclick={() => { selectedRepo = ""; commits = []; }}
|
||||
>
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
|
||||
</button>
|
||||
</div>
|
||||
{#if loadingCommits}
|
||||
<div class="space-y-3">
|
||||
{#each Array(3) as _}
|
||||
<div class="h-12 rounded-lg bg-surface-100 animate-pulse"></div>
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
<div class="space-y-0">
|
||||
{#each commits.slice(0, 15) as c, i}
|
||||
<div class="flex gap-3 py-2.5 {i < commits.length - 1 ? 'border-b border-surface-100' : ''}">
|
||||
<div class="flex flex-col items-center pt-1">
|
||||
<div class="w-2 h-2 rounded-full bg-primary-400 shrink-0"></div>
|
||||
{#if i < commits.length - 1}
|
||||
<div class="w-px flex-1 bg-surface-200 mt-1"></div>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="min-w-0 flex-1">
|
||||
<p class="text-sm text-surface-700 truncate">{c.commit?.message?.split("\n")[0]}</p>
|
||||
<p class="text-[11px] text-surface-400 mt-0.5">
|
||||
<span class="font-medium">{c.commit?.author?.name}</span> · {timeAgo(c.commit?.author?.date)}
|
||||
</p>
|
||||
</div>
|
||||
<span class="text-[10px] font-mono text-surface-400 bg-surface-50 px-1.5 py-0.5 rounded h-fit shrink-0">{c.sha?.slice(0, 7)}</span>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
@@ -2,46 +2,105 @@
|
||||
import { onMount } from "svelte";
|
||||
|
||||
let termEl;
|
||||
let connected = $state(false);
|
||||
let error = $state("");
|
||||
|
||||
onMount(async () => {
|
||||
const { Terminal } = await import("@xterm/xterm");
|
||||
const { FitAddon } = await import("@xterm/addon-fit");
|
||||
await import("@xterm/xterm/css/xterm.css");
|
||||
try {
|
||||
const { Terminal } = await import("@xterm/xterm");
|
||||
const { FitAddon } = await import("@xterm/addon-fit");
|
||||
await import("@xterm/xterm/css/xterm.css");
|
||||
|
||||
const term = new Terminal({ cursorBlink: true, fontSize: 14, theme: { background: "#1a1a2e" } });
|
||||
const fit = new FitAddon();
|
||||
term.loadAddon(fit);
|
||||
term.open(termEl);
|
||||
fit.fit();
|
||||
|
||||
const proto = location.protocol === "https:" ? "wss:" : "ws:";
|
||||
const ws = new WebSocket(`${proto}//${location.host}/ws/terminal`);
|
||||
ws.binaryType = "arraybuffer";
|
||||
|
||||
ws.onopen = () => {
|
||||
const buf = new Uint8Array(5);
|
||||
buf[0] = 0x01;
|
||||
new DataView(buf.buffer).setUint16(1, term.cols);
|
||||
new DataView(buf.buffer).setUint16(3, term.rows);
|
||||
ws.send(buf);
|
||||
};
|
||||
ws.onmessage = (e) => term.write(new Uint8Array(e.data));
|
||||
ws.onclose = () => term.write("\r\n[Connection closed]");
|
||||
term.onData((data) => ws.readyState === 1 && ws.send(new TextEncoder().encode(data)));
|
||||
|
||||
const ro = new ResizeObserver(() => {
|
||||
const term = new Terminal({
|
||||
cursorBlink: true,
|
||||
fontSize: 13,
|
||||
fontFamily: "'JetBrains Mono', 'Fira Code', 'SF Mono', 'Menlo', monospace",
|
||||
lineHeight: 1.4,
|
||||
theme: {
|
||||
background: "#0f172a",
|
||||
foreground: "#e2e8f0",
|
||||
cursor: "#6366f1",
|
||||
cursorAccent: "#0f172a",
|
||||
selectionBackground: "#334155",
|
||||
black: "#0f172a",
|
||||
red: "#f43f5e",
|
||||
green: "#10b981",
|
||||
yellow: "#f59e0b",
|
||||
blue: "#3b82f6",
|
||||
magenta: "#a855f7",
|
||||
cyan: "#06b6d4",
|
||||
white: "#e2e8f0",
|
||||
},
|
||||
});
|
||||
const fit = new FitAddon();
|
||||
term.loadAddon(fit);
|
||||
term.open(termEl);
|
||||
fit.fit();
|
||||
if (ws.readyState === 1) {
|
||||
|
||||
const proto = location.protocol === "https:" ? "wss:" : "ws:";
|
||||
const ws = new WebSocket(`${proto}//${location.host}/ws/terminal`);
|
||||
ws.binaryType = "arraybuffer";
|
||||
|
||||
ws.onopen = () => {
|
||||
connected = true;
|
||||
const buf = new Uint8Array(5);
|
||||
buf[0] = 0x01;
|
||||
new DataView(buf.buffer).setUint16(1, term.cols);
|
||||
new DataView(buf.buffer).setUint16(3, term.rows);
|
||||
ws.send(buf);
|
||||
}
|
||||
});
|
||||
ro.observe(termEl);
|
||||
};
|
||||
ws.onmessage = (e) => term.write(new Uint8Array(e.data));
|
||||
ws.onclose = () => {
|
||||
connected = false;
|
||||
term.write("\r\n\x1b[90m[Connection closed]\x1b[0m");
|
||||
};
|
||||
ws.onerror = () => {
|
||||
error = "WebSocket connection failed. Terminal requires Tailscale access.";
|
||||
};
|
||||
term.onData((data) => ws.readyState === 1 && ws.send(new TextEncoder().encode(data)));
|
||||
|
||||
const ro = new ResizeObserver(() => {
|
||||
fit.fit();
|
||||
if (ws.readyState === 1) {
|
||||
const buf = new Uint8Array(5);
|
||||
buf[0] = 0x01;
|
||||
new DataView(buf.buffer).setUint16(1, term.cols);
|
||||
new DataView(buf.buffer).setUint16(3, term.rows);
|
||||
ws.send(buf);
|
||||
}
|
||||
});
|
||||
ro.observe(termEl);
|
||||
} catch (e) {
|
||||
error = "Failed to initialize terminal: " + e.message;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<h2 class="text-2xl font-bold mb-4">Terminal</h2>
|
||||
<div bind:this={termEl} class="h-[calc(100vh-8rem)] rounded-lg overflow-hidden"></div>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-surface-900 tracking-tight">Terminal</h1>
|
||||
<p class="text-sm text-surface-400 mt-1">
|
||||
{#if connected}
|
||||
<span class="inline-flex items-center gap-1.5">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
|
||||
Connected
|
||||
</span>
|
||||
{:else if error}
|
||||
<span class="text-rose-500">{error}</span>
|
||||
{:else}
|
||||
<span class="inline-flex items-center gap-1.5">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-amber-400 animate-pulse"></span>
|
||||
Connecting...
|
||||
</span>
|
||||
{/if}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
bind:this={termEl}
|
||||
class="h-[calc(100vh-10rem)] rounded-xl overflow-hidden shadow-lg border border-surface-700"
|
||||
style="background: #0f172a;"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user