scroll to table/relationship

src/pages/editor-page/side-panel/relationships-section/relationship-list/relationship-list-item/relationship-list-item.tsx

@@ -12,11 +12,12 @@ export interface RelationshipListItemProps {
     relationship: DBRelationship;
 }
 
-export const RelationshipListItem: React.FC<RelationshipListItemProps> = ({
-    relationship,
-}) => {
+export const RelationshipListItem = React.forwardRef<
+    React.ElementRef<typeof AccordionItem>,
+    RelationshipListItemProps
+>(({ relationship }, ref) => {
     return (
-        <AccordionItem value={relationship.id} className="rounded-md">
+        <AccordionItem value={relationship.id} className="rounded-md" ref={ref}>
             <AccordionTrigger
                 asChild
                 className="hover:no-underline hover:bg-accent rounded-md px-2 py-0 data-[state=open]:rounded-b-none"
@@ -28,4 +29,6 @@ export const RelationshipListItem: React.FC<RelationshipListItemProps> = ({
             </AccordionContent>
         </AccordionItem>
     );
-};
+});
+
+RelationshipListItem.displayName = 'RelationshipListItem';

src/pages/editor-page/side-panel/relationships-section/relationship-list/relationship-list.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback, useEffect } from 'react';
 import { Accordion } from '@/components/accordion/accordion';
 import { RelationshipListItem } from './relationship-list-item/relationship-list-item';
 import { DBRelationship } from '@/lib/domain/db-relationship';
@@ -13,6 +13,29 @@ export const RelationshipList: React.FC<TableListProps> = ({
 }) => {
     const { openRelationshipFromSidebar, openedRelationshipInSidebar } =
         useLayout();
+
+    const refs = relationships.reduce(
+        (acc, relationship) => {
+            acc[relationship.id] = React.createRef();
+            return acc;
+        },
+        {} as Record<string, React.RefObject<HTMLDivElement>>
+    );
+
+    const scrollToRelationship = useCallback(
+        (id: string) =>
+            refs[id].current?.scrollIntoView({
+                behavior: 'smooth',
+                block: 'center',
+            }),
+        [refs]
+    );
+
+    useEffect(() => {
+        if (openedRelationshipInSidebar) {
+            scrollToRelationship(openedRelationshipInSidebar);
+        }
+    }, [openedRelationshipInSidebar, scrollToRelationship]);
     return (
         <Accordion
             type="single"
@@ -25,6 +48,7 @@ export const RelationshipList: React.FC<TableListProps> = ({
                 <RelationshipListItem
                     key={relationship.id}
                     relationship={relationship}
+                    ref={refs[relationship.id]}
                 />
             ))}
         </Accordion>

src/pages/editor-page/side-panel/tables-section/table-list/table-list-item/table-list-item.tsx

@@ -12,9 +12,12 @@ export interface TableListItemProps {
     table: DBTable;
 }
 
-export const TableListItem: React.FC<TableListItemProps> = ({ table }) => {
+export const TableListItem = React.forwardRef<
+    React.ElementRef<typeof AccordionItem>,
+    TableListItemProps
+>(({ table }, ref) => {
     return (
-        <AccordionItem value={table.id} className="rounded-md">
+        <AccordionItem value={table.id} className="rounded-md" ref={ref}>
             <AccordionTrigger
                 className="hover:no-underline hover:bg-accent rounded-md px-2 border-l-[6px] py-0 data-[state=open]:rounded-b-none"
                 style={{
@@ -29,4 +32,6 @@ export const TableListItem: React.FC<TableListItemProps> = ({ table }) => {
             </AccordionContent>
         </AccordionItem>
     );
-};
+});
+
+TableListItem.displayName = 'TableListItem';

src/pages/editor-page/side-panel/tables-section/table-list/table-list.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback, useEffect } from 'react';
 import { Accordion } from '@/components/accordion/accordion';
 import { TableListItem } from './table-list-item/table-list-item';
 import { DBTable } from '@/lib/domain/db-table';
@@ -10,6 +10,29 @@ export interface TableListProps {
 
 export const TableList: React.FC<TableListProps> = ({ tables }) => {
     const { openTableFromSidebar, openedTableInSidebar } = useLayout();
+    const refs = tables.reduce(
+        (acc, table) => {
+            acc[table.id] = React.createRef();
+            return acc;
+        },
+        {} as Record<string, React.RefObject<HTMLDivElement>>
+    );
+
+    const scrollToTable = useCallback(
+        (id: string) =>
+            refs[id].current?.scrollIntoView({
+                behavior: 'smooth',
+                block: 'center',
+            }),
+        [refs]
+    );
+
+    useEffect(() => {
+        if (openedTableInSidebar) {
+            scrollToTable(openedTableInSidebar);
+        }
+    }, [openedTableInSidebar, scrollToTable]);
+
     return (
         <Accordion
             type="single"
@@ -19,7 +42,11 @@ export const TableList: React.FC<TableListProps> = ({ tables }) => {
             onValueChange={openTableFromSidebar}
         >
             {tables.map((table) => (
-                <TableListItem key={table.id} table={table} />
+                <TableListItem
+                    key={table.id}
+                    table={table}
+                    ref={refs[table.id]}
+                />
             ))}
         </Accordion>
     );