Infrastructure
+
+
- Infrastructure
-
-
+ Media
+
+
- Media
-
-
+ Monitoring
+
+
- Monitoring
-
-
-
- Access
-
-
+ Access
+
+
)
}
+
+export default function App() {
+ return (
+
+
+
+
+
+ {name.charAt(0).toUpperCase()}
+
+ )}
+ {name}
+
+ )
+}
+
+export function AppsSection() {
+ return (
+ <>
+ {appGroups.map(group => (
+
+
+ ))}
+
+ )
+}
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 73670ce..95b991c 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,4 +1,5 @@
import { useState, useEffect } from 'react'
+import { NavLink } from 'react-router-dom'
export function Header() {
const [time, setTime] = useState('')
@@ -18,13 +19,17 @@ export function Header() {
return (
{group.name}
+
+ {group.apps.map(app => (
+
+
- 
S
+
syco.me
homelab dashboard
+
{time}
{date}
diff --git a/src/config/apps.ts b/src/config/apps.ts
new file mode 100644
index 0000000..f8b9520
--- /dev/null
+++ b/src/config/apps.ts
@@ -0,0 +1,72 @@
+const ICONS = '/icons'
+
+export interface AppLink {
+ name: string
+ url: string
+ icon: string
+}
+
+export interface AppGroup {
+ name: string
+ apps: AppLink[]
+}
+
+export const appGroups: AppGroup[] = [
+ {
+ name: 'Infrastructure',
+ apps: [
+ { name: 'Proxmox', url: 'https://proxmox.syco.me', icon: `${ICONS}/proxmox.svg` },
+ { name: 'Synology NAS', url: 'https://nas.syco.me', icon: `${ICONS}/synology.svg` },
+ { name: 'AdGuard Home', url: 'https://adguard.syco.me', icon: `${ICONS}/adguard-home.svg` },
+ { name: 'Headscale', url: 'https://headscale.syco.me/admin', icon: `${ICONS}/headscale.svg` },
+ { name: 'FritzBox', url: 'http://fritz.box', icon: `${ICONS}/Fritz!_Logo.svg.png` },
+ { name: 'Portainer', url: 'https://portainer.syco.me', icon: `${ICONS}/portainer.svg` },
+ { name: 'CrowdSec', url: 'https://crowdsec.syco.me', icon: `${ICONS}/crowdsec.svg` },
+ ],
+ },
+ {
+ name: 'Auth & Access',
+ apps: [
+ { name: 'Authentik', url: 'https://auth.syco.me', icon: `${ICONS}/authentik.svg` },
+ { name: 'Vaultwarden', url: 'https://vaultwarden.syco.me', icon: `${ICONS}/vaultwarden.svg` },
+ { name: 'Termix', url: 'https://termix.syco.me', icon: `${ICONS}/termix.svg` },
+ ],
+ },
+ {
+ name: 'Media',
+ apps: [
+ { name: 'Jellyfin', url: 'https://jellyfin.syco.me', icon: `${ICONS}/jellyfin.svg` },
+ { name: 'Navidrome', url: 'https://music.syco.me', icon: `${ICONS}/navidrome.svg` },
+ { name: 'Overseerr', url: 'https://overseerr.syco.me', icon: `${ICONS}/overseerr.svg` },
+ { name: 'Radarr', url: 'https://radarr.syco.me', icon: `${ICONS}/radarr.svg` },
+ { name: 'Sonarr', url: 'https://sonarr.syco.me', icon: `${ICONS}/sonarr.svg` },
+ { name: 'Lidarr', url: 'https://lidarr.syco.me', icon: `${ICONS}/lidarr.svg` },
+ { name: 'Prowlarr', url: 'https://prowlarr.syco.me', icon: `${ICONS}/prowlarr.svg` },
+ { name: 'Bazarr', url: 'https://bazarr.syco.me', icon: `${ICONS}/bazarr.svg` },
+ { name: 'qBittorrent', url: 'https://bittorrent.syco.me', icon: `${ICONS}/qbittorrent.svg` },
+ { name: 'RomM', url: 'https://romm.syco.me', icon: `${ICONS}/romm.svg` },
+ { name: 'Shoko', url: 'http://shoko.internal', icon: `${ICONS}/shoko-server.svg` },
+ ],
+ },
+ {
+ name: 'Monitoring',
+ apps: [
+ { name: 'Grafana', url: 'https://grafana.syco.me', icon: `${ICONS}/grafana.svg` },
+ { name: 'Uptime Kuma', url: 'https://uptime.syco.me', icon: `${ICONS}/uptime-kuma.svg` },
+ { name: 'Update Dashboard', url: 'https://update-dashboard.syco.me', icon: `${ICONS}/linux-update-dashboard.svg` },
+ ],
+ },
+ {
+ name: 'Dev & Tools',
+ apps: [
+ { name: 'Gitea', url: 'https://git.syco.me', icon: `${ICONS}/gitea.svg` },
+ { name: 'Woodpecker', url: 'https://woodpecker.syco.me', icon: `${ICONS}/woodpecker-ci.svg` },
+ { name: 'DbGate', url: 'https://dbgate.syco.me', icon: `${ICONS}/dbgate.png` },
+ { name: 'IT-Tools', url: 'https://it-tools.syco.me', icon: `${ICONS}/it-tools.svg` },
+ { name: 'Docsight', url: 'http://docsight.internal', icon: `${ICONS}/docsight-light.svg` },
+ { name: 'Firefly III', url: 'https://firefly.syco.me', icon: `${ICONS}/firefly-iii.svg` },
+ { name: 'Copyparty', url: 'https://copyparty.syco.me', icon: `${ICONS}/copyparty.svg` },
+ { name: 'Yu-Gi-Oh', url: 'https://yugioh.syco.me', icon: `${ICONS}/yugiohCard.jpg` },
+ ],
+ },
+]
diff --git a/src/index.css b/src/index.css
index 416d3eb..c5194c1 100644
--- a/src/index.css
+++ b/src/index.css
@@ -63,10 +63,8 @@ header {
.logo { display: flex; align-items: center; gap: 10px; }
.logo-mark {
width: 32px; height: 32px;
- background: linear-gradient(135deg, var(--accent), var(--accent2));
border-radius: 8px;
- display: flex; align-items: center; justify-content: center;
- font-size: 14px; font-weight: 800; letter-spacing: -1px; color: #fff;
+ object-fit: contain;
}
.logo-text { font-size: 18px; font-weight: 700; letter-spacing: -0.5px; }
.logo-sub { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--muted); }
@@ -226,6 +224,94 @@ header {
.topbar-right { gap: 12px; }
}
+/* ── Nav tabs ── */
+.nav-tabs {
+ display: flex;
+ gap: 4px;
+ background: var(--surface);
+ border: 1px solid var(--border);
+ border-radius: 8px;
+ padding: 3px;
+}
+.nav-tab {
+ font-family: 'JetBrains Mono', monospace;
+ font-size: 11px;
+ font-weight: 500;
+ padding: 5px 14px;
+ border-radius: 6px;
+ text-decoration: none;
+ color: var(--text2);
+ transition: background 0.15s, color 0.15s;
+}
+.nav-tab:hover { color: var(--text); }
+.nav-tab-active { background: var(--surface2); color: var(--text); }
+
+/* ── Apps Section ── */
+.app-group { margin-bottom: 28px; }
+
+.app-group-label {
+ font-family: 'JetBrains Mono', monospace;
+ font-size: 10px; font-weight: 500;
+ letter-spacing: 2px; text-transform: uppercase;
+ color: var(--muted);
+ margin-bottom: 12px;
+}
+
+.app-grid {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 10px;
+}
+
+.app-tile {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 8px;
+ padding: 14px 12px;
+ width: 90px;
+ background: var(--surface);
+ border: 1px solid var(--border);
+ border-radius: var(--radius);
+ text-decoration: none;
+ color: var(--text2);
+ font-size: 11px;
+ text-align: center;
+ transition: border-color 0.2s, transform 0.2s, color 0.2s;
+ cursor: pointer;
+}
+.app-tile:hover {
+ border-color: var(--accent);
+ transform: translateY(-2px);
+ color: var(--text);
+}
+
+.app-icon {
+ width: 36px;
+ height: 36px;
+ object-fit: contain;
+}
+
+.app-icon-fallback {
+ width: 36px;
+ height: 36px;
+ border-radius: 8px;
+ background: var(--surface2);
+ align-items: center;
+ justify-content: center;
+ font-size: 16px;
+ font-weight: 700;
+ color: var(--accent);
+}
+
+.app-name {
+ font-family: 'JetBrains Mono', monospace;
+ font-size: 10px;
+ color: inherit;
+ line-height: 1.3;
+ word-break: break-word;
+}
+
/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
diff --git a/src/pages/AppsPage.tsx b/src/pages/AppsPage.tsx
new file mode 100644
index 0000000..13fd3ed
--- /dev/null
+++ b/src/pages/AppsPage.tsx
@@ -0,0 +1,10 @@
+import { AppsSection } from '../components/AppsSection'
+
+export function AppsPage() {
+ return (
+
+
+ )
+}
Apps
+