@jskit-ai/workspaces-web 0.1.41 → 0.1.43

package/src/client/components/WorkspaceSettingsFieldsClientElement.vue

@@ -1,18 +1,27 @@
 <template>
-  <v-card rounded="lg" elevation="1" border>
-    <v-card-item>
-      <v-card-title class="text-h6">Workspace settings</v-card-title>
-      <v-card-subtitle>These values apply to everyone in this workspace.</v-card-subtitle>
-    </v-card-item>
-    <v-divider />
-    <v-card-text class="pt-4">
+  <v-sheet rounded="lg" border class="workspace-settings-panel">
+    <header class="workspace-settings-panel__header">
+      <h2 class="workspace-settings-panel__title">Workspace settings</h2>
+      <p class="text-body-2 text-medium-emphasis mb-0">These values apply to everyone in this workspace.</p>
+    </header>
+
+    <div class="workspace-settings-panel__body">
       <template v-if="showSkeleton">
         <v-skeleton-loader type="text@2, list-item-two-line@4, 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-settings-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 settings.
@@ -162,8 +171,8 @@
           </v-row>
         </v-form>
       </template>
-    </v-card-text>
-  </v-card>
+    </div>
+  </v-sheet>
 </template>
 
 <script setup>
@@ -259,3 +268,37 @@ const addEdit = useAddEdit({
 
 const showSkeleton = computed(() => Boolean(addEdit.isInitialLoading));
 </script>
+
+<style scoped>
+.workspace-settings-panel {
+  overflow: hidden;
+}
+
+.workspace-settings-panel__header {
+  padding: 1rem 1rem 0;
+}
+
+.workspace-settings-panel__title {
+  font-size: 1rem;
+  font-weight: 650;
+  line-height: 1.2;
+  margin: 0 0 0.25rem;
+}
+
+.workspace-settings-panel__body {
+  padding: 1rem;
+}
+
+.workspace-settings-panel__state {
+  margin-inline: auto;
+  max-width: 30rem;
+  padding: 1.5rem 1rem;
+  text-align: center;
+}
+
+@media (max-width: 640px) {
+  .workspace-settings-panel__body :deep(.v-btn) {
+    min-height: 48px;
+  }
+}
+</style>

package/src/client/components/WorkspacesClientElement.vue

@@ -163,13 +163,14 @@ const workspaceInvitesEnabled = computed(() => bootstrapModel.workspaceInvitesEn
 
 const isBootstrapping = computed(() => Boolean(bootstrapView.isLoading));
 const isRefreshingBootstrap = computed(() => Boolean(bootstrapView.isRefetching));
+const bootstrapLoadError = computed(() => String(bootstrapView.loadError || "").trim());
 const canCreateWorkspace = computed(() => bootstrapModel.workspaceAllowSelfCreate === true);
 const isCreatingWorkspace = computed(() => Boolean(createWorkspaceCommand.isRunning.value));
 
 function reportFeedback({
   message,
   severity = "error",
-  channel = "banner",
+  channel = "",
   dedupeKey = ""
 } = {}) {
   const normalizedMessage = String(message || "").trim();
@@ -180,6 +181,7 @@ function reportFeedback({
   errorRuntime.report({
     source: "users-web.workspaces-view",
     message: normalizedMessage,
+    intent: "action-feedback",
     severity,
     channel,
     dedupeKey: dedupeKey || `users-web.workspaces-view:${severity}:${normalizedMessage}`,
@@ -233,7 +235,6 @@ async function openWorkspace(workspaceSlug) {
     reportFeedback({
       message: "Workspace surface is not configured.",
       severity: "error",
-      channel: "banner",
       dedupeKey: "users-web.workspaces-view:workspace-surface-missing"
     });
     return;
@@ -258,7 +259,6 @@ async function openWorkspace(workspaceSlug) {
     reportFeedback({
       message: String(error?.message || "Unable to open workspace."),
       severity: "error",
-      channel: "banner",
       dedupeKey: `users-web.workspaces-view:open-workspace:${normalizedSlug}`
     });
   } finally {
@@ -301,7 +301,6 @@ async function respondToInvite(invite, decision) {
     reportFeedback({
       message: "Invitation refused.",
       severity: "success",
-      channel: "snackbar",
       dedupeKey: `users-web.workspaces-view:invite-refused:${token}`
     });
   } catch (error) {
@@ -310,7 +309,6 @@ async function respondToInvite(invite, decision) {
         error?.message || (normalizedDecision === "accept" ? "Unable to accept invite." : "Unable to refuse invite.")
       ),
       severity: "error",
-      channel: "banner",
       dedupeKey: `users-web.workspaces-view:invite-${normalizedDecision}:${token}`
     });
   } finally {
@@ -341,7 +339,6 @@ async function createWorkspace() {
     reportFeedback({
       message: "Workspace name is required.",
       severity: "error",
-      channel: "banner",
       dedupeKey: "users-web.workspaces-view:create-workspace-name-required"
     });
     return;
@@ -361,12 +358,15 @@ async function createWorkspace() {
     reportFeedback({
       message: String(error?.message || "Unable to create workspace."),
       severity: "error",
-      channel: "banner",
       dedupeKey: "users-web.workspaces-view:create-workspace-error"
     });
   }
 }
 
+async function refreshBootstrap() {
+  return bootstrapView.refresh();
+}
+
 watch(
   () => bootstrapView.resource.data.value,
   async (payload) => {
@@ -401,20 +401,31 @@ watch(
 <template>
   <section class="workspaces-view py-6">
     <v-container class="mx-auto" max-width="860">
-      <v-card rounded="lg" border elevation="1">
-        <v-card-item>
-          <v-card-title class="text-h6">You are logged in</v-card-title>
-          <v-card-subtitle>Select a workspace or respond to invitations.</v-card-subtitle>
-        </v-card-item>
-        <v-divider />
-
-        <v-card-text class="pt-4">
+      <v-sheet rounded="lg" border class="workspaces-view__panel">
+        <header class="workspaces-view__header">
+          <h1 class="workspaces-view__title">You are logged in</h1>
+          <p class="text-body-2 text-medium-emphasis mb-0">Select a workspace or respond to invitations.</p>
+        </header>
+
+        <div class="workspaces-view__body">
           <v-progress-linear v-if="!isBootstrapping && isRefreshingBootstrap" indeterminate class="mb-4" />
           <v-row>
             <v-col cols="12" :md="workspaceInvitesEnabled ? 6 : 12">
               <template v-if="isBootstrapping">
                 <v-skeleton-loader type="text, list-item-avatar-two-line@3" />
               </template>
+              <div v-else-if="bootstrapLoadError" class="workspaces-view__state">
+                <h2 class="text-h6 mb-2">Unable to load workspaces</h2>
+                <p class="text-body-2 text-medium-emphasis mb-4">{{ bootstrapLoadError }}</p>
+                <v-btn
+                  color="primary"
+                  variant="tonal"
+                  :loading="isRefreshingBootstrap"
+                  @click="refreshBootstrap"
+                >
+                  Retry
+                </v-btn>
+              </div>
               <template v-else>
                 <div class="text-subtitle-2 mb-2">Your workspaces</div>
                 <template v-if="workspaceItems.length === 0">
@@ -539,8 +550,47 @@ watch(
               </template>
             </v-col>
           </v-row>
-        </v-card-text>
-      </v-card>
+        </div>
+      </v-sheet>
     </v-container>
   </section>
 </template>
+
+<style scoped>
+.workspaces-view__panel {
+  overflow: hidden;
+}
+
+.workspaces-view__header {
+  padding: 1rem 1rem 0;
+}
+
+.workspaces-view__title {
+  font-size: clamp(1.35rem, 2vw, 1.85rem);
+  font-weight: 650;
+  letter-spacing: -0.02em;
+  line-height: 1.15;
+  margin: 0 0 0.35rem;
+}
+
+.workspaces-view__body {
+  padding: 1rem;
+}
+
+.workspaces-view__state {
+  margin-inline: auto;
+  max-width: 30rem;
+  padding: 2rem 1rem;
+  text-align: center;
+}
+
+@media (max-width: 640px) {
+  .workspaces-view {
+    padding-block: 0.75rem !important;
+  }
+
+  .workspaces-view__body :deep(.v-btn) {
+    min-height: 48px;
+  }
+}
+</style>

package/src/shared/toolsOutletContracts.js

@@ -1,9 +1,6 @@
-const DEFAULT_COG_LINK_COMPONENT_TOKEN = "local.main.ui.surface-aware-menu-link-item";
-
 const ADMIN_COG_OUTLET = Object.freeze({
   target: "admin-cog:primary-menu",
-  defaultLinkComponentToken: DEFAULT_COG_LINK_COMPONENT_TOKEN,
   ariaLabel: "Admin cog"
 });
 
-export { DEFAULT_COG_LINK_COMPONENT_TOKEN, ADMIN_COG_OUTLET };
+export { ADMIN_COG_OUTLET };

package/templates/src/components/WorkspaceNotFoundCard.vue

@@ -18,17 +18,36 @@ const normalizedMessage = computed(() => String(props.message || "").trim() || "
 </script>
 
 <template>
-  <v-card rounded="lg" elevation="1" border>
-    <v-card-item>
-      <template #prepend>
-        <v-icon :icon="mdiAlertCircleOutline" color="error" />
-      </template>
-      <v-card-title class="text-h5">Unavailable</v-card-title>
-      <v-card-subtitle>{{ normalizedSurfaceLabel }} surface.</v-card-subtitle>
-    </v-card-item>
-    <v-divider />
-    <v-card-text class="d-flex flex-column ga-4">
-      <p class="text-medium-emphasis mb-0">{{ normalizedMessage }}</p>
-    </v-card-text>
-  </v-card>
+  <v-sheet rounded="lg" border class="workspace-unavailable-panel">
+    <div class="workspace-unavailable-panel__header">
+      <v-icon :icon="mdiAlertCircleOutline" color="error" />
+      <div>
+        <h1 class="workspace-unavailable-panel__title">Unavailable</h1>
+        <p class="text-body-2 text-medium-emphasis mb-0">{{ normalizedSurfaceLabel }} surface.</p>
+      </div>
+    </div>
+    <p class="text-body-2 text-medium-emphasis mb-0">{{ normalizedMessage }}</p>
+  </v-sheet>
 </template>
+
+<style scoped>
+.workspace-unavailable-panel {
+  display: grid;
+  gap: 1rem;
+  padding: 1rem;
+}
+
+.workspace-unavailable-panel__header {
+  align-items: flex-start;
+  display: flex;
+  gap: 0.75rem;
+}
+
+.workspace-unavailable-panel__title {
+  font-size: clamp(1.35rem, 2vw, 1.85rem);
+  font-weight: 650;
+  letter-spacing: -0.02em;
+  line-height: 1.15;
+  margin: 0 0 0.25rem;
+}
+</style>

package/templates/src/pages/admin/workspace/settings/index.vue

@@ -1,11 +1,7 @@
 <script setup>
-// To redirect this settings shell to a child page, uncomment and edit the example below.
-// import { redirectToChild } from "@jskit-ai/kernel/client/pageRedirects";
-// definePage({
-//   redirect: redirectToChild("your_child_segment")
-// });
+import WorkspaceSettingsClientElement from "@jskit-ai/workspaces-web/client/components/WorkspaceSettingsClientElement";
 </script>
 
 <template>
-  <div />
+  <WorkspaceSettingsClientElement />
 </template>

package/templates/src/pages/admin/workspace/settings.vue

@@ -5,28 +5,66 @@ import { RouterView } from "vue-router";
 
 <template>
   <section class="settings-shell d-flex flex-column ga-4">
-    <v-card rounded="lg" elevation="1" border>
-      <v-card-item>
-        <v-card-title>Workspace settings</v-card-title>
-        <v-card-subtitle>Configure the current workspace and its members.</v-card-subtitle>
-      </v-card-item>
-      <v-divider />
-      <v-card-text class="pt-4">
-        <v-row no-gutters>
-          <v-col cols="12" md="3" lg="2" class="pr-md-4 mb-4 mb-md-0">
-            <v-list nav density="comfortable" rounded="lg" border>
-              <ShellOutlet
-                target="admin-settings:primary-menu"
-                default-link-component-token="local.main.ui.surface-aware-menu-link-item"
-              />
-            </v-list>
-          </v-col>
-
-          <v-col cols="12" md="9" lg="10">
-            <RouterView />
-          </v-col>
-        </v-row>
-      </v-card-text>
-    </v-card>
+    <header>
+      <p class="text-overline text-medium-emphasis mb-1">Settings</p>
+      <h1 class="settings-shell__title">Workspace settings</h1>
+      <p class="text-body-2 text-medium-emphasis mb-0">Configure the current workspace and its members.</p>
+    </header>
+
+    <v-sheet rounded="lg" border class="settings-shell__panel">
+      <nav class="settings-shell__nav" aria-label="Workspace settings sections">
+        <v-list nav density="comfortable" class="settings-shell__nav-list">
+          <ShellOutlet target="admin-settings:primary-menu" />
+        </v-list>
+      </nav>
+      <main class="settings-shell__content">
+        <RouterView />
+      </main>
+    </v-sheet>
   </section>
 </template>
+
+<style scoped>
+.settings-shell__title {
+  font-size: clamp(1.35rem, 2vw, 1.85rem);
+  font-weight: 650;
+  letter-spacing: -0.02em;
+  line-height: 1.15;
+  margin: 0 0 0.35rem;
+}
+
+.settings-shell__panel {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr);
+  padding: 1rem;
+}
+
+.settings-shell__nav-list {
+  padding: 0;
+}
+
+.settings-shell__content {
+  min-width: 0;
+}
+
+@media (max-width: 960px) {
+  .settings-shell__panel {
+    grid-template-columns: 1fr;
+  }
+
+  .settings-shell__nav {
+    overflow-x: auto;
+  }
+
+  .settings-shell__nav-list {
+    display: flex;
+    gap: 0.5rem;
+    min-width: max-content;
+  }
+
+  .settings-shell__nav-list :deep(.v-list-item) {
+    min-height: 48px;
+  }
+}
+</style>

package/templates/src/surfaces/admin/index.vue

@@ -11,19 +11,67 @@ const { workspaceUnavailable, workspaceUnavailableMessage } = useWorkspaceNotFou
     :message="workspaceUnavailableMessage"
     surface-label="Admin"
   />
-  <v-card v-else rounded="lg" elevation="1" border>
-    <v-card-item>
-      <template #prepend>
-        <v-chip color="primary" size="small" label>Admin</v-chip>
-      </template>
-      <v-card-title class="text-h5">Workspace Admin</v-card-title>
-      <v-card-subtitle>Privileged workspace workflows.</v-card-subtitle>
-    </v-card-item>
-    <v-divider />
-    <v-card-text class="d-flex flex-column ga-4">
-      <p class="text-medium-emphasis mb-0">
-        Use this area for workspace administration modules.
+  <section v-else class="workspace-admin-screen d-flex flex-column ga-4">
+    <header class="workspace-admin-screen__header">
+      <div>
+        <p class="text-overline text-medium-emphasis mb-1">Admin</p>
+        <h1 class="workspace-admin-screen__title">Workspace Admin</h1>
+        <p class="text-body-2 text-medium-emphasis mb-0">Manage members and workspace settings.</p>
+      </div>
+      <div class="workspace-admin-screen__actions">
+        <v-btn color="primary" variant="flat" to="./members">Members</v-btn>
+        <v-btn color="primary" variant="tonal" to="./workspace/settings">Settings</v-btn>
+      </div>
+    </header>
+
+    <v-sheet rounded="lg" border class="workspace-admin-screen__panel">
+      <h2 class="text-h6 mb-2">Admin tasks</h2>
+      <p class="text-body-2 text-medium-emphasis mb-0">
+        Review workspace access, members, and operational settings from this surface.
       </p>
-    </v-card-text>
-  </v-card>
+    </v-sheet>
+  </section>
 </template>
+
+<style scoped>
+.workspace-admin-screen__header {
+  align-items: flex-start;
+  display: flex;
+  gap: 1rem;
+  justify-content: space-between;
+}
+
+.workspace-admin-screen__title {
+  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
+  font-weight: 700;
+  letter-spacing: -0.03em;
+  line-height: 1.1;
+  margin: 0 0 0.4rem;
+}
+
+.workspace-admin-screen__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  justify-content: flex-end;
+}
+
+.workspace-admin-screen__panel {
+  padding: 1rem;
+}
+
+@media (max-width: 640px) {
+  .workspace-admin-screen__header {
+    flex-direction: column;
+  }
+
+  .workspace-admin-screen__actions {
+    width: 100%;
+  }
+
+  .workspace-admin-screen__actions :deep(.v-btn) {
+    min-height: 48px;
+    flex: 1 1 10rem;
+  }
+}
+</style>

package/templates/src/surfaces/app/index.vue

@@ -11,17 +11,36 @@ const { workspaceUnavailable, workspaceUnavailableMessage } = useWorkspaceNotFou
     :message="workspaceUnavailableMessage"
     surface-label="App"
   />
-  <v-card v-else rounded="lg" elevation="1" border>
-    <v-card-item>
-      <template #prepend>
-        <v-chip color="primary" size="small" label>App</v-chip>
-      </template>
-      <v-card-title class="text-h5">Workspace Home</v-card-title>
-      <v-card-subtitle>Primary in-workspace surface.</v-card-subtitle>
-    </v-card-item>
-    <v-divider />
-    <v-card-text class="d-flex flex-column ga-4">
-      <p class="text-medium-emphasis mb-0">Replace this page with your workspace dashboard modules.</p>
-    </v-card-text>
-  </v-card>
+  <section v-else class="workspace-home-screen d-flex flex-column ga-4">
+    <header>
+      <p class="text-overline text-medium-emphasis mb-1">Workspace</p>
+      <h1 class="workspace-home-screen__title">Workspace Home</h1>
+      <p class="text-body-2 text-medium-emphasis mb-0">The current workspace is active.</p>
+    </header>
+
+    <v-sheet rounded="lg" border class="workspace-home-screen__panel">
+      <h2 class="text-h6 mb-2">No workspace activity yet</h2>
+      <p class="text-body-2 text-medium-emphasis mb-0">
+        Activity from workspace workflows will appear here.
+      </p>
+    </v-sheet>
+  </section>
 </template>
+
+<style scoped>
+.workspace-home-screen__title {
+  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
+  font-weight: 700;
+  letter-spacing: -0.03em;
+  line-height: 1.1;
+  margin: 0 0 0.4rem;
+}
+
+.workspace-home-screen__panel {
+  margin-inline: auto;
+  max-width: 34rem;
+  padding: 2rem 1.25rem;
+  text-align: center;
+  width: 100%;
+}
+</style>

package/test/exportsContract.test.js

@@ -16,6 +16,7 @@ test("workspaces-web exports are explicit and aligned with production usage", ()
     requiredExports: [
       "./client",
       "./client/components/AccountSettingsInvitesSection",
+      "./client/components/WorkspaceSettingsClientElement",
       "./client/providers/WorkspacesWebClientProvider",
       "./client/composables/useWorkspaceRouteContext"
     ]