chore(studio): restore feedback gating (#42548)

## What kind of change does this PR introduce? UI improvement for self-debugging efforts. ## What is the current behavior? https://github.com/supabase/supabase/pull/40937 removed our gating on the feedback form (plus some related affordances) in an effort to concentrate support entry into the Help dropdown instead: | Before | After | | --- | --- | | <img width="1090" height="579" alt="Inventory Nuts Bolts Supabase" src="https://github.com/user-attachments/assets/c7dacf40-5ae8-401c-a167-5e56c4c0635d" /> | _Not applicable. This step is skipped in the new version._ | | <img width="1090" height="579" alt="Inventory Nuts Bolts Supabase" src="https://github.com/user-attachments/assets/9bd2489d-7e87-49e5-99af-13eb5f387f60" /> | <img width="1090" height="579" alt="Inventory Nuts Bolts Supabase" src="https://github.com/user-attachments/assets/fa499a40-6d70-4674-9eb6-c7bd96019b27" /> | | <img width="1090" height="579" alt="Inventory Nuts Bolts Supabase" src="https://github.com/user-attachments/assets/e253381b-e8ba-476c-bd36-9dd522209498" /> | <img width="1090" height="579" alt="Inventory Nuts Bolts Supabase" src="https://github.com/user-attachments/assets/b5cf614b-329c-4517-90e9-c4d1b49bd139" /> | Despite putting other measures in place such as client-side form detection, the result is that people are increasingly writing in to support via the Feedback form. ## What is the new behavior? - Restores the gating - But also reuses the same self-debugging help options from the Help dropdown Other: - Renames `HelpPopover` to `HelpDropdown` to match others - Adjusts font size of `CommandMenu` _Search..._ | Before | After | | --- | --- | | <img width="1024" height="756" alt="Spinner Toolshed Supabase" src="https://github.com/user-attachments/assets/12e3be32-743d-488a-a13d-bf400fd0fd8d" /> | <img width="1024" height="756" alt="Spinner Toolshed Supabase" src="https://github.com/user-attachments/assets/bb064ef1-a771-416d-9b5b-dbdd774efed3" /> | | _Not applicable. This step is skipped in the old version._ | <img width="1024" height="756" alt="Spinner Toolshed Supabase" src="https://github.com/user-attachments/assets/3bc0b1c2-7003-4973-8e9c-2c7ee93fb0b4" /> | | <img width="1024" height="756" alt="Spinner Toolshed Supabase" src="https://github.com/user-attachments/assets/0bb18df4-d093-4440-8379-680f6c5e3cf9" /> | <img width="1024" height="756" alt="Spinner Toolshed Supabase" src="https://github.com/user-attachments/assets/1ef801d3-9cd7-4005-9082-8d229b7cdd19" /> | | <img width="1090" height="579" alt="Inventory Nuts Bolts Supabase" src="https://github.com/user-attachments/assets/e253381b-e8ba-476c-bd36-9dd522209498" /> | <img width="1024" height="794" alt="Spinner Toolshed Supabase" src="https://github.com/user-attachments/assets/b80de142-2199-420f-9018-8622b6d24312" /> | ## To test To test the “thanks” end state, add something like the following to `feedback-send.ts`: ```ts if (MOCK_FEEDBACK_SUCCESS) { return {} as Awaited<ReturnType<typeof sendFeedback>> } ``` Where `MOCK_FEEDBACK_SUCCESS` is `true`.  ## Summary by CodeRabbit ## Release Notes * **New Features** * Introduced multi-stage feedback dropdown with Issue and Idea selection paths. * Added AI assistant integration in help menu for quick support access. * Enhanced help dropdown with expanded options: documentation, troubleshooting, Discord community, system status, and support links. * Added Community Support section featuring Discord community promotion. * **Style** * Refined command menu placeholder text sizing for improved visual hierarchy.  --------- Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2026-10-05 09:25:06 +03:00 · 2026-02-10 09:48:54 +11:00
1 parent d9e0f01bf5
commit ee484c8517
@@ -100,7 +100,7 @@ const UserDashboard = () => {

 ### Co-locate related components

-Place sub-components in the same directory as the parent component. Use an index file for cleaner imports.
+Place sub-components in the same directory as the parent component. Avoid using barrel files (files that do nothing but re-export things from other files) for imports.

 ```
 components/interfaces/Auth/Users/
@@ -1,10 +1,40 @@
+import { IS_PLATFORM } from 'common'
+import { SIDEBAR_KEYS } from 'components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider'
+import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization'
+import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
+import { Lightbulb, TriangleAlert } from 'lucide-react'
+import { useRouter } from 'next/router'
 import { useState } from 'react'
+import { useAiAssistantStateSnapshot } from 'state/ai-assistant-state'
+import { useSidebarManagerSnapshot } from 'state/sidebar-manager-state'
+import {
+  Button,
+  Popover_Shadcn_,
+  PopoverContent_Shadcn_,
+  PopoverSeparator_Shadcn_,
+  PopoverTrigger_Shadcn_,
+} from 'ui'

-import { Button, PopoverContent_Shadcn_, PopoverTrigger_Shadcn_, Popover_Shadcn_ } from 'ui'
+import { ASSISTANT_SUGGESTIONS } from '../HelpDropdown/HelpDropdown.constants'
+import { getSupportLinkQueryParams } from '../HelpDropdown/HelpDropdown.utils'
+import { HelpSection } from '../HelpDropdown/HelpSection'
 import { FeedbackWidget } from './FeedbackWidget'

 export const FeedbackDropdown = ({ className }: { className?: string }) => {
+  const router = useRouter()
+  const { data: project } = useSelectedProjectQuery()
+  const { data: org } = useSelectedOrganizationQuery()
+  const snap = useAiAssistantStateSnapshot()
+  const { openSidebar } = useSidebarManagerSnapshot()
  const [isOpen, setIsOpen] = useState(false)
+  const [stage, setStage] = useState<'select' | 'issue-options' | 'widget'>('select')
+
+  const projectRef = project?.parent_project_ref ?? (router.query.ref as string | undefined)
+  const supportLinkQueryParams = getSupportLinkQueryParams(
+    project,
+    org,
+    router.query.ref as string | undefined
+  )

  return (
    <Popover_Shadcn_
@@ -12,6 +42,7 @@ export const FeedbackDropdown = ({ className }: { className?: string }) => {
      open={isOpen}
      onOpenChange={(e) => {
        setIsOpen(e)
+        if (!e) setStage('select')
      }}
    >
      <PopoverTrigger_Shadcn_ asChild>
@@ -19,6 +50,7 @@ export const FeedbackDropdown = ({ className }: { className?: string }) => {
          asChild
          onClick={() => {
            setIsOpen((isOpen) => !isOpen)
+            setStage('select')
          }}
          type="text"
          className="rounded-full h-[32px] text-foreground-light hover:text-foreground"
@@ -29,10 +61,64 @@ export const FeedbackDropdown = ({ className }: { className?: string }) => {
      <PopoverContent_Shadcn_
        side="bottom"
        align="end"
-        className="p-0 flex flex-col w-[22rem]"
+        className="p-0 flex flex-col w-96"
        id="feedback-widget"
      >
-        <FeedbackWidget onClose={() => setIsOpen(false)} />
+        {stage === 'select' && (
+          <div className="flex flex-col gap-4 p-4">
+            <div className="font-medium text-sm">What would you like to share?</div>
+            <div className="grid grid-cols-2 gap-3">
+              <Button type="default" className="h-32" onClick={() => setStage('issue-options')}>
+                <div className="grid gap-1.5 text-center">
+                  <TriangleAlert size="28" className="mx-auto text-destructive-600" />
+                  <div className="flex flex-col items-center">
+                    <span className="text-base">Issue</span>
+                    <span className="text-xs text-foreground-lighter">with my project</span>
+                  </div>
+                </div>
+              </Button>
+              <Button type="default" className="h-32" onClick={() => setStage('widget')}>
+                <div className="grid gap-1.5 text-center">
+                  <Lightbulb size="28" className="mx-auto text-warning" />
+                  <div className="flex flex-col items-center">
+                    <span className="text-base">Idea</span>
+                    <span className="text-xs text-foreground-lighter">to improve Supabase</span>
+                  </div>
+                </div>
+              </Button>
+            </div>
+          </div>
+        )}
+        {stage === 'issue-options' && (
+          <>
+            <div className="flex flex-col gap-4 p-4">
+              <HelpSection
+                excludeIds={[]}
+                isPlatform={IS_PLATFORM}
+                projectRef={projectRef}
+                supportLinkQueryParams={supportLinkQueryParams}
+                onAssistantClick={() => {
+                  openSidebar(SIDEBAR_KEYS.AI_ASSISTANT)
+                  snap.newChat(ASSISTANT_SUGGESTIONS)
+                  setIsOpen(false)
+                }}
+                onSupportClick={() => setIsOpen(false)}
+              />
+            </div>
+            <PopoverSeparator_Shadcn_ />
+            <div className="px-4 pt-4 pb-4">
+              <Button type="default" size="tiny" onClick={() => setStage('widget')}>
+                Leave feedback instead
+              </Button>
+            </div>
+          </>
+        )}
+        {stage === 'widget' && (
+          <FeedbackWidget
+            onClose={() => setIsOpen(false)}
+            onSwitchToIssueOptions={() => setStage('issue-options')}
+          />
+        )}
      </PopoverContent_Shadcn_>
    </Popover_Shadcn_>
  )
@@ -7,8 +7,8 @@ import { ChangeEvent, useEffect, useRef, useState } from 'react'
 import { toast } from 'sonner'

 import { LOCAL_STORAGE_KEYS, useParams } from 'common'
-import { SupportLink } from 'components/interfaces/Support/SupportLink'
 import { InlineLinkClassName } from 'components/ui/InlineLink'
+import { SupportLink } from 'components/interfaces/Support/SupportLink'
 import { useFeedbackCategoryQuery } from 'data/feedback/feedback-category'
 import { useSendFeedbackMutation } from 'data/feedback/feedback-send'
 import { useSendEventMutation } from 'data/telemetry/send-event-mutation'
@@ -36,9 +36,10 @@ import {

 interface FeedbackWidgetProps {
  onClose: () => void
+  onSwitchToIssueOptions: () => void
 }

-export const FeedbackWidget = ({ onClose }: FeedbackWidgetProps) => {
+export const FeedbackWidget = ({ onClose, onSwitchToIssueOptions }: FeedbackWidgetProps) => {
  const router = useRouter()
  const { profile } = useProfile()
  const { ref, slug } = useParams()
@@ -153,17 +154,46 @@ export const FeedbackWidget = ({ onClose }: FeedbackWidgetProps) => {
    }
  }

+  // Hydrate form from localStorage once it's ready; deps intentionally omit storedFeedback/screenshot
+  // so we don't overwrite user edits when those values change after initial load.
  useEffect(() => {
    if (storedFeedback) setFeedback(storedFeedback)
    if (screenshot) setScreenshot(screenshot)
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- hydrate once when localStorage is ready only
  }, [isSuccess])

+  // Persist debounced input to localStorage; only re-run when debounced value changes.
  useEffect(() => {
    if (debouncedFeedback.length > 0) setStoredFeedback(debouncedFeedback)
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- setStoredFeedback is stable; only sync on debounced value
  }, [debouncedFeedback])

+  const ThanksMessageView = () => (
+    <>
+      <div className="py-6 px-4 grid gap-4 text-center text-foreground-light">
+        <CircleCheck className="mx-auto text-brand-500" size={24} />
+        <div className="flex flex-col gap-1">
+          <p className="text-foreground text-base">Your feedback has been sent. Thanks!</p>
+          <p className="text-sm text-balance">
+            We don’t always respond to feedback. If you need help with your project, use the button
+            below.
+          </p>
+        </div>
+      </div>
+      <PopoverSeparator_Shadcn_ />
+      <div className="px-4 pt-4 pb-4 flex flex-row items-center justify-between">
+        <Button type="default" size="tiny" onClick={onSwitchToIssueOptions}>
+          Get help
+        </Button>
+        <Button type="default" size="tiny" onClick={onClose}>
+          Close
+        </Button>
+      </div>
+    </>
+  )
+
  return isFeedbackSent ? (
-    <ThanksMessage onClose={onClose} />
+    <ThanksMessageView />
  ) : (
    <>
      <div className="p-4">
@@ -208,7 +238,10 @@ export const FeedbackWidget = ({ onClose }: FeedbackWidgetProps) => {

      <PopoverSeparator_Shadcn_ />

-      <div className="p-4 flex flex-row justify-end items-start">
+      <div className="px-4 pt-4 pb-4 flex flex-row items-center justify-between">
+        <Button type="default" size="tiny" onClick={onSwitchToIssueOptions}>
+          Get help instead
+        </Button>
        <div className="flex items-center gap-2 flex-row">
          {!!screenshot ? (
            <div
@@ -292,29 +325,3 @@ export const FeedbackWidget = ({ onClose }: FeedbackWidgetProps) => {
    </>
  )
 }
-
-const ThanksMessage = ({ onClose }: { onClose: () => void }) => {
-  return (
-    <div>
-      <div className="grid gap-3 py-3">
-        <div className="px-6 grid gap-4 text-center text-foreground-light">
-          <CircleCheck className="mx-auto text-brand-500" size={24} />
-          <div className="text-center flex flex-col">
-            <p className="text-foreground text-base">Your feedback has been sent. Thanks!</p>
-            <p className="text-sm text-balance">
-              We don’t always respond to feedback. If you require assistance, please contact support
-              via the <HelpCircle className="inline-block" size={12} aria-label="Help" /> menu
-              instead.
-            </p>
-          </div>
-        </div>
-        <PopoverSeparator_Shadcn_ />
-        <div className="flex items-center justify-end px-4">
-          <Button type="default" onClick={onClose}>
-            Close
-          </Button>
-        </div>
-      </div>
-    </div>
-  )
-}
@@ -0,0 +1,29 @@
+export type HelpOptionId =
+  | 'assistant'
+  | 'docs'
+  | 'troubleshooting'
+  | 'discord'
+  | 'status'
+  | 'support'
+
+export const HELP_OPTION_IDS = [
+  'assistant',
+  'docs',
+  'troubleshooting',
+  'discord',
+  'status',
+  'support',
+] as const satisfies readonly HelpOptionId[]
+
+export const ASSISTANT_SUGGESTIONS = {
+  name: 'Support' as const,
+  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' },
+    ],
+  },
+}
@@ -0,0 +1,128 @@
+import { IS_PLATFORM } from 'common'
+import { SIDEBAR_KEYS } from 'components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider'
+import { ButtonTooltip } from 'components/ui/ButtonTooltip'
+import { useSendEventMutation } from 'data/telemetry/send-event-mutation'
+import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization'
+import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
+import { HelpCircle } 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 {
+  Button,
+  cn,
+  Popover,
+  Popover_Shadcn_,
+  PopoverContent_Shadcn_,
+  PopoverTrigger_Shadcn_,
+} from 'ui'
+
+import { ASSISTANT_SUGGESTIONS } from './HelpDropdown.constants'
+import { getSupportLinkQueryParams } from './HelpDropdown.utils'
+import { HelpSection } from './HelpSection'
+
+export const HelpDropdown = () => {
+  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)
+  const supportLinkQueryParams = getSupportLinkQueryParams(
+    project,
+    org,
+    router.query.ref as string | undefined
+  )
+
+  return (
+    <Popover_Shadcn_ open={isOpen} onOpenChange={setIsOpen}>
+      <PopoverTrigger_Shadcn_ asChild>
+        <ButtonTooltip
+          id="help-dropdown-button"
+          type="outline"
+          size="tiny"
+          className={cn(
+            'rounded-full w-[32px] h-[32px] flex items-center justify-center p-0 group',
+            isOpen && 'bg-foreground text-background'
+          )}
+          onClick={() => {
+            if (isOpen) return // Don't send telemetry event if dropdown is already open
+            sendEvent({
+              action: 'help_button_clicked',
+              groups: { project: project?.ref, organization: org?.slug },
+            })
+          }}
+          tooltip={{ content: { side: 'bottom', text: 'Help' } }}
+        >
+          <HelpCircle
+            size={16}
+            strokeWidth={1.5}
+            className={cn(
+              'text-foreground-light group-hover:text-foreground',
+              isOpen && 'text-background group-hover:text-background'
+            )}
+          />
+        </ButtonTooltip>
+      </PopoverTrigger_Shadcn_>
+      <PopoverContent_Shadcn_ className="w-[400px] space-y-5 p-0 py-5" align="end" side="bottom">
+        <HelpSection
+          className="px-5"
+          excludeIds={['discord']}
+          isPlatform={IS_PLATFORM}
+          projectRef={projectRef}
+          supportLinkQueryParams={supportLinkQueryParams}
+          onAssistantClick={() => {
+            setIsOpen(false)
+            openSidebar(SIDEBAR_KEYS.AI_ASSISTANT)
+            snap.newChat(ASSISTANT_SUGGESTIONS)
+          }}
+          onSupportClick={() => setIsOpen(false)}
+        />
+        <Popover.Separator />
+        <div className="flex flex-col gap-4">
+          <div className="px-5 flex flex-col gap-0.5">
+            <h5 className="text-foreground">Community support</h5>
+            <p className="text-xs 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_>
+    </Popover_Shadcn_>
+  )
+}
@@ -0,0 +1,12 @@
+import { SupportFormUrlKeys } from '@/components/interfaces/Support/SupportForm.utils'
+
+export function getSupportLinkQueryParams(
+  project: { parent_project_ref?: string } | undefined,
+  org: { slug?: string } | undefined,
+  routerRef: string | undefined
+): Partial<SupportFormUrlKeys> | undefined {
+  const projectRef = project?.parent_project_ref ?? routerRef
+  if (projectRef) return { projectRef }
+  if (org?.slug) return { orgSlug: org.slug }
+  return undefined
+}
@@ -0,0 +1,139 @@
+import type { SupportFormUrlKeys } from 'components/interfaces/Support/SupportForm.utils'
+import { SupportLink } from 'components/interfaces/Support/SupportLink'
+import { DOCS_URL } from 'lib/constants'
+import { Activity, BookOpen, Mail, Wrench } from 'lucide-react'
+import { useRouter } from 'next/router'
+import SVG from 'react-inlinesvg'
+import { AiIconAnimation, ButtonGroup, ButtonGroupItem } from 'ui'
+
+import type { HelpOptionId } from './HelpDropdown.constants'
+import { HELP_OPTION_IDS } from './HelpDropdown.constants'
+
+const DISCORD_URL = 'https://discord.supabase.com'
+const STATUS_URL = 'https://status.supabase.com'
+
+type HelpOptionsListProps = {
+  excludeIds?: HelpOptionId[]
+  isPlatform: boolean
+  projectRef: string | undefined
+  supportLinkQueryParams: Partial<SupportFormUrlKeys> | undefined
+  onAssistantClick?: () => void
+  onSupportClick?: () => void
+  size?: 'tiny' | 'small'
+}
+
+export const HelpOptionsList = ({
+  excludeIds = [],
+  isPlatform,
+  projectRef,
+  supportLinkQueryParams,
+  onAssistantClick,
+  onSupportClick,
+  size = 'tiny',
+}: HelpOptionsListProps) => {
+  const router = useRouter()
+  const basePath = router.basePath ?? ''
+
+  const ids = HELP_OPTION_IDS.filter((id) => !excludeIds.includes(id))
+
+  const include = (id: HelpOptionId): boolean => {
+    if (id === 'assistant') return !!projectRef
+    if (id === 'status' || id === 'support') return isPlatform
+    return true
+  }
+
+  const filteredIds = ids.filter(include)
+
+  return (
+    <ButtonGroup className="w-full">
+      {filteredIds.map((id) => {
+        switch (id) {
+          case 'assistant':
+            return (
+              <ButtonGroupItem
+                key={id}
+                size={size}
+                icon={<AiIconAnimation allowHoverEffect size={14} />}
+                onClick={onAssistantClick}
+              >
+                Supabase Assistant
+              </ButtonGroupItem>
+            )
+          case 'docs':
+            return (
+              <ButtonGroupItem
+                key={id}
+                size={size}
+                icon={<BookOpen strokeWidth={1.5} size={14} />}
+                asChild
+              >
+                <a href={`${DOCS_URL}/`} target="_blank" rel="noreferrer">
+                  Docs
+                </a>
+              </ButtonGroupItem>
+            )
+          case 'troubleshooting':
+            return (
+              <ButtonGroupItem
+                key={id}
+                size={size}
+                icon={<Wrench strokeWidth={1.5} size={14} />}
+                asChild
+              >
+                <a
+                  href={`${DOCS_URL}/guides/troubleshooting?products=platform`}
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  Troubleshooting
+                </a>
+              </ButtonGroupItem>
+            )
+          case 'discord':
+            return (
+              <ButtonGroupItem
+                key={id}
+                size={size}
+                icon={<SVG src={`${basePath}/img/discord-icon.svg`} className="h-4 w-4" />}
+                asChild
+              >
+                <a href={DISCORD_URL} target="_blank" rel="noreferrer">
+                  Ask on Discord
+                </a>
+              </ButtonGroupItem>
+            )
+          case 'status':
+            return (
+              <ButtonGroupItem
+                key={id}
+                size={size}
+                icon={<Activity strokeWidth={1.5} size={14} />}
+                asChild
+              >
+                <a href={STATUS_URL} target="_blank" rel="noreferrer">
+                  Supabase status
+                </a>
+              </ButtonGroupItem>
+            )
+          case 'support':
+            return (
+              <ButtonGroupItem
+                key={id}
+                size={size}
+                icon={<Mail strokeWidth={1.5} size={14} />}
+                asChild
+              >
+                <SupportLink queryParams={supportLinkQueryParams} onClick={onSupportClick}>
+                  Contact support
+                </SupportLink>
+              </ButtonGroupItem>
+            )
+          default: {
+            const _exhaustive: never = id
+            return null
+          }
+        }
+      })}
+    </ButtonGroup>
+  )
+}
@@ -0,0 +1,47 @@
+import type { SupportFormUrlKeys } from 'components/interfaces/Support/SupportForm.utils'
+import { cn } from 'ui'
+
+import type { HelpOptionId } from './HelpDropdown.constants'
+import { HelpOptionsList } from './HelpOptionsList'
+
+type HelpSectionProps = {
+  excludeIds?: HelpOptionId[]
+  isPlatform: boolean
+  projectRef: string | undefined
+  supportLinkQueryParams: Partial<SupportFormUrlKeys> | undefined
+  onAssistantClick?: () => void
+  onSupportClick?: () => void
+  className?: string
+}
+
+export const HelpSection = ({
+  excludeIds = [],
+  isPlatform,
+  projectRef,
+  supportLinkQueryParams,
+  onAssistantClick,
+  onSupportClick,
+  className,
+}: HelpSectionProps) => {
+  const description = projectRef
+    ? 'Start with our Assistant, docs, or community.'
+    : 'Start with our docs or community.'
+
+  return (
+    <div className={cn('flex flex-col gap-4', className)}>
+      <div className="flex flex-col gap-0.5">
+        <h5 className="text-foreground">Need help with your project?</h5>
+        <p className="text-xs text-foreground-lighter text-balance">{description}</p>
+      </div>
+      <HelpOptionsList
+        excludeIds={excludeIds}
+        isPlatform={isPlatform}
+        projectRef={projectRef}
+        supportLinkQueryParams={supportLinkQueryParams}
+        onAssistantClick={onAssistantClick}
+        onSupportClick={onSupportClick}
+        size="tiny"
+      />
+    </div>
+  )
+}
@@ -1,200 +0,0 @@
-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'
-import { SIDEBAR_KEYS } from 'components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider'
-import { ButtonTooltip } from 'components/ui/ButtonTooltip'
-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 { useAiAssistantStateSnapshot } from 'state/ai-assistant-state'
-import { useSidebarManagerSnapshot } from 'state/sidebar-manager-state'
-import {
-  AiIconAnimation,
-  Button,
-  ButtonGroup,
-  ButtonGroupItem,
-  cn,
-  Popover,
-  Popover_Shadcn_,
-  PopoverContent_Shadcn_,
-  PopoverTrigger_Shadcn_,
-} from 'ui'
-
-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>
-        <ButtonTooltip
-          id="help-popover-button"
-          type="outline"
-          size="tiny"
-          className={cn(
-            'rounded-full w-[32px] h-[32px] flex items-center justify-center p-0 group',
-            isOpen && 'bg-foreground text-background'
-          )}
-          onClick={() => {
-            sendEvent({
-              action: 'help_button_clicked',
-              groups: { project: project?.ref, organization: org?.slug },
-            })
-          }}
-          tooltip={{ content: { side: 'bottom', text: 'Help' } }}
-        >
-          <HelpCircle
-            size={16}
-            strokeWidth={1.5}
-            className={cn(
-              'text-foreground-light group-hover:text-foreground',
-              isOpen && 'text-background group-hover:text-background'
-            )}
-          />
-        </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_>
-    </Popover_Shadcn_>
-  )
-}
@@ -25,10 +25,10 @@ import { CommandMenuTriggerInput } from 'ui-patterns'
 import { DevToolbarTrigger } from 'dev-tools'
 import { BreadcrumbsView } from './BreadcrumbsView'
 import { FeedbackDropdown } from './FeedbackDropdown/FeedbackDropdown'
-import { HelpPopover } from './HelpPopover'
+import { HelpDropdown } from './HelpDropdown/HelpDropdown'
 import { HomeIcon } from './HomeIcon'
 import { LocalVersionPopover } from './LocalVersionPopover'
-import MergeRequestButton from './MergeRequestButton'
+import { MergeRequestButton } from './MergeRequestButton'
 import { Connect } from '@/components/interfaces/Connect/Connect'
 import { ConnectButton } from '@/components/interfaces/ConnectButton/ConnectButton'
 import { ConnectSheet } from '@/components/interfaces/ConnectSheet/ConnectSheet'
@@ -230,7 +230,7 @@ export const LayoutHeader = ({
                      '[&_.command-shortcut>div]:text-foreground-lighter'
                    )}
                  />
-                  <HelpPopover />
+                  <HelpDropdown />
                  <AdvisorButton projectRef={projectRef} />
                  <AnimatePresence initial={false}>
                    {!!projectRef && (
@@ -256,7 +256,7 @@ export const LayoutHeader = ({
                        [&_.command-shortcut>div]:text-foreground-lighter
                      "
                  />
-                  <HelpPopover />
+                  <HelpDropdown />
                  <AdvisorButton projectRef={projectRef} />
                  <AnimatePresence initial={false}>
                    {!!projectRef && (
@@ -1,7 +1,3 @@
-import { GitMerge } from 'lucide-react'
-import { useRouter } from 'next/router'
-import { toast } from 'sonner'
-
 import { useParams } from 'common'
 import { ButtonTooltip } from 'components/ui/ButtonTooltip'
 import { useBranchUpdateMutation } from 'data/branches/branch-update-mutation'
@@ -9,6 +5,9 @@ import { useBranchesQuery } from 'data/branches/branches-query'
 import { useSendEventMutation } from 'data/telemetry/send-event-mutation'
 import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization'
 import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
+import { GitMerge } from 'lucide-react'
+import { useRouter } from 'next/router'
+import { toast } from 'sonner'

 export const MergeRequestButton = () => {
  const { ref } = useParams()
@@ -91,5 +90,3 @@ export const MergeRequestButton = () => {
    />
  )
 }
-
-export default MergeRequestButton
@@ -199,7 +199,7 @@ function CommandMenuTriggerInput({
            strokeWidth={1.5}
            className="group-hover:text-foreground-light transition-colors"
          />
-          <p className="flex text-sm pr-2 text-foreground-muted">{placeholder}</p>
+          <p className="flex text-xs pr-2 text-foreground-muted">{placeholder}</p>
        </div>
        {showShortcut && (
          <div className="command-shortcut hidden md:flex items-center space-x-1">