Skip to content

feat: oled full black background setting toggle #279

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
slowlydev merged 4 commits into from
Jun 1, 2025
Merged

feat: oled full black background setting toggle #279

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
66bb8c9
feat: oled full black background setting toggle
Constrat May 31, 2025
82a3df1
Merge branch 'develop' into feat/oled
slowlydev May 31, 2025
50c110f
perf: remove unnecessary div
Constrat May 31, 2025
0946e63
refactor(oled): small cleanup
slowlydev Jun 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions dash/src/app/dashboard/settings/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,11 @@ export default function SettingsPage() {
<p className="text-zinc-500">Show Drivers Mini Sectors</p>
</div>

<div className="flex gap-2">
<Toggle enabled={settings.oledMode} setEnabled={(v) => settings.setOledMode(v)} />
<p className="text-zinc-500">OLED Mode (Pure Black Background)</p>
</div>

<h2 className="my-4 text-2xl">Race Control</h2>

<div className="flex gap-2">
Expand Down
9 changes: 6 additions & 3 deletions dash/src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import "@/styles/globals.css";

import { env } from "@/env";
import EnvScript from "@/env-script";
import OledModeProvider from "@/components/OledModeProvider";

import { GeistMono } from "geist/font/mono";
import { GeistSans } from "geist/font/sans";
Expand All @@ -18,7 +19,7 @@ type Props = Readonly<{

export default function RootLayout({ children }: Props) {
return (
<html lang="en" className={`${GeistSans.variable} ${GeistMono.variable} bg-zinc-950 font-sans text-white`}>
<html lang="en" className={`${GeistSans.variable} ${GeistMono.variable} font-sans text-white`}>
<head>
<EnvScript />

Expand All @@ -34,7 +35,9 @@ export default function RootLayout({ children }: Props) {
)}
</head>

<body>{children}</body>
<body>
<OledModeProvider>{children}</OledModeProvider>
</body>
</html>
);
}
}
20 changes: 20 additions & 0 deletions dash/src/components/OledModeProvider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
"use client";

import { useEffect, type ReactNode } from "react";

import { useSettingsStore } from "@/stores/useSettingsStore";

type Props = {
children: ReactNode;
};

export default function OledModeProvider({ children }: Props) {
const oledMode = useSettingsStore((state) => state.oledMode);

useEffect(() => {
document.documentElement.classList.toggle("bg-zinc-950", !oledMode);
document.documentElement.classList.toggle("bg-black", oledMode);
}, [oledMode]);

return children;
}
7 changes: 6 additions & 1 deletion dash/src/components/Sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import Link from "next/link";
import clsx from "clsx";

import { useSidebarStore } from "@/stores/useSidebarStore";
import { useSettingsStore } from "@/stores/useSettingsStore";

import ConnectionStatus from "@/components/ConnectionStatus";
import DelayInput from "@/components/DelayInput";
Expand Down Expand Up @@ -57,6 +58,8 @@ export default function Sidebar({ connected }: Props) {

const pin = useSidebarStore((state) => state.pin);
const unpin = useSidebarStore((state) => state.unpin);

const oledMode = useSettingsStore((state) => state.oledMode);

useEffect(() => {
const handleResize = () => {
Expand Down Expand Up @@ -97,8 +100,10 @@ export default function Sidebar({ connected }: Props) {
transition={{ type: "spring", bounce: 0.1 }}
>
<nav
className={clsx("m-2 flex w-52 flex-col bg-zinc-950 p-2", {
className={clsx("m-2 flex w-52 flex-col p-2", {
"rounded-lg border border-zinc-800": !pinned,
"bg-black": oledMode,
"bg-zinc-950": !oledMode,
})}
>
<div className="flex items-center justify-between gap-2">
Expand Down
6 changes: 6 additions & 0 deletions dash/src/stores/useSettingsStore.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,9 @@ type SettingsStore = {
showMiniSectors: boolean;
setShowMiniSectors: (showMiniSectors: boolean) => void;

oledMode: boolean;
setOledMode: (oledMode: boolean) => void;

favoriteDrivers: string[];
setFavoriteDrivers: (favoriteDrivers: string[]) => void;
removeFavoriteDriver: (driver: string) => void;
Expand Down Expand Up @@ -64,6 +67,9 @@ export const useSettingsStore = create<SettingsStore>()(
showMiniSectors: true,
setShowMiniSectors: (showMiniSectors: boolean) => set({ showMiniSectors }),

oledMode: false,
setOledMode: (oledMode: boolean) => set({ oledMode }),

favoriteDrivers: [],
setFavoriteDrivers: (favoriteDrivers: string[]) => set({ favoriteDrivers }),
removeFavoriteDriver: (driver: string) =>
Expand Down