feat(desktop): enhanced workspace list and doc pages

desktop/src-tauri/capabilities/default.json

@@ -2,9 +2,7 @@
   "$schema": "../gen/schemas/desktop-schema.json",
   "identifier": "default",
   "description": "Capability for the main window",
-  "windows": [
-    "main"
-  ],
+  "windows": ["main"],
   "permissions": [
     "core:default",
     "shell:default",
@@ -19,4 +17,4 @@
     },
     "log:default"
   ]
-}
+}

desktop/src-tauri/tauri.conf.json

@@ -14,7 +14,6 @@
       {
         "title": "flow desktop",
         "hiddenTitle": true,
-        "titleBarStyle": "Transparent",
         "width": 1000,
         "height": 800
       }

desktop/src/App.css

@@ -1,19 +1,9 @@
-.logo.vite:hover {
-  filter: drop-shadow(0 0 2em #747bff);
-}
-
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafb);
-}
 :root {
   font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
   font-size: 16px;
   line-height: 24px;
   font-weight: 400;
 
-  color: #0f0f0f;
-  background-color: #f6f6f6;
-
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
@@ -40,97 +30,3 @@ body {
   width: 100vw;
   overflow: hidden;
 }
-
-.container {
-  margin: 0;
-  padding-top: 10vh;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: 0.75s;
-}
-
-.logo.tauri:hover {
-  filter: drop-shadow(0 0 2em #24c8db);
-}
-
-.row {
-  display: flex;
-  justify-content: center;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-
-a:hover {
-  color: #535bf2;
-}
-
-h1 {
-  text-align: center;
-}
-
-input,
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  color: #0f0f0f;
-  background-color: #ffffff;
-  transition: border-color 0.25s;
-  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
-}
-
-button {
-  cursor: pointer;
-}
-
-button:hover {
-  border-color: #396cd8;
-}
-button:active {
-  border-color: #396cd8;
-  background-color: #e8e8e8;
-}
-
-input,
-button {
-  outline: none;
-}
-
-#greet-input {
-  margin-right: 5px;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    color: #f6f6f6;
-    background-color: #2f2f2f;
-  }
-
-  a:hover {
-    color: #24c8db;
-  }
-
-  input,
-  button {
-    color: #ffffff;
-    background-color: #0f0f0f98;
-  }
-  button:active {
-    background-color: #0f0f0f69;
-  }
-}

desktop/src/App.tsx

@@ -5,8 +5,8 @@ import { AppProvider } from "./hooks/useAppContext.tsx";
 import { NotifierProvider } from "./hooks/useNotifier";
 import { AppShell } from "./layout";
 import { PageWrapper } from "./components/PageWrapper.tsx";
-import { Settings, Welcome, Data } from "./pages";
-import { WorkspaceRoute } from "./pages/Workspace/WorkspaceRoute.tsx";
+import {Settings, Welcome, Data, Workspaces} from "./pages";
+import { Workspace } from "./pages/Workspace/Workspace.tsx";
 import { ExecutableRoute } from "./pages/Executable/ExecutableRoute.tsx";
 import { Text } from "@mantine/core";
 
@@ -31,9 +31,13 @@ function App() {
                   <Welcome />
                 </PageWrapper>
               </Route>
+              <Route
+                  path="/workspaces"
+                  component={Workspaces}
+              />
               <Route
                 path="/workspace/:workspaceName"
-                component={WorkspaceRoute}
+                component={Workspace}
               />
               <Route
                 path="/executable/:executableId"

desktop/src/components/CodeHighlighter/CodeHighlighter.tsx

@@ -2,13 +2,11 @@ import { Box, Code } from "@mantine/core";
 import Prism from "prismjs";
 import "prismjs/components/prism-bash";
 import "prismjs/components/prism-shell-session";
-import "prismjs/themes/prism-dark.css";
-import "prismjs/themes/prism.css";
 import { useEffect, useRef } from "react";
 import { useNotifier } from "../../hooks/useNotifier";
 import { ThemeName } from "../../theme/types";
 import { NotificationType } from "../../types/notification";
-import { getConfigForTheme } from "./config";
+import { getConfigForTheme, themeMapper } from "./config";
 
 interface CodeHighlighterProps {
   children: string;
@@ -31,6 +29,19 @@ export function CodeHighlighter({
     copyButton !== undefined ? copyButton : config.defaultCopyButton;
   const language = "bash";
 
+  // Dynamically load Prism theme CSS based on app theme via themeMapper
+  useEffect(() => {
+    const loadTheme = async () => {
+      const variant = theme ? themeMapper[theme] ?? "default" : "default";
+      if (variant === "dark") {
+        await import("prismjs/themes/prism-dark.css");
+      } else {
+        await import("prismjs/themes/prism.css");
+      }
+    };
+    void loadTheme();
+  }, [theme]);
+
   useEffect(() => {
     if (codeRef.current) {
       Prism.highlightElement(codeRef.current);
@@ -63,7 +74,6 @@ export function CodeHighlighter({
         ref={containerRef}
         pos="relative"
         style={{
-          borderRadius: config.styling.borderRadius,
           overflow: "hidden",
         }}
       >
@@ -88,7 +98,7 @@ export function CodeHighlighter({
             margin: 0,
             padding: config.styling.padding,
             background: config.styling.backgroundColor,
-            borderRadius: config.styling.borderRadius,
+            border: "none",
             overflow: "auto",
             fontSize: config.styling.fontSize,
             lineHeight: config.styling.lineHeight,

desktop/src/components/CodeHighlighter/config.ts

@@ -4,15 +4,11 @@
 import { ThemeName } from "../../theme/types";
 
 export interface CodeHighlighterConfig {
-  // Whether to show copy button by default
   defaultCopyButton: boolean;
 
-  // Default theme for syntax highlighting
   defaultTheme: string;
 
-  // Custom styling options
   styling: {
-    borderRadius: string;
     padding: string;
     fontSize: string;
     lineHeight: string;
@@ -41,11 +37,10 @@ export const defaultConfig: CodeHighlighterConfig = {
   defaultTheme: "default",
 
   styling: {
-    borderRadius: "var(--mantine-radius-sm)",
     padding: "var(--mantine-spacing-md)",
     fontSize: "var(--mantine-font-size-sm)",
     lineHeight: "1.5",
-    backgroundColor: "var(--mantine-color-dark-7)",
+    backgroundColor: "var(--mantine-color-gray-7)",
     copyButtonStyle: {
       background: "rgba(255, 255, 255, 0.1)",
       border: "1px solid rgba(255, 255, 255, 0.2)",
@@ -62,7 +57,7 @@ export const darkThemeConfig: CodeHighlighterConfig = {
   defaultTheme: "dark",
   styling: {
     ...defaultConfig.styling,
-    backgroundColor: "var(--mantine-color-dark-8)",
+    backgroundColor: "var(--mantine-color-appshell-0)",
     copyButtonStyle: {
       ...defaultConfig.styling.copyButtonStyle,
       background: "rgba(255, 255, 255, 0.15)",
@@ -101,5 +96,4 @@ export function getConfigForTheme(theme?: ThemeName): CodeHighlighterConfig {
   }
 }
 
-// Export the current configuration (you can change this to switch themes)
 export const currentConfig = defaultConfig;