windmill-components 1.22.42 → 1.28.3

package/components/SchemaModal.svelte

@@ -1,15 +1,5 @@
 <script context="module">import Modal from './Modal.svelte';
 export const ARG_TYPES = ['integer', 'number', 'string', 'boolean', 'object', 'array'];
-export function modalToSchema(schema) {
-    return {
-        type: schema.selectedType,
-        description: schema.description,
-        pattern: schema.pattern,
-        default: schema.default,
-        enum: schema.enum_,
-        items: schema.items
-    };
-}
 export function schemaToModal(schema, name, required) {
     return {
         name,
@@ -17,6 +7,8 @@ export function schemaToModal(schema, name, required) {
         description: schema.description,
         pattern: schema.pattern,
         default: schema.default,
+        contentEncoding: schema.contentEncoding,
+        format: schema.format,
         required
     };
 }
@@ -33,14 +25,17 @@ import { createEventDispatcher } from 'svelte';
 import ArgInput from './ArgInput.svelte';
 import StringTypeNarrowing from './StringTypeNarrowing.svelte';
 import Required from './Required.svelte';
+import ObjectTypeNarrowing from './ObjectTypeNarrowing.svelte';
 export let property = DEFAULT_PROPERTY;
 export let error = '';
 export let editing = false;
 export let oldArgName = undefined;
+let resource_type = undefined;
 const dispatch = createEventDispatcher();
 let modal;
 export function openModal() {
     modal.openModal();
+    resource_type = property.format?.substring(5);
 }
 export function closeModal() {
     modal.closeModal();
@@ -54,6 +49,11 @@ function clearModal() {
     property.description = DEFAULT_PROPERTY.description;
     property.required = DEFAULT_PROPERTY.required;
     property.selectedType = DEFAULT_PROPERTY.selectedType;
+    property.format = undefined;
+    resource_type = undefined;
+}
+$: if (property.selectedType == 'object' && resource_type) {
+    property.format = resource_type ? `$res:${resource_type}` : undefined;
 }
 </script>
 
@@ -77,12 +77,16 @@ function clearModal() {
 				/>
 			</label>
 			<h3 class="font-semibold text-gray-700">Type<Required required={true} /></h3>
-			<div class="grid sm:grid-cols-3 md:grid-cols-4 gap-x-2 gap-y-1 items-center mb-2">
+			<div class="grid sm:grid-cols-3 md:grid-cols-4 gap-x-2 gap-y-1 items-center mb-2 w-full">
 				{#each ARG_TYPES as argType}
 					<button
 						class={argType == property.selectedType ? 'item-button-selected' : 'item-button'}
 						on:click={() => {
 							property.selectedType = argType
+							property.format = undefined
+							property.contentEncoding = undefined
+							property.enum_ = undefined
+							property.pattern = undefined
 						}}>{argType}</button
 					>
 				{/each}
@@ -106,13 +110,14 @@ function clearModal() {
 				pattern={property.pattern}
 			/>
 			{#if property.selectedType !== 'boolean'}
-				<h2 class="mb-2">Advanced</h2>
+				<h2 class="mb-2 mt-4">Advanced</h2>
 
 				{#if property.selectedType == 'string'}
 					<StringTypeNarrowing
 						bind:format={property.format}
 						bind:pattern={property.pattern}
 						bind:enum_={property.enum_}
+						bind:contentEncoding={property.contentEncoding}
 					/>
 				{:else if property.selectedType == 'array'}
 					<select bind:value={property.items}>
@@ -120,6 +125,9 @@ function clearModal() {
 						<option value={{ type: 'string' }}> Items are strings</option>
 						<option value={{ type: 'number' }}>Items are numbers</option>
 					</select>
+				{:else if property.selectedType == 'object'}
+					<h3 class="mb-2 font-bold mt-4">Resource type</h3>
+					<ObjectTypeNarrowing bind:format={property.format} />
 				{:else}
 					<p>No advanced configuration for this type</p>
 				{/if}
@@ -137,24 +145,3 @@ function clearModal() {
 		Save
 	</button>
 </Modal>
-
-<style>
-	.item-button {
-    padding-top: 0.25rem;
-    padding-bottom: 0.25rem;
-    border-width: 1px;
-    border-radius: 0.125rem
-}
-	.item-button-selected {
-    -webkit-text-decoration-line: underline;
-            text-decoration-line: underline;
-    font-weight: 700;
-    padding-top: 0.25rem;
-    padding-bottom: 0.25rem;
-    border-width: 1px;
-    --tw-border-opacity: 1;
-    border-color: rgb(59 130 246 / var(--tw-border-opacity));
-    --tw-bg-opacity: 1;
-    background-color: rgb(239 246 255 / var(--tw-bg-opacity));
-    border-radius: 0.125rem
-}</style>

package/components/SchemaModal.svelte.d.ts

@@ -14,8 +14,8 @@ export interface ModalSchemaProperty {
     items?: {
         type?: 'string' | 'number';
     };
+    contentEncoding?: 'base64' | 'binary';
 }
-export declare function modalToSchema(schema: ModalSchemaProperty): SchemaProperty;
 export declare function schemaToModal(schema: SchemaProperty, name: string, required: boolean): ModalSchemaProperty;
 export declare const DEFAULT_PROPERTY: ModalSchemaProperty;
 declare const __propDef: {

package/components/SchemaViewer.svelte

@@ -1,16 +1,11 @@
 <script>import { emptySchema } from '../utils';
 import Highlight from 'svelte-highlight';
 import json from 'svelte-highlight/languages/json';
-import github from 'svelte-highlight/styles/github';
 import TableCustom from './TableCustom.svelte';
 export let schema = emptySchema();
 let viewJsonSchema = false;
 </script>
 
-<svelte:head>
-	{@html github}
-</svelte:head>
-
 <div class="w-full">
 	<div class="flex flex-col sm:flex-row text-base">
 		<button
@@ -59,7 +54,10 @@ let viewJsonSchema = false;
 										? JSON.stringify(property.default)
 										: ''}</td
 								>
-								<td>{property.format ?? ''}</td>
+								<td
+									>{property.format ?? ''}
+									{property.contentEncoding ? `(encoding: ${property.contentEncoding})` : ''}</td
+								>
 								<td>{schema.required.includes(name) ? 'required' : 'optional'}</td>
 							</tr>
 						{/each}

package/components/ScriptBuilder.svelte

@@ -1,26 +1,25 @@
 <script>import { ScriptService } from '../gen';
-import { emptySchema, sendUserToast, setQueryWithoutLoad } from '../utils';
-import { onDestroy } from 'svelte';
-import ScriptEditor from './ScriptEditor.svelte';
-import { page } from '$app/stores';
 import { goto } from '$app/navigation';
-import Path from './Path.svelte';
-import SvelteMarkdown from 'svelte-markdown';
-import { workspaceStore } from '../stores';
-import ScriptSchema from './ScriptSchema.svelte';
+import { page } from '$app/stores';
 import { inferArgs } from '../infer';
-import Required from './Required.svelte';
-import RadioButton from './RadioButton.svelte';
 import { DENO_INIT_CODE, DENO_INIT_CODE_TRIGGER, initialCode } from '../script_helpers';
+import { workspaceStore } from '../stores';
+import { emptySchema, encodeState, sendUserToast, setQueryWithoutLoad } from '../utils';
+import { Breadcrumb, BreadcrumbItem } from 'flowbite-svelte';
+import { onDestroy } from 'svelte';
+import SvelteMarkdown from 'svelte-markdown';
+import Path from './Path.svelte';
+import RadioButton from './RadioButton.svelte';
+import Required from './Required.svelte';
+import ScriptEditor from './ScriptEditor.svelte';
+import ScriptSchema from './ScriptSchema.svelte';
 let editor;
 let scriptSchema;
 $: step = Number($page.url.searchParams.get('step')) || 1;
 export let script;
 export let initialPath = '';
 let pathError = '';
-$: {
-    setQueryWithoutLoad($page.url, 'state', btoa(JSON.stringify(script)));
-}
+$: setQueryWithoutLoad($page.url, 'state', encodeState(script));
 $: {
     if (script.language == 'python3') {
         script.is_trigger = false;
@@ -85,34 +84,33 @@ onDestroy(() => {
 <div class="flex flex-col h-screen max-w-screen-lg xl:-ml-20 xl:pl-4 w-full -mt-4 pt-4 md:mx-10 ">
 	<!-- Nav between steps-->
 	<div class="flex flex-col w-full">
-		<div class="justify-between flex flex-row drop-shadow-sm w-full">
+		<div class="justify-between flex flex-row drop-shadow-sm w-full mt-4">
 			<div class="wizard-nav flex flex-row w-full">
-				<button
-					class="{step === 1
-						? 'default-button-disabled text-gray-700'
-						: 'default-button-secondary'} min-w-max ml-2"
-					on:click={() => {
-						changeStep(1)
-					}}>Step 1: Metadata</button
-				>
-				<button
-					disabled={pathError != ''}
-					class="{step === 2
-						? 'default-button-disabled text-gray-700'
-						: 'default-button-secondary'} min-w-max ml-2"
-					on:click={() => {
-						changeStep(2)
-					}}>Step 2: Code</button
-				>
-				<button
-					disabled={pathError != ''}
-					class="{step === 3
-						? 'default-button-disabled text-gray-700'
-						: 'default-button-secondary'} min-w-max ml-2"
-					on:click={() => {
-						changeStep(3)
-					}}>Step 3: UI customisation</button
-				>
+				<Breadcrumb>
+					<BreadcrumbItem>
+						<button on:click={() => changeStep(1)} class={step === 1 ? 'font-bold' : null}>
+							Metadata
+						</button>
+					</BreadcrumbItem>
+					<BreadcrumbItem>
+						<button
+							on:click={() => changeStep(2)}
+							class={step === 2 ? 'font-bold' : null}
+							disabled={pathError != ''}
+						>
+							Code
+						</button>
+					</BreadcrumbItem>
+					<BreadcrumbItem>
+						<button
+							on:click={() => changeStep(3)}
+							class={step === 3 ? 'font-bold' : null}
+							disabled={pathError != ''}
+						>
+							UI customisation
+						</button>
+					</BreadcrumbItem>
+				</Breadcrumb>
 			</div>
 			<div class="flex flex-row-reverse ml-2">
 				{#if step != 3}
@@ -168,7 +166,6 @@ onDestroy(() => {
 			<div class="max-w-md">
 				<RadioButton
 					label="Language"
-					small={true}
 					options={[
 						['Typescript (Deno)', 'deno'],
 						['Python 3.10', 'python3']
@@ -196,10 +193,11 @@ onDestroy(() => {
 					rows="1"
 				/>
 			</label>
-			<label class="block ">
+			<label class="block" for="inp">
 				<span class="text-gray-700"
 					>Description<Required required={false} detail="accept markdown formatting" />
 					<textarea
+						id="inp"
 						bind:value={script.description}
 						class="
 					mt-1
@@ -268,7 +266,6 @@ onDestroy(() => {
 	/* .wizard-nav {
 		@apply w-1/2 sm:w-1/4;
 	} */
-
 	.wizard-nav button {
 		max-height: 30px;
 	}</style>

package/components/ScriptEditor.svelte

@@ -1,23 +1,22 @@
-<script>import { JobService, Job, CompletedJob, VariableService, ScriptService } from '../gen';
-import { emptySchema, displayDate } from '../utils';
-import { fade } from 'svelte/transition';
-import Icon from 'svelte-awesome';
-import { faCheck, faChevronDown, faChevronUp, faExclamationTriangle, faMagic, faSpinner, faTimes } from '@fortawesome/free-solid-svg-icons';
-import Editor from './Editor.svelte';
-import Tooltip from './Tooltip.svelte';
-import { onDestroy, onMount } from 'svelte';
+<script>import { CompletedJob, Job, JobService } from '../gen';
 import { userStore, workspaceStore } from '../stores';
-import TableCustom from './TableCustom.svelte';
+import { displayDate, emptySchema } from '../utils';
+import { faCheck, faChevronDown, faChevronUp, faExclamationTriangle, faSpinner, faTimes } from '@fortawesome/free-solid-svg-icons';
+import { onDestroy, onMount } from 'svelte';
+import Icon from 'svelte-awesome';
 import { check } from 'svelte-awesome/icons';
+import { fade } from 'svelte/transition';
+import Editor from './Editor.svelte';
 import Modal from './Modal.svelte';
+import TableCustom from './TableCustom.svelte';
+import Tooltip from './Tooltip.svelte';
 import { inferArgs } from '../infer';
-// @ts-ignore
+import { Highlight } from 'svelte-highlight';
+import { json, python, typescript } from 'svelte-highlight/languages';
 import { VSplitPane } from 'svelte-split-pane';
-import SchemaForm from './SchemaForm.svelte';
 import DisplayResult from './DisplayResult.svelte';
 import EditorBar from './EditorBar.svelte';
-import { Highlight } from 'svelte-highlight';
-import { json, python, typescript } from 'svelte-highlight/languages';
+import SchemaForm from './SchemaForm.svelte';
 // Exported
 export let schema = emptySchema();
 export let code;
@@ -48,6 +47,7 @@ $: lastSave = localStorage.getItem(path ?? 'last_save');
 export function getEditor() {
     return editor;
 }
+let div = null;
 export async function runPreview() {
     try {
         if (previewIntervalId) {
@@ -116,6 +116,7 @@ async function loadPreviewJob(id) {
             previewIsLoading = false;
             loadPastPreviews();
         }
+        div?.scroll({ top: div?.scrollHeight, behavior: 'smooth' });
     }
     catch (err) {
         console.error(err);
@@ -205,7 +206,7 @@ onDestroy(() => {
 			<div class="header">
 				<EditorBar {editor} {lang} {websocketAlive} />
 			</div>
-			<div class="flex-1 overflow-hidden">
+			<div class="flex-1 overflow-hidden border p-2 rounded">
 				<Editor
 					{code}
 					bind:websocketAlive
@@ -214,11 +215,16 @@ onDestroy(() => {
 						runPreview()
 						viewPreview = true
 					}}
-					formatAction={() => {
+					formatAction={async () => {
 						code = getEditor().getCode()
+						await inferSchema()
 						localStorage.setItem(path ?? 'last_save', code)
 						lastSave = code
 					}}
+					on:blur={() => {
+						code = getEditor().getCode()
+						inferSchema()
+					}}
 					class="h-full"
 					deno={lang == 'deno'}
 					automaticLayout={true}
@@ -234,8 +240,8 @@ onDestroy(() => {
 					viewPreview = !viewPreview
 				}}
 			>
-				<div class="flex flex-row items-baseline">
-					<div class="font-base py-0 mr-6">
+				<div class="flex flex-row flex-wrap items-baseline">
+					<div class="font-base py-0 mr-6 hidden md:block">
 						Preview <Tooltip
 							><span class="font-normal"
 								>Test your script by running a preview, passing inputs as if you were a user</span
@@ -322,7 +328,7 @@ onDestroy(() => {
 						}}
 						>Run preview
 					</button>
-					<div class="text-xs text-gray-700 min-w-max mx-2">
+					<div class="text-xs text-gray-700 min-w-max hidden md:block mx-2">
 						Shortcuts: <Tooltip>
 							Cmd/Ctrl+S: autoformat code and overwrite local save <br />
 							Cmd/Ctrl+Enter: run preview</Tooltip
@@ -331,7 +337,7 @@ onDestroy(() => {
 				</div>
 			</div>
 		</div>
-		<div class="preview flex-1 overflow-hidden p-3">
+		<div bind:this={div} class="preview flex-1 p-3">
 			{#if previewTab === 'logs'}
 				<pre
 					class="break-all relative h-full mx-2">{#if previewJob && previewJob.logs}{previewJob.logs}
@@ -339,21 +345,20 @@ onDestroy(() => {
 					{:else}No preview is available yet{/if}
 			</pre>
 			{:else if previewTab === 'input'}
-				<div class="break-all relative h-full font-sans">
-					<div class="p-2 w-full">
-						<button class="default-button w-full mb-4" on:click|stopPropagation={inferSchema}
-							><Icon data={faMagic} scale={0.7} /><span class="pl-1"
-								>Infer schema from main parameters</span
-							>
-						</button>
-					</div>
-					<div class="flex flex-row items-baseline text-2xs text-gray-700 p-2 ml-8 italic">
-						{#if isValid}
-							<Icon data={faCheck} class="text-green-600 mr-1" scale={0.6} /> The current preview input
-							matches requirements defined in arguments
-						{:else}
-							<Icon data={faExclamationTriangle} class="text-yellow-500 mr-1" scale={0.6} />The
-							current preview input doesn't match requirements defined in arguments. Are you sure?{/if}
+				<div class="break-all relative h-full font-sans -mt-2">
+					<div class="items-baseline text-xs text-gray-700 px-2 ml-8 italic hidden md:block">
+						<p>
+							Move the focus outside of the text editor to recompute the input schema from main
+							signature or press Ctrl/Cmd+S
+						</p>
+						<p class="">
+							{#if isValid}
+								<Icon data={faCheck} class="text-green-600 mr-1" scale={0.6} /> The current preview input
+								matches requirements defined in arguments
+							{:else}
+								<Icon data={faExclamationTriangle} class="text-yellow-500 mr-1" scale={0.6} />The
+								current preview input doesn't match requirements defined in arguments{/if}
+						</p>
 					</div>
 					<div class="sm:px-8">
 						<SchemaForm {schema} bind:args bind:isValid />
@@ -384,7 +389,7 @@ onDestroy(() => {
 					{:else}No local save{/if}
 				</div>
 			{:else if previewTab === 'history'}
-				<TableCustom paginated={false}>
+				<TableCustom>
 					<tr slot="header-row">
 						<th class="text-xs">id</th>
 						<th class="text-xs">created at</th>
@@ -394,11 +399,11 @@ onDestroy(() => {
 						<th class="text-xs">logs</th>
 					</tr>
 					<tbody slot="body">
-						{#each pastPreviews as { id, created_at, success, result, logs }}
+						{#each pastPreviews as { id, created_at, success, result }}
 							<tr class="">
-								<td class="text-xs"
-									><a class="pr-3" href="/run/{id}" target="_blank">{id.substring(30)}</a></td
-								>
+								<td class="text-xs">
+									<a class="pr-3" href="/run/{id}" target="_blank">{id.substring(30)}</a>
+								</td>
 								<td class="text-xs">{displayDate(created_at)}</td>
 								<td class="text-xs">
 									{#if success}
@@ -415,9 +420,10 @@ onDestroy(() => {
 											modalViewerContent = result
 											modalViewerMode = 'result'
 											modalViewer.openModal()
-										}}>{JSON.stringify(result).substring(0, 30)}...</a
-									></td
-								>
+										}}
+										>{JSON.stringify(result).substring(0, 30)}...
+									</a>
+								</td>
 								<td class="text-xs"
 									><a
 										href="#code"
@@ -463,30 +469,29 @@ onDestroy(() => {
 
 <style>
 	.header {
-		max-height: 28px;
-		border-width: 1px;
-		padding-left: 0.5rem;
-		padding-right: 0.5rem;
-		padding-top: 0.25rem;
-		padding-bottom: 0.25rem;
-		border-left-width: 1px;
-		border-right-width: 1px;
-		--tw-bg-opacity: 1;
-		background-color: rgb(243 244 246 / var(--tw-bg-opacity));
-		font-size: 0.75rem;
-		line-height: 1rem;
-		--tw-text-opacity: 1;
-		color: rgb(55 65 81 / var(--tw-text-opacity));
-	}
+
+    padding-top: 0.5rem;
+
+    padding-bottom: 0.5rem
+}
 
 	.preview {
-		border-width: 1px;
-		overflow: auto;
-		border-left-width: 1px;
-		border-right-width: 1px;
-		--tw-bg-opacity: 1;
-		background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-		font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-		font-size: 0.75rem;
-		line-height: 1rem;
+
+    border-width: 1px;
+
+    overflow: auto;
+
+    border-left-width: 1px;
+
+    border-right-width: 1px;
+
+    --tw-bg-opacity: 1;
+
+    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+
+    font-size: 0.75rem;
+
+    line-height: 1rem
 }</style>

package/components/ScriptPicker.svelte

@@ -1,15 +1,15 @@
-<script>import { ScriptService, FlowService, Script } from '../gen';
+<script>import { ScriptService, FlowService } from '../gen';
 import Icon from 'svelte-awesome';
 import { faSearch } from '@fortawesome/free-solid-svg-icons';
 import { hubScripts, workspaceStore } from '../stores';
 import { createEventDispatcher } from 'svelte';
 import ItemPicker from './ItemPicker.svelte';
-import RadioButton from './RadioButton.svelte';
 import Modal from './Modal.svelte';
 import { Highlight } from 'svelte-highlight';
-import { python, typescript } from 'svelte-highlight/languages';
-import github from 'svelte-highlight/styles/github';
-import { getScript, getScriptByPath } from '../utils';
+import typescript from 'svelte-highlight/languages/typescript';
+import python from 'svelte-highlight/languages/python';
+import { getScriptByPath } from '../utils';
+import RadioButton from './RadioButton.svelte';
 export let scriptPath = undefined;
 export let allowFlow = false;
 export let allowHub = false;
@@ -42,10 +42,6 @@ $: {
 }
 </script>
 
-<svelte:head>
-	{@html github}
-</svelte:head>
-
 <ItemPicker
 	bind:this={itemPicker}
 	pickCallback={(path, _) => {
@@ -61,9 +57,11 @@ $: {
 />
 
 <div class="flex flex-row items-center space-x-5">
-	{#if options.length > 1}
-		<RadioButton bind:value={itemKind} {options} />
-	{/if}
+	<div class="w-80">
+		{#if options.length > 1}
+			<RadioButton bind:value={itemKind} {options} />
+		{/if}
+	</div>
 
 	<input type="text" value={scriptPath ?? 'No path chosen yet'} disabled />
 	<button class="default-button text-gray-100" on:click={() => itemPicker.openModal()}

package/components/ScriptPicker.svelte.d.ts

@@ -4,7 +4,7 @@ declare const __propDef: {
         scriptPath?: string | undefined;
         allowFlow?: boolean | undefined;
         allowHub?: boolean | undefined;
-        itemKind?: "script" | "flow" | "hub" | undefined;
+        itemKind?: "flow" | "script" | "hub" | undefined;
         isTrigger?: boolean | undefined;
     };
     events: {

package/components/ScriptSchema.svelte

@@ -3,7 +3,6 @@ import SchemaForm from './SchemaForm.svelte';
 import Tabs from './Tabs.svelte';
 import Highlight from 'svelte-highlight';
 import json from 'svelte-highlight/languages/json';
-import github from 'svelte-highlight/styles/github';
 import SvelteMarkdown from 'svelte-markdown';
 export let schema;
 export let summary;
@@ -15,10 +14,6 @@ export function setSchema(newSchema) {
 }
 </script>
 
-<svelte:head>
-	{@html github}
-</svelte:head>
-
 <div class="w-full">
 	<PageHeader title="UI customisation" />
 	<Tabs

package/components/ShareModal.svelte

@@ -86,7 +86,7 @@ async function addAcl(owner, write) {
 					<option>group</option>
 				</select>
 			</label>
-			<label class="block grow mx-2">
+			<label class="block grow mx-2" for="inp">
 				<span class="text-sm text-gray-700">Owner</span>
 				<div class="block mt-1">
 					<div class="static z-50">

package/components/SharedBadge.svelte

@@ -20,13 +20,13 @@ $: {
     }
     else {
         let writeGroup = pgroups.find((x) => extraPermsKeys.includes(x) && extraPerms[x]);
-        if (pgroups.find((x) => x in extraPermsKeys && extraPerms[x])) {
+        if (writeGroup) {
             kind = 'write';
             reason = `This item was write shared to the group ${writeGroup} which you are a member of`;
         }
         else {
-            let readGroup = pgroups.find((x) => extraPermsKeys.includes(x) && extraPerms[x]);
-            if (pgroups.find((x) => extraPermsKeys.includes(x))) {
+            let readGroup = pgroups.find((x) => extraPermsKeys.includes(x));
+            if (readGroup) {
                 kind = 'read';
                 reason = `This item was read-only shared to the group ${readGroup} which you are a member of`;
             }
@@ -45,10 +45,12 @@ $: {
 }
 </script>
 
-<span>
-	{#if kind == 'read'}
-		<Badge tooltip={reason}>shared to you (read-only)</Badge>
-	{:else if kind == 'write'}
-		<Badge tooltip={reason}>shared to you</Badge>
-	{/if}
-</span>
+{#if kind == 'read' || kind == 'write'}
+	<span class="mr-1">
+		{#if kind == 'read'}
+			<Badge tooltip={reason}>shared to you (read-only)</Badge>
+		{:else if kind == 'write'}
+			<Badge tooltip={reason}>shared to you</Badge>
+		{/if}
+	</span>
+{/if}