feat: add active indicators

src/components/menu/item/item.module.css

@@ -33,4 +33,11 @@
   & .icon {
     color: var(--color-foreground);
   }
+
+  & .active {
+    width: 4px;
+    height: 4px;
+    background: var(--color-neutral-950);
+    border-radius: 50%;
+  }
 }

src/components/menu/item/item.tsx

@@ -1,6 +1,7 @@
 import styles from './item.module.css';
 
 interface ItemProps {
+  active?: boolean;
   disabled?: boolean;
   href?: string;
   icon: React.ReactElement;
@@ -9,6 +10,7 @@ interface ItemProps {
 }
 
 export function Item({
+  active,
   disabled = false,
   href,
   icon,
@@ -25,6 +27,7 @@ export function Item({
       {...(href ? { href, target: '_blank' } : {})}
     >
       <span className={styles.icon}>{icon}</span> {label}
+      {active && <div className={styles.active} />}
     </Comp>
   );
 }

src/components/menu/items/notepad.tsx

@@ -2,10 +2,21 @@ import { MdNotes } from 'react-icons/md/index';
 
 import { Item } from '../item';
 
+import { useNoteStore } from '@/store';
+
 interface NotepadProps {
   open: () => void;
 }
 
 export function Notepad({ open }: NotepadProps) {
-  return <Item icon={<MdNotes />} label="Notepad" onClick={open} />;
+  const note = useNoteStore(state => state.note);
+
+  return (
+    <Item
+      active={!!note.length}
+      icon={<MdNotes />}
+      label="Notepad"
+      onClick={open}
+    />
+  );
 }

src/components/menu/items/pomodoro.tsx

@@ -2,10 +2,21 @@ import { MdOutlineAvTimer } from 'react-icons/md/index';
 
 import { Item } from '../item';
 
+import { usePomodoroStore } from '@/store';
+
 interface PomodoroProps {
   open: () => void;
 }
 
 export function Pomodoro({ open }: PomodoroProps) {
-  return <Item icon={<MdOutlineAvTimer />} label="Pomodoro" onClick={open} />;
+  const running = usePomodoroStore(state => state.running);
+
+  return (
+    <Item
+      active={running}
+      icon={<MdOutlineAvTimer />}
+      label="Pomodoro"
+      onClick={open}
+    />
+  );
 }

src/components/toolbox/pomodoro/pomodoro.tsx

@@ -9,6 +9,7 @@ import { Button } from './button';
 import { Setting } from './setting';
 
 import { useLocalStorage } from '@/hooks/use-local-storage';
+import { usePomodoroStore } from '@/store';
 
 import styles from './pomodoro.module.css';
 
@@ -21,7 +22,10 @@ export function Pomodoro({ onClose, show }: PomodoroProps) {
   const [showSetting, setShowSetting] = useState(false);
 
   const [selectedTab, setSelectedTab] = useState('pomodoro');
-  const [running, setRunning] = useState(false);
+
+  const running = usePomodoroStore(state => state.running);
+  const setRunning = usePomodoroStore(state => state.setRunning);
+
   const [timer, setTimer] = useState(0);
   const interval = useRef<ReturnType<typeof setInterval> | null>(null);
 
@@ -76,7 +80,7 @@ export function Pomodoro({ onClose, show }: PomodoroProps) {
         [selectedTab]: prev[selectedTab] + 1,
       }));
     }
-  }, [timer, selectedTab, running]);
+  }, [timer, selectedTab, running, setRunning]);
 
   useEffect(() => {
     const time = times[selectedTab] || 10;
@@ -85,7 +89,7 @@ export function Pomodoro({ onClose, show }: PomodoroProps) {
 
     setRunning(false);
     setTimer(time);
-  }, [selectedTab, times]);
+  }, [selectedTab, times, setRunning]);
 
   const toggleRunning = () => {
     if (running) setRunning(false);

src/store/index.ts

@@ -1,3 +1,4 @@
 export { useSoundStore } from './sound';
 export { useLoadingStore } from './loading';
 export { useNoteStore } from './note';
+export { usePomodoroStore } from './pomodoro';

src/store/pomodoro/index.ts

@@ -0,0 +1,13 @@
+import { create } from 'zustand';
+
+interface PomodoroStore {
+  running: boolean;
+  setRunning: (value: boolean) => void;
+}
+
+export const usePomodoroStore = create<PomodoroStore>()(set => ({
+  running: false,
+  setRunning(value: boolean) {
+    set({ running: value });
+  },
+}));