@jskit-ai/users-web 0.1.4

package/src/client/components/UsersShellMenuLinkItem.vue

@@ -0,0 +1,140 @@
+<script setup>
+import { computed } from "vue";
+import { useRoute } from "vue-router";
+import { appendQueryString } from "@jskit-ai/kernel/shared/support";
+import { isExternalLinkTarget, splitPathQueryHash } from "@jskit-ai/kernel/shared/support/linkPath";
+import {
+  useWebPlacementContext,
+  resolveSurfaceNavigationTargetFromPlacementContext
+} from "@jskit-ai/shell-web/client/placement";
+import { resolveAccountSettingsPathFromPlacementContext } from "../lib/workspaceSurfacePaths.js";
+import { resolveMenuLinkIcon } from "../lib/menuIcons.js";
+
+const props = defineProps({
+  label: {
+    type: String,
+    default: ""
+  },
+  to: {
+    type: String,
+    default: ""
+  },
+  icon: {
+    type: String,
+    default: ""
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const route = useRoute();
+const { context: placementContext } = useWebPlacementContext();
+
+function resolveFallbackReturnTo() {
+  if (typeof window !== "object" || !window || !window.location) {
+    return "/";
+  }
+  const pathname = String(window.location.pathname || "").trim() || "/";
+  const search = String(window.location.search || "").trim();
+  const hash = String(window.location.hash || "").trim();
+  return `${pathname}${search}${hash}`;
+}
+
+function resolveFallbackReturnToHref() {
+  if (typeof window !== "object" || !window || !window.location) {
+    return "/";
+  }
+  return String(window.location.href || "").trim() || resolveFallbackReturnTo();
+}
+
+function resolvePathnameFromLinkTarget(target = "") {
+  const normalizedTarget = String(target || "").trim();
+  if (!normalizedTarget) {
+    return "";
+  }
+
+  if (isExternalLinkTarget(normalizedTarget)) {
+    try {
+      const parsed = new URL(normalizedTarget);
+      return String(parsed.pathname || "").trim();
+    } catch {
+      return "";
+    }
+  }
+
+  return splitPathQueryHash(normalizedTarget).pathname;
+}
+
+const accountSettingsPathname = computed(() => {
+  const settingsPath = resolveAccountSettingsPathFromPlacementContext(placementContext.value);
+  return resolvePathnameFromLinkTarget(settingsPath);
+});
+
+const resolvedTo = computed(() => {
+  const target = String(props.to || "").trim();
+  if (!target) {
+    return "";
+  }
+
+  const targetPathname = resolvePathnameFromLinkTarget(target);
+  if (!targetPathname || targetPathname !== accountSettingsPathname.value) {
+    return target;
+  }
+  if (target.includes("returnTo=")) {
+    return target;
+  }
+
+  const accountSettingsTarget = resolveSurfaceNavigationTargetFromPlacementContext(placementContext.value, {
+    path: target,
+    surfaceId: "account"
+  });
+  const routeFullPath = String(route?.fullPath || "").trim();
+  const routePath = String(route?.path || "").trim();
+  const returnTo = accountSettingsTarget.sameOrigin
+    ? routeFullPath || routePath || resolveFallbackReturnTo()
+    : resolveFallbackReturnToHref();
+  const queryParams = new URLSearchParams({
+    returnTo
+  });
+
+  return appendQueryString(target, queryParams.toString());
+});
+
+const resolvedNavigationTarget = computed(() => {
+  const target = String(resolvedTo.value || "").trim();
+  if (!target) {
+    return {
+      href: "",
+      sameOrigin: true
+    };
+  }
+
+  const navigationTarget = resolveSurfaceNavigationTargetFromPlacementContext(placementContext.value, {
+    path: target
+  });
+  return {
+    href: navigationTarget.href,
+    sameOrigin: navigationTarget.sameOrigin
+  };
+});
+
+const resolvedIcon = computed(() =>
+  resolveMenuLinkIcon({
+    icon: props.icon,
+    label: props.label,
+    to: resolvedTo.value
+  })
+);
+</script>
+
+<template>
+  <v-list-item
+    :title="props.label"
+    :to="resolvedNavigationTarget.sameOrigin ? resolvedNavigationTarget.href : undefined"
+    :href="resolvedNavigationTarget.sameOrigin ? undefined : resolvedNavigationTarget.href"
+    :prepend-icon="resolvedIcon || undefined"
+    :disabled="props.disabled"
+  />
+</template>

package/src/client/components/UsersSurfaceAwareMenuLinkItem.vue

@@ -0,0 +1,87 @@
+<script setup>
+import { computed } from "vue";
+import { useWebPlacementContext } from "@jskit-ai/shell-web/client/placement";
+import { usePaths } from "../composables/usePaths.js";
+import { surfaceRequiresWorkspaceFromPlacementContext } from "../lib/workspaceSurfaceContext.js";
+import { resolveMenuLinkIcon } from "../lib/menuIcons.js";
+
+const props = defineProps({
+  label: {
+    type: String,
+    default: ""
+  },
+  to: {
+    type: String,
+    default: ""
+  },
+  icon: {
+    type: String,
+    default: ""
+  },
+  surface: {
+    type: String,
+    default: ""
+  },
+  workspaceSuffix: {
+    type: String,
+    default: "/"
+  },
+  nonWorkspaceSuffix: {
+    type: String,
+    default: "/"
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const paths = usePaths();
+const { context: placementContext } = useWebPlacementContext();
+
+const targetSurfaceId = computed(() => {
+  const explicitSurface = String(props.surface || "").trim().toLowerCase();
+  if (explicitSurface && explicitSurface !== "*") {
+    return explicitSurface;
+  }
+
+  return String(paths.currentSurfaceId.value || "").trim().toLowerCase();
+});
+
+const resolvedTo = computed(() => {
+  const explicitTo = String(props.to || "").trim();
+  if (explicitTo) {
+    return explicitTo;
+  }
+
+  const workspaceRequired = surfaceRequiresWorkspaceFromPlacementContext(
+    placementContext.value,
+    targetSurfaceId.value
+  );
+  const suffix = workspaceRequired ? props.workspaceSuffix : props.nonWorkspaceSuffix;
+  const normalizedSuffix = String(suffix || "/").trim() || "/";
+
+  return paths.page(normalizedSuffix, {
+    surface: targetSurfaceId.value,
+    mode: "auto"
+  });
+});
+
+const resolvedIcon = computed(() =>
+  resolveMenuLinkIcon({
+    icon: props.icon,
+    label: props.label,
+    to: resolvedTo.value
+  })
+);
+</script>
+
+<template>
+  <v-list-item
+    v-if="resolvedTo"
+    :title="props.label"
+    :to="resolvedTo"
+    :prepend-icon="resolvedIcon || undefined"
+    :disabled="props.disabled"
+  />
+</template>

package/src/client/components/UsersWorkspaceMembersMenuItem.vue

@@ -0,0 +1,36 @@
+<script setup>
+import { mdiAccountGroupOutline } from "@mdi/js";
+import UsersWorkspacePermissionMenuItem from "./UsersWorkspacePermissionMenuItem.vue";
+
+const props = defineProps({
+  label: {
+    type: String,
+    default: "Members"
+  },
+  to: {
+    type: String,
+    default: ""
+  },
+  icon: {
+    type: String,
+    default: mdiAccountGroupOutline
+  },
+  surface: {
+    type: String,
+    default: "*"
+  }
+});
+
+const MEMBERS_MENU_PERMISSIONS = Object.freeze(["workspace.members.view", "workspace.members.manage"]);
+</script>
+
+<template>
+  <UsersWorkspacePermissionMenuItem
+    :label="props.label"
+    :to="props.to"
+    :icon="props.icon"
+    :surface="props.surface"
+    path="/members"
+    :permissions="MEMBERS_MENU_PERMISSIONS"
+  />
+</template>

package/src/client/components/UsersWorkspacePermissionMenuItem.vue

@@ -0,0 +1,90 @@
+<script setup>
+import { computed } from "vue";
+import { useSurfaceRouteContext } from "../composables/useSurfaceRouteContext.js";
+import { hasPermission, normalizePermissionList } from "../lib/permissions.js";
+import { usePaths } from "../composables/usePaths.js";
+
+const props = defineProps({
+  label: {
+    type: String,
+    default: ""
+  },
+  to: {
+    type: String,
+    default: ""
+  },
+  icon: {
+    type: String,
+    default: ""
+  },
+  surface: {
+    type: String,
+    default: "*"
+  },
+  path: {
+    type: String,
+    default: "/"
+  },
+  permissions: {
+    type: [Array, String],
+    default: () => []
+  }
+});
+
+const { placementContext, currentSurfaceId } = useSurfaceRouteContext();
+const paths = usePaths();
+
+function normalizeRequiredPermissions(value) {
+  if (Array.isArray(value)) {
+    return value
+      .map((entry) => String(entry || "").trim())
+      .filter(Boolean);
+  }
+
+  const normalized = String(value || "").trim();
+  if (!normalized) {
+    return [];
+  }
+
+  return [normalized];
+}
+
+const requiredPermissions = computed(() => normalizeRequiredPermissions(props.permissions));
+
+const canView = computed(() => {
+  if (requiredPermissions.value.length < 1) {
+    return true;
+  }
+
+  const permissions = normalizePermissionList(placementContext.value?.permissions);
+  return requiredPermissions.value.some((permission) => hasPermission(permissions, permission));
+});
+
+const resolvedTo = computed(() => {
+  const explicitTo = String(props.to || "").trim();
+  if (explicitTo) {
+    return explicitTo;
+  }
+
+  const explicitSurface = String(props.surface || "").trim().toLowerCase();
+  const targetSurfaceId =
+    explicitSurface && explicitSurface !== "*"
+      ? explicitSurface
+      : String(currentSurfaceId.value || "").trim().toLowerCase();
+  const targetPath = String(props.path || "/").trim() || "/";
+
+  return paths.page(targetPath, {
+    surface: targetSurfaceId,
+    mode: "auto"
+  });
+});
+</script>
+
+<template>
+  <v-list-item
+    v-if="canView && resolvedTo"
+    :title="props.label"
+    :to="resolvedTo"
+    :prepend-icon="props.icon || undefined"
+  />
+</template>

package/src/client/components/UsersWorkspaceSelector.vue

@@ -0,0 +1,237 @@
+<script setup>
+import { computed, ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import {
+  useWebPlacementContext,
+  resolveSurfaceIdFromPlacementPathname,
+  resolveSurfaceNavigationTargetFromPlacementContext
+} from "@jskit-ai/shell-web/client/placement";
+import { TENANCY_MODE_NONE } from "@jskit-ai/users-core/shared/tenancyProfile";
+import { mdiBriefcaseOutline } from "@mdi/js";
+import { findWorkspaceBySlug, normalizeWorkspaceEntry, normalizeWorkspaceList } from "../lib/bootstrap.js";
+import { usePaths } from "../composables/usePaths.js";
+import {
+  resolveSurfaceSwitchTargetsFromPlacementContext,
+  surfaceRequiresWorkspaceFromPlacementContext
+} from "../lib/workspaceSurfaceContext.js";
+import {
+  resolveWorkspaceSurfaceIdFromPlacementPathname,
+  extractWorkspaceSlugFromSurfacePathname
+} from "../lib/workspaceSurfacePaths.js";
+
+const props = defineProps({
+  surface: {
+    type: String,
+    default: "*"
+  },
+  allowOnNonWorkspaceSurface: {
+    type: Boolean,
+    default: false
+  },
+  targetSurfaceId: {
+    type: String,
+    default: ""
+  }
+});
+
+const navigatingToWorkspace = ref("");
+const errorMessage = ref("");
+const route = useRoute();
+const router = useRouter();
+const { context: placementContext } = useWebPlacementContext();
+const paths = usePaths();
+
+function resolveBrowserPath() {
+  if (typeof window !== "object" || !window || !window.location) {
+    return "/";
+  }
+  const pathname = String(window.location.pathname || "").trim();
+  return pathname || "/";
+}
+
+const currentPath = computed(() => {
+  const routePath = String(route?.path || "").trim();
+  if (routePath) {
+    return routePath;
+  }
+  return resolveBrowserPath();
+});
+
+const currentSurfaceId = computed(() => {
+  return (
+    resolveWorkspaceSurfaceIdFromPlacementPathname(placementContext.value, currentPath.value) ||
+    resolveSurfaceIdFromPlacementPathname(placementContext.value, currentPath.value) ||
+    props.surface
+  );
+});
+
+const targetSurfaceId = computed(() => String(props.targetSurfaceId || "").trim().toLowerCase());
+const workspaceSwitchSurfaceId = computed(() => {
+  const normalizedCurrentSurfaceId = String(currentSurfaceId.value || "").trim().toLowerCase();
+  if (
+    normalizedCurrentSurfaceId &&
+    surfaceRequiresWorkspaceFromPlacementContext(placementContext.value, normalizedCurrentSurfaceId)
+  ) {
+    return normalizedCurrentSurfaceId;
+  }
+
+  if (targetSurfaceId.value) {
+    return targetSurfaceId.value;
+  }
+
+  const targets = resolveSurfaceSwitchTargetsFromPlacementContext(placementContext.value, normalizedCurrentSurfaceId);
+  return String(targets.workspaceSurfaceId || "").trim().toLowerCase();
+});
+
+const routeWorkspaceSlug = computed(() => {
+  return String(
+    extractWorkspaceSlugFromSurfacePathname(
+      placementContext.value,
+      currentSurfaceId.value,
+      currentPath.value
+    ) || ""
+  ).trim();
+});
+
+const authenticated = computed(() => Boolean(placementContext.value?.auth?.authenticated));
+const workspaces = computed(() => normalizeWorkspaceList(placementContext.value?.workspaces));
+const activeWorkspace = computed(() => {
+  const workspaceFromRoute = findWorkspaceBySlug(workspaces.value, routeWorkspaceSlug.value);
+  if (workspaceFromRoute) {
+    return workspaceFromRoute;
+  }
+
+  return normalizeWorkspaceEntry(placementContext.value?.workspace);
+});
+
+async function navigateToWorkspace(slug) {
+  const normalizedSlug = String(slug || "").trim();
+  if (!normalizedSlug) {
+    return;
+  }
+  if (navigatingToWorkspace.value) {
+    return;
+  }
+  if (!workspaceSwitchSurfaceId.value) {
+    errorMessage.value = "Workspace selector target surface is not configured.";
+    return;
+  }
+  if (!workspaceSwitchSurfaceRequiresWorkspace.value) {
+    errorMessage.value = "Workspace selector target surface must require a workspace.";
+    return;
+  }
+
+  const targetPath = paths.page("/", {
+    surface: workspaceSwitchSurfaceId.value,
+    workspaceSlug: normalizedSlug,
+    mode: "workspace"
+  });
+  if (!targetPath) {
+    errorMessage.value = "Workspace selector target surface is not configured.";
+    return;
+  }
+  const navigationTarget = resolveSurfaceNavigationTargetFromPlacementContext(placementContext.value, {
+    path: targetPath,
+    surfaceId: workspaceSwitchSurfaceId.value
+  });
+
+  navigatingToWorkspace.value = normalizedSlug;
+  errorMessage.value = "";
+
+  try {
+    if (currentPath.value !== targetPath || !navigationTarget.sameOrigin) {
+      if (navigationTarget.sameOrigin && router && typeof router.push === "function") {
+        await router.push(navigationTarget.href);
+      } else if (typeof window === "object" && window && window.location) {
+        window.location.assign(navigationTarget.href);
+        return;
+      } else {
+        throw new Error("Router is unavailable.");
+      }
+    }
+  } catch (error) {
+    const message = String(error?.message || "Unable to switch workspace.").trim();
+    errorMessage.value = message;
+  } finally {
+    navigatingToWorkspace.value = "";
+  }
+}
+
+const tenancyMode = computed(() => String(placementContext.value?.surfaceConfig?.tenancyMode || "").trim().toLowerCase());
+const tenancyAllowsWorkspaceRouting = computed(() => tenancyMode.value !== TENANCY_MODE_NONE);
+
+const surfaceRequiresWorkspace = computed(() =>
+  surfaceRequiresWorkspaceFromPlacementContext(placementContext.value, currentSurfaceId.value)
+);
+const workspaceSwitchSurfaceRequiresWorkspace = computed(() =>
+  surfaceRequiresWorkspaceFromPlacementContext(placementContext.value, workspaceSwitchSurfaceId.value)
+);
+const selectorSurfaceAllowed = computed(() => {
+  if (surfaceRequiresWorkspace.value) {
+    return true;
+  }
+  return props.allowOnNonWorkspaceSurface === true;
+});
+
+const isVisible = computed(
+  () =>
+    Boolean(workspaceSwitchSurfaceId.value) &&
+    workspaceSwitchSurfaceRequiresWorkspace.value &&
+    selectorSurfaceAllowed.value &&
+    tenancyAllowsWorkspaceRouting.value &&
+    authenticated.value &&
+    workspaces.value.length > 0
+);
+
+const activeWorkspaceLabel = computed(() => {
+  const active = activeWorkspace.value || null;
+  if (active?.name) {
+    return active.name;
+  }
+  return "Workspace";
+});
+
+</script>
+
+<template>
+  <v-menu v-if="isVisible" location="bottom start" offset="8">
+    <template #activator="{ props: activatorProps }">
+      <v-btn
+        v-bind="activatorProps"
+        variant="text"
+        class="text-none"
+        :prepend-icon="mdiBriefcaseOutline"
+      >
+        {{ activeWorkspaceLabel }}
+      </v-btn>
+    </template>
+
+    <v-list density="comfortable" min-width="280">
+      <v-list-subheader>Workspaces</v-list-subheader>
+      <v-list-item
+        v-for="workspace in workspaces"
+        :key="workspace.id"
+        :title="workspace.name"
+        :subtitle="`/${workspace.slug}`"
+        :active="workspace.slug === activeWorkspace?.slug"
+        :disabled="Boolean(navigatingToWorkspace)"
+        @click="navigateToWorkspace(workspace.slug)"
+      >
+        <template #prepend>
+          <v-avatar size="24" color="primary" variant="tonal">
+            <span class="text-caption">{{ String(workspace.name || "W").slice(0, 1).toUpperCase() }}</span>
+          </v-avatar>
+        </template>
+        <template #append>
+          <v-progress-circular
+            v-if="navigatingToWorkspace === workspace.slug"
+            indeterminate
+            size="16"
+            width="2"
+          />
+        </template>
+      </v-list-item>
+      <v-list-item v-if="errorMessage" :subtitle="errorMessage" />
+    </v-list>
+  </v-menu>
+</template>

package/src/client/components/UsersWorkspaceSettingsMenuItem.vue

@@ -0,0 +1,39 @@
+<script setup>
+import { mdiCogOutline } from "@mdi/js";
+import UsersWorkspacePermissionMenuItem from "./UsersWorkspacePermissionMenuItem.vue";
+
+const props = defineProps({
+  label: {
+    type: String,
+    default: "Workspace settings"
+  },
+  to: {
+    type: String,
+    default: ""
+  },
+  icon: {
+    type: String,
+    default: mdiCogOutline
+  },
+  surface: {
+    type: String,
+    default: "*"
+  }
+});
+
+const WORKSPACE_SETTINGS_MENU_PERMISSIONS = Object.freeze([
+  "workspace.settings.view",
+  "workspace.settings.update"
+]);
+</script>
+
+<template>
+  <UsersWorkspacePermissionMenuItem
+    :label="props.label"
+    :to="props.to"
+    :icon="props.icon"
+    :surface="props.surface"
+    path="/workspace/settings"
+    :permissions="WORKSPACE_SETTINGS_MENU_PERMISSIONS"
+  />
+</template>

package/src/client/components/UsersWorkspaceToolsWidget.vue

@@ -0,0 +1,23 @@
+<script setup>
+import ShellOutlet from "@jskit-ai/shell-web/client/components/ShellOutlet";
+import { mdiCogOutline } from "@mdi/js";
+</script>
+
+<template>
+  <v-menu location="bottom end" offset="10" eager>
+    <template #activator="{ props: activatorProps }">
+      <v-btn
+        v-bind="activatorProps"
+        icon
+        variant="text"
+        aria-label="Workspace tools"
+      >
+        <v-icon :icon="mdiCogOutline" />
+      </v-btn>
+    </template>
+
+    <v-list min-width="220" density="comfortable" class="py-1">
+      <ShellOutlet host="workspace-tools" position="primary-menu" />
+    </v-list>
+  </v-menu>
+</template>