WIP - Profile

public/profile-presets.json

@@ -0,0 +1,38 @@
+{
+  "Athena": {
+    "config": {
+      "decoderOptions/formatString": "{ts:timestamp:YYYY-MM-DD HH\\:mm\\:ss.SSS} {level} [{thread}] {class}.{method}({file}:{line}): {message}",
+      "decoderOptions/logLevelKey": "level",
+      "decoderOptions/timestampKey": "ts",
+      "pageSize": 10000
+    },
+    "filePathPrefixes": [
+      "/prod/logging/athena"
+    ],
+    "lastModificationTimestampMillis": 0
+  },
+  "Kafka": {
+    "config": {
+      "decoderOptions/formatString": "{d:timestamp} {p} {c}:{L} - {m}",
+      "decoderOptions/logLevelKey": "p",
+      "decoderOptions/timestampKey": "d",
+      "pageSize": 10000
+    },
+    "filePathPrefixes": [
+      "/prod/logging/up"
+    ],
+    "lastModificationTimestampMillis": 1732881600000
+  },
+  "Test": {
+    "config": {
+      "decoderOptions/formatString": "{@timestamp} {log\\.level} {message}",
+      "decoderOptions/logLevelKey": "log.level",
+      "decoderOptions/timestampKey": "@timestamp",
+      "pageSize": 10000
+    },
+    "filePathPrefixes": [
+      "/test"
+    ],
+    "lastModificationTimestampMillis": 1732881600000
+  }
+}

src/components/CentralContainer/Sidebar/SidebarTabs/CustomTabPanel.css

@@ -1,5 +1,6 @@
 .sidebar-tab-panel {
-    padding: 0.75rem;
+    padding: 0.75rem !important;
+    padding-right: 0.5rem !important;
 }
 
 .sidebar-tab-panel-container {

src/components/CentralContainer/Sidebar/SidebarTabs/SettingsTabPanel/ThemeSwitchField.tsx

@@ -0,0 +1,58 @@
+import {
+    Button,
+    FormControl,
+    FormHelperText,
+    FormLabel,
+    ToggleButtonGroup,
+    useColorScheme,
+} from "@mui/joy";
+import type {Mode} from "@mui/system/cssVars/useCurrentColorScheme";
+
+import DarkModeIcon from "@mui/icons-material/DarkMode";
+import LightModeIcon from "@mui/icons-material/LightMode";
+
+import {THEME_NAME} from "../../../../../typings/config";
+
+
+/**
+ * Renders a theme selection field in the settings form.
+ *
+ * @return
+ */
+const ThemeSwitchField = () => {
+    const {setMode, mode} = useColorScheme();
+
+    return (
+        <FormControl>
+            <FormLabel>
+                Theme override
+            </FormLabel>
+            <ToggleButtonGroup
+                size={"sm"}
+                value={mode as string}
+                onChange={(__, newValue) => {
+                    setMode(newValue as Mode);
+                }}
+            >
+                <Button
+                    startDecorator={<LightModeIcon/>}
+                    value={THEME_NAME.LIGHT}
+                >
+                    Light
+                </Button>
+                <Button
+                    startDecorator={<DarkModeIcon/>}
+                    value={THEME_NAME.DARK}
+                >
+                    Dark
+                </Button>
+            </ToggleButtonGroup>
+            <FormHelperText>
+                {`Current mode: ${mode}`}
+            </FormHelperText>
+        </FormControl>
+
+    );
+};
+
+export default ThemeSwitchField;

src/components/CentralContainer/Sidebar/SidebarTabs/SettingsTabPanel/index.css

@@ -0,0 +1,9 @@
+.settings-tab-container {
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+.settings-options-container {
+}