feat: refine BOTSU navigation and workspace chrome
Restore the BOTSU left page panel, add the global BOTSU logo and panel icons, compact presence avatars, and make the conversation workspace bar button-only and visually discreet.
This commit is contained in:
@@ -76,7 +76,7 @@ import { SearchModalRenderer } from '../features/search';
|
||||
import { getFallbackSession } from '../state/sessions';
|
||||
import { CallStatusRenderer } from './CallStatusRenderer';
|
||||
import { CallEmbedProvider } from '../components/CallEmbedProvider';
|
||||
import { BotsuEmbed, BotsuFrame, BotsuLauncher, BotsuServices } from '../../botsu/shell';
|
||||
import { BotsuEmbed, BotsuFrame, BotsuLauncher, BotsuNav, BotsuServices } from '../../botsu/shell';
|
||||
import { BotsuDocumentEditor, BotsuDocuments } from '../../botsu/documents';
|
||||
import { BotsuCommunityCanvasHome, BotsuStartPage } from '../../botsu/start';
|
||||
|
||||
@@ -163,7 +163,20 @@ export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize)
|
||||
</AuthRouteThemeManager>
|
||||
}
|
||||
>
|
||||
<Route path={BOTSU_PATH} element={<BotsuFrame />}>
|
||||
<Route
|
||||
path={BOTSU_PATH}
|
||||
element={
|
||||
<PageRoot
|
||||
nav={
|
||||
<MobileFriendlyPageNav path={BOTSU_PATH}>
|
||||
<BotsuNav />
|
||||
</MobileFriendlyPageNav>
|
||||
}
|
||||
>
|
||||
<BotsuFrame />
|
||||
</PageRoot>
|
||||
}
|
||||
>
|
||||
<Route index element={<BotsuStartPage />} />
|
||||
<Route path={_BOTSU_APPS_PATH} element={<BotsuLauncher />} />
|
||||
<Route path={_BOTSU_DOCUMENTS_PATH} element={<BotsuDocuments />} />
|
||||
|
||||
@@ -229,11 +229,6 @@ export function BotsuPresence() {
|
||||
return (
|
||||
<>
|
||||
<aside className="botsu-presence" aria-label="Présence BOTSU">
|
||||
<div className="botsu-presence-heading" aria-live="polite">
|
||||
<span className={`botsu-presence-dot is-${state.status}`} aria-hidden="true" />
|
||||
<strong>{participants.length} en ligne</strong>
|
||||
<span>{statusLabel}</span>
|
||||
</div>
|
||||
{participants.length > 0 && (
|
||||
<ul aria-label="Membres présents">
|
||||
{participants.map((participant) => {
|
||||
@@ -284,6 +279,11 @@ export function BotsuPresence() {
|
||||
})}
|
||||
</ul>
|
||||
)}
|
||||
<div className="botsu-presence-heading" aria-live="polite">
|
||||
<strong>{participants.length} en ligne</strong>
|
||||
<span>{statusLabel}</span>
|
||||
<span className={`botsu-presence-dot is-${state.status}`} aria-hidden="true" />
|
||||
</div>
|
||||
</aside>
|
||||
<div className="botsu-remote-cursors" aria-hidden="true">
|
||||
{visibleRemoteCursors.map((cursor) => (
|
||||
|
||||
@@ -1,157 +1,64 @@
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { Link, Outlet } from 'react-router-dom';
|
||||
import { applyTheme, defaultTheme, resolveTheme, type ThemeSettings } from '@botsu/ui';
|
||||
import { BotsuIdentity } from '../profile/BotsuIdentity';
|
||||
import React, { CSSProperties, useMemo, useRef } from 'react';
|
||||
import { color, config, vars } from 'folds';
|
||||
import { Link, Outlet, useLocation } from 'react-router-dom';
|
||||
import { BotsuPresence } from '../presence/BotsuPresence';
|
||||
import { PixelCanvasProvider } from '../start/PixelCanvasContext';
|
||||
import '@botsu/ui/styles.css';
|
||||
import './shell.css';
|
||||
|
||||
const THEME_STORAGE_KEY = 'botsu.theme.v1';
|
||||
type BotsuThemeStyle = CSSProperties & Record<`--botsu-${string}`, string>;
|
||||
|
||||
const loadStoredTheme = (): ThemeSettings => {
|
||||
try {
|
||||
const stored = window.localStorage.getItem(THEME_STORAGE_KEY);
|
||||
return stored ? resolveTheme(JSON.parse(stored) as Partial<ThemeSettings>) : resolveTheme();
|
||||
} catch {
|
||||
return resolveTheme();
|
||||
}
|
||||
const BOTSU_ROUTE_LABELS: Record<string, string> = {
|
||||
botsu: 'botsu',
|
||||
apps: 'apps',
|
||||
documents: 'documents',
|
||||
services: 'services',
|
||||
home: 'home',
|
||||
};
|
||||
|
||||
type ThemeControlsProps = {
|
||||
theme: ThemeSettings;
|
||||
setTheme: React.Dispatch<React.SetStateAction<ThemeSettings>>;
|
||||
const buildBreadcrumbs = (pathname: string): { label: string; to: string }[] => {
|
||||
const parts = pathname.split('/').filter(Boolean);
|
||||
if (parts.length === 0) return [{ label: '/', to: '/' }];
|
||||
return parts.map((part, index) => ({
|
||||
label: BOTSU_ROUTE_LABELS[part] ?? part,
|
||||
to: `/${parts.slice(0, index + 1).join('/')}/`,
|
||||
}));
|
||||
};
|
||||
|
||||
function ThemeControls({ theme, setTheme }: ThemeControlsProps) {
|
||||
const update = (change: Partial<ThemeSettings>) =>
|
||||
setTheme((current) => resolveTheme({ ...current, ...change }));
|
||||
|
||||
return (
|
||||
<details className="botsu-theme-panel botsu-surface">
|
||||
<summary>Apparence</summary>
|
||||
<div className="botsu-theme-grid">
|
||||
<label htmlFor="botsu-theme-mode">
|
||||
Mode
|
||||
<select
|
||||
id="botsu-theme-mode"
|
||||
value={theme.mode}
|
||||
onChange={(event) => update({ mode: event.target.value as ThemeSettings['mode'] })}
|
||||
>
|
||||
<option value="dark">Noir</option>
|
||||
<option value="light">Blanc</option>
|
||||
</select>
|
||||
</label>
|
||||
<label htmlFor="botsu-theme-font">
|
||||
Police
|
||||
<select
|
||||
id="botsu-theme-font"
|
||||
value={theme.font}
|
||||
onChange={(event) => update({ font: event.target.value as ThemeSettings['font'] })}
|
||||
>
|
||||
<option value="inter">Inter</option>
|
||||
<option value="system">Système</option>
|
||||
<option value="mono">Monospace</option>
|
||||
</select>
|
||||
</label>
|
||||
<label htmlFor="botsu-theme-accent">
|
||||
Accent
|
||||
<input
|
||||
id="botsu-theme-accent"
|
||||
type="color"
|
||||
value={theme.accent}
|
||||
onChange={(event) => update({ accent: event.target.value })}
|
||||
/>
|
||||
</label>
|
||||
<label htmlFor="botsu-theme-border">
|
||||
Bordure <output>{theme.borderWidth}px</output>
|
||||
<input
|
||||
id="botsu-theme-border"
|
||||
type="range"
|
||||
min="0"
|
||||
max="4"
|
||||
step="1"
|
||||
value={theme.borderWidth}
|
||||
onChange={(event) => update({ borderWidth: Number(event.target.value) })}
|
||||
/>
|
||||
</label>
|
||||
<label htmlFor="botsu-theme-radius">
|
||||
Angles <output>{theme.radius}px</output>
|
||||
<input
|
||||
id="botsu-theme-radius"
|
||||
type="range"
|
||||
min="0"
|
||||
max="24"
|
||||
step="1"
|
||||
value={theme.radius}
|
||||
onChange={(event) => update({ radius: Number(event.target.value) })}
|
||||
/>
|
||||
</label>
|
||||
<label htmlFor="botsu-theme-opacity">
|
||||
Verre <output>{Math.round(theme.glassOpacity * 100)}%</output>
|
||||
<input
|
||||
id="botsu-theme-opacity"
|
||||
type="range"
|
||||
min="0"
|
||||
max="1"
|
||||
step="0.01"
|
||||
value={theme.glassOpacity}
|
||||
onChange={(event) => update({ glassOpacity: Number(event.target.value) })}
|
||||
/>
|
||||
</label>
|
||||
<label htmlFor="botsu-theme-blur">
|
||||
Flou <output>{theme.glassBlur}px</output>
|
||||
<input
|
||||
id="botsu-theme-blur"
|
||||
type="range"
|
||||
min="0"
|
||||
max="40"
|
||||
step="1"
|
||||
value={theme.glassBlur}
|
||||
onChange={(event) => update({ glassBlur: Number(event.target.value) })}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<button className="botsu-button" type="button" onClick={() => setTheme({ ...defaultTheme })}>
|
||||
Réinitialiser
|
||||
</button>
|
||||
</details>
|
||||
);
|
||||
}
|
||||
const botsuCinnyThemeVars = {
|
||||
'--botsu-color-canvas': color.Background.Container,
|
||||
'--botsu-color-surface': color.Surface.Container,
|
||||
'--botsu-color-surface-raised': color.SurfaceVariant.Container,
|
||||
'--botsu-color-text': color.Background.OnContainer,
|
||||
'--botsu-color-text-muted': color.SurfaceVariant.OnContainer,
|
||||
'--botsu-color-border': color.Surface.ContainerLine,
|
||||
'--botsu-color-focus': vars.outline.FocusRing,
|
||||
'--botsu-color-accent': color.Primary.Main,
|
||||
'--botsu-color-on-accent': color.Primary.OnMain,
|
||||
'--botsu-border-width': config.borderWidth.B300,
|
||||
'--botsu-radius': config.radii.R300,
|
||||
'--botsu-font-family': 'var(--font-secondary)',
|
||||
} satisfies BotsuThemeStyle;
|
||||
|
||||
export function BotsuFrame() {
|
||||
const rootRef = useRef<HTMLDivElement>(null);
|
||||
const [theme, setTheme] = useState(loadStoredTheme);
|
||||
|
||||
useEffect(() => {
|
||||
if (rootRef.current) applyTheme(rootRef.current, theme);
|
||||
try {
|
||||
window.localStorage.setItem(THEME_STORAGE_KEY, JSON.stringify(theme));
|
||||
} catch {
|
||||
// The in-memory theme still works when storage is blocked or full.
|
||||
}
|
||||
}, [theme]);
|
||||
const location = useLocation();
|
||||
const breadcrumbs = useMemo(() => buildBreadcrumbs(location.pathname), [location.pathname]);
|
||||
|
||||
return (
|
||||
<div ref={rootRef} className="botsu-theme botsu-shell">
|
||||
<div ref={rootRef} className="botsu-theme botsu-shell" style={botsuCinnyThemeVars as CSSProperties}>
|
||||
<PixelCanvasProvider>
|
||||
<div className="botsu-suite-strip">
|
||||
<strong>ESPACE BOTSU</strong>
|
||||
<div className="botsu-suite-tools">
|
||||
<BotsuIdentity />
|
||||
<ThemeControls theme={theme} setTheme={setTheme} />
|
||||
</div>
|
||||
<nav className="botsu-breadcrumb" aria-label="Chemin BOTSU">
|
||||
{breadcrumbs.map((crumb, index) => (
|
||||
<React.Fragment key={crumb.to}>
|
||||
{index > 0 && <span aria-hidden="true">/</span>}
|
||||
<Link to={crumb.to}>{crumb.label}</Link>
|
||||
</React.Fragment>
|
||||
))}
|
||||
</nav>
|
||||
<BotsuPresence />
|
||||
</div>
|
||||
<header className="botsu-shell-header">
|
||||
<nav aria-label="Navigation BOTSU">
|
||||
<Link to="/botsu/">Accueil</Link>
|
||||
<Link to="/botsu/apps/">Applications</Link>
|
||||
<Link to="/home/">Discussions</Link>
|
||||
<Link to="/botsu/documents/">Documents</Link>
|
||||
<Link to="/botsu/services/">Services</Link>
|
||||
</nav>
|
||||
</header>
|
||||
<main className="botsu-shell-main">
|
||||
<Outlet />
|
||||
</main>
|
||||
|
||||
@@ -0,0 +1,32 @@
|
||||
import React from 'react';
|
||||
|
||||
const BOTSU_LOGO_PATH =
|
||||
'M 512.005005 31 C 573.302368 233.752808 705.327454 311.553162 908.0802 264.401428 C 766.624756 429.4328 766.624756 594.46405 908.0802 759.495361 C 705.327454 712.343506 573.302368 790.144043 512.005005 992.896851 C 450.707672 790.144043 318.682617 712.343506 115.929855 759.495361 C 257.385284 594.46405 257.385284 429.4328 115.929855 264.401428 C 318.682617 311.553162 450.707672 233.752808 512.005005 31 Z';
|
||||
|
||||
type BotsuLogoProps = {
|
||||
active?: boolean;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
export function BotsuLogo({ active = false, className }: BotsuLogoProps) {
|
||||
return (
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className={className}
|
||||
data-active={active}
|
||||
focusable="false"
|
||||
style={{ width: '1.45rem', height: '1.45rem', display: 'block' }}
|
||||
viewBox="0 0 1024 1024"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d={BOTSU_LOGO_PATH}
|
||||
fill={active ? 'currentColor' : 'none'}
|
||||
fillRule="evenodd"
|
||||
stroke="currentColor"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={active ? 0 : 58}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,180 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Box, Icon, Icons, Text } from 'folds';
|
||||
import { Link, useLocation } from 'react-router-dom';
|
||||
import { NavCategory, NavCategoryHeader, NavItem, NavItemContent } from '../../app/components/nav';
|
||||
import { RoomNavCategoryButton } from '../../app/features/room-nav';
|
||||
import { PageNav, PageNavContent, PageNavHeader } from '../../app/components/page';
|
||||
import { getBotsuEmbedPath } from '../../app/pages/pathUtils';
|
||||
import {
|
||||
botsuApps,
|
||||
getVisibleApps,
|
||||
type BotsuApp,
|
||||
type BotsuAppId,
|
||||
type BotsuRole,
|
||||
} from '../apps/catalog';
|
||||
import { buildLaunchPlan } from '../apps/launcher';
|
||||
import { botsuServices } from './BotsuServices';
|
||||
|
||||
const APP_NAV_IDS = new Set(['discussions', 'documents', 'tables', 'files']);
|
||||
const HIDDEN_SERVICE_PANEL_LABELS = new Set(['accueil', 'recherche']);
|
||||
|
||||
function getAppNavTarget(app: BotsuApp): { to: string } | { href: string } | undefined {
|
||||
const plan = buildLaunchPlan(app);
|
||||
if (plan.kind === 'navigate') return { to: plan.to };
|
||||
if (plan.kind === 'embed') return { to: getBotsuEmbedPath(app.id) };
|
||||
if (plan.kind === 'external') return { href: plan.href };
|
||||
return undefined;
|
||||
}
|
||||
|
||||
const getAppNavIcon = (appId: BotsuAppId | 'test') => {
|
||||
if (appId === 'discussions') return Icons.Message;
|
||||
if (appId === 'documents') return Icons.File;
|
||||
if (appId === 'tables') return Icons.Category;
|
||||
if (appId === 'files') return Icons.Attachment;
|
||||
if (appId === 'transfers') return Icons.Download;
|
||||
if (appId === 'services') return Icons.Server;
|
||||
if (appId === 'administration') return Icons.ShieldUser;
|
||||
return Icons.Space;
|
||||
};
|
||||
|
||||
const getServiceNavIcon = (label: string) => {
|
||||
const serviceLabel = label.toLocaleLowerCase('fr-FR');
|
||||
if (serviceLabel === 'paste') return Icons.Pencil;
|
||||
if (serviceLabel === 'transferts') return Icons.Download;
|
||||
if (serviceLabel === 'ripper') return Icons.Play;
|
||||
if (serviceLabel === 'traduction') return Icons.Globe;
|
||||
return Icons.External;
|
||||
};
|
||||
|
||||
function BotsuNavLabel({ children, icon }: { children: React.ReactNode; icon: string }) {
|
||||
return (
|
||||
<Box as="span" alignItems="Center" gap="200" style={{ minWidth: 0 }}>
|
||||
<Icon size="100" src={icon} aria-hidden="true" />
|
||||
<Text as="span" size="T300" truncate>
|
||||
{children}
|
||||
</Text>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
function BotsuNavLink({
|
||||
active,
|
||||
children,
|
||||
href,
|
||||
to,
|
||||
}: {
|
||||
active?: boolean;
|
||||
children: React.ReactNode;
|
||||
href?: string;
|
||||
to?: string;
|
||||
}) {
|
||||
if (to) {
|
||||
return (
|
||||
<NavItem as={Link} to={to} variant="Background" radii="400" aria-selected={active}>
|
||||
<NavItemContent>{children}</NavItemContent>
|
||||
</NavItem>
|
||||
);
|
||||
}
|
||||
if (href) {
|
||||
return (
|
||||
<NavItem
|
||||
as="a"
|
||||
href={href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
variant="Background"
|
||||
radii="400"
|
||||
>
|
||||
<NavItemContent>{children}</NavItemContent>
|
||||
</NavItem>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<NavItem variant="Background" radii="400" aria-disabled>
|
||||
<NavItemContent>{children}</NavItemContent>
|
||||
</NavItem>
|
||||
);
|
||||
}
|
||||
|
||||
export function BotsuNav() {
|
||||
const location = useLocation();
|
||||
const [applicationsClosed, setApplicationsClosed] = useState(false);
|
||||
const [servicesClosed, setServicesClosed] = useState(false);
|
||||
const apps = getVisibleApps(new Set<BotsuRole>(['member']), botsuApps).filter((app) =>
|
||||
APP_NAV_IDS.has(app.id)
|
||||
);
|
||||
const panelServices = botsuServices.filter(
|
||||
(service) => !HIDDEN_SERVICE_PANEL_LABELS.has(service.label.toLocaleLowerCase('fr-FR'))
|
||||
);
|
||||
|
||||
return (
|
||||
<PageNav>
|
||||
<PageNavHeader>
|
||||
<Box alignItems="Center" grow="Yes" gap="300">
|
||||
<Box grow="Yes">
|
||||
<Text size="H4" truncate>
|
||||
Botsu
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</PageNavHeader>
|
||||
<PageNavContent>
|
||||
<Box direction="Column" gap="500">
|
||||
<NavCategory>
|
||||
<NavCategoryHeader>
|
||||
<RoomNavCategoryButton
|
||||
closed={applicationsClosed}
|
||||
onClick={() => setApplicationsClosed((closed) => !closed)}
|
||||
>
|
||||
applications
|
||||
</RoomNavCategoryButton>
|
||||
</NavCategoryHeader>
|
||||
{!applicationsClosed && (
|
||||
<Box direction="Column" gap="100">
|
||||
{apps.map((app) => {
|
||||
const target = getAppNavTarget(app);
|
||||
const to = target && 'to' in target ? target.to : undefined;
|
||||
const href = target && 'href' in target ? target.href : undefined;
|
||||
return (
|
||||
<BotsuNavLink
|
||||
active={to ? location.pathname.startsWith(to) : false}
|
||||
href={href}
|
||||
key={app.id}
|
||||
to={to}
|
||||
>
|
||||
<BotsuNavLabel icon={getAppNavIcon(app.id)}>
|
||||
{app.label.toLocaleLowerCase('fr-FR')}
|
||||
</BotsuNavLabel>
|
||||
</BotsuNavLink>
|
||||
);
|
||||
})}
|
||||
</Box>
|
||||
)}
|
||||
</NavCategory>
|
||||
|
||||
<NavCategory>
|
||||
<NavCategoryHeader>
|
||||
<RoomNavCategoryButton
|
||||
closed={servicesClosed}
|
||||
onClick={() => setServicesClosed((closed) => !closed)}
|
||||
>
|
||||
services
|
||||
</RoomNavCategoryButton>
|
||||
</NavCategoryHeader>
|
||||
{!servicesClosed && (
|
||||
<Box direction="Column" gap="100">
|
||||
{panelServices.map((service) => (
|
||||
<BotsuNavLink href={service.url} key={service.url}>
|
||||
<BotsuNavLabel icon={getServiceNavIcon(service.label)}>
|
||||
{service.label.toLocaleLowerCase('fr-FR')}
|
||||
</BotsuNavLabel>
|
||||
</BotsuNavLink>
|
||||
))}
|
||||
</Box>
|
||||
)}
|
||||
</NavCategory>
|
||||
</Box>
|
||||
</PageNavContent>
|
||||
</PageNav>
|
||||
);
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
|
||||
const services = [
|
||||
export const botsuServices = [
|
||||
{ label: 'Accueil', description: 'Point d’entrée BOTSU.', url: 'https://home.botsu.net/' },
|
||||
{
|
||||
label: 'Recherche',
|
||||
@@ -25,7 +25,7 @@ export function BotsuServices() {
|
||||
<h2 id="botsu-services-title">Services</h2>
|
||||
</div>
|
||||
<div className="botsu-app-grid">
|
||||
{services.map((service) => (
|
||||
{botsuServices.map((service) => (
|
||||
<article className="botsu-app-card botsu-surface" key={service.url}>
|
||||
<div>
|
||||
<h3>{service.label}</h3>
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import React from 'react';
|
||||
import { Text } from 'folds';
|
||||
import { useLocation, useNavigate } from 'react-router-dom';
|
||||
import { SidebarAvatar, SidebarItem, SidebarItemTooltip } from '../../app/components/sidebar';
|
||||
import { getBotsuPath } from '../../app/pages/pathUtils';
|
||||
import { BotsuLogo } from './BotsuLogo';
|
||||
|
||||
export function BotsuTab() {
|
||||
const location = useLocation();
|
||||
@@ -11,18 +11,16 @@ export function BotsuTab() {
|
||||
|
||||
return (
|
||||
<SidebarItem active={active}>
|
||||
<SidebarItemTooltip tooltip="BOTSU — Applications">
|
||||
<SidebarItemTooltip tooltip="Botsu">
|
||||
{(triggerRef) => (
|
||||
<SidebarAvatar
|
||||
as="button"
|
||||
ref={triggerRef}
|
||||
outlined
|
||||
aria-label="Ouvrir les applications BOTSU"
|
||||
aria-label="Ouvrir Botsu"
|
||||
onClick={() => navigate(getBotsuPath())}
|
||||
>
|
||||
<Text as="span" size="B300">
|
||||
B
|
||||
</Text>
|
||||
<BotsuLogo active={active} />
|
||||
</SidebarAvatar>
|
||||
)}
|
||||
</SidebarItemTooltip>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
export * from './BotsuEmbed';
|
||||
export * from './BotsuFrame';
|
||||
export * from './BotsuLauncher';
|
||||
export * from './BotsuNav';
|
||||
export * from './BotsuServices';
|
||||
export * from './BotsuTab';
|
||||
|
||||
@@ -4,7 +4,20 @@ import test from 'node:test';
|
||||
|
||||
const shellCssUrl = new URL('./shell.css', import.meta.url);
|
||||
const shellFrameUrl = new URL('./BotsuFrame.tsx', import.meta.url);
|
||||
const shellNavUrl = new URL('./BotsuNav.tsx', import.meta.url);
|
||||
const shellTabUrl = new URL('./BotsuTab.tsx', import.meta.url);
|
||||
const shellLogoUrl = new URL('./BotsuLogo.tsx', import.meta.url);
|
||||
const presenceUrl = new URL('../presence/BotsuPresence.tsx', import.meta.url);
|
||||
const routerUrl = new URL('../../app/pages/Router.tsx', import.meta.url);
|
||||
const clientNonUiUrl = new URL('../../app/pages/client/ClientNonUIFeatures.tsx', import.meta.url);
|
||||
const settingsUrl = new URL('../../app/state/settings.ts', import.meta.url);
|
||||
const generalSettingsUrl = new URL('../../app/features/settings/general/General.tsx', import.meta.url);
|
||||
const settingsStylesUrl = new URL('../../app/features/settings/styles.css.ts', import.meta.url);
|
||||
const useThemeUrl = new URL('../../app/hooks/useTheme.ts', import.meta.url);
|
||||
const colorsUrl = new URL('../../colors.css.ts', import.meta.url);
|
||||
const indexCssUrl = new URL('../../index.css', import.meta.url);
|
||||
const startPageUrl = new URL('../start/BotsuStartPage.tsx', import.meta.url);
|
||||
const pixelCanvasUrl = new URL('../start/BotsuPixelCanvas.tsx', import.meta.url);
|
||||
const startCssUrl = new URL('../start/start.css', import.meta.url);
|
||||
|
||||
const getRuleBody = (css: string, selector: string): string => {
|
||||
@@ -22,60 +35,311 @@ test('BOTSU shell leaves room for the active call footer', async () => {
|
||||
assert.doesNotMatch(shellRule, /height:\s*100dvh;/);
|
||||
});
|
||||
|
||||
test('BOTSU shell puts the spaced presence strip before application navigation', async () => {
|
||||
const [css, frame] = await Promise.all([
|
||||
test('BOTSU shell keeps a minimal presence strip above the application surface', async () => {
|
||||
const [css, frame, presence] = await Promise.all([
|
||||
readFile(shellCssUrl, 'utf8'),
|
||||
readFile(shellFrameUrl, 'utf8'),
|
||||
readFile(presenceUrl, 'utf8'),
|
||||
]);
|
||||
const stripIndex = frame.indexOf('className="botsu-suite-strip"');
|
||||
const presenceIndex = frame.indexOf('<BotsuPresence />');
|
||||
const headerIndex = frame.indexOf('<header className="botsu-shell-header">');
|
||||
const mainIndex = frame.indexOf('<main className="botsu-shell-main">');
|
||||
|
||||
assert.equal(frame.includes('className="botsu-shell-chrome"'), false);
|
||||
assert.ok(stripIndex > -1);
|
||||
assert.ok(presenceIndex > stripIndex);
|
||||
assert.ok(headerIndex > presenceIndex);
|
||||
assert.match(frame.slice(stripIndex, presenceIndex), /ESPACE BOTSU/);
|
||||
assert.ok(mainIndex > presenceIndex);
|
||||
assert.match(frame.slice(stripIndex, presenceIndex), /className="botsu-breadcrumb"/);
|
||||
assert.match(frame, /import \{ color, config, vars \} from 'folds';/);
|
||||
assert.match(frame, /const botsuCinnyThemeVars = \{/);
|
||||
assert.match(frame, /'--botsu-color-canvas': color\.Background\.Container/);
|
||||
assert.match(frame, /'--botsu-color-accent': color\.Primary\.Main/);
|
||||
assert.match(frame, /'--botsu-font-family': 'var\(--font-secondary\)'/);
|
||||
assert.match(frame, /style=\{botsuCinnyThemeVars as CSSProperties\}/);
|
||||
assert.match(frame, /<Link to=\{crumb\.to\}>\{crumb\.label\}<\/Link>/);
|
||||
assert.doesNotMatch(frame, /const isBotsuHome|className="botsu-draw-toggle"/);
|
||||
assert.equal(frame.match(/<BotsuPresence \/>/g)?.length, 1);
|
||||
const header = frame.slice(headerIndex, frame.indexOf('</header>', headerIndex));
|
||||
assert.doesNotMatch(
|
||||
header,
|
||||
/BotsuPresence|BotsuIdentity|ThemeControls|ESPACE COLLABORATIF|<h1>|<div>/
|
||||
);
|
||||
assert.match(header, /<header[^>]*>\s*<nav[\s\S]*<\/nav>\s*$/);
|
||||
assert.doesNotMatch(frame, /ThemeControls|BotsuIdentity|ESPACE BOTSU|<header className="botsu-shell-header">/);
|
||||
|
||||
const stripRule = getRuleBody(css, '.botsu-suite-strip');
|
||||
assert.match(stripRule, /position:\s*sticky;/);
|
||||
assert.match(stripRule, /top:\s*0;/);
|
||||
const headerRule = getRuleBody(css, '.botsu-shell-header');
|
||||
assert.doesNotMatch(headerRule, /position:\s*sticky;/);
|
||||
assert.match(stripRule, /min-height:\s*2\.2rem;/);
|
||||
assert.match(stripRule, /display:\s*grid;/);
|
||||
assert.match(stripRule, /grid-template-columns:\s*minmax\(0, 1fr\) clamp\(5rem, 12vw, 8rem\);/);
|
||||
const breadcrumbRule = getRuleBody(css, '.botsu-breadcrumb');
|
||||
assert.match(breadcrumbRule, /grid-column:\s*1;/);
|
||||
|
||||
const presenceRule = getRuleBody(css, '.botsu-presence');
|
||||
assert.match(presenceRule, /grid-column:\s*2;/);
|
||||
const presenceHeadingRule = getRuleBody(css, '.botsu-presence-heading');
|
||||
assert.match(presenceHeadingRule, /order:\s*2;/);
|
||||
assert.match(presenceHeadingRule, /flex:\s*0 0 auto;/);
|
||||
assert.match(css, /\.botsu-presence-heading > span:not\(\.botsu-presence-dot\)/);
|
||||
assert.doesNotMatch(css, /\.botsu-presence-heading > span:last-child/);
|
||||
const peopleRule = getRuleBody(css, '.botsu-presence ul');
|
||||
assert.match(peopleRule, /order:\s*1;/);
|
||||
assert.match(peopleRule, /margin-left:\s*auto;/);
|
||||
assert.match(peopleRule, /gap:\s*(?!0(?:[;\s]|$))[^;]+;/);
|
||||
assert.doesNotMatch(css, /\.botsu-presence li \+ li\s*\{[^}]*margin-left:\s*-/s);
|
||||
const personRule = getRuleBody(css, '.botsu-presence-person');
|
||||
assert.match(personRule, /min-width:\s*2\.75rem;/);
|
||||
assert.match(personRule, /min-height:\s*2\.75rem;/);
|
||||
const navLinkRule = getRuleBody(css, '.botsu-shell-header nav a');
|
||||
assert.match(navLinkRule, /min-height:\s*2\.75rem;/);
|
||||
const themeSummaryRule = getRuleBody(css, '.botsu-theme-panel summary');
|
||||
assert.match(themeSummaryRule, /min-height:\s*2\.75rem;/);
|
||||
assert.match(personRule, /min-width:\s*1\.5rem;/);
|
||||
assert.match(personRule, /min-height:\s*1\.5rem;/);
|
||||
assert.match(css, /\.botsu-presence-avatar\s*\{[^}]*border-radius:\s*var\(--botsu-radius\);/s);
|
||||
const joinMarkRule = getRuleBody(css, '.botsu-presence-join-mark');
|
||||
assert.match(joinMarkRule, /border-radius:\s*var\(--botsu-radius\);/);
|
||||
const overflowRule = getRuleBody(css, '.botsu-presence-overflow');
|
||||
assert.match(overflowRule, /border-radius:\s*var\(--botsu-radius\);/);
|
||||
assert.ok(
|
||||
presence.indexOf('<ul aria-label="Membres présents">') <
|
||||
presence.indexOf('className="botsu-presence-heading"')
|
||||
);
|
||||
assert.ok(
|
||||
presence.indexOf('{statusLabel}</span>') <
|
||||
presence.indexOf('className={`botsu-presence-dot is-${state.status}`}')
|
||||
);
|
||||
});
|
||||
|
||||
test('BOTSU start page exposes clock search recents and a large themed pixel canvas', async () => {
|
||||
const [startPage, startCss] = await Promise.all([
|
||||
test('global app font overrides dark theme and Folds font variables', async () => {
|
||||
const [nonUi, settings, general, settingsStyles, indexCss] = await Promise.all([
|
||||
readFile(clientNonUiUrl, 'utf8'),
|
||||
readFile(settingsUrl, 'utf8'),
|
||||
readFile(generalSettingsUrl, 'utf8'),
|
||||
readFile(settingsStylesUrl, 'utf8'),
|
||||
readFile(indexCssUrl, 'utf8'),
|
||||
]);
|
||||
|
||||
assert.match(nonUi, /document\.documentElement\.style\.setProperty\('--font-secondary', fontStack\)/);
|
||||
assert.match(nonUi, /document\.body\.style\.setProperty\('--font-secondary', fontStack\)/);
|
||||
assert.match(nonUi, /document\.body\.style\.setProperty\(foldsFontVariable, fontStack\)/);
|
||||
assert.match(nonUi, /function CornerRadiusFeature\(\)/);
|
||||
assert.match(nonUi, /foldsRadiiVariables/);
|
||||
assert.match(nonUi, /function CustomAccentFeature\(\)/);
|
||||
assert.match(nonUi, /primaryColorVariables/);
|
||||
assert.match(nonUi, /document\.body\.style\.setProperty\('--botsu-color-accent', colorValue\)/);
|
||||
assert.match(nonUi, /document\.documentElement\.style\.setProperty\('--botsu-radius', `\$\{radius\}px`\)/);
|
||||
assert.match(nonUi, /target\.style\.setProperty\(foldsRadiiVariables\.R400, `\$\{radius\}px`\)/);
|
||||
assert.match(settings, /cornerRadius: number/);
|
||||
assert.match(settings, /cornerRadius: 8/);
|
||||
assert.match(settings, /customAccentEnabled: boolean/);
|
||||
assert.match(settings, /customAccentColor: string/);
|
||||
assert.match(settings, /customAccentColor: '#7c5cff'/);
|
||||
assert.match(general, /function CornerRadiusSlider\(\)/);
|
||||
assert.match(general, /title="Radius des corners"/);
|
||||
assert.match(general, /type="range"/);
|
||||
assert.match(general, /max="32"/);
|
||||
assert.match(general, /CornerRadiusSliderStyle/);
|
||||
assert.match(general, /--corner-radius-progress/);
|
||||
assert.match(settingsStyles, /CornerRadiusSliderInputStyle/);
|
||||
assert.match(settingsStyles, /opacity:\s*0/);
|
||||
assert.match(settingsStyles, /&:focus-within/);
|
||||
assert.match(settingsStyles, /CornerRadiusSliderThumbStyle/);
|
||||
assert.match(settingsStyles, /color\.Primary\.Main/);
|
||||
assert.match(general, /function CustomAccentPicker\(\)/);
|
||||
assert.match(general, /title="Accent personnalisé"/);
|
||||
assert.match(general, /type="color"/);
|
||||
assert.match(general, /Code hexadécimal de l'accent/);
|
||||
assert.match(settings, /\| 'velvelyne'/);
|
||||
assert.match(settings, /\| 'jgs5'/);
|
||||
assert.match(settings, /\| 'vg5000'/);
|
||||
assert.match(settings, /\| 'trickster'/);
|
||||
assert.match(settings, /\| 'avara'/);
|
||||
assert.match(settings, /\| 'basteleur'/);
|
||||
assert.match(settings, /\| 'minecraft'/);
|
||||
assert.match(general, /velvelyne: 'Velvelyne'/);
|
||||
assert.match(general, /jgs5: 'JGS-5'/);
|
||||
assert.match(general, /vg5000: 'VG5000'/);
|
||||
assert.match(general, /trickster: 'Trickster'/);
|
||||
assert.match(general, /avara: 'Avara'/);
|
||||
assert.match(general, /basteleur: 'Basteleur'/);
|
||||
assert.match(general, /minecraft: 'Minecraft'/);
|
||||
assert.match(nonUi, /velvelyne: "'Botsu Velvelyne'/);
|
||||
assert.match(nonUi, /jgs5: "'Botsu JGS-5'/);
|
||||
assert.match(nonUi, /vg5000: "'Botsu VG5000'/);
|
||||
assert.match(nonUi, /trickster: "'Botsu Trickster'/);
|
||||
assert.match(nonUi, /avara: "'Botsu Avara'/);
|
||||
assert.match(nonUi, /basteleur: "'Botsu Basteleur'/);
|
||||
assert.match(nonUi, /minecraft: "'Botsu Minecraft'/);
|
||||
assert.match(indexCss, /font-family: 'Botsu Velvelyne'/);
|
||||
assert.match(indexCss, /font-family: 'Botsu JGS-5'/);
|
||||
assert.match(indexCss, /font-family: 'Botsu VG5000'/);
|
||||
assert.match(indexCss, /font-family: 'Botsu Trickster'/);
|
||||
assert.match(indexCss, /font-family: 'Botsu Avara'/);
|
||||
assert.match(indexCss, /font-family: 'Botsu Basteleur'/);
|
||||
assert.match(indexCss, /font-family: 'Botsu Minecraft'/);
|
||||
assert.match(indexCss, /minecraftfont\.woff/);
|
||||
});
|
||||
|
||||
test('appearance options include custom BOTSU themes', async () => {
|
||||
const [useTheme, colors, indexCss] = await Promise.all([
|
||||
readFile(useThemeUrl, 'utf8'),
|
||||
readFile(colorsUrl, 'utf8'),
|
||||
readFile(indexCssUrl, 'utf8'),
|
||||
]);
|
||||
|
||||
assert.match(colors, /export const steam2003Theme = createTheme\(color,/);
|
||||
assert.match(colors, /export const infraredTheme = createTheme\(color,/);
|
||||
assert.match(colors, /export const matrixTheme = createTheme\(color,/);
|
||||
assert.match(colors, /export const spongebobTheme = createTheme\(color,/);
|
||||
assert.match(colors, /export const minecraftTheme = createTheme\(color,/);
|
||||
assert.match(colors, /export const blueNightTheme = createTheme\(color,/);
|
||||
assert.match(colors, /export const draculaTheme = createTheme\(color,/);
|
||||
assert.match(colors, /export const discordTheme = createTheme\(color,/);
|
||||
assert.match(colors, /export const catppuccinTheme = createTheme\(color,/);
|
||||
assert.match(colors, /Container:\s*'#2C3327'/);
|
||||
assert.match(colors, /Main:\s*'#B7D77B'/);
|
||||
assert.match(colors, /Container:\s*'#160306'/);
|
||||
assert.match(colors, /Main:\s*'#FF3B30'/);
|
||||
assert.match(colors, /Container:\s*'#020A05'/);
|
||||
assert.match(colors, /Main:\s*'#00FF66'/);
|
||||
assert.match(colors, /Container:\s*'#FFF16A'/);
|
||||
assert.match(colors, /Main:\s*'#00A6B2'/);
|
||||
assert.match(colors, /Container:\s*'#15110C'/);
|
||||
assert.match(colors, /Main:\s*'#4F7F2A'/);
|
||||
assert.match(colors, /Container:\s*'#07111F'/);
|
||||
assert.match(colors, /Main:\s*'#6EA8FF'/);
|
||||
assert.match(colors, /Container:\s*'#191A28'/);
|
||||
assert.match(colors, /Main:\s*'#BD93F9'/);
|
||||
assert.match(colors, /Container:\s*'#1E1F22'/);
|
||||
assert.match(colors, /Main:\s*'#5865F2'/);
|
||||
assert.match(colors, /Container:\s*'#11111B'/);
|
||||
assert.match(colors, /Main:\s*'#CBA6F7'/);
|
||||
assert.match(useTheme, /export const Steam2003Theme: Theme = \{/);
|
||||
assert.match(useTheme, /export const InfraredTheme: Theme = \{/);
|
||||
assert.match(useTheme, /export const MatrixTheme: Theme = \{/);
|
||||
assert.match(useTheme, /export const SpongebobTheme: Theme = \{/);
|
||||
assert.match(useTheme, /export const MinecraftTheme: Theme = \{/);
|
||||
assert.match(useTheme, /export const BlueNightTheme: Theme = \{/);
|
||||
assert.match(useTheme, /export const DraculaTheme: Theme = \{/);
|
||||
assert.match(useTheme, /export const DiscordTheme: Theme = \{/);
|
||||
assert.match(useTheme, /export const CatppuccinTheme: Theme = \{/);
|
||||
assert.match(useTheme, /id: 'steam-2003-theme'/);
|
||||
assert.match(useTheme, /id: 'infrared-theme'/);
|
||||
assert.match(useTheme, /id: 'matrix-theme'/);
|
||||
assert.match(useTheme, /id: 'spongebob-theme'/);
|
||||
assert.match(useTheme, /id: 'minecraft-theme'/);
|
||||
assert.match(useTheme, /id: 'blue-night-theme'/);
|
||||
assert.match(useTheme, /id: 'dracula-theme'/);
|
||||
assert.match(useTheme, /id: 'discord-theme'/);
|
||||
assert.match(useTheme, /id: 'catppuccin-theme'/);
|
||||
assert.match(useTheme, /SpongebobTheme,\s*DarkTheme,\s*ButterTheme,\s*Steam2003Theme,\s*InfraredTheme,\s*MatrixTheme,\s*MinecraftTheme,\s*BlueNightTheme,\s*DraculaTheme,\s*DiscordTheme,\s*CatppuccinTheme/s);
|
||||
assert.match(useTheme, /\[Steam2003Theme\.id\]: 'Steam 2003'/);
|
||||
assert.match(useTheme, /\[InfraredTheme\.id\]: 'Infrarouge'/);
|
||||
assert.match(useTheme, /\[MatrixTheme\.id\]: 'Matrix'/);
|
||||
assert.match(useTheme, /\[SpongebobTheme\.id\]: "Bob l'eponge"/);
|
||||
assert.match(useTheme, /\[MinecraftTheme\.id\]: 'Minecraft'/);
|
||||
assert.match(useTheme, /\[BlueNightTheme\.id\]: 'Blue Night'/);
|
||||
assert.match(useTheme, /\[DraculaTheme\.id\]: 'Dracula'/);
|
||||
assert.match(useTheme, /\[DiscordTheme\.id\]: 'Discord'/);
|
||||
assert.match(useTheme, /\[CatppuccinTheme\.id\]: 'Catppuccin'/);
|
||||
assert.match(useTheme, /MinecraftTheme: Theme = \{\s*id: 'minecraft-theme',\s*kind: ThemeKind\.Dark/s);
|
||||
assert.match(indexCss, /\.matrix-theme,\s*\.minecraft-theme,\s*\.blue-night-theme,\s*\.dracula-theme,\s*\.discord-theme,\s*\.catppuccin-theme\s*\{/);
|
||||
});
|
||||
|
||||
test('BOTSU route restores the default left page panel', async () => {
|
||||
const [router, nav, services] = await Promise.all([
|
||||
readFile(routerUrl, 'utf8'),
|
||||
readFile(shellNavUrl, 'utf8'),
|
||||
readFile(new URL('./BotsuServices.tsx', import.meta.url), 'utf8'),
|
||||
]);
|
||||
|
||||
assert.match(router, /<PageRoot\s+nav=\{/);
|
||||
assert.match(router, /<MobileFriendlyPageNav path=\{BOTSU_PATH\}>/);
|
||||
assert.match(router, /<BotsuNav \/>/);
|
||||
assert.match(nav, /<PageNav>/);
|
||||
assert.match(nav, /<Text size="H4" truncate>\s*Botsu\s*<\/Text>/);
|
||||
assert.match(nav, /import \{ Box, Icon, Icons, Text \} from 'folds';/);
|
||||
assert.match(nav, /function BotsuNavLabel\(/);
|
||||
assert.match(nav, /<Icon size="100" src=\{icon\} aria-hidden="true" \/>/);
|
||||
assert.match(nav, /<BotsuNavLabel icon=\{getAppNavIcon\(app\.id\)\}>/);
|
||||
assert.match(nav, /<BotsuNavLabel icon=\{getServiceNavIcon\(service\.label\)\}>/);
|
||||
assert.match(nav, /appId === 'discussions'\) return Icons\.Message/);
|
||||
assert.match(nav, /appId === 'documents'\) return Icons\.File/);
|
||||
assert.match(nav, /appId === 'tables'\) return Icons\.Category/);
|
||||
assert.match(nav, /appId === 'files'\) return Icons\.Attachment/);
|
||||
assert.match(nav, /serviceLabel === 'paste'\) return Icons\.Pencil/);
|
||||
assert.match(nav, /serviceLabel === 'traduction'\) return Icons\.Globe/);
|
||||
assert.doesNotMatch(nav, /BotsuLogo|BOTSU_LOGO_PATH|BOTSU_LOGO_INNER_PATH|botsu-panel-logo/);
|
||||
assert.match(nav, /HIDDEN_SERVICE_PANEL_LABELS/);
|
||||
assert.doesNotMatch(nav, /index services/);
|
||||
assert.doesNotMatch(nav, /location\.pathname === '\/botsu\/'/);
|
||||
assert.doesNotMatch(nav, /to="\/botsu\/"/);
|
||||
assert.match(nav, /RoomNavCategoryButton/);
|
||||
assert.match(nav, /applicationsClosed/);
|
||||
assert.match(nav, /servicesClosed/);
|
||||
assert.match(nav, />\s*applications\s*<\/RoomNavCategoryButton>/);
|
||||
assert.match(nav, />\s*services\s*<\/RoomNavCategoryButton>/);
|
||||
assert.ok(nav.indexOf('>\n applications') < nav.indexOf('>\n services'));
|
||||
assert.doesNotMatch(nav, /to="\/botsu\/services\/"/);
|
||||
assert.match(services, /label: 'Accueil'/);
|
||||
assert.match(services, /label: 'Recherche'/);
|
||||
});
|
||||
|
||||
test('BOTSU global sidebar tab uses active filled and inactive outline logos', async () => {
|
||||
const [tab, logo] = await Promise.all([readFile(shellTabUrl, 'utf8'), readFile(shellLogoUrl, 'utf8')]);
|
||||
|
||||
assert.match(tab, /<SidebarItemTooltip tooltip="Botsu">/);
|
||||
assert.match(tab, /aria-label="Ouvrir Botsu"/);
|
||||
assert.match(tab, /<BotsuLogo active=\{active\} \/>/);
|
||||
assert.match(logo, /BOTSU_LOGO_PATH/);
|
||||
assert.match(logo, /fill=\{active \? 'currentColor' : 'none'\}/);
|
||||
assert.match(logo, /stroke="currentColor"/);
|
||||
assert.match(logo, /strokeWidth=\{active \? 0 : 58\}/);
|
||||
assert.match(logo, /512\.005005 31/);
|
||||
assert.doesNotMatch(logo, /BOTSU_LOGO_INNER_PATH|--bg-surface|#fff|394\.9375 288\.796875/);
|
||||
});
|
||||
|
||||
test('BOTSU start page exposes a single-screen searchable draw surface', async () => {
|
||||
const [router, startPage, pixelCanvas, startCss] = await Promise.all([
|
||||
readFile(routerUrl, 'utf8'),
|
||||
readFile(startPageUrl, 'utf8'),
|
||||
readFile(pixelCanvasUrl, 'utf8'),
|
||||
readFile(startCssUrl, 'utf8'),
|
||||
]);
|
||||
|
||||
assert.match(router, /import \{ BotsuCommunityCanvasHome, BotsuStartPage \} from '\.\.\/\.\.\/botsu\/start';/);
|
||||
assert.match(router, /<Route index element=\{<BotsuCommunityCanvasHome \/>\} \/>/);
|
||||
assert.match(startPage, /className="botsu-start-clock"/);
|
||||
assert.match(startPage, /type="search"/);
|
||||
assert.match(startPage, /Derniers documents/);
|
||||
assert.match(startPage, /<BotsuPixelCanvas \/>/);
|
||||
assert.match(startPage, /Version canary éphémère/);
|
||||
assert.match(startPage, /Portail internet BOTSU/);
|
||||
assert.match(startPage, /style=\{botsuCinnyThemeVars as CSSProperties\}/);
|
||||
assert.match(startPage, /'--botsu-color-canvas': color\.Background\.Container/);
|
||||
assert.match(startPage, /'--botsu-font-family': 'var\(--font-secondary\)'/);
|
||||
assert.match(startPage, /className="botsu-suite-strip botsu-community-strip"/);
|
||||
assert.match(startPage, /<Link to="\/botsu\/">botsu<\/Link>/);
|
||||
assert.match(startPage, /<Link to="\/home\/">discussion<\/Link>/);
|
||||
assert.doesNotMatch(startPage, /presence-api|espace de dessin communautaire/);
|
||||
assert.match(startPage, /<BotsuPresence \/>/);
|
||||
assert.match(startPage, /<PixelCanvasProvider>/);
|
||||
assert.match(startPage, /récents/);
|
||||
assert.doesNotMatch(startPage, /botsu-start-section--apps|botsu-start-section--services/);
|
||||
assert.doesNotMatch(startCss, /botsu-start-links|botsu-start-section/);
|
||||
assert.match(startPage, /variant="background"/);
|
||||
assert.match(startPage, /className="botsu-start botsu-start--portal"/);
|
||||
assert.match(startPage, /className="botsu-start botsu-start--community"/);
|
||||
const communityHome = startPage.slice(startPage.indexOf('export function BotsuCommunityCanvasHome'));
|
||||
assert.doesNotMatch(communityHome, /botsu-start-center--community|formatBotsuClock|botsu-start-clock/);
|
||||
assert.doesNotMatch(startPage, /BONJOUR|Version canary éphémère/);
|
||||
assert.match(pixelCanvas, /getComputedStyle\(canvas\)/);
|
||||
assert.match(pixelCanvas, /observer\.observe\(document\.body, \{ attributes: true, attributeFilter: \['class', 'style'\] \}\)/);
|
||||
const canvasRule = getRuleBody(startCss, '.botsu-pixel-canvas');
|
||||
assert.match(canvasRule, /aspect-ratio:\s*1;/);
|
||||
assert.match(canvasRule, /image-rendering:\s*pixelated;/);
|
||||
assert.match(canvasRule, /background:\s*var\(--botsu-color-canvas\);/);
|
||||
const startRule = getRuleBody(startCss, '.botsu-start');
|
||||
assert.match(startRule, /overflow:\s*hidden;/);
|
||||
assert.doesNotMatch(startRule, /--botsu-color-canvas:\s*#050505|--botsu-color-text:\s*#f5f5f5/);
|
||||
const portalRule = getRuleBody(startCss, '.botsu-start--portal');
|
||||
assert.match(portalRule, /background:\s*var\(--botsu-color-canvas\);/);
|
||||
assert.doesNotMatch(portalRule, /radial-gradient/);
|
||||
const clockRule = getRuleBody(startCss, '.botsu-start-clock');
|
||||
assert.match(clockRule, /color:\s*var\(--botsu-color-text\);/);
|
||||
assert.match(clockRule, /font-family:\s*var\(--botsu-font-family\);/);
|
||||
assert.doesNotMatch(clockRule, /mix-blend-mode|color:\s*#fff|Helvetica/i);
|
||||
const bannerRule = getRuleBody(startCss, '.botsu-community-strip');
|
||||
assert.match(bannerRule, /position:\s*absolute;/);
|
||||
assert.match(bannerRule, /grid-template-columns:\s*minmax\(0, 1fr\) auto clamp\(5rem, 12vw, 8rem\);/);
|
||||
const communityPresenceRule = getRuleBody(startCss, '.botsu-community-strip .botsu-presence');
|
||||
assert.match(communityPresenceRule, /grid-column:\s*3;/);
|
||||
assert.doesNotMatch(startCss, /botsu-community-presence-banner|botsu-community-kicker/);
|
||||
});
|
||||
|
||||
@@ -3,17 +3,18 @@ import { color, config, toRem } from 'folds';
|
||||
|
||||
export const WorkspaceFrame = style({
|
||||
flexShrink: 0,
|
||||
position: 'relative',
|
||||
zIndex: 2,
|
||||
});
|
||||
|
||||
export const WorkspaceBar = style({
|
||||
minWidth: 0,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: config.space.S300,
|
||||
padding: `${config.space.S100} ${config.space.S400}`,
|
||||
gap: config.space.S100,
|
||||
padding: `${toRem(2)} ${config.space.S300}`,
|
||||
color: color.Surface.OnContainer,
|
||||
backgroundColor: color.Surface.Container,
|
||||
borderBottom: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
|
||||
backgroundColor: 'transparent',
|
||||
overflowX: 'auto',
|
||||
});
|
||||
|
||||
@@ -22,7 +23,7 @@ export const WorkspaceLabel = style({
|
||||
fontFamily: 'ui-monospace, monospace',
|
||||
fontSize: toRem(10),
|
||||
fontWeight: 700,
|
||||
letterSpacing: '0.12em',
|
||||
letterSpacing: '0.08em',
|
||||
opacity: config.opacity.P500,
|
||||
});
|
||||
|
||||
@@ -41,10 +42,11 @@ export const WorkspaceTab = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: config.space.S100,
|
||||
padding: `${toRem(4)} ${config.space.S200}`,
|
||||
border: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
|
||||
padding: `${toRem(2)} ${config.space.S100}`,
|
||||
border: `${config.borderWidth.B300} solid color-mix(in srgb, ${color.Surface.ContainerLine} 52%, transparent)`,
|
||||
borderRadius: config.radii.R300,
|
||||
whiteSpace: 'nowrap',
|
||||
backgroundColor: 'transparent',
|
||||
});
|
||||
|
||||
export const WorkspaceTabLink = style({
|
||||
@@ -113,27 +115,59 @@ export const WorkspaceButton = style({
|
||||
},
|
||||
});
|
||||
|
||||
export const WorkspaceIconButton = style({
|
||||
flexShrink: 0,
|
||||
minWidth: toRem(22),
|
||||
height: toRem(22),
|
||||
display: 'inline-grid',
|
||||
placeItems: 'center',
|
||||
padding: 0,
|
||||
color: color.Surface.OnContainer,
|
||||
backgroundColor: 'transparent',
|
||||
border: `${config.borderWidth.B300} solid color-mix(in srgb, ${color.Surface.ContainerLine} 58%, transparent)`,
|
||||
borderRadius: config.radii.R300,
|
||||
cursor: 'pointer',
|
||||
fontFamily: 'ui-monospace, monospace',
|
||||
fontSize: toRem(13),
|
||||
fontWeight: 800,
|
||||
lineHeight: 1,
|
||||
selectors: {
|
||||
'&:hover': {
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: color.Surface.ContainerLine,
|
||||
},
|
||||
'&:focus-visible': {
|
||||
outline: `${config.borderWidth.B600} solid ${color.Primary.Main}`,
|
||||
outlineOffset: toRem(2),
|
||||
},
|
||||
'&:disabled': {
|
||||
cursor: 'not-allowed',
|
||||
opacity: config.opacity.P500,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const WorkspaceEditor = style({
|
||||
minWidth: 0,
|
||||
maxHeight: 'min(60vh, 32rem)',
|
||||
maxHeight: 'min(46vh, 24rem)',
|
||||
display: 'grid',
|
||||
gap: config.space.S200,
|
||||
margin: 0,
|
||||
padding: config.space.S300,
|
||||
padding: `${config.space.S100} ${config.space.S300} ${config.space.S200}`,
|
||||
color: color.Surface.OnContainer,
|
||||
backgroundColor: color.Surface.Container,
|
||||
backgroundColor: 'transparent',
|
||||
borderTop: 0,
|
||||
borderLeft: 0,
|
||||
borderRight: 0,
|
||||
borderBottom: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
|
||||
borderBottom: 0,
|
||||
overflowY: 'auto',
|
||||
});
|
||||
|
||||
export const WorkspaceEditorRow = style({
|
||||
display: 'grid',
|
||||
gridTemplateColumns: `minmax(${toRem(100)}, ${toRem(140)}) minmax(${toRem(
|
||||
gridTemplateColumns: `minmax(${toRem(92)}, ${toRem(124)}) minmax(${toRem(
|
||||
140
|
||||
)}, 1fr) minmax(${toRem(180)}, 1.4fr) auto`,
|
||||
)}, 1fr) minmax(${toRem(160)}, 1.4fr) auto`,
|
||||
alignItems: 'end',
|
||||
gap: config.space.S200,
|
||||
'@media': {
|
||||
|
||||
@@ -146,19 +146,17 @@ export function BotsuWorkspaceBar({ room }: { room: Room }) {
|
||||
if (workspaceState.status === 'invalid') {
|
||||
workspaceSummary = <span className={css.WorkspaceInvalid}>Configuration incompatible</span>;
|
||||
} else if (workspaceState.status === 'absent') {
|
||||
workspaceSummary = <span className={css.WorkspaceEmpty}>Aucun espace configuré</span>;
|
||||
workspaceSummary = null;
|
||||
} else if (workspaceState.tabs.length === 0) {
|
||||
workspaceSummary = null;
|
||||
} else {
|
||||
workspaceSummary = (
|
||||
<ul className={css.WorkspaceTabs} aria-label="Ressources liées">
|
||||
{workspaceState.tabs.length === 0 ? (
|
||||
<li className={css.WorkspaceEmpty}>Aucun onglet</li>
|
||||
) : (
|
||||
workspaceState.tabs.map((tab) => (
|
||||
<li className={css.WorkspaceTab} key={tab.id} title={tab.resourceId}>
|
||||
<WorkspaceTabContent tab={tab} />
|
||||
</li>
|
||||
))
|
||||
)}
|
||||
{workspaceState.tabs.map((tab) => (
|
||||
<li className={css.WorkspaceTab} key={tab.id} title={tab.resourceId}>
|
||||
<WorkspaceTabContent tab={tab} />
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
@@ -169,11 +167,16 @@ export function BotsuWorkspaceBar({ room }: { room: Room }) {
|
||||
return (
|
||||
<div className={css.WorkspaceFrame}>
|
||||
<section className={css.WorkspaceBar} aria-label="Espace BOTSU du salon">
|
||||
<strong className={css.WorkspaceLabel}>ESPACE BOTSU</strong>
|
||||
{workspaceSummary}
|
||||
{canEdit && !editing && (
|
||||
<button className={css.WorkspaceButton} type="button" onClick={beginEditing}>
|
||||
Configurer
|
||||
<button
|
||||
aria-label="Configurer l'espace Botsu"
|
||||
className={css.WorkspaceIconButton}
|
||||
title="Configurer l'espace Botsu"
|
||||
type="button"
|
||||
onClick={beginEditing}
|
||||
>
|
||||
+
|
||||
</button>
|
||||
)}
|
||||
</section>
|
||||
@@ -239,13 +242,14 @@ export function BotsuWorkspaceBar({ room }: { room: Room }) {
|
||||
</label>
|
||||
<button
|
||||
aria-label={`Retirer ${tab.label || `l'onglet ${tab.id}`}`}
|
||||
className={css.WorkspaceButton}
|
||||
className={css.WorkspaceIconButton}
|
||||
title="Retirer"
|
||||
type="button"
|
||||
onClick={() =>
|
||||
setDraftTabs((current) => removeWorkspaceDraftTab(current, tab.id))
|
||||
}
|
||||
>
|
||||
Retirer
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
@@ -256,18 +260,32 @@ export function BotsuWorkspaceBar({ room }: { room: Room }) {
|
||||
)}
|
||||
<div className={css.WorkspaceEditorActions}>
|
||||
<button
|
||||
className={css.WorkspaceButton}
|
||||
aria-label="Ajouter un onglet"
|
||||
className={css.WorkspaceIconButton}
|
||||
title="Ajouter un onglet"
|
||||
type="button"
|
||||
onClick={addTab}
|
||||
disabled={draftTabs.length >= MAXIMUM_WORKSPACE_TABS}
|
||||
>
|
||||
Ajouter un onglet
|
||||
+
|
||||
</button>
|
||||
<button className={css.WorkspaceButton} type="button" onClick={cancelEditing}>
|
||||
Annuler
|
||||
<button
|
||||
aria-label="Fermer la configuration Botsu"
|
||||
className={css.WorkspaceIconButton}
|
||||
title="Fermer"
|
||||
type="button"
|
||||
onClick={cancelEditing}
|
||||
>
|
||||
×
|
||||
</button>
|
||||
<button className={css.WorkspaceButton} type="submit" disabled={saving}>
|
||||
{saving ? 'Enregistrement…' : 'Enregistrer'}
|
||||
<button
|
||||
aria-label={saving ? 'Enregistrement en cours' : 'Enregistrer'}
|
||||
className={css.WorkspaceIconButton}
|
||||
title={saving ? 'Enregistrement…' : 'Enregistrer'}
|
||||
type="submit"
|
||||
disabled={saving}
|
||||
>
|
||||
✓
|
||||
</button>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import assert from 'node:assert/strict';
|
||||
import { readFile } from 'node:fs/promises';
|
||||
import test from 'node:test';
|
||||
import {
|
||||
addWorkspaceDraftTab,
|
||||
@@ -11,6 +12,9 @@ import {
|
||||
updateWorkspaceDraftTab,
|
||||
} from './editor.ts';
|
||||
|
||||
const workspaceBarUrl = new URL('./BotsuWorkspaceBar.tsx', import.meta.url);
|
||||
const workspaceBarCssUrl = new URL('./BotsuWorkspaceBar.css.ts', import.meta.url);
|
||||
|
||||
const tab = {
|
||||
id: 'brief',
|
||||
appId: 'documents' as const,
|
||||
@@ -94,3 +98,24 @@ test('initializes the editor from one live Matrix event snapshot', () => {
|
||||
assert.equal(snapshot.eventId, '$event-new');
|
||||
assert.deepEqual(snapshot.tabs, [{ ...tab, id: 'new-tab', label: 'Version distante' }]);
|
||||
});
|
||||
|
||||
test('conversation workspace bar stays discreet with integrated controls', async () => {
|
||||
const [bar, css] = await Promise.all([
|
||||
readFile(workspaceBarUrl, 'utf8'),
|
||||
readFile(workspaceBarCssUrl, 'utf8'),
|
||||
]);
|
||||
|
||||
assert.match(bar, /workspaceSummary = null/);
|
||||
assert.doesNotMatch(bar, /ESPACE BOTSU|Aucun espace configuré|Aucun onglet|<strong className=\{css\.WorkspaceLabel\}>|Configurer\s*<\/button>/);
|
||||
assert.match(bar, /aria-label="Configurer l'espace Botsu"/);
|
||||
assert.match(bar, /className=\{css\.WorkspaceIconButton\}/);
|
||||
assert.match(bar, />\s*\+\s*<\/button>/);
|
||||
assert.match(bar, />\s*×\s*<\/button>/);
|
||||
assert.match(bar, />\s*✓\s*<\/button>/);
|
||||
assert.match(css, /export const WorkspaceIconButton = style/);
|
||||
assert.match(css, /backgroundColor: 'transparent'/);
|
||||
assert.match(css, /borderBottom: 0/);
|
||||
assert.match(css, /&:hover': \{\n\s*backgroundColor: 'transparent'/);
|
||||
assert.doesNotMatch(css, /backgroundColor: `color-mix\(in srgb, \$\{color\.Surface\.Container\}/);
|
||||
assert.doesNotMatch(css, /borderBottom:\s*`\$\{config\.borderWidth\.B300\} solid \$\{color\.Surface\.ContainerLine\}`/);
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user