From 6f626ca0d31477affa39fcebd3f8eff782b7090a Mon Sep 17 00:00:00 2001 From: Quentin Gliech Date: Mon, 25 May 2026 14:35:32 +0200 Subject: [PATCH 1/3] Update Compound to the latest version --- frontend/package.json | 4 ++-- pnpm-lock.yaml | 24 ++++++++++++------------ 2 files changed, 14 insertions(+), 14 deletions(-) diff --git a/frontend/package.json b/frontend/package.json index 2f550d23f..1ccaa1737 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -24,8 +24,8 @@ "@radix-ui/react-dialog": "^1.1.15", "@tanstack/react-query": "^5.100.14", "@tanstack/react-router": "^1.170.8", - "@vector-im/compound-design-tokens": "6.10.1", - "@vector-im/compound-web": "^8.3.5", + "@vector-im/compound-design-tokens": "10.2.0", + "@vector-im/compound-web": "^9.3.0", "@zxcvbn-ts/core": "^3.0.4", "@zxcvbn-ts/language-common": "^3.0.4", "classnames": "^2.5.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a38055493..33ea75d75 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -45,11 +45,11 @@ importers: specifier: ^1.170.8 version: 1.170.8(react-dom@19.2.6(react@19.2.6))(react@19.2.6) '@vector-im/compound-design-tokens': - specifier: 6.10.1 - version: 6.10.1(@types/react@19.2.15)(react@19.2.6) + specifier: 10.2.0 + version: 10.2.0(@types/react@19.2.15)(react@19.2.6) '@vector-im/compound-web': - specifier: ^8.3.5 - version: 8.4.0(@fontsource/inconsolata@5.2.8)(@fontsource/inter@5.2.8)(@types/react-dom@19.2.3(@types/react@19.2.15))(@types/react@19.2.15)(@vector-im/compound-design-tokens@6.10.1(@types/react@19.2.15)(react@19.2.6))(react-dom@19.2.6(react@19.2.6))(react@19.2.6) + specifier: ^9.3.0 + version: 9.3.0(@fontsource/inconsolata@5.2.8)(@fontsource/inter@5.2.8)(@types/react-dom@19.2.3(@types/react@19.2.15))(@types/react@19.2.15)(@vector-im/compound-design-tokens@10.2.0(@types/react@19.2.15)(react@19.2.6))(react-dom@19.2.6(react@19.2.6))(react@19.2.6) '@zxcvbn-ts/core': specifier: ^3.0.4 version: 3.0.4 @@ -2407,8 +2407,8 @@ packages: '@types/ws@8.18.1': resolution: {integrity: sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg==} - '@vector-im/compound-design-tokens@6.10.1': - resolution: {integrity: sha512-rbb+aUQhB6DppZrfZpwg5o2K4Uzil5QGmAoOSBmAdfgFMwQWkhwk1jnZozbH/vbsqwTLtRdX6tztXRZ1W9sJ0A==} + '@vector-im/compound-design-tokens@10.2.0': + resolution: {integrity: sha512-0/xEt6HuYMxRt6F4bSwB8DjgCEB26bFVqSwvVlcDbDWPun8e2p+NWTfJ109SMZFOAtPgmEcShB3xz/lG+zqgiA==} peerDependencies: '@types/react': '*' react: ^17 || ^18 || ^19.0.0 @@ -2418,13 +2418,13 @@ packages: react: optional: true - '@vector-im/compound-web@8.4.0': - resolution: {integrity: sha512-xScGP2UP04qxXBCI6D7MfzwfT0w+8k5sepXehaHleLZX0pykdPFeFp+P1WJz2NocQgEnqWIYHrp50kMrYzs0fA==} + '@vector-im/compound-web@9.3.0': + resolution: {integrity: sha512-Elu4Uw8RbfP6JaudQYkVibALYT6qpwubqfKhteTxIPWBWzSYM+P5T+B1uX+ra+grNcXwXUt2xfMxpqYQsAHgYA==} peerDependencies: '@fontsource/inconsolata': ^5 '@fontsource/inter': ^5 '@types/react': '*' - '@vector-im/compound-design-tokens': '>=1.6.1 <7.0.0' + '@vector-im/compound-design-tokens': '>=1.6.1 <11.0.0' react: ^18 || ^19.0.0 peerDependenciesMeta: '@types/react': @@ -6623,12 +6623,12 @@ snapshots: dependencies: '@types/node': 25.9.1 - '@vector-im/compound-design-tokens@6.10.1(@types/react@19.2.15)(react@19.2.6)': + '@vector-im/compound-design-tokens@10.2.0(@types/react@19.2.15)(react@19.2.6)': optionalDependencies: '@types/react': 19.2.15 react: 19.2.6 - '@vector-im/compound-web@8.4.0(@fontsource/inconsolata@5.2.8)(@fontsource/inter@5.2.8)(@types/react-dom@19.2.3(@types/react@19.2.15))(@types/react@19.2.15)(@vector-im/compound-design-tokens@6.10.1(@types/react@19.2.15)(react@19.2.6))(react-dom@19.2.6(react@19.2.6))(react@19.2.6)': + '@vector-im/compound-web@9.3.0(@fontsource/inconsolata@5.2.8)(@fontsource/inter@5.2.8)(@types/react-dom@19.2.3(@types/react@19.2.15))(@types/react@19.2.15)(@vector-im/compound-design-tokens@10.2.0(@types/react@19.2.15)(react@19.2.6))(react-dom@19.2.6(react@19.2.6))(react@19.2.6)': dependencies: '@floating-ui/react': 0.27.19(react-dom@19.2.6(react@19.2.6))(react@19.2.6) '@fontsource/inconsolata': 5.2.8 @@ -6639,7 +6639,7 @@ snapshots: '@radix-ui/react-progress': 1.1.8(@types/react-dom@19.2.3(@types/react@19.2.15))(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6) '@radix-ui/react-separator': 1.1.8(@types/react-dom@19.2.3(@types/react@19.2.15))(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6) '@radix-ui/react-slot': 1.2.4(@types/react@19.2.15)(react@19.2.6) - '@vector-im/compound-design-tokens': 6.10.1(@types/react@19.2.15)(react@19.2.6) + '@vector-im/compound-design-tokens': 10.2.0(@types/react@19.2.15)(react@19.2.6) classnames: 2.5.1 react: 19.2.6 vaul: 1.1.2(@types/react-dom@19.2.3(@types/react@19.2.15))(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6) From 5ea68e0bc375b4763b3749bc9f02d7e7f82c4db2 Mon Sep 17 00:00:00 2001 From: Quentin Gliech Date: Mon, 25 May 2026 14:35:32 +0200 Subject: [PATCH 2/3] Update the Compound icons in the server-side generated templates --- templates/components/icon.html | 88 ++++++++++++++++++++++++++++++++-- 1 file changed, 84 insertions(+), 4 deletions(-) diff --git a/templates/components/icon.html b/templates/components/icon.html index 3544d94de..3702ab155 100644 --- a/templates/components/icon.html +++ b/templates/components/icon.html @@ -26,6 +26,10 @@ done {% endmacro %} +{% macro advanced_settings() %} + +{% endmacro %} + {% macro arrow_down() %} {% endmacro %} @@ -63,11 +67,11 @@ done {% endmacro %} {% macro backspace_solid() %} - + {% endmacro %} {% macro backspace() %} - + {% endmacro %} {% macro block() %} @@ -78,6 +82,10 @@ done {% endmacro %} +{% macro bug() %} + +{% endmacro %} + {% macro calendar() %} {% endmacro %} @@ -154,6 +162,10 @@ done {% endmacro %} +{% macro collapse_all() %} + +{% endmacro %} + {% macro collapse() %} {% endmacro %} @@ -182,6 +194,10 @@ done {% endmacro %} +{% macro device_passkey() %} + +{% endmacro %} + {% macro devices() %} {% endmacro %} @@ -286,6 +302,10 @@ done {% endmacro %} +{% macro folder() %} + +{% endmacro %} + {% macro forward() %} {% endmacro %} @@ -455,7 +475,7 @@ done {% endmacro %} {% macro mac() %} - + {% endmacro %} {% macro mark_as_read() %} @@ -606,6 +626,10 @@ done {% endmacro %} +{% macro re_order() %} + +{% endmacro %} + {% macro reaction_add() %} {% endmacro %} @@ -630,10 +654,22 @@ done {% endmacro %} +{% macro rotate_left() %} + +{% endmacro %} + +{% macro rotate_right() %} + +{% endmacro %} + {% macro search() %} {% endmacro %} +{% macro section() %} + +{% endmacro %} + {% macro send_solid() %} {% endmacro %} @@ -706,6 +742,14 @@ done {% endmacro %} +{% macro stop_solid() %} + +{% endmacro %} + +{% macro stop() %} + +{% endmacro %} + {% macro strikethrough() %} {% endmacro %} @@ -726,6 +770,10 @@ done {% endmacro %} +{% macro theme() %} + +{% endmacro %} + {% macro threads_solid() %} {% endmacro %} @@ -738,6 +786,14 @@ done {% endmacro %} +{% macro translate() %} + +{% endmacro %} + +{% macro tree() %} + +{% endmacro %} + {% macro underline() %} {% endmacro %} @@ -798,6 +854,10 @@ done {% endmacro %} +{% macro video_call_outgoing_solid() %} + +{% endmacro %} + {% macro video_call_solid() %} {% endmacro %} @@ -814,12 +874,24 @@ done {% endmacro %} +{% macro voice_call_declined_solid() %} + +{% endmacro %} + +{% macro voice_call_missed_solid() %} + +{% endmacro %} + +{% macro voice_call_outgoing_solid() %} + +{% endmacro %} + {% macro voice_call_solid() %} {% endmacro %} {% macro voice_call() %} - + {% endmacro %} {% macro volume_off_solid() %} @@ -849,3 +921,11 @@ done {% macro windows() %} {% endmacro %} + +{% macro zoom_in() %} + +{% endmacro %} + +{% macro zoom_out() %} + +{% endmacro %} From e03c95394509e4fbb749668d267e70c21bec8726 Mon Sep 17 00:00:00 2001 From: Quentin Gliech Date: Mon, 25 May 2026 14:35:32 +0200 Subject: [PATCH 3/3] Adjust the button sizes to the new t-shirt size. --- .../src/components/AccountDeleteButton.tsx | 2 +- frontend/src/components/BrowserSession.tsx | 2 +- frontend/src/components/ButtonLink.tsx | 2 +- .../OAuth2ClientDetail.test.tsx.snap | 8 +-- frontend/src/components/CompatSession.tsx | 2 +- frontend/src/components/OAuth2Session.tsx | 2 +- .../src/components/PaginationControls.tsx | 4 +- .../Session/EndBrowserSessionButton.tsx | 2 +- .../Session/EndCompatSessionButton.tsx | 2 +- .../Session/EndOAuth2SessionButton.tsx | 2 +- .../components/Session/EndSessionButton.tsx | 2 +- .../SessionCard/SessionCard.stories.tsx | 2 +- .../CompatSessionDetail.test.tsx.snap | 10 +-- .../OAuth2SessionDetail.test.tsx.snap | 6 +- .../BrowserSessionsOverview.test.tsx.snap | 8 +-- .../__snapshots__/CompatSession.test.tsx.snap | 4 +- .../__snapshots__/OAuth2Session.test.tsx.snap | 4 +- .../src/routes/_account.sessions.browsers.tsx | 4 +- .../src/routes/_account.sessions.index.tsx | 4 +- .../reset-cross-signing.test.tsx.snap | 62 +++++++++---------- .../account/__snapshots__/index.test.tsx.snap | 42 ++++++------- .../__snapshots__/sessions.test.tsx.snap | 56 ++++++++--------- 22 files changed, 116 insertions(+), 116 deletions(-) diff --git a/frontend/src/components/AccountDeleteButton.tsx b/frontend/src/components/AccountDeleteButton.tsx index a5ab30991..0cdab39d6 100644 --- a/frontend/src/components/AccountDeleteButton.tsx +++ b/frontend/src/components/AccountDeleteButton.tsx @@ -159,7 +159,7 @@ const AccountDeleteButton: React.FC = (props) => { diff --git a/frontend/src/components/SessionDetail/__snapshots__/CompatSessionDetail.test.tsx.snap b/frontend/src/components/SessionDetail/__snapshots__/CompatSessionDetail.test.tsx.snap index cd5b73a80..9860a0b5a 100644 --- a/frontend/src/components/SessionDetail/__snapshots__/CompatSessionDetail.test.tsx.snap +++ b/frontend/src/components/SessionDetail/__snapshots__/CompatSessionDetail.test.tsx.snap @@ -154,7 +154,7 @@ exports[` > renders a compatability session details 1`] = ` Scopes