From 41cd98e9960dffc4f17a64662a050ab62f5ec76b Mon Sep 17 00:00:00 2001
From: Yousef Moazzam <yousef.moazzam@diamond.ac.uk>
Date: Wed, 24 Jun 2026 11:59:18 +0100
Subject: [PATCH] Add minimal session selector component

---
 frontend/unified/src/App.tsx                  |  7 +-
 .../src/components/SessionSelector.tsx        | 66 +++++++++++++++++++
 2 files changed, 68 insertions(+), 5 deletions(-)
 create mode 100644 frontend/unified/src/components/SessionSelector.tsx

diff --git a/frontend/unified/src/App.tsx b/frontend/unified/src/App.tsx
index 961117e..b5152e5 100644
--- a/frontend/unified/src/App.tsx
+++ b/frontend/unified/src/App.tsx
@@ -1,4 +1,5 @@
 import { Box, Divider, Grid2 as Grid, Stack, Typography } from "@mui/material";
+import { SessionSelector } from "./components/SessionSelector";
 
 const VERTICAL_SPACING = 2;
 const HORIZONTAL_SPACING = 2;
@@ -9,11 +10,7 @@ export const App: React.FC = () => {
       <Grid container spacing={HORIZONTAL_SPACING} columns={2}>
         <Stack spacing={VERTICAL_SPACING}>
           <Typography variant="h5">Session</Typography>
-          <PlaceholderComponent
-            placeholderText="Session selector component placeholder"
-            height={100}
-            width={500}
-          />
+          <SessionSelector />
           <Divider sx={{ width: "100%" }} />
           <Typography variant="h5">Scan</Typography>
           <PlaceholderComponent
diff --git a/frontend/unified/src/components/SessionSelector.tsx b/frontend/unified/src/components/SessionSelector.tsx
new file mode 100644
index 0000000..04404e8
--- /dev/null
+++ b/frontend/unified/src/components/SessionSelector.tsx
@@ -0,0 +1,66 @@
+import {
+  Chip,
+  TextField,
+  ToggleButton,
+  ToggleButtonGroup,
+  Stack,
+} from "@mui/material";
+import { useState } from "react";
+
+enum SessionSelectionMode {
+  Latest = "Latest",
+  Custom = "Custom",
+}
+
+export const SessionSelector: React.FC = () => {
+  // TODO: initial value based on fetching latest session associated with logged-in user
+  const [session] = useState<string>("latest-session");
+  // TODO: initial value based on the initial session
+  const [beamline] = useState<string>("Beamline: depends-on-session");
+  const [sessionSelectionMode, setSessionSelectionMode] =
+    useState<SessionSelectionMode>(SessionSelectionMode.Latest);
+  const [textInputValue, setTextInputValue] = useState<string>("");
+
+  return (
+    <Stack direction="row" spacing={2} alignItems={"center"}>
+      <ToggleButtonGroup
+        exclusive
+        value={sessionSelectionMode}
+        onChange={(_, toggleButtonLabel: string) => {
+          if (toggleButtonLabel === SessionSelectionMode.Latest) {
+            setSessionSelectionMode(SessionSelectionMode.Latest);
+          } else if (toggleButtonLabel === SessionSelectionMode.Custom) {
+            setSessionSelectionMode(SessionSelectionMode.Custom);
+          }
+        }}
+      >
+        <ToggleButton
+          sx={{ textTransform: "none" }}
+          value={SessionSelectionMode.Latest}
+        >
+          {SessionSelectionMode.Latest}
+        </ToggleButton>
+        <ToggleButton
+          sx={{ textTransform: "none" }}
+          value={SessionSelectionMode.Custom}
+        >
+          {SessionSelectionMode.Custom}
+        </ToggleButton>
+      </ToggleButtonGroup>
+      <TextField
+        variant="outlined"
+        label="Session"
+        disabled={sessionSelectionMode === SessionSelectionMode.Latest}
+        value={
+          sessionSelectionMode === SessionSelectionMode.Latest
+            ? session
+            : textInputValue
+        }
+        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+          setTextInputValue(e.currentTarget.value);
+        }}
+      />
+      <Chip label={beamline} variant="outlined" color="primary"></Chip>
+    </Stack>
+  );
+};