refactor: Add Redux

package.json

@@ -18,6 +18,7 @@
     "@fortawesome/free-solid-svg-icons": "^6.7.2",
     "@fortawesome/react-fontawesome": "^0.2.2",
     "@pixi/react": "8.0.0-beta.21",
+    "@reduxjs/toolkit": "^2.5.1",
     "@types/node": "^22.10.5",
     "audio-decode": "^2.2.2",
     "eventemitter3": "^5.0.1",
@@ -26,7 +27,9 @@
     "rc-dock": "^3.3.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-redux": "^9.2.0",
     "react-split-pane": "^0.1.92",
+    "redux": "^5.0.1",
     "uuid": "^11.0.4"
   },
   "devDependencies": {

src/Chart/types.ts

@@ -1,4 +1,4 @@
-import { Nullable } from '@/utils/types';
+import { BeatArray, Nullable } from '@/utils/types';
 
 export type ChartInfo = {
   name: string,
@@ -27,3 +27,48 @@ export type FloorPosition = {
   endTime: number,
   value: number,
 };
+
+export type ChartNote = {
+  id: string,
+  lineID: string,
+  type: NoteType,
+  time: BeatArray,
+  speed: number,
+  isAbove: boolean,
+  holdEndTime: BeatArray,
+};
+
+export type ChartKeyframe = {
+  id: string,
+  lineID: string,
+  time: BeatArray,
+  value: number,
+  continuous: boolean,
+  easing: number,
+};
+
+export type ChartJudglineProps = {
+  speed: ChartKeyframe[],
+  positionX: ChartKeyframe[],
+  positionY: ChartKeyframe[],
+  rotate: ChartKeyframe[],
+  alpha: ChartKeyframe[],
+};
+
+export type ChartJudgeline = {
+  id: string,
+  props: ChartJudglineProps,
+  notes: ChartNote[],
+};
+
+export type ChartBPM = {
+  id: string,
+  time: BeatArray,
+  bpm: number,
+};
+
+export type Chart = {
+  bpms: ChartBPM[],
+  lines: ChartJudgeline[],
+  notes: ChartNote[],
+};

src/ui/Timeline/LeftPanel/LeftPanel.tsx

@@ -1,28 +1,29 @@
 import React from "react";
 import TimelineList from "../List/List";
-import ChartJudgeline from "@/Chart/Judgeline";
 import LeftPanelHead from "./Head";
 import LeftPanelLine from './Line';
 import './styles.css';
+import { useAppSelector } from "@/ui/store/hooks";
+import { selectAllLinesState } from "@/ui/store/selectors/chart";
 
 export type TimelineLeftPanelProps = {
-  lines: ChartJudgeline[],
   expandedLines: number[],
   onLineExpanded: (lineIndex: number, isExpanded: boolean) => void,
 };
 
 const TimelineLeftPanel: React.FC<TimelineLeftPanelProps> = ({
-  lines,
   expandedLines,
   onLineExpanded,
 }) => {
+  const lines = useAppSelector((state) => selectAllLinesState(state));
+
   return (
     <div className="timeline-panel-left">
       <LeftPanelHead />
       <TimelineList>
         {lines.map((line, index) => { // TODO: Render line props & add right click menu
           return <LeftPanelLine
-            line={line}
+            lineID={line.id}
             name={`Line #${index}`}
             isExpanded={expandedLines.includes(index)}
             onExpandClick={(e) => onLineExpanded(index, e)}

src/ui/Timeline/LeftPanel/Line.tsx

@@ -2,31 +2,28 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React, { useCallback } from 'react';
 import TimelineList from '../List/List';
 import TimelineListItem from '../List/Item';
-import { useSelectedItem } from '@/ui/contexts/SelectedItem';
 import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
-import ChartJudgeline from '@/Chart/Judgeline';
+import { selectLine } from "@/ui/store/slices/chart";
+import { useAppDispatch } from '@/ui/store/hooks';
 
 export type TimelineLeftPanelLineProps = {
-  line: ChartJudgeline,
+  lineID: string,
   name: string,
   isExpanded: boolean,
   onExpandClick: (isExpanded: boolean) => void
 };
 
 const TimelineLeftPanelLine: React.FC<TimelineLeftPanelLineProps> = ({
-  line,
+  lineID,
   name,
   isExpanded,
   onExpandClick
 }: TimelineLeftPanelLineProps) => {
-  const [ , setSelectedItem ] = useSelectedItem()!;
+  const dispatch = useAppDispatch();
 
   const handleLineClicked = useCallback(() => {
-    setSelectedItem((oldItem) => {
-      if (oldItem === null) return { line, keyframe: null, note: null };
-      else return { ...oldItem, line };
-    });
-  }, [line, setSelectedItem]);
+    dispatch(selectLine(lineID));
+  }, [dispatch, lineID]);
 
   return <TimelineListItem className="line-detail" onClick={handleLineClicked}>
     <div className="line-info">