fix: data not persisting, options not loading.

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

@@ -5,11 +5,17 @@
     import ColumnItem from './columnItem.svelte';
     import { IconPencil } from '@appwrite.io/pink-icons-svelte';
 
-    export let columns: Columns[] = [];
-    export let formValues: object = {};
-    export let customId: string | null | undefined = undefined;
+    let {
+        columns = [],
+        formValues = $bindable({}),
+        customId = $bindable(undefined)
+    }: {
+        columns: Columns[];
+        formValues: object;
+        customId: string | null | undefined;
+    } = $props();
 
-    let showCustomId = false;
+    let showCustomId = $state(false);
 </script>
 
 {#if columns.length}

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

@@ -28,22 +28,18 @@
     function removeArrayItem(key: string, index: number) {
         const currentArray = Array.isArray($formStore[key]) ? $formStore[key] : [];
         const filteredArray = currentArray.filter((_: object, i: number) => i !== index);
-        const next = {
-            ...formValues,
-            [key]: filteredArray.length === 0 ? [] : filteredArray
-        };
-
-        formStore.set(next);
+        formStore.update((values) => {
+            values[key] = filteredArray.length === 0 ? [] : filteredArray;
+            return values;
+        });
     }
 
     function addArrayItem(key: string) {
         const currentArray = Array.isArray($formStore[key]) ? $formStore[key] : null;
-        const next = {
-            ...formValues,
-            [key]: currentArray ? [...currentArray, null] : [null]
-        };
-
-        formStore.set(next);
+        formStore.update((values) => {
+            values[key] = currentArray ? [...currentArray, null] : [null];
+            return values;
+        });
     }
 
     function getColumnType(column: Columns) {
@@ -58,8 +54,7 @@
                 case 'enum':
                     return 'Enum';
                 default:
-                    'String';
-                    break;
+                    return 'String';
             }
         }
         return `${capitalize(column.type)}${column.array ? '[]' : ''}`;

src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/rows/columns/types/relationship.svelte

@@ -69,7 +69,8 @@
         } else {
             if (value && typeof value === 'object') {
                 row = value as Models.Row;
-                singleRel = row?.$id;
+                // set for combobox and select.
+                newItemValue = singleRel = row?.$id;
             }
         }
     });
@@ -368,23 +369,26 @@
 
                 <!-- Input for adding new items -->
                 {#if showInput}
-                    <Layout.Stack direction="row">
-                        <Input.ComboBox
-                            {id}
-                            required
-                            placeholder={`Select ${column.key}`}
-                            bind:value={newItemValue}
-                            options={getAvailableOptions()}
-                            on:change={addNewItem}
-                            noResultsOption={searchNoResultsOption}
-                            leadingIcon={!limited ? IconRelationship : undefined} />
+                    {@const availableOptions = getAvailableOptions()}
+                    {#key availableOptions}
+                        <Layout.Stack direction="row">
+                            <Input.ComboBox
+                                {id}
+                                required
+                                on:change={addNewItem}
+                                bind:value={newItemValue}
+                                options={availableOptions}
+                                placeholder={`Select ${column.key}`}
+                                noResultsOption={searchNoResultsOption}
+                                leadingIcon={!limited ? IconRelationship : undefined} />
 
-                        <div style:padding-block-start="0.5rem">
-                            <Button icon extraCompact on:click={cancelAddItem}>
-                                <Icon icon={IconX} size="s" />
-                            </Button>
-                        </div>
-                    </Layout.Stack>
+                            <div style:padding-block-start="0.5rem">
+                                <Button icon extraCompact on:click={cancelAddItem}>
+                                    <Icon icon={IconX} size="s" />
+                                </Button>
+                            </div>
+                        </Layout.Stack>
+                    {/key}
                 {/if}
             </Layout.Stack>
 
@@ -400,44 +404,75 @@
     </Layout.Stack>
 {:else}
     <Layout.Stack direction="row" alignItems="center" gap="s">
-        <Input.ComboBox
-            {id}
-            {options}
-            autofocus={limited}
-            bind:value={newItemValue}
-            required={column.required}
-            label={limited ? undefined : label}
-            placeholder={`Select ${column.key}`}
-            noResultsOption={searchNoResultsOption}
-            on:change={() => {
-                if (newItemValue === null) {
-                    value = null;
-                    singleRel = null;
-                } else {
-                    const selectedRow = rowList.rows.find((row) => row.$id === newItemValue);
+        {#key options}
+            {#if limited}
+                <!-- for unlink badge -->
+                <Input.Select
+                    {id}
+                    {options}
+                    autofocus={limited}
+                    bind:value={newItemValue}
+                    required={column.required}
+                    label={limited ? undefined : label}
+                    placeholder={`Select ${column.key}`}
+                    noResultsOption={searchNoResultsOption}
+                    on:change={() => {
+                        if (newItemValue === null) {
+                            value = null;
+                            singleRel = null;
+                        } else {
+                            const selectedRow = rowList.rows.find(
+                                (row) => row.$id === newItemValue
+                            );
 
-                    if (selectedRow) {
-                        value = selectedRow;
-                        singleRel = newItemValue;
-                    }
-                }
+                            if (selectedRow) {
+                                value = selectedRow;
+                                singleRel = newItemValue;
+                            }
+                        }
+                    }}
+                    leadingIcon={!limited ? IconRelationship : undefined} />
+            {:else}
+                <Input.ComboBox
+                    {id}
+                    {options}
+                    autofocus={limited}
+                    bind:value={newItemValue}
+                    required={column.required}
+                    label={limited ? undefined : label}
+                    placeholder={`Select ${column.key}`}
+                    noResultsOption={searchNoResultsOption}
+                    on:change={() => {
+                        if (newItemValue === null) {
+                            value = null;
+                            singleRel = null;
+                        } else {
+                            const selectedRow = rowList.rows.find(
+                                (row) => row.$id === newItemValue
+                            );
 
-                newItemValue = null;
-            }}
-            leadingIcon={!limited ? IconRelationship : undefined} />
+                            if (selectedRow) {
+                                value = selectedRow;
+                                singleRel = newItemValue;
+                            }
+                        }
+                    }}
+                    leadingIcon={!limited ? IconRelationship : undefined} />
+            {/if}
 
-        {#if !limited && singleRel}
-            <div style:padding-block-start="2.25rem">
-                <Button
-                    icon
-                    extraCompact
-                    on:click={() => {
-                        value = null;
-                        singleRel = null;
-                    }}>
-                    <Icon icon={IconX} size="s" />
-                </Button>
-            </div>
-        {/if}
+            {#if !limited && singleRel}
+                <div style:padding-block-start="2.25rem">
+                    <Button
+                        icon
+                        extraCompact
+                        on:click={() => {
+                            value = null;
+                            newItemValue = singleRel = null;
+                        }}>
+                        <Icon icon={IconX} size="s" />
+                    </Button>
+                </div>
+            {/if}
+        {/key}
     </Layout.Stack>
 {/if}

src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/rows/create.svelte

@@ -109,7 +109,8 @@
             trackEvent(Submit.RowCreate, {
                 customId: !!$createRow.id
             });
-            await invalidate(Dependencies.ROW);
+
+            await invalidate(Dependencies.ROWS);
 
             if (createMore) {
                 resetCreateRow();

src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte

@@ -4,7 +4,7 @@
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { Confirm, Id, SortButton } from '$lib/components';
     import { Dependencies, SPREADSHEET_PAGE_LIMIT } from '$lib/constants';
-    import { Button as ConsoleButton, InputChoice, InputSelect } from '$lib/elements/forms';
+    import { Button as ConsoleButton, InputSelect } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { preferences } from '$lib/stores/preferences';
     import { sdk } from '$lib/stores/sdk';
@@ -121,7 +121,6 @@
 
     let showDelete = false;
     let showColumnDelete = false;
-    let deleteConfirmationChecked = false;
     let selectedRowForDelete: Models.Row['$id'] | null = null;
 
     onMount(async () => {
@@ -1087,8 +1086,12 @@
 </SpreadsheetContainer>
 
 <Confirm
+    confirmDeletion
     bind:open={showDelete}
     onSubmit={handleDelete}
+    confirmDeletionLabel={relatedColumns?.length
+        ? `Delete ${selectedRowForDelete !== null ? 'row' : 'rows'} from ${$table.name}`
+        : undefined}
     title={selectedRows.length === 1 ? 'Delete Row' : 'Delete Rows'}>
     {@const isSingle = selectedRowForDelete !== null}
 
@@ -1139,17 +1142,6 @@
 
         <Layout.Stack direction="column" gap="m">
             <Alert.Inline>To change the selection edit the relationship settings.</Alert.Inline>
-
-            <ul>
-                <InputChoice
-                    id="delete"
-                    label="Delete"
-                    showLabel={false}
-                    bind:value={deleteConfirmationChecked}>
-                    Delete {isSingle ? 'row' : 'rows'} from
-                    <span data-private>{$table.name}</span>
-                </InputChoice>
-            </ul>
         </Layout.Stack>
     {:else}
         <p class="u-bold">This action is irreversible.</p>