feat(notification): link to Node

Author: SIMULATAN

src/api.css

@@ -5,4 +5,14 @@
   --color-log-info: var(--color-green-500);
   --color-log-warn: var(--color-orange-500);
   --color-log-error: var(--color-red-500);
+
+  --animate-highlight: highlight 1.25s ease-in-out;
+  @keyframes highlight {
+    0%, 100% {
+      box-shadow: 0 0 0 var(--color-surface-100);
+    }
+    50% {
+      box-shadow: 0 0 3em var(--color-surface-100);
+    }
+  }
 }

src/lib/components/node/Node.svelte

@@ -16,6 +16,7 @@
     import NodeLogLevel from "$lib/components/node/NodeLogLevel.svelte";
     import DeleteButton from "$lib/components/delete/DeleteButton.svelte";
     import { removeBoilerplate } from "$lib/utils/settings_utils";
+    import { page } from "$app/state";
 
     interface Props extends NodeProps {
         data: {
@@ -59,9 +60,11 @@
 
     const { edges } = useStore()
     let hasOutputNode = $derived($edges.some(edge => edge.source === node._id))
+
+    const isHighlighted = page.url.searchParams.get("highlightedNode") === node._id;
 </script>
 
-<div bind:clientWidth={widths[node._id]} bind:clientHeight={heights[node._id]} class="h-full">
+<div bind:clientWidth={widths[node._id]} bind:clientHeight={heights[node._id]} class="h-full" class:animate-highlight={isHighlighted}>
     {#if metadata?.input !== null}
         <Handle type="target"
                 position={Position.Left}

src/lib/components/notification/NotificationGoTo.svelte

@@ -10,16 +10,20 @@
 
     interface AttributeLinks {
         [key: string]: {
-            getUrl: (value: string) => string;
+            getUrl: (value: string, attributes: NotificationAttributes) => string;
             getLabel: (value: string) => string;
         };
     }
 
     const attributeLinks: AttributeLinks = {
         "flow.id": {
             getUrl: (id: string) => `/flow/${id}`,
-            getLabel: (_: string) => `Flow`,
+            getLabel: (_: string) => "Flow",
         },
+        "node.id": {
+            getUrl: (id: string, attributes: NotificationAttributes) => `/flow/${attributes["flow.id"]}?highlightedNode=${id}`,
+            getLabel: (_: string) => "Node",
+        }
     };
 
     let open = $state(false);
@@ -29,18 +33,17 @@
     {open}
     onOpenChange={e => (open = e.open)}
     positioning={{placement: "bottom"}}
-    contentBase="card bg-surface-200-800 p-2 space-y-4 max-w-[320px]"
+    contentBase="card bg-surface-200-800 max-w-[320px] flex flex-col gap-2 p-2 ring-2 shadow-secondary-950-50"
     classes="flex items-center"
-    arrow
-    arrowBackground="!bg-surface-200 dark:!bg-surface-800"
 >
     {#snippet trigger()}<IconLink/>{/snippet}
     {#snippet content()}
         {#each Object.entries(attributes) as [key, value]}
             {@const link = attributeLinks[key]}
             {#if link}
-                <a href={link.getUrl(value)} class="anchor">
-                    {link.getLabel(value)}
+                <a href={link.getUrl(value, attributes)} class="btn preset-filled">
+                    <span>{link.getLabel(value)}</span>
+                    <span>&rarr;</span>
                 </a>
             {/if}
         {/each}