Remove old timer stuff

package.json

@@ -48,11 +48,11 @@
     "prettier": "^3.2.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-hook-form": "^7.51.4",
     "react-hotkeys-hook": "^4.5.0",
     "react-use-precision-timer": "^3.5.5",
     "tailwind-merge": "^2.3.0",
     "tailwindcss": "^3.4.3",
+    "tailwindcss-animate": "^1.0.7",
     "ts-key-enum": "^2.0.12",
     "typescript": "^5.2.2",
     "vite": "^5.2.0"

src/components/cubing/btCubeDisplay.tsx

@@ -25,6 +25,8 @@ export default function BTCubeDisplay({ className }: { className: string }) {
       cameraLatitude: 25,
       cameraLongitude: 25,
       tempoScale: 5,
+      backView: 'top-right',
+      experimentalDragInput: 'none',
       experimentalStickering: 'picture',
       experimentalSprite: cubeImage,
     });

src/components/cubing/cubeName.tsx

@@ -3,5 +3,5 @@ import { CubeStore } from '@/lib/smartCube';
 
 export default function CubeName() {
   const cube = useStore(CubeStore, state => state.cube);
-  return <>{cube ? cube?.deviceName ?? 'Connected cube' : "No cube connected"}</>;
+  return <>{cube ? cube?.deviceName ?? 'Connected' : 'Disconnected'}</>;
 }

src/components/ui/badge.tsx

@@ -0,0 +1,35 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+const badgeVariants = cva(
+  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  {
+    variants: {
+      variant: {
+        default:
+          'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
+        secondary:
+          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        destructive:
+          'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
+        outline: 'text-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  );
+}
+
+export { Badge, badgeVariants };

src/components/ui/select.tsx

@@ -1,14 +1,13 @@
-import * as React from "react"
-import * as SelectPrimitive from "@radix-ui/react-select"
-import { Check, ChevronDown, ChevronUp } from "lucide-react"
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { Check, ChevronDown, ChevronUp } from 'lucide-react';
+import * as React from 'react';
+import { cn } from '@/lib/utils';
 
-import { cn } from "@/lib/utils"
+const Select = SelectPrimitive.Root;
 
-const Select = SelectPrimitive.Root
+const SelectGroup = SelectPrimitive.Group;
 
-const SelectGroup = SelectPrimitive.Group
-
-const SelectValue = SelectPrimitive.Value
+const SelectValue = SelectPrimitive.Value;
 
 const SelectTrigger = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Trigger>,
@@ -17,7 +16,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
       className
     )}
     {...props}
@@ -27,8 +26,8 @@ const SelectTrigger = React.forwardRef<
       <ChevronDown className="h-4 w-4 opacity-50" />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
-))
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
 
 const SelectScrollUpButton = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
@@ -37,15 +36,15 @@ const SelectScrollUpButton = React.forwardRef<
   <SelectPrimitive.ScrollUpButton
     ref={ref}
     className={cn(
-      "flex cursor-default items-center justify-center py-1",
+      'flex cursor-default items-center justify-center py-1',
       className
     )}
     {...props}
   >
     <ChevronUp className="h-4 w-4" />
   </SelectPrimitive.ScrollUpButton>
-))
-SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
 
 const SelectScrollDownButton = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
@@ -54,28 +53,28 @@ const SelectScrollDownButton = React.forwardRef<
   <SelectPrimitive.ScrollDownButton
     ref={ref}
     className={cn(
-      "flex cursor-default items-center justify-center py-1",
+      'flex cursor-default items-center justify-center py-1',
       className
     )}
     {...props}
   >
     <ChevronDown className="h-4 w-4" />
   </SelectPrimitive.ScrollDownButton>
-))
+));
 SelectScrollDownButton.displayName =
-  SelectPrimitive.ScrollDownButton.displayName
+  SelectPrimitive.ScrollDownButton.displayName;
 
 const SelectContent = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ className, children, position = "popper", ...props }, ref) => (
+>(({ className, children, position = 'popper', ...props }, ref) => (
   <SelectPrimitive.Portal>
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        position === "popper" &&
-          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        position === 'popper' &&
+          'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
         className
       )}
       position={position}
@@ -84,30 +83,30 @@ const SelectContent = React.forwardRef<
       <SelectScrollUpButton />
       <SelectPrimitive.Viewport
         className={cn(
-          "p-1",
-          position === "popper" &&
-            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+          'p-1',
+          position === 'popper' &&
+            'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'
         )}
       >
         {children}
       </SelectPrimitive.Viewport>
       <SelectScrollDownButton />
     </SelectPrimitive.Content>
   </SelectPrimitive.Portal>
-))
-SelectContent.displayName = SelectPrimitive.Content.displayName
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
 
 const SelectLabel = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Label>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.Label
     ref={ref}
-    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+    className={cn('py-1.5 pl-8 pr-2 text-sm font-semibold', className)}
     {...props}
   />
-))
-SelectLabel.displayName = SelectPrimitive.Label.displayName
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
 
 const SelectItem = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Item>,
@@ -116,7 +115,7 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       className
     )}
     {...props}
@@ -129,20 +128,20 @@ const SelectItem = React.forwardRef<
 
     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
   </SelectPrimitive.Item>
-))
-SelectItem.displayName = SelectPrimitive.Item.displayName
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
 
 const SelectSeparator = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Separator>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.Separator
     ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    className={cn('-mx-1 my-1 h-px bg-muted', className)}
     {...props}
   />
-))
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 
 export {
   Select,
@@ -155,4 +154,4 @@ export {
   SelectSeparator,
   SelectScrollUpButton,
   SelectScrollDownButton,
-}
+};

src/lib/smartCube.ts

@@ -66,15 +66,15 @@ function handleCubeEvent(event: GanCubeEvent) {
 
 export const reset = async () => {
   CubeStore.setState(state => ({ ...state, lastMoves: [] }));
-  await CubeStore.state.cube!.sendCubeCommand({ type: 'REQUEST_RESET' });
+  await CubeStore.state.cube?.sendCubeCommand({ type: 'REQUEST_RESET' });
 };
 
 export const connect = async () => {
   const conn = CubeStore.state.cube;
 
   if (conn) {
-    conn.disconnect();
     CubeStore.setState(() => ({}) as CubeStoreType);
+    conn.disconnect();
   } else {
     const newConn = await connectGanCube(customMacAddressProvider);
 

src/main.tsx

@@ -7,7 +7,6 @@ import {
 import { setSearchDebug } from 'cubing/search';
 import { StrictMode } from 'react';
 import ReactDOM from 'react-dom/client';
-import { HotkeysProvider } from 'react-hotkeys-hook';
 import { ThemeProvider } from '@/components/theme-provider';
 import { Toaster } from '@/components/ui/toaster';
 import { TooltipProvider } from '@/components/ui/tooltip';
@@ -38,12 +37,10 @@ if (!rootElement.innerHTML) {
   root.render(
     <StrictMode>
       <ThemeProvider>
-        <HotkeysProvider>
-          <TooltipProvider>
-            <RouterProvider router={router} />
-            <Toaster />
-          </TooltipProvider>
-        </HotkeysProvider>
+        <TooltipProvider>
+          <RouterProvider router={router} />
+          <Toaster />
+        </TooltipProvider>
       </ThemeProvider>
     </StrictMode>
   );

src/newTimer/actionBar.tsx

@@ -1,20 +1,45 @@
-import { useTheme } from "@/components/theme-provider";
-import { Button, ButtonProps } from "@/components/ui/button";
-import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { Link } from "@tanstack/react-router";
-import { ArrowLeft, BluetoothConnected, Moon, RotateCcw, Sun } from "lucide-react";
-import { forwardRef } from "react";
+import { Link } from '@tanstack/react-router';
+import { useStore } from '@tanstack/react-store';
+import {
+  ArrowLeft,
+  Bluetooth,
+  BluetoothConnected,
+  Moon,
+  RotateCcw,
+  Sun,
+} from 'lucide-react';
+import { forwardRef } from 'react';
+import CubeName from '@/components/cubing/cubeName';
+import { useTheme } from '@/components/theme-provider';
+import { Button, ButtonProps } from '@/components/ui/button';
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { CubeStore, connect, reset } from '@/lib/smartCube';
 
 const TopButton = forwardRef<HTMLButtonElement, ButtonProps>(
   ({ ...props }, ref) => (
     <Button
       ref={ref}
       variant="ghost"
       size={null}
-      className={"h-full aspect-square p-1" + (props.className || '')}
+      className={'h-full aspect-square p-1' + (props.className || '')}
+      onClick={e => {
+        e.currentTarget.blur();
+        if (props.onClick) {
+          props.onClick(e);
+        }
+      }}
       {...props}
     />
-));
+  )
+);
 
 function ThemeToggle() {
   const { theme, setTheme } = useTheme();
@@ -38,7 +63,7 @@ function ThemeToggle() {
 
 export function SessionSelector() {
   return (
-    <Select>
+    <Select value="3bld" disabled>
       <SelectTrigger className="max-w-40 h-full py-0 pointer-events-auto">
         <SelectValue placeholder="Sessions" />
       </SelectTrigger>
@@ -51,10 +76,12 @@ export function SessionSelector() {
         </SelectGroup>
       </SelectContent>
     </Select>
-  )
+  );
 }
 
 export function ActionBar() {
+  const cube = useStore(CubeStore, state => state.cube);
+
   return (
     <div className="bg-card rounded-lg border w-full h-12 p-1 relative">
       <div className="h-full flex justify-between">
@@ -71,13 +98,22 @@ export function ActionBar() {
             variant="ghost"
             size={null}
             className="h-full aspect-square p-2 sm:aspect-auto"
+            onClick={e => {
+              e.currentTarget.blur();
+              connect();
+            }}
           >
-            <BluetoothConnected className="sm:mr-2 h-4 w-4" />
-            <span className="hidden sm:inline">GANicV2S_8101</span>
+            {cube && <BluetoothConnected className="sm:mr-2 h-4 w-4" />}
+            {!cube && <Bluetooth className="sm:mr-2 h-4 w-4" />}
+            <span className="hidden sm:inline">
+              <CubeName />
+            </span>
           </Button>
-          <TopButton>
-            <RotateCcw className="h-4 w-4" />
-          </TopButton>
+          {cube && (
+            <TopButton onClick={() => reset()}>
+              <RotateCcw className="h-4 w-4" />
+            </TopButton>
+          )}
         </div>
       </div>
       <div className="h-full w-full justify-center absolute top-0 left-0 flex p-1.5 pointer-events-none">