Update tables to use button actions rather than link settings

packages/bbui/src/Icon/Icon.svelte

@@ -64,7 +64,7 @@
     transition: color var(--spectrum-global-animation-duration-100, 130ms);
   }
   svg.hoverable:hover {
-    color: var(--spectrum-alias-icon-color-selected-hover);
+    color: var(--spectrum-alias-icon-color-selected-hover) !important;
     cursor: pointer;
   }
 

packages/client/manifest.json

@@ -3786,29 +3786,13 @@
         "info": "Row selection is only compatible with internal or SQL tables"
       },
       {
-        "type": "boolean",
+        "type": "event",
-        "label": "Link table rows",
+        "label": "On row click",
-        "key": "linkRows"
+        "key": "onClick",
-      },
+        "context": [
           {
-        "type": "boolean",
+            "label": "Clicked row",
-        "label": "Open link screens in modal",
+            "key": "row"
-        "key": "linkPeek"
-      },
-      {
-        "type": "url",
-        "label": "Link screen",
-        "key": "linkURL"
-      },
-      {
-        "section": true,
-        "name": "Advanced",
-        "settings": [
-          {
-            "type": "field",
-            "label": "ID column for linking (appended to URL)",
-            "key": "linkColumn",
-            "placeholder": "Default"
           }
         ]
       }

packages/client/src/components/app/Layout.svelte

@@ -249,7 +249,12 @@
   </div>
   <div id="side-panel-container" class:open={$sidePanelStore.open}>
     <div class="side-panel-header">
-      <Icon name="Close" hoverable on:click={sidePanelStore.actions.close} />
+      <Icon
+        color="var(--spectrum-global-color-gray-600)"
+        name="RailRightClose"
+        hoverable
+        on:click={sidePanelStore.actions.close}
+      />
     </div>
   </div>
 </div>
@@ -345,7 +350,7 @@
     margin-right: -410px;
     display: flex;
     flex-direction: column;
-    gap: var(--spacing-xl);
+    gap: 30px;
     overflow-y: auto;
     border-left: 1px solid var(--spectrum-global-color-gray-300);
   }

packages/client/src/components/app/SidePanel.svelte

@@ -46,6 +46,7 @@
 
 <style>
   .side-panel {
+    flex: 1 1 auto;
     display: flex;
     flex-direction: column;
     justify-content: flex-start;

packages/client/src/components/app/table/Table.svelte

@@ -11,12 +11,15 @@
   export let rowCount
   export let quiet
   export let size
+  export let allowSelectRows
+  export let compact
+  export let onClick
+
+  // Legacy settings, still supported for old apps
   export let linkRows
   export let linkURL
   export let linkColumn
   export let linkPeek
-  export let allowSelectRows
-  export let compact
 
   const component = getContext("component")
   const { styleable, getAction, ActionTypes, routeStore, rowSelectionStore } =
@@ -28,7 +31,9 @@
       component: SlotRenderer,
     },
   ]
+
   let selectedRows = []
+
   $: hasChildren = $component.children
   $: loading = dataProvider?.loading ?? false
   $: data = dataProvider?.rows || []
@@ -40,7 +45,6 @@
     ActionTypes.SetDataProviderSorting
   )
   $: table = dataProvider?.datasource?.type === "table"
-
   $: {
     rowSelectionStore.actions.updateSelection(
       $component.id,
@@ -118,10 +122,13 @@
     })
   }
 
-  const onClick = e => {
+  const handleClick = e => {
-    if (!linkRows || !linkURL) {
+    if (onClick) {
-      return
+      onClick({ row: e.detail })
     }
+
+    // Handle legacy settings
+    else if (linkRows && linkURL) {
       const col = linkColumn || "_id"
       const id = e.detail?.[col]
       if (!id) {
@@ -130,6 +137,7 @@
       const split = linkURL.split("/:")
       routeStore.actions.navigate(`${split[0]}/${id}`, linkPeek)
     }
+  }
 
   onDestroy(() => {
     rowSelectionStore.actions.updateSelection($component.id, [])
@@ -153,7 +161,7 @@
     disableSorting
     autoSortColumns={!columns?.length}
     on:sort={onSort}
-    on:click={onClick}
+    on:click={handleClick}
   >
     <slot />
   </Table>