Added dashboard switch, not doing anything right now

client/src/assets/pages/_dashboard-page.scss

@@ -9,6 +9,13 @@
 	display: flex;
 	align-items: center;
 	margin-left: auto;
+	flex: 1;
+
+	.dashboard-switch {
+		flex: 1;
+		display: flex;
+		align-items: center;
+	}
 
 	.spacer {
 		margin: 0 1rem;

client/src/pages/dashboard/components/DashboardHeader/DashboardHeader.tsx

@@ -2,6 +2,7 @@ import { CancelIcon, FiltersIcon, PlusIcon, RefreshIcon } from '@/icons'
 import { useState } from 'preact/hooks'
 import { useDashboardContext } from '../../contexts/DashboardContext'
 import { DashboardFilters } from './components/DashboardFilters'
+import { DashboardSwitch } from './components/DashboardSwitch'
 
 type Props = {
 	onNewBox: () => void
@@ -45,6 +46,7 @@ export const DashboardHeader = ({ onNewBox, onRefresh }: Props) => {
 			)}
 			{!verticalMode && (
 				<>
+					<DashboardSwitch />
 					<button onClick={onNewBox}>Add box</button>
 					<div className="spacer" />
 					<DashboardFilters />

client/src/pages/dashboard/components/DashboardHeader/components/DashboardSwitch.tsx

@@ -0,0 +1,27 @@
+import { getDashboards } from '@/api/dashboards'
+import { PlusIcon } from '@/icons'
+import { useState } from 'preact/hooks'
+import { useQuery } from 'react-query'
+
+export const DashboardSwitch = () => {
+	const [dashboard, setDashboard] = useState<string>()
+
+	const dashboards = useQuery(['/dashboards'], getDashboards)
+
+	return (
+		<div className="dashboard-switch">
+			<select
+				onChange={(e) => setDashboard(e.currentTarget.value)}
+				value={dashboard}
+			>
+				{dashboards.data?.map((d) => (
+					<option key={d.id}>{d.id}</option>
+				))}
+			</select>
+
+			<button>
+				<PlusIcon /> Add
+			</button>
+		</div>
+	)
+}