From 7eebba70d471d64c4606a5a22791f2b02c398624 Mon Sep 17 00:00:00 2001 From: kraysent Date: Sun, 24 May 2026 10:25:47 +0100 Subject: [PATCH 1/5] theme switcher in the interface --- index.html | 9 ++ src/components/core/Accordion.tsx | 4 +- src/components/core/Button.tsx | 4 +- src/components/core/DropdownFilter.tsx | 4 +- src/components/core/Hint.tsx | 2 +- src/components/core/Link.tsx | 2 +- src/components/core/Loading.tsx | 6 +- src/components/core/Text.tsx | 12 +-- src/components/core/TextFilter.tsx | 4 +- src/components/ui/Badge.tsx | 6 +- src/components/ui/CommonTable.tsx | 20 ++-- src/components/ui/CopyButton.tsx | 4 +- src/components/ui/ErrorPage.tsx | 2 +- src/components/ui/Navbar.tsx | 70 ++----------- src/components/ui/Searchbar.tsx | 2 +- src/components/ui/SidebarRail.tsx | 52 ++++++++++ src/components/ui/ThemeSwitcher.tsx | 32 ++++++ src/hooks/useTheme.tsx | 138 +++++++++++++++++++++++++ src/index.css | 62 ++++++++--- src/main.tsx | 5 +- src/pages/TableDetails.tsx | 16 +-- 21 files changed, 340 insertions(+), 116 deletions(-) create mode 100644 src/components/ui/SidebarRail.tsx create mode 100644 src/components/ui/ThemeSwitcher.tsx create mode 100644 src/hooks/useTheme.tsx diff --git a/index.html b/index.html index 49db93f..d6f71d1 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,15 @@ HyperLEDA +
diff --git a/src/components/core/Accordion.tsx b/src/components/core/Accordion.tsx index e2f8f29..3f740f7 100644 --- a/src/components/core/Accordion.tsx +++ b/src/components/core/Accordion.tsx @@ -17,11 +17,11 @@ export function Accordion({ const [isOpen, setIsOpen] = useState(defaultOpen); return ( -
+
diff --git a/src/components/ui/ErrorPage.tsx b/src/components/ui/ErrorPage.tsx index ec8b28e..b664352 100644 --- a/src/components/ui/ErrorPage.tsx +++ b/src/components/ui/ErrorPage.tsx @@ -24,7 +24,7 @@ export function ErrorPage({
{showLargeText &&

404

}

{title}

-

{message}

+

{message}

{children && ( diff --git a/src/components/ui/Navbar.tsx b/src/components/ui/Navbar.tsx index 10b1b86..f19f906 100644 --- a/src/components/ui/Navbar.tsx +++ b/src/components/ui/Navbar.tsx @@ -1,15 +1,5 @@ -import { - forwardRef, - useEffect, - useMemo, - useRef, - useState, - type ButtonHTMLAttributes, - type ReactElement, - type ReactNode, -} from "react"; +import { useEffect, useMemo, useRef, useState } from "react"; import { NavLink, useNavigate } from "react-router-dom"; -import { Tooltip } from "flowbite-react"; import { MdAccountTree, MdInfo, @@ -23,6 +13,12 @@ import { clearAuthToken, isLoggedIn } from "../../auth/token"; import { logoutEnforced } from "../../clients/admin/sdk.gen"; import { adminClient } from "../../clients/config"; import { Link } from "../core/Link"; +import { + SidebarRailButton, + SidebarTooltip, + sidebarRailControlClassName, +} from "./SidebarRail"; +import { ThemeSwitcher } from "./ThemeSwitcher"; const navItems = [ { to: "/", icon: , label: "Object search", end: true }, @@ -40,51 +36,6 @@ const navItems = [ }, ]; -function SidebarTooltip({ - content, - children, -}: { - content: ReactNode; - children: ReactNode; -}): ReactElement { - return ( - - {children} - - ); -} - -function sidebarRailControlClassName(active: boolean): string { - return `w-9 h-9 flex items-center justify-center rounded-lg transition-colors duration-300 cursor-pointer ${ - active - ? "bg-[#646cff] text-white" - : "text-neutral-400 hover:bg-neutral-700 hover:text-white" - }`; -} - -const SidebarRailButton = forwardRef< - HTMLButtonElement, - ButtonHTMLAttributes & { active?: boolean } ->(function SidebarRailButton({ active = false, className, ...rest }, ref) { - return ( -
{patchError ? ( -

{patchError}

+

{patchError}

) : null} ); From 8b0f8a8a41d256223b628ed70da018f381a3f528 Mon Sep 17 00:00:00 2001 From: kraysent Date: Sun, 24 May 2026 10:30:25 +0100 Subject: [PATCH 2/5] unify hint and sidebar tooltip --- src/components/ui/AppTooltip.tsx | 34 ++++++++++++++++++++++++++++ src/components/ui/CommonTable.tsx | 2 +- src/components/{core => ui}/Hint.tsx | 25 ++++---------------- src/components/ui/Navbar.tsx | 26 ++++++++++----------- src/components/ui/SidebarRail.tsx | 27 +--------------------- src/components/ui/ThemeSwitcher.tsx | 8 ++++--- src/pages/ObjectDetails.tsx | 2 +- 7 files changed, 60 insertions(+), 64 deletions(-) create mode 100644 src/components/ui/AppTooltip.tsx rename src/components/{core => ui}/Hint.tsx (51%) diff --git a/src/components/ui/AppTooltip.tsx b/src/components/ui/AppTooltip.tsx new file mode 100644 index 0000000..2369d32 --- /dev/null +++ b/src/components/ui/AppTooltip.tsx @@ -0,0 +1,34 @@ +import { Tooltip } from "flowbite-react"; +import classNames from "classnames"; +import { ReactElement, ReactNode } from "react"; + +const tooltipClassName = + "bg-surface-2 z-10 border border-border text-primary text-sm"; + +const tooltipTheme = { hidden: "invisible opacity-0 pointer-events-none" }; + +interface AppTooltipProps { + content: ReactNode; + children: ReactNode; + placement?: "auto" | "top" | "right" | "bottom" | "left"; + className?: string; +} + +export function AppTooltip({ + content, + children, + placement = "auto", + className, +}: AppTooltipProps): ReactElement { + return ( + + {children} + + ); +} diff --git a/src/components/ui/CommonTable.tsx b/src/components/ui/CommonTable.tsx index a19f8f9..7154fe7 100644 --- a/src/components/ui/CommonTable.tsx +++ b/src/components/ui/CommonTable.tsx @@ -1,6 +1,6 @@ import React, { ReactElement, ReactNode } from "react"; import classNames from "classnames"; -import { Hint } from "../core/Hint"; +import { Hint } from "./Hint"; import { Loading } from "../core/Loading"; export type CellPrimitive = ReactElement | string | number; diff --git a/src/components/core/Hint.tsx b/src/components/ui/Hint.tsx similarity index 51% rename from src/components/core/Hint.tsx rename to src/components/ui/Hint.tsx index cebc077..6f65ef7 100644 --- a/src/components/core/Hint.tsx +++ b/src/components/ui/Hint.tsx @@ -1,6 +1,6 @@ -import { Tooltip } from "flowbite-react"; import { ReactElement, ReactNode } from "react"; import { MdHelpOutline } from "react-icons/md"; +import { AppTooltip } from "./AppTooltip"; interface HintProps { children?: ReactElement; @@ -9,23 +9,14 @@ interface HintProps { trigger?: "icon" | "child"; } -const tooltipClassName = "bg-surface-2 z-10 border border-border max-w-xl"; -const tooltipTheme = { hidden: "invisible opacity-0 pointer-events-none" }; - export function Hint(props: HintProps): ReactElement { const trigger = props.trigger ?? "icon"; if (trigger === "child") { return ( - + {props.children} - + ); } @@ -35,15 +26,9 @@ export function Hint(props: HintProps): ReactElement { >
{props.children}
- + - +
); diff --git a/src/components/ui/Navbar.tsx b/src/components/ui/Navbar.tsx index f19f906..f321f14 100644 --- a/src/components/ui/Navbar.tsx +++ b/src/components/ui/Navbar.tsx @@ -13,11 +13,8 @@ import { clearAuthToken, isLoggedIn } from "../../auth/token"; import { logoutEnforced } from "../../clients/admin/sdk.gen"; import { adminClient } from "../../clients/config"; import { Link } from "../core/Link"; -import { - SidebarRailButton, - SidebarTooltip, - sidebarRailControlClassName, -} from "./SidebarRail"; +import { AppTooltip } from "./AppTooltip"; +import { SidebarRailButton, sidebarRailControlClassName } from "./SidebarRail"; import { ThemeSwitcher } from "./ThemeSwitcher"; const navItems = [ @@ -97,7 +94,7 @@ export function Navbar() { <>