feat: import template allow to view record detail

apps/frontend/src/lib/components/blocks/bulk-update-records/bulk-update-records-preview.svelte

@@ -7,6 +7,7 @@
   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()
 
@@ -43,7 +44,7 @@
     </Dialog.Header>
 
     <div class="h-full w-full flex-1 overflow-auto">
-      <GridView class="h-full w-full border" readonly {viewId} {filter} />
+      <GridView class="h-full w-full border" readonly {viewId} {filter} {r} />
     </div>
   </Dialog.Content>
 </Dialog.Root>

apps/frontend/src/lib/components/blocks/gallery-view/gallery-view-card.svelte

@@ -16,11 +16,12 @@
   import FieldValue from "../field-value/field-value.svelte"
   import { getBgColor } from "../grid-view/grid-view.util"
   import { cn } from "$lib/utils"
+  import type { Writable } from "svelte/store"
 
   const table = getTable()
   export let record: RecordDO
   export let fields: Field[]
-  const r = queryParam("r")
+  export let r: Writable<string | null>
 
   let values = record.flatten()
   let displayValues = record.displayValues?.toJSON() ?? {}

apps/frontend/src/lib/components/blocks/gallery-view/gallery-view-cards.svelte

@@ -2,12 +2,13 @@
   import GalleryViewCard from "./gallery-view-card.svelte"
   import { getRecordsStore } from "$lib/store/records.store"
   import { getTable } from "$lib/store/table.store"
-  import type { Readable } from "svelte/store"
+  import type { Readable, Writable } from "svelte/store"
   import GalleryViewEmpty from "./gallery-view-empty.svelte"
 
   const table = getTable()
   export let viewId: Readable<string>
   export let fieldId: string
+  export let r: Writable<string | null>
   const recordsStore = getRecordsStore()
 
   $: view = $table.views.getViewById($viewId)
@@ -23,7 +24,7 @@
 {:else}
   <div class="grid w-full flex-1 gap-4 overflow-y-auto sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-5">
     {#each $records as record (record.id.value)}
-      <GalleryViewCard {record} {fieldId} {fields} {color} />
+      <GalleryViewCard {record} {fieldId} {fields} {color} {r} />
     {/each}
   </div>
 {/if}

apps/frontend/src/lib/components/blocks/gallery-view/gallery-view.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { getTable } from "$lib/store/table.store"
-  import { derived, writable, type Readable } from "svelte/store"
+  import { derived, writable, type Readable, type Writable } from "svelte/store"
   import { type GalleryView, type IRecordsDTO, Records } from "@undb/table"
   import { queryParam } from "sveltekit-search-params"
   import TableTools from "../table-tools/table-tools.svelte"
@@ -16,6 +16,7 @@
   const table = getTable()
   export let viewId: Readable<string>
   export let shareId: string | undefined = undefined
+  export let r: Writable<string | null>
 
   $: view = $table.views.getViewById($viewId) as GalleryView
 
@@ -75,7 +76,7 @@
   {:else if $isLoading}
     <GalleryViewLoading />
   {:else}
-    <GalleryViewCards fieldId={field} {viewId} />
+    <GalleryViewCards fieldId={field} {viewId} {r} />
   {/if}
 </div>
 {#if field}

apps/frontend/src/lib/components/blocks/grid-view/grid-view-actions.svelte

@@ -7,10 +7,11 @@
   import { DELETE_RECORD_MODAL, DUPLICATE_RECORD_MODAL, toggleModal } from "$lib/store/modal.store"
   import { queryParam } from "sveltekit-search-params"
   import { ClipboardCopyIcon, CopyIcon, Maximize2Icon, Trash2Icon } from "lucide-svelte"
+  import type { Writable } from "svelte/store"
 
   const deleteRecordId = queryParam("deleteRecordId")
   const duplicateRecordId = queryParam("duplicateRecordId")
-  const r = queryParam("r")
+  export let r: Writable<string | null>
 
   export let id: string
 

apps/frontend/src/lib/components/blocks/grid-view/grid-view-data-table.svelte

@@ -41,14 +41,14 @@
   export let isLoading = false
   export let total: number
   export let hidePagination = false
+  export let r: Writable<string | null>
 
   const t = getTable()
 
   let fields = derived(t, ($t) => $t?.getOrderedVisibleFields($viewId) ?? ([] as Field[]))
 
   $: perPage = $preferences.gridViewPerPage ?? 50
 
-  const r = queryParam("r")
   const deleteRecordId = queryParam("deleteRecordId")
   const duplicateRecordId = queryParam("duplicateRecordId")
 
@@ -106,7 +106,7 @@
       table.column({
         accessor: "open",
         header: () => "",
-        cell: ({ row }) => createRender(GridViewOpen, { recordId: row.original.id }),
+        cell: ({ row }) => createRender(GridViewOpen, { recordId: row.original.id, r }),
         plugins: {
           resize: {
             initialWidth: 30,
@@ -148,7 +148,7 @@
           return createRender(GridViewActionHeader, { readonly })
         },
         accessor: ({ id }) => id,
-        cell: (item) => createRender(GridViewActions, { id: item.value, readonly }),
+        cell: (item) => createRender(GridViewActions, { id: item.value, readonly, r }),
         plugins: {
           resize: {
             initialWidth: 50,
@@ -352,34 +352,34 @@
   </ScrollArea>
 
   {#if !hidePagination}
-  <div class="flex items-center justify-center border-t px-4 py-2">
-    <div class="flex flex-1 flex-row items-center">
-      <ViewPagination {perPage} bind:currentPage={$currentPage} count={total} />
-      <div class="flex items-center gap-2 text-sm">
-        <Select.Root
-          selected={{ value: perPage, label: String(perPage) }}
-          onSelectedChange={(value) => {
-            if (value) {
-              $preferences.gridViewPerPage = value.value
-            }
-            $currentPage = null
-          }}
-        >
-          <Select.Trigger value={$preferences.gridViewPerPage} class="min-w-16">
-            <Select.Value placeholder="page" />
-          </Select.Trigger>
-          <Select.Content>
-            <Select.Item value={1}>1</Select.Item>
-            <Select.Item value={10}>10</Select.Item>
-            <Select.Item value={50}>50</Select.Item>
-            <Select.Item value={100}>100</Select.Item>
-          </Select.Content>
-        </Select.Root>
+    <div class="flex items-center justify-center border-t px-4 py-2">
+      <div class="flex flex-1 flex-row items-center">
+        <ViewPagination {perPage} bind:currentPage={$currentPage} count={total} />
+        <div class="flex items-center gap-2 text-sm">
+          <Select.Root
+            selected={{ value: perPage, label: String(perPage) }}
+            onSelectedChange={(value) => {
+              if (value) {
+                $preferences.gridViewPerPage = value.value
+              }
+              $currentPage = null
+            }}
+          >
+            <Select.Trigger value={$preferences.gridViewPerPage} class="min-w-16">
+              <Select.Value placeholder="page" />
+            </Select.Trigger>
+            <Select.Content>
+              <Select.Item value={1}>1</Select.Item>
+              <Select.Item value={10}>10</Select.Item>
+              <Select.Item value={50}>50</Select.Item>
+              <Select.Item value={100}>100</Select.Item>
+            </Select.Content>
+          </Select.Root>
 
-        <span class="text-muted-foreground flex-1 text-nowrap text-xs">
-          {total} Rows
-        </span>
-      </div>
+          <span class="text-muted-foreground flex-1 text-nowrap text-xs">
+            {total} Rows
+          </span>
+        </div>
       </div>
     </div>
   {/if}

apps/frontend/src/lib/components/blocks/grid-view/grid-view-open.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
   import { Maximize2Icon } from "lucide-svelte"
-  import { queryParam, ssp } from "sveltekit-search-params"
+  import type { Writable } from "svelte/store"
 
-  const r = queryParam("r", ssp.string(), { pushHistory: false })
   export let recordId: string
+  export let r: Writable<string | null>
 </script>
 
 <button

apps/frontend/src/lib/components/blocks/grid-view/grid-view.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { derived, writable, type Readable } from "svelte/store"
+  import { derived, writable, type Readable, type Writable } from "svelte/store"
   import { createRecordsStore, setRecordsStore, type RecordsStore } from "$lib/store/records.store"
   import { Records, type IRecordsDTO, type IViewFilterGroup } from "@undb/table"
   import { createQuery } from "@tanstack/svelte-query"
@@ -14,6 +14,7 @@
 
   const t = getTable()
   export let viewId: Readable<string>
+  export let r: Writable<string | null>
 
   const q = queryParam("q")
   export let filter: IViewFilterGroup | undefined = undefined
@@ -67,6 +68,7 @@
   {readonly}
   {perPage}
   {currentPage}
+  {r}
   isLoading={$getRecords.isLoading}
   total={$getRecords.data?.total ?? 0}
 />

apps/frontend/src/lib/components/blocks/kanban-view/kanban-card.svelte

@@ -3,19 +3,18 @@
   import FieldValue from "../field-value/field-value.svelte"
   import { getTable } from "$lib/store/table.store"
   import * as Tooltip from "$lib/components/ui/tooltip"
-  import { queryParam } from "sveltekit-search-params"
   import { cn } from "$lib/utils"
   import { getBgColor } from "../grid-view/grid-view.util"
+  import type { Writable } from "svelte/store"
 
   const table = getTable()
   export let color: ViewColor | undefined
+  export let r: Writable<string | null>
 
   export let fields: Field[]
   export let record: RecordDO
   export let readonly = false
 
-  const r = queryParam("r")
-
   $: values = record.flatten()
   $: displayValues = record.displayValues?.toJSON() ?? {}
 

apps/frontend/src/lib/components/blocks/kanban-view/kanban-view.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { getTable } from "$lib/store/table.store"
-  import type { Readable } from "svelte/store"
+  import type { Readable, Writable } from "svelte/store"
   import type { KanbanView, RecordDO } from "@undb/table"
   import SelectKanbanField from "./select-kanban-field.svelte"
   import SelectKanbanView from "./select-kanban-view.svelte"
@@ -16,6 +16,7 @@
   export let readonly = false
   export let records: RecordDO[] | undefined = undefined
   export let disableRecordQuery = false
+  export let r: Writable<string | null>
 
   $: view = $table.views.getViewById($viewId) as KanbanView
   $: fieldId = view.type === "kanban" ? view.field.into(undefined) : undefined
@@ -37,7 +38,7 @@
   {#if view.type === "kanban"}
     {#if field?.type === "select"}
       {#if field.isSingle}
-        <SelectKanbanView {view} {shareId} {viewId} {disableRecordQuery} {readonly} />
+        <SelectKanbanView {view} {shareId} {viewId} {disableRecordQuery} {readonly} {r} />
       {:else}
         <section class="flex h-full w-full items-center justify-center">
           <SelectKanbanRequiresSingle {view} {field} {shareId} />

apps/frontend/src/lib/components/blocks/kanban-view/select-kanban-collapsed-lane.svelte

@@ -5,11 +5,11 @@
   import { kanbanStore } from "$lib/store/kanban.store"
 
   export let option: IOption
-  export let viewId: string
+  export let viewId: string | undefined
 </script>
 
 <div class="flex h-full w-full flex-1 flex-col items-center gap-2">
-  <button on:click={() => kanbanStore.toggleLane(viewId, option.id)}>
+  <button on:click={() => kanbanStore.toggleLane(viewId ?? "", option.id)}>
     <ChevronRightIcon class="text-muted-foreground h-4 w-4" />
   </button>
   <Option class="translate-y-8 -rotate-90 text-nowrap" {option} />

apps/frontend/src/lib/components/blocks/kanban-view/select-kanban-lane.svelte

@@ -14,7 +14,7 @@
     type IRecordsDTO,
   } from "@undb/table"
   import KanbanSkeleton from "./kanban-skeleton.svelte"
-  import { derived, type Readable } from "svelte/store"
+  import { derived, type Readable, type Writable } from "svelte/store"
   import { getTable } from "$lib/store/table.store"
   import KanbanCard from "./kanban-card.svelte"
   import Button from "$lib/components/ui/button/button.svelte"
@@ -57,6 +57,7 @@
   export let readonly = false
   export let shareId: string | undefined = undefined
   export let disableRecordQuery = false
+  export let r: Writable<string | null>
 
   $: color = view.color.into(undefined)
 
@@ -359,7 +360,7 @@
           <p>error: {$query.error.message}</p>
         {:else}
           {#each recordDos as record (record.id.value)}
-            <KanbanCard {readonly} {record} {fields} {color} />
+            <KanbanCard {readonly} {record} {fields} {color} {r} />
           {/each}
           {#if $query.hasNextPage && $query.isFetchedAfterMount}
             <Button

apps/frontend/src/lib/components/blocks/kanban-view/select-kanban-view.svelte

@@ -22,6 +22,7 @@
   import * as Popover from "$lib/components/ui/popover"
   import OptionEditor from "../option/option-editor.svelte"
   import { invalidate } from "$app/navigation"
+  import type { Writable } from "svelte/store"
 
   const table = getTable()
 
@@ -30,6 +31,7 @@
   export let readonly = false
   export let shareId: string | undefined = undefined
   export let disableRecordQuery = false
+  export let r: Writable<string | null>
 
   let fieldId = view.field.unwrapUnchecked()!
   let field = $table.schema.getFieldById(new FieldIdVo(fieldId)).into(undefined) as SelectField
@@ -110,6 +112,7 @@
       {shareId}
       {view}
       {disableRecordQuery}
+      {r}
     />
     {#each options as option (option.id)}
       <SelectKanbanLane
@@ -122,6 +125,7 @@
         {shareId}
         {view}
         {disableRecordQuery}
+        {r}
       />
     {/each}
     {#if !shareId && !readonly}

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

@@ -5,11 +5,11 @@
   import { createMutation } from "@tanstack/svelte-query"
   import { trpc } from "$lib/trpc/client"
   import { getTable } from "$lib/store/table.store"
-  import { queryParam } from "sveltekit-search-params"
   import { getRecordsStore } from "$lib/store/records.store"
+  import type { Writable } from "svelte/store"
 
   const table = getTable()
-  const r = queryParam("r")
+  export let r: Writable<string | null>
   const recordsStore = getRecordsStore()
 
   $: canDelete = $hasPermission("record:delete")

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

@@ -2,7 +2,6 @@
   import * as Sheet from "$lib/components/ui/sheet"
   import Button from "$lib/components/ui/button/button.svelte"
   import RecordDetail from "./record-detail.svelte"
-  import { queryParam, ssp } from "sveltekit-search-params"
   import { getTable } from "$lib/store/table.store"
   import { useIsMutating, useQueryClient } from "@tanstack/svelte-query"
   import { RecordDO } from "@undb/table"
@@ -13,12 +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"
 
   export let readonly = false
   export let recordDo: RecordDO | undefined
   export let isLoading: boolean
-
-  const r = queryParam("r", ssp.string(), { pushHistory: false })
+  export let r: Writable<string | null>
 
   const table = getTable()
   const isUpdatingRecord = useIsMutating({
@@ -37,6 +36,7 @@
       r.set("")
     }
   }}
+  portal="body"
 >
   <Sheet.Content
     class={cn(
@@ -51,7 +51,7 @@
         <!-- <button disabled class="mr-6" on:click={() => ($preferences.showAudit = !$preferences.showAudit)}>
           <HistoryIcon class="text-muted-foreground h-4 w-4" />
         </button> -->
-        <RecordDetailMenu />
+        <RecordDetailMenu {r} />
       </Sheet.Title>
     </Sheet.Header>