- Add keyboard controls to resize handler

src/renderer/src/components/resizable-panel/DragHandler.tsx

@@ -10,6 +10,7 @@ export const DragHandler: Component<DragHandlerProps> = (props) => {
 
   return (
     <div
+      tabIndex={0}
       onPointerDown={(event) => {
         const target = event.target as HTMLElement;
         target.setPointerCapture(event.pointerId);
@@ -32,8 +33,32 @@ export const DragHandler: Component<DragHandlerProps> = (props) => {
           state.handlePointerEnd();
         }
       }}
+      onKeyUp={() => {
+        state.handleKeyUp();
+      }}
+      onKeyDown={(event) => {
+        state.handleKeyDown();
+
+        switch (event.key) {
+          case "ArrowLeft":
+            state.handleStep("left");
+            break;
+          case "ArrowRight":
+            state.handleStep("right");
+            break;
+          case "Home":
+            state.handleHomeKeyDown();
+            break;
+          case "End":
+            state.handleEndKeyDown();
+            break;
+
+          default:
+            break;
+        }
+      }}
       class={cn(
-        "opacity-0 hover:opacity-100 h-full w-4 translate-x-[-50%] cursor-w-resize flex flex-col items-center justify-center",
+        "opacity-0 hover:opacity-100 focus:opacity-100 h-full w-4 translate-x-[-50%] cursor-w-resize flex flex-col items-center justify-center",
         props.class,
       )}
     >

src/renderer/src/components/resizable-panel/ResizablePanel.tsx

@@ -1,4 +1,4 @@
-import { Accessor, createContext, ParentComponent, useContext } from "solid-js";
+import { Accessor, createContext, createMemo, ParentComponent, useContext } from "solid-js";
 import { DragHandler } from "./DragHandler";
 import useControllableState from "@renderer/lib/controllable-state";
 import { DOMElement } from "solid-js/jsx-runtime";
@@ -35,16 +35,16 @@ function useProviderValue(props: Props) {
     onChange: props.onValueChange,
   });
 
+  const min = createMemo(() => props.min ?? DEFAULT_MIN);
+  const max = createMemo(() => props.max ?? DEFAULT_MAX);
+
   const getValueFromPointer = (pointerPosition: number) => {
     if (!startDragValue) {
       return;
     }
 
-    const min = props.min ?? DEFAULT_MIN;
-    const max = props.max ?? DEFAULT_MAX;
-
     const value = pointerPosition - (props.offsetFromPanel ?? 0);
-    return clamp(min, max, value);
+    return clamp(min(), max(), value);
   };
 
   const handlePointerStart = (event: Event) => {
@@ -69,7 +69,40 @@ function useProviderValue(props: Props) {
     props.onValueCommit?.(value());
   };
 
-  return { value, handlePointerStart, handlePointerMove, handlePointerEnd };
+  const handleKeyDown = () => {
+    props.onValueStart?.();
+  };
+
+  const handleKeyUp = () => {
+    props.onValueCommit?.(value());
+  };
+
+  const handleStep = (direction: "left" | "right") => {
+    const stepDirection = direction === "left" ? -1 : 1;
+    const step = (max() / 100) * 5;
+    const stepInDirection = step * stepDirection;
+    setValue((value) => clamp(min(), max(), value + stepInDirection));
+  };
+
+  const handleHomeKeyDown = () => {
+    setValue(min());
+  };
+
+  const handleEndKeyDown = () => {
+    setValue(max());
+  };
+
+  return {
+    value,
+    handlePointerStart,
+    handlePointerMove,
+    handlePointerEnd,
+    handleStep,
+    handleHomeKeyDown,
+    handleEndKeyDown,
+    handleKeyDown,
+    handleKeyUp,
+  };
 }
 
 export const ResizablePanelContext = createContext<Context>();

src/renderer/src/components/song/song-item/SongItem.tsx

@@ -132,7 +132,7 @@ const SongItem: Component<SongItemProps> = (props) => {
           />
 
           <div
-            class="flex flex-col justify-center overflow-hidden rounded-md p-3 transition-transform pr-10 h-full"
+            class="flex flex-col justify-center overflow-hidden rounded-md p-3 pr-10 h-full"
             style={{
               background: backgrund(),
             }}