Replace ifElse with derive to fix commontools_1 error (commontoolsinc#1811)

* Replace `ifElse` with `derive` to fix `commontools_1` error

Also replace `derive` with `lift` to combine lists reactively

* Format pass

Author: bfollington

packages/patterns/chatbot-list-view.tsx

@@ -107,10 +107,7 @@ const createChatRecipe = handler<
       messages: [],
       expandChat: false,
       content: "",
-      allCharms: [
-        ...allCharms.get(),
-        ...charmsList.get().map((i) => i.charm),
-      ] as unknown as OpaqueRef<Cell<MentionableCharm[]>>, // TODO(bf): types...
+      allCharms,
     });
     // store the charm ref in a cell (pass isInitialized to prevent recursive calls)
     return storeCharm({ charm, selectedCharm, charmsList, isInitialized });
@@ -158,12 +155,25 @@ const handleCharmLinkClicked = handler(
   },
 );
 
+const combineLists = lift(
+  (
+    { allCharms, charmsList }: { allCharms: any[]; charmsList: CharmEntry[] },
+  ) => {
+    return [...charmsList.map((c) => c.charm), ...allCharms];
+  },
+);
+
 // create the named cell inside the recipe body, so we do it just once
 export default recipe<Input, Output>(
   "Launcher",
   ({ selectedCharm, charmsList, allCharms }) => {
     logCharmsList({ charmsList });
 
+    const combined = combineLists({
+      allCharms: allCharms as unknown as any[],
+      charmsList,
+    });
+
     return {
       [NAME]: "Launcher",
       [UI]: (
@@ -173,7 +183,7 @@ export default recipe<Input, Output>(
               onClick={createChatRecipe({
                 selectedCharm,
                 charmsList,
-                allCharms: allCharms as unknown as any,
+                allCharms: combined as unknown as any,
               })}
             >
               Create New Chat
@@ -209,36 +219,44 @@ export default recipe<Input, Output>(
             </aside>
 
             <aside slot="right">
-              {ifElse(
-                selectedCharm.charm,
-                <>
-                  <div>
-                    <label>Backlinks</label>
-                    <ct-vstack>
-                      {selectedCharm?.charm?.backlinks?.map((
-                        charm: MentionableCharm,
-                      ) => (
-                        <ct-button onClick={handleCharmLinkClicked({ charm })}>
-                          {charm[NAME]}
-                        </ct-button>
-                      ))}
-                    </ct-vstack>
-                  </div>
-                  <details>
-                    <summary>Mentioned Charms</summary>
-                    <ct-vstack>
-                      {selectedCharm?.charm?.mentioned?.map((
-                        charm: MentionableCharm,
-                      ) => (
-                        <ct-button onClick={handleCharmLinkClicked({ charm })}>
-                          {charm[NAME]}
-                        </ct-button>
-                      ))}
-                    </ct-vstack>
-                  </details>
-                </>,
-                null,
-              )}
+              {derive(selectedCharm.charm, (selected) => {
+                if (selected) {
+                  return (
+                    <>
+                      <div>
+                        <label>Backlinks</label>
+                        <ct-vstack>
+                          {selected?.backlinks?.map((
+                            charm: MentionableCharm,
+                          ) => (
+                            <ct-button
+                              onClick={handleCharmLinkClicked({ charm })}
+                            >
+                              {charm[NAME]}
+                            </ct-button>
+                          ))}
+                        </ct-vstack>
+                      </div>
+                      <details>
+                        <summary>Mentioned Charms</summary>
+                        <ct-vstack>
+                          {selected?.mentioned?.map((
+                            charm: MentionableCharm,
+                          ) => (
+                            <ct-button
+                              onClick={handleCharmLinkClicked({ charm })}
+                            >
+                              {charm[NAME]}
+                            </ct-button>
+                          ))}
+                        </ct-vstack>
+                      </details>
+                    </>
+                  );
+                } else {
+                  return null;
+                }
+              })}
             </aside>
           </ct-autolayout>
         </ct-screen>

packages/patterns/default-app.tsx

@@ -7,6 +7,7 @@ import {
   handler,
   NAME,
   navigateTo,
+  Opaque,
   OpaqueRef,
   recipe,
   str,
@@ -22,6 +23,7 @@ import {
   type MentionableCharm,
 } from "./chatbot-note.tsx";
 import { default as Note } from "./note.tsx";
+import ChatList from "./chatbot-list-view.tsx";
 
 export type Charm = {
   [NAME]?: string;
@@ -65,6 +67,17 @@ const removeCharm = handler<
   }
 });
 
+const spawnChatList = handler<
+  Record<string, never>,
+  { allCharms: Cell<Charm[]> }
+>((_, state) => {
+  return navigateTo(ChatList({
+    selectedCharm: { charm: undefined },
+    charmsList: [],
+    allCharms: state.allCharms,
+  }));
+});
+
 const spawnChatbot = handler<
   Record<string, never>,
   Record<string, never>
@@ -136,6 +149,15 @@ export default recipe<CharmsListInput, CharmsListOutput>(
             {/* Quick Launch Toolbar */}
             <ct-hstack gap="2" align="center">
               <h3>Quicklaunch:</h3>
+              <ct-button
+                onClick={spawnChatList({
+                  allCharms: allCharms as unknown as OpaqueRef<
+                    MentionableCharm[]
+                  >,
+                })}
+              >
+                📂 Chat List
+              </ct-button>
               <ct-button
                 onClick={spawnChatbot({})}
               >