feat(UI): Device selector

application/ui/src/components/toolbar/toolbar.component.tsx

@@ -8,6 +8,7 @@ import { CSSProperties } from 'react';
 import { useGetSources } from '@/hooks';
 import { Button, Flex, StatusLight, View } from '@geti/ui';
 
+import { DeviceSelector } from '../../features/device-selector/device-selector.component';
 import { SourcesSinks } from '../../features/sources-sinks/sources-sinks.component';
 import { useWebRTCConnection } from '../../features/stream/web-rtc/web-rtc-connection-provider';
 
@@ -86,9 +87,10 @@ export const Toolbar = () => {
         >
             <Flex justifyContent={'space-between'} alignItems={'center'} height={'100%'} width={'100%'}>
                 <StreamStatus />
-                <View marginStart={'auto'}>
+                <Flex alignItems={'center'} gap={'size-100'} marginStart={'auto'}>
+                    <DeviceSelector />
                     <SourcesSinks />
-                </View>
+                </Flex>
             </Flex>
         </View>
     );

application/ui/src/features/device-selector/api/use-get-devices.ts

@@ -0,0 +1,17 @@
+/**
+ * Copyright (C) 2025 Intel Corporation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { DeviceOption } from '../device-selector.types';
+
+// TODO: Replace with $api.useSuspenseQuery('get', '/api/v1/system/devices', ...) once the endpoint is available.
+const MOCK_DEVICES: DeviceOption[] = [
+    { id: 'cpu', name: 'CPU' },
+    { id: 'xpu', name: 'Intel GPU' },
+    { id: 'cuda', name: 'NVIDIA GPU' },
+];
+
+export const useGetDevices = (): DeviceOption[] => {
+    return MOCK_DEVICES;
+};

application/ui/src/features/device-selector/api/use-update-project-device.ts

@@ -0,0 +1,47 @@
+/**
+ * Copyright (C) 2025 Intel Corporation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { $api } from '@/api';
+import { useProjectIdentifier } from '@/hooks';
+import { getQueryKey } from '@/query-client';
+import { useQueryClient } from '@tanstack/react-query';
+
+export const useUpdateProjectDevice = () => {
+    const { projectId } = useProjectIdentifier();
+    const queryClient = useQueryClient();
+
+    // TODO: Replace with proper data type once the API is ready.
+    const mutation = $api.useMutation('put', '/api/v1/projects/{project_id}', {
+        meta: {
+            error: { notify: true },
+        },
+    });
+
+    const updateDevice = (device: string): void => {
+        mutation.mutate(
+            {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                body: { device } as any,
+                params: { path: { project_id: projectId } },
+            },
+            {
+                onSuccess: async () => {
+                    await queryClient.invalidateQueries({
+                        queryKey: getQueryKey([
+                            'get',
+                            '/api/v1/projects/{project_id}',
+                            { params: { path: { project_id: projectId } } },
+                        ]),
+                    });
+                },
+            }
+        );
+    };
+
+    return {
+        mutate: updateDevice,
+        isPending: mutation.isPending,
+    };
+};

application/ui/src/features/device-selector/device-selector.component.tsx

@@ -0,0 +1,56 @@
+/**
+ * Copyright (C) 2025 Intel Corporation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Key, Suspense } from 'react';
+
+import { useCurrentProject } from '@/hooks';
+import { Item, Loading, Picker } from '@geti/ui';
+
+import { useGetDevices } from './api/use-get-devices';
+import { useUpdateProjectDevice } from './api/use-update-project-device';
+import { DeviceOption } from './device-selector.types';
+
+const AUTO_DEVICE: DeviceOption = { id: 'auto', name: 'Auto' };
+
+export const DeviceSelector = () => {
+    return (
+        <Suspense fallback={<Loading size={'S'} />}>
+            <DeviceSelectorContent />
+        </Suspense>
+    );
+};
+
+const DeviceSelectorContent = () => {
+    const devices = useGetDevices();
+    const { data: _project } = useCurrentProject();
+    const updateDevice = useUpdateProjectDevice();
+
+    const items: DeviceOption[] = [AUTO_DEVICE, ...devices];
+
+    // TODO: Replace with actual project device when API is ready
+    const selectedDevice = 'auto';
+
+    const handleSelectionChange = (key: Key | null): void => {
+        const next = String(key);
+
+        if (key !== null && next !== selectedDevice) {
+            updateDevice.mutate(next);
+        }
+    };
+
+    return (
+        <Picker
+            label={'Device'}
+            aria-label={'device'}
+            labelPosition={'side'}
+            labelAlign={'end'}
+            selectedKey={selectedDevice}
+            onSelectionChange={handleSelectionChange}
+            items={items}
+        >
+            {(item) => <Item key={item.id}>{item.name}</Item>}
+        </Picker>
+    );
+};

application/ui/src/features/device-selector/device-selector.types.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (C) 2025 Intel Corporation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export interface DeviceOption {
+    id: string;
+    name: string;
+}