[stu-343-edit-sequence-name-descriotion] Merge branch 'stu-343-edit-s…

…equence-name-descriotion' of https://github.com/LatentDream/flojoy-studio into stu-343-edit-sequence-name-descriotion

src/renderer/App.tsx

@@ -8,8 +8,6 @@ import ControlPanelTab from "./routes/control_panel/control-panel-view";
 import { useTheme } from "@/renderer/providers/theme-provider";
 import { Layout } from "./routes/common/Layout";
 import { Index } from "./routes/index";
-// eslint-disable-next-line no-restricted-imports
-import packageJson from "../../package.json";
 import EditorView from "./routes/editor/EditorView";
 import AuthPage from "./routes/auth/Auth";
 import { Toaster } from "sonner";
@@ -29,8 +27,8 @@ const App = () => {
     <div>
       <Toaster theme={resolvedTheme} richColors closeButton />
       <SocketReceiver />
-      <div className="titlebar flex h-12 items-center justify-center bg-background font-bold">
-        Flojoy Studio ({packageJson.version})
+      <div className="titlebar flex h-8 items-center justify-center bg-background font-bold">
+        Flojoy Studio
       </div>
       <Routes>
         <Route path="/" element={<Index />} />

src/renderer/components/auth/ProfileBox.tsx

@@ -154,7 +154,9 @@ const ProfileBox = ({
           </div>
         </div>
 
-        <p className="text-sm">{user.name}</p>
+        <p className="w-full overflow-hidden text-ellipsis text-center text-sm">
+          {user.name}
+        </p>
       </div>
       <ConfirmPrompt
         open={openConfirmPrompt}

src/renderer/routes/common/Layout.tsx

@@ -4,16 +4,13 @@ import StatusBar from "@/renderer/routes/common/StatusBar";
 
 export const HEADER_HEIGHT = 72;
 export const ACTIONS_HEIGHT = 52;
-export const BOTTOM_STATUS_BAR_HEIGHT = 64;
-
+export const BOTTOM_STATUS_BAR_HEIGHT = 53;
 export const LAYOUT_TOP_HEIGHT = HEADER_HEIGHT + ACTIONS_HEIGHT;
 
-export const LAYOUT_TOP_HEIGHT_FLOWCHART = LAYOUT_TOP_HEIGHT;
-
 export const Layout = () => {
   return (
     <div>
-      <div className="relative bg-background px-8 py-2">
+      <div className="relative bg-background px-8 py-4">
         <Header />
       </div>
       <main

src/renderer/routes/common/Sidebar/Sidebar.tsx

@@ -4,7 +4,7 @@ import { Leaf, RootNode } from "@/renderer/types/manifest";
 import SidebarNode from "./SidebarNode";
 import {
   ACTIONS_HEIGHT,
-  LAYOUT_TOP_HEIGHT_FLOWCHART,
+  LAYOUT_TOP_HEIGHT,
 } from "@/renderer/routes/common/Layout";
 import { ArrowDownWideNarrow, ArrowUpWideNarrow, XIcon } from "lucide-react";
 import { Button } from "@/renderer/components/ui/button";
@@ -86,8 +86,8 @@ const Sidebar = ({
     <div
       data-testid="sidebar"
       style={{
-        top: LAYOUT_TOP_HEIGHT_FLOWCHART + ctrlBarOffset,
-        height: `calc(100vh - ${LAYOUT_TOP_HEIGHT_FLOWCHART}px)`,
+        top: LAYOUT_TOP_HEIGHT + ctrlBarOffset,
+        height: `calc(100vh - ${LAYOUT_TOP_HEIGHT}px)`,
       }}
       className={cn(
         "absolute bottom-0 z-50 flex flex-col overflow-hidden bg-modal pl-6 pt-4 sm:w-96",

src/renderer/routes/common/StatusBar.tsx

@@ -9,12 +9,21 @@ import { cn } from "@/renderer/lib/utils";
 import { Button } from "@/renderer/components/ui/button";
 import { DownloadIcon } from "lucide-react";
 import { useSocketStore } from "@/renderer/stores/socket";
+// eslint-disable-next-line no-restricted-imports
+import packageJson from "../../../../package.json";
+import { useAppStore } from "@/renderer/stores/app";
+import { useShallow } from "zustand/react/shallow";
 
 const StatusBar = (): JSX.Element => {
   const [messages, setMessages] = useState<string[]>([]);
   const serverStatus = useSocketStore((state) => state.serverStatus);
   const [minimize, setMinimize] = useState(true);
   const lastElem = useRef<HTMLDivElement>(null);
+  const { activeTab } = useAppStore(
+    useShallow((state) => ({
+      activeTab: state.activeTab,
+    })),
+  );
 
   useEffect(() => {
     if (lastElem.current?.scrollIntoView) {
@@ -36,14 +45,14 @@ const StatusBar = (): JSX.Element => {
   return (
     <div
       className={cn(
-        "fixed bottom-0 z-30 mt-6 w-full translate-y-[calc(100%-60px)] transition-transform duration-700 ease-in-out",
+        "fixed bottom-0 z-30 w-full translate-y-[calc(100%-40px)] transition-transform duration-700 ease-in-out",
         { "translate-y-0": !minimize },
       )}
     >
       <div
         className={cn("relative flex", {
           "flex-col justify-start overflow-y-scroll ": !minimize,
-          "row items-center justify-between bg-background": minimize,
+          "row h-10 items-center justify-between bg-background": minimize,
         })}
         style={{
           maxHeight: `calc(100vh - ${
@@ -52,42 +61,65 @@ const StatusBar = (): JSX.Element => {
         }}
       >
         {minimize && (
-          <div className="flex min-w-fit items-center gap-2 ps-2">
-            {![ServerStatus.OFFLINE, ServerStatus.CONNECTING].includes(
-              serverStatus,
-            ) ? (
-              <Badge>Operational</Badge>
+          <div className="flex w-full min-w-fit items-center gap-2 ps-2">
+            <div>
+              {![ServerStatus.OFFLINE, ServerStatus.CONNECTING].includes(
+                serverStatus,
+              ) ? (
+                <Badge variant="outline">
+                  Operational - {packageJson.version}
+                </Badge>
+              ) : (
+                <Badge variant={"destructive"}>
+                  Disconnected - {packageJson.version}
+                </Badge>
+              )}
+            </div>
+            {activeTab !== "Test Sequencer" &&
+            activeTab !== "Device Manager" ? (
+              <>
+                <div
+                  data-cy="app-status"
+                  id="app-status"
+                  className="ml-2 flex text-xs"
+                >
+                  <code>{serverStatus}</code>
+                </div>
+              </>
             ) : (
-              <Badge variant={"destructive"}>Disconnected</Badge>
+              <>
+                <code className="text-xs">
+                  {messages[messages.length - 1]?.slice(0, 145)}...
+                </code>
+                <div className="grow" />
+              </>
             )}
-            <div className="text-sm">
-              {messages[messages.length - 1]?.slice(0, 145)}...
-            </div>
+            <div className="grow" />
           </div>
         )}
         <div
           className={cn(
-            "sticky right-0 top-0 z-50 flex h-full w-full justify-end p-3",
+            "sticky right-0 top-0 z-50 flex h-full w-32 justify-end",
             {
               "w-full p-0": !minimize,
             },
           )}
         >
           <Button
-            variant={"outline"}
-            className="w-29 rounded-none  "
+            variant="link"
+            className="w-29 text-xs"
             onClick={() => setMinimize((p) => !p)}
           >
             {minimize ? "Expand log" : "Collapse log"}
           </Button>
         </div>
         {!minimize && (
           <Button
-            variant={"outline"}
-            className=" fixed bottom-0 right-0 rounded-none"
+            variant="ghost"
+            className="fixed bottom-0 right-0 m-1 text-xs"
             onClick={handleDownloadLogs}
           >
-            <DownloadIcon size={19} className="mr-2" />
+            <DownloadIcon size={16} className="mr-2" />
             Download Full Logs
           </Button>
         )}

src/renderer/routes/control_panel/control-panel-view.tsx

@@ -48,7 +48,6 @@ import { toast } from "sonner";
 import { useContextMenu } from "@/renderer/hooks/useContextMenu";
 import { deepMutableClone } from "@/renderer/utils/clone";
 import { Link } from "react-router-dom";
-import { useSocketStore } from "@/renderer/stores/socket";
 import FlowControlButtons from "../flow_chart/views/ControlBar/FlowControlButtons";
 import _ from "lodash";
 import { Input } from "@/renderer/components/ui/input";
@@ -202,8 +201,6 @@ const ControlPanelView = () => {
       }
     : undefined;
 
-  const serverStatus = useSocketStore((state) => state.serverStatus);
-
   const { setProjectName, projectName, hasUnsavedChanges } = useProjectStore(
     useShallow((state) => ({
       setProjectName: state.setProjectName,
@@ -225,6 +222,29 @@ const ControlPanelView = () => {
       >
         <FlowControlButtons />
       </div>
+      <div
+        style={{
+          height: ACTIONS_HEIGHT,
+          position: "absolute",
+          top: `calc(${LAYOUT_TOP_HEIGHT + ACTIONS_HEIGHT}px + 20px)`,
+          left: "12px",
+          zIndex: 10,
+        }}
+      >
+        <div className="inline-flex items-center gap-2 px-4 pt-1">
+          <Input
+            className={
+              "h-6 w-28 overflow-hidden overflow-ellipsis whitespace-nowrap border-muted/60 text-sm focus:border-muted-foreground focus:ring-0 focus:ring-offset-0 focus-visible:ring-0 sm:w-48"
+            }
+            value={projectName}
+            onChange={(e) => setProjectName(e.target.value)}
+            placeholder="Untitled project"
+          />
+          {hasUnsavedChanges && (
+            <div className=" h-2 w-2 rounded-full bg-foreground/50" />
+          )}
+        </div>
+      </div>
       <ConfigDialog
         initialValues={widgetConfig.current}
         open={widgetConfigOpen}
@@ -236,9 +256,9 @@ const ControlPanelView = () => {
             : onWidgetConfigSubmit
         }
       />
-      <div className="mx-8 border-b" style={{ height: ACTIONS_HEIGHT }}>
+      <div className="border-b" style={{ height: ACTIONS_HEIGHT }}>
         <div className="py-1" />
-        <div className="flex">
+        <div className="mx-8 flex">
           <NewWidgetModal
             open={newWidgetModalOpen}
             setOpen={setNewWidgetModalOpen}
@@ -259,27 +279,6 @@ const ControlPanelView = () => {
           </Button>
           <ClearCanvasBtn clearCanvas={clearCanvas} />
           <div className="grow" />
-          <div className="felx inline-flex items-center gap-2 px-4 pt-1">
-            {hasUnsavedChanges && (
-              <div className=" h-2 w-2 rounded-full bg-foreground/50" />
-            )}
-            <Input
-              className={
-                "h-6 w-28 overflow-hidden overflow-ellipsis whitespace-nowrap border-muted/60 text-sm focus:border-muted-foreground focus:ring-0 focus:ring-offset-0 focus-visible:ring-0 sm:w-48"
-              }
-              value={projectName}
-              onChange={(e) => setProjectName(e.target.value)}
-              placeholder="Untitled project"
-            />
-          </div>
-          <div />
-          <div
-            data-cy="app-status"
-            id="app-status"
-            className="mr-5 flex items-center justify-center text-sm"
-          >
-            <code>{serverStatus}</code>
-          </div>
 
           <Link to="/flowchart" data-cy="script-btn">
             <Button

src/renderer/routes/flow_chart/FlowChartTabView.tsx

@@ -269,7 +269,6 @@ const FlowChartTab = () => {
   );
 
   const addBlockReady = manifest !== undefined;
-  const serverStatus = useSocketStore((state) => state.serverStatus);
 
   const { setProjectName, projectName, hasUnsavedChanges } = useProjectStore(
     useShallow((state) => ({
@@ -293,9 +292,32 @@ const FlowChartTab = () => {
         >
           <FlowControlButtons />
         </div>
-        <div className="mx-8 border-b" style={{ height: ACTIONS_HEIGHT }}>
+        <div
+          style={{
+            height: ACTIONS_HEIGHT,
+            position: "absolute",
+            top: `calc(${LAYOUT_TOP_HEIGHT + ACTIONS_HEIGHT}px + 20px)`,
+            left: "12px",
+            zIndex: 10,
+          }}
+        >
+          <div className="inline-flex items-center gap-2 px-4 pt-1">
+            <Input
+              className={
+                "h-6 w-28 overflow-hidden overflow-ellipsis whitespace-nowrap border-muted/60 text-sm focus:border-muted-foreground focus:ring-0 focus:ring-offset-0 focus-visible:ring-0 sm:w-48"
+              }
+              value={projectName}
+              onChange={(e) => setProjectName(e.target.value)}
+              placeholder="Untitled project"
+            />
+            {hasUnsavedChanges && (
+              <div className=" h-2 w-2 rounded-full bg-foreground/50" />
+            )}
+          </div>
+        </div>
+        <div className="border-b" style={{ height: ACTIONS_HEIGHT }}>
           <div className="py-1" />
-          <div className="flex">
+          <div className="mx-8 flex">
             <TooltipProvider>
               <Tooltip>
                 <TooltipTrigger asChild>
@@ -365,27 +387,6 @@ const FlowChartTab = () => {
               </>
             )}
             <div className="grow" />
-            <div className="felx inline-flex items-center gap-2 px-4 pt-1">
-              {hasUnsavedChanges && (
-                <div className=" h-2 w-2 rounded-full bg-foreground/50" />
-              )}
-              <Input
-                className={
-                  "h-6 w-28 overflow-hidden overflow-ellipsis whitespace-nowrap border-muted/60 text-sm focus:border-muted-foreground focus:ring-0 focus:ring-offset-0 focus-visible:ring-0 sm:w-48"
-                }
-                value={projectName}
-                onChange={(e) => setProjectName(e.target.value)}
-                placeholder="Untitled project"
-              />
-            </div>
-            <div />
-            <div
-              data-cy="app-status"
-              id="app-status"
-              className="mr-5 flex items-center justify-center text-sm"
-            >
-              <code>{serverStatus}</code>
-            </div>
 
             <Link to="/control" data-cy="control-btn">
               <Button
@@ -477,7 +478,7 @@ const FlowChartTab = () => {
             />
             <Controls
               fitViewOptions={{ padding: 0.8 }}
-              className="!bottom-1 !shadow-control"
+              className="!bottom-1 ml-20 !shadow-control"
             />
             {menu && (
               <BlockContextMenu

src/renderer/routes/flow_chart/views/ControlBar.tsx

@@ -24,7 +24,6 @@ import { useShallow } from "zustand/react/shallow";
 import FeedbackModal from "./FeedbackModal";
 import { SaveSequencesButton } from "@/renderer/routes/test_sequencer_panel/components/control-bar/SaveButton";
 import { ImportSequencesButton } from "@/renderer/routes/test_sequencer_panel/components/control-bar/ImportButton";
-import { Icons } from "@/renderer/assets/icons";
 
 const ControlBar = () => {
   const { activeTab } = useAppStore(
@@ -165,12 +164,17 @@ const ControlBar = () => {
 
           <MenubarMenu>
             <MenubarTrigger onClick={() => setIsFeedbackModalOpen(true)}>
-              <Icons.discord className="h-5 w-5" />
+              Discord
             </MenubarTrigger>
           </MenubarMenu>
+          <MenubarMenu></MenubarMenu>
         </Menubar>
       </div>
-      <ProfileMenu />
+      <Menubar>
+        <MenubarMenu>
+          <ProfileMenu />
+        </MenubarMenu>
+      </Menubar>
       <DarkModeToggle />
     </div>
   );