WIP - sharing list views

frontend/components/RecordSharing.vue

@@ -186,6 +186,8 @@ interface Props {
   objectApiName: string;
   recordId: string;
   ownerId?: string;
+  /** Optional base URL override for shares API. Defaults to /runtime/objects/{objectApiName}/records/{recordId}/shares */
+  basePath?: string;
 }
 
 const props = defineProps<Props>();
@@ -193,6 +195,11 @@ const props = defineProps<Props>();
 const { api } = useApi();
 const { toast } = useToast();
 
+/** Computed base path for all share API calls */
+const sharesBasePath = computed(() =>
+  props.basePath || `/runtime/objects/${props.objectApiName}/records/${props.recordId}/shares`
+);
+
 const loading = ref(true);
 const sharing = ref(false);
 const removing = ref<string | null>(null);
@@ -236,9 +243,7 @@ const loadShares = async () => {
   try {
     loading.value = true;
     error.value = null;
-    const response = await api.get(
-      `/runtime/objects/${props.objectApiName}/records/${props.recordId}/shares`
-    );
+    const response = await api.get(sharesBasePath.value);
     shares.value = response || [];
   } catch (e: any) {
     console.error('Failed to load shares:', e);
@@ -286,7 +291,7 @@ const createShare = async () => {
     console.log('Final payload:', payload);
     
     await api.post(
-      `/runtime/objects/${props.objectApiName}/records/${props.recordId}/shares`,
+      sharesBasePath.value,
       payload
     );
     toast.success('Record shared successfully');
@@ -313,7 +318,7 @@ const removeShare = async (shareId: string) => {
   try {
     removing.value = shareId;
     await api.delete(
-      `/runtime/objects/${props.objectApiName}/records/${props.recordId}/shares/${shareId}`
+      `${sharesBasePath.value}/${shareId}`
     );
     toast.success('Share removed successfully');
     await loadShares();

frontend/components/SavedViewPanel.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { ref, computed, nextTick } from 'vue'
 import {
   Sheet,
   SheetContent,
@@ -11,9 +11,7 @@ import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Badge } from '@/components/ui/badge'
 import { Separator } from '@/components/ui/separator'
-import { Switch } from '@/components/ui/switch'
-import { Label } from '@/components/ui/label'
-import { Pencil, Trash2, Users, Check, X } from 'lucide-vue-next'
+import { Pencil, Trash2, Users, Check, X, ChevronLeft } from 'lucide-vue-next'
 import type { SavedView, UpdateSavedViewPayload } from '@/composables/useSavedViews'
 
 interface Props {
@@ -38,8 +36,11 @@ const editingId = ref<string | null>(null)
 const editName = ref('')
 const deletingId = ref<string | null>(null)
 
+// Sharing sub-view: when set, renders RecordSharing for this view
+const sharingView = ref<SavedView | null>(null)
+
 const ownViews = computed(() => props.views.filter(v => v.isOwner))
-const sharedViews = computed(() => props.views.filter(v => !v.isOwner && v.isShared))
+const sharedViews = computed(() => props.views.filter(v => !v.isOwner))
 
 function startEdit(view: SavedView) {
   editingId.value = view.id
@@ -59,8 +60,12 @@ function commitEdit(view: SavedView) {
   cancelEdit()
 }
 
-function toggleShare(view: SavedView) {
-  emit('update-view', view.id, { isShared: !view.isShared })
+function openSharing(view: SavedView) {
+  sharingView.value = view
+}
+
+function closeSharing() {
+  sharingView.value = null
 }
 
 function confirmDelete(view: SavedView) {
@@ -79,127 +84,150 @@ function executeDelete(view: SavedView) {
 
 <template>
   <Sheet :open="open" @update:open="emit('update:open', $event)">
-    <SheetContent class="w-[420px] sm:w-[480px] overflow-y-auto">
-      <SheetHeader class="mb-4">
-        <SheetTitle>{{ objectLabel }} — Saved Views</SheetTitle>
-        <SheetDescription>
-          Manage your saved searches. Shared views are visible to all users in your workspace.
-        </SheetDescription>
-      </SheetHeader>
+    <SheetContent class="w-[420px] sm:w-[520px] overflow-y-auto">
 
-      <!-- Own Views -->
-      <section>
-        <p class="text-xs font-semibold text-muted-foreground uppercase tracking-wide mb-2">
-          My Views
-        </p>
-
-        <div v-if="ownViews.length === 0" class="text-sm text-muted-foreground py-3">
-          You have no saved views yet. Run a search and click <strong>Save view</strong>.
-        </div>
-
-        <ul class="space-y-1">
-          <li
-            v-for="view in ownViews"
-            :key="view.id"
-            class="group rounded-md border bg-card px-3 py-2"
-          >
-            <!-- Confirm delete row -->
-            <div v-if="deletingId === view.id" class="flex items-center gap-2">
-              <span class="flex-1 text-sm text-destructive">Delete "{{ view.name }}"?</span>
-              <Button size="sm" variant="destructive" @click="executeDelete(view)">Delete</Button>
-              <Button size="sm" variant="outline" @click="cancelDelete">Cancel</Button>
+      <!-- ─── Sharing sub-view ─── -->
+      <template v-if="sharingView">
+        <SheetHeader class="mb-4">
+          <div class="flex items-center gap-2">
+            <Button size="icon" variant="ghost" class="h-7 w-7 -ml-1" @click="closeSharing">
+              <ChevronLeft class="h-4 w-4" />
+            </Button>
+            <div>
+              <SheetTitle>Share "{{ sharingView.name }}"</SheetTitle>
+              <SheetDescription>
+                Grant access to specific users for this saved view.
+              </SheetDescription>
             </div>
+          </div>
+        </SheetHeader>
 
-            <!-- Edit name row -->
-            <div v-else-if="editingId === view.id" class="flex items-center gap-2">
-              <Input
-                v-model="editName"
-                class="h-7 flex-1 text-sm"
-                @keyup.enter="commitEdit(view)"
-                @keyup.escape="cancelEdit"
-                autofocus
-              />
-              <Button size="icon" variant="ghost" class="h-7 w-7" @click="commitEdit(view)">
-                <Check class="h-3.5 w-3.5" />
-              </Button>
-              <Button size="icon" variant="ghost" class="h-7 w-7" @click="cancelEdit">
-                <X class="h-3.5 w-3.5" />
-              </Button>
-            </div>
+        <RecordSharing
+          object-api-name="SavedListView"
+          :record-id="sharingView.id"
+          :owner-id="sharingView.userId"
+          :base-path="`/saved-views/${sharingView.id}/shares`"
+        />
+      </template>
 
-            <!-- Normal row -->
-            <div v-else class="flex items-center gap-2 min-h-[28px]">
-              <!-- View name (click to apply) -->
-              <button
-                class="flex-1 text-left text-sm truncate hover:text-primary transition-colors"
-                :class="{ 'font-medium text-primary': activeViewId === view.id }"
-                @click="emit('apply-view', view); emit('update:open', false)"
-              >
-                {{ view.name }}
-              </button>
+      <!-- ─── Main view list ─── -->
+      <template v-else>
+        <SheetHeader class="mb-4">
+          <SheetTitle>{{ objectLabel }} — Saved Views</SheetTitle>
+          <SheetDescription>
+            Manage your saved searches. Share views with specific users from your workspace.
+          </SheetDescription>
+        </SheetHeader>
 
-              <!-- Shared badge -->
-              <Badge v-if="view.isShared" variant="secondary" class="text-[10px] px-1.5 py-0">
-                <Users class="h-3 w-3 mr-1" />Shared
-              </Badge>
-
-              <!-- Actions (visible on hover) -->
-              <div class="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
-                <Button size="icon" variant="ghost" class="h-6 w-6" title="Rename" @click="startEdit(view)">
-                  <Pencil class="h-3 w-3" />
-                </Button>
-                <Button
-                  size="icon"
-                  variant="ghost"
-                  class="h-6 w-6"
-                  :title="view.isShared ? 'Unshare' : 'Share with team'"
-                  @click="toggleShare(view)"
-                >
-                  <Users class="h-3 w-3" :class="{ 'text-primary': view.isShared }" />
-                </Button>
-                <Button size="icon" variant="ghost" class="h-6 w-6 text-destructive hover:text-destructive" title="Delete" @click="confirmDelete(view)">
-                  <Trash2 class="h-3 w-3" />
-                </Button>
-              </div>
-            </div>
-
-            <!-- Description tooltip -->
-            <p
-              v-if="view.description && editingId !== view.id && deletingId !== view.id"
-              class="text-xs text-muted-foreground mt-1 truncate"
-            >
-              {{ view.description }}
-            </p>
-          </li>
-        </ul>
-      </section>
-
-      <!-- Shared views by others -->
-      <template v-if="sharedViews.length > 0">
-        <Separator class="my-4" />
+        <!-- Own Views -->
         <section>
           <p class="text-xs font-semibold text-muted-foreground uppercase tracking-wide mb-2">
-            Shared with me
+            My Views
           </p>
+
+          <div v-if="ownViews.length === 0" class="text-sm text-muted-foreground py-3">
+            You have no saved views yet. Run a search and click <strong>Save view</strong>.
+          </div>
+
           <ul class="space-y-1">
             <li
-              v-for="view in sharedViews"
+              v-for="view in ownViews"
               :key="view.id"
-              class="rounded-md border bg-card px-3 py-2"
+              class="group rounded-md border bg-card px-3 py-2"
             >
-              <button
-                class="w-full text-left text-sm truncate hover:text-primary transition-colors"
-                :class="{ 'font-medium text-primary': activeViewId === view.id }"
-                @click="emit('apply-view', view); emit('update:open', false)"
+              <!-- Confirm delete row -->
+              <div v-if="deletingId === view.id" class="flex items-center gap-2">
+                <span class="flex-1 text-sm text-destructive">Delete "{{ view.name }}"?</span>
+                <Button size="sm" variant="destructive" @click="executeDelete(view)">Delete</Button>
+                <Button size="sm" variant="outline" @click="cancelDelete">Cancel</Button>
+              </div>
+
+              <!-- Edit name row -->
+              <div v-else-if="editingId === view.id" class="flex items-center gap-2">
+                <Input
+                  v-model="editName"
+                  class="h-7 flex-1 text-sm"
+                  @keyup.enter="commitEdit(view)"
+                  @keyup.escape="cancelEdit"
+                  autofocus
+                />
+                <Button size="icon" variant="ghost" class="h-7 w-7" @click="commitEdit(view)">
+                  <Check class="h-3.5 w-3.5" />
+                </Button>
+                <Button size="icon" variant="ghost" class="h-7 w-7" @click="cancelEdit">
+                  <X class="h-3.5 w-3.5" />
+                </Button>
+              </div>
+
+              <!-- Normal row -->
+              <div v-else class="flex items-center gap-2 min-h-[28px]">
+                <!-- View name (click to apply) -->
+                <button
+                  class="flex-1 text-left text-sm truncate hover:text-primary transition-colors"
+                  :class="{ 'font-medium text-primary': activeViewId === view.id }"
+                  @click="emit('apply-view', view); emit('update:open', false)"
+                >
+                  {{ view.name }}
+                </button>
+
+                <!-- Actions (visible on hover) -->
+                <div class="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+                  <Button size="icon" variant="ghost" class="h-6 w-6" title="Rename" @click="startEdit(view)">
+                    <Pencil class="h-3 w-3" />
+                  </Button>
+                  <Button
+                    size="icon"
+                    variant="ghost"
+                    class="h-6 w-6"
+                    title="Share"
+                    @click="openSharing(view)"
+                  >
+                    <Users class="h-3 w-3" />
+                  </Button>
+                  <Button size="icon" variant="ghost" class="h-6 w-6 text-destructive hover:text-destructive" title="Delete" @click="confirmDelete(view)">
+                    <Trash2 class="h-3 w-3" />
+                  </Button>
+                </div>
+              </div>
+
+              <!-- Description -->
+              <p
+                v-if="view.description && editingId !== view.id && deletingId !== view.id"
+                class="text-xs text-muted-foreground mt-1 truncate"
               >
-                {{ view.name }}
-              </button>
-              <p v-if="view.description" class="text-xs text-muted-foreground mt-1 truncate">
                 {{ view.description }}
               </p>
             </li>
           </ul>
         </section>
+
+        <!-- Shared views by others -->
+        <template v-if="sharedViews.length > 0">
+          <Separator class="my-4" />
+          <section>
+            <p class="text-xs font-semibold text-muted-foreground uppercase tracking-wide mb-2">
+              Shared with me
+            </p>
+            <ul class="space-y-1">
+              <li
+                v-for="view in sharedViews"
+                :key="view.id"
+                class="rounded-md border bg-card px-3 py-2"
+              >
+                <button
+                  class="w-full text-left text-sm truncate hover:text-primary transition-colors"
+                  :class="{ 'font-medium text-primary': activeViewId === view.id }"
+                  @click="emit('apply-view', view); emit('update:open', false)"
+                >
+                  {{ view.name }}
+                </button>
+                <p v-if="view.description" class="text-xs text-muted-foreground mt-1 truncate">
+                  {{ view.description }}
+                </p>
+              </li>
+            </ul>
+          </section>
+        </template>
       </template>
     </SheetContent>
   </Sheet>