refactor(base): hoist NavItem type and drop IIFE in select cell

apps/client/src/features/base/components/cells/cell-select.tsx

@@ -17,6 +17,10 @@ const CHOICE_COLORS = [
   "blue", "cyan", "teal", "green", "lime", "yellow", "orange",
 ];
 
+type NavItem =
+  | { kind: "choice"; choice: Choice }
+  | { kind: "add" };
+
 type CellSelectProps = {
   value: unknown;
   property: IBaseProperty;
@@ -77,10 +81,6 @@ export function CellSelect({
     [choices.length],
   );
 
-  type NavItem =
-    | { kind: "choice"; choice: Choice }
-    | { kind: "add" };
-
   const navItems = useMemo<NavItem[]>(
     () => [
       ...filteredChoices.map((c) => ({ kind: "choice" as const, choice: c })),
@@ -138,6 +138,7 @@ export function CellSelect({
   );
 
   if (isEditing) {
+    const addOptionIdx = filteredChoices.length;
     return (
       <Popover
         opened
@@ -198,16 +199,14 @@ export function CellSelect({
                 </div>
               );
             })}
-            {showAddOption && (() => {
+            {showAddOption && (
-              const idx = filteredChoices.length;
-              return (
               <div
-                  ref={setOptionRef(idx)}
+                ref={setOptionRef(addOptionIdx)}
                 className={clsx(
                   cellClasses.addOptionRow,
-                    idx === activeIndex && cellClasses.selectOptionKeyboardActive,
+                  addOptionIdx === activeIndex && cellClasses.selectOptionKeyboardActive,
                 )}
-                  onMouseEnter={() => setActiveIndex(idx)}
+                onMouseEnter={() => setActiveIndex(addOptionIdx)}
                 onMouseDown={(e) => {
                   e.preventDefault();
                 }}
@@ -221,8 +220,7 @@ export function CellSelect({
                   {trimmedSearch}
                 </span>
               </div>
-              );
+            )}
-            })()}
           </div>
         </Popover.Dropdown>
       </Popover>