feat: support 0-9 column selection

src/components/Column.tsx

@@ -1,4 +1,5 @@
 import type { Component, JSX } from 'solid-js';
+import { useHandleCommand } from '@/hooks/useCommandBus';
 
 const widthToClass = {
   widest: 'w-[500px]',
@@ -9,11 +10,15 @@ const widthToClass = {
 
 type ColumnProps = {
   name: string;
+  columnIndex: number;
+  lastColumn?: true;
   width: keyof typeof widthToClass | null | undefined;
   children: JSX.Element;
 };
 
 const Column: Component<ColumnProps> = (props) => {
+  let columnDivRef: HTMLDivElement | undefined;
+
   const width = () => {
     if (props.width == null) {
       return widthToClass.medium;
@@ -21,8 +26,26 @@ const Column: Component<ColumnProps> = (props) => {
     return widthToClass[props.width];
   };
 
+  useHandleCommand(() => ({
+    commandType: 'moveToColumn',
+    handler: (command) => {
+      if (command.command === 'moveToColumn' && command.columnIndex === props.columnIndex) {
+        columnDivRef?.scrollIntoView({ behavior: 'smooth', inline: 'center' });
+      }
+    },
+  }));
+
+  useHandleCommand(() => ({
+    commandType: 'moveToLastColumn',
+    handler: (command) => {
+      if (props.lastColumn) {
+        columnDivRef?.scrollIntoView({ behavior: 'smooth' });
+      }
+    },
+  }));
+
   return (
-    <div class={`flex shrink-0 flex-col border-r ${width()}`}>
+    <div ref={columnDivRef} class={`flex shrink-0 flex-col border-r ${width()}`}>
       <div class="flex h-8 shrink-0 items-center border-b bg-white px-2">
         {/* <span class="column-icon">🏠</span> */}
         <span class="column-name">{props.name}</span>