Revamp designs for Suggestions UI

src/lib/components/card.svelte

@@ -20,21 +20,23 @@
     };
 
     type ButtonProps = {
-        isButton: true;
+        isButton: boolean;
         href?: never;
     };
 
     type AnchorProps = {
         href: string;
-        isButton?: never;
+        isButton?: boolean;
+        external?: boolean;
     };
 
+    let classes = '';
     type $$Props = BaseProps & (ButtonProps | AnchorProps | BaseProps) & BaseCardProps;
 
-    export let isDashed = false;
-    export let isButton = false;
+    export let isDashed: boolean = false;
+    export let isButton: boolean = false;
     export let href: string = null;
-    let classes = '';
+    export let external: boolean = false;
     export { classes as class };
     export let style = '';
     export let padding: $$Props['padding'] = 'm';
@@ -45,7 +47,15 @@
 </script>
 
 {#if href}
-    <Card.Link class={resolvedClasses} {href} {style} {padding} {radius} {variant} on:click>
+    <Card.Link
+        {href}
+        {style}
+        {padding}
+        {radius}
+        {variant}
+        on:click
+        class={resolvedClasses}
+        {...external ? { target: '_blank' } : {}}>
         <Layout.Stack gap="xl">
             <slot />
         </Layout.Stack>

src/lib/elements/forms/inputLine.svelte

@@ -14,6 +14,7 @@
         onDeletePoint: (index: number) => void;
         onChangePoint: (pointIndex: number, coordIndex: number, newValue: number) => void;
         addLineButton?: Snippet;
+        disabled?: boolean;
     };
 
     let {
@@ -24,7 +25,8 @@
         onAddPoint,
         onDeletePoint,
         onChangePoint,
-        addLineButton
+        addLineButton,
+        disabled
     }: Props = $props();
 
     function isDeleteDisabled(index: number) {
@@ -40,6 +42,7 @@
     <Layout.Stack>
         {#each values as value, index}
             <InputPoint
+                {disabled}
                 {nullable}
                 values={value}
                 deletePoints
@@ -52,7 +55,11 @@
 
     {#if values}
         <Layout.Stack direction="row" gap="s" alignItems="center">
-            <Button size="xs" compact on:click={() => onAddPoint(-1)} disabled={nullable}>
+            <Button
+                size="xs"
+                compact
+                on:click={() => onAddPoint(-1)}
+                disabled={nullable || disabled}>
                 <Icon icon={IconPlus} size="s" /> Add coordinate
             </Button>
             {@render addLineButton?.()}

src/lib/elements/forms/inputPoint.svelte

@@ -10,6 +10,7 @@
         deletePoints?: boolean;
         onDeletePoint?: () => void;
         disableDelete?: boolean;
+        disabled?: boolean;
         onChangePoint: (index: number, newValue: number) => void;
     }
 
@@ -21,7 +22,8 @@
         deletePoints = false,
         disableDelete = false,
         onDeletePoint,
-        onChangePoint
+        onChangePoint,
+        disabled
     }: Props = $props();
 </script>
 
@@ -38,14 +40,15 @@
                     placeholder="Enter value"
                     step={0.0001}
                     value={values[index]}
+                    {disabled}
                     on:change={(e) => onChangePoint(index, Number.parseFloat(`${e.detail}`))} />
             {/each}
         {/if}
         {#if deletePoints}
             <Button
                 size="s"
                 secondary
-                disabled={nullable || disableDelete}
+                disabled={nullable || disableDelete || disabled}
                 on:click={() => onDeletePoint?.()}>
                 <Icon icon={IconX} size="s" />
             </Button>

src/lib/elements/forms/inputPolygon.svelte

@@ -17,6 +17,7 @@
             coordIndex: number,
             newValue: number
         ) => void;
+        disabled?: boolean;
     };
 
     let {
@@ -26,14 +27,16 @@
         onAddPoint,
         onAddLine,
         onDeletePoint,
-        onChangePoint
+        onChangePoint,
+        disabled
     }: Props = $props();
 </script>
 
 <Layout.Stack gap="s">
     {#each values as value, index}
         <Layout.Stack gap="xs">
             <InputLine
+                {disabled}
                 values={value}
                 onAddPoint={() => onAddPoint(index)}
                 {nullable}

src/routes/(console)/project-[region]-[project]/databases/database-[database]/(suggestions)/columns.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+    import { page } from '$app/state';
+    import { resolve } from '$app/paths';
+    import { goto } from '$app/navigation';
+
+    import Input from './input.svelte';
+    import { Modal } from '$lib/components';
+    import { Button } from '$lib/elements/forms';
+    import { tableColumnSuggestions } from './store';
+
+    let {
+        show = $bindable(false)
+    }: {
+        show?: boolean;
+    } = $props();
+
+    const isOnRowsPage = $derived(page.route?.id?.endsWith('table-[table]'));
+
+    function resetSuggestionsStore() {
+        show = false;
+
+        $tableColumnSuggestions.table = null;
+        $tableColumnSuggestions.context = null;
+
+        $tableColumnSuggestions.force = false;
+        $tableColumnSuggestions.enabled = false;
+        $tableColumnSuggestions.thinking = false;
+    }
+
+    async function triggerColumnSuggestions() {
+        if (!isOnRowsPage) {
+            await goto(
+                resolve(
+                    '/(console)/project-[region]-[project]/databases/database-[database]/table-[table]',
+                    {
+                        region: page.params.region,
+                        project: page.params.project,
+                        database: page.params.database,
+                        table: page.params.table
+                    }
+                )
+            );
+        }
+
+        show = false;
+        $tableColumnSuggestions.enabled = true;
+        $tableColumnSuggestions.table = {
+            id: page.params.table,
+            name: page.data.table?.name ?? 'Table'
+        };
+        $tableColumnSuggestions.force = true;
+    }
+</script>
+
+<Modal bind:show title="Suggest columns" onSubmit={triggerColumnSuggestions}>
+    <Input isModal />
+
+    <svelte:fragment slot="footer">
+        <Button text on:click={resetSuggestionsStore}>Cancel</Button>
+        <Button submit>Generate columns</Button>
+    </svelte:fragment>
+</Modal>