@jskit-ai/workspaces-web 0.1.41 → 0.1.43

package/package.descriptor.mjs

@@ -1,7 +1,7 @@
 export default Object.freeze({
   packageVersion: 1,
   packageId: "@jskit-ai/workspaces-web",
-  version: "0.1.41",
+  version: "0.1.43",
   kind: "runtime",
   description: "Workspace web module: workspace selector, tools widget, workspace surfaces, and members/settings UI.",
   dependsOn: [
@@ -41,6 +41,10 @@ export default Object.freeze({
           subpath: "./client/components/AccountSettingsInvitesSection",
           summary: "Exports the default account invites section component used by multihoming installs."
         },
+        {
+          subpath: "./client/components/WorkspaceSettingsClientElement",
+          summary: "Exports the workspace settings client element used by the workspace admin settings starter page."
+        },
         {
           subpath: "./client/providers/WorkspacesWebClientProvider",
           summary: "Exports workspaces-web client provider class."
@@ -69,39 +73,93 @@ export default Object.freeze({
         outlets: [
           {
             target: "admin-settings:primary-menu",
-            defaultLinkComponentToken: "local.main.ui.surface-aware-menu-link-item",
             surfaces: ["admin"],
             source: "templates/src/pages/admin/workspace/settings.vue"
           },
           {
             target: "admin-cog:primary-menu",
-            defaultLinkComponentToken: "local.main.ui.surface-aware-menu-link-item",
             surfaces: ["admin"],
             source: "src/client/components/UsersWorkspaceToolsWidget.vue"
           }
         ],
+        topology: {
+          placements: [
+            {
+              id: "page.section-nav",
+              owner: "admin-settings",
+              description: "Navigation between workspace admin settings child pages.",
+              surfaces: ["admin"],
+              variants: {
+                compact: {
+                  outlet: "admin-settings:primary-menu",
+                  renderers: {
+                    link: "local.main.ui.surface-aware-menu-link-item"
+                  }
+                },
+                medium: {
+                  outlet: "admin-settings:primary-menu",
+                  renderers: {
+                    link: "local.main.ui.surface-aware-menu-link-item"
+                  }
+                },
+                expanded: {
+                  outlet: "admin-settings:primary-menu",
+                  renderers: {
+                    link: "local.main.ui.surface-aware-menu-link-item"
+                  }
+                }
+              }
+            },
+            {
+              id: "admin.tools-menu",
+              description: "Admin surface tools menu actions.",
+              surfaces: ["admin"],
+              variants: {
+                compact: {
+                  outlet: "admin-cog:primary-menu",
+                  renderers: {
+                    link: "local.main.ui.surface-aware-menu-link-item"
+                  }
+                },
+                medium: {
+                  outlet: "admin-cog:primary-menu",
+                  renderers: {
+                    link: "local.main.ui.surface-aware-menu-link-item"
+                  }
+                },
+                expanded: {
+                  outlet: "admin-cog:primary-menu",
+                  renderers: {
+                    link: "local.main.ui.surface-aware-menu-link-item"
+                  }
+                }
+              }
+            }
+          ]
+        },
         contributions: [
           {
             id: "workspaces.workspace.menu.app",
-            target: "shell-layout:primary-menu",
+            target: "shell.primary-nav",
+            kind: "link",
             surfaces: ["app"],
             order: 50,
-            componentToken: "local.main.ui.surface-aware-menu-link-item",
             when: "auth.authenticated === true",
             source: "mutations.text#workspaces-web-placement-block"
           },
           {
             id: "workspaces.workspace.menu.admin",
-            target: "shell-layout:primary-menu",
+            target: "shell.primary-nav",
+            kind: "link",
             surfaces: ["admin"],
             order: 60,
-            componentToken: "local.main.ui.surface-aware-menu-link-item",
             when: "auth.authenticated === true",
             source: "mutations.text#workspaces-web-placement-block"
           },
           {
             id: "workspaces.profile.menu.surface-switch",
-            target: "auth-profile-menu:primary-menu",
+            target: "auth.profile-menu",
+            kind: "component",
             surfaces: ["*"],
             order: 100,
             componentToken: "workspaces.web.profile.menu.surface-switch-item",
@@ -110,7 +168,8 @@ export default Object.freeze({
           },
           {
             id: "workspaces.workspace.selector",
-            target: "shell-layout:top-left",
+            target: "shell.identity",
+            kind: "component",
             surfaces: ["*"],
             order: 200,
             componentToken: "workspaces.web.workspace.selector",
@@ -119,7 +178,8 @@ export default Object.freeze({
           },
           {
             id: "workspaces.account.invites.cue",
-            target: "shell-layout:top-right",
+            target: "shell.status",
+            kind: "component",
             surfaces: ["*"],
             order: 850,
             componentToken: "local.main.account.pending-invites.cue",
@@ -128,7 +188,9 @@ export default Object.freeze({
           },
           {
             id: "workspaces.account.settings.invites",
-            target: "account-settings:sections",
+            target: "settings.sections",
+            owner: "account-settings",
+            kind: "component",
             surfaces: ["account"],
             order: 400,
             componentToken: "local.main.account-settings.section.invites",
@@ -137,7 +199,8 @@ export default Object.freeze({
           },
           {
             id: "workspaces.workspace.tools.widget",
-            target: "shell-layout:top-right",
+            target: "shell.status",
+            kind: "component",
             surfaces: ["admin"],
             order: 900,
             componentToken: "workspaces.web.workspace.tools.widget",
@@ -145,7 +208,8 @@ export default Object.freeze({
           },
           {
             id: "workspaces.workspace.menu.workspace-settings",
-            target: "admin-cog:primary-menu",
+            target: "admin.tools-menu",
+            kind: "component",
             surfaces: ["admin"],
             order: 100,
             componentToken: "workspaces.web.workspace-settings.menu-item",
@@ -153,7 +217,8 @@ export default Object.freeze({
           },
           {
             id: "workspaces.workspace.menu.members",
-            target: "admin-cog:primary-menu",
+            target: "admin.tools-menu",
+            kind: "component",
             surfaces: ["admin"],
             order: 200,
             componentToken: "workspaces.web.workspace-members.menu-item",
@@ -166,9 +231,8 @@ export default Object.freeze({
   mutations: {
     dependencies: {
       runtime: {
-        "@jskit-ai/workspaces-core": "0.1.41",
-        "@jskit-ai/users-web": "0.1.80",
-        "vuetify": "^4.0.0"
+        "@jskit-ai/workspaces-core": "0.1.43",
+        "@jskit-ai/users-web": "0.1.82"
       },
       dev: {}
     },
@@ -310,7 +374,7 @@ export default Object.freeze({
         position: "bottom",
         skipIfContains: "id: \"workspaces.profile.menu.surface-switch\"",
         value:
-          "\naddPlacement({\n  id: \"workspaces.profile.menu.surface-switch\",\n  target: \"auth-profile-menu:primary-menu\",\n  surfaces: [\"*\"],\n  order: 100,\n  componentToken: \"workspaces.web.profile.menu.surface-switch-item\",\n  when: ({ auth }) => auth?.authenticated === true\n});\n",
+          "\naddPlacement({\n  id: \"workspaces.profile.menu.surface-switch\",\n  target: \"auth.profile-menu\",\n  kind: \"component\",\n  surfaces: [\"*\"],\n  order: 100,\n  componentToken: \"workspaces.web.profile.menu.surface-switch-item\",\n  when: ({ auth }) => auth?.authenticated === true\n});\n",
         reason: "Append workspaces-web profile surface switch placement into app-owned placement registry.",
         category: "workspaces-web",
         id: "workspaces-web-profile-surface-switch-placement",
@@ -324,7 +388,7 @@ export default Object.freeze({
         file: "src/placement.js",
         position: "bottom",
         skipIfContains: "id: \"workspaces.workspace.selector\"",
-        value: "\naddPlacement({\n  id: \"workspaces.workspace.menu.app\",\n  target: \"shell-layout:primary-menu\",\n  surfaces: [\"app\"],\n  order: 50,\n  componentToken: \"local.main.ui.surface-aware-menu-link-item\",\n  props: {\n    label: \"Home\",\n    surface: \"app\",\n    scopedSuffix: \"/\",\n    unscopedSuffix: \"/\",\n    exact: true\n  },\n  when: ({ auth }) => auth?.authenticated === true\n});\n\naddPlacement({\n  id: \"workspaces.workspace.menu.admin\",\n  target: \"shell-layout:primary-menu\",\n  surfaces: [\"admin\"],\n  order: 60,\n  componentToken: \"local.main.ui.surface-aware-menu-link-item\",\n  props: {\n    label: \"Home\",\n    surface: \"admin\",\n    scopedSuffix: \"/\",\n    unscopedSuffix: \"/\",\n    exact: true\n  },\n  when: ({ auth }) => auth?.authenticated === true\n});\n\naddPlacement({\n  id: \"workspaces.workspace.selector\",\n  target: \"shell-layout:top-left\",\n  surfaces: [\"*\"],\n  order: 200,\n  componentToken: \"workspaces.web.workspace.selector\",\n  props: {\n    allowOnNonWorkspaceSurface: true,\n    targetSurfaceId: \"app\"\n  },\n  when: ({ auth }) => auth?.authenticated === true\n});\n\naddPlacement({\n  id: \"workspaces.account.invites.cue\",\n  target: \"shell-layout:top-right\",\n  surfaces: [\"*\"],\n  order: 850,\n  componentToken: \"local.main.account.pending-invites.cue\",\n  when: ({ auth }) => auth?.authenticated === true\n});\n\naddPlacement({\n  id: \"workspaces.workspace.tools.widget\",\n  target: \"shell-layout:top-right\",\n  surfaces: [\"admin\"],\n  order: 900,\n  componentToken: \"workspaces.web.workspace.tools.widget\"\n});\n\naddPlacement({\n  id: \"workspaces.workspace.menu.workspace-settings\",\n  target: \"admin-cog:primary-menu\",\n  surfaces: [\"admin\"],\n  order: 100,\n  componentToken: \"workspaces.web.workspace-settings.menu-item\"\n});\n\naddPlacement({\n  id: \"workspaces.workspace.menu.members\",\n  target: \"admin-cog:primary-menu\",\n  surfaces: [\"admin\"],\n  order: 200,\n  componentToken: \"workspaces.web.workspace-members.menu-item\"\n});\n",
+        value: "\naddPlacement({\n  id: \"workspaces.workspace.menu.app\",\n  target: \"shell.primary-nav\",\n  kind: \"link\",\n  surfaces: [\"app\"],\n  order: 50,\n  props: {\n    label: \"Home\",\n    surface: \"app\",\n    scopedSuffix: \"/\",\n    unscopedSuffix: \"/\",\n    exact: true\n  },\n  when: ({ auth }) => auth?.authenticated === true\n});\n\naddPlacement({\n  id: \"workspaces.workspace.menu.admin\",\n  target: \"shell.primary-nav\",\n  kind: \"link\",\n  surfaces: [\"admin\"],\n  order: 60,\n  props: {\n    label: \"Home\",\n    surface: \"admin\",\n    scopedSuffix: \"/\",\n    unscopedSuffix: \"/\",\n    exact: true\n  },\n  when: ({ auth }) => auth?.authenticated === true\n});\n\naddPlacement({\n  id: \"workspaces.workspace.selector\",\n  target: \"shell.identity\",\n  kind: \"component\",\n  surfaces: [\"*\"],\n  order: 200,\n  componentToken: \"workspaces.web.workspace.selector\",\n  props: {\n    allowOnNonWorkspaceSurface: true,\n    targetSurfaceId: \"app\"\n  },\n  when: ({ auth }) => auth?.authenticated === true\n});\n\naddPlacement({\n  id: \"workspaces.account.invites.cue\",\n  target: \"shell.status\",\n  kind: \"component\",\n  surfaces: [\"*\"],\n  order: 850,\n  componentToken: \"local.main.account.pending-invites.cue\",\n  when: ({ auth }) => auth?.authenticated === true\n});\n\naddPlacement({\n  id: \"workspaces.workspace.tools.widget\",\n  target: \"shell.status\",\n  kind: \"component\",\n  surfaces: [\"admin\"],\n  order: 900,\n  componentToken: \"workspaces.web.workspace.tools.widget\"\n});\n\naddPlacement({\n  id: \"workspaces.workspace.menu.workspace-settings\",\n  target: \"admin.tools-menu\",\n  kind: \"component\",\n  surfaces: [\"admin\"],\n  order: 100,\n  componentToken: \"workspaces.web.workspace-settings.menu-item\"\n});\n\naddPlacement({\n  id: \"workspaces.workspace.menu.members\",\n  target: \"admin.tools-menu\",\n  kind: \"component\",\n  surfaces: [\"admin\"],\n  order: 200,\n  componentToken: \"workspaces.web.workspace-members.menu-item\"\n});\n",
         reason: "Append workspace placement entries into app-owned placement registry.",
         category: "workspaces-web",
         id: "workspaces-web-placement-block",
@@ -333,13 +397,27 @@ export default Object.freeze({
           in: ["personal", "workspaces"]
         }
       },
+      {
+        op: "append-text",
+        file: "src/placementTopology.js",
+        position: "bottom",
+        skipIfContains: "id: \"admin.tools-menu\"",
+        value: "\naddPlacementTopology({\n  id: \"page.section-nav\",\n  owner: \"admin-settings\",\n  description: \"Navigation between workspace admin settings child pages.\",\n  surfaces: [\"admin\"],\n  variants: {\n    compact: {\n      outlet: \"admin-settings:primary-menu\",\n      renderers: {\n        link: \"local.main.ui.surface-aware-menu-link-item\"\n      }\n    },\n    medium: {\n      outlet: \"admin-settings:primary-menu\",\n      renderers: {\n        link: \"local.main.ui.surface-aware-menu-link-item\"\n      }\n    },\n    expanded: {\n      outlet: \"admin-settings:primary-menu\",\n      renderers: {\n        link: \"local.main.ui.surface-aware-menu-link-item\"\n      }\n    }\n  }\n});\n\naddPlacementTopology({\n  id: \"admin.tools-menu\",\n  description: \"Admin surface tools menu actions.\",\n  surfaces: [\"admin\"],\n  variants: {\n    compact: {\n      outlet: \"admin-cog:primary-menu\",\n      renderers: {\n        link: \"local.main.ui.surface-aware-menu-link-item\"\n      }\n    },\n    medium: {\n      outlet: \"admin-cog:primary-menu\",\n      renderers: {\n        link: \"local.main.ui.surface-aware-menu-link-item\"\n      }\n    },\n    expanded: {\n      outlet: \"admin-cog:primary-menu\",\n      renderers: {\n        link: \"local.main.ui.surface-aware-menu-link-item\"\n      }\n    }\n  }\n});\n",
+        reason: "Append workspaces-web admin semantic topology into app-owned placement topology.",
+        category: "workspaces-web",
+        id: "workspaces-web-admin-placement-topology",
+        when: {
+          config: "tenancyMode",
+          in: ["personal", "workspaces"]
+        }
+      },
       {
         op: "append-text",
         file: "src/placement.js",
         position: "bottom",
         skipIfContains: "id: \"workspaces.account.settings.invites\"",
         value:
-          "\naddPlacement({\n  id: \"workspaces.account.settings.invites\",\n  target: \"account-settings:sections\",\n  surfaces: [\"account\"],\n  order: 400,\n  componentToken: \"local.main.account-settings.section.invites\",\n  props: {\n    title: \"Invites\",\n    value: \"invites\",\n    usesSharedRuntime: false\n  },\n  when: ({ auth, workspaceInvitesEnabled }) => auth?.authenticated === true && workspaceInvitesEnabled === true\n});\n",
+          "\naddPlacement({\n  id: \"workspaces.account.settings.invites\",\n  target: \"settings.sections\",\n  owner: \"account-settings\",\n  kind: \"component\",\n  surfaces: [\"account\"],\n  order: 400,\n  componentToken: \"local.main.account-settings.section.invites\",\n  props: {\n    title: \"Invites\",\n    value: \"invites\",\n    usesSharedRuntime: false\n  },\n  when: ({ auth, workspaceInvitesEnabled }) => auth?.authenticated === true && workspaceInvitesEnabled === true\n});\n",
         reason: "Append workspaces-web account settings invites section placement into app-owned placement registry.",
         category: "workspaces-web",
         id: "workspaces-web-account-settings-placement",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jskit-ai/workspaces-web",
-  "version": "0.1.41",
+  "version": "0.1.43",
   "type": "module",
   "scripts": {
     "test": "node --test"
@@ -10,21 +10,22 @@
     "./client/components/AccountSettingsInvitesSection": "./src/client/components/AccountSettingsInvitesSection.vue",
     "./client/providers/WorkspacesWebClientProvider": "./src/client/providers/WorkspacesWebClientProvider.js",
     "./client/components/WorkspaceMembersClientElement": "./src/client/components/WorkspaceMembersClientElement.vue",
+    "./client/components/WorkspaceSettingsClientElement": "./src/client/components/WorkspaceSettingsClientElement.vue",
     "./client/composables/useWorkspaceRouteContext": "./src/client/composables/useWorkspaceRouteContext.js"
   },
   "dependencies": {
-    "@tanstack/vue-query": "5.92.12",
     "@mdi/js": "^7.4.47",
-    "@jskit-ai/http-runtime": "0.1.64",
-    "@jskit-ai/kernel": "0.1.65",
-    "@jskit-ai/shell-web": "0.1.64",
-    "@jskit-ai/users-core": "0.1.75",
-    "@jskit-ai/users-web": "0.1.80",
-    "@jskit-ai/workspaces-core": "0.1.41",
-    "vuetify": "^4.0.0"
+    "@jskit-ai/http-runtime": "0.1.66",
+    "@jskit-ai/kernel": "0.1.67",
+    "@jskit-ai/shell-web": "0.1.66",
+    "@jskit-ai/users-core": "0.1.77",
+    "@jskit-ai/users-web": "0.1.82",
+    "@jskit-ai/workspaces-core": "0.1.43"
   },
   "peerDependencies": {
+    "@tanstack/vue-query": "^5.90.5",
     "vue": "^3.5.13",
-    "vue-router": "^5.0.4"
+    "vue-router": "^5.0.4",
+    "vuetify": "^4.0.0"
   }
 }

package/src/client/components/AccountSettingsInvitesSection.vue

@@ -5,13 +5,13 @@ const invites = useAccountSettingsInvitesSectionRuntime();
 </script>
 
 <template>
-  <v-card rounded="lg" elevation="0" border>
-    <v-card-item>
-      <v-card-title class="text-subtitle-1">Invitations</v-card-title>
-      <v-card-subtitle>Accept or refuse workspace invitations.</v-card-subtitle>
-    </v-card-item>
-    <v-divider />
-    <v-card-text>
+  <v-sheet rounded="lg" border class="account-invites-section">
+    <header class="account-invites-section__header">
+      <h2 class="account-invites-section__title">Invitations</h2>
+      <p class="text-body-2 text-medium-emphasis mb-0">Accept or refuse workspace invitations.</p>
+    </header>
+
+    <div class="account-invites-section__body">
       <template v-if="invites.isLoading.value">
         <v-skeleton-loader type="text@2, list-item-two-line@3" />
       </template>
@@ -67,6 +67,33 @@ const invites = useAccountSettingsInvitesSectionRuntime();
           </v-list-item>
         </v-list>
       </template>
-    </v-card-text>
-  </v-card>
+    </div>
+  </v-sheet>
 </template>
+
+<style scoped>
+.account-invites-section {
+  overflow: hidden;
+}
+
+.account-invites-section__header {
+  padding: 1rem 1rem 0;
+}
+
+.account-invites-section__title {
+  font-size: 1rem;
+  font-weight: 650;
+  line-height: 1.2;
+  margin: 0 0 0.25rem;
+}
+
+.account-invites-section__body {
+  padding: 1rem;
+}
+
+@media (max-width: 640px) {
+  .account-invites-section__body :deep(.v-btn) {
+    min-height: 48px;
+  }
+}
+</style>

package/src/client/components/UsersWorkspaceToolsWidget.vue

@@ -6,7 +6,6 @@ import { ADMIN_COG_OUTLET } from "../../shared/toolsOutletContracts.js";
 <template>
   <ShellOutletMenuWidget
     :target="ADMIN_COG_OUTLET.target"
-    :default-link-component-token="ADMIN_COG_OUTLET.defaultLinkComponentToken"
     :aria-label="ADMIN_COG_OUTLET.ariaLabel"
   />
 </template>

package/src/client/components/WorkspaceMembersClientElement.vue

@@ -1,8 +1,17 @@
 <template>
   <section class="workspace-members-page">
-    <p v-if="loadError" class="text-body-2 text-medium-emphasis mb-4">
-      {{ loadError }}
-    </p>
+    <div v-if="loadError" class="workspace-members-page__state">
+      <p class="text-body-2 text-medium-emphasis mb-4">{{ loadError }}</p>
+      <v-btn
+        v-if="canRetryLoad"
+        color="primary"
+        variant="tonal"
+        :loading="isRetryingLoad"
+        @click="refreshLoad"
+      >
+        Retry
+      </v-btn>
+    </div>
 
     <MembersAdminClientElement
       v-else
@@ -38,7 +47,6 @@ import { useView } from "@jskit-ai/users-web/client/composables/useView";
 import { usePaths } from "@jskit-ai/users-web/client/composables/usePaths";
 import { useAccess } from "@jskit-ai/users-web/client/composables/useAccess";
 import { useUiFeedback } from "@jskit-ai/users-web/client/composables/runtime/useUiFeedback";
-import { useShellWebErrorRuntime } from "@jskit-ai/shell-web/client/error";
 import { useWorkspaceRouteContext } from "../composables/useWorkspaceRouteContext.js";
 import { createWorkspaceRealtimeMatcher } from "../support/realtimeWorkspace.js";
 import { buildWorkspaceQueryKey } from "../support/workspaceQueryKeys.js";
@@ -75,7 +83,6 @@ const removeMemberUserId = ref("");
 
 const { route, currentSurfaceId, workspaceSlugFromRoute } = useWorkspaceRouteContext();
 const usersPaths = usePaths();
-const errorRuntime = useShellWebErrorRuntime();
 const OWNERSHIP_WORKSPACE = ROUTE_VISIBILITY_WORKSPACE;
 
 const hasRouteWorkspaceSlug = computed(() => Boolean(workspaceSlugFromRoute.value));
@@ -423,27 +430,44 @@ const loadError = computed(() => {
     return "Workspace slug is required in the URL.";
   }
 
-  return access.bootstrapError.value;
+  return (
+    access.bootstrapError.value ||
+    workspaceSettingsView.loadError ||
+    workspaceRolesView.loadError ||
+    workspaceMembersList.loadError ||
+    workspaceInvitesList.loadError ||
+    ""
+  );
 });
-
-watch(
-  loadError,
-  (nextLoadError) => {
-    if (!nextLoadError) {
-      return;
-    }
-    errorRuntime.report({
-      source: "users-web.workspace-members-view",
-      severity: "error",
-      channel: "banner",
-      message: String(nextLoadError || "Unable to load workspace members."),
-      dedupeKey: `users-web.workspace-members-view:bootstrap:${nextLoadError}`,
-      dedupeWindowMs: 3000
-    });
-  },
-  { immediate: true }
+const canRetryLoad = computed(() => Boolean(hasRouteWorkspaceSlug.value && !access.bootstrapError.value));
+const isRetryingLoad = computed(() =>
+  Boolean(
+    workspaceSettingsView.isFetching ||
+    workspaceRolesView.isFetching ||
+    workspaceMembersList.isFetching ||
+    workspaceInvitesList.isFetching
+  )
 );
 
+async function refreshLoad() {
+  if (!canRetryLoad.value) {
+    return;
+  }
+
+  const jobs = [];
+  if (canInviteMembers.value) {
+    jobs.push(workspaceSettingsView.refresh());
+  }
+  if (canInviteMembers.value || canViewMembers.value) {
+    jobs.push(workspaceRolesView.refresh());
+  }
+  if (canViewMembers.value) {
+    jobs.push(workspaceMembersList.reload());
+    jobs.push(workspaceInvitesList.reload());
+  }
+  await Promise.all(jobs);
+}
+
 const actions = Object.freeze({
   submitInvite,
   submitRevokeInvite,
@@ -522,17 +546,6 @@ watch(
   { immediate: true }
 );
 
-watch(
-  () => workspaceMembersList.loadError,
-  (nextLoadError) => {
-    if (!nextLoadError) {
-      membersFeedback.clear();
-      return;
-    }
-    membersFeedback.error(null, nextLoadError);
-  }
-);
-
 watch(
   () => workspaceInvitesList.items,
   (nextInvites) => {
@@ -553,17 +566,6 @@ watch(
   { immediate: true }
 );
 
-watch(
-  () => workspaceInvitesList.loadError,
-  (nextLoadError) => {
-    if (!nextLoadError) {
-      teamFeedback.clear();
-      return;
-    }
-    teamFeedback.error(null, nextLoadError);
-  }
-);
-
 watch(
   () => route.fullPath,
   () => {
@@ -671,3 +673,18 @@ async function submitRemoveMember(member) {
   }
 }
 </script>
+
+<style scoped>
+.workspace-members-page__state {
+  margin-inline: auto;
+  max-width: 30rem;
+  padding: 2rem 1rem;
+  text-align: center;
+}
+
+@media (max-width: 640px) {
+  .workspace-members-page__state :deep(.v-btn) {
+    min-height: 48px;
+  }
+}
+</style>

package/src/client/components/WorkspaceProfileClientElement.vue

@@ -1,18 +1,27 @@
 <template>
-  <v-card class="mb-4" rounded="lg" elevation="1" border>
-    <v-card-item>
-      <v-card-title class="text-h6">Workspace profile</v-card-title>
-      <v-card-subtitle>Name and avatar used across the workspace.</v-card-subtitle>
-    </v-card-item>
-    <v-divider />
-    <v-card-text class="pt-4">
+  <v-sheet rounded="lg" border class="workspace-profile-panel">
+    <header class="workspace-profile-panel__header">
+      <h2 class="workspace-profile-panel__title">Workspace profile</h2>
+      <p class="text-body-2 text-medium-emphasis mb-0">Name and avatar used across the workspace.</p>
+    </header>
+
+    <div class="workspace-profile-panel__body">
       <template v-if="showSkeleton">
         <v-skeleton-loader type="text@2, list-item-two-line@3, button" />
       </template>
 
-      <p v-else-if="addEdit.loadError" class="text-body-2 text-medium-emphasis mb-4">
-        {{ addEdit.loadError }}
-      </p>
+      <div v-else-if="addEdit.loadError" class="workspace-profile-panel__state">
+        <p class="text-body-2 text-medium-emphasis mb-4">{{ addEdit.loadError }}</p>
+        <v-btn
+          v-if="addEdit.canRetryLoad"
+          color="primary"
+          variant="tonal"
+          :loading="addEdit.isFetching"
+          @click="addEdit.refresh"
+        >
+          Retry
+        </v-btn>
+      </div>
 
       <p v-else-if="!addEdit.canView" class="text-body-2 text-medium-emphasis mb-4">
         You do not have permission to view workspace profile.
@@ -62,8 +71,8 @@
           </v-row>
         </v-form>
       </template>
-    </v-card-text>
-  </v-card>
+    </div>
+  </v-sheet>
 </template>
 
 <script setup>
@@ -110,3 +119,37 @@ const addEdit = useAddEdit({
 
 const showSkeleton = computed(() => Boolean(addEdit.isInitialLoading));
 </script>
+
+<style scoped>
+.workspace-profile-panel {
+  overflow: hidden;
+}
+
+.workspace-profile-panel__header {
+  padding: 1rem 1rem 0;
+}
+
+.workspace-profile-panel__title {
+  font-size: 1rem;
+  font-weight: 650;
+  line-height: 1.2;
+  margin: 0 0 0.25rem;
+}
+
+.workspace-profile-panel__body {
+  padding: 1rem;
+}
+
+.workspace-profile-panel__state {
+  margin-inline: auto;
+  max-width: 30rem;
+  padding: 1.5rem 1rem;
+  text-align: center;
+}
+
+@media (max-width: 640px) {
+  .workspace-profile-panel__body :deep(.v-btn) {
+    min-height: 48px;
+  }
+}
+</style>

package/src/client/components/WorkspaceSettingsClientElement.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="workspace-settings-client-element">
+  <section class="workspace-settings-client-element d-flex flex-column ga-4">
     <WorkspaceProfileClientElement @saved="handleFormSaved" />
     <WorkspaceSettingsFieldsClientElement @saved="handleFormSaved" />
   </section>