settings links fixed

apps/studio-prototype/src/app/[org]/[project]/layout.tsx

@@ -0,0 +1,25 @@
+import RedirectCatcher from '@/src/components/redirect-catcher'
+import EntranceTransition from './../entrance-transition'
+import ProjectContentTransition from './../project-content-transition'
+import SettingsMenuPanel from './../settings-menu-panel'
+import SideNav from './../side-nav'
+
+export default function ProjectLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode
+}>) {
+  return (
+    <div className="w-screen h-screen flex">
+      <SideNav />
+      <EntranceTransition>
+        <SettingsMenuPanel />
+        <div className="flex flex-col grow">
+          {/* <TopHeader /> */}
+          <ProjectContentTransition>{children}</ProjectContentTransition>
+        </div>
+      </EntranceTransition>
+      {/* <RedirectCatcher /> */}
+    </div>
+  )
+}

apps/studio-prototype/src/app/[org]/layout.tsx

@@ -11,14 +11,16 @@ export default function OrgLayout({
 }>) {
   return (
     <div className="w-screen h-screen flex">
-      <SideNav />
-      <EntranceTransition>
+      {/* <SideNav /> */}
+      {/* <EntranceTransition>
         <SettingsMenuPanel />
-        <div className="flex flex-col grow">
-          {/* <TopHeader /> */}
-          <ProjectContentTransition>{children}</ProjectContentTransition>
-        </div>
-      </EntranceTransition>
+        <div className="flex flex-col grow"> */}
+      {/* <TopHeader /> */}
+      {/* <ProjectContentTransition> */}
+      {children}
+      {/* </ProjectContentTransition> */}
+      {/* </div> */}
+      {/* </EntranceTransition> */}
       <RedirectCatcher />
     </div>
   )

apps/studio-prototype/src/app/[org]/page.tsx

@@ -1,12 +1,90 @@
-// page
+import ReadAndWritesChart from '@/src/components/charts/read-and-writes-chart'
+import ProjectList from './projects/project-list'
+import ProjectsCharts from './projects/projects-charts'
+import ProjectsHeader from './projects/projects-header'
+import QueriesChart from '@/src/components/charts/queries-chart'
+import IOPSChart from '@/src/components/charts/iops-chart'
+import StorageChart from '@/src/components/charts/storage-chart'
+import CPUAndMemoryChart from '@/src/components/charts/cpu-and-memory-chart'
+import { Button, Separator } from 'ui'
+import { Clock, MoreVertical } from 'lucide-react'
+import Image from 'next/image'
 
-import { Button } from 'ui'
-
-export default function Page() {
+export default function ProjectsPage() {
   return (
-    <div className="p-3">
-      <Button>Hello</Button>
-      hello im page
+    <div className="flex flex-col gap-10 px-[48px]">
+      <ProjectsHeader />
+      <Separator />
+      <div className="flex flex-col gap-4">
+        <div className="flex gap-2">
+          <div className="-space-x-px flex items-center">
+            <Button type="default" className="rounded-r-none">
+              All projects
+            </Button>
+            <Button type="default" className="rounded-l-none" icon={<Clock />}>
+              Last 6 hours
+            </Button>
+          </div>
+          <Button type="default">All products</Button>
+        </div>
+        <div className="grid grid-cols-3 gap-10">
+          <QueriesChart />
+          <ReadAndWritesChart />
+          <QueriesChart />
+        </div>
+        {/* <IOPSChart /> */}
+        {/* <StorageChart /> */}
+        {/* <CPUAndMemoryChart /> */}
+      </div>
+      <Separator />
+      <div className="flex flex-row gap-10 divide-x">
+        <div className="grow">
+          <ProjectList />
+        </div>
+        <div className="pl-5">
+          <h2 className="text-lg text-foreground">Member activity</h2>
+          <h2 className="text-xs text-foreground-muted mb-3">1,230 Backups in last 6 months</h2>
+          <div className="grow rounded-md w-96 divide-y py-1">
+            <MemberRow />
+            <MemberRow />
+            <MemberRow />
+            <MemberRow />
+            <MemberRow />
+          </div>
+        </div>
+        <div className="pl-5">
+          <h2 className="text-lg text-foreground">Backups</h2>
+          <h2 className="text-xs text-foreground-muted mb-3">1,230 Backups in last 6 months</h2>
+          <div className="grow rounded-md w-96 divide-y py-1">
+            <MemberRow />
+            <MemberRow />
+            <MemberRow />
+            <MemberRow />
+            <MemberRow />
+          </div>
+        </div>
+        {/* <div>Recent Members</div>
+        <ProjectList /> */}
+      </div>
+    </div>
+  )
+}
+
+const MemberRow = () => {
+  return (
+    <div className="flex gap-3 items-center py-2">
+      <Image
+        alt="icon"
+        src="https://avatars.githubusercontent.com/u/8291514?v=4"
+        className="rounded-full h-6 w-6"
+        width={32}
+        height={32}
+      />
+      <div className="flex flex-col gap-0 grow">
+        <span className="text-xs text-foreground-lighter">Jonny Summers</span>
+        <span className="text-sm text-foreground">Created a table</span>
+      </div>
+      <MoreVertical size={14} className="text-foreground-muted" strokeWidth={1} />
     </div>
   )
 }

apps/studio-prototype/src/app/[org]/projects/page.tsx

@@ -1,90 +0,0 @@
-import ReadAndWritesChart from '@/src/components/charts/read-and-writes-chart'
-import ProjectList from './project-list'
-import ProjectsCharts from './projects-charts'
-import ProjectsHeader from './projects-header'
-import QueriesChart from '@/src/components/charts/queries-chart'
-import IOPSChart from '@/src/components/charts/iops-chart'
-import StorageChart from '@/src/components/charts/storage-chart'
-import CPUAndMemoryChart from '@/src/components/charts/cpu-and-memory-chart'
-import { Button, Separator } from 'ui'
-import { Clock, MoreVertical } from 'lucide-react'
-import Image from 'next/image'
-
-export default function ProjectsPage() {
-  return (
-    <div className="flex flex-col gap-10 px-[48px]">
-      <ProjectsHeader />
-      <Separator />
-      <div className="flex flex-col gap-4">
-        <div className="flex gap-2">
-          <div className="-space-x-px flex items-center">
-            <Button type="default" className="rounded-r-none">
-              All projects
-            </Button>
-            <Button type="default" className="rounded-l-none" icon={<Clock />}>
-              Last 6 hours
-            </Button>
-          </div>
-          <Button type="default">All products</Button>
-        </div>
-        <div className="grid grid-cols-3 gap-10">
-          <QueriesChart />
-          <ReadAndWritesChart />
-          <QueriesChart />
-        </div>
-        {/* <IOPSChart /> */}
-        {/* <StorageChart /> */}
-        {/* <CPUAndMemoryChart /> */}
-      </div>
-      <Separator />
-      <div className="flex flex-row gap-10 divide-x">
-        <div className="grow">
-          <ProjectList />
-        </div>
-        <div className="pl-5">
-          <h2 className="text-lg text-foreground">Member activity</h2>
-          <h2 className="text-xs text-foreground-muted mb-3">1,230 Backups in last 6 months</h2>
-          <div className="grow rounded-md w-96 divide-y py-1">
-            <MemberRow />
-            <MemberRow />
-            <MemberRow />
-            <MemberRow />
-            <MemberRow />
-          </div>
-        </div>
-        <div className="pl-5">
-          <h2 className="text-lg text-foreground">Backups</h2>
-          <h2 className="text-xs text-foreground-muted mb-3">1,230 Backups in last 6 months</h2>
-          <div className="grow rounded-md w-96 divide-y py-1">
-            <MemberRow />
-            <MemberRow />
-            <MemberRow />
-            <MemberRow />
-            <MemberRow />
-          </div>
-        </div>
-        {/* <div>Recent Members</div>
-        <ProjectList /> */}
-      </div>
-    </div>
-  )
-}
-
-const MemberRow = () => {
-  return (
-    <div className="flex gap-3 items-center py-2">
-      <Image
-        alt="icon"
-        src="https://avatars.githubusercontent.com/u/8291514?v=4"
-        className="rounded-full h-6 w-6"
-        width={32}
-        height={32}
-      />
-      <div className="flex flex-col gap-0 grow">
-        <span className="text-xs text-foreground-lighter">Jonny Summers</span>
-        <span className="text-sm text-foreground">Created a table</span>
-      </div>
-      <MoreVertical size={14} className="text-foreground-muted" strokeWidth={1} />
-    </div>
-  )
-}

apps/studio-prototype/src/app/[org]/projects/project-list.tsx

@@ -3,6 +3,7 @@
 import SparkChart from '@/src/components/charts/spark-chart'
 import { useConfig } from '@/src/hooks/use-config'
 import { Grid, List, MoreVertical, Search } from 'lucide-react'
+import Link from 'next/link'
 import { Badge, Button } from 'ui'
 import { Input } from 'ui-patterns/DataInputs/Input'
 
@@ -38,7 +39,8 @@ export default function ProjectList() {
       <ul role="list" className="-space-y-px mt-3 divide-y">
         {selectedOrg?.projects.map((project) => {
           return (
-            <div
+            <Link
+              href={`/${selectedOrg?.key}/${project?.key}/table-editor/1`}
               key={project.key}
               className="bg-surface-100/50 border px-5 first-of-type:rounded-t-md last-of-type:rounded-b-md h-16 flex items-center gap-10"
             >
@@ -76,7 +78,7 @@ export default function ProjectList() {
               <div className="grow"></div>
 
               <MoreVertical size={14} className="text-foreground-muted" strokeWidth={1} />
-            </div>
+            </Link>
           )
         })}
       </ul>

apps/studio-prototype/src/app/[org]/settings-menu-children.tsx

@@ -33,9 +33,9 @@ const SettingsMenuChildren = () => {
   const getBasePath = (section: string): string => {
     switch (section) {
       case 'PROJECT_SETTINGS':
-        return `/${selectedOrg?.key}/settings/project/${selectedProject?.key}`
+        return `/${selectedOrg?.key}/${selectedProject?.key}/settings/project`
       case 'ENV_SETTINGS':
-        return `/${selectedOrg?.key}/settings/project/${selectedProject?.key}`
+        return `/${selectedOrg?.key}/${selectedProject?.key}/settings/project`
       case 'ORGANIZATION_SETTINGS':
         return `/${selectedOrg?.key}/settings`
       case 'ACCOUNT_SETTINGS':
@@ -65,7 +65,7 @@ const SettingsMenuChildren = () => {
           basePath={getBasePath('PROJECT_SETTINGS')}
           hasBranchingEnabled={hasBranchingEnabled}
         />
-        <SettingsGroup
+        {/* <SettingsGroup
           key={'organization-settings'}
           group="Organization settings"
           items={settingsData.ORGANIZATION_SETTINGS.items}
@@ -76,7 +76,7 @@ const SettingsMenuChildren = () => {
           group="Account settings"
           items={settingsData.ACCOUNT_SETTINGS.items}
           basePath={getBasePath('ACCOUNT_SETTINGS')}
-        />
+        /> */}
       </nav>
       <ScrollBar />
     </ScrollArea>

apps/studio-prototype/src/app/[org]/side-nav-menu-icon.tsx

@@ -20,7 +20,7 @@ export default function SideNavMenuIcon({ product }: { product: any }) {
    */
   let overrideHref = null
   if (product.name === 'settings') {
-    overrideHref = `/${selectedOrg?.key}/${selectedProject?.key}/settings/project/${selectedProject?.key}/general`
+    overrideHref = `/${selectedOrg?.key}/${selectedProject?.key}/settings/project/general`
   }
   if (product.name === 'table-editor' && config.tableEditor.activeTabId) {
     overrideHref = `/${selectedOrg?.key}/${selectedProject?.key}/table-editor/${config.tableEditor.activeTabId}`