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>

src/hooks/useCommandBus.ts

@@ -13,7 +13,8 @@ export type MoveToNextItem = CommandBase<'moveToNextItem'>;
 export type MoveToPrevItem = CommandBase<'moveToPrevItem'>;
 export type MoveToPrevColumn = CommandBase<'moveToPrevColumn'>;
 export type MoveToNextColumn = CommandBase<'moveToNextColumn'>;
-export type MoveToColumn = CommandBase<'moveToNextColumn'> & { columnIndex: number };
+export type MoveToColumn = CommandBase<'moveToColumn'> & { columnIndex: number };
+export type MoveToLastColumn = CommandBase<'moveToLastColumn'>;
 export type Like = CommandBase<'like'>;
 export type Repost = CommandBase<'repost'>;
 export type OpenReplyForm = CommandBase<'openReplyForm'>;
@@ -28,6 +29,8 @@ export type Command =
   | MoveToPrevItem
   | MoveToPrevColumn
   | MoveToNextColumn
+  | MoveToColumn
+  | MoveToLastColumn
   | Like
   | Repost
   | OpenReplyForm

src/hooks/useShortcutKeys.ts

@@ -14,6 +14,16 @@ const defaultShortcut: Shortcut[] = [
   { key: 'j', command: { command: 'moveToNextItem' } },
   { key: 'k', command: { command: 'moveToPrevItem' } },
   { key: 'l', command: { command: 'moveToNextColumn' } },
+  { key: '1', command: { command: 'moveToColumn', columnIndex: 1 } },
+  { key: '2', command: { command: 'moveToColumn', columnIndex: 2 } },
+  { key: '3', command: { command: 'moveToColumn', columnIndex: 3 } },
+  { key: '4', command: { command: 'moveToColumn', columnIndex: 4 } },
+  { key: '5', command: { command: 'moveToColumn', columnIndex: 5 } },
+  { key: '6', command: { command: 'moveToColumn', columnIndex: 6 } },
+  { key: '7', command: { command: 'moveToColumn', columnIndex: 7 } },
+  { key: '8', command: { command: 'moveToColumn', columnIndex: 8 } },
+  { key: '9', command: { command: 'moveToColumn', columnIndex: 9 } },
+  { key: '0', command: { command: 'moveToLastColumn' } },
   { key: 'ArrowLeft', command: { command: 'moveToPrevColumn' } },
   { key: 'ArrowDown', command: { command: 'moveToNextItem' } },
   { key: 'ArrowUp', command: { command: 'moveToPrevItem' } },
@@ -52,7 +62,7 @@ const useShortcutKeys = ({ shortcuts = defaultShortcut, onShortcut }: UseShortcu
       if (shortcut == null) return;
 
       onShortcut(shortcut);
-    }, 100);
+    }, 50);
 
     window.addEventListener('keydown', handleKeydown);
 

src/pages/Home.tsx

@@ -124,21 +124,18 @@ const Home: Component = () => {
     <div class="flex h-screen w-screen flex-row overflow-hidden">
       <SideBar />
       <div class="flex h-full flex-row overflow-y-hidden overflow-x-scroll">
-        <Column name="ホーム" width="widest">
+        <Column name="ホーム" columnIndex={1} width="widest">
           <Timeline events={followingsPosts()} />
         </Column>
-        <Column name="通知" width="medium">
+        <Column name="通知" columnIndex={2} width="medium">
           <Notification events={notifications()} />
         </Column>
-        <Column name="日本サーバ" width="medium">
+        <Column name="日本サーバ" columnIndex={3} width="medium">
           <Timeline events={localTimeline()} />
         </Column>
-        <Column name="自分の投稿" width="medium">
+        <Column name="自分の投稿" colmnIndex={4} lastColumn width="medium">
           <Timeline events={myPosts()} />
         </Column>
-        <Column name="テスト" width="medium">
-          <></>
-        </Column>
       </div>
     </div>
   );