Repository: supabase/supabase
File: apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/TableQuickstart/QuickstartTemplatesWidget.tsx (TypeScript)

Code before:
  const [activeCategory, setActiveCategory] = useState<string | null>(null)
  const track = useTrack()

  useEffect(() => {
    if (activeCategory === null && CATEGORIES.length > 0) {
      setActiveCategory(CATEGORIES[0])
    }
  }, [activeCategory])

  const handleCategorySelect = useCallback(
    (category: string) => {
      setActiveCategory(category)
      track('table_quickstart_category_clicked', {
        categoryName: category,
      })
    },
    [track]
  )

  const handleSelectTemplate = useCallback(
    (template: TableSuggestion) => {
      track('table_quickstart_template_clicked', {
        tableName: template.tableName,
        columnCount: template.fields.length,
        source: 'templates',
        categoryName: activeCategory || 'Unknown',
      })

      const tableField = convertTableSuggestionToTableField(template)
      onSelectTemplate(tableField)
      toast.success(`Applied ${template.tableName} template. You can customize the fields below.`, {
        duration: SUCCESS_MESSAGE_DURATION_MS,
      })
    },
    [onSelectTemplate, track, activeCategory]
  )

  const displayedTemplates = activeCategory ? tableTemplates[activeCategory] || [] : []

  return (
    <div className="rounded-lg border border-default bg-surface-100 p-6 transition-all hover:border-foreground-muted">
      <div className="mb-4">
        <div className="flex items-center gap-2 mb-2">
          <Layers size={16} className="text-foreground" />
          <h3 className="text-base font-medium">Table quickstarts</h3>
        </div>
        <p className="text-sm text-foreground-lighter">
          Select a pre-built schema to get started quickly.
        </p>
      </div>


Review comment (suggestion):
nit: lets use `??` thoughts?

```suggestion
        categoryName: activeCategory ?? 'Unknown',
```

Code after:
  const [activeCategory, setActiveCategory] = useState<string | null>(null)
  const track = useTrack()

  useEffect(() => {
    if (activeCategory === null && CATEGORIES.length > 0) {
      setActiveCategory(CATEGORIES[0])
    }
  }, [activeCategory])

  const handleCategorySelect = useCallback(
    (category: string) => {
      setActiveCategory(category)
      track('table_quickstart_category_clicked', {
        categoryName: category,
      })
    },
    [track]
  )

  const handleSelectTemplate = useCallback(
    (template: TableSuggestion) => {
      track('table_quickstart_template_clicked', {
        tableName: template.tableName,
        columnCount: template.fields.length,
        source: 'templates',
        categoryName: activeCategory ?? 'Unknown',
      })

      const tableField = convertTableSuggestionToTableField(template)
      onSelectTemplate(tableField)
      toast.success(`Applied ${template.tableName} template. You can customize the fields below.`, {
        duration: SUCCESS_MESSAGE_DURATION_MS,
      })
    },
    [onSelectTemplate, track, activeCategory]
  )

  const displayedTemplates = activeCategory ? tableTemplates[activeCategory] || [] : []

  return (
    <div className="rounded-lg border border-default bg-surface-100 p-6 transition-all hover:border-foreground-muted">
      <div className="mb-4">
        <div className="flex items-center gap-2 mb-2">
          <Layers size={16} className="text-foreground" />
          <h3 className="text-base font-medium">Table quickstarts</h3>
        </div>
        <p className="text-sm text-foreground-lighter">
          Select a pre-built schema to get started quickly.
        </p>
      </div>