[pull] master from supabase:master

.gitignore

@@ -116,6 +116,10 @@ next-env.d.ts
 .idea
 .vercel
 
+# AI assistant local files
+.serena/
+CLAUDE.md
+
 #include template .env file for docker-compose
 !docker/.env
 !docker/supabase/.env

apps/design-system/content/docs/components/table.mdx

@@ -1,44 +1,16 @@
 ---
 title: Table
-description: A responsive table component.
+description: A responsive table component for basic data.
 component: true
-source:
-  shadcn: true
 ---
 
-<ComponentPreview name="table-demo" peekCode wide />
-
-## Installation
-
-<Tabs defaultValue="cli">
-
-<TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
-  <TabsTrigger value="manual">Manual</TabsTrigger>
-</TabsList>
-<TabsContent value="cli">
-
-```bash
-npx shadcn-ui@latest add table
-```
-
-</TabsContent>
+Table presents basic tabular data presentation within a [Card](/docs/components/card).
 
-<TabsContent value="manual">
-
-<Steps>
-
-<Step>Copy and paste the following code into your project.</Step>
-
-<ComponentSource name="table" />
-
-<Step>Update the import paths to match your project setup.</Step>
-
-</Steps>
+<ComponentPreview name="table-demo" peekCode wide />
 
-</TabsContent>
+Columns will naturally take the width of their content. Width specification is therefore not required unless you require columns to span a specific width. An example use-case may be when placing multiple Table instances on the one page, where columns on each table should optically align.
 
-</Tabs>
+`TableHead` includes a `whitespace-nowrap` utility class to prevent its text from wrapping. `TableCell` must have any custom width specified, as there are legitimate use cases for both wrapping (or truncated) text.
 
 ## Usage
 
@@ -59,7 +31,7 @@ import {
   <TableCaption>A list of your recent invoices.</TableCaption>
   <TableHeader>
     <TableRow>
-      <TableHead className="w-[100px]">Invoice</TableHead>
+      <TableHead>Invoice</TableHead>
       <TableHead>Status</TableHead>
       <TableHead>Method</TableHead>
       <TableHead className="text-right">Amount</TableHead>

apps/design-system/registry/default/example/table-demo.tsx

@@ -1,4 +1,5 @@
 import {
+  Card,
   Table,
   TableBody,
   TableCaption,
@@ -14,74 +15,87 @@ const invoices = [
     invoice: 'INV001',
     paymentStatus: 'Paid',
     totalAmount: '$250.00',
-    paymentMethod: 'Credit Card',
+    paymentMethod: 'Credit card',
+    description: 'Website design services',
   },
   {
     invoice: 'INV002',
     paymentStatus: 'Pending',
     totalAmount: '$150.00',
     paymentMethod: 'PayPal',
+    description: 'Monthly subscription fee',
   },
   {
     invoice: 'INV003',
     paymentStatus: 'Unpaid',
     totalAmount: '$350.00',
-    paymentMethod: 'Bank Transfer',
+    paymentMethod: 'Bank transfer',
+    description: 'Consulting hours',
   },
   {
     invoice: 'INV004',
     paymentStatus: 'Paid',
     totalAmount: '$450.00',
-    paymentMethod: 'Credit Card',
+    paymentMethod: 'Credit card',
+    description: 'Software license renewal',
   },
   {
     invoice: 'INV005',
     paymentStatus: 'Paid',
     totalAmount: '$550.00',
     paymentMethod: 'PayPal',
+    description: 'Custom development work',
   },
   {
     invoice: 'INV006',
     paymentStatus: 'Pending',
     totalAmount: '$200.00',
-    paymentMethod: 'Bank Transfer',
+    paymentMethod: 'Bank transfer',
+    description: 'Hosting and maintenance',
   },
   {
     invoice: 'INV007',
     paymentStatus: 'Unpaid',
     totalAmount: '$300.00',
-    paymentMethod: 'Credit Card',
+    paymentMethod: 'Credit card',
+    description: 'Training session package',
   },
 ]
 
 export default function TableDemo() {
   return (
-    <Table>
-      <TableCaption>A list of your recent invoices.</TableCaption>
-      <TableHeader>
-        <TableRow>
-          <TableHead className="w-[100px]">Invoice</TableHead>
-          <TableHead>Status</TableHead>
-          <TableHead>Method</TableHead>
-          <TableHead className="text-right">Amount</TableHead>
-        </TableRow>
-      </TableHeader>
-      <TableBody>
-        {invoices.map((invoice) => (
-          <TableRow key={invoice.invoice}>
-            <TableCell className="font-medium">{invoice.invoice}</TableCell>
-            <TableCell>{invoice.paymentStatus}</TableCell>
-            <TableCell>{invoice.paymentMethod}</TableCell>
-            <TableCell className="text-right">{invoice.totalAmount}</TableCell>
+    <Card className="w-full pb-4">
+      <Table>
+        <TableCaption>A list of your recent invoices</TableCaption>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Invoice</TableHead>
+            <TableHead>Status</TableHead>
+            <TableHead>Method</TableHead>
+            <TableHead className="hidden md:table-cell">Description</TableHead>
+            <TableHead className="text-right">Amount</TableHead>
           </TableRow>
-        ))}
-      </TableBody>
-      <TableFooter>
-        <TableRow>
-          <TableCell colSpan={3}>Total</TableCell>
-          <TableCell className="text-right">$2,500.00</TableCell>
-        </TableRow>
-      </TableFooter>
-    </Table>
+        </TableHeader>
+        <TableBody>
+          {invoices.map((invoice) => (
+            <TableRow key={invoice.invoice}>
+              <TableCell className="text-foreground">{invoice.invoice}</TableCell>
+              <TableCell className="text-foreground-lighter">{invoice.paymentStatus}</TableCell>
+              <TableCell className="text-foreground-lighter">{invoice.paymentMethod}</TableCell>
+              <TableCell className="hidden md:table-cell text-foreground-muted">
+                {invoice.description}
+              </TableCell>
+              <TableCell className="text-right">{invoice.totalAmount}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+        <TableFooter className="border-t">
+          <TableRow>
+            <TableCell colSpan={4}>Total</TableCell>
+            <TableCell className="text-right">$2,250.00</TableCell>
+          </TableRow>
+        </TableFooter>
+      </Table>
+    </Card>
   )
 }

apps/docs/components/Navigation/NavigationMenu/TopNavDropdown.tsx

@@ -20,18 +20,25 @@ import {
   themes,
 } from 'ui'
 import MenuIconPicker from './MenuIconPicker'
+import { isFeatureEnabled } from 'common'
 
 const menu = [
   [
-    {
-      label: 'Supabase.com',
-      icon: 'home',
-      href: 'https://supabase.com',
-      otherProps: {
-        target: '_blank',
-        rel: 'noreferrer noopener',
-      },
-    },
+    isFeatureEnabled('docs:navigation_dropdown_links_home')
+      ? {
+          label: 'Supabase.com',
+          icon: 'home',
+          href: 'https://supabase.com',
+          otherProps: {
+            target: '_blank',
+            rel: 'noreferrer noopener',
+          },
+        }
+      : {
+          label: 'Dashboard',
+          icon: 'home',
+          href: '../dashboard',
+        },
     {
       label: 'GitHub',
       icon: 'github',

apps/docs/components/Navigation/NavigationMenu/useDropdownMenu.tsx

@@ -1,8 +1,8 @@
 'use client'
 
 import type { User } from '@supabase/supabase-js'
-import { LogOut, Globe, LifeBuoy, Settings, UserIcon, Database } from 'lucide-react'
-import { logOut } from 'common'
+import { isFeatureEnabled, logOut } from 'common'
+import { Database, Globe, Home, LifeBuoy, LogOut, Settings, UserIcon } from 'lucide-react'
 
 import type { menuItem } from 'ui-patterns/AuthenticatedDropdownMenu'
 import { IconGitHub } from './MenuIcons'
@@ -27,15 +27,21 @@ const useDropdownMenu = (user: User | null) => {
       },
     ],
     [
-      {
-        label: 'Supabase.com',
-        icon: Globe,
-        href: 'https://supabase.com',
-        otherProps: {
-          target: '_blank',
-          rel: 'noreferrer noopener',
-        },
-      },
+      isFeatureEnabled('docs:navigation_dropdown_links_home')
+        ? {
+            label: 'Supabase.com',
+            icon: Globe,
+            href: 'https://supabase.com',
+            otherProps: {
+              target: '_blank',
+              rel: 'noreferrer noopener',
+            },
+          }
+        : {
+            label: 'Dashboard',
+            icon: Home,
+            href: '../dashboard',
+          },
       {
         label: 'GitHub',
         icon: IconGitHub as any,

apps/studio/components/interfaces/Database/ETL/Destinations.tsx

@@ -117,16 +117,16 @@ export const Destinations = () => {
       </div>
 
       <div className="w-full overflow-hidden overflow-x-auto">
-        {(isSourcesLoading || isDestinationsLoading) && <GenericSkeletonLoader />}
-
         {(isSourcesError || isDestinationsError) && (
           <AlertError
             error={sourcesError || destinationsError}
             subject={PIPELINE_ERROR_MESSAGES.RETRIEVE_DESTINATIONS}
           />
         )}
 
-        {replicationNotEnabled ? (
+        {isSourcesLoading || isDestinationsLoading ? (
+          <GenericSkeletonLoader />
+        ) : replicationNotEnabled ? (
           <div className="border rounded-md p-4 md:p-12 flex flex-col gap-y-4">
             <div className="flex flex-col gap-y-1">
               <h3>Stream data to external destinations in real-time</h3>

apps/studio/components/interfaces/Database/ETL/NewPublicationPanel.tsx

@@ -5,7 +5,7 @@ import { toast } from 'sonner'
 import { z } from 'zod'
 
 import { useParams } from 'common'
-import { useCreatePublicationMutation } from 'data/etl/create-publication-mutation'
+import { useCreatePublicationMutation } from 'data/etl/publication-create-mutation'
 import { useReplicationTablesQuery } from 'data/etl/tables-query'
 import {
   Button,
@@ -139,7 +139,7 @@ export const NewPublicationPanel = ({ visible, sourceId, onClose }: NewPublicati
                             </MultiSelector.Trigger>
                             <MultiSelector.Content>
                               <MultiSelector.List>
-                                {tables?.tables.map((table) => (
+                                {tables?.map((table) => (
                                   <MultiSelector.Item
                                     key={`${table.schema}.${table.name}`}
                                     value={`${table.schema}.${table.name}`}

apps/studio/components/interfaces/Database/Publications/PublicationsList.tsx

@@ -147,25 +147,27 @@ export const PublicationsList = () => {
               {isSuccess &&
                 publications.map((x) => (
                   <TableRow key={x.name}>
-                    <TableCell className="flex items-center gap-x-2 items-center">
-                      {x.name}
-                      {/* [Joshen] Making this tooltip very specific for these 2 publications */}
-                      {['supabase_realtime', 'supabase_realtime_messages_publication'].includes(
-                        x.name
-                      ) && (
-                        <Tooltip>
-                          <TooltipTrigger>
-                            <Info size={14} className="text-foreground-light" />
-                          </TooltipTrigger>
-                          <TooltipContent side="bottom">
-                            {x.name === 'supabase_realtime'
-                              ? 'This publication is managed by Supabase and handles Postgres changes'
-                              : x.name === 'supabase_realtime_messages_publication'
-                                ? 'This publication is managed by Supabase and handles broadcasts from the database'
-                                : undefined}
-                          </TooltipContent>
-                        </Tooltip>
-                      )}
+                    <TableCell>
+                      <div className="flex items-center gap-x-2">
+                        {x.name}
+                        {/* [Joshen] Making this tooltip very specific for these 2 publications */}
+                        {['supabase_realtime', 'supabase_realtime_messages_publication'].includes(
+                          x.name
+                        ) && (
+                          <Tooltip>
+                            <TooltipTrigger>
+                              <Info size={14} className="text-foreground-light" />
+                            </TooltipTrigger>
+                            <TooltipContent side="bottom">
+                              {x.name === 'supabase_realtime'
+                                ? 'Managed by Supabase and handles Postgres changes'
+                                : x.name === 'supabase_realtime_messages_publication'
+                                  ? 'Managed by Supabase and handles broadcasts from the database'
+                                  : undefined}
+                            </TooltipContent>
+                          </Tooltip>
+                        )}
+                      </div>
                     </TableCell>
                     <TableCell>{x.id}</TableCell>
                     {publicationEvents.map((event) => (

apps/studio/components/interfaces/Database/Publications/PublicationsTableItem.tsx

@@ -78,8 +78,8 @@ export const PublicationsTableItem = ({
   return (
     <TableRow key={table.id}>
       <TableCell className="py-3 whitespace-nowrap">{table.name}</TableCell>
-      <TableCell className="py-3 whitespace-nowrap">{table.schema}</TableCell>
-      <TableCell className="py-3 hidden max-w-sm truncate whitespace-nowrap lg:table-cell">
+      <TableCell className="py-3 whitespace-nowrap text-foreground-light">{table.schema}</TableCell>
+      <TableCell className="py-3 whitespace-nowrap hidden lg:table-cell max-w-sm truncate text-foreground-light">
         {table.comment}
       </TableCell>
       <TableCell className="py-3">

apps/studio/components/interfaces/Database/Publications/PublicationsTables.tsx

@@ -102,7 +102,7 @@ export const PublicationsTables = () => {
                 <TableRow>
                   <TableHead>Name</TableHead>
                   <TableHead>Schema</TableHead>
-                  <TableHead>Description</TableHead>
+                  <TableHead className="hidden lg:table-cell">Description</TableHead>
                   {/* 
                       We've disabled All tables toggle for publications. 
                       See https://github.com/supabase/supabase/pull/7233.