feat(studio): add help sidebar entry

apps/studio/components/layouts/ProjectLayout/LayoutHeader/HelpPopover.tsx

@@ -1,9 +1,3 @@
-import { Activity, BookOpen, HelpCircle, Mail, Wrench } from 'lucide-react'
-import Image from 'next/legacy/image'
-import { useRouter } from 'next/router'
-import { useState } from 'react'
-import SVG from 'react-inlinesvg'
-
 import { IS_PLATFORM } from 'common'
 import type { SupportFormUrlKeys } from 'components/interfaces/Support/SupportForm.utils'
 import { SupportLink } from 'components/interfaces/Support/SupportLink'
@@ -13,6 +7,11 @@ import { useSendEventMutation } from 'data/telemetry/send-event-mutation'
 import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization'
 import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
 import { DOCS_URL } from 'lib/constants'
+import { Activity, BookOpen, HelpCircle, Mail, Wrench } from 'lucide-react'
+import Image from 'next/legacy/image'
+import { useRouter } from 'next/router'
+import { useState } from 'react'
+import SVG from 'react-inlinesvg'
 import { useAiAssistantStateSnapshot } from 'state/ai-assistant-state'
 import { useSidebarManagerSnapshot } from 'state/sidebar-manager-state'
 import {
@@ -21,29 +20,19 @@ import {
   ButtonGroup,
   ButtonGroupItem,
   cn,
-  Popover,
   Popover_Shadcn_,
   PopoverContent_Shadcn_,
   PopoverTrigger_Shadcn_,
+  Separator,
 } from 'ui'
+import styleHandler from 'ui/src/lib/theme/styleHandler'
 
 export const HelpPopover = () => {
-  const router = useRouter()
   const { data: project } = useSelectedProjectQuery()
   const { data: org } = useSelectedOrganizationQuery()
-  const snap = useAiAssistantStateSnapshot()
-  const { openSidebar } = useSidebarManagerSnapshot()
   const { mutate: sendEvent } = useSendEventMutation()
   const [isOpen, setIsOpen] = useState(false)
 
-  const projectRef = project?.parent_project_ref ?? (router.query.ref as string | undefined)
-  let supportLinkQueryParams: Partial<SupportFormUrlKeys> | undefined = undefined
-  if (projectRef) {
-    supportLinkQueryParams = { projectRef }
-  } else if (org?.slug) {
-    supportLinkQueryParams = { orgSlug: org.slug }
-  }
-
   return (
     <Popover_Shadcn_ open={isOpen} onOpenChange={setIsOpen}>
       <PopoverTrigger_Shadcn_ asChild>
@@ -73,128 +62,149 @@ export const HelpPopover = () => {
           />
         </ButtonTooltip>
       </PopoverTrigger_Shadcn_>
-      <PopoverContent_Shadcn_ className="w-[400px] space-y-5 p-0 py-5" align="end" side="bottom">
-        <div className="flex flex-col gap-4">
-          <div className="px-5 flex flex-col gap-1">
-            <h5 className="text-foreground">Need help with your project?</h5>
-            <p className="text-sm text-foreground-lighter text-balance">
-              Start with our {projectRef ? 'Assistant, docs,' : 'docs'} or community.
-            </p>
-          </div>
-
-          <div className="px-5">
-            <ButtonGroup className="w-full">
-              {projectRef && (
-                <ButtonGroupItem
-                  size="tiny"
-                  icon={<AiIconAnimation allowHoverEffect size={14} />}
-                  onClick={() => {
-                    openSidebar(SIDEBAR_KEYS.AI_ASSISTANT)
-                    snap.newChat({
-                      name: 'Support',
-                      initialInput: `I need help with my project`,
-                      suggestions: {
-                        title:
-                          'I can help you with your project, here are some example prompts to get you started:',
-                        prompts: [
-                          {
-                            label: 'Database Health',
-                            description: 'Summarise my database health and performance',
-                          },
-                          {
-                            label: 'Debug Logs',
-                            description: 'View and debug my edge function logs',
-                          },
-                          {
-                            label: 'RLS Setup',
-                            description: 'Implement row level security for my tables',
-                          },
-                        ],
-                      },
-                    })
-                  }}
-                >
-                  Supabase Assistant
-                </ButtonGroupItem>
-              )}
-              <ButtonGroupItem size="tiny" icon={<BookOpen strokeWidth={1.5} size={14} />} asChild>
-                <a href={`${DOCS_URL}/`} target="_blank" rel="noreferrer">
-                  Docs
-                </a>
-              </ButtonGroupItem>
-              <ButtonGroupItem size="tiny" icon={<Wrench strokeWidth={1.5} size={14} />} asChild>
-                <a
-                  href={`${DOCS_URL}/guides/troubleshooting?products=platform`}
-                  target="_blank"
-                  rel="noreferrer"
-                >
-                  Troubleshooting
-                </a>
-              </ButtonGroupItem>
-              {IS_PLATFORM && (
-                <>
-                  <ButtonGroupItem
-                    asChild
-                    size="tiny"
-                    icon={<Activity strokeWidth={1.5} size={14} />}
-                  >
-                    <a href="https://status.supabase.com/" target="_blank" rel="noreferrer">
-                      Supabase status
-                    </a>
-                  </ButtonGroupItem>
-
-                  <ButtonGroupItem asChild size="tiny" icon={<Mail strokeWidth={1.5} size={14} />}>
-                    <SupportLink
-                      queryParams={supportLinkQueryParams}
-                      onClick={() => setIsOpen(false)}
-                    >
-                      Contact support
-                    </SupportLink>
-                  </ButtonGroupItem>
-                </>
-              )}
-            </ButtonGroup>
-          </div>
-        </div>
-        <Popover.Separator />
-        <div className="flex flex-col gap-4">
-          <div className="px-5 flex flex-col gap-1">
-            <h5 className="text-foreground">Community support</h5>
-            <p className="text-sm text-foreground-lighter text-balance">
-              Our Discord community can help with code-related issues. Many questions are answered
-              in minutes.
-            </p>
-          </div>
-          <div className="px-5">
-            <div
-              className="relative space-y-2 overflow-hidden rounded px-5 py-4 pb-12 shadow-md"
-              style={{ background: '#404EED' }}
-            >
-              <a
-                href="https://discord.supabase.com"
-                target="_blank"
-                rel="noreferrer"
-                className="group dark block cursor-pointer"
-              >
-                <Image
-                  className="absolute left-0 top-0 opacity-50 transition-opacity group-hover:opacity-40"
-                  src={`${router.basePath}/img/support/discord-bg-small.jpg`}
-                  layout="fill"
-                  objectFit="cover"
-                  alt="Discord illustration"
-                />
-                <Button
-                  type="secondary"
-                  size="tiny"
-                  icon={<SVG src={`${router.basePath}/img/discord-icon.svg`} className="h-4 w-4" />}
-                >
-                  <span style={{ color: '#404EED' }}>Join us on Discord</span>
-                </Button>
-              </a>
-            </div>
-          </div>
-        </div>
+      <PopoverContent_Shadcn_ className="w-[400px] space-y-5 p-0 py-4" align="end" side="bottom">
+        <HelpContent onClose={() => setIsOpen(false)} />
       </PopoverContent_Shadcn_>
     </Popover_Shadcn_>
   )
 }
+
+export const HelpContent = ({ onClose }: { onClose: () => void }) => {
+  const snap = useAiAssistantStateSnapshot()
+  const { openSidebar } = useSidebarManagerSnapshot()
+  const router = useRouter()
+  const { data: project } = useSelectedProjectQuery()
+  const { data: org } = useSelectedOrganizationQuery()
+
+  const projectRef = project?.parent_project_ref ?? (router.query.ref as string | undefined)
+  let supportLinkQueryParams: Partial<SupportFormUrlKeys> | undefined = undefined
+  if (projectRef) {
+    supportLinkQueryParams = { projectRef }
+  } else if (org?.slug) {
+    supportLinkQueryParams = { orgSlug: org.slug }
+  }
+
+  const __styles = styleHandler('popover')
+
+  return (
+    <>
+      <div className="flex flex-col gap-4">
+        <div className="px-4 flex flex-col gap-1">
+          <h5 className="text-foreground">Need help with your project?</h5>
+          <p className="text-sm text-foreground-lighter text-balance">
+            Start with our {projectRef ? 'Assistant, docs,' : 'docs'} or community.
+          </p>
+        </div>
+
+        <div className="px-4">
+          <ButtonGroup className="w-full">
+            {projectRef && (
+              <ButtonGroupItem
+                size="tiny"
+                icon={<AiIconAnimation allowHoverEffect size={14} />}
+                onClick={() => {
+                  openSidebar(SIDEBAR_KEYS.AI_ASSISTANT)
+                  snap.newChat({
+                    name: 'Support',
+                    initialInput: `I need help with my project`,
+                    suggestions: {
+                      title:
+                        'I can help you with your project, here are some example prompts to get you started:',
+                      prompts: [
+                        {
+                          label: 'Database Health',
+                          description: 'Summarise my database health and performance',
+                        },
+                        {
+                          label: 'Debug Logs',
+                          description: 'View and debug my edge function logs',
+                        },
+                        {
+                          label: 'RLS Setup',
+                          description: 'Implement row level security for my tables',
+                        },
+                      ],
+                    },
+                  })
+                }}
+              >
+                Supabase Assistant
+              </ButtonGroupItem>
+            )}
+            <ButtonGroupItem size="tiny" icon={<BookOpen strokeWidth={1.5} size={14} />} asChild>
+              <a href={`${DOCS_URL}/`} target="_blank" rel="noreferrer">
+                Docs
+              </a>
+            </ButtonGroupItem>
+            <ButtonGroupItem size="tiny" icon={<Wrench strokeWidth={1.5} size={14} />} asChild>
+              <a
+                href={`${DOCS_URL}/guides/troubleshooting?products=platform`}
+                target="_blank"
+                rel="noreferrer"
+              >
+                Troubleshooting
+              </a>
+            </ButtonGroupItem>
+            {IS_PLATFORM && (
+              <>
+                <ButtonGroupItem
+                  asChild
+                  size="tiny"
+                  icon={<Activity strokeWidth={1.5} size={14} />}
+                >
+                  <a href="https://status.supabase.com/" target="_blank" rel="noreferrer">
+                    Supabase status
+                  </a>
+                </ButtonGroupItem>
+
+                <ButtonGroupItem asChild size="tiny" icon={<Mail strokeWidth={1.5} size={14} />}>
+                  <SupportLink queryParams={supportLinkQueryParams} onClick={onClose}>
+                    Contact support
+                  </SupportLink>
+                </ButtonGroupItem>
+              </>
+            )}
+          </ButtonGroup>
+        </div>
+      </div>
+      <Separator className={__styles.separator} />
+      <div className="flex flex-col gap-4">
+        <div className="px-4 flex flex-col gap-1">
+          <h5 className="text-foreground">Community support</h5>
+          <p className="text-sm text-foreground-lighter text-balance">
+            Our Discord community can help with code-related issues. Many questions are answered in
+            minutes.
+          </p>
+        </div>
+        <div className="px-4">
+          <div
+            className="relative space-y-2 overflow-hidden rounded px-4 py-4 pb-12 shadow-md"
+            style={{ background: '#404EED' }}
+          >
+            <a
+              href="https://discord.supabase.com"
+              target="_blank"
+              rel="noreferrer"
+              className="group dark block cursor-pointer"
+            >
+              <Image
+                className="absolute left-0 top-0 opacity-50 transition-opacity group-hover:opacity-40"
+                src={`${router.basePath}/img/support/discord-bg-small.jpg`}
+                layout="fill"
+                objectFit="cover"
+                alt="Discord illustration"
+              />
+              <Button
+                type="secondary"
+                size="tiny"
+                icon={<SVG src={`${router.basePath}/img/discord-icon.svg`} className="h-4 w-4" />}
+              >
+                <span style={{ color: '#404EED' }}>Join us on Discord</span>
+              </Button>
+            </a>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}

apps/studio/components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider.tsx

@@ -6,6 +6,7 @@ import { LOCAL_STORAGE_KEYS } from 'common'
 import { AdvisorPanel } from 'components/ui/AdvisorPanel/AdvisorPanel'
 import { AIAssistant } from 'components/ui/AIAssistantPanel/AIAssistant'
 import { EditorPanel } from 'components/ui/EditorPanel/EditorPanel'
+import { HelpPanel } from 'components/ui/HelpPanel/HelpPanel'
 import { useSendEventMutation } from 'data/telemetry/send-event-mutation'
 import useLatest from 'hooks/misc/useLatest'
 import { useLocalStorageQuery } from 'hooks/misc/useLocalStorage'
@@ -17,6 +18,7 @@ export const SIDEBAR_KEYS = {
   AI_ASSISTANT: 'ai-assistant',
   EDITOR_PANEL: 'editor-panel',
   ADVISOR_PANEL: 'advisor-panel',
+  HELP_PANEL: 'help-panel',
 } as const
 
 export const LayoutSidebarProvider = ({ children }: PropsWithChildren) => {
@@ -36,6 +38,7 @@ export const LayoutSidebarProvider = ({ children }: PropsWithChildren) => {
   useRegisterSidebar(SIDEBAR_KEYS.AI_ASSISTANT, () => <AIAssistant />, {}, 'i', !!project)
   useRegisterSidebar(SIDEBAR_KEYS.EDITOR_PANEL, () => <EditorPanel />, {}, 'e', !!project)
   useRegisterSidebar(SIDEBAR_KEYS.ADVISOR_PANEL, () => <AdvisorPanel />, {}, undefined, true)
+  useRegisterSidebar(SIDEBAR_KEYS.HELP_PANEL, () => <HelpPanel />, {}, undefined, true)
 
   useEffect(() => {
     if (!!project) {

apps/studio/components/layouts/ProjectLayout/SidebarToolbar/SidebarToolbar.tsx

@@ -1,7 +1,8 @@
 import { useParams } from 'common'
 import { IS_PLATFORM } from 'lib/constants'
-import { ToolbarButton } from './ToolbarButton'
+
 import { generateToolbarItems } from './SidebarToolbar.utils'
+import { ToolbarButton } from './ToolbarButton'
 
 export const SidebarToolbar = () => {
   const { ref: projectRef } = useParams()
@@ -16,7 +17,7 @@ export const SidebarToolbar = () => {
   const enabledItems = toolbarItems.filter((item) => item.enabled)
 
   return (
-    <div className="flex flex-col w-[50px] h-full border-l">
+    <div className="flex flex-col w-[40px] h-full border-l">
       <div className="flex flex-col items-center gap-2 p-2">
         {enabledItems.map((item) => (
           <ToolbarButton key={item.key} {...item.config} />

apps/studio/components/layouts/ProjectLayout/SidebarToolbar/SidebarToolbar.utils.tsx

@@ -1,6 +1,6 @@
 import { SIDEBAR_KEYS } from 'components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider'
 import { SqlEditor } from 'icons'
-import { Lightbulb } from 'lucide-react'
+import { Lightbulb, HelpCircle } from 'lucide-react'
 import { AiIconAnimation, cn } from 'ui'
 
 import { AdvisorBadge } from './AdvisorBadge'
@@ -82,5 +82,25 @@ export const generateToolbarItems = (options: GenerateToolbarItemsOptions = {}):
         badge: <AdvisorBadge projectRef={projectRef} />,
       },
     },
+    {
+      key: 'help',
+      label: 'Help & Support',
+      enabled: isPlatform,
+      config: {
+        id: 'help-trigger',
+        sidebarKey: SIDEBAR_KEYS.HELP_PANEL,
+        icon: (isOpen) => (
+          <HelpCircle
+            size={16}
+            strokeWidth={1.5}
+            className={cn(
+              'text-foreground-light group-hover:text-foreground',
+              isOpen && 'text-background group-hover:text-background'
+            )}
+          />
+        ),
+        tooltipText: 'Help & Support',
+      },
+    },
   ]
 }

apps/studio/components/layouts/ProjectLayout/SidebarToolbar/ToolbarButton.tsx

@@ -47,12 +47,13 @@ export const ToolbarButton = ({
         id={id}
         className={cn(
           'rounded-full w-[32px] h-[32px] flex items-center justify-center p-0 text-foreground-light hover:text-foreground group',
+          'border-transparent',
           isOpen && 'bg-foreground text-background hover:text-background'
         )}
         onClick={handleClick}
         tooltip={{
           content: {
-            className: 'p-1 pl-2.5',
+            className: shouldShowShortcut ? 'p-1 pl-2.5' : 'py-1.5 px-2.5',
             side: 'left',
             text: shouldShowShortcut ? (
               <div className="flex items-center gap-2.5">

apps/studio/components/ui/EditorPanel/EditorPanel.tsx

@@ -22,22 +22,22 @@ import { useSidebarManagerSnapshot } from 'state/sidebar-manager-state'
 import { useSqlEditorV2StateSnapshot } from 'state/sql-editor-v2'
 import {
   Button,
+  cn,
   CodeBlock,
+  Command_Shadcn_,
   CommandEmpty_Shadcn_,
   CommandGroup_Shadcn_,
   CommandInput_Shadcn_,
   CommandItem_Shadcn_,
   CommandList_Shadcn_,
-  Command_Shadcn_,
+  HoverCard_Shadcn_,
   HoverCardContent_Shadcn_,
   HoverCardTrigger_Shadcn_,
-  HoverCard_Shadcn_,
   KeyboardShortcut,
+  Popover_Shadcn_,
   PopoverContent_Shadcn_,
   PopoverTrigger_Shadcn_,
-  Popover_Shadcn_,
   SQL_ICON,
-  cn,
 } from 'ui'
 import { Admonition } from 'ui-patterns'
 

apps/studio/components/ui/HelpPanel/HelpPanel.tsx

@@ -0,0 +1,31 @@
+import { HelpContent } from 'components/layouts/ProjectLayout/LayoutHeader/HelpPopover'
+import { SIDEBAR_KEYS } from 'components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider'
+import { ButtonTooltip } from 'components/ui/ButtonTooltip'
+import { X } from 'lucide-react'
+import { useSidebarManagerSnapshot } from 'state/sidebar-manager-state'
+
+export const HelpPanel = () => {
+  const { closeSidebar } = useSidebarManagerSnapshot()
+
+  const handleClose = () => {
+    closeSidebar(SIDEBAR_KEYS.HELP_PANEL)
+  }
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="flex items-center justify-between pl-4 pr-3 py-2 border-b">
+        <h3 className="text-xs">Help & Support</h3>
+        <ButtonTooltip
+          type="text"
+          className="w-7 h-7 p-0"
+          icon={<X strokeWidth={1.5} />}
+          onClick={handleClose}
+          tooltip={{ content: { side: 'bottom', text: 'Close Help & Support' } }}
+        />
+      </div>
+      <div className="flex-1 overflow-y-auto py-4">
+        <HelpContent onClose={handleClose} />
+      </div>
+    </div>
+  )
+}