From be63b29fc40a7bb216ad2c9fedeaf9b497427273 Mon Sep 17 00:00:00 2001
From: nichenqin <nichenqin@hotmail.com>
Date: Sat, 28 Sep 2024 10:36:18 +0800
Subject: [PATCH] fix: fix record store

---
 .../bulk-update-records-button.svelte              |  4 +++-
 .../bulk-update-records-preview.svelte             |  2 --
 .../bulk-update-records/bulk-update-records.svelte |  4 +++-
 .../blocks/field-control/field-control.svelte      |  4 +++-
 .../blocks/field-control/reference-control.svelte  |  6 ++++--
 .../blocks/field-value/field-value.svelte          | 14 +++++++++++++-
 .../blocks/field-value/reference-field.svelte      |  4 +++-
 .../blocks/gallery-view/gallery-view-card.svelte   |  1 +
 .../blocks/gallery-view/gallery-view.svelte        |  2 +-
 .../grid-view/editable-cell/reference-cell.svelte  |  5 ++++-
 .../blocks/grid-view/grid-view-data-table.svelte   |  3 ++-
 .../grid-view/selected-records-button.svelte       |  2 ++
 .../blocks/kanban-view/kanban-card.svelte          |  6 ++++--
 .../blocks/kanban-view/kanban-view.svelte          |  2 +-
 .../record-detail/record-detail-sheet.svelte       |  3 ++-
 .../blocks/record-detail/record-detail.svelte      | 10 ++++++----
 .../reference/foreign-record-detail-button.svelte  |  4 +++-
 .../foreign-records-picker-dropdown.svelte         |  3 +++
 .../blocks/reference/foreign-records-picker.svelte | 12 ++++++++----
 .../blocks/table-tools/table-tools.svelte          |  4 +++-
 20 files changed, 69 insertions(+), 26 deletions(-)

diff --git a/apps/frontend/src/lib/components/blocks/bulk-update-records/bulk-update-records-button.svelte b/apps/frontend/src/lib/components/blocks/bulk-update-records/bulk-update-records-button.svelte
index e7db0fb84..21635fdf5 100644
--- a/apps/frontend/src/lib/components/blocks/bulk-update-records/bulk-update-records-button.svelte
+++ b/apps/frontend/src/lib/components/blocks/bulk-update-records/bulk-update-records-button.svelte
@@ -4,7 +4,9 @@
   import { PencilIcon } from "lucide-svelte"
   import BulkUpdateRecords from "./bulk-update-records.svelte"
   import { hasPermission } from "$lib/store/space-member.store"
+  import { type Writable } from "svelte/store"
 
+  export let r: Writable<string | null>
   let open = false
 </script>
 
@@ -21,7 +23,7 @@
         <Sheet.Title>Bulk Update Records</Sheet.Title>
       </Sheet.Header>
 
-      <BulkUpdateRecords onSuccess={() => (open = false)} />
+      <BulkUpdateRecords {r} onSuccess={() => (open = false)} />
     </Sheet.Content>
   </Sheet.Root>
 {/if}
diff --git a/apps/frontend/src/lib/components/blocks/bulk-update-records/bulk-update-records-preview.svelte b/apps/frontend/src/lib/components/blocks/bulk-update-records/bulk-update-records-preview.svelte
index 885e08f2c..abf62f620 100644
--- a/apps/frontend/src/lib/components/blocks/bulk-update-records/bulk-update-records-preview.svelte
+++ b/apps/frontend/src/lib/components/blocks/bulk-update-records/bulk-update-records-preview.svelte
@@ -5,8 +5,6 @@
   import * as Dialog from "$lib/components/ui/dialog"
   import { Button } from "$lib/components/ui/button"
   import { FullscreenIcon } from "lucide-svelte"
-  import { createQuery } from "@tanstack/svelte-query"
-  import { trpc } from "$lib/trpc/client"
   import { r } from "$lib/store/records.store"
 
   const table = getTable()
diff --git a/apps/frontend/src/lib/components/blocks/bulk-update-records/bulk-update-records.svelte b/apps/frontend/src/lib/components/blocks/bulk-update-records/bulk-update-records.svelte
index 87b8deeaf..5d08fa3bf 100644
--- a/apps/frontend/src/lib/components/blocks/bulk-update-records/bulk-update-records.svelte
+++ b/apps/frontend/src/lib/components/blocks/bulk-update-records/bulk-update-records.svelte
@@ -24,12 +24,13 @@
   import type { IBulkUpdateRecordsCommandOutput } from "@undb/commands"
   import * as AlertDialog from "$lib/components/ui/alert-dialog"
   import FiltersEditor from "../filters-editor/filters-editor.svelte"
-  import { writable } from "svelte/store"
+  import { writable, type Writable } from "svelte/store"
   import autoAnimate from "@formkit/auto-animate"
 
   const table = getTable()
   const mutableFields = $table.schema.mutableFields
   const schema = $table.schema.getMutableSchema()
+  export let r: Writable<string | null>
 
   let open = false
 
@@ -163,6 +164,7 @@
                     {...attrs}
                     bind:value={$formData[field.id.value]}
                     {field}
+                    {r}
                     tableId={$table.id.value}
                     class={cn($errors[field.id.value] && "border-red-500 focus-visible:ring-0")}
                   />
diff --git a/apps/frontend/src/lib/components/blocks/field-control/field-control.svelte b/apps/frontend/src/lib/components/blocks/field-control/field-control.svelte
index 5dead65ac..94b34cb07 100644
--- a/apps/frontend/src/lib/components/blocks/field-control/field-control.svelte
+++ b/apps/frontend/src/lib/components/blocks/field-control/field-control.svelte
@@ -19,13 +19,14 @@
   import ButtonControl from "./button-control.svelte"
   import DurationControl from "./duration-control.svelte"
   import PercentageControl from "./percentage-control.svelte"
+  import { type Writable } from "svelte/store"
 
   export let readonly = false
   export let field: NoneSystemField
   export let tableId: string
   export let recordId: string | undefined
   export let record: RecordDO | undefined
-
+  export let r: Writable<string | null>
   export let value: any
   export let displayValue: any
 
@@ -71,4 +72,5 @@
   {tableId}
   {recordId}
   {record}
+  {r}
 />
diff --git a/apps/frontend/src/lib/components/blocks/field-control/reference-control.svelte b/apps/frontend/src/lib/components/blocks/field-control/reference-control.svelte
index 298d3efb7..1580d745a 100644
--- a/apps/frontend/src/lib/components/blocks/field-control/reference-control.svelte
+++ b/apps/frontend/src/lib/components/blocks/field-control/reference-control.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { ReferenceField } from "@undb/table"
   import ForeignRecordsPickerDropdown from "../reference/foreign-records-picker-dropdown.svelte"
-  import { writable } from "svelte/store"
+  import { writable, type Writable } from "svelte/store"
   import { Button } from "$lib/components/ui/button"
   import { onMount } from "svelte"
 
@@ -10,6 +10,7 @@
   export let readonly = false
   export let field: ReferenceField
   export let value: string[]
+  export let r: Writable<string | null>
 
   let selected = writable<string[]>(value)
 
@@ -28,6 +29,7 @@
 <div class="flex gap-1 overflow-hidden">
   <ForeignRecordsPickerDropdown
     let:builder
+    {r}
     {readonly}
     {field}
     {tableId}
@@ -44,7 +46,7 @@
     {/if}
   </ForeignRecordsPickerDropdown>
   {#if hasValueReactive}
-    <ForeignRecordsPickerDropdown {field} {tableId} {recordId} bind:selected isSelected={false} let:builder>
+    <ForeignRecordsPickerDropdown {r} {field} {tableId} {recordId} bind:selected isSelected={false} let:builder>
       <Button variant="link" class="px-2" size="xs" builders={[builder]}>+ Link Records</Button>
     </ForeignRecordsPickerDropdown>
   {/if}
diff --git a/apps/frontend/src/lib/components/blocks/field-value/field-value.svelte b/apps/frontend/src/lib/components/blocks/field-value/field-value.svelte
index 1faed46f1..82378c8ca 100644
--- a/apps/frontend/src/lib/components/blocks/field-value/field-value.svelte
+++ b/apps/frontend/src/lib/components/blocks/field-value/field-value.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { type Writable } from "svelte/store"
   import type { Field, FieldType } from "@undb/table"
   import type { ComponentType } from "svelte"
   import StringField from "./string-field.svelte"
@@ -27,6 +28,7 @@
   export let tableId: string
   export let recordId: string | undefined
   export let placeholder: string | undefined = undefined
+  export let r: Writable<string | null>
 
   const map: Record<FieldType, ComponentType> = {
     id: IdField,
@@ -56,4 +58,14 @@
   }
 </script>
 
-<svelte:component this={map[type]} {tableId} {recordId} {...$$restProps} {field} {value} {displayValue} {placeholder} />
+<svelte:component
+  this={map[type]}
+  {tableId}
+  {recordId}
+  {...$$restProps}
+  {field}
+  {value}
+  {displayValue}
+  {placeholder}
+  {r}
+/>
diff --git a/apps/frontend/src/lib/components/blocks/field-value/reference-field.svelte b/apps/frontend/src/lib/components/blocks/field-value/reference-field.svelte
index 2f241a0c9..62ed1a315 100644
--- a/apps/frontend/src/lib/components/blocks/field-value/reference-field.svelte
+++ b/apps/frontend/src/lib/components/blocks/field-value/reference-field.svelte
@@ -2,11 +2,12 @@
   import type { ReferenceField } from "@undb/table"
   import ForeignRecordsPickerDropdown from "../reference/foreign-records-picker-dropdown.svelte"
   import { Button } from "$lib/components/ui/button"
-  import { writable } from "svelte/store"
+  import { writable, type Writable } from "svelte/store"
   import { onMount } from "svelte"
 
   export let value: string[] | null
   export let field: ReferenceField
+  export let r: Writable<string | null>
   export let tableId: string
   export let recordId: string | undefined
 
@@ -37,6 +38,7 @@
     {recordId}
     bind:isSelected={hasValue}
     bind:selected
+    {r}
     let:builder
   >
     {#if hasValueReactive}
diff --git a/apps/frontend/src/lib/components/blocks/gallery-view/gallery-view-card.svelte b/apps/frontend/src/lib/components/blocks/gallery-view/gallery-view-card.svelte
index 4a1ab6ef6..d263badc2 100644
--- a/apps/frontend/src/lib/components/blocks/gallery-view/gallery-view-card.svelte
+++ b/apps/frontend/src/lib/components/blocks/gallery-view/gallery-view-card.svelte
@@ -66,6 +66,7 @@
     {#each fields.filter((f) => f.id.value !== fieldId) as field}
       <div class="flex w-full">
         <FieldValue
+          {r}
           {field}
           tableId={$table.id.value}
           recordId={record.id.value}
diff --git a/apps/frontend/src/lib/components/blocks/gallery-view/gallery-view.svelte b/apps/frontend/src/lib/components/blocks/gallery-view/gallery-view.svelte
index faa5a2555..38cca20da 100644
--- a/apps/frontend/src/lib/components/blocks/gallery-view/gallery-view.svelte
+++ b/apps/frontend/src/lib/components/blocks/gallery-view/gallery-view.svelte
@@ -69,7 +69,7 @@
   $: total = ($getRecordsQuery.data as any)?.total
 </script>
 
-<TableTools />
+<TableTools {r} />
 <div class={cn("flex-1 overflow-y-auto overflow-x-hidden p-4", !field && "bg-muted")}>
   {#if !field}
     <GalleryViewField {view} />
diff --git a/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/reference-cell.svelte b/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/reference-cell.svelte
index 9920d55da..1dd2aa1d6 100644
--- a/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/reference-cell.svelte
+++ b/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/reference-cell.svelte
@@ -2,7 +2,7 @@
   import type { ReferenceField } from "@undb/table"
   import ForeignRecordsPickerDropdown from "../../reference/foreign-records-picker-dropdown.svelte"
   import { Button } from "$lib/components/ui/button"
-  import { writable } from "svelte/store"
+  import { writable, type Writable } from "svelte/store"
 
   export let tableId: string
   export let field: ReferenceField
@@ -12,6 +12,7 @@
   export let isSelected: boolean
   export let recordId: string
   export let onValueChange = (value: string[]) => {}
+  export let r: Writable<string | null>
 
   $: selected = writable<string[]>(value)
 
@@ -38,6 +39,7 @@
         {field}
         {tableId}
         {recordId}
+        {r}
         bind:isSelected={hasValue}
         bind:selected
         let:builder
@@ -59,6 +61,7 @@
         {field}
         {tableId}
         {recordId}
+        {r}
         bind:selected
         isSelected={false}
         let:builder
diff --git a/apps/frontend/src/lib/components/blocks/grid-view/grid-view-data-table.svelte b/apps/frontend/src/lib/components/blocks/grid-view/grid-view-data-table.svelte
index ad85e159c..48ff22ee7 100644
--- a/apps/frontend/src/lib/components/blocks/grid-view/grid-view-data-table.svelte
+++ b/apps/frontend/src/lib/components/blocks/grid-view/grid-view-data-table.svelte
@@ -122,6 +122,7 @@
             const record = $store.records.get(item.row.original.id)
             const displayValue = record?.displayValues?.toJSON()?.[field.id.value]
             return createRender(GridViewCell, {
+              r,
               index,
               value: item.value,
               field,
@@ -178,7 +179,7 @@
 
 <div class="flex h-full w-full flex-col">
   {#if !readonly}
-    <TableTools>
+    <TableTools {r}>
       {#if selectedRecordIds.length}
         <SelectedRecordsButton class={selectedRecordIds.length && "opacity-100"} ids={selectedRecordIds} />
       {/if}
diff --git a/apps/frontend/src/lib/components/blocks/grid-view/selected-records-button.svelte b/apps/frontend/src/lib/components/blocks/grid-view/selected-records-button.svelte
index ff1289132..5e178bc09 100644
--- a/apps/frontend/src/lib/components/blocks/grid-view/selected-records-button.svelte
+++ b/apps/frontend/src/lib/components/blocks/grid-view/selected-records-button.svelte
@@ -11,6 +11,7 @@
   import BulkUpdateRecords from "../bulk-update-records/bulk-update-records.svelte"
   import { ID_TYPE } from "@undb/table"
   import { cn } from "$lib/utils"
+  import { r } from "$lib/store/records.store"
 
   const table = getTable()
 
@@ -115,6 +116,7 @@
                     conjunction: "and",
                     children: [{ field: ID_TYPE, op: "in", value: ids }],
                   }}
+                  {r}
                 />
               </Sheet.Content>
             </Sheet.Root>
diff --git a/apps/frontend/src/lib/components/blocks/kanban-view/kanban-card.svelte b/apps/frontend/src/lib/components/blocks/kanban-view/kanban-card.svelte
index 4c9b5b52d..3c7a22d3c 100644
--- a/apps/frontend/src/lib/components/blocks/kanban-view/kanban-card.svelte
+++ b/apps/frontend/src/lib/components/blocks/kanban-view/kanban-card.svelte
@@ -24,8 +24,9 @@
 </script>
 
 <button
-  on:click={() => ($r = record.id.value)}
-  disabled={readonly}
+  on:click={() => {
+    $r = record.id.value
+  }}
   data-record-id={record.id.value}
   class={cn("relative mb-2 flex w-full flex-col overflow-hidden rounded bg-white p-2 shadow", isMatch && "pl-3")}
 >
@@ -37,6 +38,7 @@
           <Tooltip.Root>
             <Tooltip.Trigger class="w-full text-left">
               <FieldValue
+                {r}
                 {field}
                 tableId={$table.id.value}
                 recordId={record.id.value}
diff --git a/apps/frontend/src/lib/components/blocks/kanban-view/kanban-view.svelte b/apps/frontend/src/lib/components/blocks/kanban-view/kanban-view.svelte
index bb622b374..9a6c754ab 100644
--- a/apps/frontend/src/lib/components/blocks/kanban-view/kanban-view.svelte
+++ b/apps/frontend/src/lib/components/blocks/kanban-view/kanban-view.svelte
@@ -30,7 +30,7 @@
 </script>
 
 {#key $table.id.value}
-  <TableTools {readonly}>
+  <TableTools {readonly} {r}>
     {#if !shareId}
       <KanbanOptionButton {view} {readonly} />
     {/if}
diff --git a/apps/frontend/src/lib/components/blocks/record-detail/record-detail-sheet.svelte b/apps/frontend/src/lib/components/blocks/record-detail/record-detail-sheet.svelte
index 3d6b9c402..5f620bc44 100644
--- a/apps/frontend/src/lib/components/blocks/record-detail/record-detail-sheet.svelte
+++ b/apps/frontend/src/lib/components/blocks/record-detail/record-detail-sheet.svelte
@@ -33,7 +33,7 @@
   open={!!$r}
   onOpenChange={(open) => {
     if (!open) {
-      r.set("")
+      $r = null
     }
   }}
   portal="body"
@@ -74,6 +74,7 @@
                     $r = null
                     await client.invalidateQueries({ queryKey: ["records", $table.id.value] })
                   }}
+                  {r}
                   {table}
                   {readonly}
                   record={recordDo}
diff --git a/apps/frontend/src/lib/components/blocks/record-detail/record-detail.svelte b/apps/frontend/src/lib/components/blocks/record-detail/record-detail.svelte
index e3e40e3e1..029b3f59c 100644
--- a/apps/frontend/src/lib/components/blocks/record-detail/record-detail.svelte
+++ b/apps/frontend/src/lib/components/blocks/record-detail/record-detail.svelte
@@ -11,20 +11,18 @@
   import { toast } from "svelte-sonner"
   import { beforeNavigate } from "$app/navigation"
   import { pick } from "radash"
-  import { queryParam } from "sveltekit-search-params"
   import type { Readable } from "svelte/store"
   import * as Collapsible from "$lib/components/ui/collapsible"
   import Button from "$lib/components/ui/button/button.svelte"
   import { preferences } from "$lib/store/persisted.store"
   import { cn } from "$lib/utils"
   import { getRecordsStore } from "$lib/store/records.store"
+  import { type Writable } from "svelte/store"
 
   const recordsStore = getRecordsStore()
 
   export let readonly = false
-
-  const r = queryParam("r")
-
+  export let r: Writable<string | null>
   export let record: RecordDO
 
   beforeNavigate(({ cancel }) => {
@@ -136,6 +134,7 @@
         <div class="min-h-9 flex-1 overflow-hidden">
           {#if field.isSystem || !field.isMutable}
             <FieldValue
+              {r}
               {field}
               tableId={$table.id.value}
               recordId={record.id.value}
@@ -151,6 +150,7 @@
               {field}
               tableId={$table.id.value}
               recordId={$r}
+              {r}
               {record}
               displayValue={displayValues[field.id.value]}
               {readonly}
@@ -199,6 +199,7 @@
               <div class="flex-1 overflow-hidden">
                 {#if field.isSystem || !field.isMutable}
                   <FieldValue
+                    {r}
                     {field}
                     tableId={$table.id.value}
                     recordId={record.id.value}
@@ -212,6 +213,7 @@
                     {...attrs}
                     bind:value={$formData[field.id.value]}
                     {field}
+                    {r}
                     tableId={$table.id.value}
                     recordId={$r}
                     displayValue={displayValues[field.id.value]}
diff --git a/apps/frontend/src/lib/components/blocks/reference/foreign-record-detail-button.svelte b/apps/frontend/src/lib/components/blocks/reference/foreign-record-detail-button.svelte
index 449fcfe21..9c444b255 100644
--- a/apps/frontend/src/lib/components/blocks/reference/foreign-record-detail-button.svelte
+++ b/apps/frontend/src/lib/components/blocks/reference/foreign-record-detail-button.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { HistoryIcon, Maximize2Icon } from "lucide-svelte"
   import * as Sheet from "$lib/components/ui/sheet"
-  import { derived, writable, type Readable } from "svelte/store"
+  import { derived, writable, type Readable, type Writable } from "svelte/store"
   import { RecordDO, type TableDo } from "@undb/table"
   import { Button } from "$lib/components/ui/button"
   import { ScrollArea } from "$lib/components/ui/scroll-area"
@@ -14,6 +14,7 @@
   import { createQuery, useQueryClient } from "@tanstack/svelte-query"
 
   export let foreignTable: Readable<TableDo>
+  export let r: Writable<string | null>
 
   export let recordId: Readable<string>
 
@@ -93,6 +94,7 @@
                       queryKey: ["records", $foreignTable.id.value],
                     })
                   }}
+                  {r}
                   table={foreignTable}
                   record={recordDo}
                   bind:disabled
diff --git a/apps/frontend/src/lib/components/blocks/reference/foreign-records-picker-dropdown.svelte b/apps/frontend/src/lib/components/blocks/reference/foreign-records-picker-dropdown.svelte
index 031763df5..1f12cbc7f 100644
--- a/apps/frontend/src/lib/components/blocks/reference/foreign-records-picker-dropdown.svelte
+++ b/apps/frontend/src/lib/components/blocks/reference/foreign-records-picker-dropdown.svelte
@@ -6,12 +6,14 @@
   import { ReferenceField, TableFactory } from "@undb/table"
   import Button from "$lib/components/ui/button/button.svelte"
   import { LoaderCircleIcon } from "lucide-svelte"
+  import { type Writable } from "svelte/store"
 
   export let isSelected = false
 
   export let shouldUpdate = false
   export let readonly = false
   export let tableId: string
+  export let r: Writable<string | null>
   export let recordId: string | undefined
   export let field: ReferenceField
   $: foreignTableId = field.foreignTableId
@@ -46,6 +48,7 @@
     {#if foreignTable}
       <ForeignRecordsPicker
         {readonly}
+        {r}
         {shouldUpdate}
         bind:isSelected
         {field}
diff --git a/apps/frontend/src/lib/components/blocks/reference/foreign-records-picker.svelte b/apps/frontend/src/lib/components/blocks/reference/foreign-records-picker.svelte
index 25304c162..215c077a4 100644
--- a/apps/frontend/src/lib/components/blocks/reference/foreign-records-picker.svelte
+++ b/apps/frontend/src/lib/components/blocks/reference/foreign-records-picker.svelte
@@ -23,6 +23,7 @@
   export let isSelected = false
   export let shouldUpdate = false
   export let readonly = false
+  export let r: Writable<string | null>
 
   export let tableId: string
   export let recordId: string | undefined = undefined
@@ -199,11 +200,11 @@
         <ScrollArea orientation="both" class="h-full flex-1 overflow-auto">
           <div class="divide-y">
             {#each records as record}
-              {@const r = dos.get(record.id)}
+              {@const re = dos.get(record.id)}
               <div class="group flex-1 space-y-2">
-                {#if r}
-                  {@const values = r.flatten()}
-                  {@const displayValues = r.displayValues?.toJSON() ?? {}}
+                {#if re}
+                  {@const values = re.flatten()}
+                  {@const displayValues = re.displayValues?.toJSON() ?? {}}
                   <div class="flex w-full flex-1 items-center gap-2">
                     {#if fields.length}
                       {@const field = fields[0]}
@@ -216,6 +217,7 @@
                               {...getAttrs([builder])}
                             >
                               <FieldValue
+                                {r}
                                 tableId={$foreignTable.id.value}
                                 recordId={record.id}
                                 {field}
@@ -245,6 +247,7 @@
                                   {...getAttrs([builder])}
                                 >
                                   <FieldValue
+                                    {r}
                                     tableId={$foreignTable.id.value}
                                     recordId={record.id}
                                     {field}
@@ -271,6 +274,7 @@
                         <ForeignRecordDetailButton
                           class="opacity-0 group-hover:opacity-100"
                           {foreignTable}
+                          {r}
                           recordId={readable(record.id)}
                         />
                         {#if !readonly}
diff --git a/apps/frontend/src/lib/components/blocks/table-tools/table-tools.svelte b/apps/frontend/src/lib/components/blocks/table-tools/table-tools.svelte
index 5f8fd974b..40ca27e79 100644
--- a/apps/frontend/src/lib/components/blocks/table-tools/table-tools.svelte
+++ b/apps/frontend/src/lib/components/blocks/table-tools/table-tools.svelte
@@ -8,8 +8,10 @@
   import ViewFields from "../view-fields/view-fields.svelte"
   import ShareViewButton from "../share/share-view-button.svelte"
   import BulkUpdateRecordsButton from "../bulk-update-records/bulk-update-records-button.svelte"
+  import type { Writable } from "svelte/store"
 
   export let readonly = false
+  export let r: Writable<string | null>
 </script>
 
 <div class="flex items-center justify-between gap-2 border-b px-4 py-2">
@@ -26,7 +28,7 @@
 
   <div class="flex items-center gap-2">
     {#if !readonly}
-      <BulkUpdateRecordsButton />
+      <BulkUpdateRecordsButton {r} />
       <CreateFieldButton />
       <ShareViewButton />
     {/if}