From 460a53869e97c4eb5d44b8dfbbb1487848362e80 Mon Sep 17 00:00:00 2001
From: nichenqin <nichenqin@hotmail.com>
Date: Sat, 28 Sep 2024 09:59:03 +0800
Subject: [PATCH] feat: import template allow to view record detail

---
 .../bulk-update-records-preview.svelte        |  3 +-
 .../gallery-view/gallery-view-card.svelte     |  3 +-
 .../gallery-view/gallery-view-cards.svelte    |  5 +-
 .../blocks/gallery-view/gallery-view.svelte   |  5 +-
 .../blocks/grid-view/grid-view-actions.svelte |  3 +-
 .../grid-view/grid-view-data-table.svelte     | 60 +++++++++----------
 .../blocks/grid-view/grid-view-open.svelte    |  4 +-
 .../blocks/grid-view/grid-view.svelte         |  4 +-
 .../blocks/kanban-view/kanban-card.svelte     |  5 +-
 .../blocks/kanban-view/kanban-view.svelte     |  5 +-
 .../select-kanban-collapsed-lane.svelte       |  4 +-
 .../kanban-view/select-kanban-lane.svelte     |  5 +-
 .../kanban-view/select-kanban-view.svelte     |  4 ++
 .../record-detail/record-detail-menu.svelte   |  4 +-
 .../record-detail/record-detail-sheet.svelte  |  8 +--
 .../share-record-detail-sheet.svelte          |  8 +--
 .../table-record-detail-sheet.svelte          |  5 +-
 .../blocks/share/share-gallery-view.svelte    |  3 +-
 .../blocks/share/share-grid-view.svelte       |  2 +
 .../blocks/share/share-kanban-view.svelte     |  3 +-
 .../blocks/template/template-grid-view.svelte |  4 +-
 .../blocks/template/template-preview.svelte   | 14 ++++-
 .../lib/components/blocks/view/view.svelte    |  7 ++-
 apps/frontend/src/lib/store/records.store.ts  |  2 +
 .../t/[tableId]/[[viewId]]/+page.svelte       |  3 +-
 .../routes/(share)/s/v/[shareId]/+page.svelte |  3 +-
 26 files changed, 102 insertions(+), 74 deletions(-)

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 b5a2b4cc2..885e08f2c 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
@@ -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>
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 68831a988..4a1ab6ef6 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
@@ -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() ?? {}
diff --git a/apps/frontend/src/lib/components/blocks/gallery-view/gallery-view-cards.svelte b/apps/frontend/src/lib/components/blocks/gallery-view/gallery-view-cards.svelte
index a2ed51860..7eb4ea87b 100644
--- a/apps/frontend/src/lib/components/blocks/gallery-view/gallery-view-cards.svelte
+++ b/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}
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 d42dbb47e..faa5a2555 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
@@ -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}
diff --git a/apps/frontend/src/lib/components/blocks/grid-view/grid-view-actions.svelte b/apps/frontend/src/lib/components/blocks/grid-view/grid-view-actions.svelte
index 33ddb0d63..9a9d332e4 100644
--- a/apps/frontend/src/lib/components/blocks/grid-view/grid-view-actions.svelte
+++ b/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
 
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 2ae13a776..ad85e159c 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
@@ -41,6 +41,7 @@
   export let isLoading = false
   export let total: number
   export let hidePagination = false
+  export let r: Writable<string | null>
 
   const t = getTable()
 
@@ -48,7 +49,6 @@
 
   $: 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}
diff --git a/apps/frontend/src/lib/components/blocks/grid-view/grid-view-open.svelte b/apps/frontend/src/lib/components/blocks/grid-view/grid-view-open.svelte
index 09d71ebf5..2da09d860 100644
--- a/apps/frontend/src/lib/components/blocks/grid-view/grid-view-open.svelte
+++ b/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
diff --git a/apps/frontend/src/lib/components/blocks/grid-view/grid-view.svelte b/apps/frontend/src/lib/components/blocks/grid-view/grid-view.svelte
index 8654eb854..0facbe0f2 100644
--- a/apps/frontend/src/lib/components/blocks/grid-view/grid-view.svelte
+++ b/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}
 />
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 f47ff2160..4c9b5b52d 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
@@ -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() ?? {}
 
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 d3e549c0f..bb622b374 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
@@ -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} />
diff --git a/apps/frontend/src/lib/components/blocks/kanban-view/select-kanban-collapsed-lane.svelte b/apps/frontend/src/lib/components/blocks/kanban-view/select-kanban-collapsed-lane.svelte
index d887cbebb..adbaad09f 100644
--- a/apps/frontend/src/lib/components/blocks/kanban-view/select-kanban-collapsed-lane.svelte
+++ b/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} />
diff --git a/apps/frontend/src/lib/components/blocks/kanban-view/select-kanban-lane.svelte b/apps/frontend/src/lib/components/blocks/kanban-view/select-kanban-lane.svelte
index 864666858..ad8c0e42f 100644
--- a/apps/frontend/src/lib/components/blocks/kanban-view/select-kanban-lane.svelte
+++ b/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
diff --git a/apps/frontend/src/lib/components/blocks/kanban-view/select-kanban-view.svelte b/apps/frontend/src/lib/components/blocks/kanban-view/select-kanban-view.svelte
index 1cea75ebd..7661f9ba9 100644
--- a/apps/frontend/src/lib/components/blocks/kanban-view/select-kanban-view.svelte
+++ b/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}
diff --git a/apps/frontend/src/lib/components/blocks/record-detail/record-detail-menu.svelte b/apps/frontend/src/lib/components/blocks/record-detail/record-detail-menu.svelte
index 44da4ca6c..978039ff3 100644
--- a/apps/frontend/src/lib/components/blocks/record-detail/record-detail-menu.svelte
+++ b/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")
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 975e2a623..3d6b9c402 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
@@ -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>
 
diff --git a/apps/frontend/src/lib/components/blocks/record-detail/share-record-detail-sheet.svelte b/apps/frontend/src/lib/components/blocks/record-detail/share-record-detail-sheet.svelte
index 2dbd721de..e9076e6eb 100644
--- a/apps/frontend/src/lib/components/blocks/record-detail/share-record-detail-sheet.svelte
+++ b/apps/frontend/src/lib/components/blocks/record-detail/share-record-detail-sheet.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
-  import { queryParam, ssp } from "sveltekit-search-params"
-  import { getTable, viewId } from "$lib/store/table.store"
+  import { getTable } from "$lib/store/table.store"
   import { trpc } from "$lib/trpc/client"
   import { createQuery } from "@tanstack/svelte-query"
   import { RecordDO } from "@undb/table"
@@ -8,11 +7,10 @@
   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
 
-  const r = queryParam("r", ssp.string(), { pushHistory: false })
-
   const table = getTable()
 
   const record = createQuery(
@@ -32,4 +30,4 @@
   $: recordDo = $record.data?.record ? RecordDO.fromJSON($table, $record.data?.record) : undefined
 </script>
 
-<RecordDetailSheet {readonly} {recordDo} isLoading={$record.isLoading} />
+<RecordDetailSheet {readonly} {recordDo} isLoading={$record.isLoading} {r} />
diff --git a/apps/frontend/src/lib/components/blocks/record-detail/table-record-detail-sheet.svelte b/apps/frontend/src/lib/components/blocks/record-detail/table-record-detail-sheet.svelte
index 176199588..535b18e44 100644
--- a/apps/frontend/src/lib/components/blocks/record-detail/table-record-detail-sheet.svelte
+++ b/apps/frontend/src/lib/components/blocks/record-detail/table-record-detail-sheet.svelte
@@ -7,11 +7,10 @@
   import { derived } from "svelte/store"
   import { preferences } from "$lib/store/persisted.store"
   import RecordDetailSheet from "./record-detail-sheet.svelte"
+  import { r } from "$lib/store/records.store"
 
   export let readonly = false
 
-  const r = queryParam("r", ssp.string(), { pushHistory: false })
-
   const table = getTable()
 
   const record = createQuery(
@@ -31,4 +30,4 @@
   $: recordDo = $record.data?.record ? RecordDO.fromJSON($table, $record.data?.record) : undefined
 </script>
 
-<RecordDetailSheet {readonly} {recordDo} isLoading={$record.isLoading} />
+<RecordDetailSheet {readonly} {recordDo} isLoading={$record.isLoading} {r} />
diff --git a/apps/frontend/src/lib/components/blocks/share/share-gallery-view.svelte b/apps/frontend/src/lib/components/blocks/share/share-gallery-view.svelte
index cbd1dcc7f..56958ac6c 100644
--- a/apps/frontend/src/lib/components/blocks/share/share-gallery-view.svelte
+++ b/apps/frontend/src/lib/components/blocks/share/share-gallery-view.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
   import type { Readable } from "svelte/store"
   import GalleryView from "../gallery-view/gallery-view.svelte"
+  import { r } from "$lib/store/records.store"
 
   export let viewId: Readable<string>
   export let shareId: string
 </script>
 
-<GalleryView {shareId} {viewId} />
+<GalleryView {shareId} {viewId} {r} />
diff --git a/apps/frontend/src/lib/components/blocks/share/share-grid-view.svelte b/apps/frontend/src/lib/components/blocks/share/share-grid-view.svelte
index 807667003..1f78be8e7 100644
--- a/apps/frontend/src/lib/components/blocks/share/share-grid-view.svelte
+++ b/apps/frontend/src/lib/components/blocks/share/share-grid-view.svelte
@@ -9,6 +9,7 @@
   import { Records, type IRecordsDTO } from "@undb/table"
   import { derived, type Readable } from "svelte/store"
   import { queryParam, ssp } from "sveltekit-search-params"
+  import { r } from "$lib/store/records.store"
 
   export let viewId: Readable<string | undefined>
 
@@ -50,6 +51,7 @@
 {#if store}
   <GridViewDataTable
     {viewId}
+    {r}
     readonly
     {perPage}
     {currentPage}
diff --git a/apps/frontend/src/lib/components/blocks/share/share-kanban-view.svelte b/apps/frontend/src/lib/components/blocks/share/share-kanban-view.svelte
index 4f5c441ff..82a9ee416 100644
--- a/apps/frontend/src/lib/components/blocks/share/share-kanban-view.svelte
+++ b/apps/frontend/src/lib/components/blocks/share/share-kanban-view.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
   import type { Readable } from "svelte/store"
   import KanbanView from "../kanban-view/kanban-view.svelte"
+  import { r } from "$lib/store/records.store"
 
   export let viewId: Readable<string>
   export let shareId: string
 </script>
 
-<KanbanView {shareId} {viewId} />
+<KanbanView {shareId} {viewId} {r} />
diff --git a/apps/frontend/src/lib/components/blocks/template/template-grid-view.svelte b/apps/frontend/src/lib/components/blocks/template/template-grid-view.svelte
index aa4a23cfb..0a7945c1b 100644
--- a/apps/frontend/src/lib/components/blocks/template/template-grid-view.svelte
+++ b/apps/frontend/src/lib/components/blocks/template/template-grid-view.svelte
@@ -1,13 +1,14 @@
 <script lang="ts">
   import GridViewDataTable from "$lib/components/blocks/grid-view/grid-view-data-table.svelte"
   import { createRecordsStore, setRecordsStore } from "$lib/store/records.store"
-  import { writable } from "svelte/store"
+  import { writable, type Writable } from "svelte/store"
   import { RecordDO, Records } from "@undb/table"
   import { type Readable } from "svelte/store"
   import { onDestroy } from "svelte"
 
   export let viewId: Readable<string | undefined>
   export let records: RecordDO[]
+  export let r: Writable<string | null>
 
   const perPage = writable(50)
   const currentPage = writable(1)
@@ -25,6 +26,7 @@
   {#key $viewId}
     <GridViewDataTable
       {viewId}
+      {r}
       readonly
       {perPage}
       {currentPage}
diff --git a/apps/frontend/src/lib/components/blocks/template/template-preview.svelte b/apps/frontend/src/lib/components/blocks/template/template-preview.svelte
index 794bbde08..d015ad2de 100644
--- a/apps/frontend/src/lib/components/blocks/template/template-preview.svelte
+++ b/apps/frontend/src/lib/components/blocks/template/template-preview.svelte
@@ -9,12 +9,13 @@
   import { HardDriveIcon, DatabaseIcon, ViewIcon, ChevronRightIcon } from "lucide-svelte"
   import * as Collapsible from "$lib/components/ui/collapsible"
   import { setTemplate } from "$lib/store/template.store"
+  import RecordDetailSheet from "$lib/components/blocks/record-detail/record-detail-sheet.svelte"
 
   export let template: ITemplateDTO
 
   setTemplate(writable(template))
 
-  let t = TemplateFactory.create(template.template.template, [],"preview")
+  let t = TemplateFactory.create(template.template.template, [], "preview")
   let tables = t.flatMap((base) => base.tables.map(({ table }) => table))
   let bases = t.map((base) => base.base)
 
@@ -35,6 +36,11 @@
     return $currentTable?.views.getViewById($currentViewId)
   })
 
+  let r = writable<string | null>(null)
+  let recordDo = derived([records, r], ([$records, $r]) => {
+    return $records.find((record) => record.id.value === $r)
+  })
+
   $: if ($currentTable) {
     setTable(writable($currentTable))
   }
@@ -186,12 +192,14 @@
       {#if $currentTable}
         <section class="flex h-full flex-1 flex-col overflow-auto">
           {#if $currentView?.type === "grid"}
-            <TemplateGridView viewId={currentViewId} records={$records} />
+            <TemplateGridView viewId={currentViewId} records={$records} {r} />
           {:else if $currentView?.type === "kanban"}
-            <KanbanView viewId={currentViewId} records={$records} disableRecordQuery readonly />
+            <KanbanView viewId={currentViewId} records={$records} {r} disableRecordQuery readonly />
           {/if}
         </section>
       {/if}
     {/key}
   </div>
 {/if}
+
+<RecordDetailSheet readonly recordDo={$recordDo} isLoading={false} {r} />
diff --git a/apps/frontend/src/lib/components/blocks/view/view.svelte b/apps/frontend/src/lib/components/blocks/view/view.svelte
index 3dfa5529d..a5f8f2982 100644
--- a/apps/frontend/src/lib/components/blocks/view/view.svelte
+++ b/apps/frontend/src/lib/components/blocks/view/view.svelte
@@ -4,6 +4,7 @@
   import GridView from "../grid-view/grid-view.svelte"
   import KanbanView from "../kanban-view/kanban-view.svelte"
   import GalleryView from "../gallery-view/gallery-view.svelte"
+  import { r } from "$lib/store/records.store"
 
   const table = getTable()
   export let viewId: Readable<string>
@@ -14,11 +15,11 @@
 {#key $viewId}
   {#if view}
     {#if view.type === "kanban"}
-      <KanbanView {viewId} />
+      <KanbanView {viewId} {r} />
     {:else if view.type === "grid"}
-      <GridView {viewId} />
+      <GridView {viewId} {r} />
     {:else if view.type === "gallery"}
-      <GalleryView {viewId} />
+      <GalleryView {viewId} {r} />
     {/if}
   {/if}
 {/key}
diff --git a/apps/frontend/src/lib/store/records.store.ts b/apps/frontend/src/lib/store/records.store.ts
index 43c8a8ca7..71a5a19ae 100644
--- a/apps/frontend/src/lib/store/records.store.ts
+++ b/apps/frontend/src/lib/store/records.store.ts
@@ -152,3 +152,5 @@ export function setRecordsStore(store: RecordsStore) {
 export function getRecordsStore() {
   return getContext<RecordsStore>("records")
 }
+
+export const r = queryParam("r", ssp.string(), { pushHistory: false })
diff --git a/apps/frontend/src/routes/(share)/s/b/[shareId]/t/[tableId]/[[viewId]]/+page.svelte b/apps/frontend/src/routes/(share)/s/b/[shareId]/t/[tableId]/[[viewId]]/+page.svelte
index 7cd247b28..8d8e82457 100644
--- a/apps/frontend/src/routes/(share)/s/b/[shareId]/t/[tableId]/[[viewId]]/+page.svelte
+++ b/apps/frontend/src/routes/(share)/s/b/[shareId]/t/[tableId]/[[viewId]]/+page.svelte
@@ -9,6 +9,7 @@
   import ShareGridView from "$lib/components/blocks/share/share-grid-view.svelte"
   import ShareGalleryView from "$lib/components/blocks/share/share-gallery-view.svelte"
   import ShareKanbanView from "$lib/components/blocks/share/share-kanban-view.svelte"
+  import { r } from "$lib/store/records.store"
 
   let RecordDetailSheet: ComponentType
 
@@ -39,5 +40,5 @@
 </main>
 
 {#if RecordDetailSheet}
-  <RecordDetailSheet readonly />
+  <RecordDetailSheet readonly {r} />
 {/if}
diff --git a/apps/frontend/src/routes/(share)/s/v/[shareId]/+page.svelte b/apps/frontend/src/routes/(share)/s/v/[shareId]/+page.svelte
index c1f09144c..cccadabac 100644
--- a/apps/frontend/src/routes/(share)/s/v/[shareId]/+page.svelte
+++ b/apps/frontend/src/routes/(share)/s/v/[shareId]/+page.svelte
@@ -4,6 +4,7 @@
   import { shareStore } from "$lib/store/share.store"
   import { onMount, type ComponentType } from "svelte"
   import { derived } from "svelte/store"
+  import { r } from "$lib/store/records.store"
 
   let RecordDetailSheet: ComponentType
 
@@ -20,5 +21,5 @@
 <ShareViewPage {viewId} shareId={$page.params.shareId} />
 
 {#if RecordDetailSheet}
-  <RecordDetailSheet readonly />
+  <RecordDetailSheet readonly {r} />
 {/if}