{service.label}
diff --git a/apps/client/src/botsu/shell/BotsuTab.tsx b/apps/client/src/botsu/shell/BotsuTab.tsx index f00e69b..79bb8fc 100644 --- a/apps/client/src/botsu/shell/BotsuTab.tsx +++ b/apps/client/src/botsu/shell/BotsuTab.tsx @@ -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 (|/
- );
- assert.match(header, /]*>\s*\s*$/);
+ assert.doesNotMatch(frame, /ThemeControls|BotsuIdentity|ESPACE BOTSU|/);
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('') <
+ presence.indexOf('className="botsu-presence-heading"')
+ );
+ assert.ok(
+ presence.indexOf('{statusLabel}') <
+ 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, //);
+ assert.match(router, //);
+ assert.match(nav, /\s*Botsu\s*<\/Text>/);
+ assert.match(nav, /import \{ Box, Icon, Icons, Text \} from 'folds';/);
+ assert.match(nav, /function BotsuNavLabel\(/);
+ assert.match(nav, //);
+ assert.match(nav, //);
+ assert.match(nav, //);
+ 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, //);
+ assert.match(tab, /aria-label="Ouvrir Botsu"/);
+ assert.match(tab, //);
+ 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/);
});
diff --git a/apps/client/src/botsu/workspace/BotsuWorkspaceBar.css.ts b/apps/client/src/botsu/workspace/BotsuWorkspaceBar.css.ts
index e7e0a9e..24add44 100644
--- a/apps/client/src/botsu/workspace/BotsuWorkspaceBar.css.ts
+++ b/apps/client/src/botsu/workspace/BotsuWorkspaceBar.css.ts
@@ -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': {
diff --git a/apps/client/src/botsu/workspace/BotsuWorkspaceBar.tsx b/apps/client/src/botsu/workspace/BotsuWorkspaceBar.tsx
index a3ecc49..9df69ec 100644
--- a/apps/client/src/botsu/workspace/BotsuWorkspaceBar.tsx
+++ b/apps/client/src/botsu/workspace/BotsuWorkspaceBar.tsx
@@ -146,19 +146,17 @@ export function BotsuWorkspaceBar({ room }: { room: Room }) {
if (workspaceState.status === 'invalid') {
workspaceSummary = Configuration incompatible;
} else if (workspaceState.status === 'absent') {
- workspaceSummary = Aucun espace configuré;
+ workspaceSummary = null;
+ } else if (workspaceState.tabs.length === 0) {
+ workspaceSummary = null;
} else {
workspaceSummary = (
- {workspaceState.tabs.length === 0 ? (
- - Aucun onglet
- ) : (
- workspaceState.tabs.map((tab) => (
- -
-
- ))
- )}
+ {workspaceState.tabs.map((tab) => (
+ -
+
+ ))}
);
}
@@ -169,11 +167,16 @@ export function BotsuWorkspaceBar({ room }: { room: Room }) {
return (
- ESPACE BOTSU
{workspaceSummary}
{canEdit && !editing && (
-
@@ -239,13 +242,14 @@ export function BotsuWorkspaceBar({ room }: { room: Room }) {
))}
@@ -256,18 +260,32 @@ export function BotsuWorkspaceBar({ room }: { room: Room }) {
)}
-
diff --git a/apps/client/src/botsu/workspace/editor.test.ts b/apps/client/src/botsu/workspace/editor.test.ts
index 1995845..17f83f7 100644
--- a/apps/client/src/botsu/workspace/editor.test.ts
+++ b/apps/client/src/botsu/workspace/editor.test.ts
@@ -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||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\}`/);
+});
- ') <
+ presence.indexOf('className="botsu-presence-heading"')
+ );
+ assert.ok(
+ presence.indexOf('{statusLabel}') <
+ 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, /
- Aucun onglet - ) : ( - workspaceState.tabs.map((tab) => ( -
-
-
-
- ))
- )}
+ {workspaceState.tabs.map((tab) => (
+ -
+
+
+ ))}
-
- {workspaceState.tabs.length === 0 ? (
-
-
diff --git a/apps/client/src/botsu/workspace/editor.test.ts b/apps/client/src/botsu/workspace/editor.test.ts
index 1995845..17f83f7 100644
--- a/apps/client/src/botsu/workspace/editor.test.ts
+++ b/apps/client/src/botsu/workspace/editor.test.ts
@@ -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||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\}`/);
+});