fix: fix hidden fields

apps/frontend/src/lib/components/blocks/field-control/reference-control.svelte

@@ -15,7 +15,7 @@
   let selected = writable<string[]>(value)
 
   onMount(() => {
-    selected.set(value)
+    selected?.set(value)
   })
   $: $selected, (value = $selected)
 
@@ -39,7 +39,7 @@
   >
     {#if hasValueReactive}
       <Button size="xs" variant="link" class="px-0" builders={[builder]}>
-        {$selected.length} Linked Records
+        {$selected?.length} Linked Records
       </Button>
     {:else}
       <Button size="xs" variant="link" type="button" class="text-muted-foreground px-0" builders={[builder]}>

apps/frontend/src/lib/components/blocks/record-detail/record-detail-sheet.svelte

@@ -12,11 +12,12 @@
   import { preferences } from "$lib/store/persisted.store"
   import { ScrollArea } from "$lib/components/ui/scroll-area"
   import RecordDetailMenu from "./record-detail-menu.svelte"
-  import { type Writable } from "svelte/store"
+  import { type Writable, type Readable } from "svelte/store"
 
   export let readonly = false
   export let recordDo: RecordDO | undefined
   export let isLoading: boolean
+  export let viewId: Readable<string | undefined>
   export let r: Writable<string | null>
 
   const table = getTable()
@@ -70,6 +71,7 @@
             <div class={cn("overflow-hidden", $preferences.showAudit && $r ? "col-span-3" : "col-span-4")}>
               <div class="h-full w-full overflow-auto px-6">
                 <RecordDetail
+                  {viewId}
                   onSuccess={async () => {
                     $r = null
                     await client.invalidateQueries({ queryKey: ["records", $table.id.value] })

apps/frontend/src/lib/components/blocks/record-detail/record-detail.svelte

@@ -11,19 +11,19 @@
   import { toast } from "svelte-sonner"
   import { beforeNavigate } from "$app/navigation"
   import { pick } from "radash"
-  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"
+  import { type Writable, type Readable } from "svelte/store"
 
   const recordsStore = getRecordsStore()
 
   export let readonly = false
   export let r: Writable<string | null>
   export let record: RecordDO
+  export let viewId: Readable<string | undefined>
 
   beforeNavigate(({ cancel }) => {
     if (mutableFieldTainted) {
@@ -36,7 +36,7 @@
   export let onSuccess: () => void = () => {}
 
   export let table: Readable<TableDo>
-  const fields = $table.getOrderedVisibleFields().filter((f) => f.type !== "button")
+  const fields = $table.getOrderedVisibleFields($viewId).filter((f) => f.type !== "button")
   const schema = $table.schema.getMutableSchema(fields)
 
   export let disabled: boolean = false
@@ -101,7 +101,7 @@
   $: dirty = mutableFieldTainted
   $: disabled = !$tainted || !!$allErrors.length
 
-  $: hiddenFields = $table.getOrderedHiddenFields().filter((f) => f.type !== "button")
+  $: hiddenFields = $table.getOrderedHiddenFields($viewId).filter((f) => f.type !== "button")
 </script>
 
 <form

apps/frontend/src/lib/components/blocks/record-detail/share-record-detail-sheet.svelte

@@ -3,13 +3,14 @@
   import { trpc } from "$lib/trpc/client"
   import { createQuery } from "@tanstack/svelte-query"
   import { RecordDO } from "@undb/table"
-  import { derived } from "svelte/store"
+  import { derived, type Readable } from "svelte/store"
   import { preferences } from "$lib/store/persisted.store"
   import RecordDetailSheet from "./record-detail-sheet.svelte"
   import { page } from "$app/stores"
   import { r } from "$lib/store/records.store"
 
   export let readonly = false
+  export let viewId: Readable<string | undefined>
 
   const table = getTable()
 
@@ -30,4 +31,4 @@
   $: recordDo = $record.data?.record ? RecordDO.fromJSON($table, $record.data?.record) : undefined
 </script>
 
-<RecordDetailSheet {readonly} {recordDo} isLoading={$record.isLoading} {r} />
+<RecordDetailSheet {readonly} {viewId} {recordDo} isLoading={$record.isLoading} {r} />

apps/frontend/src/lib/components/blocks/record-detail/table-record-detail-sheet.svelte

@@ -32,4 +32,4 @@
   $: recordDo = $record.data?.record ? RecordDO.fromJSON($table, $record.data?.record) : undefined
 </script>
 
-<RecordDetailSheet {readonly} {recordDo} isLoading={$record.isLoading} {r} />
+<RecordDetailSheet {viewId} {readonly} {recordDo} isLoading={$record.isLoading} {r} />

apps/frontend/src/lib/components/blocks/template/template-preview.svelte

@@ -205,4 +205,4 @@
   </div>
 {/if}
 
-<RecordDetailSheet readonly recordDo={$recordDo} isLoading={false} {r} />
+<RecordDetailSheet viewId={currentViewId} readonly recordDo={$recordDo} isLoading={false} {r} />

apps/frontend/src/routes/(share)/s/b/[shareId]/t/[tableId]/[[viewId]]/+page.svelte

@@ -40,5 +40,5 @@
 </main>
 
 {#if RecordDetailSheet}
-  <RecordDetailSheet readonly {r} />
+  <RecordDetailSheet {viewId} readonly {r} />
 {/if}

apps/frontend/src/routes/(share)/s/v/[shareId]/+page.svelte

@@ -21,5 +21,5 @@
 <ShareViewPage {viewId} shareId={$page.params.shareId} />
 
 {#if RecordDetailSheet}
-  <RecordDetailSheet readonly {r} />
+  <RecordDetailSheet {viewId} readonly {r} />
 {/if}