flatten

src/App.tsx

@@ -1,6 +1,6 @@
 import { createSignal, createMemo, ErrorBoundary } from "solid-js";
 import { useSelectionHandler } from "@opentui/solid";
-import { Layout } from "./components/Layout";
+import { Layout } from "./Layout";
 import { TabNavigation } from "./components/TabNavigation";
 import { FeedPage } from "@/tabs/Feed/FeedPage";
 import { MyShowsPage } from "@/tabs/MyShows/MyShowsPage";
@@ -14,7 +14,6 @@ import { Player } from "@/tabs/Player/Player";
 import { SettingsScreen } from "@/tabs/Settings/SettingsScreen";
 import { useAuthStore } from "@/stores/auth";
 import { useFeedStore } from "@/stores/feed";
-import { useAppStore } from "@/stores/app";
 import { useAudio } from "@/hooks/useAudio";
 import { useMultimediaKeys } from "@/hooks/useMultimediaKeys";
 import { FeedVisibility } from "@/types/feed";
@@ -34,7 +33,6 @@ export function App() {
   const [layerDepth, setLayerDepth] = createSignal(0);
   const auth = useAuthStore();
   const feedStore = useFeedStore();
-  const appStore = useAppStore();
   const audio = useAudio();
   const toast = useToast();
   const renderer = useRenderer();

src/components/Tab.tsx

@@ -1,50 +0,0 @@
-import { useTheme } from "@/context/ThemeContext";
-
-export type TabId =
-  | "feed"
-  | "shows"
-  | "discover"
-  | "search"
-  | "player"
-  | "settings";
-
-export type TabDefinition = {
-  id: TabId;
-  label: string;
-};
-
-export const tabs: TabDefinition[] = [
-  { id: "feed", label: "Feed" },
-  { id: "shows", label: "My Shows" },
-  { id: "discover", label: "Discover" },
-  { id: "search", label: "Search" },
-  { id: "player", label: "Player" },
-  { id: "settings", label: "Settings" },
-];
-
-type TabProps = {
-  tab: TabDefinition;
-  active: boolean;
-  onSelect: (tab: TabId) => void;
-};
-
-export function Tab(props: TabProps) {
-  const { theme } = useTheme();
-  return (
-    <box
-      border
-      borderColor={theme.border}
-      onMouseDown={() => props.onSelect(props.tab.id)}
-      style={{
-        padding: 1,
-        backgroundColor: props.active ? theme.primary : "transparent",
-      }}
-    >
-      <text style={{ fg: theme.text }}>
-        {props.active ? "[" : " "}
-        {props.tab.label}
-        {props.active ? "]" : " "}
-      </text>
-    </box>
-  );
-}

src/components/TabNavigation.tsx

@@ -1,43 +1,57 @@
-import { Tab, type TabId } from "./Tab";
+import { useTheme } from "@/context/ThemeContext";
+import { For } from "solid-js";
 
-type TabNavigationProps = {
+interface TabNavigationProps {
   activeTab: TabId;
   onTabSelect: (tab: TabId) => void;
-};
+}
+
+export const tabs: TabDefinition[] = [
+  { id: "feed", label: "Feed" },
+  { id: "shows", label: "My Shows" },
+  { id: "discover", label: "Discover" },
+  { id: "search", label: "Search" },
+  { id: "player", label: "Player" },
+  { id: "settings", label: "Settings" },
+];
 
 export function TabNavigation(props: TabNavigationProps) {
+  const { theme } = useTheme();
   return (
     <box style={{ flexDirection: "row", gap: 1 }}>
-      <Tab
+      <For each={tabs}>
-        tab={{ id: "feed", label: "Feed" }}
+        {(tab) => (
-        active={props.activeTab === "feed"}
+          <box
-        onSelect={props.onTabSelect}
+            border
-      />
+            borderColor={theme.border}
-      <Tab
+            onMouseDown={() => props.onTabSelect(tab.id)}
-        tab={{ id: "shows", label: "My Shows" }}
+            style={{
-        active={props.activeTab === "shows"}
+              padding: 1,
-        onSelect={props.onTabSelect}
+              backgroundColor:
-      />
+                tab.id == props.activeTab ? theme.primary : "transparent",
-      <Tab
+            }}
-        tab={{ id: "discover", label: "Discover" }}
+          >
-        active={props.activeTab === "discover"}
+            <text style={{ fg: theme.text }}>
-        onSelect={props.onTabSelect}
+              {tab.id == props.activeTab ? "[" : " "}
-      />
+              {tab.label}
-      <Tab
+              {tab.id == props.activeTab ? "]" : " "}
-        tab={{ id: "search", label: "Search" }}
+            </text>
-        active={props.activeTab === "search"}
+          </box>
-        onSelect={props.onTabSelect}
+        )}
-      />
+      </For>
-      <Tab
-        tab={{ id: "player", label: "Player" }}
-        active={props.activeTab === "player"}
-        onSelect={props.onTabSelect}
-      />
-      <Tab
-        tab={{ id: "settings", label: "Settings" }}
-        active={props.activeTab === "settings"}
-        onSelect={props.onTabSelect}
-      />
     </box>
   );
 }
+
+export type TabId =
+  | "feed"
+  | "shows"
+  | "discover"
+  | "search"
+  | "player"
+  | "settings";
+
+export type TabDefinition = {
+  id: TabId;
+  label: string;
+};