Rename Command Center to ADHD Mode and swap icons

Author: charlesvien

apps/code/src/renderer/features/command-center/components/CommandCenterView.tsx

@@ -1,6 +1,6 @@
 import { useTaskViewed } from "@features/sidebar/hooks/useTaskViewed";
 import { useSetHeaderContent } from "@hooks/useSetHeaderContent";
-import { SquaresFour } from "@phosphor-icons/react";
+import { Lightning } from "@phosphor-icons/react";
 import { Box, Flex, Text } from "@radix-ui/themes";
 import { useEffect, useMemo } from "react";
 import { useCommandCenterData } from "../hooks/useCommandCenterData";
@@ -27,14 +27,14 @@ export function CommandCenterView() {
   const headerContent = useMemo(
     () => (
       <Flex align="center" gap="2" className="w-full min-w-0">
-        <SquaresFour size={12} className="shrink-0 text-gray-10" />
+        <Lightning size={12} className="shrink-0 text-gray-10" />
         <Text
           size="1"
           weight="medium"
           className="truncate whitespace-nowrap text-[13px]"
-          title="Command center"
+          title="ADHD Mode"
         >
-          Command center
+          ADHD Mode
         </Text>
       </Flex>
     ),

apps/code/src/renderer/features/sidebar/components/SidebarMenu.tsx

@@ -210,17 +210,17 @@ function SidebarMenuComponent() {
           </Box>
 
           <Box mb="1">
-            <CommandCenterItem
-              isActive={sidebarData.isCommandCenterActive}
-              onClick={handleCommandCenterClick}
-              activeCount={commandCenterActiveCount}
+            <SkillsItem
+              isActive={sidebarData.isSkillsActive}
+              onClick={handleSkillsClick}
             />
           </Box>
 
           <Box mb="2">
-            <SkillsItem
-              isActive={sidebarData.isSkillsActive}
-              onClick={handleSkillsClick}
+            <CommandCenterItem
+              isActive={sidebarData.isCommandCenterActive}
+              onClick={handleCommandCenterClick}
+              activeCount={commandCenterActiveCount}
             />
           </Box>
 

apps/code/src/renderer/features/sidebar/components/items/CommandCenterItem.tsx

@@ -1,4 +1,4 @@
-import { SquaresFour } from "@phosphor-icons/react";
+import { Lightning } from "@phosphor-icons/react";
 import { SidebarItem } from "../SidebarItem";
 
 interface CommandCenterItemProps {
@@ -20,16 +20,16 @@ export function CommandCenterItem({
   return (
     <SidebarItem
       depth={0}
-      icon={<SquaresFour size={16} weight={isActive ? "fill" : "regular"} />}
-      label="Command center"
+      icon={<Lightning size={16} weight={isActive ? "fill" : "regular"} />}
+      label="ADHD Mode"
       isActive={isActive}
       onClick={onClick}
       endContent={
         activeCount && activeCount > 0 ? (
           <span
             className="inline-flex min-w-[16px] items-center justify-center rounded-full px-1 text-[11px] text-gray-11 leading-none"
             style={{ height: "16px" }}
-            title={`${activeCount} active agents`}
+            title={`${activeCount} active`}
           >
             {formatActiveCount(activeCount)}
           </span>

apps/code/src/renderer/features/sidebar/components/items/SkillsItem.tsx

@@ -1,4 +1,4 @@
-import { Lightning } from "@phosphor-icons/react";
+import { Lightbulb } from "@phosphor-icons/react";
 import { SidebarItem } from "../SidebarItem";
 
 interface SkillsItemProps {
@@ -10,7 +10,7 @@ export function SkillsItem({ isActive, onClick }: SkillsItemProps) {
   return (
     <SidebarItem
       depth={0}
-      icon={<Lightning size={16} weight={isActive ? "fill" : "regular"} />}
+      icon={<Lightbulb size={16} weight={isActive ? "fill" : "regular"} />}
       label="Skills"
       isActive={isActive}
       onClick={onClick}

apps/code/src/renderer/features/skills/components/SkillsView.tsx

@@ -1,6 +1,6 @@
 import { ResizableSidebar } from "@components/ResizableSidebar";
 import { useSetHeaderContent } from "@hooks/useSetHeaderContent";
-import { Lightning } from "@phosphor-icons/react";
+import { Lightbulb } from "@phosphor-icons/react";
 import { Box, Flex, ScrollArea, Text } from "@radix-ui/themes";
 import { useTRPC } from "@renderer/trpc";
 import type { SkillInfo, SkillSource } from "@shared/types/skills";
@@ -60,7 +60,7 @@ export function SkillsView() {
   const headerContent = useMemo(
     () => (
       <Flex align="center" gap="2" className="w-full min-w-0">
-        <Lightning size={12} className="shrink-0 text-gray-10" />
+        <Lightbulb size={12} className="shrink-0 text-gray-10" />
         <Text
           size="1"
           weight="medium"
@@ -95,7 +95,7 @@ export function SkillsView() {
                   className="py-12"
                 >
                   <Box className="rounded-lg border border-gray-6 border-dashed p-4">
-                    <Lightning size={24} className="text-gray-8" />
+                    <Lightbulb size={24} className="text-gray-8" />
                   </Box>
                   <Text size="2" className="text-[13px] text-gray-10">
                     No skills found