@flowdular/sdk 0.1.0

package/packages/client/src/shell/MobileHeader.tsrx

@@ -0,0 +1,24 @@
+import { applicationPath } from '../routing.ts';
+import { BrandMark, Icon } from '@flowdular/sdk/ui';
+import { t } from '../i18n/runtime.ts';
+
+export function MobileHeader(props: { onToggle: () => void }) @{
+	<header class="mobile-header">
+		<a
+			class="mobile-header__brand"
+			href={applicationPath()}
+			aria-label={t('shell.brand.home')}
+		>
+			<BrandMark size={22} />
+			Flowdular
+		</a>
+		<button
+			class="ui-btn ui-btn--secondary ui-btn--icon"
+			type="button"
+			aria-label={t('shell.nav.toggle')}
+			onClick={props.onToggle}
+		>
+			<Icon name="panel-left" size={16} />
+		</button>
+	</header>
+}

package/packages/client/src/shell/OrganizationSwitcher.tsrx

@@ -0,0 +1,100 @@
+import { useEffect, useMemo } from 'octane';
+import { Avatar, Icon } from '@flowdular/sdk/ui';
+import { useValue } from 'segment-state';
+import { cell, createStore } from 'segment-state';
+import { t } from '../i18n/runtime.ts';
+import type { ShellIdentity } from './types.ts';
+
+export interface OrganizationSwitcherProps {
+	identity: ShellIdentity;
+	busy: boolean;
+	error: string;
+	onSelect: (tenantId: string) => void;
+}
+
+export function OrganizationSwitcher(props: OrganizationSwitcherProps) @{
+	const dropdown = useMemo(() => createStore({ open: cell(false) }), []);
+	const [open, setOpen] = useValue(dropdown.state.open);
+	const activeTenant = props.identity.tenants.find(
+		(tenant) => tenant.tenantId === props.identity.tenantId,
+	);
+	const activeTenantName =
+		activeTenant?.name ?? t('shell.workspace.fallbackName');
+	const activeTenantRole = activeTenant?.role ?? props.identity.role;
+	useEffect(() => {
+		const onKeyDown = (event: KeyboardEvent) => {
+			if (event.key === 'Escape') setOpen(false);
+		};
+		window.addEventListener('keydown', onKeyDown);
+		return () => window.removeEventListener('keydown', onKeyDown);
+	}, [setOpen]);
+	<div class="org-switcher">
+		<button
+			class="org-switcher__control"
+			type="button"
+			aria-haspopup="listbox"
+			aria-expanded={open}
+			disabled={props.busy}
+			onClick={() => setOpen((current) => !current)}
+		>
+			<Avatar name={activeTenantName} square />
+			<span class="org-switcher__copy">
+				<b>{activeTenantName}</b>
+				<small>{t(
+					props.identity.tenants.length === 1
+						? 'shell.org.summary.one'
+						: 'shell.org.summary.other',
+					{ role: activeTenantRole, count: props.identity.tenants.length },
+				)}</small>
+			</span>
+			<Icon name="chevrons-up-down" size={16} />
+		</button>
+		@if (open) {
+			<>
+				<button
+					class="menu-dismiss"
+					type="button"
+					aria-label={t('shell.org.close')}
+					onClick={() => setOpen(false)}
+				></button>
+				<div
+					class="ui-menu org-switcher__menu"
+					role="listbox"
+					aria-label={t('shell.org.available')}
+				>
+					<div class="ui-menu__label">{t('shell.org.switch')}</div>
+					@for (const tenant of props.identity.tenants; key tenant.tenantId) {
+						<button
+							class={[
+								'ui-menu__item',
+								tenant.tenantId === props.identity.tenantId &&
+									'ui-menu__item--active',
+							]}
+							type="button"
+							role="option"
+							aria-selected={tenant.tenantId === props.identity.tenantId}
+							onClick={() => {
+								setOpen(false);
+								if (tenant.tenantId !== props.identity.tenantId) {
+									props.onSelect(tenant.tenantId);
+								}
+							}}
+						>
+							<Avatar name={tenant.name} square />
+							<span class="ui-cell">
+								<b>{tenant.name}</b>
+								<small>{tenant.role}</small>
+							</span>
+							@if (tenant.tenantId === props.identity.tenantId) {
+								<Icon name="check" size={16} />
+							}
+						</button>
+					}
+				</div>
+			</>
+		}
+		@if (props.error) {
+			<small class="org-switcher__error" role="alert">{props.error}</small>
+		}
+	</div>
+}

package/packages/client/src/shell/OverviewCharts.tsrx

@@ -0,0 +1,167 @@
+import { useEffect, useMemo } from 'octane';
+import { Alert, Chart, EmptyState } from '@flowdular/sdk/ui';
+import { cell, createStore, useValue } from 'segment-state';
+import { activeLocale, t } from '../i18n/runtime.ts';
+
+/* The shell reads the overview over HTTP: system.core owns the endpoint and its
+   typed client, but the shell is a lower layer and cannot import a module, so
+   the wire shape is mirrored here at the boundary. */
+interface ActivityPoint {
+	readonly date: string;
+	readonly count: number;
+}
+
+interface ModulePoint {
+	readonly id: string;
+	readonly name: string;
+	readonly permissions: number;
+}
+
+interface Overview {
+	readonly enabledModuleCount: number;
+	readonly moduleCount: number;
+	readonly activity: readonly ActivityPoint[];
+	readonly modules: readonly ModulePoint[];
+}
+
+type OverviewStatus = 'loading' | 'ready' | 'error';
+
+async function loadOverview(): Promise<Overview> {
+	const response = await fetch('/api/system/overview', {
+		headers: { accept: 'application/json' },
+		credentials: 'same-origin',
+	});
+	const value = await response.json() as
+		Overview & {
+			readonly error?: { readonly message?: string };
+		};
+	if (!response.ok) {
+		throw new Error(value.error?.message ?? t('shell.overview.error'));
+	}
+	return value;
+}
+
+function formatDay(value: string): string {
+	const date = new Date(value + 'T00:00:00Z');
+	return new Intl.DateTimeFormat(activeLocale(), {
+		month: 'numeric',
+		day: 'numeric',
+		timeZone: 'UTC',
+	}).format(date);
+}
+
+export function OverviewCharts() @{
+	const store = useMemo(
+		() => createStore({
+			overview: cell<Overview | null>(null),
+			status: cell<OverviewStatus>('loading'),
+			error: '',
+		}),
+		[],
+	);
+	const [overview] = useValue(store.state.overview);
+	const [status] = useValue(store.state.status);
+	const [error] = useValue(store.state.error);
+
+	useEffect(() => {
+		let active = true;
+		void (async () => {
+			try {
+				const data = await loadOverview();
+				if (!active) return;
+				store.act((transaction) => {
+					transaction.set(store.state.overview, data);
+					transaction.set(store.state.status, 'ready');
+				}, 'shell/overview-loaded');
+			} catch (loadError) {
+				if (!active) return;
+				store.act((transaction) => {
+					transaction.set(
+						store.state.error,
+						loadError instanceof Error
+							? loadError.message
+							: t('shell.overview.error'),
+					);
+					transaction.set(store.state.status, 'error');
+				}, 'shell/overview-error');
+			}
+		})();
+		return () => {
+			active = false;
+		};
+	}, []);
+
+	const activitySeries = [
+		{ key: 'count', label: t('shell.overview.activity.series') },
+	];
+	const modulesSeries = [
+		{ key: 'permissions', label: t('shell.overview.modules.series') },
+	];
+	const activity = overview?.activity ?? [];
+	const activeDays = activity.filter((point) => point.count > 0).length;
+	const modules = overview?.modules ?? [];
+
+	<>
+		@if (status === 'error') {
+			<Alert>{error}</Alert>
+		} @else {
+			<div class="ui-grid-2">
+				<section class="ui-card">
+					<div class="ui-card__head">
+						<span class="ui-card__title">
+							{t('shell.overview.activity.title')}
+							<small>{t('shell.overview.activity.subtitle')}</small>
+						</span>
+					</div>
+					<div class="ui-card__body">
+						@if (status === 'loading') {
+							<p class="dash-chart__note">{t(
+								'shell.overview.activity.loading',
+							)}</p>
+						} @else if (activeDays <= 1) {
+							<EmptyState
+								icon="activity"
+								title={t('shell.overview.activity.empty.title')}
+							>{t('shell.overview.activity.empty.hint')}</EmptyState>
+						} @else {
+							<Chart
+								type="area"
+								xKey="date"
+								height={220}
+								title={t('shell.overview.activity.subtitle')}
+								data={activity}
+								series={activitySeries}
+								xTickFormatter={formatDay}
+							/>
+						}
+					</div>
+				</section>
+				<section class="ui-card">
+					<div class="ui-card__head">
+						<span class="ui-card__title">
+							{t('shell.overview.modules.title')}
+							<small>{t('shell.overview.modules.subtitle')}</small>
+						</span>
+					</div>
+					<div class="ui-card__body">
+						@if (status === 'loading') {
+							<p class="dash-chart__note">{t(
+								'shell.overview.modules.loading',
+							)}</p>
+						} @else {
+							<Chart
+								type="bar"
+								xKey="name"
+								height={220}
+								title={t('shell.overview.modules.subtitle')}
+								data={modules}
+								series={modulesSeries}
+								emptyTitle={t('shell.overview.modules.empty.title')}
+							/>
+						}
+					</div>
+				</section>
+			</div>
+		}
+	</>
+}

package/packages/client/src/shell/PrimaryNavigation.tsrx

@@ -0,0 +1,75 @@
+import { Icon } from '@flowdular/sdk/ui';
+import type {
+	NavigationContribution,
+	NavigationGroup,
+} from '../contributions.ts';
+import type { ShellView } from '../state.ts';
+import { t } from '../i18n/runtime.ts';
+import {
+	navigationGroupLabel,
+	NAVIGATION_GROUPS,
+	viewHref,
+} from './navigation.ts';
+import type { NavigateToView } from './types.ts';
+
+export interface PrimaryNavigationProps {
+	items: readonly NavigationContribution[];
+	activeView: ShellView;
+	workspaceSlug: string | null;
+	collapsedGroups: readonly string[];
+	onNavigate: NavigateToView;
+	onToggleGroup: (group: NavigationGroup) => void;
+}
+
+export function PrimaryNavigation(props: PrimaryNavigationProps) @{
+	<nav class="primary-nav" aria-label={t('shell.nav.label')}>
+		@for (const group of NAVIGATION_GROUPS; key group) {
+			@if (props.items.some((item) => item.group === group)) {
+				<section
+					class={[
+						'nav-group',
+						props.collapsedGroups.includes(group) && 'nav-group--collapsed',
+					]}
+				>
+					<button
+						class="nav-group__toggle"
+						type="button"
+						aria-expanded={!props.collapsedGroups.includes(group)}
+						onClick={() => props.onToggleGroup(group)}
+					>
+						<span>{navigationGroupLabel(t, group)}</span>
+						<span class="nav-group__chevron">
+							<Icon name="chevron-down" size={12} strokeWidth={2} />
+						</span>
+					</button>
+					<div
+						class="nav-group__content"
+						aria-hidden={props.collapsedGroups.includes(group)}
+					>
+						<div class="nav-group__items">
+							@for (const item of props.items.filter(
+								(item) => item.group === group,
+							); key item.id) {
+								<a
+									class={[
+										'nav-item',
+										props.activeView === item.viewId && 'nav-item--active',
+									]}
+									href={viewHref(item.viewId, props.workspaceSlug)}
+									title={item.description}
+									onClick={(event) => {
+										event.preventDefault();
+										props.onNavigate(item.viewId);
+									}}
+								>
+									<Icon name={item.glyph} size={18} />
+									<span class="nav-item__label">{item.label}</span>
+								</a>
+							}
+						</div>
+					</div>
+				</section>
+			}
+		}
+	</nav>
+}

package/packages/client/src/shell/Sidebar.tsrx

@@ -0,0 +1,76 @@
+import { Icon } from '@flowdular/sdk/ui';
+import type {
+	NavigationContribution,
+	NavigationGroup,
+} from '../contributions.ts';
+import type { ShellView } from '../state.ts';
+import { t } from '../i18n/runtime.ts';
+import { SidebarBrand } from './BrandMark.tsrx';
+import { OrganizationSwitcher } from './OrganizationSwitcher.tsrx';
+import { PrimaryNavigation } from './PrimaryNavigation.tsrx';
+import type { NavigateToView, ShellIdentity } from './types.ts';
+
+export interface SidebarProps {
+	open: boolean;
+	collapsed: boolean;
+	identity: ShellIdentity;
+	items: readonly NavigationContribution[];
+	activeView: ShellView;
+	workspaceSlug: string | null;
+	collapsedGroups: readonly string[];
+	tenantBusy: boolean;
+	tenantError: string;
+	onClose: () => void;
+	onToggleCollapsed: () => void;
+	onNavigate: NavigateToView;
+	onToggleGroup: (group: NavigationGroup) => void;
+	onSelectTenant: (tenantId: string) => void;
+}
+
+export function Sidebar(props: SidebarProps) @{
+	<aside class={['sidebar', props.open && 'sidebar--open']}>
+		<div class="sidebar__brand">
+			<SidebarBrand />
+			<button
+				class="sidebar__collapse ui-btn ui-btn--ghost ui-btn--icon"
+				type="button"
+				aria-label={t(
+					props.collapsed ? 'shell.nav.expand' : 'shell.nav.collapse',
+				)}
+				title={t(props.collapsed ? 'shell.nav.expand' : 'shell.nav.collapse')}
+				onClick={props.onToggleCollapsed}
+			>
+				<Icon name="panel-left" size={16} />
+			</button>
+			<button
+				class="sidebar__close"
+				type="button"
+				aria-label={t('shell.nav.close')}
+				onClick={props.onClose}
+			>
+				<Icon name="x" size={16} />
+			</button>
+		</div>
+		<OrganizationSwitcher
+			identity={props.identity}
+			busy={props.tenantBusy}
+			error={props.tenantError}
+			onSelect={props.onSelectTenant}
+		/>
+		<PrimaryNavigation
+			items={props.items}
+			activeView={props.activeView}
+			workspaceSlug={props.workspaceSlug}
+			collapsedGroups={props.collapsedGroups}
+			onNavigate={props.onNavigate}
+			onToggleGroup={props.onToggleGroup}
+		/>
+		<div class="sidebar__foot">
+			<span>
+				<i class="ui-dot" aria-hidden="true"></i>
+				<span class="sidebar__foot-label">{t('shell.sidebar.status')}</span>
+			</span>
+			<span class="ui-mono">0.1.0</span>
+		</div>
+	</aside>
+}

package/packages/client/src/shell/Topbar.tsrx

@@ -0,0 +1,44 @@
+import { Icon } from '@flowdular/sdk/ui';
+import type {
+	AccountMenuContribution,
+	WidgetContribution,
+} from '../contributions.ts';
+import { t } from '../i18n/runtime.ts';
+import { SlotOutlet } from './ContributionOutlets.tsrx';
+import type { NavigateToView, ShellIdentity } from './types.ts';
+import { UserMenu } from './UserMenu.tsrx';
+
+export interface TopbarProps {
+	activeGroup: string;
+	activeLabel: string;
+	identity: ShellIdentity;
+	accountMenu: readonly AccountMenuContribution[];
+	activeView: string;
+	widgets: readonly WidgetContribution[];
+	onOpenCommand: () => void;
+	onNavigate: NavigateToView;
+	onSignOut: () => void;
+}
+
+export function Topbar(props: TopbarProps) @{
+	<header class="topbar">
+		<div class="topbar__crumb">
+			<span>{props.activeGroup}</span>
+			<i aria-hidden="true">/</i>
+			<b>{props.activeLabel}</b>
+		</div>
+		<button class="topbar__search" type="button" onClick={props.onOpenCommand}>
+			<Icon name="search" size={16} />
+			<span>{t('shell.topbar.search')}</span>
+			<span class="ui-kbd">⌘K</span>
+		</button>
+		<SlotOutlet className="module-slot--topbar" widgets={props.widgets} />
+		<UserMenu
+			identity={props.identity}
+			items={props.accountMenu}
+			activeView={props.activeView}
+			onNavigate={props.onNavigate}
+			onSignOut={props.onSignOut}
+		/>
+	</header>
+}

package/packages/client/src/shell/UserMenu.tsrx

@@ -0,0 +1,103 @@
+import { useEffect, useMemo } from 'octane';
+import { Avatar, Icon } from '@flowdular/sdk/ui';
+import { useValue } from 'segment-state';
+import { cell, createStore } from 'segment-state';
+import type { AccountMenuContribution } from '../contributions.ts';
+import { useTranslation } from '../i18n/runtime.ts';
+import type { NavigateToView, ShellIdentity } from './types.ts';
+
+export interface UserMenuProps {
+	identity: ShellIdentity;
+	/** Personal views contributed by modules, reached only from here. */
+	items: readonly AccountMenuContribution[];
+	activeView: string;
+	onNavigate: NavigateToView;
+	onSignOut: () => void;
+}
+
+export function UserMenu(props: UserMenuProps) @{
+	const dropdown = useMemo(() => createStore({ open: cell(false) }), []);
+	const [open, setOpen] = useValue(dropdown.state.open);
+	const { t } = useTranslation();
+	useEffect(() => {
+		const onKeyDown = (event: KeyboardEvent) => {
+			if (event.key === 'Escape') setOpen(false);
+		};
+		window.addEventListener('keydown', onKeyDown);
+		return () => window.removeEventListener('keydown', onKeyDown);
+	}, [setOpen]);
+	<div class="user-menu">
+		<button
+			class="user-menu__trigger"
+			type="button"
+			aria-haspopup="menu"
+			aria-expanded={open}
+			aria-label={t('shell.account.menu')}
+			onClick={() => setOpen((current) => !current)}
+		>
+			<Avatar name={props.identity.displayName} />
+		</button>
+		@if (open) {
+			<>
+				<button
+					class="menu-dismiss"
+					type="button"
+					aria-label={t('shell.account.close')}
+					onClick={() => setOpen(false)}
+				></button>
+				<div
+					class="ui-menu user-menu__panel"
+					role="menu"
+					aria-label={t('shell.account.label')}
+				>
+					<div class="ui-menu__section">
+						<Avatar name={props.identity.displayName} large />
+						<span class="ui-cell">
+							<b>{props.identity.displayName}</b>
+							<small>{props.identity.email}</small>
+							<small>{props.identity.role}</small>
+						</span>
+					</div>
+					@if (props.items.length > 0) {
+						<>
+							<div class="ui-menu__sep"></div>
+							@for (const item of props.items; key item.id) {
+								<button
+									class={[
+										'ui-menu__item',
+										props.activeView === item.viewId && 'ui-menu__item--active',
+									]}
+									type="button"
+									role="menuitem"
+									onClick={() => {
+										setOpen(false);
+										props.onNavigate(item.viewId);
+									}}
+								>
+									<Icon name={item.glyph} size={16} />
+									<span class="ui-cell">
+										<b>{item.label}</b>
+										<small>{item.description}</small>
+									</span>
+								</button>
+							}
+						</>
+					}
+					<div class="ui-menu__sep"></div>
+					<button
+						class="ui-menu__item ui-menu__item--danger"
+						type="button"
+						role="menuitem"
+						onClick={() => {
+							setOpen(false);
+							props.onSignOut();
+						}}
+					>
+						<Icon name="sign-out" size={16} />
+						{t('shell.account.signOut')}
+					</button>
+				</div>
+			</>
+		}
+	</div>
+}

package/packages/client/src/shell/WorkspaceContent.tsrx

@@ -0,0 +1,30 @@
+import type {
+	ClientViewContribution,
+	WidgetContribution,
+} from '../contributions.ts';
+import type { ShellView } from '../state.ts';
+import { ClientViewOutlet } from './ContributionOutlets.tsrx';
+import { DashboardView } from './DashboardView.tsrx';
+
+export interface WorkspaceContentProps {
+	activeView: ShellView;
+	extensionView: ClientViewContribution | undefined;
+	widgets: readonly WidgetContribution[];
+	tenantName: string;
+	displayName: string;
+}
+
+export function WorkspaceContent(props: WorkspaceContentProps) @{
+	<div class="workspace__content">
+		@if (props.activeView === 'overview') {
+			<DashboardView
+				widgets={props.widgets}
+				tenantName={props.tenantName}
+				displayName={props.displayName}
+			/>
+		}
+		@if (props.extensionView) {
+			<ClientViewOutlet view={props.extensionView} />
+		}
+	</div>
+}

package/packages/client/src/shell/identity.ts

@@ -0,0 +1,12 @@
+import { activeLocale } from '../i18n/runtime.ts';
+
+export function initials(value: string): string {
+	return (
+		value
+			.split(/\s+/)
+			.filter(Boolean)
+			.slice(0, 2)
+			.map((part) => part[0]?.toLocaleUpperCase(activeLocale()) ?? '')
+			.join('') || 'AC'
+	);
+}