feat: Add sidebar with dataset, models and stats

app/ui/src/assets/icons/index.ts

@@ -0,0 +1,20 @@
+export { ReactComponent as BuildIcon } from './build-icon.svg';
+export { ReactComponent as CameraOff } from './camera-off.svg';
+export { ReactComponent as Camera } from './camera.svg';
+export { ReactComponent as Dataset } from './dataset.svg';
+export { ReactComponent as DoubleChevronRightIcon } from './double-chevron-right-icon.svg';
+export { ReactComponent as ErrorIcon } from './error-icon.svg';
+export { ReactComponent as FolderArrowRight } from './folder-arrow-right.svg';
+export { ReactComponent as Genicam } from './genicam.svg';
+export { ReactComponent as ImagesFolder } from './images-folder.svg';
+export { ReactComponent as IpCamera } from './ip-camera.svg';
+export { ReactComponent as LiveFeedIcon } from './live-feed-icon.svg';
+export { ReactComponent as Models } from './models.svg';
+export { ReactComponent as Mqtt } from './mqtt.svg';
+export { ReactComponent as Ros } from './ros.svg';
+export { ReactComponent as Stats } from './stats.svg';
+export { ReactComponent as SuccessIcon } from './success-icon.svg';
+export { ReactComponent as ThreeDotsCircle } from './three-dots-circle.svg';
+export { ReactComponent as VideoFile } from './video-file.svg';
+export { ReactComponent as Webcam } from './webcam.svg';
+export { ReactComponent as Webhook } from './webhook.svg';

app/ui/src/components/notification/notification.component.tsx

@@ -1,8 +1,6 @@
+import { ErrorIcon, SuccessIcon } from '@geti-inspect/icons';
 import { toast, Toaster } from 'sonner';
 
-import { ReactComponent as ErrorIcon } from '../../assets/icons/error-icon.svg';
-import { ReactComponent as SuccessIcon } from '../../assets/icons/success-icon.svg';
-
 import classes from './notification.module.scss';
 
 type NotificationType = 'success' | 'error' | 'info';

app/ui/src/features/inspect/sidebar.component.tsx

@@ -0,0 +1,69 @@
+/**
+ * Copyright (C) 2025 Intel Corporation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { useState } from 'react';
+
+import { Dataset, Models, Stats } from '@geti-inspect/icons';
+import { Flex, Grid, ToggleButton, View } from '@geti/ui';
+
+import styles from './sidebar.module.scss';
+
+const TABS = [
+    { label: 'Dataset', icon: <Dataset />, content: <>Dataset</> },
+    { label: 'Models', icon: <Models />, content: <>Models</> },
+    { label: 'Stats', icon: <Stats />, content: <>Stats</> },
+];
+
+interface TabProps {
+    tabs: (typeof TABS)[number][];
+    selectedTab: string;
+}
+
+const SidebarTabs = ({ tabs, selectedTab }: TabProps) => {
+    const [tab, setTab] = useState<string | null>(selectedTab);
+
+    const gridTemplateColumns = tab !== null ? ['clamp(size-4600, 35vw, 40rem)', 'size-600'] : ['0px', 'size-600'];
+
+    const content = tabs.find(({ label }) => label === tab)?.content;
+
+    return (
+        <Grid
+            gridArea={'sidebar'}
+            UNSAFE_className={styles.container}
+            columns={gridTemplateColumns}
+            data-expanded={tab !== null}
+        >
+            <View
+                gridColumn={'1/2'}
+                UNSAFE_className={styles.sidebarContent}
+                backgroundColor={'gray-100'}
+                paddingY={'size-200'}
+                paddingX={'size-300'}
+            >
+                {content}
+            </View>
+            <View gridColumn={'2/3'} backgroundColor={'gray-200'} padding={'size-100'}>
+                <Flex direction={'column'} height={'100%'} alignItems={'center'} gap={'size-100'}>
+                    {tabs.map(({ label, icon }) => (
+                        <ToggleButton
+                            key={label}
+                            isQuiet
+                            isSelected={label === tab}
+                            onChange={() => setTab(label === tab ? null : label)}
+                            UNSAFE_className={styles.toggleButton}
+                            aria-label={`Toggle ${label} tab`}
+                        >
+                            {icon}
+                        </ToggleButton>
+                    ))}
+                </Flex>
+            </View>
+        </Grid>
+    );
+};
+
+export const Sidebar = () => {
+    return <SidebarTabs tabs={TABS} selectedTab={TABS[0].label} />;
+};

app/ui/src/features/inspect/sidebar.module.scss

@@ -0,0 +1,50 @@
+.container {
+    height: 100%;
+    transition: grid-template-columns 0.3s ease-in-out;
+    border-top-width: var(--spectrum-alias-border-size-thin);
+    border-top-style: solid;
+    border-color: var(--spectrum-global-color-gray-50);
+}
+
+.sidebarContent {
+    overflow-x: hidden;
+    overflow-y: auto;
+    will-change: opacity, filter;
+    opacity: 0;
+    filter: blur(6px);
+    transition:
+        opacity 260ms ease-out,
+        filter 300ms ease-out;
+    border-right-width: var(--spectrum-alias-border-size-thin);
+    border-right-style: solid;
+    border-color: var(--spectrum-global-color-gray-50);
+}
+
+.container[data-expanded='true'] .sidebarContent {
+    opacity: 1;
+    filter: blur(0px);
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .sidebarContent {
+        filter: none !important;
+        opacity: 1;
+    }
+}
+
+.toggleButton {
+    border: var(--spectrum-alias-border-size-thin) solid transparent !important;
+
+    &[class*='is-hovered'] {
+        border: var(--spectrum-alias-border-size-thin) solid var(--spectrum-global-color-gray-300) !important;
+        background-color: var(--spectrum-global-color-gray-300) !important;
+        border-radius: var(--spectrum-alias-border-radius-regular) !important;
+    }
+
+    &[class*='is-selected'],
+    &[class*='is-active'] {
+        border: var(--spectrum-alias-border-size-thin) solid var(--spectrum-global-color-gray-400) !important;
+        background-color: var(--spectrum-global-color-gray-400) !important;
+        border-radius: var(--spectrum-alias-border-radius-regular) !important;
+    }
+}

app/ui/src/routes/inspect/inspect.tsx

@@ -3,14 +3,14 @@
 
 import { Grid } from '@geti/ui';
 
-import { Aside } from '../../features/inspect/aside';
+import { Sidebar } from '../../features/inspect/sidebar.component';
 import { StreamContainer } from '../../features/inspect/stream/stream-container';
 import { Toolbar } from '../../features/inspect/toolbar';
 
 export const Inspect = () => {
     return (
         <Grid
-            areas={['toolbar aside', 'canvas aside']}
+            areas={['toolbar sidebar', 'canvas sidebar']}
             UNSAFE_style={{
                 gridTemplateRows: 'var(--spectrum-global-dimension-size-800, 4rem) auto',
                 gridTemplateColumns: 'auto min-content',
@@ -21,7 +21,7 @@ export const Inspect = () => {
         >
             <Toolbar />
             <StreamContainer />
-            <Aside />
+            <Sidebar />
         </Grid>
     );
 };

app/ui/tsconfig.json

@@ -2,6 +2,10 @@
     "extends": "@geti/config/typescript",
     "include": ["src", "tests", "rsbuild.config.ts", "vitest.config.ts", "playwright.config.ts"],
     "compilerOptions": {
-        "types": ["vitest/globals"]
-    }
+        "types": ["vitest/globals"],
+        "baseUrl": ".",
+        "paths": {
+            "@geti-inspect/icons": ["./src/assets/icons"]
+        }
+    },
 }