[perf] Refactor component

app/page.tsx

@@ -1,8 +1,8 @@
 "use client"
 
-import { NumberBall } from "@/components/number-ball"
+import { Matrix } from "@/components/matrix"
 import { SettingsPanel } from "@/components/settings"
-import { ResultPanel } from "@/components/result"
+import { ResultPanel } from "@/components/group-result"
 import { SingleModePanel } from "@/components/single-panel"
 import { TitleBar } from "@/components/title-bar"
 import { useRollCallLogic } from "@/components/logic"
@@ -74,18 +74,13 @@ export default function Page() {
                 )}
               </div>
               <div className="flex-1 flex items-center justify-center overflow-auto scrollbar-thin p-3">
-                <div className="flex flex-wrap gap-2 justify-center">
-                  {Array.from({ length: typeof state.totalTasks === 'number' ? state.totalTasks : 0 }, (_, i) => i + 1).map((n) => (
-                    <NumberBall
-                      key={n}
-                      number={n}
-                      state={actions.getBallState(n)}
-                      colorIndex={actions.getBallColorIndex(n)}
-                      dimmed={actions.getBallDimmed(n)}
-                      size="xlarge"
-                    />
-                  ))}
-                </div>
+                <Matrix
+                  total={state.totalTasks}
+                  getBallState={actions.getBallState}
+                  getBallColorIndex={actions.getBallColorIndex}
+                  getBallDimmed={actions.getBallDimmed}
+                  size="xlarge"
+                />
               </div>
             </section>
 
@@ -107,16 +102,14 @@ export default function Page() {
                   </span>
                 )}
               </div>
-              <div className="flex flex-wrap gap-2 p-3 max-h-[40vh] overflow-y-auto scrollbar-thin">
-                {Array.from({ length: typeof state.totalTasks === 'number' ? state.totalTasks : 0 }, (_, i) => i + 1).map((n) => (
-                  <NumberBall 
-                    key={n} 
-                    number={n} 
-                    state={actions.getBallState(n)}
-                    colorIndex={actions.getBallColorIndex(n)}
-                    size="large"
-                  />
-                ))}
+              <div className="p-3 max-h-[40vh] overflow-y-auto scrollbar-thin">
+                <Matrix
+                  total={state.totalTasks}
+                  getBallState={actions.getBallState}
+                  getBallColorIndex={actions.getBallColorIndex}
+                  getBallDimmed={actions.getBallDimmed}
+                  size="large"
+                />
               </div>
             </section>
 
@@ -135,7 +128,7 @@ export default function Page() {
                 )}
               </div>
               <div className="flex-1 overflow-y-auto scrollbar-thin px-4 py-3">
-                <ResultPanel groups={state.groups} hasResult={state.hasResult} placeholder={state.placeholder} />
+                <ResultPanel groups={state.groups} hasResult={state.hasResult} />
               </div>
             </section>
           </>