New dashboard design concept

.env.local

@@ -5,7 +5,7 @@ SAGITTARIUS_GRAPHQL_URL=http://localhost:80/graphql
 SAGITTARIUS_CABLE_URL=http://localhost:80/cable
 
 NEXT_PUBLIC_SCULPTOR_VERSION=0.0.0
-NEXT_PUBLIC_PICTOR_VERSION=0.11.1
+NEXT_PUBLIC_PICTOR_VERSION=0.14.0
 NEXT_PUBLIC_ALLOWED_REDIRECT_DOMAINS=*.code0.tech,*.codezero.build
 
 NEXT_PUBLIC_OTEL_SERVICE_NAME=#"sculptor-client"

next.config.ts

@@ -38,7 +38,10 @@ const nextConfig: NextConfig = {
         ]
     },
     reactStrictMode: true,
-    reactCompiler: true,
+    // Enable React Compiler in production builds only. In dev it forces a
+    // per-file Babel pass (the compiler is a Babel plugin) which is the
+    // dominant cost of Turbopack dev compile time and memory here.
+    reactCompiler: process.env.NODE_ENV === "production",
     turbopack: {
         resolveAlias: {
             "@edition": path.resolve(__dirname, `src/packages/${EDITION}/src`),

package.json

@@ -15,8 +15,8 @@
   },
   "dependencies": {
     "@apollo/client": "^4.0.9",
-    "@code0-tech/pictor": "^0.11.1",
-    "@code0-tech/triangulum": "^0.27.0",
+    "@code0-tech/pictor": "^0.14.0",
+    "@code0-tech/triangulum": "^0.27.1",
     "@codemirror/lang-javascript": "^6.2.5",
     "@codemirror/lint": "^6.9.5",
     "@icons-pack/react-simple-icons": "^13.13.0",
@@ -34,6 +34,7 @@
     "@uidotdev/usehooks": "^2.4.1",
     "@vercel/otel": "^2.1.1",
     "@xyflow/react": "^12.11.0",
+    "border-beam": "^1.3.0",
     "date-fns": "^4.1.0",
     "graphql": "^16.12.0",
     "graphql-ruby-client": "^1.15.1",
@@ -45,6 +46,8 @@
     "react": "19.2.6",
     "react-dom": "19.2.6",
     "react-hotkeys-hook": "^5.2.4",
+    "react-markdown": "^10.1.0",
+    "remark-gfm": "^4.0.1",
     "rxjs": "^7.8.2",
     "sass": "^1.93.3",
     "use-debounce": "^10.1.1"

src/app/(dashboard)/@modal/(.)namespace/[namespaceId]/members/add/page.tsx

@@ -0,0 +1,3 @@
+import {MemberAddPage} from "@edition/member/pages/MemberAddPage";
+
+export default MemberAddPage

src/app/(dashboard)/@modal/(.)namespace/[namespaceId]/project/[projectId]/module/[moduleId]/page.tsx

@@ -0,0 +1,3 @@
+import {ModuleConfigurationPage} from "@ce-internal/module/pages/ModuleConfigurationPage";
+
+export default ModuleConfigurationPage

src/app/(dashboard)/@modal/(.)namespace/[namespaceId]/project/[projectId]/settings/page.tsx

@@ -0,0 +1,3 @@
+import {ProjectSettingsPage} from "@edition/project/pages/ProjectSettingsPage";
+
+export default ProjectSettingsPage

src/app/(dashboard)/@modal/(.)namespace/[namespaceId]/project/create/page.tsx

@@ -0,0 +1,3 @@
+import {NamespaceProjectsCreatePage} from "@edition/namespace/pages/NamespaceProjectsCreatePage";
+
+export default NamespaceProjectsCreatePage

src/app/(dashboard)/@modal/(.)namespace/[namespaceId]/roles/[roleId]/settings/page.tsx

@@ -0,0 +1,3 @@
+import {RoleSettingsPage} from "@edition/role/pages/RoleSettingsPage";
+
+export default RoleSettingsPage

src/app/(dashboard)/@modal/(.)namespace/[namespaceId]/roles/create/page.tsx

@@ -0,0 +1,3 @@
+import {RoleCreatePage} from "@edition/role/pages/RoleCreatePage";
+
+export default RoleCreatePage

src/app/(dashboard)/@modal/(.)namespace/[namespaceId]/runtimes/[runtimeId]/settings/page.tsx

@@ -0,0 +1,3 @@
+import {RuntimeSettingsPage} from "@edition/runtime/pages/RuntimeSettingsPage";
+
+export default RuntimeSettingsPage

src/app/(dashboard)/@modal/(.)namespace/[namespaceId]/runtimes/create/page.tsx

@@ -0,0 +1,3 @@
+import {RuntimeCreatePage} from "@edition/runtime/pages/RuntimeCreatePage";
+
+export default RuntimeCreatePage

src/app/(dashboard)/@modal/(.)namespace/[namespaceId]/settings/page.tsx

@@ -0,0 +1,3 @@
+import {NamespaceSettingsPage} from "@edition/namespace/pages/NamespaceSettingsPage";
+
+export default NamespaceSettingsPage

src/app/(dashboard)/@modal/(.)runtimes/[runtimeId]/settings/page.tsx

@@ -0,0 +1,3 @@
+import {RuntimeSettingsPage} from "@edition/runtime/pages/RuntimeSettingsPage";
+
+export default RuntimeSettingsPage

src/app/(dashboard)/@modal/(.)runtimes/create/page.tsx

@@ -0,0 +1,3 @@
+import {RuntimeCreatePage} from "@edition/runtime/pages/RuntimeCreatePage";
+
+export default RuntimeCreatePage

src/app/(dashboard)/@modal/(.)settings/page.tsx

@@ -0,0 +1,3 @@
+import {ApplicationSettingsPage} from "@edition/application/pages/ApplicationSettingsPage";
+
+export default ApplicationSettingsPage

src/app/(dashboard)/@modal/(.)users/invite/page.tsx

@@ -0,0 +1,3 @@
+import {UserInvitePage} from "@edition/user/pages/UserInvitePage";
+
+export default UserInvitePage

src/app/(dashboard)/@modal/(.)workspaces/create/page.tsx

@@ -0,0 +1,3 @@
+import {OrganizationCreatePage} from "@edition/organization/pages/OrganizationCreatePage";
+
+export default OrganizationCreatePage

src/app/(dashboard)/@sidebar/default.tsx

@@ -0,0 +1,3 @@
+export default () => {
+    return null
+}

src/app/(dashboard)/@sidebar/namespace/[namespaceId]/page.tsx

@@ -0,0 +1,17 @@
+"use client"
+
+import {ProjectListView} from "@edition/project/views/ProjectListView";
+import {FlowRecentListView} from "@edition/flow/views/FlowRecentListView";
+import {NamespaceMenuView} from "@edition/namespace/views/NamespaceMenuView";
+import {Flex} from "@code0-tech/pictor";
+
+export default () => {
+    return <Flex h={"100%"} pt={0.5} style={{boxSizing: "border-box", flexDirection: 'column', gap: "1.3rem"}}>
+        <ProjectListView/>
+        <div style={{borderTop: "1px dashed rgba(255,255,255, .1)"}}/>
+        <FlowRecentListView/>
+        <div style={{marginTop: "auto"}}>
+            <NamespaceMenuView/>
+        </div>
+    </Flex>
+}

src/app/(dashboard)/@sidebar/namespace/[namespaceId]/project/[projectId]/default.tsx

@@ -0,0 +1,14 @@
+"use client"
+
+import {Flex} from "@code0-tech/pictor";
+import {FlowFolderView} from "@edition/flow/views/FlowFolderView";
+import {ProjectMenuView} from "@edition/project/views/ProjectMenuView";
+
+export default () => {
+    return <Flex h={"100%"} style={{boxSizing: "border-box", flexDirection: 'column'}}>
+        <FlowFolderView/>
+        <div style={{marginTop: "auto"}}>
+            <ProjectMenuView/>
+        </div>
+    </Flex>
+}

src/app/(dashboard)/@sidebar/page.tsx

@@ -0,0 +1,13 @@
+"use client"
+
+import {Flex} from "@code0-tech/pictor";
+import {NamespaceListView} from "@edition/namespace/views/NamespaceListView";
+import {ProjectRecentListView} from "@edition/project/views/ProjectRecentListView";
+
+export default () => {
+    return <Flex h={"100%"} pt={0.5} style={{boxSizing: "border-box", flexDirection: 'column', gap: "1.3rem"}}>
+        <NamespaceListView/>
+        <div style={{borderTop: "1px dashed rgba(255,255,255, .1)"}}/>
+        <ProjectRecentListView/>
+    </Flex>
+}

src/app/(dashboard)/@sidebar/users/[userId]/page.tsx

@@ -0,0 +1,5 @@
+"use client"
+
+import {UserProfileView} from "@edition/user/views/UserProfileView";
+
+export default UserProfileView

src/app/(dashboard)/layout.tsx

@@ -2,96 +2,109 @@
 
 import React from "react";
 import {useApolloClient} from "@apollo/client/react";
-import {AuroraBackground, ContextStoreProvider, Flex} from "@code0-tech/pictor";
+import {ContextStoreProvider} from "@code0-tech/pictor";
 import {UserService} from "@edition/user/services/User.service";
 import {GraphqlClient} from "@core/util/graphql-client";
-import {usePathname} from "next/navigation";
+import {useParams, usePathname} from "next/navigation";
 import {OrganizationService} from "@edition/organization/services/Organization.service";
 import {MemberService} from "@edition/member/services/Member.service";
 import {NamespaceService} from "@edition/namespace/services/Namespace.service";
 import {usePersistentReactiveArrayService} from "@/hooks/usePersistentReactiveArrayService";
 import {RuntimeService} from "@edition/runtime/services/Runtime.service";
 import {ProjectService} from "@edition/project/services/Project.service";
 import {RoleService} from "@edition/role/services/Role.service";
-import Image from "next/image";
 import {Application, ApplicationService} from "@edition/application/services/Application.service";
 import {useUserSession} from "@edition/user/hooks/User.session.hook";
 import {OrganizationView} from "@edition/organization/services/Organization.view";
 import {RoleView} from "@edition/role/services/Role.view";
 import {Layout} from "@code0-tech/pictor/dist/components/layout/Layout";
-import {Namespace, NamespaceMember, NamespaceProject, Runtime, User} from "@code0-tech/sagittarius-graphql-types";
+import {
+    DataType,
+    Flow, FlowType,
+    FunctionDefinition,
+    Namespace,
+    NamespaceMember,
+    NamespaceProject,
+    Runtime, RuntimeModule,
+    User
+} from "@code0-tech/sagittarius-graphql-types";
 import {ApplicationMiddlewareComponent} from "@edition/application/components/ApplicationMiddlewareComponent";
+import {FullScreen} from "@code0-tech/pictor/dist/components/fullscreen/FullScreen";
+import {ApplicationNavigationView} from "@edition/application/views/ApplicationNavigationView";
+import {FlowService} from "@edition/flow/services/Flow.service";
+import {FunctionService} from "@edition/function/services/Function.service";
+import {DatatypeService} from "@edition/datatype/services/Datatype.service";
+import {FlowTypeService} from "@edition/flowtype/services/FlowType.service";
+import {ModuleService} from "@edition/module/services/Module.service";
+import {AIService, Model} from "@edition/ai/services/AI.service";
 
 interface ApplicationLayoutProps {
     children: React.ReactNode
-    bar: React.ReactNode
-    tab: React.ReactNode
+    sidebar: React.ReactNode
     modal: React.ReactNode
 }
 
-const ApplicationLayout: React.FC<ApplicationLayoutProps> = ({children, bar, tab, modal}) => {
+const ApplicationLayout: React.FC<ApplicationLayoutProps> = ({children, sidebar, modal}) => {
 
     const client = useApolloClient()
     const pathname = usePathname()
+    const params = useParams()
     const currentSession = useUserSession()
 
     const graphqlClient = React.useMemo(() => new GraphqlClient(client), [client])
 
+    const namespaceIndex = params.namespaceId as any as number
+    const projectIndex = params.projectId as any as number
+    const flowIndex = params.flowId as any as number
+    const namespaceId: Namespace['id'] = `gid://sagittarius/Namespace/${namespaceIndex}`
+    const projectId: NamespaceProject['id'] = `gid://sagittarius/NamespaceProject/${projectIndex}`
+
+    const application = usePersistentReactiveArrayService<Application, ApplicationService>(`dashboard::application::${currentSession?.id}`, (store) => new ApplicationService(graphqlClient, store))
     const user = usePersistentReactiveArrayService<User, UserService>(`dashboard::users::${currentSession?.id}`, (store) => new UserService(graphqlClient, store))
     const organization = usePersistentReactiveArrayService<OrganizationView, OrganizationService>(`dashboard::organizations::${currentSession?.id}`, (store) => new OrganizationService(graphqlClient, store))
     const member = usePersistentReactiveArrayService<NamespaceMember, MemberService>(`dashboard::members::${currentSession?.id}`, (store) => new MemberService(graphqlClient, store))
     const namespace = usePersistentReactiveArrayService<Namespace, NamespaceService>(`dashboard::namespaces::${currentSession?.id}`, (store) => new NamespaceService(graphqlClient, store))
     const runtime = usePersistentReactiveArrayService<Runtime, RuntimeService>(`dashboard::global_runtimes::${currentSession?.id}`, (store) => new RuntimeService(graphqlClient, store))
     const project = usePersistentReactiveArrayService<NamespaceProject, ProjectService>(`dashboard::projects::${currentSession?.id}`, (store) => new ProjectService(graphqlClient, store))
     const role = usePersistentReactiveArrayService<RoleView, RoleService>(`dashboard::roles::${currentSession?.id}`, (store) => new RoleService(graphqlClient, store))
-    const application = usePersistentReactiveArrayService<Application, ApplicationService>(`dashboard::application::${currentSession?.id}`, (store) => new ApplicationService(graphqlClient, store))
+    const flow = usePersistentReactiveArrayService<Flow, FlowService>(`dashboard::flows::${currentSession?.id}`, (store) => new FlowService(graphqlClient, store))
+    const functions = usePersistentReactiveArrayService<FunctionDefinition, FunctionService>(`dashboard::functions::${currentSession?.id}`, (store) => new FunctionService(graphqlClient, store))
+    const datatype = usePersistentReactiveArrayService<DataType, DatatypeService>(`dashboard::datatypes::${currentSession?.id}`, (store) => new DatatypeService(graphqlClient, store))
+    const flowtype = usePersistentReactiveArrayService<FlowType, FlowTypeService>(`dashboard::flowtypes::${currentSession?.id}`, (store) => new FlowTypeService(graphqlClient, store))
+    const module = usePersistentReactiveArrayService<RuntimeModule, ModuleService>(`dashboard::modules::${currentSession?.id}`, (store) => new ModuleService(graphqlClient, store))
+    const ai = usePersistentReactiveArrayService<Model, AIService>(`dashboard::ai::${currentSession?.id}`, (store) => new AIService(graphqlClient, store))
+
+    const runtimeId = React.useMemo(() => project[1].getById(projectId, {namespaceId})?.primaryRuntime?.id, [projectId, project[0], namespaceId])
+
+    React.useEffect(() => {
+        if (!currentSession || !namespaceId || !projectId) return
+
+        flow[1].values({namespaceId, projectId})
+        functions[1].values({namespaceId, projectId, runtimeId})
+        datatype[1].values({namespaceId, projectId, runtimeId})
+        flowtype[1].values({namespaceId, projectId, runtimeId})
+        module[1].values({namespaceId, projectId, runtimeId})
+    }, [runtimeId, namespaceId, projectId, currentSession, flow, functions, datatype, flowtype])
 
     const isAddLicensePage = pathname === '/licenses/add';
 
     return <ContextStoreProvider
-        services={[user, organization, member, namespace, runtime, project, role, application]}>
+        services={[application, user, organization, member, namespace, runtime, project, role, flow, functions, datatype, flowtype, module, ai]}>
         <ApplicationMiddlewareComponent>
-            <Layout style={{zIndex: 0}} layoutGap={"0"} showLayoutSplitter={false} leftContent={
-                <Flex p={0.7} pt={1} align={"center"} style={{flexDirection: "column", gap: "0.7rem"}}>
-                    {isAddLicensePage ? (
-                        <AuroraBackground/>
-                    ) : (
-                        <div style={{
-                            position: "absolute",
-                            top: 0,
-                            left: 0,
-                            width: "50%",
-                            transform: "scaleX(-1)",
-                            height: "40%",
-                            zIndex: "-1",
-                        }}>
-                            <div style={{
-                                position: "absolute",
-                                top: "0",
-                                left: "0",
-                                width: "100%",
-                                height: "100%",
-                                background: "radial-gradient(circle at top right,rgba(25, 24, 37, 0.25) 0%, rgba(25, 24, 37, 1) 25%)",
-                                zIndex: "1"
-                            }}/>
-                            <AuroraBackground/>
-
-                        </div>
-                    )}
-                    <Image src={"/CodeZero_Logo.png"} alt={"CodeZero Banner"} width={160} height={0}
-                           style={{width: '38px', height: 'auto'}}/>
-                    {tab}
-                </Flex>
-            }>
-                <Layout showLayoutSplitter={false} pr={0.7} layoutGap={"0"} topContent={<>{bar}</>}>
-                    <>
-                        <Layout>
-                            <>{children}</>
-                        </Layout>
-                        {modal}
-                    </>
+            <FullScreen bg={"var(--secondary)"}>
+                <Layout p={1} showLayoutSplitter={false} layoutGap={32} leftContent={<ApplicationNavigationView/>}>
+                    <Layout showLayoutSplitter={false} layoutGap={32} leftContent={<div style={{
+                        height: "100%",
+                        boxSizing: "border-box",
+                        maxWidth: "20vw"
+                    }}>{sidebar}</div>}>
+                        <>
+                            {children}
+                            {modal}
+                        </>
+                    </Layout>
                 </Layout>
-            </Layout>
+            </FullScreen>
         </ApplicationMiddlewareComponent>
     </ContextStoreProvider>
 }