feat(platform): Restructure workspace settings and user settings (#682)

apps/platform/src/app/(main)/(settings)/[workspace]/settings/page.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+
+interface WorkspaceSettingsPageProps {
+  params: { workspace: string }
+}
+
+export default function WorkspaceSettingsPage({
+  params
+}: WorkspaceSettingsPageProps): JSX.Element {
+  const workspaceSettings = params.workspace
+  return <div>{workspaceSettings} settings</div>
+}

apps/platform/src/app/(main)/settings/layout.tsx → apps/platform/src/app/(main)/(settings)/settings/layout.tsx

@@ -6,20 +6,17 @@ interface SettingsLayoutProps {
   // params: { slug: string }
   billing: React.ReactNode
   profile: React.ReactNode
-  workspace: React.ReactNode
 }
 
 function SettingsLayout({
   // params,
   billing,
-  profile,
-  workspace
+  profile
 }: SettingsLayoutProps): React.JSX.Element {
   const searchParams = useSearchParams()
   const tab = searchParams.get('tab') ?? 'rollup-details'
   return (
     <main>
-      {tab === 'workspace' && workspace}
       {tab === 'profile' && profile}
       {tab === 'billing' && billing}
     </main>

apps/platform/src/components/dashboard/secret/secretCard/index.tsx

@@ -1,6 +1,7 @@
 import type { Secret } from '@keyshade/schema'
 import { NoteIconSVG } from '@public/svg/secret'
 import dayjs from 'dayjs'
+import { useSetAtom } from 'jotai'
 import {
   AccordionContent,
   AccordionItem,
@@ -27,7 +28,6 @@ import {
   TooltipTrigger
 } from '@/components/ui/tooltip'
 import { deleteSecretOpenAtom, selectedSecretAtom } from '@/store'
-import { useSetAtom } from 'jotai'
 
 interface SecretCardProps {
   secretData: Secret
@@ -123,14 +123,12 @@ export default function SecretCard({
         <ContextMenuItem className="h-[33%] w-[15.938rem] border-b-[0.025rem] border-white/65 text-xs font-semibold tracking-wide">
           Show Version History
         </ContextMenuItem>
-        <ContextMenuItem
-          className="h-[33%] w-[15.938rem] text-xs font-semibold tracking-wide"
-        >
+        <ContextMenuItem className="h-[33%] w-[15.938rem] text-xs font-semibold tracking-wide">
           Edit
         </ContextMenuItem>
         <ContextMenuItem
           className="h-[33%] w-[15.938rem] text-xs font-semibold tracking-wide"
-        onSelect={handleDeleteClick}
+          onSelect={handleDeleteClick}
         >
           Delete
         </ContextMenuItem>

apps/platform/src/components/shared/navbar/index.tsx

@@ -55,7 +55,6 @@ function Navbar(): React.JSX.Element {
   const pathname = usePathname()
 
   const settingsTabs = [
-    { id: 'workspace', label: 'Workspace' },
     { id: 'profile', label: 'Profile' },
     { id: 'billing', label: 'Billing' }
   ]
@@ -162,8 +161,8 @@ function Navbar(): React.JSX.Element {
               <Link href="/teams">
                 <DropdownMenuItem>Team</DropdownMenuItem>
               </Link>
-              <Link href="/settings?tab=workspace">
-                <DropdownMenuItem>Workspace Settings</DropdownMenuItem>
+              <Link href="/settings?tab=profile">
+                <DropdownMenuItem>User Settings</DropdownMenuItem>
               </Link>
 
               <DropdownMenuSeparator />

apps/platform/src/components/shared/sidebar/index.tsx

@@ -1,3 +1,4 @@
+'use client'
 import React from 'react'
 import {
   DashboardSVG,
@@ -6,34 +7,38 @@ import {
   SettingsSVG,
   TeamSVG
 } from '@public/svg/shared'
+import { useAtomValue } from 'jotai'
 import SidebarTab from './sidebarTab'
 import { Combobox } from '@/components/ui/combobox'
+import { selectedWorkspaceAtom } from '@/store'
 
 function Sidebar(): JSX.Element {
+  const selectedWorkspace = useAtomValue(selectedWorkspaceAtom)
+
   const sidebarTabData = [
     {
       name: 'Dashboard',
       icon: <DashboardSVG />,
       link: '/',
-      matchTo: ''
+      matchTo: '/'
     },
     {
       name: 'Teams',
       icon: <TeamSVG />,
       link: '/teams',
-      matchTo: 'teams'
+      matchTo: '/teams'
     },
     {
       name: 'Integrations',
       icon: <IntegrationSVG />,
       link: '/',
-      matchTo: 'integrations'
+      matchTo: '/integrations'
     },
     {
-      name: 'Settings',
+      name: 'Workspace Settings',
       icon: <SettingsSVG />,
-      link: '/settings?tab=workspace',
-      matchTo: 'settings'
+      link: `/${selectedWorkspace?.slug}/settings`,
+      matchTo: `/${selectedWorkspace?.slug}/settings`
     }
   ]
 

apps/platform/src/components/shared/sidebar/sidebarTab/index.tsx

@@ -24,7 +24,7 @@ function SidebarTab({
    * @returns The background color for the tab.
    */
   const isCurrentActive = (tabName: string): boolean => {
-    if (currentPath.split('/')[1] === tabName.toLowerCase()) {
+    if (currentPath === tabName) {
       return true
     }
     return false