SY-4416: Separate Nav Slice and Componentry from Layout in Console (#2534)

Author: emilbon99

configs/eslint/index.ts

@@ -152,7 +152,7 @@ const config: Linter.Config[] = [
         typescript: {}, // this loads <rootdir>/tsconfig.json to eslint
         node: { extensions: [".js", ".jsx", ".ts", ".tsx"] },
       },
-      react: { version: "^18.0.0" },
+      react: { version: "19.0.0" },
     },
   },
   {

console/src/arc/Toolbar.tsx

@@ -30,6 +30,7 @@ import { EXPLORER_LAYOUT } from "@/arc/Explorer";
 import { useRename, useTask } from "@/arc/hooks";
 import { EmptyAction, Toolbar } from "@/components";
 import { CSS } from "@/css";
+import { type Service } from "@/layered/service";
 import { Layout } from "@/layout";
 
 interface EmptyContentProps {
@@ -147,7 +148,7 @@ const Actions = ({ handleCreate }: ActionsProps): ReactElement | null => {
   );
 };
 
-export const TOOLBAR: Layout.NavDrawerItem = {
+export const TOOLBAR: Service.Nav.Item = {
   key: "arc",
   icon: <Icon.Arc />,
   content: <Content />,

console/src/arc/editor/graph/Editor.tsx

@@ -22,6 +22,7 @@ import {
   setViewportMode,
 } from "@/arc/slice";
 import { ContextMenu as CMenu, Controls as BaseControls } from "@/components";
+import { Session } from "@/layered/session";
 import { Layout } from "@/layout";
 
 export const ContextMenu: Layout.ContextMenuRenderer = ({ layoutKey }) => (
@@ -65,8 +66,7 @@ export const Editor: Layout.Renderer = ({ layoutKey, visible }): ReactElement =>
     [dispatch],
   );
   const handleDoubleClick = useCallback(() => {
-    if (!state.graph.editable) return;
-    dispatch(Layout.setNavDrawerVisible({ key: "visualization", value: true }));
+    dispatch(Session.Nav.showBottom({}));
   }, [state.graph.editable, dispatch]);
 
   const renderExtraMenuItems = useCallback(

console/src/auth/LoginNav.tsx

@@ -10,20 +10,20 @@
 import { Nav, OS } from "@synnaxlabs/pluto";
 import { type ReactElement } from "react";
 
-import { Layout } from "@/layout";
+import { Service } from "@/layered/service";
 import { Version } from "@/version";
 
 export const LoginNav = (): ReactElement => {
   const os = OS.use();
   return (
-    <Layout.Nav.Bar location="top" size="6.5rem" bordered data-tauri-drag-region>
+    <Service.Nav.Bar location="top" size="6.5rem" bordered data-tauri-drag-region>
       <Nav.Bar.Start data-tauri-drag-region>
-        <Layout.Controls visibleIfOS="macOS" forceOS={os} />
+        <Service.Window.Controls visibleIfOS="macOS" forceOS={os} />
       </Nav.Bar.Start>
       <Nav.Bar.End data-tauri-drag-region justify="end">
         <Version.Badge />
-        <Layout.Controls visibleIfOS="Windows" forceOS={os} />
+        <Service.Window.Controls visibleIfOS="Windows" forceOS={os} />
       </Nav.Bar.End>
-    </Layout.Nav.Bar>
+    </Service.Nav.Bar>
   );
 };

console/src/channel/services/Toolbar.tsx

@@ -14,6 +14,7 @@ import { type ReactElement } from "react";
 import { CALCULATED_LAYOUT } from "@/channel/calculatedLayout";
 import { CREATE_LAYOUT } from "@/channel/Create";
 import { EmptyAction, Toolbar } from "@/components";
+import { type Service } from "@/layered/service";
 import { Layout } from "@/layout";
 import { Ontology } from "@/ontology";
 
@@ -67,7 +68,7 @@ const EmptyContent = (): ReactElement => {
   );
 };
 
-export const TOOLBAR: Layout.NavDrawerItem = {
+export const TOOLBAR: Service.Nav.Item = {
   key: "channel",
   icon: <Icon.Channel />,
   content: <Content />,

console/src/cluster/services/logout.ts

@@ -10,12 +10,13 @@
 import { type Dispatch } from "@reduxjs/toolkit";
 
 import { Cluster } from "@/cluster";
+import { Session } from "@/layered/session";
 import { Layout } from "@/layout";
 import { Project } from "@/project";
 
 export const logout = (dispatch: Dispatch) => {
   dispatch(Cluster.setActive(null));
   dispatch(Project.setActive(null));
   dispatch(Layout.clearProject());
-  dispatch(Layout.hideAllNavDrawers());
+  dispatch(Session.Nav.hideAll({}));
 };

console/src/hardware/device/Toolbar.tsx

@@ -12,7 +12,7 @@ import { Access, Device, Icon } from "@synnaxlabs/pluto";
 import { type ReactElement } from "react";
 
 import { Toolbar } from "@/components";
-import { type Layout } from "@/layout";
+import { type Service } from "@/layered/service";
 import { Ontology } from "@/ontology";
 
 const Content = (): ReactElement => {
@@ -27,7 +27,7 @@ const Content = (): ReactElement => {
   );
 };
 
-export const TOOLBAR: Layout.NavDrawerItem = {
+export const TOOLBAR: Service.Nav.Item = {
   key: "device",
   icon: <Icon.Device />,
   content: <Content />,

console/src/hardware/device/external.ts

@@ -14,6 +14,7 @@ import { LabJack } from "@/hardware/labjack";
 import { Modbus } from "@/hardware/modbus";
 import { NI } from "@/hardware/ni";
 import { OPC } from "@/hardware/opc";
+import { type Service } from "@/layered/service";
 import { type Layout } from "@/layout";
 import { type Palette } from "@/palette";
 
@@ -38,4 +39,4 @@ export const LAYOUTS: Record<string, Layout.Renderer> = {
   ...OPC.Device.LAYOUTS,
 };
 
-export const NAV_DRAWER_ITEMS: Layout.NavDrawerItem[] = [TOOLBAR];
+export const NAV_DRAWER_ITEMS: Service.Nav.Item[] = [TOOLBAR];

console/src/hardware/external.ts

@@ -11,6 +11,7 @@ import { type Export } from "@/export";
 import { Device } from "@/hardware/device";
 import { Task } from "@/hardware/task";
 import { type Import } from "@/import";
+import { type Service } from "@/layered/service";
 import { type Layout } from "@/layout";
 import { type Link } from "@/link";
 import { type Notifications } from "@/notifications";
@@ -37,7 +38,7 @@ export const LINK_HANDLERS: Record<string, Link.Handler> = {
   task: Task.handleLink,
 };
 
-export const NAV_DRAWER_ITEMS: Layout.NavDrawerItem[] = [
+export const NAV_DRAWER_ITEMS: Service.Nav.Item[] = [
   ...Device.NAV_DRAWER_ITEMS,
   ...Task.NAV_DRAWER_ITEMS,
 ];

console/src/hardware/task/Toolbar.tsx

@@ -39,6 +39,7 @@ import { SELECTOR_LAYOUT } from "@/hardware/task/Selector";
 import { getIcon, parseType } from "@/hardware/task/types";
 import { useRangeSnapshot } from "@/hardware/task/useRangeSnapshot";
 import { useSetDataSaving } from "@/hardware/task/useSetDataSaving";
+import { type Service } from "@/layered/service";
 import { Layout } from "@/layout";
 import { Link } from "@/link";
 import { Modals } from "@/modals";
@@ -238,7 +239,7 @@ const Content = () => {
   );
 };
 
-export const TOOLBAR_NAV_DRAWER_ITEM: Layout.NavDrawerItem = {
+export const TOOLBAR: Service.Nav.Item = {
   key: "task",
   icon: <Icon.Task />,
   content: <Content />,