for consistency

src/components/Selectable.tsx

@@ -0,0 +1,41 @@
+import { useTheme } from "@/context/ThemeContext";
+import type { JSXElement } from "solid-js";
+import type { BoxOptions, TextOptions } from "@opentui/core";
+
+export function SelectableBox({
+  selected,
+  children,
+  ...props
+}: {
+  selected: () => boolean;
+  children: JSXElement;
+} & BoxOptions) {
+  const { theme } = useTheme();
+
+  return (
+    <box
+      borderColor={selected() ? theme.surface : theme.border}
+      backgroundColor={selected() ? theme.primary : theme.surface}
+      {...props}
+    >
+      {children}
+    </box>
+  );
+}
+
+export function SelectableText({
+  selected,
+  children,
+  ...props
+}: {
+  selected: () => boolean;
+  children: JSXElement;
+} & TextOptions) {
+  const { theme } = useTheme();
+
+  return (
+    <text fg={selected() ? theme.surface : theme.text} {...props}>
+      {children}
+    </text>
+  );
+}

src/components/TabNavigation.tsx

@@ -1,6 +1,7 @@
 import { useTheme } from "@/context/ThemeContext";
 import { TABS } from "@/utils/navigation";
 import { For } from "solid-js";
+import { SelectableBox, SelectableText } from "@/components/Selectable";
 
 interface TabNavigationProps {
   activeTab: TABS;
@@ -29,24 +30,18 @@ export function TabNavigation(props: TabNavigationProps) {
     >
       <For each={tabs}>
         {(tab) => (
-          <box
+          <SelectableBox
             border
-            borderColor={theme.border}
+            selected={() => tab.id == props.activeTab}
             onMouseDown={() => props.onTabSelect(tab.id)}
-            style={{
-              backgroundColor:
-                tab.id == props.activeTab ? theme.primary : "transparent",
-            }}
           >
-            <text
+            <SelectableText
-              style={{
+              selected={() => tab.id == props.activeTab}
-                fg: tab.id == props.activeTab ? "white" : theme.text,
+              alignSelf="center"
-                alignSelf: "center",
-              }}
             >
               {tab.label}
-            </text>
+            </SelectableText>
-          </box>
+          </SelectableBox>
         )}
       </For>
     </box>