fix: improve sidebar buttons

apps/start/src/components/sidebar-organization-menu.tsx

@@ -1,21 +1,15 @@
+import { Link, useNavigate } from '@tanstack/react-router';
+import { AnimatePresence, motion } from 'framer-motion';
 import {
+  ChevronDownIcon,
   CogIcon,
   CreditCardIcon,
   LayoutListIcon,
+  PlusIcon,
   UsersIcon,
   WorkflowIcon,
 } from 'lucide-react';
-
-import { Button } from '@/components/ui/button';
-import { useAppContext } from '@/hooks/use-app-context';
-import { useAppParams } from '@/hooks/use-app-params';
-import { pushModal } from '@/modals';
-import type { RouterOutputs } from '@/trpc/client';
-import { cn } from '@/utils/cn';
-import { Link, useNavigate, useRouteContext } from '@tanstack/react-router';
-import { AnimatePresence, motion } from 'framer-motion';
-import { ChevronDownIcon, PlusIcon } from 'lucide-react';
-import { useCallback, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Badge } from './ui/badge';
 import {
   DropdownMenu,
@@ -23,6 +17,11 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from './ui/dropdown-menu';
+import { Button } from '@/components/ui/button';
+import { useAppContext } from '@/hooks/use-app-context';
+import { pushModal } from '@/modals';
+import type { RouterOutputs } from '@/trpc/client';
+import { cn } from '@/utils/cn';
 
 export default function SidebarOrganizationMenu({
   organization,
@@ -34,35 +33,35 @@ export default function SidebarOrganizationMenu({
   return (
     <>
       <Link
-        className={cn(
-          'flex items-center gap-2 rounded-md px-3 py-2 font-medium transition-all hover:bg-def-200 text-[13px]',
-        )}
         activeOptions={{ exact: true }}
-        to="/$organizationId"
+        className={cn(
+          'flex items-center gap-2 rounded-md px-3 py-2 font-medium text-[13px] transition-all hover:bg-def-200'
+        )}
         from="/$organizationId"
+        to="/$organizationId"
       >
         <LayoutListIcon size={20} />
         <div className="flex-1">Projects</div>
       </Link>
       <Link
-        className={cn(
-          'flex items-center gap-2 rounded-md px-3 py-2 font-medium transition-all hover:bg-def-200 text-[13px]',
-        )}
         activeOptions={{ exact: true }}
-        to="/$organizationId/settings"
+        className={cn(
+          'flex items-center gap-2 rounded-md px-3 py-2 font-medium text-[13px] transition-all hover:bg-def-200'
+        )}
         from="/$organizationId"
+        to="/$organizationId/settings"
       >
         <CogIcon size={20} />
         <div className="flex-1">Settings</div>
       </Link>
       {!isSelfHosted && (
         <Link
-          className={cn(
-            'flex items-center gap-2 rounded-md px-3 py-2 font-medium transition-all hover:bg-def-200 text-[13px]',
-          )}
           activeOptions={{ exact: true }}
-          to="/$organizationId/billing"
+          className={cn(
+            'flex items-center gap-2 rounded-md px-3 py-2 font-medium text-[13px] transition-all hover:bg-def-200'
+          )}
           from="/$organizationId"
+          to="/$organizationId/billing"
         >
           <CreditCardIcon size={20} />
           <div className="flex-1">Billing</div>
@@ -74,20 +73,20 @@ export default function SidebarOrganizationMenu({
       )}
       <Link
         className={cn(
-          'flex items-center gap-2 rounded-md px-3 py-2 font-medium transition-all hover:bg-def-200 text-[13px]',
+          'flex items-center gap-2 rounded-md px-3 py-2 font-medium text-[13px] transition-all hover:bg-def-200'
         )}
-        to="/$organizationId/members"
         from="/$organizationId"
+        to="/$organizationId/members"
       >
         <UsersIcon size={20} />
         <div className="flex-1">Members</div>
       </Link>
       <Link
         className={cn(
-          'flex items-center gap-2 rounded-md px-3 py-2 font-medium transition-all hover:bg-def-200 text-[13px]',
+          'flex items-center gap-2 rounded-md px-3 py-2 font-medium text-[13px] transition-all hover:bg-def-200'
         )}
-        to="/$organizationId/integrations"
         from="/$organizationId"
+        to="/$organizationId/integrations"
       >
         <WorkflowIcon size={20} />
         <div className="flex-1">Integrations</div>
@@ -138,20 +137,20 @@ export function ActionCTAButton() {
           <Button className="w-full justify-between" size="default">
             <div className="flex items-center gap-2">
               <PlusIcon size={16} />
-              <div className="relative h-5 flex items-center">
+              <div className="relative flex h-5 items-center">
                 <AnimatePresence mode="popLayout">
                   <motion.span
-                    key={currentActionIndex}
-                    initial={{ y: 20, opacity: 0 }}
                     animate={{ y: 0, opacity: 1 }}
+                    className="absolute whitespace-nowrap"
                     exit={{ y: -20, opacity: 0 }}
+                    initial={{ y: 20, opacity: 0 }}
+                    key={currentActionIndex}
                     transition={{
                       type: 'spring',
                       stiffness: 300,
                       damping: 25,
                       duration: 0.3,
                     }}
-                    className="absolute whitespace-nowrap"
                   >
                     {ACTIONS[currentActionIndex].label}
                   </motion.span>
@@ -161,12 +160,12 @@ export function ActionCTAButton() {
             <ChevronDownIcon size={16} />
           </Button>
         </DropdownMenuTrigger>
-        <DropdownMenuContent className="w-56" align="start">
+        <DropdownMenuContent align="start" className="w-56">
           {ACTIONS.map((action) => (
             <DropdownMenuItem
-              onClick={action.onClick}
               className="cursor-pointer"
               key={action.label}
+              onClick={action.onClick}
             >
               <action.icon className="mr-2 h-4 w-4" />
               {action.label}