feat: improved navbar (#347)

* feat: improved buttons light theme visibility by adding a border

* feat: added support for using search params to navigate tabs via the url

* feat: the user menu settings button takes you to user account settings

* fix: tweak secondary button light theme style

* refactor: rework tab switching and search param logic

---------

Co-authored-by: Rohan <[email protected]>

Author: nimish-ks

frontend/app/[team]/settings/page.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import { usePathname, useRouter, useSearchParams } from 'next/navigation'
 import { Avatar } from '@/components/common/Avatar'
 import { ModeToggle } from '@/components/common/ModeToggle'
 import { TrustedDeviceManager } from '@/components/settings/account/TrustedDeviceManager'
@@ -11,26 +12,50 @@ import { userIsAdmin } from '@/utils/permissions'
 import { Tab } from '@headlessui/react'
 import clsx from 'clsx'
 import { useSession } from 'next-auth/react'
-import { Fragment, useContext } from 'react'
+import { Fragment, useContext, useEffect, useState } from 'react'
 import { FaMoon, FaSun } from 'react-icons/fa'
 import Spinner from '@/components/common/Spinner'
 
 export default function Settings({ params }: { params: { team: string } }) {
+  const searchParams = useSearchParams()
+  const router = useRouter()
+  const pathname = usePathname()
+
   const { activeOrganisation } = useContext(organisationContext)
 
   const { data: session } = useSession()
 
   const activeUserIsAdmin = activeOrganisation ? userIsAdmin(activeOrganisation.role!) : false
 
-  const tabList = () => [
+  const [tabIndex, setTabIndex] = useState(0)
+
+  const tabList = [
     ...(activeUserIsAdmin ? [{ name: 'Organisation' }] : []),
-    ...[{ name: 'Account' }, { name: 'App' }],
+    { name: 'Account' },
+    { name: 'App' },
   ]
 
+  useEffect(() => {
+    const initialTabName = searchParams?.get('tab') ?? 'organisation'
+    const initialTabIndex = tabList.findIndex(
+      (tab) => tab.name.toLowerCase() === initialTabName.toLowerCase()
+    )
+
+    if (initialTabIndex !== -1) setTabIndex(initialTabIndex)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [activeUserIsAdmin, searchParams])
+
+  const updateTab = (index: number) => {
+    const tab = tabList[index]
+    const params = new URLSearchParams(searchParams?.toString())
+    params.set('tab', tab.name)
+    router.push(`${pathname}?${params.toString()}`)
+  }
+
   if (!activeOrganisation)
     return (
       <div className="flex items-center justify-center py-40">
-        <Spinner size="md" />{' '}
+        <Spinner size="md" />
       </div>
     )
 
@@ -39,17 +64,17 @@ export default function Settings({ params }: { params: { team: string } }) {
       <h1 className="text-3xl font-semibold">Settings</h1>
 
       <div className="pt-8">
-        <Tab.Group>
+        <Tab.Group selectedIndex={tabIndex} onChange={(index) => updateTab(index)}>
           <Tab.List className="flex gap-4 w-full border-b border-neutral-500/20">
-            {tabList().map((tab) => (
+            {tabList.map((tab) => (
               <Tab key={tab.name} as={Fragment}>
                 {({ selected }) => (
                   <div
                     className={clsx(
                       'p-3 font-medium border-b focus:outline-none text-black dark:text-white',
                       selected
                         ? 'border-emerald-500 font-semibold'
-                        : ' border-transparent cursor-pointer'
+                        : 'border-transparent cursor-pointer'
                     )}
                   >
                     {tab.name}
@@ -63,7 +88,7 @@ export default function Settings({ params }: { params: { team: string } }) {
             <div className="max-h-[80vh] overflow-y-auto px-4">
               {activeUserIsAdmin && (
                 <Tab.Panel>
-                  <div className="space-y-10  py-4">
+                  <div className="space-y-10 py-4">
                     <div className="space-y-1">
                       <h2 className="text-2xl font-semibold">Organisation</h2>
                       <p className="text-neutral-500">Organisation info and settings</p>

frontend/components/UserMenu.tsx

@@ -79,7 +79,7 @@ export default function UserMenu() {
               <div className="flex items-center justify-between p-2">
                 <div>
                   {activeOrganisation && (
-                    <Link href={`/${activeOrganisation.name}/settings`}>
+                    <Link href={`/${activeOrganisation.name}/settings?tab=account`}>
                       <Button variant="outline">
                         <div className="flex items-center gap-1 text-xs">
                           <FaCog />

frontend/components/common/Button.tsx

@@ -37,7 +37,7 @@ const variantStyles: Record<string, string> = {
   danger:
     'rounded-full bg-red-700 py-1 px-3 text-white hover:bg-red-600 dark:bg-red-400/10 dark:text-red-400 dark:ring-1 dark:ring-inset dark:ring-red-400/20 dark:hover:bg-red-400/10 dark:hover:text-red-300 dark:hover:ring-red-300',
   secondary:
-    'rounded-full bg-zinc-100 py-1 px-3 text-zinc-900 hover:bg-zinc-200 dark:bg-zinc-800/40 dark:text-zinc-400 dark:ring-1 dark:ring-inset dark:ring-zinc-800 dark:hover:bg-zinc-800 dark:hover:text-zinc-300',
+    'rounded-full bg-zinc-100 py-1 px-3 text-zinc-900 hover:bg-zinc-200 ring-1 ring-zinc-300 dark:bg-zinc-800/40 dark:text-zinc-400 dark:ring-1 dark:ring-inset dark:ring-zinc-800 dark:hover:bg-zinc-800 dark:hover:text-zinc-300',
   filled:
     'rounded-full bg-zinc-900 py-1 px-3 text-white hover:bg-zinc-700 dark:bg-emerald-500 dark:text-white dark:hover:bg-emerald-400',
   outline: