@mixd-id/web-scaffold 0.1.240411123 → 0.1.240411125

package/docs/components/AIDashboard.md

@@ -84,10 +84,15 @@ needs `<controller>.ai-chat`).
   dragged left).
 - The right panel can be hidden and shown with the toggle at the right end of
   the dashboard title (`config.params.rightCollapsed`).
-- On mobile (`$device.type === 'mobile'`, under 768px) the right panel is a
-  floating `Card` (full width, 85vh, dismissable, a close button beside the
-  tabs) instead of a column. It starts closed on every load and its open state
-  is not persisted; `rightCollapsed` only applies to wider screens.
+- On mobile (`$device.type === 'mobile'`, under 768px) the two stack: the
+  right panel becomes a bottom section 50vh tall (70vh with the chevron button
+  left of its close button; back to 50vh on every load), the dashboard taking
+  the rest (a divider between). It
+  starts closed on every load, leaving the dashboard full height, and its open
+  state is not persisted; `rightCollapsed` only applies to wider screens.
+  Its **Views** tab is two pages there: the component tree, and the selected
+  component's settings, which slide in from the right when one is picked (tree,
+  dashboard tap or a new component) with a back button to the tree.
 - Slot **`before-title`** renders host controls left of the title (admin's
   `pages/Dashboard.vue` puts its "Show dashboards" toggle there while its
   dashboards list is hidden).

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.240411123",
+  "version": "0.1.240411125",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",

package/src/components/AIDashboard.vue

@@ -1,15 +1,20 @@
 <template>
-  <div :class="$style.comp">
+  <!-- Dashboard and panel side by side; on mobile stacked, the panel below
+       taking half the height while open. -->
+  <div :class="[ $style.comp, mobile ? 'flex-col divide-y' : 'flex-row divide-x' ]">
 
     <!-- ============================ LEFT: dashboard ============================ -->
-    <div ref="snapshotRoot" class="flex-1 flex flex-col min-w-0">
+    <div ref="snapshotRoot" class="flex-1 flex flex-col min-w-0" :class="mobile ? 'min-h-0 basis-0' : ''">
 
       <div class="flex flex-row items-start gap-4 md:gap-8 p-4 md:p-6">
         <div class="flex-1 min-w-0 flex flex-row items-start gap-2">
           <!-- Host controls left of the title, e.g. a "show dashboards" toggle -->
           <slot name="before-title" />
           <div class="flex-1 min-w-0">
-            <h3 class="truncate" @click="log(activeItem)">{{ activeItem ? activeItem.name : 'Dashboard' }}</h3>
+            <div class="flex flex-row items-center gap-2 min-w-0">
+              <h3 class="truncate" @click="log(activeItem)">{{ activeItem ? activeItem.name : 'Dashboard' }}</h3>
+              <span v-if="readonly && activeItem" class="shrink-0 text-[11px] px-2 py-0.5 rounded-full bg-text-50 text-text-400">View only</span>
+            </div>
             <p v-if="activeItem?.props?.description" class="mt-1 text-sm text-text-300 line-clamp-2 max-w-[420px]">{{ activeItem.props.description }}</p>
           </div>
         </div>
@@ -69,32 +74,34 @@
     </div>
 
     <!-- ============================ RIGHT: panel ==============================
-         A column beside the dashboard; on mobile a floating Card over it. -->
-    <Card v-if="mobile || panelOpen" ref="panelCard" :float="mobile" :dismissable="true" width="100%" height="85vh"
-          class="shrink-0 min-h-0" @dismiss="panelOpen = false">
-    <template #header><span class="hidden" /></template>
-    <div :style="mobile ? null : { width: config.params.rightWidth + 'px' }"
-         class="relative flex-1 min-h-0 flex flex-col overflow-hidden">
+         A column beside the dashboard; on mobile a bottom section under it,
+         50vh or 70vh tall (toggle left of the close button). -->
+    <Transition :name="mobile ? 'aidPanelV' : 'aidPanelH'">
+    <div v-if="panelOpen" :style="mobile ? { height: mobilePanelTall ? '70vh' : '50vh' } : { width: config.params.rightWidth + 'px' }"
+         class="relative shrink-0 flex flex-col overflow-hidden" :class="mobile ? $style.panelHeight : ''">
 
       <div v-if="!mobile" :class="$style.resizeR" @mousedown="(e) => $util.dragResize(e, resizeRight)" />
 
       <div class="border-b-[1px] border-text-50 flex flex-row gap-4 items-start">
         <div class="flex-1 min-w-0 overflow-x-auto px-3 pt-3" :class="mobile ? 'px-6' : 'pt-6'">
-          <Tabs :items="[
-          { text: 'Views', value: 'views' },
-          { text: 'Filters', value: 'filters' },
-          { text: 'Datasource', value: 'datasource' },
-          { text: 'AI Assistant', value: 'chat' },
-          ...(connected ? [ { text: 'Sharing', value: 'sharing' } ] : []),
-          { text: 'Settings', value: 'settings' },
-        ]" v-model="config.params.rightTab" />
+          <Tabs :items="tabs" v-model="config.params.rightTab" />
+        </div>
+        <div v-if="mobile" class="shrink-0 flex flex-row items-center">
+          <button type="button" class="py-5 px-2 text-text-300 hover:text-primary" :title="mobilePanelTall ? 'Shrink panel' : 'Expand panel'"
+                  @click="mobilePanelTall = !mobilePanelTall">
+            <svg width="16" height="16" class="fill-none stroke-current transition-transform" :class="mobilePanelTall ? 'rotate-180' : ''" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m17 11-5-5-5 5"/><path d="m17 18-5-5-5 5"/></svg>
+          </button>
+          <button type="button" class="shrink-0 p-5 text-text-300 hover:text-red-600" title="Close" @click="panelOpen = false">
+            <svg width="16" height="16" class="fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg>
+          </button>
         </div>
-        <button v-if="mobile" type="button" class="shrink-0 p-5 text-text-300 hover:text-red-600" title="Close" @click="panelOpen = false">
-          <svg width="16" height="16" class="fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg>
-        </button>
       </div>
 
-      <template v-if="config.params.rightTab === 'views'">
+      <!-- Views tab. Desktop: the component tree with the selected one's settings
+           below it. Mobile: two pages — the tree, and the settings sliding in
+           from the right with a back button. -->
+      <div v-if="config.params.rightTab === 'views'" class="flex-1 min-h-0 flex flex-col" :class="mobile ? 'relative overflow-hidden' : ''">
+      <div class="flex-1 min-h-0 flex flex-col" :class="mobile ? [ $style.page, mobileSettings && selectedNode ? '-translate-x-full' : '' ] : ''">
         <div class="flex flex-row items-center gap-2 p-6 pb-1">
           <strong>Components</strong>
           <div class="flex-1"></div>
@@ -134,16 +141,22 @@
             Select a view first.
           </div>
         </div>
+      </div>
 
-        <div v-if="selectedNode" class="relative shrink-0 max-h-[75%] border-t-[1px] border-text-50"
-             :style="{ height: config.params.inspectorHeight + 'px' }">
+        <div v-if="selectedNode"
+             :class="mobile ? [ $style.page, 'absolute inset-0', mobileSettings ? '' : 'translate-x-full' ] : 'relative shrink-0 max-h-[75%] border-t-[1px] border-text-50'"
+             :style="mobile ? null : { height: config.params.inspectorHeight + 'px' }">
 
-          <div :class="$style.resizeT" @mousedown="(e) => $util.dragResize(e, resizeInspector)" />
+          <div v-if="!mobile" :class="$style.resizeT" @mousedown="(e) => $util.dragResize(e, resizeInspector)" />
 
           <div class="h-full p-6 flex flex-col gap-3">
 
             <div class="flex flex-row items-center gap-2">
-              <strong class="flex-1">{{ labelFor(selectedNode.type) }} settings</strong>
+              <button v-if="mobile" type="button" class="-ml-2 p-2 shrink-0 text-text-400 hover:text-primary" title="Back to components" @click="mobileSettings = false">
+                <svg width="14" height="14" class="fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"/></svg>
+              </button>
+              <strong v-if="mobile" class="flex-1 truncate">{{ selectedNode.name || labelFor(selectedNode.type) }}<span class="font-normal text-text-400"> · {{ labelFor(selectedNode.type) }}</span></strong>
+              <strong v-else class="flex-1">{{ labelFor(selectedNode.type) }} settings</strong>
             </div>
 
             <div class="flex-1 overflow-y-auto">
@@ -218,7 +231,7 @@
 
           </div>
         </div>
-      </template>
+      </div>
 
       <!-- ---------- Data sources tab ---------- -->
       <template v-else-if="config.params.rightTab === 'datasource'">
@@ -263,19 +276,19 @@
           <div v-else-if="sharing.error && !sharing.owner" class="text-red-600 text-sm text-center py-6">{{ sharing.error }}</div>
           <template v-else>
             <div v-if="sharing.canManage" class="flex flex-col gap-1">
-              <Textbox v-model="sharing.search" placeholder="Add people by name or email" />
+              <Textbox v-model="sharing.search" placeholder="Add people by name or code" />
               <div v-if="sharing.search.trim()" class="rounded-lg border-[1px] border-text-50 bg-base-400 p-1 flex flex-col">
+                <div v-if="sharing.search.trim().length < SEARCH_MIN_LENGTH" class="text-text-400 text-xs p-2">Type at least {{ SEARCH_MIN_LENGTH }} characters.</div>
+                <template v-else>
                 <button v-for="user in sharing.results.filter(u => u.id !== sharing.owner?.id && !sharing.users.some(s => s.id === u.id))" :key="user.id"
-                        type="button" class="flex flex-row items-center gap-2 p-2 rounded-md text-left hover:bg-base-500"
+                        type="button" class="flex flex-row items-center gap-2 px-2 py-1.5 rounded-md text-left hover:bg-base-500"
                         @click="shareWith(user)">
-                  <div class="w-[26px] h-[26px] rounded-full bg-base-500 text-xs flex items-center justify-center shrink-0">{{ (user.name || '?').slice(0, 1).toUpperCase() }}</div>
-                  <div class="flex-1 min-w-0">
-                    <div class="text-sm truncate">{{ user.name }}</div>
-                    <div class="text-[11px] text-text-400 truncate">{{ [ user.type, user.email ].filter(Boolean).join(' · ') }}</div>
-                  </div>
+                  <div class="w-[22px] h-[22px] rounded-full bg-base-500 text-[11px] flex items-center justify-center shrink-0">{{ (user.name || '?').slice(0, 1).toUpperCase() }}</div>
+                  <div class="flex-1 min-w-0 text-sm truncate">{{ user.name }}</div>
                   <span class="text-xs text-primary shrink-0">Share</span>
                 </button>
                 <div v-if="!sharing.results.some(u => u.id !== sharing.owner?.id && !sharing.users.some(s => s.id === u.id))" class="text-text-400 text-xs p-2">No one found.</div>
+                </template>
               </div>
               <div v-if="sharing.error" class="text-red-600 text-xs">{{ sharing.error }}</div>
             </div>
@@ -283,16 +296,21 @@
             <div class="flex flex-col gap-1">
               <label class="text-xs text-text-400">Who has access</label>
               <div v-for="user in [ ...(sharing.owner ? [ sharing.owner ] : []), ...sharing.users ]" :key="user.id"
-                   class="flex flex-row items-center gap-2 p-2 rounded-lg bg-base-400">
-                <div class="w-[26px] h-[26px] rounded-full bg-base-500 text-xs flex items-center justify-center shrink-0">{{ (user.name || '?').slice(0, 1).toUpperCase() }}</div>
-                <div class="flex-1 min-w-0">
-                  <div class="text-sm truncate">{{ user.name }}</div>
-                  <div class="text-[11px] text-text-400 truncate">{{ [ user.type, user.email ].filter(Boolean).join(' · ') }}</div>
-                </div>
+                   class="flex flex-row items-center gap-2 px-2 py-1 rounded-lg bg-base-400">
+                <div class="w-[22px] h-[22px] rounded-full bg-base-500 text-[11px] flex items-center justify-center shrink-0">{{ (user.name || '?').slice(0, 1).toUpperCase() }}</div>
+                <div class="flex-1 min-w-0 text-sm truncate">{{ user.name }}</div>
                 <span v-if="user.id === sharing.owner?.id" class="text-[11px] text-text-400 shrink-0">Owner</span>
-                <button v-else-if="sharing.canManage" type="button" class="p-1 text-text-300 hover:text-red-600 shrink-0" title="Stop sharing" @click="unshareWith(user)">
-                  <svg width="11" height="11" class="fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg>
+                <!-- Access as an icon; the owner clicks it for a menu to change or remove it -->
+                <button v-else-if="sharing.canManage" type="button"
+                        class="shrink-0 flex flex-row items-center gap-0.5 p-1.5 rounded-md text-text-400 hover:bg-base-500 hover:text-text-600"
+                        v-tooltip.bottom="shareAccess(user.access).text"
+                        @click="accessMenu.open($event.currentTarget, { user })">
+                  <svg width="14" height="14" class="fill-current" xmlns="http://www.w3.org/2000/svg" :viewBox="shareAccess(user.access).box"><path :d="shareAccess(user.access).path"/></svg>
+                  <svg width="8" height="8" class="fill-current opacity-70" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>
                 </button>
+                <span v-else class="shrink-0 p-1.5 text-text-400" v-tooltip.bottom="shareAccess(user.access).text">
+                  <svg width="14" height="14" class="fill-current" xmlns="http://www.w3.org/2000/svg" :viewBox="shareAccess(user.access).box"><path :d="shareAccess(user.access).path"/></svg>
+                </span>
               </div>
               <div v-if="!sharing.users.length" class="text-text-400 text-xs px-1 pt-1">Not shared with anyone yet.</div>
             </div>
@@ -398,6 +416,22 @@
         </template>
       </LLMChat>
 
+      <ContextMenu ref="accessMenu" position="bottom-right">
+        <template #default="{ context }">
+          <div v-if="context?.user" class="flex flex-col min-w-[160px] p-1 py-2">
+            <button v-for="opt in SHARE_ACCESS" :key="opt.value" type="button"
+                    class="w-full p-2 rounded-md text-left px-3 menu-item flex flex-row items-center gap-2"
+                    @click="accessMenu.close(); opt.value !== shareAccess(context.user.access).value && shareWith(context.user, opt.value)">
+              <svg width="13" height="13" class="fill-text-400 shrink-0" xmlns="http://www.w3.org/2000/svg" :viewBox="opt.box"><path :d="opt.path"/></svg>
+              <span class="flex-1">{{ opt.text }}</span>
+              <svg v-if="opt.value === shareAccess(context.user.access).value" width="11" height="11" class="fill-primary shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>
+            </button>
+            <div class="my-1 border-t-[1px] border-text-50" />
+            <button type="button" class="w-full p-2 rounded-md text-left px-3 menu-item text-red-600" @click="accessMenu.close(); unshareWith(context.user)">Remove access</button>
+          </div>
+        </template>
+      </ContextMenu>
+
       <ContextMenu ref="viewMenu" position="bottom-right">
         <template #default="{ context }">
           <div class="flex flex-col min-w-[160px] p-1 py-2">
@@ -423,7 +457,7 @@
         </template>
       </ContextMenu>
     </div>
-    </Card>
+    </Transition>
 
     <Card ref="drillCard" :float="true" :dismissable="true" width="900" height="560" @dismiss="$refs.drillCard.close()">
       <div v-if="breakdown?.drill" class="flex-1 flex flex-col gap-2 min-h-0">
@@ -753,15 +787,20 @@ import AIDashboardFilterSetting from './AIDashboardFilterSetting.vue'
 //     `${controller}.load-dashboard` hydrates node.data from datasources and
 //     `${controller}.ai-chat` drives the assistant. `datasources` describes the
 //     query-builder options: { [key]: { label, fields: [{ key, label }] } }.
-const { controller, socket, config, datasources } = defineProps({
+const { controller, socket, config, datasources, readonly } = defineProps({
   controller: { type: String, default: '' },
   socket: { type: Object, default: null },
   config: { type: Object, required: true },
   datasources: { type: [ Object, Array ], default: () => ({}) },
+  // View-only: the dashboard can be looked at, filtered and reloaded, but its
+  // components, datasource, assistant and settings are hidden. The host is
+  // expected not to save the item while this is set.
+  readonly: { type: Boolean, default: false },
 })
 
 const addMenu = useTemplateRef('addMenu')
 const viewMenu = useTemplateRef('viewMenu')
+const accessMenu = useTemplateRef('accessMenu')
 const renameCard = useTemplateRef('renameCard')
 const dsCard = useTemplateRef('dsCard')
 const dashboardFilters = useTemplateRef('dashboardFilters')
@@ -870,24 +909,31 @@ if (config.params.rightWidth == null) config.params.rightWidth = 360
 if (config.params.rightCollapsed == null) config.params.rightCollapsed = false
 
 // Right panel: a column on wider screens (open state persisted in
-// `rightCollapsed`), a floating Card on mobile — closed on every load there so
-// a phone opens on the dashboard, not on the panel.
+// `rightCollapsed`), the bottom half on mobile — closed on every load there so
+// a phone opens on the whole dashboard.
 const device = getCurrentInstance()?.appContext.config.globalProperties.$device
 const mobile = computed(() => device?.type === 'mobile')
 const mobilePanelOpen = ref(false)
+const mobilePanelTall = ref(false)   // mobile panel height: 50vh, or 70vh when tall
 const panelOpen = computed({
   get: () => mobile.value ? mobilePanelOpen.value : !config.params.rightCollapsed,
   set: (open) => { if (mobile.value) mobilePanelOpen.value = open; else config.params.rightCollapsed = !open },
 })
-const panelCard = useTemplateRef('panelCard')
-watch([ mobile, mobilePanelOpen ], ([ isMobile, open ]) => {
-  if (!isMobile) return
-  if (open) panelCard.value?.open()
-  else panelCard.value?.close()
-}, { flush: 'post' })
 if (config.params.inspectorHeight == null) config.params.inspectorHeight = 300
 if (config.params.rightTab === 'data') config.params.rightTab = 'datasource'
 if (![ 'views', 'filters', 'datasource', 'chat', 'sharing', 'settings' ].includes(config.params.rightTab)) config.params.rightTab = 'views'
+
+const tabs = computed(() => [
+  ...(readonly ? [] : [ { text: 'Views', value: 'views' } ]),
+  { text: 'Filters', value: 'filters' },
+  ...(readonly ? [] : [ { text: 'Datasource', value: 'datasource' }, { text: 'AI Assistant', value: 'chat' } ]),
+  ...(connected.value ? [ { text: 'Sharing', value: 'sharing' } ] : []),
+  ...(readonly ? [] : [ { text: 'Settings', value: 'settings' } ]),
+])
+// A view-only dashboard keeps the panel on a tab it still shows.
+watch(() => [ readonly, config.params.rightTab ], () => {
+  if (readonly && !tabs.value.some(tab => tab.value === config.params.rightTab)) config.params.rightTab = 'filters'
+}, { immediate: true })
 if (!Array.isArray(config.items)) config.items = []
 config.items.forEach(normalizeItem)
 
@@ -961,8 +1007,14 @@ const selectedNode = ref(null)
 
 function selectNode(node) {
   selectedNode.value = node
+  if (node) mobileSettings.value = true
 }
 
+// Mobile Views tab: the settings page slides in whenever a component gets
+// selected (tree, dashboard tap or a newly added one); back slides it out.
+const mobileSettings = ref(false)
+watch(selectedNode, (node) => { mobileSettings.value = !!node })
+
 function metricOnly(node) {
   const items = node.items || []
   return items.length > 0 && items.every(n => n.type === 'metric')
@@ -1728,7 +1780,7 @@ function getChatContext() {
 
 const chatFocus = computed(() => selectedNode.value)
 
-const focusable = computed(() => panelOpen.value && [ 'views', 'chat' ].includes(config.params.rightTab))
+const focusable = computed(() => !readonly && panelOpen.value && [ 'views', 'chat' ].includes(config.params.rightTab))
 
 function pickFocus(e, node) {
   if (!focusable.value || e.target.closest('button, canvas, [data-breakdown] td, [data-map] [data-point], [data-map][data-dragging]')) return
@@ -1738,7 +1790,7 @@ function pickFocus(e, node) {
 }
 
 function focusClass(node) {
-  if (!panelOpen.value || ![ 'views', 'chat' ].includes(config.params.rightTab)) return ''
+  if (readonly || !panelOpen.value || ![ 'views', 'chat' ].includes(config.params.rightTab)) return ''
   return selectedNode.value === node ? 'cursor-pointer ring-2 ring-primary' : 'cursor-pointer hover:ring-1 hover:ring-text-200'
 }
 
@@ -1899,12 +1951,12 @@ watch(() => [ activeItem.value?.uid, JSON.stringify((activeItem.value?.props?.fi
 })
 watch(activeUid, () => { selectedNode.value = null; updatedAt.value = null; if (connected.value) hydrateActive() })
 
-const sharing = ref({ uid: null, loaded: false, error: null, owner: null, canManage: false, users: [], search: '', results: [] })
+const sharing = ref({ uid: null, loaded: false, error: null, owner: null, access: null, canManage: false, users: [], search: '', results: [] })
 
 async function loadSharing() {
   const uid = activeItem.value?.uid
   if (!connected.value || !uid) return
-  if (sharing.value.uid !== uid) sharing.value = { uid, loaded: false, error: null, owner: null, canManage: false, users: [], search: '', results: [] }
+  if (sharing.value.uid !== uid) sharing.value = { uid, loaded: false, error: null, owner: null, access: null, canManage: false, users: [], search: '', results: [] }
   try {
     const res = await socket.send(`${controller}.load-sharing`, { uid })
     if (sharing.value.uid === uid) sharing.value = { ...sharing.value, ...res, loaded: true, error: null }
@@ -1918,9 +1970,11 @@ watch(() => [ config.params.rightTab, activeItem.value?.uid ], () => {
 }, { immediate: true })
 
 let searchTimer = null
+// Matches the server's minimum; shorter input clears the results.
+const SEARCH_MIN_LENGTH = 3
 watch(() => sharing.value.search, (search) => {
   clearTimeout(searchTimer)
-  if (!search?.trim()) return
+  if ((search?.trim().length ?? 0) < SEARCH_MIN_LENGTH) { sharing.value.results = []; return }
   searchTimer = setTimeout(async () => {
     try {
       const res = await socket.send(`${controller}.search-users`, { search })
@@ -1931,10 +1985,19 @@ watch(() => sharing.value.search, (search) => {
   }, 250)
 })
 
-async function shareWith(user) {
+const SHARE_ACCESS = [
+  { value: 'view', text: 'Can view', box: '0 0 576 512', path: 'M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z' },
+  { value: 'edit', text: 'Can edit', box: '0 0 512 512', path: 'M362.7 19.3L314.3 67.7 444.3 197.7l48.4-48.4c25-25 25-65.5 0-90.5L453.3 19.3c-25-25-65.5-25-90.5 0zm-71 71L58.6 323.5c-10.4 10.4-18 23.3-22.2 37.4L1 481.2C-1.5 489.7 .8 498.8 7 505s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L421.7 220.3 291.7 90.3z' },
+]
+// Anything but 'edit' reads as view, as on the server.
+const shareAccess = (access) => SHARE_ACCESS.find(opt => opt.value === access) ?? SHARE_ACCESS[0]
+
+// Shares as view-only by default; sharing an existing person again with
+// another `access` changes theirs.
+async function shareWith(user, access = 'view') {
   const uid = sharing.value.uid
   try {
-    const res = await socket.send(`${controller}.share`, { uid, userId: user.id })
+    const res = await socket.send(`${controller}.share`, { uid, userId: user.id, access })
     if (sharing.value.uid === uid) sharing.value = { ...sharing.value, ...res, error: null, search: '', results: [] }
   } catch (e) {
     sharing.value.error = e?.message ?? `${e}`
@@ -1967,8 +2030,16 @@ onUnmounted(() => {
 }
 
 .comp {
-  @apply flex-1 flex flex-row relative;
-  @apply divide-x divide-text-100 dark:divide-text-50;
+  @apply flex-1 flex relative min-h-0;
+  @apply divide-text-100 dark:divide-text-50;
+}
+
+.panelHeight {
+  transition: height 250ms cubic-bezier(0.25, 1, 0.5, 1);
+}
+
+.page {
+  transition: transform 250ms cubic-bezier(0.25, 1, 0.5, 1);
 }
 
 .resizeR {
@@ -1981,3 +2052,20 @@ onUnmounted(() => {
   @apply border-t-[1px] border-transparent hover:border-primary;
 }
 </style>
+
+<style>
+/* AIDashboard right panel show / hide: width on desktop, height on mobile
+   (`!important` beats the inline width / height while animating). */
+.aidPanelH-enter-active, .aidPanelH-leave-active {
+  transition: width 250ms cubic-bezier(0.25, 1, 0.5, 1);
+}
+.aidPanelH-enter-from, .aidPanelH-leave-to {
+  width: 0 !important;
+}
+.aidPanelV-enter-active, .aidPanelV-leave-active {
+  transition: height 250ms cubic-bezier(0.25, 1, 0.5, 1);
+}
+.aidPanelV-enter-from, .aidPanelV-leave-to {
+  height: 0 !important;
+}
+</style>

package/src/components/AIDashboardViews.vue

@@ -21,7 +21,7 @@
           <input v-if="editing?.uid === view.uid" :ref="el => el && el.focus()" v-model="editing.name" maxlength="100"
                  :class="$style.renameInput" @click.stop @keydown.enter.prevent="commitRename" @keydown.esc.prevent="editing = null" @blur="commitRename" />
           <span v-else class="flex-1 truncate" :title="view.name" @dblclick.stop="!view.shared && startRename(view)">{{ view.name }}</span>
-          <svg v-if="view.shared && !grouped" width="12" height="12" class="fill-text-400 shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><title>Shared with you</title><path :d="SHARED_PATH"/></svg>
+          <svg v-if="view.shared && !grouped" width="12" height="12" class="fill-text-400 shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><title>{{ view.access === 'view' ? 'Shared with you · view only' : 'Shared with you' }}</title><path :d="SHARED_PATH"/></svg>
           <button type="button" :class="$style.rowMenu"
                   @click.stop="viewMenu.open($event.currentTarget, { view })">
             <svg width="14" height="14" class="fill-text-400 hover:fill-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path :d="ELLIPSIS_PATH"/></svg>