electron-rare/exo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: apply nix fmt formatting to svelte files

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Alex Cheema
2026-02-18 11:46:00 -08:00
parent e3d91dc08a
commit 99b0db0634
4 changed files with 120 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dashboard/src/lib/components/HeaderNav.svelte
+16 -5
View File
@@ -98,10 +98,14 @@
<button
onclick={() => toggleMode()}
class="p-2 rounded border border-exo-medium-gray/40 hover:border-exo-yellow/50 transition-colors cursor-pointer"
title={currentMode === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}
aria-label={currentMode === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}
title={currentMode === "dark"
? "Switch to light mode"
: "Switch to dark mode"}
aria-label={currentMode === "dark"
? "Switch to light mode"
: "Switch to dark mode"}
>
{#if currentMode === 'dark'}
{#if currentMode === "dark"}
<!-- Sun icon - click to go light -->
<svg
class="w-4 h-4 text-exo-light-gray hover:text-exo-yellow transition-colors"
@@ -111,7 +115,10 @@
stroke-width="2"
>
<circle cx="12" cy="12" r="5" />
<path stroke-linecap="round" d="M12 1v2m0 18v2m-9-11H1m22 0h-2m-2.636-6.364l-1.414 1.414M6.05 6.05L4.636 4.636m0 14.728l1.414-1.414m11.314 1.414l1.414 1.414" />
<path
stroke-linecap="round"
d="M12 1v2m0 18v2m-9-11H1m22 0h-2m-2.636-6.364l-1.414 1.414M6.05 6.05L4.636 4.636m0 14.728l1.414-1.414m11.314 1.414l1.414 1.414"
/>
</svg>
{:else}
<!-- Moon icon - click to go dark -->
@@ -122,7 +129,11 @@
stroke="currentColor"
stroke-width="2"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M21 12.79A9 9 0 1111.21 3a7 7 0 009.79 9.79z" />
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M21 12.79A9 9 0 1111.21 3a7 7 0 009.79 9.79z"
/>
</svg>
{/if}
</button>
dashboard/src/lib/components/MarkdownContent.svelte
+18 -6
View File
@@ -1193,7 +1193,9 @@
background: rgba(0, 0, 0, 0.02);
}
:global(html:not(.dark)) .markdown-content :global(.math-display-wrapper:hover) {
:global(html:not(.dark))
.markdown-content
:global(.math-display-wrapper:hover) {
border-color: rgba(0, 0, 0, 0.18);
box-shadow: 0 0 12px rgba(0, 0, 0, 0.05);
}
@@ -1208,15 +1210,21 @@
}
/* --- Math scrollbar (light mode) --- */
:global(html:not(.dark)) .markdown-content :global(.math-display-content::-webkit-scrollbar-track) {
:global(html:not(.dark))
.markdown-content
:global(.math-display-content::-webkit-scrollbar-track) {
background: rgba(0, 0, 0, 0.04);
}
:global(html:not(.dark)) .markdown-content :global(.math-display-content::-webkit-scrollbar-thumb) {
:global(html:not(.dark))
.markdown-content
:global(.math-display-content::-webkit-scrollbar-thumb) {
background: rgba(0, 0, 0, 0.15);
}
:global(html:not(.dark)) .markdown-content :global(.math-display-content::-webkit-scrollbar-thumb:hover) {
:global(html:not(.dark))
.markdown-content
:global(.math-display-content::-webkit-scrollbar-thumb:hover) {
background: rgba(0, 0, 0, 0.25);
}
@@ -1239,7 +1247,9 @@
color: oklch(0.2 0 0);
}
:global(html:not(.dark)) .markdown-content :global(.latex-proof-content::after) {
:global(html:not(.dark))
.markdown-content
:global(.latex-proof-content::after) {
color: oklch(0.4 0 0);
}
@@ -1254,7 +1264,9 @@
}
/* --- LaTeX diagram/figure placeholder --- */
:global(html:not(.dark)) .markdown-content :global(.latex-diagram-placeholder) {
:global(html:not(.dark))
.markdown-content
:global(.latex-diagram-placeholder) {
background: rgba(0, 0, 0, 0.02);
border: 1px dashed rgba(0, 0, 0, 0.2);
color: rgba(0, 0, 0, 0.45);
dashboard/src/lib/components/ModelCard.svelte
+29 -30
View File
@@ -6,36 +6,41 @@
TopologyEdge,
} from "$lib/stores/app.svelte";
import { debugMode, topologyData } from "$lib/stores/app.svelte";
import { browser } from '$app/environment';
import { browser } from "$app/environment";
// Theme detection
let isDark = $state(true);
$effect(() => {
if (!browser) return;
const update = () => { isDark = document.documentElement.classList.contains('dark'); };
const update = () => {
isDark = document.documentElement.classList.contains("dark");
};
update();
const observer = new MutationObserver(update);
observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
observer.observe(document.documentElement, {
attributes: true,
attributeFilter: ["class"],
});
return () => observer.disconnect();
});
// Theme-aware colors
let tc = $derived({
accent: isDark ? '#FFD700' : '#1a1a1a',
accentDim: isDark ? 'rgba(255,215,0,0.1)' : 'rgba(26,26,26,0.06)',
accentGlow: isDark ? 'rgba(255,215,0,0.1)' : 'rgba(0,0,0,0.03)',
outlineActive: isDark ? '#FFD700' : '#374151',
outlineInactive: isDark ? '#4B5563' : '#d1d5db',
strokeActive: isDark ? '#FFD700' : '#374151',
strokeInactive: isDark ? '#4B5563' : '#d1d5db',
caseFill: isDark ? '#0a0a0a' : '#f3f4f6',
caseDetail: isDark ? '#374151' : '#d1d5db',
errorDot: isDark ? '#f87171' : '#dc2626',
statusInactive: isDark ? '#4B5563' : '#9ca3af',
connGood: isDark ? 'rgba(255,255,255,0.85)' : 'rgba(30,30,30,0.85)',
connBad: isDark ? 'rgba(248,113,113,0.85)' : 'rgba(220,38,38,0.85)',
scanlineColor: isDark ? 'rgba(255,215,0,0.02)' : 'rgba(0,0,0,0.01)',
accent: isDark ? "#FFD700" : "#1a1a1a",
accentDim: isDark ? "rgba(255,215,0,0.1)" : "rgba(26,26,26,0.06)",
accentGlow: isDark ? "rgba(255,215,0,0.1)" : "rgba(0,0,0,0.03)",
outlineActive: isDark ? "#FFD700" : "#374151",
outlineInactive: isDark ? "#4B5563" : "#d1d5db",
strokeActive: isDark ? "#FFD700" : "#374151",
strokeInactive: isDark ? "#4B5563" : "#d1d5db",
caseFill: isDark ? "#0a0a0a" : "#f3f4f6",
caseDetail: isDark ? "#374151" : "#d1d5db",
errorDot: isDark ? "#f87171" : "#dc2626",
statusInactive: isDark ? "#4B5563" : "#9ca3af",
connGood: isDark ? "rgba(255,255,255,0.85)" : "rgba(30,30,30,0.85)",
connBad: isDark ? "rgba(248,113,113,0.85)" : "rgba(220,38,38,0.85)",
scanlineColor: isDark ? "rgba(255,215,0,0.02)" : "rgba(0,0,0,0.01)",
});
interface Props {
@@ -702,7 +707,9 @@
y1={node.y}
x2={node2.x}
y2={node2.y}
stroke={node.isUsed && node2.isUsed ? tc.strokeActive : tc.strokeInactive}
stroke={node.isUsed && node2.isUsed
? tc.strokeActive
: tc.strokeInactive}
stroke-width="1"
stroke-dasharray={node.isUsed && node2.isUsed ? "4,2" : "2,4"}
opacity={node.isUsed && node2.isUsed ? 0.4 : 0.15}
@@ -738,9 +745,7 @@
dominant-baseline="hanging"
font-size="6"
font-family="SF Mono, Monaco, monospace"
fill={conn.iface
? tc.connGood
: tc.connBad}
fill={conn.iface ? tc.connGood : tc.connBad}
>
{conn.arrow}
{isRdma
@@ -757,9 +762,7 @@
dominant-baseline="hanging"
font-size="6"
font-family="SF Mono, Monaco, monospace"
fill={conn.iface
? tc.connGood
: tc.connBad}
fill={conn.iface ? tc.connGood : tc.connBad}
>
{conn.arrow}
{isRdma
@@ -778,9 +781,7 @@
dominant-baseline="auto"
font-size="6"
font-family="SF Mono, Monaco, monospace"
fill={conn.iface
? tc.connGood
: tc.connBad}
fill={conn.iface ? tc.connGood : tc.connBad}
>
{conn.arrow}
{isRdma
@@ -799,9 +800,7 @@
dominant-baseline="auto"
font-size="6"
font-family="SF Mono, Monaco, monospace"
fill={conn.iface
? tc.connGood
: tc.connBad}
fill={conn.iface ? tc.connGood : tc.connBad}
>
{conn.arrow}
{isRdma
dashboard/src/lib/components/TopologyGraph.svelte
+57 -38
View File
@@ -38,60 +38,79 @@
// Theme-aware colors - read from CSS custom properties
function getThemeColors() {
if (typeof document === 'undefined') return getDefaultColors();
if (typeof document === "undefined") return getDefaultColors();
const style = getComputedStyle(document.documentElement);
const isDark = document.documentElement.classList.contains('dark');
const isDark = document.documentElement.classList.contains("dark");
return {
accent: style.getPropertyValue('--exo-yellow').trim() || (isDark ? 'oklch(0.85 0.18 85)' : 'oklch(0.20 0.02 85)'),
accentRgb: isDark ? '255,215,0' : '30,28,20',
deviceCase: isDark ? '#1a1a1a' : '#e8e8e8',
deviceCaseDark: isDark ? '#2c2c2c' : '#d4d4d4',
deviceScreen: isDark ? '#0a0a12' : '#f0f0f5',
deviceScreenFill: isDark ? 'rgba(0,20,40,0.9)' : 'rgba(240,242,248,0.95)',
labelWhite: isDark ? '#FFFFFF' : '#1a1a1a',
labelMuted: isDark ? 'rgba(179,179,179,0.9)' : 'rgba(80,80,80,0.9)',
labelDim: isDark ? 'rgba(179,179,179,0.7)' : 'rgba(100,100,100,0.7)',
wireDefault: isDark ? 'rgba(179,179,179,0.8)' : 'rgba(120,120,120,0.6)',
wireBright: isDark ? 'rgba(255,255,255,0.9)' : 'rgba(30,30,30,0.9)',
wireFiltered: isDark ? 'rgba(140,140,140,0.6)' : 'rgba(160,160,160,0.5)',
gridStroke: isDark ? 'var(--exo-light-gray, #B3B3B3)' : 'var(--exo-light-gray, #888888)',
errorText: isDark ? 'rgba(248,113,113,0.9)' : 'rgba(220,38,38,0.9)',
normalText: isDark ? 'rgba(255,255,255,0.85)' : 'rgba(30,30,30,0.85)',
gpuChip: isDark ? 'rgba(80, 80, 90, 0.7)' : 'rgba(180, 180, 190, 0.7)',
detailOverlay: isDark ? 'rgba(0,0,0,0.35)' : 'rgba(0,0,0,0.08)',
deviceShadow: isDark ? 'rgba(0,0,0,0.2)' : 'rgba(0,0,0,0.06)',
deviceHighlight: isDark ? 'rgba(255,255,255,0.08)' : 'rgba(255,255,255,0.5)',
tbActive: isDark ? 'rgba(234,179,8,0.9)' : 'rgba(30,28,20,0.9)',
tbInactive: isDark ? 'rgba(100,100,100,0.7)' : 'rgba(160,160,160,0.7)',
deviceDetail: isDark ? '#374151' : '#c0c0c0',
accent:
style.getPropertyValue("--exo-yellow").trim() ||
(isDark ? "oklch(0.85 0.18 85)" : "oklch(0.20 0.02 85)"),
accentRgb: isDark ? "255,215,0" : "30,28,20",
deviceCase: isDark ? "#1a1a1a" : "#e8e8e8",
deviceCaseDark: isDark ? "#2c2c2c" : "#d4d4d4",
deviceScreen: isDark ? "#0a0a12" : "#f0f0f5",
deviceScreenFill: isDark ? "rgba(0,20,40,0.9)" : "rgba(240,242,248,0.95)",
labelWhite: isDark ? "#FFFFFF" : "#1a1a1a",
labelMuted: isDark ? "rgba(179,179,179,0.9)" : "rgba(80,80,80,0.9)",
labelDim: isDark ? "rgba(179,179,179,0.7)" : "rgba(100,100,100,0.7)",
wireDefault: isDark ? "rgba(179,179,179,0.8)" : "rgba(120,120,120,0.6)",
wireBright: isDark ? "rgba(255,255,255,0.9)" : "rgba(30,30,30,0.9)",
wireFiltered: isDark ? "rgba(140,140,140,0.6)" : "rgba(160,160,160,0.5)",
gridStroke: isDark
? "var(--exo-light-gray, #B3B3B3)"
: "var(--exo-light-gray, #888888)",
errorText: isDark ? "rgba(248,113,113,0.9)" : "rgba(220,38,38,0.9)",
normalText: isDark ? "rgba(255,255,255,0.85)" : "rgba(30,30,30,0.85)",
gpuChip: isDark ? "rgba(80, 80, 90, 0.7)" : "rgba(180, 180, 190, 0.7)",
detailOverlay: isDark ? "rgba(0,0,0,0.35)" : "rgba(0,0,0,0.08)",
deviceShadow: isDark ? "rgba(0,0,0,0.2)" : "rgba(0,0,0,0.06)",
deviceHighlight: isDark
? "rgba(255,255,255,0.08)"
: "rgba(255,255,255,0.5)",
tbActive: isDark ? "rgba(234,179,8,0.9)" : "rgba(30,28,20,0.9)",
tbInactive: isDark ? "rgba(100,100,100,0.7)" : "rgba(160,160,160,0.7)",
deviceDetail: isDark ? "#374151" : "#c0c0c0",
};
}
function getDefaultColors() {
return {
accent: 'oklch(0.85 0.18 85)', accentRgb: '255,215,0',
deviceCase: '#1a1a1a', deviceCaseDark: '#2c2c2c', deviceScreen: '#0a0a12',
deviceScreenFill: 'rgba(0,20,40,0.9)', labelWhite: '#FFFFFF',
labelMuted: 'rgba(179,179,179,0.9)', labelDim: 'rgba(179,179,179,0.7)',
wireDefault: 'rgba(179,179,179,0.8)', wireBright: 'rgba(255,255,255,0.9)',
wireFiltered: 'rgba(140,140,140,0.6)',
gridStroke: 'var(--exo-light-gray, #B3B3B3)',
errorText: 'rgba(248,113,113,0.9)', normalText: 'rgba(255,255,255,0.85)',
gpuChip: 'rgba(80, 80, 90, 0.7)', detailOverlay: 'rgba(0,0,0,0.35)',
deviceShadow: 'rgba(0,0,0,0.2)', deviceHighlight: 'rgba(255,255,255,0.08)',
tbActive: 'rgba(234,179,8,0.9)', tbInactive: 'rgba(100,100,100,0.7)',
deviceDetail: '#374151',
accent: "oklch(0.85 0.18 85)",
accentRgb: "255,215,0",
deviceCase: "#1a1a1a",
deviceCaseDark: "#2c2c2c",
deviceScreen: "#0a0a12",
deviceScreenFill: "rgba(0,20,40,0.9)",
labelWhite: "#FFFFFF",
labelMuted: "rgba(179,179,179,0.9)",
labelDim: "rgba(179,179,179,0.7)",
wireDefault: "rgba(179,179,179,0.8)",
wireBright: "rgba(255,255,255,0.9)",
wireFiltered: "rgba(140,140,140,0.6)",
gridStroke: "var(--exo-light-gray, #B3B3B3)",
errorText: "rgba(248,113,113,0.9)",
normalText: "rgba(255,255,255,0.85)",
gpuChip: "rgba(80, 80, 90, 0.7)",
detailOverlay: "rgba(0,0,0,0.35)",
deviceShadow: "rgba(0,0,0,0.2)",
deviceHighlight: "rgba(255,255,255,0.08)",
tbActive: "rgba(234,179,8,0.9)",
tbInactive: "rgba(100,100,100,0.7)",
deviceDetail: "#374151",
};
}
let themeColors = $state(getThemeColors());
$effect(() => {
if (typeof document === 'undefined') return;
if (typeof document === "undefined") return;
const observer = new MutationObserver(() => {
themeColors = getThemeColors();
});
observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
observer.observe(document.documentElement, {
attributes: true,
attributeFilter: ["class"],
});
return () => observer.disconnect();
});