mirror of
https://github.com/Xevion/banner.git
synced 2026-01-30 20:23:34 -06:00
refactor: migrate frontend from React to SvelteKit
This commit is contained in:
@@ -9,9 +9,8 @@ check:
|
||||
cargo fmt --all -- --check
|
||||
cargo clippy --all-features -- --deny warnings
|
||||
cargo nextest run
|
||||
bun run --cwd web typecheck
|
||||
bun run --cwd web lint
|
||||
bun run --cwd web test --run
|
||||
bun run --cwd web check
|
||||
bun run --cwd web test
|
||||
|
||||
# Run all tests (Rust + frontend)
|
||||
test: test-rust test-web
|
||||
@@ -22,13 +21,13 @@ test-rust *ARGS:
|
||||
|
||||
# Run only frontend tests
|
||||
test-web:
|
||||
bun run --cwd web test --run
|
||||
bun run --cwd web test
|
||||
|
||||
# Quick check: clippy + tests only (skips formatting)
|
||||
# Quick check: clippy + tests + typecheck (skips formatting)
|
||||
check-quick:
|
||||
cargo clippy --all-features -- --deny warnings
|
||||
cargo nextest run
|
||||
bun run --cwd web typecheck
|
||||
bun run --cwd web check
|
||||
|
||||
# Run the Banner API search demo (hits live UTSA API, ~20s)
|
||||
search *ARGS:
|
||||
|
||||
Vendored
+1
-2
@@ -5,5 +5,4 @@ dist-ssr
|
||||
*.local
|
||||
count.txt
|
||||
.env
|
||||
.nitro
|
||||
.tanstack
|
||||
.svelte-kit
|
||||
|
||||
+1
-1
@@ -7,7 +7,7 @@
|
||||
},
|
||||
"files": {
|
||||
"ignoreUnknown": false,
|
||||
"ignore": ["dist/", "node_modules/", ".tanstack/"]
|
||||
"ignore": ["dist/", "node_modules/", ".svelte-kit/"]
|
||||
},
|
||||
"formatter": {
|
||||
"enabled": true,
|
||||
|
||||
+137
-883
File diff suppressed because it is too large
Load Diff
@@ -1,60 +0,0 @@
|
||||
import js from "@eslint/js";
|
||||
import tseslint from "typescript-eslint";
|
||||
import react from "eslint-plugin-react";
|
||||
import reactHooks from "eslint-plugin-react-hooks";
|
||||
import reactRefresh from "eslint-plugin-react-refresh";
|
||||
|
||||
export default tseslint.config(
|
||||
// Ignore generated files and build outputs
|
||||
{
|
||||
ignores: ["dist", "node_modules", "src/routeTree.gen.ts", "*.config.js"],
|
||||
},
|
||||
// Base configs
|
||||
js.configs.recommended,
|
||||
...tseslint.configs.recommendedTypeChecked,
|
||||
// React plugin configuration
|
||||
{
|
||||
files: ["**/*.{ts,tsx}"],
|
||||
plugins: {
|
||||
react,
|
||||
"react-hooks": reactHooks,
|
||||
"react-refresh": reactRefresh,
|
||||
},
|
||||
languageOptions: {
|
||||
parserOptions: {
|
||||
project: true,
|
||||
tsconfigRootDir: import.meta.dirname,
|
||||
ecmaFeatures: {
|
||||
jsx: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
settings: {
|
||||
react: {
|
||||
version: "19.0",
|
||||
},
|
||||
},
|
||||
rules: {
|
||||
// React rules
|
||||
...react.configs.recommended.rules,
|
||||
...react.configs["jsx-runtime"].rules,
|
||||
...reactHooks.configs.recommended.rules,
|
||||
|
||||
// React Refresh
|
||||
"react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
|
||||
|
||||
// TypeScript overrides
|
||||
"@typescript-eslint/no-unused-vars": [
|
||||
"error",
|
||||
{
|
||||
argsIgnorePattern: "^_",
|
||||
varsIgnorePattern: "^_",
|
||||
},
|
||||
],
|
||||
"@typescript-eslint/no-explicit-any": "warn",
|
||||
|
||||
// Disable prop-types since we're using TypeScript
|
||||
"react/prop-types": "off",
|
||||
},
|
||||
}
|
||||
);
|
||||
@@ -1,20 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Banner, a Discord bot and web interface for UTSA Course Monitoring"
|
||||
/>
|
||||
<link rel="apple-touch-icon" href="/logo192.png" />
|
||||
<link rel="manifest" href="/manifest.json" />
|
||||
<title>Banner</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
+18
-34
@@ -3,48 +3,32 @@
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite --port 3000",
|
||||
"start": "vite --port 3000",
|
||||
"build": "vite build && tsc",
|
||||
"serve": "vite preview",
|
||||
"dev": "vite dev --port 3000",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview",
|
||||
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
|
||||
"test": "vitest run",
|
||||
"lint": "tsc && eslint . --ext .ts,.tsx",
|
||||
"typecheck": "tsc --noEmit",
|
||||
"format": "biome format --write .",
|
||||
"format:check": "biome format ."
|
||||
},
|
||||
"dependencies": {
|
||||
"@radix-ui/themes": "^3.2.1",
|
||||
"@tanstack/react-devtools": "^0.2.2",
|
||||
"@tanstack/react-router": "^1.157.16",
|
||||
"@tanstack/react-router-devtools": "^1.157.16",
|
||||
"@tanstack/router-plugin": "^1.157.16",
|
||||
"lucide-react": "^0.544.0",
|
||||
"next-themes": "^0.4.6",
|
||||
"react": "^19.2.4",
|
||||
"react-dom": "^19.2.4",
|
||||
"react-timeago": "^8.3.0",
|
||||
"recharts": "^3.7.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@biomejs/biome": "^1.9.4",
|
||||
"@eslint/js": "^9.39.2",
|
||||
"@testing-library/dom": "^10.4.0",
|
||||
"@testing-library/react": "^16.3.2",
|
||||
"@types/node": "^24.10.9",
|
||||
"@types/react": "^19.2.10",
|
||||
"@types/react-dom": "^19.0.3",
|
||||
"@vitejs/plugin-react": "^4.3.4",
|
||||
"baseline-browser-mapping": "^2.9.19",
|
||||
"eslint": "^9.39.2",
|
||||
"eslint-plugin-react": "^7.37.5",
|
||||
"eslint-plugin-react-hooks": "^7.0.1",
|
||||
"eslint-plugin-react-refresh": "^0.4.26",
|
||||
"@fontsource-variable/inter": "^5.2.5",
|
||||
"@lucide/svelte": "^0.563.0",
|
||||
"@sveltejs/adapter-static": "^3.0.8",
|
||||
"@sveltejs/kit": "^2.16.0",
|
||||
"@sveltejs/vite-plugin-svelte": "^5.0.3",
|
||||
"@tailwindcss/vite": "^4.0.0",
|
||||
"@types/node": "^25.1.0",
|
||||
"bits-ui": "^1.3.7",
|
||||
"clsx": "^2.1.1",
|
||||
"jsdom": "^26.0.0",
|
||||
"svelte": "^5.19.0",
|
||||
"svelte-check": "^4.1.4",
|
||||
"tailwind-merge": "^3.0.1",
|
||||
"tailwindcss": "^4.0.0",
|
||||
"typescript": "^5.7.2",
|
||||
"typescript-eslint": "^8.54.0",
|
||||
"vite": "^6.3.5",
|
||||
"vitest": "^3.0.5",
|
||||
"web-vitals": "^4.2.4"
|
||||
"vitest": "^3.0.5"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,54 +0,0 @@
|
||||
.App {
|
||||
min-height: 100vh;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
|
||||
"Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
|
||||
background-color: var(--color-background);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 0.2;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
|
||||
.animate-pulse {
|
||||
animation: pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Theme toggle button */
|
||||
.theme-toggle {
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
margin: 4px;
|
||||
padding: 7px;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--gray-11);
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
transform: scale(1.25);
|
||||
}
|
||||
|
||||
.theme-toggle:hover {
|
||||
background-color: var(--gray-4);
|
||||
}
|
||||
|
||||
/* Screen reader only text */
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
Vendored
+11
@@ -0,0 +1,11 @@
|
||||
/// <reference types="@sveltejs/kit" />
|
||||
|
||||
declare const __APP_VERSION__: string;
|
||||
|
||||
declare namespace App {
|
||||
// interface Error {}
|
||||
// interface Locals {}
|
||||
// interface PageData {}
|
||||
// interface PageState {}
|
||||
// interface Platform {}
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="icon" href="%sveltekit.assets%/favicon.ico" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Banner, a Discord bot and web interface for UTSA Course Monitoring"
|
||||
/>
|
||||
<link rel="apple-touch-icon" href="%sveltekit.assets%/logo192.png" />
|
||||
<link rel="manifest" href="%sveltekit.assets%/manifest.json" />
|
||||
<title>Banner</title>
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,36 +0,0 @@
|
||||
import { Button } from "@radix-ui/themes";
|
||||
import { Monitor, Moon, Sun } from "lucide-react";
|
||||
import { useTheme } from "next-themes";
|
||||
import { useMemo } from "react";
|
||||
|
||||
export function ThemeToggle() {
|
||||
const { theme, setTheme } = useTheme();
|
||||
|
||||
const nextTheme = useMemo(() => {
|
||||
switch (theme) {
|
||||
case "light":
|
||||
return "dark";
|
||||
case "dark":
|
||||
return "system";
|
||||
case "system":
|
||||
return "light";
|
||||
default:
|
||||
console.error(`Invalid theme: ${theme}`);
|
||||
return "system";
|
||||
}
|
||||
}, [theme]);
|
||||
|
||||
const icon = useMemo(() => {
|
||||
if (nextTheme === "system") {
|
||||
return <Monitor size={18} />;
|
||||
}
|
||||
return nextTheme === "dark" ? <Moon size={18} /> : <Sun size={18} />;
|
||||
}, [nextTheme]);
|
||||
|
||||
return (
|
||||
<Button variant="ghost" size="3" onClick={() => setTheme(nextTheme)} className="theme-toggle">
|
||||
{icon}
|
||||
<span className="sr-only">Toggle theme</span>
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
@@ -1,7 +1,6 @@
|
||||
import { beforeEach, describe, expect, it, vi } from "vitest";
|
||||
import { BannerApiClient } from "./api";
|
||||
|
||||
// Mock fetch
|
||||
global.fetch = vi.fn();
|
||||
|
||||
describe("BannerApiClient", () => {
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
// API client for Banner backend
|
||||
const API_BASE_URL = "/api";
|
||||
|
||||
export interface HealthResponse {
|
||||
@@ -57,5 +56,4 @@ export class BannerApiClient {
|
||||
}
|
||||
}
|
||||
|
||||
// Export a default instance
|
||||
export const client = new BannerApiClient();
|
||||
|
||||
@@ -0,0 +1,53 @@
|
||||
<script lang="ts">
|
||||
import { browser } from "$app/environment";
|
||||
import { Monitor, Moon, Sun } from "@lucide/svelte";
|
||||
|
||||
type Theme = "light" | "dark" | "system";
|
||||
|
||||
let theme = $state<Theme>("system");
|
||||
|
||||
if (browser) {
|
||||
theme = (localStorage.getItem("theme") as Theme) ?? "system";
|
||||
}
|
||||
|
||||
const nextTheme = $derived<Theme>(
|
||||
theme === "light" ? "dark" : theme === "dark" ? "system" : "light"
|
||||
);
|
||||
|
||||
function applyTheme(t: Theme) {
|
||||
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
|
||||
const isDark = t === "dark" || (t === "system" && prefersDark);
|
||||
document.documentElement.classList.toggle("dark", isDark);
|
||||
}
|
||||
|
||||
function toggle() {
|
||||
const next = nextTheme;
|
||||
|
||||
const update = () => {
|
||||
theme = next;
|
||||
localStorage.setItem("theme", next);
|
||||
applyTheme(next);
|
||||
};
|
||||
|
||||
if (document.startViewTransition) {
|
||||
document.startViewTransition(update);
|
||||
} else {
|
||||
update();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<button
|
||||
onclick={toggle}
|
||||
class="cursor-pointer border-none rounded-md flex items-center justify-center p-2 scale-125
|
||||
text-muted-foreground hover:bg-muted bg-transparent transition-colors"
|
||||
aria-label="Toggle theme"
|
||||
>
|
||||
{#if nextTheme === "dark"}
|
||||
<Moon size={18} />
|
||||
{:else if nextTheme === "system"}
|
||||
<Monitor size={18} />
|
||||
{:else}
|
||||
<Sun size={18} />
|
||||
{/if}
|
||||
</button>
|
||||
@@ -0,0 +1,69 @@
|
||||
/**
|
||||
* Relative time formatting with adaptive refresh intervals.
|
||||
*
|
||||
* The key insight: a timestamp showing "3 seconds ago" needs to update every second,
|
||||
* but "2 hours ago" only needs to update every minute. This module provides both
|
||||
* the formatted string and the optimal interval until the next meaningful change.
|
||||
*/
|
||||
|
||||
interface RelativeTimeResult {
|
||||
/** The human-readable relative time string (e.g. "3 seconds ago") */
|
||||
text: string;
|
||||
/** Milliseconds until the displayed text would change */
|
||||
nextUpdateMs: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* Compute a relative time string and the interval until it next changes.
|
||||
*
|
||||
* Granularity tiers:
|
||||
* - < 60s: per-second ("1 second ago", "45 seconds ago")
|
||||
* - < 60m: per-minute ("1 minute ago", "12 minutes ago")
|
||||
* - < 24h: per-hour ("1 hour ago", "5 hours ago")
|
||||
* - >= 24h: per-day ("1 day ago", "3 days ago")
|
||||
*/
|
||||
export function relativeTime(date: Date, ref: Date): RelativeTimeResult {
|
||||
const diffMs = ref.getTime() - date.getTime();
|
||||
const seconds = Math.round(diffMs / 1000);
|
||||
|
||||
if (seconds < 1) {
|
||||
return { text: "just now", nextUpdateMs: 1000 - (diffMs % 1000) || 1000 };
|
||||
}
|
||||
|
||||
if (seconds < 60) {
|
||||
const remainder = 1000 - (diffMs % 1000);
|
||||
return {
|
||||
text: seconds === 1 ? "1 second ago" : `${seconds} seconds ago`,
|
||||
nextUpdateMs: remainder || 1000,
|
||||
};
|
||||
}
|
||||
|
||||
const minutes = Math.floor(seconds / 60);
|
||||
if (minutes < 60) {
|
||||
// Update when the next minute boundary is crossed
|
||||
const msIntoCurrentMinute = diffMs % 60_000;
|
||||
const msUntilNextMinute = 60_000 - msIntoCurrentMinute;
|
||||
return {
|
||||
text: minutes === 1 ? "1 minute ago" : `${minutes} minutes ago`,
|
||||
nextUpdateMs: msUntilNextMinute || 60_000,
|
||||
};
|
||||
}
|
||||
|
||||
const hours = Math.floor(minutes / 60);
|
||||
if (hours < 24) {
|
||||
const msIntoCurrentHour = diffMs % 3_600_000;
|
||||
const msUntilNextHour = 3_600_000 - msIntoCurrentHour;
|
||||
return {
|
||||
text: hours === 1 ? "1 hour ago" : `${hours} hours ago`,
|
||||
nextUpdateMs: msUntilNextHour || 3_600_000,
|
||||
};
|
||||
}
|
||||
|
||||
const days = Math.floor(hours / 24);
|
||||
const msIntoCurrentDay = diffMs % 86_400_000;
|
||||
const msUntilNextDay = 86_400_000 - msIntoCurrentDay;
|
||||
return {
|
||||
text: days === 1 ? "1 day ago" : `${days} days ago`,
|
||||
nextUpdateMs: msUntilNextDay || 86_400_000,
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
import { clsx, type ClassValue } from "clsx";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs));
|
||||
}
|
||||
@@ -1,44 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="Layer_1"
|
||||
xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 841.9 595.3">
|
||||
<!-- Generator: Adobe Illustrator 29.3.0, SVG Export Plug-In . SVG Version: 2.1.0 Build 146) -->
|
||||
<defs>
|
||||
<style>
|
||||
.st0 {
|
||||
fill: #9ae7fc;
|
||||
}
|
||||
|
||||
.st1 {
|
||||
fill: #61dafb;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<g>
|
||||
<path class="st1" d="M666.3,296.5c0-32.5-40.7-63.3-103.1-82.4,14.4-63.6,8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6,0,8.3.9,11.4,2.6,13.6,7.8,19.5,37.5,14.9,75.7-1.1,9.4-2.9,19.3-5.1,29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50,32.6-30.3,63.2-46.9,84-46.9v-22.3c-27.5,0-63.5,19.6-99.9,53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7,0,51.4,16.5,84,46.6-14,14.7-28,31.4-41.3,49.9-22.6,2.4-44,6.1-63.6,11-2.3-10-4-19.7-5.2-29-4.7-38.2,1.1-67.9,14.6-75.8,3-1.8,6.9-2.6,11.5-2.6v-22.3c-8.4,0-16,1.8-22.6,5.6-28.1,16.2-34.4,66.7-19.9,130.1-62.2,19.2-102.7,49.9-102.7,82.3s40.7,63.3,103.1,82.4c-14.4,63.6-8,114.2,20.2,130.4,6.5,3.8,14.1,5.6,22.5,5.6,27.5,0,63.5-19.6,99.9-53.6,36.4,33.8,72.4,53.2,99.9,53.2,8.4,0,16-1.8,22.6-5.6,28.1-16.2,34.4-66.7,19.9-130.1,62-19.1,102.5-49.9,102.5-82.3zm-130.2-66.7c-3.7,12.9-8.3,26.2-13.5,39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4,14.2,2.1,27.9,4.7,41,7.9zm-45.8,106.5c-7.8,13.5-15.8,26.3-24.1,38.2-14.9,1.3-30,2-45.2,2s-30.2-.7-45-1.9c-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8,6.2-13.4,13.2-26.8,20.7-39.9,7.8-13.5,15.8-26.3,24.1-38.2,14.9-1.3,30-2,45.2-2s30.2.7,45,1.9c8.3,11.9,16.4,24.6,24.2,38,7.6,13.1,14.5,26.4,20.8,39.8-6.3,13.4-13.2,26.8-20.7,39.9zm32.3-13c5.4,13.4,10,26.8,13.8,39.8-13.1,3.2-26.9,5.9-41.2,8,4.9-7.7,9.8-15.6,14.4-23.7,4.6-8,8.9-16.1,13-24.1zm-101.4,106.7c-9.3-9.6-18.6-20.3-27.8-32,9,.4,18.2.7,27.5.7s18.7-.2,27.8-.7c-9,11.7-18.3,22.4-27.5,32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9,3.7-12.9,8.3-26.2,13.5-39.5,4.1,8,8.4,16,13.1,24s9.5,15.8,14.4,23.4zm73.9-208.1c9.3,9.6,18.6,20.3,27.8,32-9-.4-18.2-.7-27.5-.7s-18.7.2-27.8.7c9-11.7,18.3-22.4,27.5-32zm-74,58.9c-4.9,7.7-9.8,15.6-14.4,23.7-4.6,8-8.9,16-13,24-5.4-13.4-10-26.8-13.8-39.8,13.1-3.1,26.9-5.8,41.2-7.9zm-90.5,125.2c-35.4-15.1-58.3-34.9-58.3-50.6s22.9-35.6,58.3-50.6c8.6-3.7,18-7,27.7-10.1,5.7,19.6,13.2,40,22.5,60.9-9.2,20.8-16.6,41.1-22.2,60.6-9.9-3.1-19.3-6.5-28-10.2zm53.8,142.9c-13.6-7.8-19.5-37.5-14.9-75.7,1.1-9.4,2.9-19.3,5.1-29.4,19.6,4.8,41,8.5,63.5,10.9,13.5,18.5,27.5,35.3,41.6,50-32.6,30.3-63.2,46.9-84,46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7,38.2-1.1,67.9-14.6,75.8-3,1.8-6.9,2.6-11.5,2.6-20.7,0-51.4-16.5-84-46.6,14-14.7,28-31.4,41.3-49.9,22.6-2.4,44-6.1,63.6-11,2.3,10.1,4.1,19.8,5.2,29.1zm38.5-66.7c-8.6,3.7-18,7-27.7,10.1-5.7-19.6-13.2-40-22.5-60.9,9.2-20.8,16.6-41.1,22.2-60.6,9.9,3.1,19.3,6.5,28.1,10.2,35.4,15.1,58.3,34.9,58.3,50.6,0,15.7-23,35.6-58.4,50.6zm-264.9-268.7z"/>
|
||||
<circle class="st1" cx="420.9" cy="296.5" r="45.7"/>
|
||||
<path class="st1" d="M520.5,78.1"/>
|
||||
</g>
|
||||
<circle class="st0" cx="420.8" cy="296.6" r="43"/>
|
||||
<path class="st1" d="M466.1,296.6c0,25-20.2,45.2-45.2,45.2s-45.2-20.2-45.2-45.2,20.2-45.2,45.2-45.2,45.2,20.2,45.2,45.2ZM386,295.6v-6.3c0-1.1,1.2-5.1,1.8-6.2,1-1.9,2.9-3.5,4.6-4.7l-3.4-3.4c4-3.6,9.4-3.7,13.7-.7,1.9-4.7,6.6-7.1,11.6-6.7l-.8,4.2c5.9.2,13.1,4.1,13.1,10.8s0,.5-.7.7c-1.7.3-3.4-.4-5-.6s-1.2-.4-1.2.3,2.5,4.1,3,5.5,1,3.5.8,5.3c-5.6-.8-10.5-3.2-14.8-6.7.3,2.6,4.1,21.7,5.3,21.9s.8-.6,1-1.1,1.3-6.3,1.3-6.7c0-1-1.7-1.8-2.2-2.8-1.2-2.7,1.3-4.7,3.7-3.3s5.2,6.2,7.5,7.3,13,1.4,14.8,3.3-2.9,4.6-1.5,7.6c6.7-2.6,13.5-3.3,20.6-2.5,3.1-9.7,3.1-20.3-.9-29.8-7.3,0-14.7-3.6-17.2-10.8-2.5-7.2-.7-8.6-1.3-9.3-.8-1-6.3.6-7.4-1.5s.3-1.1-.2-1.4-1.9-.6-2.6-.8c-26-6.4-51.3,15.7-49.7,42.1,0,1.6,1.6,10.3,2.4,11.1s4.8,0,6.3,0,3.7.3,5,.5c2.9.4,7.2,2.4,9.4,2.5s2.4-.8,2.7-2.4c.4-2.6.5-7.4.5-10.1s-1-7.8-1.3-11.6c-.9-.2-.7,0-.9.5-.7,1.3-1.1,3.2-1.9,4.8s-5.2,8.7-5.7,9-.7-.5-.8-.8c-1.6-3.5-2-7.9-1.9-11.8-.9-1-5.4,4.9-6.7,5.3l-.8-.4v-.3h-.2ZM455.6,276.4c1.1-1.2-6-8.9-7.2-10-3-2.7-5.4-4.5-3.5,1.4s5.7,7.8,10.6,8.5h.1ZM410.9,270.1c-.4-.5-6.1,2.9-5.5,4.6,1.9-1.3,5.9-1.7,5.5-4.6ZM400.4,276.4c-.3-2.4-6.3-2.7-7.2-1s1.6,1.4,1.9,1.4c1.8.3,3.5-.6,5.2-.4h.1ZM411.3,276.8c3.8,1.3,6.6,3.6,10.9,3.7s0-3-1.2-3.9c-2.2-1.7-5.1-2.4-7.8-2.4s-1.6-.3-1.4.4c2.8.6,7.3.7,8.4,3.8-2.3-.3-3.9-1.6-6.2-2s-2.5-.5-2.6.3h0ZM420.6,290.3c-.8-5.1-5.7-10.8-10.9-11.6s-1.3-.4-.8.5,4.7,3.2,5.7,4,4.5,4.2,2.1,3.8-8.4-7.8-9.4-6.7c.2.9,1.1,1.9,1.7,2.7,3,3.8,6.9,6.8,11.8,7.4h-.2ZM395.3,279.8c-5,1.1-6.9,6.3-6.7,11,.7.8,5-3.8,5.4-4.5s2.7-4.6,1.1-4-2.9,4.4-4.2,4.6.2-2.1.4-2.5c1.1-1.6,2.9-3.1,4-4.6h0ZM400.4,281.5c-.4-.5-2,1.3-2.3,1.7-2.9,3.9-2.6,10.2-1.5,14.8.8.2.8-.3,1.2-.7,3-3.8,5.5-10.5,4.5-15.4-2.1,3.1-3.1,7.3-3.6,11h-1.3c0-4,1.9-7.7,3-11.4h0ZM426.9,305.9c0-1.7-1.7-1.4-2.5-1.9s-1.3-1.9-3-1.4c1.3,2.1,3,3.2,5.5,3.4h0ZM417.2,308.5c7.6.7,5.5-1.9,1.4-5.5-1.3-.3-1.5,4.5-1.4,5.5ZM437,309.7c-3.5-.3-7.8-2-11.2-2.1s-1.3,0-1.9.7c4,1.3,8.4,1.7,12.1,4l1-2.5h0ZM420.5,312.8c-7.3,0-15.1,3.7-20.4,8.8s-4.8,5.3-4.8,6.2c0,1.8,8.6,6.2,10.5,6.8,12.1,4.8,27.5,3.5,38.2-4.2s3.1-2.7,0-6.2c-5.7-6.6-14.7-11.4-23.4-11.3h-.1ZM398.7,316.9c-1.4-1.4-5-1.9-7-2.1s-5.3-.3-6.9.6l13.9,1.4h0ZM456.9,314.8h-7.4c-.9,0-4.9,1.1-6,1.6s-.8.6,0,.5c2.4,0,5.1-1,7.6-1.3s3.5.2,5.1,0,1.3-.3.6-.8h0Z"/>
|
||||
<path class="st0" d="M386,295.6l.8.4c1.3-.3,5.8-6.2,6.7-5.3,0,3.9.3,8.3,1.9,11.8s0,1.2.8.8,5.1-7.8,5.7-9,1.3-3.5,1.9-4.8,0-.7.9-.5c.3,3.8,1.2,7.8,1.3,11.6s0,7.5-.5,10.1-1.1,2.4-2.7,2.4-6.5-2.1-9.4-2.5-3.7-.5-5-.5-5.4,1.1-6.3,0-2.2-9.5-2.4-11.1c-1.5-26.4,23.7-48.5,49.7-42.1s2.2.4,2.6.8,0,1,.2,1.4c1.1,2,6.5.5,7.4,1.5s.4,6.9,1.3,9.3c2.5,7.2,10,10.9,17.2,10.8,4,9.4,4,20.1.9,29.8-7.2-.7-13.9,0-20.6,2.5-1.3-3.1,4.1-5.1,1.5-7.6s-11.8-1.9-14.8-3.3-5.4-6.1-7.5-7.3-4.9.6-3.7,3.3,2.1,1.8,2.2,2.8-1,6.2-1.3,6.7-.3,1.3-1,1.1c-1.1-.3-5-19.3-5.3-21.9,4.3,3.5,9.2,5.9,14.8,6.7.2-1.9-.3-3.5-.8-5.3s-3-5.1-3-5.5c0-.8.9-.3,1.2-.3,1.6,0,3.3.8,5,.6s.7.3.7-.7c0-6.6-7.2-10.6-13.1-10.8l.8-4.2c-5.1-.3-9.6,2-11.6,6.7-4.3-3-9.8-3-13.7.7l3.4,3.4c-1.8,1.3-3.5,2.8-4.6,4.7s-1.8,5.1-1.8,6.2v6.6h.2ZM431.6,265c7.8,2.1,8.7-3.5.2-1.3l-.2,1.3ZM432.4,270.9c.3.6,6.4-.4,5.8-2.3s-4.6.6-5.7.6l-.2,1.7h.1ZM434.5,276c.8,1.2,5.7-1.8,5.5-2.7-.4-1.9-6.6,1.2-5.5,2.7ZM442.9,276.4c-.9-.9-5,2.8-4.6,4,.6,2.4,5.7-3,4.6-4ZM445.1,279.9c-.3.2-3.1,4.6-1.5,5s3.5-3.4,3.5-4-1.3-1.3-2-.9h0ZM448.9,287.4c2.1.8,3.8-5.1,2.3-5.5-1.9-.6-2.6,5.1-2.3,5.5ZM457.3,288.6c.5-1.7,1.1-4.7-1-5.5-1,.3-.6,3.9-.6,4.8l.3.5,1.3.2h0Z"/>
|
||||
<path class="st0" d="M455.6,276.4c-5-.8-9.1-3.6-10.6-8.5s.5-4,3.5-1.4,8.3,8.7,7.2,10h-.1Z"/>
|
||||
<path class="st0" d="M420.6,290.3c-4.9-.6-8.9-3.6-11.8-7.4s-1.5-1.8-1.7-2.7c1-1,8.5,6.6,9.4,6.7,2.4.4-1.8-3.5-2.1-3.8-1-.8-5.4-3.5-5.7-4-.4-.8.5-.5.8-.5,5.2.8,10.1,6.6,10.9,11.6h.2Z"/>
|
||||
<path class="st0" d="M400.4,281.5c-1.1,3.7-3,7.3-3,11.4h1.3c.5-3.7,1.5-7.8,3.6-11,1,4.8-1.5,11.6-4.5,15.4s-.4.8-1.2.7c-1.1-4.5-1.3-10.8,1.5-14.8s1.9-2.2,2.3-1.7h0Z"/>
|
||||
<path class="st0" d="M411.3,276.8c0-.8,2.1-.4,2.6-.3,2.4.4,4,1.7,6.2,2-1.2-3.1-5.7-3.2-8.4-3.8,0-.8.9-.4,1.4-.4,2.8,0,5.6.7,7.8,2.4,2.2,1.7,4,4,1.2,3.9-4.3,0-7.1-2.4-10.9-3.7h0Z"/>
|
||||
<path class="st0" d="M395.3,279.8c-1.1,1.6-3,3-4,4.6s-1.9,2.8-.4,2.5,2.8-4,4.2-4.6-.9,3.6-1.1,4c-.4.7-4.7,5.2-5.4,4.5-.2-4.6,1.8-9.9,6.7-11h0Z"/>
|
||||
<path class="st0" d="M437,309.7l-1,2.5c-3.6-2.3-8-2.8-12.1-4,.5-.7,1.1-.7,1.9-.7,3.4,0,7.8,1.8,11.2,2.1h0Z"/>
|
||||
<path class="st0" d="M417.2,308.5c0-1,0-5.8,1.4-5.5,4,3.5,6.1,6.2-1.4,5.5Z"/>
|
||||
<path class="st0" d="M400.4,276.4c-1.8-.3-3.5.7-5.2.4s-2.3-.8-1.9-1.4c.8-1.6,6.9-1.4,7.2,1h-.1Z"/>
|
||||
<path class="st0" d="M410.9,270.1c.4,3-3.6,3.3-5.5,4.6-.6-1.8,5-5.1,5.5-4.6Z"/>
|
||||
<path class="st0" d="M426.9,305.9c-2.5-.2-4.1-1.3-5.5-3.4,1.7-.4,2,.8,3,1.4s2.6.3,2.5,1.9h0Z"/>
|
||||
<path class="st1" d="M432.4,270.9l.2-1.7c1.1,0,5.1-2.2,5.7-.6s-5.5,2.9-5.8,2.3h-.1Z"/>
|
||||
<path class="st1" d="M431.6,265l.2-1.3c8.4-2.1,7.7,3.4-.2,1.3Z"/>
|
||||
<path class="st1" d="M434.5,276c-1.1-1.5,5.1-4.6,5.5-2.7s-4.6,4-5.5,2.7Z"/>
|
||||
<path class="st1" d="M442.9,276.4c1.1,1.1-4,6.4-4.6,4s3.7-4.9,4.6-4Z"/>
|
||||
<path class="st1" d="M445.1,279.9c.7-.4,2.1,0,2,.9s-2.4,4.4-3.5,4,1.3-4.8,1.5-5h0Z"/>
|
||||
<path class="st1" d="M448.9,287.4c-.3-.3.4-6.1,2.3-5.5,1.4.4-.2,6.2-2.3,5.5Z"/>
|
||||
<path class="st1" d="M457.3,288.6l-1.3-.2-.3-.5c0-.9-.4-4.6.6-4.8,2.1.8,1.5,3.8,1,5.5h0Z"/>
|
||||
<path class="st0" d="M420.5,312.8c8.9,0,17.9,4.7,23.4,11.3,5.6,6.6,3.8,3.5,0,6.2-10.7,7.7-26.1,9-38.2,4.2-1.9-.8-10.5-5.1-10.5-6.8s4-5.3,4.8-6.2c5.3-5,13.1-8.6,20.4-8.8h.1Z"/>
|
||||
<path class="st0" d="M398.7,316.9l-13.9-1.4c1.7-1,5-.8,6.9-.6s5.6.7,7,2.1h0Z"/>
|
||||
<path class="st0" d="M456.9,314.8c.7.5,0,.8-.6.8-1.6.2-3.5-.2-5.1,0-2.4.3-5.2,1.2-7.6,1.3s-1.1,0,0-.5,5.1-1.6,6-1.6h7.4,0Z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 8.4 KiB |
@@ -1,36 +0,0 @@
|
||||
import { StrictMode } from "react";
|
||||
import ReactDOM from "react-dom/client";
|
||||
import { RouterProvider, createRouter } from "@tanstack/react-router";
|
||||
|
||||
// Import the generated route tree
|
||||
import { routeTree } from "./routeTree.gen";
|
||||
|
||||
import "./styles.css";
|
||||
|
||||
// Create a new router instance
|
||||
const router = createRouter({
|
||||
routeTree,
|
||||
context: {},
|
||||
defaultPreload: "intent",
|
||||
scrollRestoration: true,
|
||||
defaultStructuralSharing: true,
|
||||
defaultPreloadStaleTime: 0,
|
||||
});
|
||||
|
||||
// Register the router instance for type safety
|
||||
declare module "@tanstack/react-router" {
|
||||
interface Register {
|
||||
router: typeof router;
|
||||
}
|
||||
}
|
||||
|
||||
// Render the app
|
||||
const rootElement = document.getElementById("app");
|
||||
if (rootElement && !rootElement.innerHTML) {
|
||||
const root = ReactDOM.createRoot(rootElement);
|
||||
root.render(
|
||||
<StrictMode>
|
||||
<RouterProvider router={router} />
|
||||
</StrictMode>
|
||||
);
|
||||
}
|
||||
@@ -1,59 +0,0 @@
|
||||
/* eslint-disable */
|
||||
|
||||
// @ts-nocheck
|
||||
|
||||
// noinspection JSUnusedGlobalSymbols
|
||||
|
||||
// This file was automatically generated by TanStack Router.
|
||||
// You should NOT make any changes in this file as it will be overwritten.
|
||||
// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
|
||||
|
||||
import { Route as rootRouteImport } from './routes/__root'
|
||||
import { Route as IndexRouteImport } from './routes/index'
|
||||
|
||||
const IndexRoute = IndexRouteImport.update({
|
||||
id: '/',
|
||||
path: '/',
|
||||
getParentRoute: () => rootRouteImport,
|
||||
} as any)
|
||||
|
||||
export interface FileRoutesByFullPath {
|
||||
'/': typeof IndexRoute
|
||||
}
|
||||
export interface FileRoutesByTo {
|
||||
'/': typeof IndexRoute
|
||||
}
|
||||
export interface FileRoutesById {
|
||||
__root__: typeof rootRouteImport
|
||||
'/': typeof IndexRoute
|
||||
}
|
||||
export interface FileRouteTypes {
|
||||
fileRoutesByFullPath: FileRoutesByFullPath
|
||||
fullPaths: '/'
|
||||
fileRoutesByTo: FileRoutesByTo
|
||||
to: '/'
|
||||
id: '__root__' | '/'
|
||||
fileRoutesById: FileRoutesById
|
||||
}
|
||||
export interface RootRouteChildren {
|
||||
IndexRoute: typeof IndexRoute
|
||||
}
|
||||
|
||||
declare module '@tanstack/react-router' {
|
||||
interface FileRoutesByPath {
|
||||
'/': {
|
||||
id: '/'
|
||||
path: '/'
|
||||
fullPath: '/'
|
||||
preLoaderRoute: typeof IndexRouteImport
|
||||
parentRoute: typeof rootRouteImport
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const rootRouteChildren: RootRouteChildren = {
|
||||
IndexRoute: IndexRoute,
|
||||
}
|
||||
export const routeTree = rootRouteImport
|
||||
._addFileChildren(rootRouteChildren)
|
||||
._addFileTypes<FileRouteTypes>()
|
||||
@@ -0,0 +1,27 @@
|
||||
<script lang="ts">
|
||||
import "./layout.css";
|
||||
import { Tooltip } from "bits-ui";
|
||||
import ThemeToggle from "$lib/components/ThemeToggle.svelte";
|
||||
|
||||
let { children } = $props();
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
{@html `<script>
|
||||
(function() {
|
||||
const stored = localStorage.getItem("theme");
|
||||
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
|
||||
if (stored === "dark" || (!stored && prefersDark) || (stored === "system" && prefersDark)) {
|
||||
document.documentElement.classList.add("dark");
|
||||
}
|
||||
})();
|
||||
</script>`}
|
||||
</svelte:head>
|
||||
|
||||
<Tooltip.Provider>
|
||||
<div class="fixed top-5 right-5 z-50">
|
||||
<ThemeToggle />
|
||||
</div>
|
||||
|
||||
{@render children()}
|
||||
</Tooltip.Provider>
|
||||
@@ -0,0 +1,2 @@
|
||||
export const prerender = true;
|
||||
export const ssr = false;
|
||||
@@ -0,0 +1,327 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from "svelte";
|
||||
import {
|
||||
Activity,
|
||||
Bot,
|
||||
CheckCircle,
|
||||
Circle,
|
||||
Clock,
|
||||
Globe,
|
||||
Hourglass,
|
||||
MessageCircle,
|
||||
WifiOff,
|
||||
XCircle,
|
||||
} from "@lucide/svelte";
|
||||
import { Tooltip } from "bits-ui";
|
||||
import { type Status, type ServiceInfo, type StatusResponse, client } from "$lib/api";
|
||||
import { relativeTime } from "$lib/time";
|
||||
|
||||
const REFRESH_INTERVAL = import.meta.env.DEV ? 3000 : 30000;
|
||||
const REQUEST_TIMEOUT = 10000;
|
||||
|
||||
const SERVICE_ICONS: Record<string, typeof Bot> = {
|
||||
bot: Bot,
|
||||
banner: Globe,
|
||||
discord: MessageCircle,
|
||||
database: Activity,
|
||||
web: Globe,
|
||||
scraper: Clock,
|
||||
};
|
||||
|
||||
interface ResponseTiming {
|
||||
health: number | null;
|
||||
status: number | null;
|
||||
}
|
||||
|
||||
interface Service {
|
||||
name: string;
|
||||
status: Status;
|
||||
icon: typeof Bot;
|
||||
}
|
||||
|
||||
type StatusState =
|
||||
| { mode: "loading" }
|
||||
| { mode: "response"; timing: ResponseTiming; lastFetch: Date; status: StatusResponse }
|
||||
| { mode: "error"; lastFetch: Date }
|
||||
| { mode: "timeout"; lastFetch: Date };
|
||||
|
||||
const STATUS_ICONS: Record<Status | "Unreachable", { icon: typeof CheckCircle; color: string }> = {
|
||||
active: { icon: CheckCircle, color: "var(--status-green)" },
|
||||
connected: { icon: CheckCircle, color: "var(--status-green)" },
|
||||
starting: { icon: Hourglass, color: "var(--status-orange)" },
|
||||
disabled: { icon: Circle, color: "var(--status-gray)" },
|
||||
error: { icon: XCircle, color: "var(--status-red)" },
|
||||
Unreachable: { icon: WifiOff, color: "var(--status-red)" },
|
||||
};
|
||||
|
||||
let statusState = $state({ mode: "loading" } as StatusState);
|
||||
let now = $state(new Date());
|
||||
|
||||
const isLoading = $derived(statusState.mode === "loading");
|
||||
const hasResponse = $derived(statusState.mode === "response");
|
||||
const shouldShowSkeleton = $derived(statusState.mode === "loading" || statusState.mode === "error");
|
||||
|
||||
const overallHealth: Status | "Unreachable" = $derived(
|
||||
statusState.mode === "timeout"
|
||||
? "Unreachable"
|
||||
: statusState.mode === "error"
|
||||
? "error"
|
||||
: statusState.mode === "response"
|
||||
? statusState.status.status
|
||||
: "error"
|
||||
);
|
||||
|
||||
const overallIcon = $derived(STATUS_ICONS[overallHealth]);
|
||||
|
||||
const services: Service[] = $derived(
|
||||
statusState.mode === "response"
|
||||
? (Object.entries(statusState.status.services) as [string, ServiceInfo][]).map(
|
||||
([id, info]) => ({
|
||||
name: info.name,
|
||||
status: info.status,
|
||||
icon: SERVICE_ICONS[id] ?? Bot,
|
||||
})
|
||||
)
|
||||
: []
|
||||
);
|
||||
|
||||
const shouldShowTiming = $derived(
|
||||
statusState.mode === "response" && statusState.timing.health !== null
|
||||
);
|
||||
|
||||
const shouldShowLastFetch = $derived(
|
||||
statusState.mode === "response" || statusState.mode === "error" || statusState.mode === "timeout"
|
||||
);
|
||||
|
||||
const lastFetch = $derived(
|
||||
statusState.mode === "response" || statusState.mode === "error" || statusState.mode === "timeout"
|
||||
? statusState.lastFetch
|
||||
: null
|
||||
);
|
||||
|
||||
const relativeLastFetchResult = $derived(lastFetch ? relativeTime(lastFetch, now) : null);
|
||||
const relativeLastFetch = $derived(relativeLastFetchResult?.text ?? "");
|
||||
|
||||
function formatNumber(num: number): string {
|
||||
return num.toLocaleString();
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
let timeoutId: ReturnType<typeof setTimeout> | null = null;
|
||||
let requestTimeoutId: ReturnType<typeof setTimeout> | null = null;
|
||||
let nowTimeoutId: ReturnType<typeof setTimeout> | null = null;
|
||||
|
||||
// Adaptive tick: schedules the next `now` update based on when the
|
||||
// relative time text would actually change (every ~1s for recent
|
||||
// timestamps, every ~1m for minute-level, etc.)
|
||||
function scheduleNowTick() {
|
||||
const delay = relativeLastFetchResult?.nextUpdateMs ?? 1000;
|
||||
nowTimeoutId = setTimeout(() => {
|
||||
now = new Date();
|
||||
scheduleNowTick();
|
||||
}, delay);
|
||||
}
|
||||
scheduleNowTick();
|
||||
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
const startTime = Date.now();
|
||||
|
||||
const timeoutPromise = new Promise<never>((_, reject) => {
|
||||
requestTimeoutId = setTimeout(() => {
|
||||
reject(new Error("Request timeout"));
|
||||
}, REQUEST_TIMEOUT);
|
||||
});
|
||||
|
||||
const statusData = await Promise.race([client.getStatus(), timeoutPromise]);
|
||||
|
||||
if (requestTimeoutId) {
|
||||
clearTimeout(requestTimeoutId);
|
||||
requestTimeoutId = null;
|
||||
}
|
||||
|
||||
const responseTime = Date.now() - startTime;
|
||||
|
||||
statusState = {
|
||||
mode: "response",
|
||||
status: statusData,
|
||||
timing: { health: responseTime, status: responseTime },
|
||||
lastFetch: new Date(),
|
||||
};
|
||||
} catch (err) {
|
||||
if (requestTimeoutId) {
|
||||
clearTimeout(requestTimeoutId);
|
||||
requestTimeoutId = null;
|
||||
}
|
||||
|
||||
const message = err instanceof Error ? err.message : "";
|
||||
|
||||
if (message === "Request timeout") {
|
||||
statusState = { mode: "timeout", lastFetch: new Date() };
|
||||
} else {
|
||||
statusState = { mode: "error", lastFetch: new Date() };
|
||||
}
|
||||
}
|
||||
|
||||
timeoutId = setTimeout(() => void fetchData(), REFRESH_INTERVAL);
|
||||
};
|
||||
|
||||
void fetchData();
|
||||
|
||||
return () => {
|
||||
if (timeoutId) clearTimeout(timeoutId);
|
||||
if (requestTimeoutId) clearTimeout(requestTimeoutId);
|
||||
if (nowTimeoutId) clearTimeout(nowTimeoutId);
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="min-h-screen flex flex-col items-center justify-center p-5">
|
||||
<div
|
||||
class="bg-card text-card-foreground rounded-xl border border-border p-6 w-full max-w-[400px] shadow-sm"
|
||||
>
|
||||
<div class="flex flex-col gap-4">
|
||||
<!-- Overall Status -->
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<Activity
|
||||
size={18}
|
||||
color={isLoading ? undefined : overallIcon.color}
|
||||
class={isLoading ? "animate-pulse" : ""}
|
||||
style="opacity: {isLoading ? 0.3 : 1}; transition: opacity 2s ease-in-out, color 2s ease-in-out;"
|
||||
/>
|
||||
<span class="text-base font-medium text-foreground">System Status</span>
|
||||
</div>
|
||||
{#if isLoading}
|
||||
<div class="h-5 w-20 bg-muted rounded animate-pulse"></div>
|
||||
{:else}
|
||||
{#if overallIcon}
|
||||
{@const OverallIconComponent = overallIcon.icon}
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span
|
||||
class="text-sm"
|
||||
class:text-muted-foreground={overallHealth === "disabled"}
|
||||
class:opacity-70={overallHealth === "disabled"}
|
||||
>
|
||||
{overallHealth}
|
||||
</span>
|
||||
<OverallIconComponent size={16} color={overallIcon.color} />
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Services -->
|
||||
<div class="flex flex-col gap-3 mt-4">
|
||||
{#if shouldShowSkeleton}
|
||||
{#each Array(3) as _}
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="h-6 w-[18px] bg-muted rounded animate-pulse"></div>
|
||||
<div class="h-6 w-[60px] bg-muted rounded animate-pulse"></div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="h-5 w-[50px] bg-muted rounded animate-pulse"></div>
|
||||
<div class="h-5 w-4 bg-muted rounded animate-pulse"></div>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
{:else}
|
||||
{#each services as service (service.name)}
|
||||
{@const statusInfo = STATUS_ICONS[service.status]}
|
||||
{@const ServiceIcon = service.icon}
|
||||
{@const StatusIconComponent = statusInfo.icon}
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<ServiceIcon size={18} />
|
||||
<span class="text-muted-foreground">{service.name}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span
|
||||
class="text-sm"
|
||||
class:text-muted-foreground={service.status === "disabled"}
|
||||
class:opacity-70={service.status === "disabled"}
|
||||
>
|
||||
{service.status}
|
||||
</span>
|
||||
<StatusIconComponent size={16} color={statusInfo.color} />
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Timing & Last Updated -->
|
||||
<div class="flex flex-col gap-2 mt-4 pt-4 border-t border-border">
|
||||
{#if isLoading}
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<Hourglass size={13} />
|
||||
<span class="text-sm text-muted-foreground">Response Time</span>
|
||||
</div>
|
||||
<div class="h-[18px] w-[50px] bg-muted rounded animate-pulse"></div>
|
||||
</div>
|
||||
{:else if shouldShowTiming && statusState.mode === "response"}
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<Hourglass size={13} />
|
||||
<span class="text-sm text-muted-foreground">Response Time</span>
|
||||
</div>
|
||||
<span class="text-sm text-muted-foreground">
|
||||
{formatNumber(statusState.timing.health!)}ms
|
||||
</span>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if isLoading}
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<Clock size={13} />
|
||||
<span class="text-sm text-muted-foreground">Last Updated</span>
|
||||
</div>
|
||||
<span class="text-sm text-muted-foreground pb-0.5">Loading...</span>
|
||||
</div>
|
||||
{:else if shouldShowLastFetch && lastFetch}
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<Clock size={13} />
|
||||
<span class="text-sm text-muted-foreground">Last Updated</span>
|
||||
</div>
|
||||
<Tooltip.Root>
|
||||
<Tooltip.Trigger>
|
||||
<abbr
|
||||
class="cursor-pointer underline decoration-dotted decoration-border underline-offset-[6px]"
|
||||
>
|
||||
<span class="text-sm text-muted-foreground">{relativeLastFetch}</span>
|
||||
</abbr>
|
||||
</Tooltip.Trigger>
|
||||
<Tooltip.Content
|
||||
class="bg-card text-card-foreground text-xs border border-border rounded-md px-2.5 py-1.5 shadow-md"
|
||||
>
|
||||
as of {lastFetch.toLocaleTimeString()}
|
||||
</Tooltip.Content>
|
||||
</Tooltip.Root>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="flex justify-center items-center gap-2 mt-3">
|
||||
{#if __APP_VERSION__}
|
||||
<span class="text-xs text-muted-foreground">v{__APP_VERSION__}</span>
|
||||
<div class="w-px h-3 bg-muted-foreground opacity-30"></div>
|
||||
{/if}
|
||||
<a
|
||||
href={hasResponse && statusState.mode === "response" && statusState.status.commit
|
||||
? `https://github.com/Xevion/banner/commit/${statusState.status.commit}`
|
||||
: "https://github.com/Xevion/banner"}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="text-xs text-muted-foreground no-underline hover:underline"
|
||||
>
|
||||
GitHub
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,34 +0,0 @@
|
||||
import { Outlet, createRootRoute } from "@tanstack/react-router";
|
||||
import { TanStackRouterDevtoolsPanel } from "@tanstack/react-router-devtools";
|
||||
import { TanstackDevtools } from "@tanstack/react-devtools";
|
||||
import { Theme } from "@radix-ui/themes";
|
||||
import "@radix-ui/themes/styles.css";
|
||||
import { ThemeProvider } from "next-themes";
|
||||
|
||||
export const Route = createRootRoute({
|
||||
component: () => (
|
||||
<ThemeProvider
|
||||
attribute="class"
|
||||
defaultTheme="system"
|
||||
enableSystem
|
||||
disableTransitionOnChange={false}
|
||||
>
|
||||
<Theme accentColor="blue" grayColor="gray">
|
||||
<Outlet />
|
||||
{import.meta.env.DEV ? (
|
||||
<TanstackDevtools
|
||||
config={{
|
||||
position: "bottom-left",
|
||||
}}
|
||||
plugins={[
|
||||
{
|
||||
name: "Tanstack Router",
|
||||
render: <TanStackRouterDevtoolsPanel />,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
) : null}
|
||||
</Theme>
|
||||
</ThemeProvider>
|
||||
),
|
||||
});
|
||||
@@ -1,419 +0,0 @@
|
||||
import { Card, Flex, Skeleton, Text, Tooltip } from "@radix-ui/themes";
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
import {
|
||||
Activity,
|
||||
Bot,
|
||||
CheckCircle,
|
||||
Circle,
|
||||
Clock,
|
||||
Globe,
|
||||
Hourglass,
|
||||
MessageCircle,
|
||||
WifiOff,
|
||||
XCircle,
|
||||
} from "lucide-react";
|
||||
import { useEffect, useState } from "react";
|
||||
import TimeAgo from "react-timeago";
|
||||
import { ThemeToggle } from "../components/ThemeToggle";
|
||||
import { type Status, type StatusResponse, client } from "../lib/api";
|
||||
import "../App.css";
|
||||
|
||||
const REFRESH_INTERVAL = import.meta.env.DEV ? 3000 : 30000;
|
||||
const REQUEST_TIMEOUT = 10000; // 10 seconds
|
||||
|
||||
const CARD_STYLES = {
|
||||
padding: "24px",
|
||||
maxWidth: "400px",
|
||||
width: "100%",
|
||||
} as const;
|
||||
|
||||
const BORDER_STYLES = {
|
||||
marginTop: "16px",
|
||||
paddingTop: "16px",
|
||||
borderTop: "1px solid var(--gray-7)",
|
||||
} as const;
|
||||
|
||||
const SERVICE_ICONS: Record<string, typeof Bot> = {
|
||||
bot: Bot,
|
||||
banner: Globe,
|
||||
discord: MessageCircle,
|
||||
database: Activity,
|
||||
web: Globe,
|
||||
scraper: Clock,
|
||||
};
|
||||
|
||||
interface ResponseTiming {
|
||||
health: number | null;
|
||||
status: number | null;
|
||||
}
|
||||
|
||||
interface StatusIcon {
|
||||
icon: typeof CheckCircle;
|
||||
color: string;
|
||||
}
|
||||
|
||||
interface Service {
|
||||
name: string;
|
||||
status: Status;
|
||||
icon: typeof Bot;
|
||||
}
|
||||
|
||||
type StatusState =
|
||||
| {
|
||||
mode: "loading";
|
||||
}
|
||||
| {
|
||||
mode: "response";
|
||||
timing: ResponseTiming;
|
||||
lastFetch: Date;
|
||||
status: StatusResponse;
|
||||
}
|
||||
| {
|
||||
mode: "error";
|
||||
lastFetch: Date;
|
||||
}
|
||||
| {
|
||||
mode: "timeout";
|
||||
lastFetch: Date;
|
||||
};
|
||||
|
||||
const formatNumber = (num: number): string => {
|
||||
return num.toLocaleString();
|
||||
};
|
||||
|
||||
const getStatusIcon = (status: Status | "Unreachable"): StatusIcon => {
|
||||
const statusMap: Record<Status | "Unreachable", StatusIcon> = {
|
||||
active: { icon: CheckCircle, color: "green" },
|
||||
connected: { icon: CheckCircle, color: "green" },
|
||||
starting: { icon: Hourglass, color: "orange" },
|
||||
disabled: { icon: Circle, color: "gray" },
|
||||
error: { icon: XCircle, color: "red" },
|
||||
Unreachable: { icon: WifiOff, color: "red" },
|
||||
};
|
||||
|
||||
return statusMap[status];
|
||||
};
|
||||
|
||||
const getOverallHealth = (state: StatusState): Status | "Unreachable" => {
|
||||
if (state.mode === "timeout") return "Unreachable";
|
||||
if (state.mode === "error") return "error";
|
||||
if (state.mode === "response") return state.status.status;
|
||||
return "error";
|
||||
};
|
||||
|
||||
const getServices = (state: StatusState): Service[] => {
|
||||
if (state.mode !== "response") return [];
|
||||
|
||||
return Object.entries(state.status.services).map(([serviceId, serviceInfo]) => ({
|
||||
name: serviceInfo.name,
|
||||
status: serviceInfo.status,
|
||||
icon: SERVICE_ICONS[serviceId] || SERVICE_ICONS.default,
|
||||
}));
|
||||
};
|
||||
|
||||
const StatusDisplay = ({ status }: { status: Status | "Unreachable" }) => {
|
||||
const { icon: Icon, color } = getStatusIcon(status);
|
||||
|
||||
return (
|
||||
<Flex align="center" gap="2">
|
||||
<Text
|
||||
size="2"
|
||||
style={{
|
||||
color: status === "disabled" ? "var(--gray-11)" : undefined,
|
||||
opacity: status === "disabled" ? 0.7 : undefined,
|
||||
}}
|
||||
>
|
||||
{status}
|
||||
</Text>
|
||||
<Icon color={color} size={16} />
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
const ServiceStatus = ({ service }: { service: Service }) => {
|
||||
return (
|
||||
<Flex align="center" justify="between">
|
||||
<Flex align="center" gap="2">
|
||||
<service.icon size={18} />
|
||||
<Text style={{ color: "var(--gray-11)" }}>{service.name}</Text>
|
||||
</Flex>
|
||||
<StatusDisplay status={service.status} />
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
const SkeletonService = () => {
|
||||
return (
|
||||
<Flex align="center" justify="between">
|
||||
<Flex align="center" gap="2">
|
||||
<Skeleton height="24px" width="18px" />
|
||||
<Skeleton height="24px" width="60px" />
|
||||
</Flex>
|
||||
<Flex align="center" gap="2">
|
||||
<Skeleton height="20px" width="50px" />
|
||||
<Skeleton height="20px" width="16px" />
|
||||
</Flex>
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
const TimingRow = ({
|
||||
icon: Icon,
|
||||
name,
|
||||
children,
|
||||
}: {
|
||||
icon: React.ComponentType<{ size?: number }>;
|
||||
name: string;
|
||||
children: React.ReactNode;
|
||||
}) => (
|
||||
<Flex align="center" justify="between">
|
||||
<Flex align="center" gap="2">
|
||||
<Icon size={13} />
|
||||
<Text size="2" color="gray">
|
||||
{name}
|
||||
</Text>
|
||||
</Flex>
|
||||
{children}
|
||||
</Flex>
|
||||
);
|
||||
|
||||
function App() {
|
||||
const [state, setState] = useState<StatusState>({ mode: "loading" });
|
||||
|
||||
// State helpers
|
||||
const isLoading = state.mode === "loading";
|
||||
const hasError = state.mode === "error";
|
||||
const hasTimeout = state.mode === "timeout";
|
||||
const hasResponse = state.mode === "response";
|
||||
const shouldShowSkeleton = isLoading || hasError;
|
||||
const shouldShowTiming = hasResponse && state.timing.health !== null;
|
||||
const shouldShowLastFetch = hasResponse || hasError || hasTimeout;
|
||||
|
||||
useEffect(() => {
|
||||
let timeoutId: NodeJS.Timeout | null = null;
|
||||
let requestTimeoutId: NodeJS.Timeout | null = null;
|
||||
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
const startTime = Date.now();
|
||||
|
||||
// Create a timeout promise with cleanup tracking
|
||||
const timeoutPromise = new Promise<never>((_, reject) => {
|
||||
requestTimeoutId = setTimeout(() => {
|
||||
reject(new Error("Request timeout"));
|
||||
}, REQUEST_TIMEOUT);
|
||||
});
|
||||
|
||||
// Race between the API call and timeout
|
||||
const statusData = await Promise.race([client.getStatus(), timeoutPromise]);
|
||||
|
||||
// Clear the timeout if the request succeeded
|
||||
if (requestTimeoutId) {
|
||||
clearTimeout(requestTimeoutId);
|
||||
requestTimeoutId = null;
|
||||
}
|
||||
|
||||
const endTime = Date.now();
|
||||
const responseTime = endTime - startTime;
|
||||
|
||||
setState({
|
||||
mode: "response",
|
||||
status: statusData,
|
||||
timing: { health: responseTime, status: responseTime },
|
||||
lastFetch: new Date(),
|
||||
});
|
||||
} catch (err) {
|
||||
// Clear the timeout on error as well
|
||||
if (requestTimeoutId) {
|
||||
clearTimeout(requestTimeoutId);
|
||||
requestTimeoutId = null;
|
||||
}
|
||||
|
||||
const errorMessage = err instanceof Error ? err.message : "Failed to fetch data";
|
||||
|
||||
if (errorMessage === "Request timeout") {
|
||||
setState({
|
||||
mode: "timeout",
|
||||
lastFetch: new Date(),
|
||||
});
|
||||
} else {
|
||||
setState({
|
||||
mode: "error",
|
||||
lastFetch: new Date(),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Schedule the next request after the current one completes
|
||||
timeoutId = setTimeout(() => void fetchData(), REFRESH_INTERVAL);
|
||||
};
|
||||
|
||||
// Start the first request immediately
|
||||
void fetchData();
|
||||
|
||||
return () => {
|
||||
if (timeoutId) {
|
||||
clearTimeout(timeoutId);
|
||||
}
|
||||
if (requestTimeoutId) {
|
||||
clearTimeout(requestTimeoutId);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
const overallHealth = getOverallHealth(state);
|
||||
const { color: overallColor } = getStatusIcon(overallHealth);
|
||||
const services = getServices(state);
|
||||
|
||||
return (
|
||||
<div className="App">
|
||||
<div
|
||||
style={{
|
||||
position: "fixed",
|
||||
top: "20px",
|
||||
right: "20px",
|
||||
zIndex: 1000,
|
||||
}}
|
||||
>
|
||||
<ThemeToggle />
|
||||
</div>
|
||||
|
||||
<Flex
|
||||
direction="column"
|
||||
align="center"
|
||||
justify="center"
|
||||
style={{ minHeight: "100vh", padding: "20px" }}
|
||||
>
|
||||
<Card style={CARD_STYLES}>
|
||||
<Flex direction="column" gap="4">
|
||||
{/* Overall Status */}
|
||||
<Flex align="center" justify="between">
|
||||
<Flex align="center" gap="2">
|
||||
<Activity
|
||||
color={isLoading ? undefined : overallColor}
|
||||
size={18}
|
||||
className={isLoading ? "animate-pulse" : ""}
|
||||
style={{
|
||||
opacity: isLoading ? 0.3 : 1,
|
||||
transition: "opacity 2s ease-in-out, color 2s ease-in-out",
|
||||
}}
|
||||
/>
|
||||
<Text size="4" style={{ color: "var(--gray-12)" }}>
|
||||
System Status
|
||||
</Text>
|
||||
</Flex>
|
||||
{isLoading ? (
|
||||
<Skeleton height="20px" width="80px" />
|
||||
) : (
|
||||
<StatusDisplay status={overallHealth} />
|
||||
)}
|
||||
</Flex>
|
||||
|
||||
{/* Individual Services */}
|
||||
<Flex direction="column" gap="3" style={{ marginTop: "16px" }}>
|
||||
{shouldShowSkeleton
|
||||
? // Show skeleton for 3 services during initial loading only
|
||||
Array.from({ length: 3 }).map((_, index) => <SkeletonService key={index} />)
|
||||
: services.map((service) => <ServiceStatus key={service.name} service={service} />)}
|
||||
</Flex>
|
||||
|
||||
<Flex direction="column" gap="2" style={BORDER_STYLES}>
|
||||
{isLoading ? (
|
||||
<TimingRow icon={Hourglass} name="Response Time">
|
||||
<Skeleton height="18px" width="50px" />
|
||||
</TimingRow>
|
||||
) : shouldShowTiming ? (
|
||||
<TimingRow icon={Hourglass} name="Response Time">
|
||||
<Text size="2" style={{ color: "var(--gray-11)" }}>
|
||||
{formatNumber(state.timing.health!)}ms
|
||||
</Text>
|
||||
</TimingRow>
|
||||
) : null}
|
||||
|
||||
{shouldShowLastFetch ? (
|
||||
<TimingRow icon={Clock} name="Last Updated">
|
||||
{isLoading ? (
|
||||
<Text size="2" style={{ paddingBottom: "2px" }} color="gray">
|
||||
Loading...
|
||||
</Text>
|
||||
) : (
|
||||
<Tooltip content={`as of ${state.lastFetch.toLocaleTimeString()}`}>
|
||||
<abbr
|
||||
style={{
|
||||
cursor: "pointer",
|
||||
textDecoration: "underline",
|
||||
textDecorationStyle: "dotted",
|
||||
textDecorationColor: "var(--gray-6)",
|
||||
textUnderlineOffset: "6px",
|
||||
}}
|
||||
>
|
||||
<Text size="2" style={{ color: "var(--gray-11)" }}>
|
||||
<TimeAgo date={state.lastFetch} />
|
||||
</Text>
|
||||
</abbr>
|
||||
</Tooltip>
|
||||
)}
|
||||
</TimingRow>
|
||||
) : isLoading ? (
|
||||
<TimingRow icon={Clock} name="Last Updated">
|
||||
<Text size="2" color="gray">
|
||||
Loading...
|
||||
</Text>
|
||||
</TimingRow>
|
||||
) : null}
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Card>
|
||||
<Flex justify="center" style={{ marginTop: "12px" }} gap="2" align="center">
|
||||
{__APP_VERSION__ && (
|
||||
<Text
|
||||
size="1"
|
||||
style={{
|
||||
color: "var(--gray-11)",
|
||||
}}
|
||||
>
|
||||
v{__APP_VERSION__}
|
||||
</Text>
|
||||
)}
|
||||
{__APP_VERSION__ && (
|
||||
<div
|
||||
style={{
|
||||
width: "1px",
|
||||
height: "12px",
|
||||
backgroundColor: "var(--gray-10)",
|
||||
opacity: 0.3,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<Text
|
||||
size="1"
|
||||
style={{
|
||||
color: "var(--gray-11)",
|
||||
textDecoration: "none",
|
||||
}}
|
||||
>
|
||||
<a
|
||||
href={
|
||||
hasResponse && state.status.commit
|
||||
? `https://github.com/Xevion/banner/commit/${state.status.commit}`
|
||||
: "https://github.com/Xevion/banner"
|
||||
}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
style={{
|
||||
color: "inherit",
|
||||
textDecoration: "none",
|
||||
}}
|
||||
>
|
||||
GitHub
|
||||
</a>
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export const Route = createFileRoute("/")({
|
||||
component: App,
|
||||
});
|
||||
@@ -0,0 +1,84 @@
|
||||
@import "tailwindcss";
|
||||
@import "@fontsource-variable/inter";
|
||||
|
||||
@custom-variant dark (&:where(.dark, .dark *));
|
||||
|
||||
:root {
|
||||
--background: oklch(0.985 0 0);
|
||||
--foreground: oklch(0.145 0 0);
|
||||
--card: oklch(1 0 0);
|
||||
--card-foreground: oklch(0.145 0 0);
|
||||
--muted: oklch(0.96 0 0);
|
||||
--muted-foreground: oklch(0.556 0 0);
|
||||
--border: oklch(0.922 0 0);
|
||||
--ring: oklch(0.708 0 0);
|
||||
|
||||
--status-green: oklch(0.65 0.2 145);
|
||||
--status-red: oklch(0.63 0.2 25);
|
||||
--status-orange: oklch(0.75 0.18 70);
|
||||
--status-gray: oklch(0.556 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);
|
||||
--muted: oklch(0.269 0 0);
|
||||
--muted-foreground: oklch(0.708 0 0);
|
||||
--border: oklch(0.269 0 0);
|
||||
--ring: oklch(0.556 0 0);
|
||||
|
||||
--status-green: oklch(0.72 0.19 145);
|
||||
--status-red: oklch(0.7 0.19 25);
|
||||
--status-orange: oklch(0.8 0.16 70);
|
||||
--status-gray: oklch(0.708 0 0);
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--color-card: var(--card);
|
||||
--color-card-foreground: var(--card-foreground);
|
||||
--color-muted: var(--muted);
|
||||
--color-muted-foreground: var(--muted-foreground);
|
||||
--color-border: var(--border);
|
||||
--color-ring: var(--ring);
|
||||
--color-status-green: var(--status-green);
|
||||
--color-status-red: var(--status-red);
|
||||
--color-status-orange: var(--status-orange);
|
||||
--color-status-gray: var(--status-gray);
|
||||
--font-sans: "Inter Variable", ui-sans-serif, system-ui, sans-serif;
|
||||
}
|
||||
|
||||
* {
|
||||
border-color: var(--border);
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: var(--font-sans);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body,
|
||||
body * {
|
||||
transition: background-color 300ms, color 300ms, border-color 300ms, fill 300ms;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 0.2;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
|
||||
.animate-pulse {
|
||||
animation: pulse 2s ease-in-out infinite;
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
@import "@radix-ui/themes/styles.css";
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
|
||||
"Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
|
||||
}
|
||||
Vendored
-3
@@ -1,3 +0,0 @@
|
||||
/// <reference types="vite/client" />
|
||||
|
||||
declare const __APP_VERSION__: string;
|
||||
|
Before Width: | Height: | Size: 3.8 KiB After Width: | Height: | Size: 3.8 KiB |
|
Before Width: | Height: | Size: 5.2 KiB After Width: | Height: | Size: 5.2 KiB |
|
Before Width: | Height: | Size: 9.4 KiB After Width: | Height: | Size: 9.4 KiB |
@@ -0,0 +1,17 @@
|
||||
import adapter from "@sveltejs/adapter-static";
|
||||
import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
|
||||
|
||||
/** @type {import('@sveltejs/kit').Config} */
|
||||
const config = {
|
||||
preprocess: vitePreprocess(),
|
||||
kit: {
|
||||
adapter: adapter({
|
||||
pages: "dist",
|
||||
assets: "dist",
|
||||
fallback: "index.html",
|
||||
precompress: false,
|
||||
}),
|
||||
},
|
||||
};
|
||||
|
||||
export default config;
|
||||
+3
-22
@@ -1,29 +1,10 @@
|
||||
{
|
||||
"include": ["**/*.ts", "**/*.tsx"],
|
||||
"extends": "./.svelte-kit/tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"target": "ES2022",
|
||||
"jsx": "react-jsx",
|
||||
"module": "ESNext",
|
||||
"lib": ["ES2022", "DOM", "DOM.Iterable"],
|
||||
"types": ["vite/client"],
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"verbatimModuleSyntax": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
|
||||
/* Linting */
|
||||
"skipLibCheck": true,
|
||||
"strict": true,
|
||||
"skipLibCheck": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUncheckedSideEffectImports": true,
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
"noFallthroughCasesInSwitch": true
|
||||
}
|
||||
}
|
||||
|
||||
+9
-26
@@ -1,51 +1,35 @@
|
||||
import { sveltekit } from "@sveltejs/kit/vite";
|
||||
import tailwindcss from "@tailwindcss/vite";
|
||||
import { defineConfig } from "vite";
|
||||
import viteReact from "@vitejs/plugin-react";
|
||||
import tanstackRouter from "@tanstack/router-plugin/vite";
|
||||
import { resolve } from "node:path";
|
||||
import { readFileSync, existsSync } from "node:fs";
|
||||
|
||||
// Extract version from Cargo.toml
|
||||
function getVersion() {
|
||||
const filename = "Cargo.toml";
|
||||
const paths = [resolve(__dirname, filename), resolve(__dirname, "..", filename)];
|
||||
|
||||
for (const path of paths) {
|
||||
try {
|
||||
// Check if file exists before reading
|
||||
if (!existsSync(path)) {
|
||||
console.log("Skipping ", path, " because it does not exist");
|
||||
continue;
|
||||
}
|
||||
|
||||
const cargoTomlContent = readFileSync(path, "utf8");
|
||||
const versionMatch = cargoTomlContent.match(/^version\s*=\s*"([^"]+)"/m);
|
||||
if (versionMatch) {
|
||||
console.log("Found version in ", path, ": ", versionMatch[1]);
|
||||
return versionMatch[1];
|
||||
}
|
||||
} catch (error) {
|
||||
console.warn("Failed to read Cargo.toml at path: ", path, error);
|
||||
if (!existsSync(path)) continue;
|
||||
const content = readFileSync(path, "utf8");
|
||||
const match = content.match(/^version\s*=\s*"([^"]+)"/m);
|
||||
if (match) return match[1];
|
||||
} catch {
|
||||
// Continue to next path
|
||||
}
|
||||
}
|
||||
|
||||
console.warn("Could not read version from Cargo.toml in any location");
|
||||
return "unknown";
|
||||
}
|
||||
|
||||
const version = getVersion();
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [tanstackRouter({ autoCodeSplitting: true }), viteReact()],
|
||||
plugins: [tailwindcss(), sveltekit()],
|
||||
test: {
|
||||
globals: true,
|
||||
environment: "jsdom",
|
||||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
"@": resolve(__dirname, "./src"),
|
||||
},
|
||||
include: ["src/**/*.test.ts"],
|
||||
},
|
||||
server: {
|
||||
port: 3000,
|
||||
@@ -58,7 +42,6 @@ export default defineConfig({
|
||||
},
|
||||
},
|
||||
build: {
|
||||
outDir: "dist",
|
||||
sourcemap: true,
|
||||
},
|
||||
define: {
|
||||
|
||||
Reference in New Issue
Block a user