feat: initial ui redesign from demo

2026-07-15 21:03:47 +00:00 · 2026-05-11 01:23:11 -05:00
parent eaa758effe
commit 33dcde0827
349 changed files with 23984 additions and 31634 deletions
@@ -0,0 +1,123 @@
+import type {
+  AccentColorId,
+  DashboardCardConfig,
+  FontSizeId,
+  SplitMode,
+} from "./types";
+
+export const DASHBOARD_CARDS: DashboardCardConfig[] = [
+  {
+    id: "stats_bar",
+    label: "Status Bar",
+    description: "Version, uptime, database health, hosts online",
+    defaultEnabled: true,
+  },
+  {
+    id: "counters_bar",
+    label: "Counters Bar",
+    description: "Total hosts, credentials, and tunnels count",
+    defaultEnabled: true,
+  },
+  {
+    id: "quick_actions",
+    label: "Quick Actions",
+    description: "Shortcuts to add hosts, credentials, settings",
+    defaultEnabled: true,
+  },
+  {
+    id: "host_status",
+    label: "Host Status",
+    description: "Live status list with CPU/RAM per host",
+    defaultEnabled: true,
+  },
+  {
+    id: "recent_activity",
+    label: "Recent Activity",
+    description: "Feed of recent connection events",
+    defaultEnabled: true,
+  },
+  {
+    id: "network_graph",
+    label: "Network Graph",
+    description: "Visual map of host network topology",
+    defaultEnabled: false,
+  },
+];
+
+export const ACCENT_PRESET_COLORS = [
+  { label: "Orange", value: "#f59145" },
+  { label: "Blue", value: "#3b82f6" },
+  { label: "Green", value: "#22c55e" },
+  { label: "Purple", value: "#a855f7" },
+  { label: "Pink", value: "#ec4899" },
+  { label: "Cyan", value: "#06b6d4" },
+  { label: "Red", value: "#ef4444" },
+  { label: "Yellow", value: "#eab308" },
+  { label: "Teal", value: "#14b8a6" },
+  { label: "Indigo", value: "#6366f1" },
+  { label: "Rose", value: "#f43f5e" },
+  { label: "Lime", value: "#84cc16" },
+];
+
+export const ACCENT_COLORS = ACCENT_PRESET_COLORS.map((c) => ({
+  id: c.label.toLowerCase() as AccentColorId,
+  label: c.label,
+  value: c.value,
+}));
+
+export function applyAccentColor(colorValue: string) {
+  document.documentElement.style.setProperty("--accent-brand", colorValue);
+}
+
+export const FONT_SIZES: { id: FontSizeId; label: string }[] = [
+  { id: "xs", label: "XS" },
+  { id: "sm", label: "Small" },
+  { id: "md", label: "Normal" },
+  { id: "lg", label: "Large" },
+  { id: "xl", label: "XL" },
+];
+
+export function applyFontSize(id: FontSizeId) {
+  const root = document.documentElement;
+  root.classList.remove("fs-xs", "fs-sm", "fs-md", "fs-lg", "fs-xl");
+  root.classList.add(`fs-${id}`);
+  localStorage.setItem("termix-font-size", id);
+}
+
+export const FOLDER_COLORS = [
+  "#ef4444",
+  "#f97316",
+  "#eab308",
+  "#22c55e",
+  "#3b82f6",
+  "#a855f7",
+  "#ec4899",
+  "#6b7280",
+];
+
+export const SPLIT_MODES: { id: SplitMode; label: string }[] = [
+  { id: "none", label: "None" },
+  { id: "2-way", label: "2-Way" },
+  { id: "3-way", label: "3-Way" },
+  { id: "4-way", label: "4-Way" },
+  { id: "5-way", label: "5-Way" },
+  { id: "6-way", label: "6-Way" },
+];
+
+export const PANE_COUNTS: Record<SplitMode, number> = {
+  none: 0,
+  "2-way": 2,
+  "3-way": 3,
+  "4-way": 4,
+  "5-way": 5,
+  "6-way": 6,
+};
+
+export const PANE_LAYOUTS: Record<SplitMode, string> = {
+  none: "",
+  "2-way": "grid-cols-2 grid-rows-1",
+  "3-way": "grid-cols-2 grid-rows-2",
+  "4-way": "grid-cols-2 grid-rows-2",
+  "5-way": "grid-cols-3 grid-rows-2",
+  "6-way": "grid-cols-3 grid-rows-2",
+};