fix: fix record store

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}

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()

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")}
                   />

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}
 />

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}

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}
+/>

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}

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}

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} />

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

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}

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>

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}

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}

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}

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]}

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

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}