@jskit-ai/users-web 0.1.4

package/templates/packages/main/src/client/components/AccountPendingInvitesCue.vue

@@ -0,0 +1,162 @@
+<script setup>
+import { computed } from "vue";
+import { useRoute } from "vue-router";
+import { useQuery } from "@tanstack/vue-query";
+import { mdiEmailAlertOutline } from "@mdi/js";
+import { appendQueryString } from "@jskit-ai/kernel/shared/support";
+import {
+  useWebPlacementContext,
+  resolveSurfaceDefinitionFromPlacementContext,
+  resolveSurfacePathFromPlacementContext,
+  resolveSurfaceNavigationTargetFromPlacementContext
+} from "@jskit-ai/shell-web/client/placement";
+
+const { context: placementContext } = useWebPlacementContext();
+const route = useRoute();
+
+function normalizePendingInvitesCount(value) {
+  const numeric = Number(value);
+  if (!Number.isInteger(numeric) || numeric < 1) {
+    return 0;
+  }
+  return numeric;
+}
+
+function resolveReturnTo() {
+  const fullPath = String(route?.fullPath || "").trim();
+  if (fullPath.startsWith("/") && !fullPath.startsWith("//")) {
+    return fullPath;
+  }
+  const path = String(route?.path || "").trim();
+  if (path.startsWith("/") && !path.startsWith("//")) {
+    return path;
+  }
+  return "/";
+}
+
+function resolveReturnToHref() {
+  if (typeof window === "object" && window?.location?.href) {
+    return String(window.location.href || "").trim() || resolveReturnTo();
+  }
+  return resolveReturnTo();
+}
+
+function countPendingInvites(entries = []) {
+  if (!Array.isArray(entries)) {
+    return 0;
+  }
+
+  let total = 0;
+  for (const entry of entries) {
+    if (!entry || typeof entry !== "object") {
+      continue;
+    }
+    total += 1;
+  }
+  return total;
+}
+
+const authenticated = computed(() => placementContext.value?.auth?.authenticated === true);
+
+const bootstrapSummaryQuery = useQuery({
+  queryKey: ["local-main", "account", "invites-cue", "bootstrap"],
+  enabled: authenticated,
+  staleTime: 5_000,
+  refetchInterval: 15_000,
+  queryFn: async () => {
+    const response = await fetch("/api/bootstrap", {
+      method: "GET",
+      credentials: "include",
+      headers: {
+        accept: "application/json"
+      }
+    });
+    if (!response.ok) {
+      throw new Error(`Bootstrap request failed with status ${response.status}.`);
+    }
+
+    return response.json();
+  }
+});
+
+const placementPendingInvitesCount = computed(() =>
+  normalizePendingInvitesCount(placementContext.value?.pendingInvitesCount)
+);
+const bootstrapPendingInvitesCount = computed(() => {
+  const payload = bootstrapSummaryQuery.data.value;
+  const invitesEnabled = payload?.app?.features?.workspaceInvites === true;
+  if (!invitesEnabled) {
+    return 0;
+  }
+
+  return countPendingInvites(payload?.pendingInvites);
+});
+const pendingInvitesCount = computed(() =>
+  Math.max(placementPendingInvitesCount.value, bootstrapPendingInvitesCount.value)
+);
+
+const placementWorkspaceInvitesEnabled = computed(() => placementContext.value?.workspaceInvitesEnabled === true);
+const bootstrapWorkspaceInvitesEnabled = computed(() => {
+  const payload = bootstrapSummaryQuery.data.value;
+  return payload?.app?.features?.workspaceInvites === true;
+});
+const workspaceInvitesEnabled = computed(
+  () => placementWorkspaceInvitesEnabled.value || bootstrapWorkspaceInvitesEnabled.value
+);
+
+const isVisible = computed(() => {
+  return (
+    authenticated.value &&
+    workspaceInvitesEnabled.value &&
+    pendingInvitesCount.value > 0
+  );
+});
+
+const resolvedTo = computed(() => {
+  const hasAccountSurface = Boolean(resolveSurfaceDefinitionFromPlacementContext(placementContext.value, "account"));
+  const accountSettingsPath = hasAccountSurface
+    ? resolveSurfacePathFromPlacementContext(placementContext.value, "account", "/")
+    : "/account";
+  const accountSettingsNavigation = resolveSurfaceNavigationTargetFromPlacementContext(placementContext.value, {
+    path: accountSettingsPath,
+    surfaceId: "account"
+  });
+
+  const query = new URLSearchParams({
+    section: "invites",
+    returnTo: accountSettingsNavigation.sameOrigin ? resolveReturnTo() : resolveReturnToHref()
+  });
+  return appendQueryString(accountSettingsPath, query.toString());
+});
+
+const resolvedNavigationTarget = computed(() =>
+  resolveSurfaceNavigationTargetFromPlacementContext(placementContext.value, {
+    path: resolvedTo.value,
+    surfaceId: "account"
+  })
+);
+</script>
+
+<template>
+  <v-badge
+    v-if="isVisible"
+    color="error"
+    :content="pendingInvitesCount"
+    :model-value="pendingInvitesCount > 0"
+    bordered
+    offset-x="6"
+    offset-y="8"
+  >
+    <v-btn
+      :to="resolvedNavigationTarget.sameOrigin ? resolvedNavigationTarget.href : undefined"
+      :href="resolvedNavigationTarget.sameOrigin ? undefined : resolvedNavigationTarget.href"
+      variant="tonal"
+      color="warning"
+      :prepend-icon="mdiEmailAlertOutline"
+      size="small"
+      class="text-none"
+    >
+      Invites
+    </v-btn>
+  </v-badge>
+</template>

package/templates/src/components/WorkspaceNotFoundCard.vue

@@ -0,0 +1,33 @@
+<script setup>
+import { computed } from "vue";
+
+const props = defineProps({
+  surfaceLabel: {
+    type: String,
+    default: "Workspace"
+  },
+  message: {
+    type: String,
+    default: "Workspace is currently unavailable."
+  }
+});
+
+const normalizedSurfaceLabel = computed(() => String(props.surfaceLabel || "").trim() || "Workspace");
+const normalizedMessage = computed(() => String(props.message || "").trim() || "Workspace is currently unavailable.");
+</script>
+
+<template>
+  <v-card rounded="lg" elevation="1" border>
+    <v-card-item>
+      <template #prepend>
+        <v-icon icon="mdi-alert-circle-outline" 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>
+</template>

package/templates/src/components/account/settings/AccountSettingsClientElement.vue

@@ -0,0 +1,153 @@
+<script setup>
+import { computed } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { useAccountSettingsRuntime } from "@jskit-ai/users-web/client/composables/useAccountSettingsRuntime";
+import AccountSettingsProfileSection from "./AccountSettingsProfileSection.vue";
+import AccountSettingsPreferencesSection from "./AccountSettingsPreferencesSection.vue";
+import AccountSettingsNotificationsSection from "./AccountSettingsNotificationsSection.vue";
+import AccountSettingsInvitesSection from "./AccountSettingsInvitesSection.vue";
+
+const runtime = useAccountSettingsRuntime();
+const route = useRoute();
+const router = useRouter();
+
+const sections = Object.freeze([
+  { title: "Profile", value: "profile" },
+  { title: "Preferences", value: "preferences" },
+  { title: "Notifications", value: "notifications" },
+  { title: "Invites", value: "invites" }
+]);
+const sectionValues = new Set(sections.map((section) => section.value));
+
+function normalizeSection(value) {
+  const source = Array.isArray(value) ? value[0] : value;
+  const normalized = String(source || "").trim().toLowerCase();
+  if (!sectionValues.has(normalized)) {
+    return "profile";
+  }
+  return normalized;
+}
+
+function readRouteSection() {
+  return normalizeSection(route?.query?.section);
+}
+
+const activeTab = computed({
+  get() {
+    return readRouteSection();
+  },
+  set(nextValue) {
+    const normalizedSection = normalizeSection(nextValue);
+    const currentSection = readRouteSection();
+    if (normalizedSection === currentSection) {
+      return;
+    }
+
+    const nextQuery = {
+      ...route.query
+    };
+    if (normalizedSection === "profile") {
+      delete nextQuery.section;
+    } else {
+      nextQuery.section = normalizedSection;
+    }
+
+    void router.replace({
+      query: nextQuery
+    });
+  }
+});
+</script>
+
+<template>
+  <section class="settings-view py-2 py-md-4">
+    <v-card class="panel-card" rounded="lg" elevation="1" border>
+      <v-card-item>
+        <v-card-title class="panel-title">Account settings</v-card-title>
+        <v-card-subtitle>Global profile, preferences, notifications, and invitation controls.</v-card-subtitle>
+        <template #append>
+          <v-btn
+            variant="text"
+            color="secondary"
+            :to="runtime.backNavigationTarget.value.sameOrigin ? runtime.backNavigationTarget.value.href : undefined"
+            :href="runtime.backNavigationTarget.value.sameOrigin ? undefined : runtime.backNavigationTarget.value.href"
+          >
+            Back
+          </v-btn>
+        </template>
+      </v-card-item>
+      <v-divider />
+
+      <v-card-text class="pt-4">
+        <template v-if="runtime.loadingSettings.value">
+          <v-skeleton-loader type="text@2, list-item-two-line@4" class="mb-4" />
+          <v-skeleton-loader type="text@2, paragraph, button" />
+        </template>
+        <template v-else>
+          <v-progress-linear v-if="runtime.refreshingSettings.value" indeterminate class="mb-4" />
+          <v-row class="settings-layout" no-gutters>
+            <v-col cols="12" md="3" lg="2" class="pr-md-4 mb-4 mb-md-0">
+              <v-list nav density="comfortable" class="settings-section-list rounded-lg">
+                <v-list-item
+                  v-for="section in sections"
+                  :key="section.value"
+                  :title="section.title"
+                  :active="activeTab === section.value"
+                  rounded="lg"
+                  @click="activeTab = section.value"
+                />
+              </v-list>
+            </v-col>
+
+            <v-col cols="12" md="9" lg="10">
+              <v-window v-model="activeTab" :touch="false" class="settings-sections-window">
+                <v-window-item value="profile">
+                  <AccountSettingsProfileSection :runtime="runtime" />
+                </v-window-item>
+
+                <v-window-item value="preferences">
+                  <AccountSettingsPreferencesSection :runtime="runtime" />
+                </v-window-item>
+
+                <v-window-item value="notifications">
+                  <AccountSettingsNotificationsSection :runtime="runtime" />
+                </v-window-item>
+
+                <v-window-item value="invites">
+                  <AccountSettingsInvitesSection :runtime="runtime" />
+                </v-window-item>
+              </v-window>
+            </v-col>
+          </v-row>
+        </template>
+      </v-card-text>
+    </v-card>
+  </section>
+</template>
+
+<style scoped>
+.panel-card {
+  background-color: rgb(var(--v-theme-surface));
+}
+
+.panel-title {
+  font-size: 1rem;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+}
+
+.settings-section-list {
+  border: 1px solid rgba(var(--v-theme-outline), 0.35);
+}
+
+:deep(.settings-section-list .v-list-item--active) {
+  background-color: rgba(var(--v-theme-primary), 0.14);
+}
+
+:deep(.settings-sections-window .v-window-x-transition-enter-active),
+:deep(.settings-sections-window .v-window-x-transition-leave-active),
+:deep(.settings-sections-window .v-window-x-reverse-transition-enter-active),
+:deep(.settings-sections-window .v-window-x-reverse-transition-leave-active) {
+  transition: none !important;
+}
+</style>

package/templates/src/components/account/settings/AccountSettingsInvitesSection.vue

@@ -0,0 +1,77 @@
+<script setup>
+const props = defineProps({
+  runtime: {
+    type: Object,
+    required: true
+  }
+});
+
+const invites = props.runtime.invites;
+</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>
+      <template v-if="invites.isLoading.value">
+        <v-skeleton-loader type="text@2, list-item-two-line@3" />
+      </template>
+
+      <template v-else-if="invites.items.value.length < 1">
+        <v-progress-linear v-if="invites.isRefetching.value" indeterminate class="mb-4" />
+        <p class="text-body-2 text-medium-emphasis mb-0">No pending invitations.</p>
+      </template>
+
+      <template v-else>
+        <v-progress-linear v-if="invites.isRefetching.value" indeterminate class="mb-4" />
+        <v-list density="comfortable" class="pa-0">
+          <v-list-item
+            v-for="invite in invites.items.value"
+            :key="invite.id"
+            :title="invite.workspaceName"
+            :subtitle="`/${invite.workspaceSlug} • role: ${invite.roleId}`"
+            class="px-0"
+          >
+            <template #prepend>
+              <v-avatar color="warning" size="28">
+                <span class="text-caption font-weight-bold">?</span>
+              </v-avatar>
+            </template>
+            <template #append>
+              <div class="d-flex ga-2">
+                <v-btn
+                  size="small"
+                  variant="text"
+                  color="error"
+                  :loading="invites.action.value.token === invite.token && invites.action.value.decision === 'refuse'"
+                  :disabled="
+                    invites.isRefetching.value || (invites.isResolving.value && invites.action.value.token !== invite.token)
+                  "
+                  @click="invites.refuse(invite)"
+                >
+                  Refuse
+                </v-btn>
+                <v-btn
+                  size="small"
+                  variant="tonal"
+                  color="primary"
+                  :loading="invites.action.value.token === invite.token && invites.action.value.decision === 'accept'"
+                  :disabled="
+                    invites.isRefetching.value || (invites.isResolving.value && invites.action.value.token !== invite.token)
+                  "
+                  @click="invites.accept(invite)"
+                >
+                  Join
+                </v-btn>
+              </div>
+            </template>
+          </v-list-item>
+        </v-list>
+      </template>
+    </v-card-text>
+  </v-card>
+</template>

package/templates/src/components/account/settings/AccountSettingsNotificationsSection.vue

@@ -0,0 +1,55 @@
+<script setup>
+const props = defineProps({
+  runtime: {
+    type: Object,
+    required: true
+  }
+});
+
+const notifications = props.runtime.notifications;
+</script>
+
+<template>
+  <v-card rounded="lg" elevation="0" border>
+    <v-card-item>
+      <v-card-title class="text-subtitle-1">Notifications</v-card-title>
+    </v-card-item>
+    <v-divider />
+    <v-card-text>
+      <v-form @submit.prevent="notifications.submit" novalidate>
+        <v-switch
+          v-model="notifications.form.productUpdates"
+          label="Product updates"
+          color="primary"
+          hide-details
+          :disabled="notifications.isSaving.value || notifications.isRefreshing.value"
+          class="mb-2"
+        />
+        <v-switch
+          v-model="notifications.form.accountActivity"
+          label="Account activity alerts"
+          color="primary"
+          hide-details
+          :disabled="notifications.isSaving.value || notifications.isRefreshing.value"
+          class="mb-2"
+        />
+        <v-switch
+          v-model="notifications.form.securityAlerts"
+          label="Security alerts (required)"
+          color="primary"
+          hide-details
+          disabled
+          class="mb-4"
+        />
+        <v-btn
+          type="submit"
+          color="primary"
+          :loading="notifications.isSaving.value"
+          :disabled="notifications.isRefreshing.value"
+        >
+          Save notification settings
+        </v-btn>
+      </v-form>
+    </v-card-text>
+  </v-card>
+</template>

package/templates/src/components/account/settings/AccountSettingsPreferencesSection.vue

@@ -0,0 +1,125 @@
+<script setup>
+const props = defineProps({
+  runtime: {
+    type: Object,
+    required: true
+  }
+});
+
+const preferences = props.runtime.preferences;
+</script>
+
+<template>
+  <v-card rounded="lg" elevation="0" border>
+    <v-card-item>
+      <v-card-title class="text-subtitle-1">Preferences</v-card-title>
+    </v-card-item>
+    <v-divider />
+    <v-card-text>
+      <v-form @submit.prevent="preferences.submit" novalidate>
+        <v-row>
+          <v-col cols="12" md="4">
+            <v-select
+              v-model="preferences.form.theme"
+              label="Theme"
+              :items="preferences.options.theme"
+              item-title="title"
+              item-value="value"
+              variant="outlined"
+              density="comfortable"
+              :disabled="preferences.isSaving.value || preferences.isRefreshing.value"
+              :error-messages="preferences.fieldErrors.theme ? [preferences.fieldErrors.theme] : []"
+            />
+          </v-col>
+
+          <v-col cols="12" md="4">
+            <v-select
+              v-model="preferences.form.locale"
+              label="Language / locale"
+              :items="preferences.options.locale"
+              item-title="title"
+              item-value="value"
+              variant="outlined"
+              density="comfortable"
+              :disabled="preferences.isSaving.value || preferences.isRefreshing.value"
+              :error-messages="preferences.fieldErrors.locale ? [preferences.fieldErrors.locale] : []"
+            />
+          </v-col>
+
+          <v-col cols="12" md="4">
+            <v-select
+              v-model="preferences.form.timeZone"
+              label="Time zone"
+              :items="preferences.options.timeZone"
+              variant="outlined"
+              density="comfortable"
+              :disabled="preferences.isSaving.value || preferences.isRefreshing.value"
+              :error-messages="preferences.fieldErrors.timeZone ? [preferences.fieldErrors.timeZone] : []"
+            />
+          </v-col>
+
+          <v-col cols="12" md="4">
+            <v-select
+              v-model="preferences.form.dateFormat"
+              label="Date format"
+              :items="preferences.options.dateFormat"
+              item-title="title"
+              item-value="value"
+              variant="outlined"
+              density="comfortable"
+              :disabled="preferences.isSaving.value || preferences.isRefreshing.value"
+              :error-messages="preferences.fieldErrors.dateFormat ? [preferences.fieldErrors.dateFormat] : []"
+            />
+          </v-col>
+
+          <v-col cols="12" md="4">
+            <v-select
+              v-model="preferences.form.numberFormat"
+              label="Number format"
+              :items="preferences.options.numberFormat"
+              item-title="title"
+              item-value="value"
+              variant="outlined"
+              density="comfortable"
+              :disabled="preferences.isSaving.value || preferences.isRefreshing.value"
+              :error-messages="preferences.fieldErrors.numberFormat ? [preferences.fieldErrors.numberFormat] : []"
+            />
+          </v-col>
+
+          <v-col cols="12" md="4">
+            <v-select
+              v-model="preferences.form.currencyCode"
+              label="Currency"
+              :items="preferences.options.currency"
+              variant="outlined"
+              density="comfortable"
+              :disabled="preferences.isSaving.value || preferences.isRefreshing.value"
+              :error-messages="preferences.fieldErrors.currencyCode ? [preferences.fieldErrors.currencyCode] : []"
+            />
+          </v-col>
+
+          <v-col cols="12" md="3">
+            <v-select
+              v-model.number="preferences.form.avatarSize"
+              label="Avatar size"
+              :items="preferences.options.avatarSize"
+              variant="outlined"
+              density="comfortable"
+              :disabled="preferences.isSaving.value || preferences.isRefreshing.value"
+              :error-messages="preferences.fieldErrors.avatarSize ? [preferences.fieldErrors.avatarSize] : []"
+            />
+          </v-col>
+        </v-row>
+
+        <v-btn
+          type="submit"
+          color="primary"
+          :loading="preferences.isSaving.value"
+          :disabled="preferences.isRefreshing.value"
+        >
+          Save preferences
+        </v-btn>
+      </v-form>
+    </v-card-text>
+  </v-card>
+</template>