add link to support email in footer, support FAQ, studio sidebar. add docs link to studio sidebar. adjust studio sidebar styling for mobile

Author: chad-syntax

src/components/marketing/faq.tsx

@@ -55,7 +55,7 @@ const faqData = [
     value: 'support-options',
     trigger: 'How do I get support?',
     content:
-      'Pro plan users receive priority support via email. All users, including those on the Community plan, can access community support through our GitHub repository and participate in discussions.',
+      'Send an email to support@agentsmith.dev. All users, including those on the Community plan, can access community support through our GitHub repository and participate in discussions.',
   },
 ];
 

src/components/marketing/footer.tsx

@@ -42,6 +42,10 @@ const footerData: FooterColumn[] = [
         href: '/sitemap.xml',
         label: 'Sitemap',
       },
+      {
+        href: routes.emails.support,
+        label: 'Support',
+      },
     ],
   },
   {

src/components/organization-selector.tsx

@@ -7,7 +7,6 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
-import { Label } from '@/components/ui/label';
 
 export type OrganizationSelectorProps = {
   userOrganizationData: GetUserOrganizationDataResult;
@@ -30,14 +29,13 @@ export const OrganizationSelector = (props: OrganizationSelectorProps) => {
     ) || [];
 
   return (
-    <div className="space-y-6">
+    <div className="space-y-2">
       <div className="space-y-2">
-        <Label>Organization</Label>
         <Select
           value={selectedOrganizationUuid ?? 'choose-organization'}
           onValueChange={setSelectedOrganizationUuid}
         >
-          <SelectTrigger>
+          <SelectTrigger className="truncate w-full">
             <SelectValue placeholder="Choose Organization" />
           </SelectTrigger>
           <SelectContent>
@@ -51,18 +49,17 @@ export const OrganizationSelector = (props: OrganizationSelectorProps) => {
       </div>
 
       <div className="space-y-2">
-        <Label>Project</Label>
         <Select
           value={selectedProjectUuid ?? 'choose-project'}
           onValueChange={setSelectedProjectUuid}
         >
-          <SelectTrigger>
+          <SelectTrigger className="truncate w-full">
             <SelectValue placeholder="Choose Project" />
           </SelectTrigger>
           <SelectContent>
             {selectedOrganization?.projects.map((project: any) => (
               <SelectItem key={project.uuid} value={project.uuid}>
-                {`Project ${project.name}`}
+                {project.name}
               </SelectItem>
             ))}
           </SelectContent>

src/components/studio-header.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { ChevronDown, RefreshCcw, Settings, Slash } from 'lucide-react';
+import { ChevronDown, RefreshCcw, Slash } from 'lucide-react';
 
 import {
   Breadcrumb,

src/components/studio-sidebar.tsx

@@ -31,7 +31,9 @@ const StudioMenu = () => {
         item.slug === 'organization' ||
         item.slug === 'account' ||
         item.slug === 'settings' ||
-        item.slug === 'alerts'
+        item.slug === 'alerts' ||
+        item.slug === 'support' ||
+        item.slug === 'docs'
       ) {
         return [acc[0], [...acc[1], item]];
       }
@@ -43,7 +45,7 @@ const StudioMenu = () => {
 
   return (
     <div className="h-full flex flex-col">
-      <nav className="flex-1 px-1 overflow-hidden flex flex-col justify-between pb-4">
+      <nav className="flex-1 px-1 overflow-hidden flex flex-col justify-between pb-2">
         {groups.map((group, groupIndex) => (
           <div key={groupIndex}>
             {group.map((item) => (
@@ -52,7 +54,7 @@ const StudioMenu = () => {
                 variant="ghost"
                 asChild
                 className={cn(
-                  'p-0 has-[>svg]:px-0 mx-0.5 mt-2 flex justify-start',
+                  'p-0 has-[>svg]:px-0 mx-0.5 mt-1 flex justify-start',
                   item.active && 'bg-muted-foreground/20',
                 )}
               >
@@ -73,7 +75,7 @@ const StudioMenu = () => {
         ))}
       </nav>
       <Separator className="block md:hidden" />
-      <div className="block md:hidden p-4 space-y-4 overflow-hidden">
+      <div className="block md:hidden p-2 space-y-4 overflow-hidden">
         <OrganizationSelector userOrganizationData={userOrganizationData} />
       </div>
     </div>

src/hooks/nav-items.tsx

@@ -12,6 +12,8 @@ import {
   Box,
   Bell,
   BarChart3,
+  LifeBuoy,
+  Book,
 } from 'lucide-react';
 import { usePathname } from 'next/navigation';
 import { useApp } from '@/providers/app';
@@ -36,6 +38,22 @@ export const useNavItems = () => {
     active: pathname.startsWith(routes.studio.account),
   };
 
+  const supportNavItem = {
+    name: 'Support',
+    slug: 'support',
+    href: routes.emails.support,
+    icon: LifeBuoy,
+    active: pathname === routes.emails.support,
+  };
+
+  const docsNavItem = {
+    name: 'Docs',
+    slug: 'docs',
+    href: routes.docs.home,
+    icon: Book,
+    active: pathname === routes.docs.home,
+  };
+
   const navItems = [
     homeNavItem,
     {
@@ -88,6 +106,8 @@ export const useNavItems = () => {
       icon: Globe,
       active: pathname.startsWith(routes.studio.projectGlobals(selectedProjectUuid)),
     },
+    docsNavItem,
+    supportNavItem,
     accountNavItem,
     {
       name: 'Organization',
@@ -121,7 +141,7 @@ export const useNavItems = () => {
 
   if (userNeedsOrgMembership) {
     return {
-      navItems: [homeNavItem, accountNavItem],
+      navItems: [homeNavItem, docsNavItem, supportNavItem, accountNavItem],
       activeItem: homeNavItem,
     };
   }