Merge pull request #3 from Novaloop-AG/feature/user-directory-angular

Feature/user directory angular
2026-11-02 21:32:46 +00:00 · 2026-02-20 15:13:04 +01:00
parent 878a037795 3e79d628d0
commit ae53c561f3
36 changed files with 174 additions and 290 deletions
@@ -5,6 +5,13 @@ on:
    push:
        branches:
            - release/healthchat
+    workflow_dispatch:
+        inputs:
+            healthchat_workspace_ref:
+                description: "healthchat-workspace git ref (tag, branch, or SHA). Leave empty for default branch."
+                required: false
+                default: ""
+                type: string

 jobs:
    build-healthchat-app:
@@ -25,6 +32,30 @@ jobs:
            - uses: actions/checkout@v4
              with:
                  fetch-depth: 0 # needed for docker-package to be able to calculate the version
+            - name: Checkout healthchat-workspace
+              uses: actions/checkout@v4
+              with:
+                  repository: Novaloop-AG/healthchat-workspace
+                  path: healthchat-workspace
+                  token: ${{ secrets.HEALTHCHAT_WORKSPACE_TOKEN }}
+                  ref: ${{ github.event.inputs.healthchat_workspace_ref || '' }}
+            - name: Setup Node.js
+              uses: actions/setup-node@v4
+              with:
+                  node-version: 22
+            - name: Build element-plugin
+              run: |
+                  cd healthchat-workspace/element-plugin
+                  npm ci
+                  npm run build
+                  cd module
+                  npm ci
+                  npm run build
+            - name: Stage plugin artifacts for Docker
+              run: |
+                  mkdir -p plugin-dist/elements
+                  cp healthchat-workspace/element-plugin/module/dist/healthchat-module.js plugin-dist/healthchat-module.js
+                  cp healthchat-workspace/element-plugin/dist/elements/browser/main.js plugin-dist/elements/healthchat-elements.js
            - name: Log in to the Github Container registry
              uses: docker/login-action@v3
              with:
@@ -37,3 +37,5 @@ storybook-static
 /packages/shared-components/node_modules
 /packages/shared-components/dist
 /packages/shared-components/src/i18nKeys.d.ts
+
+/plugin-dist
@@ -15,6 +15,11 @@ RUN /src/scripts/docker-link-repos.sh
 RUN yarn --network-timeout=200000 install
 RUN /src/scripts/docker-package.sh

+# Copy HealthChat plugin artifacts
+RUN mkdir -p /src/webapp/modules/elements
+COPY plugin-dist/healthchat-module.js /src/webapp/modules/healthchat-module.js
+COPY plugin-dist/elements/healthchat-elements.js /src/webapp/modules/elements/healthchat-elements.js
+
 # Copy the config now so that we don't create another layer in the app image
 RUN cp /src/config.sample.json /src/webapp/config.json

@@ -2,7 +2,7 @@
    "brand": "HealthChat",
    "branding": {
        "auth_footer_links": null,
-        "auth_header_logo_url": "https://healthchat.ch/assets/logo.png",
+        "auth_header_logo_url": "themes/element/img/logos/element-logo.png",
        "welcome_background_url": null
    },
    "bug_report_endpoint_url": "https://element.io/bugreports/submit",
@@ -16,7 +16,7 @@
            "base_url": ""
        }
    },
-    "default_theme": "light",
+    "default_theme": "custom-HealthChat Light",
    "disable_custom_urls": true,
    "disable_guests": true,
    "element_call": {},
@@ -57,53 +57,52 @@
        "custom_themes": [
            "HealthChat Light",
            {
-                "colors": {
-                    "accent-color": "#7287fd",
-                    "alert": "#df8e1d",
-                    "avatar-background-colors": [
-                        "#1e66f5",
-                        "#8839ef",
-                        "#40a02b"
-                    ],
-                    "focus-bg-color": "#acb0be",
-                    "menu-selected-color": "#bcc0cc",
-                    "other-user-pill-bg-color": "#04a5e5",
-                    "primary-color": "#7287fd",
-                    "reaction-row-button-selected-bg-color": "#bcc0cc",
-                    "room-highlight-color": "#04a5e5",
-                    "roomlist-background-color": "#e6e9ef",
-                    "roomlist-highlights-color": "#bcc0cc",
-                    "roomlist-separator-color": "#8c8fa1",
-                    "roomlist-text-color": "#4c4f69",
-                    "roomlist-text-secondary-color": "#4c4f69",
-                    "secondary-content": "#4c4f69",
-                    "sidebar-color": "#dce0e8",
-                    "tertiary-content": "#4c4f69",
-                    "timeline-background-color": "#eff1f5",
-                    "timeline-highlights-color": "#bcc0cc",
-                    "timeline-text-color": "#4c4f69",
-                    "timeline-text-secondary-color": "#6c6f85",
-                    "togglesw-off-color": "#7c7f93",
-                    "username-colors": [
-                        "#8839ef",
-                        "#e64553",
-                        "#fe640b",
-                        "#40a02b",
-                        "#179299",
-                        "#04a5e5",
-                        "#209fb5",
-                        "#7287fd"
-                    ],
-                    "warning-color": "#d20f39"
-                },
+                "name": "HealthChat Light",
                "is_dark": false,
-                "name": "HealthChat Light"
+                "colors": {
+                    "accent-color": "#1f4d85",
+                    "primary-color": "#1f4d85",
+                    "alert": "#df8e1d",
+                    "warning-color": "#d20f39",
+                    "sidebar-color": "#12325c",
+                    "roomlist-background-color": "#f5f5f5",
+                    "roomlist-highlights-color": "#d9d9d9",
+                    "roomlist-separator-color": "#9b9898",
+                    "roomlist-text-color": "#473e3e",
+                    "roomlist-text-secondary-color": "#9b9898",
+                    "timeline-background-color": "#ffffff",
+                    "timeline-highlights-color": "#d9d9d9",
+                    "timeline-text-color": "#473e3e",
+                    "timeline-text-secondary-color": "#9b9898",
+                    "secondary-content": "#9b9898",
+                    "tertiary-content": "#9b9898",
+                    "focus-bg-color": "#d9d9d9",
+                    "menu-selected-color": "#d9d9d9",
+                    "other-user-pill-bg-color": "#376A91",
+                    "room-highlight-color": "#376A91",
+                    "reaction-row-button-selected-bg-color": "#d9d9d9",
+                    "togglesw-off-color": "#9b9898",
+                    "avatar-background-colors": ["#12325c", "#1f4d85", "#376A91"],
+                    "username-colors": ["#12325c", "#2a4063", "#1f4d85", "#376A91", "#473e3e", "#1f4d85", "#2a4063", "#12325c"]
+                },
+                "fonts": {
+                    "general": "\"Century Gothic\", \"Futura\", \"Trebuchet MS\", \"Arial\", sans-serif"
+                },
+                "compound": {
+                    "--cpd-color-text-action-accent": "#1f4d85",
+                    "--cpd-color-bg-action-primary-rest": "#1f4d85",
+                    "--cpd-color-bg-action-primary-hovered": "#2a4063",
+                    "--cpd-color-bg-action-primary-pressed": "#12325c",
+                    "--cpd-color-text-link-external": "#1f4d85",
+                    "--cpd-color-icon-accent-tertiary": "#376A91"
+                }
            }
        ]
    },
    "show_labs_settings": false,
-    "modules": ["/modules/user-directory-module.js"],
-    "ch.healthchat.user_directory": {
-        "api_base_url": "http://localhost:5001"
+    "modules": ["/modules/healthchat-module.js"],
+    "ch.healthchat": {
+        "api_base_url": "http://localhost:5001",
+        "elements_base_url": "/modules/elements"
    }
 }
@@ -2,7 +2,7 @@
    "name": "HealthChat",
    "short_name": "HealthChat",
    "display": "standalone",
-    "theme_color": "#76CFA6",
+    "theme_color": "#12325c",
    "start_url": "index.html",
    "icons": [
        {
@@ -21,7 +21,7 @@
            "type": "image/png"
        },
        {
-            "src": "/vector-icons/152png",
+            "src": "/vector-icons/152.png",
            "sizes": "152x152",
            "type": "image/png"
        },
@@ -1,84 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   version="1.1"
-   id="svg1"
-   width="810.66669"
-   height="812"
-   viewBox="0 0 810.66669 812"
-   sodipodi:docname="SMC_button_RGB2.eps"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg">
-  <defs
-     id="defs1">
-    <radialGradient
-       fx="192.802"
-       fy="548.04102"
-       cx="192.802"
-       cy="548.04102"
-       r="0"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(10,0,0,10,20,-1160)"
-       spreadMethod="pad"
-       id="radialGradient3">
-      <stop
-         style="stop-opacity:1;stop-color:#006699"
-         offset="0"
-         id="stop1" />
-      <stop
-         style="stop-opacity:1;stop-color:#00b5e3"
-         offset="0.5625"
-         id="stop2" />
-      <stop
-         style="stop-opacity:1;stop-color:#7ae3ff"
-         offset="1"
-         id="stop3" />
-    </radialGradient>
-    <clipPath
-       clipPathUnits="userSpaceOnUse"
-       id="clipPath3">
-      <path
-         d="M 5016.79,9.31641 H 1065.17 C 482.074,9.31641 4.98438,486.406 4.98438,1069.5 v 3951.6 c 0,583.13 477.08962,1060.19 1060.18562,1060.19 h 3951.62 c 583.1,0 1060.19,-477.06 1060.19,-1060.19 V 1069.5 C 6076.98,486.406 5599.89,9.31641 5016.79,9.31641 Z"
-         clip-rule="evenodd"
-         id="path3" />
-    </clipPath>
-  </defs>
-  <sodipodi:namedview
-     id="namedview1"
-     pagecolor="#ffffff"
-     bordercolor="#000000"
-     borderopacity="0.25"
-     inkscape:showpageshadow="2"
-     inkscape:pageopacity="0.0"
-     inkscape:pagecheckerboard="0"
-     inkscape:deskcolor="#d1d1d1">
-    <inkscape:page
-       x="0"
-       y="0"
-       inkscape:label="1"
-       id="page1"
-       width="810.66669"
-       height="812"
-       margin="0"
-       bleed="0" />
-  </sodipodi:namedview>
-  <g
-     id="g1"
-     inkscape:groupmode="layer"
-     inkscape:label="1">
-    <path
-       id="path1"
-       d="M 5016.79,9.31641 H 1065.17 C 482.074,9.31641 4.98438,486.406 4.98438,1069.5 v 3951.6 c 0,583.13 477.08962,1060.19 1060.18562,1060.19 h 3951.62 c 583.1,0 1060.19,-477.06 1060.19,-1060.19 V 1069.5 C 6076.98,486.406 5599.89,9.31641 5016.79,9.31641"
-       style="fill:url(#radialGradient3);fill-opacity:1;fill-rule:nonzero;stroke:none"
-       transform="matrix(0.13333333,0,0,-0.13333333,0,812)"
-       clip-path="url(#clipPath3)" />
-    <path
-       id="path4"
-       d="m 2800.93,3873.97 h 486.12 c 49.97,0 93.47,-41.51 93.47,-93.5 l 0.01,-454.88 c -0.01,-68.66 56.01,-124.66 124.63,-124.65 l 454.91,-0.01 c 53.51,0 91.5,-41.62 93.47,-93.47 v -486.1 c 0,-51.28 -41.9,-93.46 -93.47,-93.46 l -454.96,-0.02 c -68.5,0.01 -124.42,-55.8 -124.6,-124.29 l 0.01,-455.23 c 0,-53.15 -38.05,-87.04 -88.69,-93.34 -5.45,-0.68 -469.86,-1.63 -505.1,0.96 -44.23,3.25 -79.27,49.72 -79.27,92.38 l 0.01,455.23 c -0.18,68.49 -56.09,124.3 -124.59,124.29 l -454.96,0.02 c -51.58,0 -93.47,42.18 -93.47,93.46 v 486.1 c 1.99,52.06 40.17,93.47 93.46,93.47 l 454.91,0.01 c 68.63,-0.01 124.64,55.99 124.63,124.65 l 0.02,454.88 c 0,51.99 43.49,93.5 93.46,93.5 z m -487.53,627.25 c 662.23,234.86 1022.69,-36.14 1374.62,-0.28 351.94,35.86 -14.53,986.17 284.57,687.01 1256.91,-1257.22 1272.87,-3358.29 -285.25,-4003.72 -915.96,-379.39 -1969.7,54.09 -2345.46,971.56 -398.079,971.95 157,2056.61 971.52,2345.43 z m 1302.37,228.1 c 7.15,45.23 6.89,112.38 6.33,140.63 -3.78,190.53 -64.45,477.51 148.26,581.62 139.23,68.14 268.18,-1.91 366.08,-99.82 460.87,-461 791.32,-1055.14 922.35,-1694.94 120.26,-587.39 69.73,-1216.49 -221.46,-1748.2 C 4599.98,1475.22 4231.15,1158.77 3775.98,970.223 3268.12,759.84 2699.75,763.957 2195.04,981.633 1709.37,1191.05 1328.02,1578.34 1127.49,2067.97 c -212.537,518.97 -193.455,1100.34 33.79,1610.9 207.26,465.79 588.21,868.21 1074.7,1040.71 308.61,109.42 594.65,135.37 916.86,85.01 130.86,-20.47 321.71,-74.25 462.93,-75.27"
-       style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none"
-       transform="matrix(0.13333333,0,0,-0.13333333,0,812)" />
-  </g>
-</svg>
@@ -11,6 +11,7 @@
   digits in flowed text to stand out.
   TODO: Consider putting all emoji fonts to the end rather than the front. */
 $font-family:
+    "Century Gothic", "Futura", "Trebuchet MS",
    "Inter", var(--emoji-font-family), "Apple Color Emoji", "Segoe UI Emoji", "Arial", "Helvetica", sans-serif,
    "Noto Color Emoji";

@@ -59,20 +60,20 @@ $username-variant6-color: var(--cpd-color-text-decorative-6);
 * To use under very rare circumstances, always prefer the semantics defined
 * in https://compound.element.io/?path=/docs/tokens-semantic-colors--docs
 */
-$accent-100: var(--cpd-color-green-100);
-$accent-200: var(--cpd-color-green-200);
-$accent-300: var(--cpd-color-green-300);
-$accent-400: var(--cpd-color-green-400);
-$accent-500: var(--cpd-color-green-500);
-$accent-600: var(--cpd-color-green-600);
-$accent-700: var(--cpd-color-green-700);
-$accent-800: var(--cpd-color-green-800);
-$accent-900: var(--cpd-color-green-900);
-$accent-1000: var(--cpd-color-green-1000);
-$accent-1100: var(--cpd-color-green-1100);
-$accent-1200: var(--cpd-color-green-1200);
-$accent-1300: var(--cpd-color-green-1300);
-$accent-1400: var(--cpd-color-green-1400);
+$accent-100: var(--cpd-color-blue-100);
+$accent-200: var(--cpd-color-blue-200);
+$accent-300: var(--cpd-color-blue-300);
+$accent-400: var(--cpd-color-blue-400);
+$accent-500: var(--cpd-color-blue-500);
+$accent-600: var(--cpd-color-blue-600);
+$accent-700: var(--cpd-color-blue-700);
+$accent-800: var(--cpd-color-blue-800);
+$accent-900: var(--cpd-color-blue-900);
+$accent-1000: var(--cpd-color-blue-1000);
+$accent-1100: var(--cpd-color-blue-1100);
+$accent-1200: var(--cpd-color-blue-1200);
+$accent-1300: var(--cpd-color-blue-1300);
+$accent-1400: var(--cpd-color-blue-1400);

 /* Reused Figma non-compound colors */
 /* ******************** */
@@ -110,7 +111,7 @@ $info-plinth-bg-color: #f7f7f7;
 $event-selected-color: var(--cpd-color-bg-subtle-secondary);
 $topleftmenu-color: #212121;
 $roomtopic-color: #9e9e9e;
-$spacePanel-bg-color: rgba(232, 232, 232, 0.77);
+$spacePanel-bg-color: #12325c;
 $panel-gradient: rgba(242, 245, 248, 0), rgba(242, 245, 248, 1);
 $h3-color: #3d3b39;
 $event-highlight-bg-color: $yellow-background;
@@ -279,7 +280,7 @@ $voice-record-icon-color: $tertiary-content;

 /* Bubble tiles */
 /* ******************** */
-$eventbubble-self-bg: var(--cpd-color-green-300);
+$eventbubble-self-bg: var(--cpd-color-blue-300);
 $eventbubble-others-bg: var(--cpd-color-gray-300);
 $eventbubble-bg-hover: var(--cpd-color-bg-subtle-secondary);
 /* ******************** */
@@ -8,6 +8,7 @@
    }

    .mx_Parent {
+        font-family: "Century Gothic", "Futura", "Trebuchet MS", sans-serif;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
@@ -90,7 +91,7 @@
        background-repeat: no-repeat;
        background-position: 10px center;
        text-decoration: none;
-        color: #2e2f32 !important;
+        color: #473e3e !important;
    }

    .mx_ButtonLabel {
@@ -110,12 +111,12 @@
    }

    .mx_ButtonSignIn {
-        background-color: #368bd6;
+        background-color: #1f4d85;
        color: white !important;
    }

    .mx_ButtonCreateAccount {
-        background-color: #0dbd8b;
+        background-color: #376A91;
        color: white !important;
    }

@@ -165,7 +166,7 @@ we don't have an account and should hide them. No account == no guest account ei
 </style>

 <div class="mx_Parent">
-    <a href="https://element.io" target="_blank" rel="noopener">
+    <a href="https://healthchat.ch" target="_blank" rel="noopener">
        <img src="$logoUrl" alt="$brand" class="mx_Logo" />
    </a>
    <h1 class="mx_Header_title">_t("welcome_to_element")</h1>
@@ -100,7 +100,7 @@ const HomePage: React.FC<IProps> = ({ justRegistered = false }) => {
        introSection = <UserWelcomeTop />;
    } else {
        const brandingConfig = SdkConfig.getObject("branding");
-        const logoUrl = brandingConfig?.get("auth_header_logo_url") ?? "themes/element/img/logos/element-logo.svg";
+        const logoUrl = brandingConfig?.get("auth_header_logo_url") ?? "themes/element/img/logos/element-logo.png";

        introSection = (
            <React.Fragment>
@@ -13,7 +13,7 @@ import SdkConfig from "../../../SdkConfig";
 export default class AuthHeaderLogo extends React.PureComponent {
    public render(): React.ReactElement {
        const brandingConfig = SdkConfig.getObject("branding");
-        const logoUrl = brandingConfig?.get("auth_header_logo_url") ?? "themes/element/img/logos/element-logo.svg";
+        const logoUrl = brandingConfig?.get("auth_header_logo_url") ?? "themes/element/img/logos/element-logo.png";

        return (
            <aside className="mx_AuthHeaderLogo">
@@ -36,7 +36,7 @@ export default class Welcome extends React.PureComponent<EmptyObject> {
        if (!pageUrl) {
            // Fall back to default and replace $logoUrl in welcome.html
            const brandingConfig = SdkConfig.getObject("branding");
-            const logoUrl = brandingConfig?.get("auth_header_logo_url") ?? "themes/element/img/logos/element-logo.svg";
+            const logoUrl = brandingConfig?.get("auth_header_logo_url") ?? "themes/element/img/logos/element-logo.png";
            replaceMap["$logoUrl"] = logoUrl;
            pageUrl = "welcome.html";
        }
@@ -294,7 +294,15 @@ const InnerSpacePanel = React.memo<IInnerSpacePanelProps>(

        const moduleSpaceItems = useModuleSpacePanelItems(ModuleApi.instance.extras);

-        const metaSpacesSection = metaSpaces
+        const homeSection = metaSpaces
+            .filter((key) => key === MetaSpace.Home)
+            .map((key) => {
+                const Component = metaSpaceComponentMap[key];
+                return <Component key={key} selected={activeSpace === key} isPanelCollapsed={isPanelCollapsed} />;
+            });
+
+        const otherMetaSpacesSection = metaSpaces
+            .filter((key) => key !== MetaSpace.Home)
            .filter((key) => !(key === MetaSpace.VideoRooms && !SettingsStore.getValue("feature_video_rooms")))
            .map((key) => {
                const Component = metaSpaceComponentMap[key];
@@ -317,7 +325,29 @@ const InnerSpacePanel = React.memo<IInnerSpacePanelProps>(
                role="tree"
                aria-label={_t("common|spaces")}
            >
-                {metaSpacesSection}
+                {homeSection}
+                {moduleSpaceItems.map((item) => (
+                    <li
+                        key={item.spaceKey}
+                        className={classNames("mx_SpaceItem", {
+                            collapsed: isPanelCollapsed,
+                        })}
+                        role="treeitem"
+                        aria-selected={false} // TODO
+                    >
+                        <SpaceButton
+                            {...item}
+                            isNarrow={isPanelCollapsed}
+                            size="32px"
+                            selected={activeSpace === item.spaceKey}
+                            onClick={() => {
+                                SpaceStore.instance.setActiveSpace(item.spaceKey);
+                                item.onSelected?.();
+                            }}
+                        />
+                    </li>
+                ))}
+                {otherMetaSpacesSection}
                {invites.map((s) => (
                    <SpaceItem
                        key={s.roomId}
@@ -345,27 +375,6 @@ const InnerSpacePanel = React.memo<IInnerSpacePanelProps>(
                    </Draggable>
                ))}
                {children}
-                {moduleSpaceItems.map((item) => (
-                    <li
-                        key={item.spaceKey}
-                        className={classNames("mx_SpaceItem", {
-                            collapsed: isPanelCollapsed,
-                        })}
-                        role="treeitem"
-                        aria-selected={false} // TODO
-                    >
-                        <SpaceButton
-                            {...item}
-                            isNarrow={isPanelCollapsed}
-                            size="32px"
-                            selected={activeSpace === item.spaceKey}
-                            onClick={() => {
-                                SpaceStore.instance.setActiveSpace(item.spaceKey);
-                                item.onSelected?.();
-                            }}
-                        />
-                    </li>
-                ))}
                {shouldShowComponent(UIComponent.CreateSpaces) && (
                    <CreateSpaceButton isPanelCollapsed={isPanelCollapsed} setPanelCollapsed={setPanelCollapsed} />
                )}
@@ -6,7 +6,7 @@ exports[`<ErrorView /> should match snapshot 1`] = `
    class="mx_ErrorView cpd-theme-light"
  >
    <img
-      alt="Element"
+      alt="HealthChat"
      class="mx_ErrorView_logo"
      height="160"
      src="themes/element/img/logos/element-app-logo.png"
@@ -40,7 +40,7 @@ exports[`<UnsupportedBrowserView /> should match snapshot 1`] = `
    class="mx_ErrorView cpd-theme-light"
  >
    <img
-      alt="Element"
+      alt="HealthChat"
      class="mx_ErrorView_logo"
      height="160"
      src="themes/element/img/logos/element-app-logo.png"
@@ -51,12 +51,12 @@ exports[`<UnsupportedBrowserView /> should match snapshot 1`] = `
      <h1
        class="_typography_6v6n8_153 _font-heading-md-semibold_6v6n8_112"
      >
-        Element does not support this browser
+        HealthChat does not support this browser
      </h1>
      <p
        class="_typography_6v6n8_153 _font-body-lg-regular_6v6n8_69"
      >
-        Element uses some browser features which are not available in your current browser. Try updating this browser if you're not using the latest version and try again.
+        HealthChat uses some browser features which are not available in your current browser. Try updating this browser if you're not using the latest version and try again.
      </p>
      <p
        class="_typography_6v6n8_153 _font-body-lg-regular_6v6n8_69"
@@ -136,84 +136,14 @@ exports[`<UnsupportedBrowserView /> should match snapshot 1`] = `
    <h2
      class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
    >
-      Use Element Desktop instead
-    </h2>
-    <div
-      class="_flex_4dswl_9 mx_ErrorView_flexContainer"
-      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-4x); --mx-flex-wrap: nowrap;"
-    >
-      <a
-        class="_button_187yx_8 _has-icon_187yx_57"
-        data-kind="secondary"
-        data-size="lg"
-        href="https://packages.element.io/desktop/install/macos/Element.dmg"
-        role="link"
-        tabindex="0"
-      >
-        <div
-          aria-hidden="true"
-          height="20"
-          width="20"
-        />
-        Mac
-      </a>
-      <a
-        class="_button_187yx_8 _has-icon_187yx_57"
-        data-kind="secondary"
-        data-size="lg"
-        href="https://packages.element.io/desktop/install/win32/x64/Element%20Setup.exe"
-        role="link"
-        tabindex="0"
-      >
-        <div
-          aria-hidden="true"
-          height="20"
-          width="20"
-        />
-        Windows (64-bit)
-      </a>
-      <a
-        class="_button_187yx_8 _has-icon_187yx_57"
-        data-kind="secondary"
-        data-size="lg"
-        href="https://packages.element.io/desktop/install/win32/arm64/Element%20Setup.exe"
-        role="link"
-        tabindex="0"
-      >
-        <div
-          aria-hidden="true"
-          height="20"
-          width="20"
-        />
-        Windows (ARM 64-bit)
-      </a>
-      <a
-        class="_button_187yx_8 _has-icon_187yx_57"
-        data-kind="secondary"
-        data-size="lg"
-        href="https://element.io/download#linux"
-        role="link"
-        tabindex="0"
-      >
-        <div
-          aria-hidden="true"
-          height="20"
-          width="20"
-        />
-        Linux
-      </a>
-    </div>
-    <h2
-      class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
-    >
-      Or use our mobile app
+      Use HealthChat on mobile instead
    </h2>
    <div
      class="_flex_4dswl_9 mx_ErrorView_flexContainer"
      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-6x); --mx-flex-wrap: nowrap;"
    >
      <a
-        href="https://apps.apple.com/app/vector/id1083446067"
+        href="https://apps.apple.com/ch/app/healthchat/id6743060078"
        rel="noreferrer noopener"
        target="_blank"
      >
@@ -224,7 +154,7 @@ exports[`<UnsupportedBrowserView /> should match snapshot 1`] = `
        />
      </a>
      <a
-        href="https://play.google.com/store/apps/details?id=im.vector.app"
+        href="https://play.google.com/store/apps/details?id=ch.healthchat.element"
        rel="noreferrer noopener"
        target="_blank"
      >
@@ -234,17 +164,6 @@ exports[`<UnsupportedBrowserView /> should match snapshot 1`] = `
          src="themes/element/img/download/google.svg"
        />
      </a>
-      <a
-        href="https://f-droid.org/repository/browse/?fdid=im.vector.app"
-        rel="noreferrer noopener"
-        target="_blank"
-      >
-        <img
-          alt="F-Droid"
-          height="64"
-          src="themes/element/img/download/fdroid.svg"
-        />
-      </a>
    </div>
  </div>
 </DocumentFragment>
@@ -263,7 +263,7 @@ exports[`<MatrixChat /> with a soft-logged-out session should show the soft-logo
          >
            <img
              alt="Element"
-              src="themes/element/img/logos/element-logo.svg"
+              src="themes/element/img/logos/element-logo.png"
            />
          </aside>
          <div
@@ -1030,7 +1030,7 @@ exports[`RoomView should hide the composer when hideComposer=true 1`] = `
    >
      <div
        class="mx_RoomView_body mx_MainSplit_timeline"
-        data-layout="group"
+        data-layout="bubble"
      >
        <header
          class="_flex_4dswl_9 mx_RoomHeader light-panel"
@@ -1259,7 +1259,7 @@ exports[`RoomView should hide the header when hideHeader=true 1`] = `
    >
      <div
        class="mx_RoomView_body mx_MainSplit_timeline"
-        data-layout="group"
+        data-layout="bubble"
      >
        <div
          class="mx_AutoHideScrollbar mx_AuxPanel"
@@ -1569,7 +1569,7 @@ exports[`RoomView should hide the pinned message banner when hidePinnedMessageBa
    >
      <div
        class="mx_RoomView_body mx_MainSplit_timeline"
-        data-layout="group"
+        data-layout="bubble"
      >
        <header
          class="_flex_4dswl_9 mx_RoomHeader light-panel"
@@ -2044,7 +2044,7 @@ exports[`RoomView should hide the right panel when hideRightPanel=true 1`] = `
    >
      <div
        class="mx_RoomView_body mx_MainSplit_timeline"
-        data-layout="group"
+        data-layout="bubble"
      >
        <header
          class="_flex_4dswl_9 mx_RoomHeader light-panel"
@@ -2519,7 +2519,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
    >
      <div
        class="mx_RoomView_body mx_MainSplit_timeline"
-        data-layout="group"
+        data-layout="bubble"
      >
        <header
          class="_flex_4dswl_9 mx_RoomHeader light-panel"
@@ -2733,7 +2733,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
    >
      <div
        class="mx_RoomView_body mx_MainSplit_timeline"
-        data-layout="group"
+        data-layout="bubble"
      >
        <header
          class="_flex_4dswl_9 mx_RoomHeader light-panel"
@@ -3248,7 +3248,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
    >
      <div
        class="mx_RoomView_body mx_MainSplit_call"
-        data-layout="group"
+        data-layout="bubble"
      >
        <header
          class="_flex_4dswl_9 mx_RoomHeader light-panel"
@@ -7,7 +7,7 @@ exports[`<AuthHeaderLogo /> should match snapshot 1`] = `
  >
    <img
      alt="Element"
-      src="themes/element/img/logos/element-logo.svg"
+      src="themes/element/img/logos/element-logo.png"
    />
  </aside>
 </DocumentFragment>
@@ -238,7 +238,7 @@ exports[`<RoomPreviewBar /> with an invite with an invited email when client has
    This invite to RoomPreviewBar-test-room was sent to test@test.com
  </h3>
  <p>
-    Share this email in Settings to receive invites directly in Element.
+    Share this email in Settings to receive invites directly in HealthChat.
  </p>
 </div>
 `;
@@ -283,7 +283,7 @@ exports[`<RoomPreviewBar /> with an invite with an invited email when client has
    This invite to RoomPreviewBar-test-room was sent to test@test.com
  </h3>
  <p>
-    Use an identity server in Settings to receive invites directly in Element.
+    Use an identity server in Settings to receive invites directly in HealthChat.
  </p>
 </div>
 `;
@@ -296,7 +296,7 @@ exports[`<RoomPreviewBar /> with an invite with an invited email when invitedEma
    This invite to RoomPreviewBar-test-room was sent to test@test.com which is not associated with your account
  </h3>
  <p>
-    Link this email with your account in Settings to receive invites directly in Element.
+    Link this email with your account in Settings to receive invites directly in HealthChat.
  </p>
 </div>
 `;
@@ -23,14 +23,14 @@ exports[`<EventIndexPanel /> when event indexing is not supported renders link t
    class="mx_SettingsSubsection_text"
  >
    <span>
-      Element can't securely cache encrypted messages locally while running in a web browser. Use 
+      HealthChat can't securely cache encrypted messages locally while running in a web browser. Use 
      <a
        class="mx_ExternalLink"
        href="https://element.io/download"
        rel="noreferrer noopener"
        target="_blank"
      >
-        Element Desktop
+        HealthChat Desktop
        <i
          class="mx_ExternalLink_icon"
        />
@@ -47,7 +47,7 @@ exports[`<EventIndexPanel /> when event indexing is supported but not installed
    class="mx_SettingsSubsection_text"
  >
    <span>
-      Element is missing some components required for securely caching encrypted messages locally. If you'd like to experiment with this feature, build a custom Element Desktop with 
+      HealthChat is missing some components required for securely caching encrypted messages locally. If you'd like to experiment with this feature, build a custom HealthChat Desktop with 
      <a
        class="mx_ExternalLink"
        href="https://github.com/vector-im/element-desktop/blob/develop/docs/native-node-modules.md#adding-seshat-for-search-in-e2e-encrypted-rooms"
@@ -824,7 +824,7 @@ exports[`<LoginWithQRFlow /> renders QR code 1`] = `
      </div>
      <ol>
        <li>
-          Open Element on your other device
+          Open HealthChat on your other device
        </li>
        <li>
          <span>
@@ -125,7 +125,7 @@ exports[`<DeleteKeyStoragePanel /> should match snapshot 1`] = `
              d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
            />
          </svg>
-          You will lose access to your encrypted messages if you are signed out of Element everywhere
+          You will lose access to your encrypted messages if you are signed out of HealthChat everywhere
        </li>
      </ul>
    </div>
@@ -179,7 +179,6 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                        class="_container_1qhtc_10"
                      >
                        <input
-                          checked=""
                          class="_input_1qhtc_18"
                          id="radix-_r_3_"
                          name="layout"
@@ -319,6 +318,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                        class="_container_1qhtc_10"
                      >
                        <input
+                          checked=""
                          class="_input_1qhtc_18"
                          id="radix-_r_c_"
                          name="layout"
@@ -601,6 +601,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                      <input
                        aria-describedby="radix-_r_v_"
                        class="_input_udcm8_24"
+                        disabled=""
                        id="radix-_r_u_"
                        name="compactLayout"
                        role="switch"
@@ -24,7 +24,7 @@ exports[`<MjolnirUserSettingsTab /> renders correctly when user has no ignored u
            </strong>
            <p>
              <span>
-                Add users and servers you want to ignore here. Use asterisks to have Element match any characters. For example, 
+                Add users and servers you want to ignore here. Use asterisks to have HealthChat match any characters. For example, 
                <code>
                  @bot:*
                </code>
@@ -137,14 +137,14 @@ exports[`<SecurityUserSettingsTab /> renders security section 1`] = `
                class="mx_SettingsSubsection_text"
              >
                <span>
-                  Element can't securely cache encrypted messages locally while running in a web browser. Use 
+                  HealthChat can't securely cache encrypted messages locally while running in a web browser. Use 
                  <a
                    class="mx_ExternalLink"
                    href="https://element.io/download"
                    rel="noreferrer noopener"
                    target="_blank"
                  >
-                    Element Desktop
+                    HealthChat Desktop
                    <i
                      class="mx_ExternalLink_icon"
                    />
@@ -4,11 +4,11 @@ exports[`AutoDiscoveryUtils authComponentStateForError should return expected er
 {
  "serverDeadError": <div>
    <strong>
-      Your Element is misconfigured
+      Your HealthChat is misconfigured
    </strong>
    <div>
      <span>
-        Ask your Element admin to check 
+        Ask your HealthChat admin to check 
        <a
          href="https://github.com/vector-im/element-web/blob/master/docs/config.md"
          rel="noreferrer noopener"
@@ -79,6 +79,6 @@ exports[`HTMLExport should export 1`] = `
        </html>"
 `;

-exports[`HTMLExport should have an SDK-branded destination file name 1`] = `"Element - My  Test  Room Welcome - Chat Export - 2022-11-17T16-58-32.517Z.zip"`;
+exports[`HTMLExport should have an SDK-branded destination file name 1`] = `"HealthChat - My  Test  Room Welcome - Chat Export - 2022-11-17T16-58-32.517Z.zip"`;

 exports[`HTMLExport should have an SDK-branded destination file name 2`] = `"BrandedChatWithSlashesForFun - My  Test  Room Welcome - Chat Export - 2022-11-17T16-58-32.517Z.zip"`;
@@ -8,7 +8,7 @@ exports[`showError should match snapshot 1`] = `
    class="mx_ErrorView cpd-theme-light"
  >
    <img
-      alt="Element"
+      alt="HealthChat"
      class="mx_ErrorView_logo"
      height="160"
      src="themes/element/img/logos/element-app-logo.png"