adding and removing from actionbar

Author: karelnagel

src/components/IconButton.tsx

@@ -15,11 +15,7 @@ export const IconButton = ({ className, filled, loading, ...props }: IconButtonP
   const isLoading = !!loading || loading === 0
 
   return (
-    <ButtonBase
-      className={clsx('inline-flex items-center justify-center rounded-full before:rounded-full before:bg-background-x min-w-[32px] min-h-[32px]', className)}
-      disabled={isLoading || props.disabled}
-      {...props}
-    >
+    <ButtonBase className={clsx('inline-flex items-center justify-center rounded-full', className)} disabled={isLoading || props.disabled} {...props}>
       {isLoading ? <CircularProgress loading={loading} /> : <Icon name={props.name} filled={filled} />}
     </ButtonBase>
   )

src/components/Select.tsx

@@ -7,7 +7,9 @@ export const Select = <T extends string>({
   options,
   className,
   style,
+  disabled,
 }: {
+  disabled?: boolean
   options: { value: T; label: ReactNode; disabled?: boolean }[]
   value: T
   onChange: (v: T) => void
@@ -16,6 +18,7 @@ export const Select = <T extends string>({
 }) => {
   return (
     <select
+      disabled={disabled}
       value={value}
       onChange={(e) => onChange(e.currentTarget.value as T)}
       className={clsx(

src/components/Toggle.tsx

@@ -1,8 +1,15 @@
-export const Toggle = ({ value, onChange }: { value: boolean; onChange: (v: boolean) => void }) => {
+import clsx from 'clsx'
+
+export const Toggle = ({ value, onChange, disabled }: { disabled?: boolean; value: boolean; onChange: (v: boolean) => void }) => {
   return (
     <label className="relative">
-      <input type="checkbox" checked={value} onChange={(e) => onChange(e.target.checked)} className="sr-only peer" />
-      <div className="w-9 h-5 bg-background-alt peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-primary/50 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-primary cursor-pointer"></div>
+      <input type="checkbox" checked={value} disabled={disabled} onChange={(e) => onChange(e.target.checked)} className="sr-only peer" />
+      <div
+        className={clsx(
+          "w-9 h-5 bg-background-alt peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-primary/50 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-primary ",
+          !disabled && 'cursor-pointer',
+        )}
+      ></div>
     </label>
   )
 }

src/pages/device/ActionBar.tsx

@@ -4,8 +4,7 @@ import { z } from 'zod'
 import { useDeviceParams } from './useDeviceParams'
 import { useRouteParams } from '../../utils/hooks'
 import { IconButton } from '../../components/IconButton'
-import { DeviceParamType } from '../toggles/settings'
-import { Fragment } from 'react'
+import { DeviceParamType } from '../../utils/params'
 import { useStorage } from '../../utils/storage'
 
 const BaseAction = z.object({
@@ -22,6 +21,7 @@ const ToggleAction = BaseAction.extend({
   type: z.literal('toggle'),
   toggleKey: z.string(),
   toggleType: z.number(),
+  disabled: z.boolean().optional(),
 })
 
 const RedirectAction = BaseAction.extend({
@@ -32,22 +32,23 @@ const RedirectAction = BaseAction.extend({
 export const Action = z.discriminatedUnion('type', [NavigationAction, ToggleAction, RedirectAction])
 export type Action = z.infer<typeof Action>
 
+const BUTTON_STYLE = 'h-full w-full rounded-md border border-white/5 text-white bg-background-alt hover:bg-background'
+const SELECTED_BUTTON = 'bg-white !text-background-alt hover:!bg-white/80'
+
 const RedirectActionComponent = ({ icon, title, href }: z.infer<typeof RedirectAction>) => {
   const { dongleId } = useRouteParams()
   return (
     <IconButton
       name={icon}
       href={href.replaceAll('{dongleId}', dongleId)}
       disabled={!href.replaceAll('{dongleId}', dongleId)}
-      className={clsx(
-        'text-xl flex items-center justify-center aspect-square rounded-lg bg-background-alt transition-colors border border-white/5 text-white/80 ',
-      )}
+      className={clsx(BUTTON_STYLE)}
       title={title}
     />
   )
 }
 
-const ToggleActionComponent = ({ icon, toggleKey, toggleType, title }: z.infer<typeof ToggleAction>) => {
+const ToggleActionComponent = ({ icon, toggleKey, toggleType, title, disabled }: z.infer<typeof ToggleAction>) => {
   const { get, isLoading, isError, save } = useDeviceParams()
   if (toggleType !== DeviceParamType.Boolean) return null
   const value = get(toggleKey as any)
@@ -58,11 +59,8 @@ const ToggleActionComponent = ({ icon, toggleKey, toggleType, title }: z.infer<t
       onClick={async () => {
         await save({ [toggleKey]: isSelected ? '0' : '1' })
       }}
-      disabled={isLoading || isError || value === undefined}
-      className={clsx(
-        'flex items-center justify-center aspect-square rounded-lg  transition-colors border border-white/5  text-xl',
-        isSelected ? 'bg-white text-background-alt' : 'bg-background-alt text-white/80',
-      )}
+      disabled={isLoading || isError || value === undefined || disabled}
+      className={clsx(BUTTON_STYLE, isSelected && SELECTED_BUTTON)}
       title={title}
     />
   )
@@ -80,30 +78,36 @@ const NavigationActionComponent = ({ title, icon, location }: z.infer<typeof Nav
         await setMapboxRoute(address)
       }}
       disabled={!address || route === undefined}
-      className={clsx(
-        'flex items-center justify-center aspect-square rounded-lg transition-colors border border-white/5 text-xl',
-        isSelected ? 'bg-white text-background-alt' : 'bg-background-alt text-white/80',
-      )}
+      className={clsx(BUTTON_STYLE, isSelected && SELECTED_BUTTON)}
       title={title}
     />
   )
 }
 
 export const ActionBar = ({ className }: { className?: string }) => {
-  const [actions] = useStorage('actions')
+  const [actions, setActions] = useStorage('actions')
+
   return (
     <div
-      className={clsx('grid gap-2', className)}
+      className={clsx('flex gap-2 flex-wrap-reverse items-center justify-center', className)}
       style={{
-        gridTemplateColumns: `repeat(${actions.length}, minmax(0, 1fr))`,
+        gridTemplateColumns: `repeat(${actions.length}, minmax(2, 2fr))`,
       }}
     >
       {actions.map((props, i) => (
-        <Fragment key={i}>
+        <div key={i} className="flex text-xl relative group min-w-10 h-10 min-h-10 flex-1">
           {props.type === 'redirect' && <RedirectActionComponent {...props} />}
           {props.type === 'toggle' && <ToggleActionComponent {...props} />}
           {props.type === 'navigation' && <NavigationActionComponent {...props} />}
-        </Fragment>
+          <IconButton
+            name="close_small"
+            title="Remove"
+            onClick={() => {
+              setActions(actions.filter((_, j) => i !== j))
+            }}
+            className="hidden group-hover:flex absolute translate-x-1/2 -translate-y-1/2 top-0 right-0 border border-white/20 z-10 text-white bg-background aspect-square hover:bg-background-alt"
+          />
+        </div>
       ))}
     </div>
   )

src/pages/device/useDeviceParams.tsx

@@ -1,7 +1,7 @@
 import { create } from 'zustand'
 import { AthenaResponse, callAthena } from '../../api/athena'
 import { decode, encode, parse } from '../../utils/helpers'
-import { DeviceParamKey } from '../toggles/settings'
+import { DeviceParamKey } from '../../utils/params'
 import { toast } from 'sonner'
 
 type DeviceParamsState = {

src/pages/toggles/Models.tsx

@@ -0,0 +1,98 @@
+import { useDeviceParams } from '../device/useDeviceParams'
+import { Button } from '../../components/Button'
+import { Select } from '../../components/Select'
+import { useState } from 'react'
+import { toast } from 'sonner'
+import { parse } from '../../utils/helpers'
+
+type ModelBundle = { index: number; display_name: string; environment: string; runner?: string; generation: number }
+
+const parsePythonDict = <T,>(v: string | null | undefined): T | undefined => {
+  if (!v) return undefined
+  const json = v
+    .replace(/'/g, '"')
+    .replace(/\bTrue\b/g, 'true')
+    .replace(/\bFalse\b/g, 'false')
+    .replace(/\bNone\b/g, 'null')
+  return parse(json)
+}
+
+export const Models = () => {
+  const { dongleId, save, get, isSaving } = useDeviceParams()
+  const [selectedIndex, setSelectedIndex] = useState('')
+
+  const modelsCache = parsePythonDict<{ bundles: ModelBundle[] }>(get('ModelManager_ModelsCache'))
+  const activeBundle = parsePythonDict<{ index: number }>(get('ModelManager_ActiveBundle'))
+
+  const models = modelsCache?.bundles.toReversed() ?? []
+  const isUsingDefault = activeBundle === null
+  const activeIndex = activeBundle?.index?.toString() ?? 'default'
+  const selected = selectedIndex || activeIndex
+  const selectedModel = selected === 'default' ? null : models.find((m) => m.index.toString() === selected)
+  const isAlreadyActive = selected === activeIndex
+
+  const handleSend = async () => {
+    if (isAlreadyActive || !dongleId) return
+    const res = await save(selected === 'default' ? { ModelManager_ActiveBundle: null } : { ModelManager_DownloadIndex: selectedModel!.index.toString() })
+    if (res?.error) toast.error(res.error.data?.message ?? res.error.message)
+  }
+
+  if (!models.length) {
+    return (
+      <div className="flex flex-col items-center justify-center py-20 gap-2 text-center">
+        <span className="text-lg font-medium">No models available</span>
+        <span className="text-sm opacity-60">Model cache not found on device</span>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex flex-col lg:flex-row gap-6">
+      <div className="flex-1 flex flex-col gap-4">
+        <div className="flex flex-col gap-2">
+          <label className="text-xs uppercase tracking-wider opacity-60">Available Models</label>
+          <Select
+            value={selected}
+            onChange={setSelectedIndex}
+            options={[{ value: 'default', label: 'Default model' }, ...models.map((m) => ({ value: m.index.toString(), label: m.display_name }))]}
+            className="w-full"
+          />
+        </div>
+        <Button onClick={handleSend} disabled={isSaving || isAlreadyActive} className="w-full">
+          {isSaving ? 'Sending...' : isAlreadyActive ? 'Already active' : 'Send to device'}
+        </Button>
+      </div>
+
+      <div className="flex-1 outline outline-white/10 rounded-lg p-5 bg-white/5">
+        <p className="text-xs uppercase tracking-wider opacity-60 mb-2">Selected Model</p>
+        {selected === 'default' ? (
+          <>
+            <h2 className="text-xl font-semibold">Default model</h2>
+            <p className="text-sm opacity-60 mt-1">Uses the model bundled with openpilot</p>
+            {isUsingDefault && <div className="mt-4 text-xs px-2 py-1 rounded-full bg-green-500/20 text-green-400 inline-block">Active</div>}
+          </>
+        ) : selectedModel ? (
+          <>
+            <h2 className="text-xl font-semibold">{selectedModel.display_name}</h2>
+            <p className="text-sm opacity-60 mt-1">{selectedModel.environment}</p>
+            <div className="mt-4 flex flex-col gap-2 text-sm">
+              {selectedModel.runner && (
+                <div className="flex justify-between">
+                  <span className="opacity-60">Runner:</span>
+                  <span>{selectedModel.runner}</span>
+                </div>
+              )}
+              <div className="flex justify-between">
+                <span className="opacity-60">Generation:</span>
+                <span>{selectedModel.generation}</span>
+              </div>
+            </div>
+            {activeBundle && activeBundle.index === selectedModel.index && (
+              <div className="mt-4 text-xs px-2 py-1 rounded-full bg-green-500/20 text-green-400 inline-block">Active</div>
+            )}
+          </>
+        ) : null}
+      </div>
+    </div>
+  )
+}