Address the missing features from the current sharing pane.

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "solid-ui",
-	"version": "5.0.1",
+	"version": "5.0.2-0",
 	"description": "UI library for Solid applications",
 	"main": "dist/index.cjs.js",
 	"types": "dist/index.d.ts",

src/components/access-control-modal/AccessControlAddAccess.styles.css

@@ -17,7 +17,7 @@
 
     .access-grants-form-main {
       display: flex;
-      align-items: flex-start;
+      align-items: center;
       gap: 10px;
       align-self: stretch;
 

src/components/access-control-modal/AccessControlAddAccess.ts

@@ -2,12 +2,13 @@ import { customElement, WebComponent } from '@/lib/components'
 import { html, nothing } from 'lit'
 import { property } from 'lit/decorators.js'
 import { ACCESS_ROLES, type AccessRole, type DirectoryEntry } from 'solid-logic'
-import type { AsyncComboboxOptionsProvider, ComboboxChangeEvent } from '@/components/combobox'
+import type { AsyncComboboxOptionsProvider, ComboboxChangeEvent, ComboboxOptionData } from '@/components/combobox'
 
 import '~icons/lucide/book-user'
 import '~icons/lucide/user-round'
 import '~icons/lucide/users'
 import '~icons/lucide/circle-x'
+import './TrustedAppIcon'
 import '@/components/button'
 import '@/components/combobox'
 import '@/components/combobox-option'
@@ -56,6 +57,9 @@ export default class AccessControlAddAccess extends WebComponent {
   @property({ attribute: false })
   accessor inputError = ''
 
+  @property({ type: Boolean })
+  accessor disabled = false
+
   @property({ attribute: false })
   accessor asyncOptionsProvider: AsyncComboboxOptionsProvider | null = null
 
@@ -69,15 +73,16 @@ export default class AccessControlAddAccess extends WebComponent {
   }
 
   private onPrincipalSelect (event: ComboboxChangeEvent) {
-    const option = event.detail.option
+    const option = event.detail.option as ComboboxOptionData & { targetKind?: 'origin' | 'trustedApp' }
     if (typeof option.value !== 'string') {
       return
     }
 
     this.dispatchEvent(new CustomEvent<TargetSelectedDetail>('target-selected', {
       detail: {
         value: option.value,
-        label: option.label
+        label: option.label,
+        targetKind: option.targetKind
       },
       bubbles: true,
       composed: true
@@ -86,12 +91,15 @@ export default class AccessControlAddAccess extends WebComponent {
 
   private onRoleChange (event: ComboboxChangeEvent) {
     const role = event.detail.option.value
-    if (typeof role !== 'string' || !ACCESS_ROLES.includes(role as AccessRole)) {
+    const accessRole = typeof role === 'string'
+      ? ACCESS_ROLES.find(candidate => candidate === role)
+      : undefined
+    if (!accessRole) {
       return
     }
 
     this.dispatchEvent(new CustomEvent<RoleChangedDetail>('role-changed', {
-      detail: { role: role as AccessRole },
+      detail: { role: accessRole },
       bubbles: true,
       composed: true
     }))
@@ -118,6 +126,7 @@ export default class AccessControlAddAccess extends WebComponent {
           <div class="access-grants-input">
             <solid-ui-combobox
               class="access-principal-combobox"
+              .disabled=${this.disabled}
               label="Add person, group or software agent URL."
               .srOnlyLabel=${true}
               .value=${this.principalInputValue}
@@ -133,6 +142,7 @@ export default class AccessControlAddAccess extends WebComponent {
           </div>
           <solid-ui-combobox
             class="access-role-select access-role-select--top"
+            .disabled=${this.disabled}
             .value=${this.addAccessRoleValue}
             @change=${this.onRoleChange}
           >
@@ -156,11 +166,17 @@ export default class AccessControlAddAccess extends WebComponent {
       <div class="access-grants-pending">
         ${this.pendingAccessGrants.map((grant, index) => html`
           <div class="access-grants-pending-item">
-            <span class="access-grants-pending-item-label">${grant.label}</span>
+            <span class="access-grants-pending-item-label">
+              ${grant.targetKind === 'trustedApp'
+                ? html`<icon-lucide-globe-code style="width: 13px; height: 13px; vertical-align: -2px;"></icon-lucide-globe-code>`
+                : nothing}
+              ${grant.label}
+            </span>
             <solid-ui-button
               type="button"
               variant="ghost"
               class="access-grants-pending-item-remove"
+              ?disabled=${this.disabled}
               @click=${() => this.onPendingGrantRemove(index)}
             >
               <span class="sr-only">Remove ${grant.label}</span>

src/components/access-control-modal/AccessControlErrors.ts

@@ -25,6 +25,16 @@ export default class AccessControlErrors extends WebComponent {
     }))
   }
 
+  private getScopeLabel (scope: NonNullable<Extract<AccessSaveError, { action: 'grant' | 'revoke' }>['scope']>) {
+    return scope === 'folder+contents'
+      ? 'folder and contents'
+      : scope === 'container'
+        ? 'folder'
+        : scope === 'contents'
+          ? 'contents'
+          : 'resource'
+  }
+
   protected render () {
     if (!this.errors.length) {
       return html``
@@ -44,11 +54,14 @@ export default class AccessControlErrors extends WebComponent {
               <span class="access-control-save-error-label">${error.label}</span>
               <span class="access-control-save-error-detail">
                 ${error.action === 'grant'
-                  ? `Could not grant ${error.role ?? 'access'}`
+                ? `Could not grant ${error.role ?? 'access'} for ${error.scope ? this.getScopeLabel(error.scope) : 'resource'}`
                   : error.action === 'revoke'
-                    ? 'Could not remove access'
+                  ? `Could not remove access for ${error.scope ? this.getScopeLabel(error.scope) : 'resource'}`
+                    : error.action === 'reset'
+                      ? 'Could not reset sharing'
                     : 'Could not save access changes'}
               </span>
+              <span class="access-control-save-error-message">${error.message}</span>
             </li>
           `)}
         </ul>

src/components/access-control-modal/AccessControlGeneralAccess.ts

@@ -27,6 +27,9 @@ export default class AccessControlGeneralAccess extends WebComponent {
   @property({ attribute: false })
   accessor publicAccessRoleValue: AccessRole = 'No Access'
 
+  @property({ type: Boolean })
+  accessor disabled = false
+
   private onAuthenticatedRoleChange (event: ComboboxChangeEvent) {
     this.dispatchRoleChange('authenticated-role-changed', event, ACCESS_ROLES)
   }
@@ -83,6 +86,7 @@ export default class AccessControlGeneralAccess extends WebComponent {
     return html`
       <solid-ui-combobox
         class="access-role-select access-role-select--compact access-role-select--general access-grants-role access-grants-role--editable access-role-select--authenticated"
+        .disabled=${this.disabled}
         .value=${this.authenticatedAccessRoleValue}
         @change=${this.onAuthenticatedRoleChange}
       >
@@ -95,6 +99,7 @@ export default class AccessControlGeneralAccess extends WebComponent {
     return html`
       <solid-ui-combobox
         class="access-role-select access-role-select--compact access-role-select--general access-grants-role access-grants-role--editable access-role-select--public"
+        .disabled=${this.disabled}
         .value=${this.publicAccessRoleValue}
         @change=${this.onPublicRoleChange}
       >
@@ -149,7 +154,7 @@ export default class AccessControlGeneralAccess extends WebComponent {
           </solid-ui-button>
         </div>
         ${this.renderGeneralShareRow({
-          title: 'Share with Anyone Signed In',
+          title: 'Only logged in users with the link',
           description: 'Users must sign in to SolidOS to access this shared item using the link.',
           variant: 'authenticated'
         })}