From a9de0c78177ef0d4f4e648308cf4e2f5935a5bbb Mon Sep 17 00:00:00 2001
From: Chris Kruining <c.kruining@4dotnet.nl>
Date: Mon, 17 Feb 2025 15:39:44 +1100
Subject: [PATCH] revert selector back to memo

---
 src/components/tabs.tsx | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/src/components/tabs.tsx b/src/components/tabs.tsx
index 2906476..1db76b8 100644
--- a/src/components/tabs.tsx
+++ b/src/components/tabs.tsx
@@ -1,4 +1,4 @@
-import { Accessor, children, createContext, createEffect, createMemo, createSelector, createSignal, For, ParentComponent, Setter, Show, useContext } from "solid-js";
+import { Accessor, children, createContext, createEffect, createMemo, createSignal, For, ParentComponent, Setter, Show, useContext } from "solid-js";
 import { Command, CommandType, noop, useCommands } from "~/features/command";
 import { AiOutlineClose } from "solid-icons/ai";
 import css from "./tabs.module.css";
@@ -6,7 +6,7 @@ import css from "./tabs.module.css";
 type CloseTabCommandType = CommandType<(id: string) => any>;
 interface TabsContextType {
     activate(id: string | undefined): void;
-    isActive(id: string): boolean;
+    isActive(id: string): Accessor<boolean>;
     readonly onClose: Accessor<CloseTabCommandType | undefined>
 }
 
@@ -24,7 +24,6 @@ const useTabs = () => {
 
 export const Tabs: ParentComponent<{ class?: string, active?: string, setActive?: Setter<string | undefined>, onClose?: CloseTabCommandType }> = (props) => {
     const [active, setActive] = createSignal<string | undefined>(props.active);
-    const isActive = createSelector<string | undefined, string>(active, (id, active) => id === active);
 
     createEffect(() => {
         props.setActive?.(active());
@@ -35,11 +34,9 @@ export const Tabs: ParentComponent<{ class?: string, active?: string, setActive?
             setActive(id);
         },
 
-        isActive,
-
-        // isActive(id: string) {
-        //     return createMemo(() => active() === id);
-        // },
+        isActive(id: string) {
+            return createMemo(() => active() === id);
+        },
 
         onClose: createMemo(() => props.onClose),
     };
@@ -94,6 +91,7 @@ const _Tabs: ParentComponent<{ class?: string, active: string | undefined, onClo
 export const Tab: ParentComponent<{ id: string, label: string, closable?: boolean }> = (props) => {
     const context = useTabs();
     const resolved = children(() => props.children);
+    const isActive = context.isActive(props.id);
 
     return <div
         id={props.id}
@@ -101,7 +99,7 @@ export const Tab: ParentComponent<{ id: string, label: string, closable?: boolea
         data-tab-label={props.label}
         data-tab-closable={props.closable}
     >
-        <Show when={context.isActive(props.id)}>
+        <Show when={isActive()}>
             <Command.Context for={context.onClose() ?? noop} with={[props.id]}>{resolved()}</Command.Context>
         </Show>
     </div>;