fix: fix some filter issue;

apps/frontend/src/lib/components/blocks/base/share-base-nav.svelte

@@ -4,6 +4,7 @@
   import { ChevronRightIcon, DatabaseIcon, HardDriveIcon, SheetIcon } from "lucide-svelte"
   import * as Collapsible from "$lib/components/ui/collapsible"
   import { cn } from "$lib/utils"
+  import { setShareId } from "$lib/store/share.store.svelte"
 
   export let base: {
     id: string
@@ -27,6 +28,10 @@
 
   $: active = !tableId && !viewId
   let open: Record<string, boolean> = {}
+
+  $: if (shareId) {
+    setShareId(shareId)
+  }
 </script>
 
 <nav class="items-start gap-1 px-1.5 text-sm font-medium">

apps/frontend/src/lib/components/blocks/filters-editor/filters-editor.svelte

@@ -8,6 +8,10 @@
     FieldIdVo,
     type Conjunction,
     type FieldType,
+    addMaybeCondition,
+    addMaybeConditionGroup,
+    removeCondition,
+    swapCondition,
   } from "@undb/table"
   import FilterField from "./filter-field.svelte"
   import Button from "$lib/components/ui/button/button.svelte"
@@ -34,6 +38,7 @@
   export let filter: (field: IField) => boolean = () => true
   export let disabled = false
   export let readonly = false
+  export let sameWidth = true
 
   export let onValueChange: ((value: MaybeConditionGroup<any> | undefined) => void) | undefined = undefined
 
@@ -54,11 +59,7 @@
       value: undefined,
       option: {},
     }
-    if (!value) {
-      value = { children: [filter], conjunction: defaultConjunction, id: uid(10), option: {} }
-    } else {
-      value.children = [...value.children, filter]
-    }
+      value = addMaybeCondition(value, filter, defaultConjunction)
   }
 
   function addConditionGroup() {
@@ -68,30 +69,16 @@
       option: {},
       children: [],
     }
-    if (!value) {
-      value = { children: [conditionGroup], conjunction: defaultConjunction, id: uid(10), option: {} }
-    } else {
-      value.children = [...value.children, conditionGroup]
-    }
+      value = addMaybeConditionGroup(value, conditionGroup, defaultConjunction)
   }
 
   function removeFilter(index: number) {
-    if (value) {
-      value.children.splice(index, 1)
-      value.children = [...value.children]
-    }
+      value = removeCondition(value, index)
   }
 
   function swapFilter(oldIndex: number, newIndex: number) {
-    if (value) {
-      const filters = [...value.children]
-      const [removed] = filters.splice(oldIndex, 1)
-      filters.splice(newIndex, 0, removed)
-      value.children = [...filters]
-    }
+      value = swapCondition(value, oldIndex, newIndex)
   }
-
-  export let sameWidth = true
 </script>
 
 <div use:autoAnimate class={cn("space-y-2", isEven ? "bg-muted" : "bg-popover", $$restProps.class)} data-level={level}>
@@ -141,6 +128,7 @@
 
                     child = child
                     value = value
+                    onValueChange?.(value)
                   }
                 }}
                 {filter}
@@ -227,33 +215,33 @@
     <slot name="empty" />
   {/if}
   {#if !readonly}
-    <div class={cn("flex justify-between px-4", value?.children.length ? "border-t py-2" : "py-3")}>
-      <div class="flex items-center gap-2">
-        {#if !readonly && $hasPermission("table:update")}
-          <Button disabled={!filteredFields.length || disabled} variant="ghost" size="sm" on:click={addCondition}>
-            <PlusIcon class="mr-2 h-3 w-3" />
-            {$LL.table.common.condition.add()}
-          </Button>
-          {#if !disableGroup}
-            {#if level < 3}
-              <Button
-                disabled={!filteredFields.length || disabled}
-                variant="ghost"
-                class="text-muted-foreground"
-                size="sm"
-                on:click={addConditionGroup}
-              >
-                <PlusIcon class="mr-2 h-3 w-3" />
-                {$LL.table.common.condition.addGroup()}
-              </Button>
-            {/if}
+  <div class={cn("flex justify-between px-4", value?.children.length ? "border-t py-2" : "py-3")}>
+    <div class="flex items-center gap-2">
+      {#if ( !readonly && $hasPermission("table:update")) }
+        <Button disabled={!filteredFields.length || disabled} variant="ghost" size="sm" on:click={addCondition}>
+          <PlusIcon class="mr-2 h-3 w-3" />
+          {$LL.table.common.condition.add()}
+        </Button>
+        {#if !disableGroup}
+          {#if level < 3}
+            <Button
+              disabled={!filteredFields.length || disabled}
+              variant="ghost"
+              class="text-muted-foreground"
+              size="sm"
+              on:click={addConditionGroup}
+            >
+              <PlusIcon class="mr-2 h-3 w-3" />
+              {$LL.table.common.condition.addGroup()}
+            </Button>
           {/if}
         {/if}
-      </div>
-
-      {#if !readonly && $hasPermission("table:update")}
-        <slot name="footer" />
       {/if}
     </div>
-  {/if}
+
+    {#if !readonly && $hasPermission("table:update")}
+      <slot name="footer" />
+    {/if}
+  </div>
+{/if}
 </div>

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

@@ -79,7 +79,7 @@
   $: total = ($getRecordsQuery.data as any)?.total
 </script>
 
-<TableTools {r} {viewId} {readonly}>
+<TableTools {r} {viewId} {readonly} {shareId}>
   {#if !shareId}
     <GalleryViewOptionButton {view} {readonly} />
   {/if}

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

@@ -43,6 +43,7 @@
   export let total: number
   export let hidePagination = false
   export let r: Writable<string | null>
+  export let shareId: string | undefined
 
   const t = getTable()
 
@@ -181,7 +182,7 @@
 
 <div class="flex h-full w-full flex-col">
   {#if !readonly}
-    <TableTools {r} {viewId}>
+    <TableTools {r} {viewId} {shareId}>
       {#if selectedRecordIds.length}
         <SelectedRecordsButton
           {viewId}

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

@@ -85,6 +85,7 @@
   {perPage}
   {currentPage}
   {r}
+  {shareId}
   isLoading={$getRecords.isLoading}
   total={$getRecords.data?.total ?? 0}
 />

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

@@ -31,7 +31,7 @@
 </script>
 
 {#key $table.id.value}
-  <TableTools {readonly} {viewId} {r}>
+  <TableTools {readonly} {viewId} {r} {shareId}>
     {#if !shareId}
       <KanbanOptionButton {view} {readonly} />
     {/if}

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

@@ -72,7 +72,7 @@
   $: total = ($getRecordsQuery.data as any)?.total
 </script>
 
-<TableTools {r} {readonly} {viewId} />
+<TableTools {r} {readonly} {viewId} {shareId}/>
 
 <div class={cn("flex-1 overflow-y-auto overflow-x-hidden")}>
   {#if $isLoading}

apps/frontend/src/lib/components/blocks/share/share-button.svelte

@@ -7,7 +7,7 @@
   import { createMutation } from "@tanstack/svelte-query"
   import { CopyIcon, ShareIcon, CopyCheckIcon, ExternalLinkIcon, QrCodeIcon } from "lucide-svelte"
   import * as Popover from "$lib/components/ui/popover"
-  import { shareStore } from "$lib/store/share.store"
+  import { shareStore } from "$lib/store/share.store.svelte"
   import { invalidate } from "$app/navigation"
   import { Input } from "$lib/components/ui/input"
   import { getIframe, getShareUrl, type IShareTarget } from "@undb/share"

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

@@ -70,6 +70,7 @@
     readonly
     {perPage}
     {currentPage}
+    {shareId}
     isLoading={$getRecords.isLoading}
     total={$getRecords.data?.total ?? 0}
   />

apps/frontend/src/lib/components/blocks/table-tools/table-tools.svelte

@@ -14,6 +14,7 @@
   export let readonly = false
   export let r: Writable<string | null>
   export let viewId: Readable<string | undefined>
+  export let shareId: string | undefined
 
   const isPlayground = getIsPlayground()
 </script>
@@ -23,7 +24,7 @@
     {#if !readonly}
       <CreateRecordButton />
     {/if}
-    <ViewFilterEditor {readonly} {viewId} />
+    <ViewFilterEditor {readonly} {viewId} {shareId} />
     <ViewColorEditor {readonly} {viewId} />
     <ViewSort {readonly} {viewId} />
     <ViewFields {readonly} {viewId} />

apps/frontend/src/lib/components/blocks/view-color-editor/view-color-editor.svelte

@@ -97,9 +97,7 @@
       </Button>
       <div slot="empty" class="flex flex-col items-center gap-3 px-4 py-6 text-center">
         <FilterXIcon class="text-primary h-10 w-10" />
-        <h3 class="text-muted-foreground text-sm font-semibold tracking-tight">
-          {$LL.table.common.colorEmpty()}
-        </h3>
+        <h3 class="text-muted-foreground text-sm tracking-tight">{$LL.table.common.colorEmpty()}</h3>
       </div>
     </FiltersEditor>
   </Popover.Content>

apps/frontend/src/lib/components/blocks/view-filter-editor/view-filter-editor.svelte

@@ -103,7 +103,7 @@
 
       <div slot="empty" class="flex flex-col items-center gap-3 px-4 py-6 text-center">
         <FilterXIcon class="text-primary h-10 w-10" />
-        <h3 class="text-muted-foreground text-sm font-semibold tracking-tight">
+        <h3 class="text-muted-foreground text-sm tracking-tight">
           {$LL.table.common.filter.empty()}
         </h3>
       </div>

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

@@ -1,26 +1,15 @@
 <script lang="ts">
   import * as Popover from "$lib/components/ui/popover/index.js"
   import { Button } from "$lib/components/ui/button/index.js"
-  import * as Select from "$lib/components/ui/select"
   import Badge from "$lib/components/ui/badge/badge.svelte"
-  import {
-    ArrowDownAzIcon,
-    ArrowUpDownIcon,
-    ArrowUpZaIcon,
-    GripVerticalIcon,
-    Trash2Icon,
-    PlusIcon,
-    SortAscIcon,
-    LoaderCircleIcon,
-  } from "lucide-svelte"
+  import { ArrowUpDownIcon, GripVerticalIcon, Trash2Icon, PlusIcon, SortAscIcon, LoaderCircleIcon } from "lucide-svelte"
   import { cn } from "$lib/utils"
   import { SortableList } from "@jhubbardsf/svelte-sortablejs"
   import type { Readable } from "svelte/store"
   import { getTable } from "$lib/store/table.store"
   import { type IViewSort, isFieldSortable } from "@undb/table"
   import FieldPicker from "../field-picker/field-picker.svelte"
   import { createMutation, useQueryClient } from "@tanstack/svelte-query"
-  import { trpc } from "$lib/trpc/client"
   import { invalidate } from "$app/navigation"
   import { isNumber } from "radash"
   import { onMount } from "svelte"
@@ -137,18 +126,18 @@
                       }
                     }}
                     class="col-span-5 rounded-r-none border-r-0"
-                    disabled={$setViewSortMutation.isPending}
+                    disabled={$setViewSortMutation.isPending || readonly}
                   />
 
-                  <SortPicker bind:value={item.direction} class="col-span-3" />
+                  <SortPicker bind:value={item.direction} class="col-span-3" disabled={readonly} />
                 </div>
                 <div class="text-muted-foreground col-span-2 flex justify-end gap-2">
-                  {#if $hasPermission("table:update")}
+                  {#if $hasPermission("table:update") && !readonly}
                     <button disabled={$setViewSortMutation.isPending} on:click={() => removeSort(item.fieldId)}>
                       <Trash2Icon class="h-3 w-3" />
                     </button>
                     <button
-                      disabled={$setViewSortMutation.isPending}
+                      disabled={$setViewSortMutation.isPending || readonly}
                       class=".handler"
                       on:click={() => removeSort(item.fieldId)}
                     >

apps/frontend/src/lib/store/share.store.svelte.ts

@@ -0,0 +1,47 @@
+import type { IShareTarget } from "@undb/share"
+import { MaybeConditionGroup } from "@undb/table"
+import { getContext, setContext } from "svelte"
+import { writable } from "svelte/store"
+
+export interface IShare {
+  enabled: boolean
+  id: string
+  target: IShareTarget
+}
+
+export const createShareStore = () => {
+  const { subscribe, update } = writable<Map<string, IShare>>(new Map())
+
+  return {
+    subscribe,
+    set: (id: string, share: IShare) => update((shares) => shares.set(id, share)),
+  }
+}
+
+export const shareStore = createShareStore()
+
+const shareIdContext = "shareId"
+
+export const setShareId = (shareId: string) => {
+  setContext(shareIdContext, shareId)
+}
+
+export const getShareId = () => {
+  return getContext<string | undefined>(shareIdContext)
+}
+
+export const getIsShare = () => {
+  return !!getShareId()
+}
+
+export const createShareFilterStore = () => {
+  const { subscribe, update, set } = writable<MaybeConditionGroup<any> | undefined>(undefined)
+
+  return {
+    subscribe,
+    set,
+    update,
+  }
+}
+
+export const shareFilterStore = createShareFilterStore()

apps/frontend/src/routes/(authed)/(space)/bases/[baseId]/+layout.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import BaseHeader from "$lib/components/blocks/base/base-header.svelte"
   import UpdateBaseDialog from "$lib/components/blocks/base/update-base-dialog.svelte"
-  import { shareStore } from "$lib/store/share.store"
+  import { shareStore } from "$lib/store/share.store.svelte"
   import type { LayoutData } from "./$types"
 
   export let data: LayoutData

apps/frontend/src/routes/(authed)/(space)/dashboards/[dashboardId]/+layout.svelte

@@ -3,7 +3,7 @@
   import type { LayoutData } from "./$types"
   import { setDashboard } from "$lib/store/dashboard.store"
   import { writable } from "svelte/store"
-  import { shareStore } from "$lib/store/share.store"
+  import { shareStore } from "$lib/store/share.store.svelte"
 
   export let data: LayoutData