chore: Enhance the title tag on dashboard pages

Co-authored-by: BikashSah999 <51731962+BikashSah999@users.noreply.github.com>

studio/components/layouts/ProjectLayout/ProjectLayout.tsx

@@ -26,6 +26,7 @@ export interface ProjectLayoutProps {
   hideHeader?: boolean
   hideIconBar?: boolean
   children: ReactNode
+  selectedTable?: string
 }
 
 const ProjectLayout = ({
@@ -36,12 +37,13 @@ const ProjectLayout = ({
   children,
   hideHeader = false,
   hideIconBar = false,
+  selectedTable,
 }: ProjectLayoutProps) => {
   const { ui } = useStore()
   const router = useRouter()
   const { ref: projectRef } = useParams()
   const ongoingIncident = useFlag('ongoingIncident')
-  const projectName = ui.selectedProject?.name
+  const organizationName = ui.selectedOrganization?.name
 
   const isPaused = ui.selectedProject?.status === PROJECT_STATUS.INACTIVE
   const ignorePausedState =
@@ -52,7 +54,13 @@ const ProjectLayout = ({
     <ProjectContextProvider projectRef={projectRef}>
       <Head>
         <title>
-          {title ? `${title} | Supabase` : projectName ? `${projectName} | Supabase` : 'Supabase'}
+          {title
+            ? `${title} | Supabase`
+            : selectedTable
+            ? `${selectedTable} | ${organizationName} | Supabase`
+            : organizationName
+            ? `${organizationName} | Supabase`
+            : 'Supabase'}
         </title>
         <meta name="description" content="Supabase Studio" />
       </Head>

studio/components/layouts/TableEditorLayout/TableEditorLayout.tsx

@@ -19,6 +19,7 @@ import useTableRowsPrefetchWrapper from './TableEditorLayout.utils'
 
 export interface TableEditorLayoutProps {
   selectedSchema?: string
+  selectedTable?: string
   onSelectSchema: (schema: string) => void
   onAddTable: () => void
   onEditTable: (table: Entity) => void
@@ -28,6 +29,7 @@ export interface TableEditorLayoutProps {
 
 const TableEditorLayout = ({
   selectedSchema,
+  selectedTable,
   onSelectSchema = noop,
   onAddTable = noop,
   onEditTable = noop,
@@ -123,6 +125,7 @@ const TableEditorLayout = ({
   return (
     <ProjectLayout
       product="Table editor"
+      selectedTable={selectedTable}
       productMenu={
         <TableEditorMenu
           selectedSchema={selectedSchema}

studio/pages/project/[ref]/editor/[id].tsx

@@ -270,6 +270,7 @@ const TableEditorPage: NextPageWithLayout = () => {
   return (
     <TableEditorLayout
       selectedSchema={selectedSchema}
+      selectedTable={selectedTable?.name}
       onSelectSchema={setSelectedSchema}
       onAddTable={onAddTable}
       onEditTable={onEditTable}