Merge pull request #211 from liam-hq/active-table-node-color

feat: enhance TableNode styling and active state indication

frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableNode.module.css

@@ -2,14 +2,21 @@
   border-radius: var(--border-radius-md);
   border: 1px solid var(--overlay-20);
   width: 172px;
-  transition: border-color 300ms var(--default-timing-function);
+  transition: border-color 300ms var(--default-timing-function), border-width
+    300ms var(--default-timing-function);
 }
 
 .wrapper:hover {
   border: 1px solid var(--primary-accent);
   box-shadow: 0px 0px 20px 0px rgba(29, 237, 131, 0.4);
 }
 
+.wrapperActive,
+.wrapperActive:hover {
+  border: 2px solid var(--primary-accent);
+  box-shadow: 0px 0px 20px 0px rgba(29, 237, 131, 0.4);
+}
+
 .columnWrapper {
   display: grid;
   grid-template-columns: auto 1fr;

frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableNode.tsx

@@ -1,7 +1,12 @@
-import { updateActiveTableName, useDBStructureStore } from '@/stores'
+import {
+  updateActiveTableName,
+  useDBStructureStore,
+  useUserEditingStore,
+} from '@/stores'
 import type { Table } from '@liam-hq/db-structure'
 import { DiamondFillIcon, DiamondIcon, KeyRound } from '@liam-hq/ui'
 import { Handle, type Node, type NodeProps, Position } from '@xyflow/react'
+import clsx from 'clsx'
 import { type FC, useCallback } from 'react'
 import { TableHeader } from './TableHeader'
 import styles from './TableNode.module.css'
@@ -16,12 +21,20 @@ type Props = NodeProps<TableNodeType>
 
 export const TableNode: FC<Props> = ({ data: { table } }) => {
   const { relationships } = useDBStructureStore()
+  const {
+    active: { tableName },
+  } = useUserEditingStore()
+  const isActive = tableName === table.name
   const handleClick = useCallback(() => {
     updateActiveTableName(table.name)
   }, [table])
 
   return (
-    <button type="button" className={styles.wrapper} onClick={handleClick}>
+    <button
+      type="button"
+      className={clsx(styles.wrapper, isActive && styles.wrapperActive)}
+      onClick={handleClick}
+    >
       <TableHeader name={table.name} />
       <ul>
         {Object.values(table.columns).map((column) => {