feat: setup firmwre selector

- upgrade kobalte
- remove uneeded selector dependancy
- use new kobalte version to make selector for firmware

GUI/ETVR/package.json

@@ -51,15 +51,14 @@
   },
   "dependencies": {
     "@builder.io/partytown": "^0.7.3",
-    "@kobalte/core": "^0.6.0",
+    "@kobalte/core": "^0.8.2",
     "@kobalte/tailwindcss": "^0.4.1",
     "@solid-primitives/i18n": "^1.1.2",
     "@solid-primitives/map": "^0.3.1",
     "@solidjs/meta": "^0.28.0",
     "@solidjs/router": "^0.7.0",
     "@stitches/core": "^1.2.8",
     "@tailwindcss/typography": "^0.5.8",
-    "@thisbeyond/solid-select": "^0.13.0",
     "clsx": "^1.2.1",
     "localforage": "^1.10.0",
     "moment": "^2.29.3",

GUI/ETVR/src/components/FirmwareList/index.tsx

@@ -0,0 +1,55 @@
+import { Select } from '@kobalte/core'
+import { FaSolidCheck } from 'solid-icons/fa'
+import { HiSolidSelector } from 'solid-icons/hi'
+import { createSignal } from 'solid-js'
+import { firmwareAssets, firmwareVersion } from '@store/api/selectors'
+import './styles.css'
+
+export const FirmwareList = () => {
+    const defaultValue = firmwareAssets().find((item) => item.name === 'esp32AIThinker')?.name
+    const boardNames = firmwareAssets().map((item) => item.name)
+    const [value, setValue] = createSignal(defaultValue)
+
+    const handleSubmit = (e: SubmitEvent) => {
+        e.preventDefault()
+        console.log('[Firmware Select]: ', value())
+    }
+
+    return (
+        <form onSubmit={handleSubmit}>
+            <Select.Root
+                name="board-select"
+                value={value()}
+                onValueChange={setValue}
+                defaultValue={defaultValue}
+                options={boardNames}
+                placeholder="Select a board..."
+                valueComponent={(props) => props.item.rawValue}
+                itemComponent={(props) => (
+                    <Select.Item item={props.item} class="select__item">
+                        <Select.ItemLabel>{props.item.rawValue}</Select.ItemLabel>
+                        <Select.ItemIndicator class="select__item-indicator">
+                            <FaSolidCheck />
+                        </Select.ItemIndicator>
+                    </Select.Item>
+                )}>
+                <Select.Trigger class="select__trigger" aria-label="ESP_Boards">
+                    <Select.Value class="select__value" />
+                    <Select.Icon class="select__icon">
+                        <HiSolidSelector />
+                    </Select.Icon>
+                </Select.Trigger>
+                <Select.Description>Firmware - {firmwareVersion()}</Select.Description>
+                <Select.Portal>
+                    <Select.Content class="select__content">
+                        <Select.Listbox class="select__listbox" />
+                    </Select.Content>
+                </Select.Portal>
+            </Select.Root>
+            <div>
+                <button type="reset">Reset</button>
+                <button>Submit</button>
+            </div>
+        </form>
+    )
+}

GUI/ETVR/src/components/FirmwareList/styles.css

@@ -0,0 +1,145 @@
+.select__trigger {
+    display: inline-flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 200px;
+    border-radius: 6px;
+    padding: 0 10px 0 16px;
+    font-size: 16px;
+    line-height: 1;
+    height: 40px;
+    outline: none;
+    background-color: white;
+    border: 1px solid hsl(240 6% 90%);
+    color: hsl(240 4% 16%);
+    transition: border-color 250ms, color 250ms;
+}
+
+.select__trigger:hover {
+    border-color: hsl(240 5% 65%);
+}
+
+.select__trigger:focus-visible {
+    outline: 2px solid hsl(200 98% 39%);
+    outline-offset: 2px;
+}
+
+.select__trigger[data-invalid] {
+    border-color: hsl(0 72% 51%);
+    color: hsl(0 72% 51%);
+}
+
+.select__value {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+.select__value[data-placeholder-shown] {
+    color: hsl(240 4% 46%);
+}
+
+.select__icon {
+    height: 20px;
+    width: 20px;
+    flex: 0 0 20px;
+}
+
+.select__description {
+    margin-top: 8px;
+    color: hsl(240 5% 26%);
+    font-size: 12px;
+    user-select: none;
+}
+
+.select__error-message {
+    margin-top: 8px;
+    color: hsl(0 72% 51%);
+    font-size: 12px;
+    user-select: none;
+}
+
+.select__content {
+    background-color: white;
+    border-radius: 6px;
+    border: 1px solid hsl(240 6% 90%);
+    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    transform-origin: var(--kb-select-content-transform-origin);
+    animation: contentHide 250ms ease-in forwards;
+}
+
+.select__content[data-expanded] {
+    animation: contentShow 250ms ease-out;
+}
+
+.select__listbox {
+    overflow-y: auto;
+    max-height: 360px;
+    padding: 8px;
+}
+
+.select__item {
+    font-size: 16px;
+    line-height: 1;
+    color: hsl(240 4% 16%);
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 32px;
+    padding: 0 8px;
+    position: relative;
+    user-select: none;
+    outline: none;
+}
+
+.select__item[data-disabled] {
+    color: hsl(240 5% 65%);
+    opacity: 0.5;
+    pointer-events: none;
+}
+
+.select__item[data-highlighted] {
+    outline: none;
+    background-color: hsl(200 98% 39%);
+    color: white;
+}
+
+.select__section {
+    padding: 8px 0 0 8px;
+    font-size: 14px;
+    line-height: 32px;
+    color: hsl(240 4% 46%);
+}
+
+.select__item-indicator {
+    height: 20px;
+    width: 20px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+@keyframes contentShow {
+    from {
+        opacity: 0;
+        transform: translateY(-8px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes contentHide {
+    from {
+        opacity: 1;
+        transform: translateY(0);
+    }
+
+    to {
+        opacity: 0;
+        transform: translateY(-8px);
+    }
+}

GUI/ETVR/src/components/Settings/CameraSettings/index.tsx

@@ -1,6 +1,6 @@
+import { For } from 'solid-js'
 import RangeInput from '@components/RangeInput'
 import { RANGE_INPUT_FORMAT } from '@src/static/types/enums'
-import { For } from 'solid-js'
 
 export interface IProps {
     onChange: (format: RANGE_INPUT_FORMAT, value: number) => void

GUI/ETVR/src/components/Settings/index.tsx

@@ -1,11 +1,11 @@
-import icons from '@assets/images'
-import { RANGE_INPUT_FORMAT } from '@src/static/types/enums'
-import { CameraStatus } from '@store/camera/camera'
 import CameraAddress from './CameraAddress/CameraAddress'
 import CameraCalibrationSettings from './CameraCalibrationSettings'
 import CameraConnectionStatus from './CameraConnectionStatus/CameraInfo'
 import CameraSettings from './CameraSettings'
 import CamerasModal from './CamerasModal'
+import icons from '@assets/images'
+import { RANGE_INPUT_FORMAT } from '@src/static/types/enums'
+import { CameraStatus } from '@store/camera/camera'
 
 export interface IProps {
     onChange: (format: string, value: number) => void

GUI/ETVR/src/pages/appSettings/index.tsx

@@ -1,6 +1,7 @@
 import { EraseButton } from '@components/Button/EraseButton'
 import { OpenDocs } from '@components/Button/OpenDocs'
 import { WebSerial } from '@components/Button/WebSerial'
+import { FirmwareList } from '@components/FirmwareList'
 import { useDownloadFirmware } from '@hooks/api/useDownloadFirmware'
 import { handleSound } from '@hooks/app'
 
@@ -26,6 +27,7 @@ const AppSettings = () => {
             <EraseButton />
             <WebSerial />
             <OpenDocs />
+            <FirmwareList />
         </div>
     )
 }