🔇 Undo temporary logs

🔨 Add profile section to the Cargo.toml file
🔊 Add another logs to the Dockerfile
2025-05-02 21:08:36 +02:00 · 2025-05-02 20:56:18 +02:00 · 2025-05-02 20:23:57 +02:00 · 2025-05-02 20:04:50 +02:00 · 2025-05-02 19:47:01 +02:00 · 2025-05-02 17:46:35 +02:00
46 changed files with 1308 additions and 573 deletions
--- a/.woodpecker/.audit.yaml
+++ b/.woodpecker/.audit.yaml
@@ -0,0 +1,18 @@
+variables:
+  - shared-config: &shared-config
+      image: rg.fr-par.scw.cloud/asr-projects/beau-gosse-du-92/ci-lint-audit:latest
+      pull: true
+
+steps:
+  - name: dependencies
+    <<: *shared-config
+    commands: |
+      cargo deny check
+    # Not ready to block PR on fail
+    failure: ignore
+
+when:
+  - event: pull_request
+
+depends_on:
+  - lint
--- a/.woodpecker/.dependencies.yaml
+++ b/.woodpecker/.dependencies.yaml
@@ -0,0 +1,18 @@
+steps:
+  - name: renovate
+    image: renovate/renovate
+    pull: true
+    commands:
+      - renovate $${CI_REPO}
+    environment:
+      RENOVATE_PLATFORM: gitea
+      RENOVATE_ENDPOINT: https://git.adrien.run
+      RENOVATE_GIT_AUTHOR: renovate-bot <renovate-bot@adrien.run>
+      RENOVATE_TOKEN:
+        from_secret: renovate-bot-mr-token
+      LOG_LEVEL: debug
+
+when:
+ - event: cron
+   cron: renovate
+ - event: manual
--- a/.woodpecker/.deploy.yaml
+++ b/.woodpecker/.deploy.yaml
@@ -16,10 +16,6 @@ steps:
      repo: rg.fr-par.scw.cloud/asr-projects/beau-gosse-du-92-web
      container: beau-gosse-du-92-web
      tag: ${CI_COMMIT_SHA}
-    secrets:
-        - kubernetes_cert
-        - kubernetes_server
-        - kubernetes_token

 when:
  - event: push
--- a/.woodpecker/.dockerize.yaml
+++ b/.woodpecker/.dockerize.yaml
@@ -6,6 +6,7 @@ steps:
      repo: asr-projects/beau-gosse-du-92-web
      tags: ${CI_COMMIT_SHA}
      auto_tag: true
+      cache: false
      username: nologin
      password:
        from_secret: registry-password
@@ -13,3 +14,6 @@ steps:
 when:
  - event: push
    branch: ${CI_REPO_DEFAULT_BRANCH}
+
+# depends_on:
+#   - validate
--- a/.woodpecker/.lint-audit-image.yaml
+++ b/.woodpecker/.lint-audit-image.yaml
@@ -0,0 +1,17 @@
+steps:
+  dockerize:
+    image: woodpeckerci/plugin-kaniko
+    settings:
+      registry: rg.fr-par.scw.cloud
+      repo: asr-projects/beau-gosse-du-92/ci-lint-audit
+      dockerfile: ./docker/Dockerfile.ci-lint-audit
+      tags: latest
+      auto_tag: false
+      cache: false
+      username: nologin
+      password:
+        from_secret: registry-password
+
+when:
+  - event: push
+    path: ./docker/Dockerfile.ci-lint-audit
--- a/.woodpecker/.lint.yaml
+++ b/.woodpecker/.lint.yaml
@@ -0,0 +1,45 @@
+variables:
+  - shared-config: &shared-config
+      image: rg.fr-par.scw.cloud/asr-projects/beau-gosse-du-92/ci-lint-audit:latest
+      pull: true
+
+steps:
+  - name: format
+    <<: *shared-config
+    commands: |
+      cargo fmt --all --check
+
+  - name: sort derives
+    <<: *shared-config
+    commands: |
+      cargo sort-derives --check
+
+  - name: clippy
+    <<: *shared-config
+    commands: |
+      cargo clippy --all --all-features -- -D warnings
+    # Not ready to block PR on fail
+    failure: ignore
+
+  - name: spellcheck
+    <<: *shared-config
+    commands: |
+      cargo spellcheck
+
+  - name: dependencies
+    <<: *shared-config
+    commands: |
+      cargo udeps
+
+  - name: dockerizable (web)
+    image: woodpeckerci/plugin-kaniko
+    settings:
+      registry: rg.fr-par.scw.cloud
+      repo: asr-projects/beau-gosse-du-92-web
+      username: nologin
+      password:
+        from_secret: registry-password
+      dry-run: true
+
+when:
+  - event: pull_request
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -2,10 +2,14 @@
 name = "beau-gosse-du-92"
 version = "0.1.0"
 edition = "2021"
+license = "AGPL-3.0-or-later"

 [features]
 default = []

+[package.metadata.spellcheck]
+config = "./spellcheck.toml"
+
 [dependencies]
 # Errors
 anyhow = "1.0.75"
@@ -40,39 +44,52 @@ tracing = "0.1.40"
 tracing-forest = "0.1.6"

 # SCSS -> CSS + usage in rust code
-turf = "0.8.0"
+turf = "0.9.3"

 # Dioxus
-dioxus = { version = "0.5", default-features = false }
-dioxus-free-icons = { version = "0.8", features = ["ionicons", "font-awesome-solid"] }
-modx = "0.1.2"
-
-[patch.crates-io]
-dioxus = { git = "https://github.com/DioxusLabs/dioxus.git" }
+dioxus-free-icons = { version = "0.9", features = ["ionicons", "font-awesome-solid"] }
+modx = "0.1.4"

 [target.'cfg(target_family = "wasm")'.dependencies]
 # Logging/tracing
 tracing-subscriber = { version = "0.3.18", features = ["env-filter"] }
 tracing-web = "0.1.3"
+
 # Dioxus
-dioxus = { features = ["web"] }
+dioxus = { version = "0.6.3", features = ["web"] }
 web-sys = "0.3.69"
+
 # Matrix
-matrix-sdk = { git = "https://github.com/matrix-org/matrix-rust-sdk.git", default-features = false, features = ["rustls-tls", "js"] }
+matrix-sdk = { git = "https://github.com/matrix-org/matrix-rust-sdk.git", rev = "fa6066b8", default-features = false, features = ["rustls-tls", "js"] }

 [target.'cfg(not(target_family = "wasm"))'.dependencies]
 # Utils
 time = "0.3.36"
+
 # Logging/tracing
 tracing-subscriber = { version = "0.3.18", features = ["env-filter", "time"] }
+
 # Dioxus
-dioxus = { features = ["desktop"] }
+dioxus = { version = "0.6.3", features = ["desktop"] }
+
 # Matrix
-matrix-sdk = { git = "https://github.com/matrix-org/matrix-rust-sdk.git", default-features = false, features = ["rustls-tls"] }
+matrix-sdk = { git = "https://github.com/matrix-org/matrix-rust-sdk.git", rev = "fa6066b8", default-features = false, features = ["rustls-tls"] }

 [build-dependencies]
 regex = "1.10.3"

+[profile]
+
+[profile.wasm-dev]
+inherits = "dev"
+opt-level = 1
+
+[profile.server-dev]
+inherits = "dev"
+
+[profile.android-dev]
+inherits = "dev"
+
 [package.metadata.turf]
 minify = true

--- a/Dioxus.toml
+++ b/Dioxus.toml
@@ -7,14 +7,7 @@ title = "BG92"

 [web.watcher]
 reload_html = true
-watch_path = ["public/index.html", "public/assets/index.css", "src"]
-
-[web.resource]
-style = ["assets/index.css"]
-
-[web.resource.dev]
-style = []
-script = []
+watch_path = ["Dioxus.toml", "public/index.html", "src"]

 [[web.proxy]]
 backend = "http://localhost:8000/api/"
--- a/13
+++ b/13
@@ -1,7 +1,4 @@
-FROM rust:latest AS builder
-
-# Homemade docker image providing the dioxus-cli
-COPY --from=rg.fr-par.scw.cloud/asr-projects/dioxus-cli:asr-0.5.2 /usr/local/bin/dx /usr/local/bin/dx
+FROM rg.fr-par.scw.cloud/asr-projects/dioxus-cli-0.6.3:latest AS builder

 ARG JOBS_NB=${JOBS_NB:-default}
 # Disable incremental compilation
@@ -10,16 +7,18 @@ ARG CARGO_INCREMENTAL=0

 WORKDIR /usr/src/beau-gosse-du-92

+# git is required by the git-version crate
 RUN apt update \
-    && apt install -y git-lfs
+    && apt install -y --no-install-recommends git git-lfs \
+    && apt clean

 COPY . .

-RUN /usr/local/bin/dx build -r --platform web -- -j ${JOBS_NB}
+RUN dx build -r --platform web -- -j ${JOBS_NB}


 FROM nginx:mainline-alpine-slim

 WORKDIR /usr/share/nginx/html

-COPY --from=builder /usr/src/beau-gosse-du-92/dist .
+COPY --from=builder /usr/src/beau-gosse-du-92/target/dx/beau-gosse-du-92/release/web/public .
--- a/README.md
+++ b/README.md
@@ -14,8 +14,8 @@ reinvent the wheel. This solution provides:
 - [Open-source protocol](https://spec.matrix.org/v1.9/).
 - Features expected for a messaging solution in 2024 (multi-devices management, emojis, integrations, redaction,
  spaces, ...).
- Multi-platforms clients (Android, iOS and Webclient).
- SDK available for each platform and a new Rust sdk supporting all the previously listed platforms.
+- Multi-platforms clients (Android, iOS and web-client).
+- SDK available for each platform and a new Rust SDK supporting all the previously listed platforms.
 - Conference stack ([Element Call](https://github.com/element-hq/element-call)).
 - End-to-end encryption.
 - Federation management.
@@ -28,16 +28,16 @@ API)](https://spec.matrix.org/v1.9/client-server-api/) protocol.

 Even if the Rust SDK is still in beta, it seems to be the future one (cf. [Element X - experience the future of
 Element!](https://element.io/blog/element-x-experience-the-future-of-element/)) and a good choice for someone starting a
-new client... from my point of vue.
+new client... from my point of view.

-The SDK choosen, a Rust (to avoid to use the bindings provided by the matrix-rust-sdk and mostly because I want to
+The SDK chosen, a Rust (to avoid to use the bindings provided by the matrix-rust-sdk and mostly because I want to
 learn Rust) graphical library should be selected. The [Dioxus](https://dioxuslabs.com/) one seems to do the job:

 - React-inspired library for Rust.
- Multi-platforms (use of Webview or WGPU-enabled renderers).
+- Multi-platforms (use of Web-view or WGPU-enabled renderers).

 # TODO

 - [ ] Test dioxus-radio.
 - [ ] Design system ?
- [ ] Implement MSN messenger features using Matrix.org sdk...
+- [ ] Implement MSN messenger features using Matrix.org SDK...
--- a/build.rs
+++ b/build.rs
@@ -15,26 +15,27 @@ fn main() {

    let out_dir = env::var("OUT_DIR").unwrap();

-    let mut tasks = Vec::new();
-
+    // let mut tasks = Vec::new();
+    let tasks = vec![
        // Global tokens
-    tasks.push(Task::new(
+        Task::new(
            PathBuf::from("src/ui/_base.scss"),
            Path::new(&out_dir).join("style_tokens.rs"),
            "style".to_string(),
-    ));
+        ),
        // variables defined by the Panel component
-    tasks.push(Task::new(
+        Task::new(
            PathBuf::from("src/ui/components/_panel.scss"),
            Path::new(&out_dir).join("style_component_panel.rs"),
            "panel".to_string(),
-    ));
+        ),
        // Variables set by the Conversations layout
-    tasks.push(Task::new(
+        Task::new(
            PathBuf::from("src/ui/layouts/conversations.scss"),
            Path::new(&out_dir).join("style_layout_conversations.rs"),
            "conversations".to_string(),
-    ));
+        ),
+    ];

    export_variables(tasks)
 }
--- a/deny.toml
+++ b/deny.toml
@@ -0,0 +1,298 @@
+# This template contains all of the possible sections and their default values
+
+# Note that all fields that take a lint level have these possible values:
+# * deny - An error will be produced and the check will fail
+# * warn - A warning will be produced, but the check will not fail
+# * allow - No warning or error will be produced, though in some cases a note
+# will be
+
+# The values provided in this template are the default values that will be used
+# when any section or field is not specified in your own configuration
+
+# Root options
+
+# The graph table configures how the dependency graph is constructed and thus
+# which crates the checks are performed against
+[graph]
+# If 1 or more target triples (and optionally, target_features) are specified,
+# only the specified targets will be checked when running `cargo deny check`.
+# This means, if a particular package is only ever used as a target specific
+# dependency, such as, for example, the `nix` crate only being used via the
+# `target_family = "unix"` configuration, that only having windows targets in
+# this list would mean the nix crate, as well as any of its exclusive
+# dependencies not shared by any other crates, would be ignored, as the target
+# list here is effectively saying which targets you are building for.
+targets = [
+    # The triple can be any string, but only the target triples built in to
+    # rustc (as of 1.40) can be checked against actual config expressions
+    #"x86_64-unknown-linux-musl",
+    # You can also specify which target_features you promise are enabled for a
+    # particular target. target_features are currently not validated against
+    # the actual valid features supported by the target architecture.
+    #{ triple = "wasm32-unknown-unknown", features = ["atomics"] },
+]
+# When creating the dependency graph used as the source of truth when checks are
+# executed, this field can be used to prune crates from the graph, removing them
+# from the view of cargo-deny. This is an extremely heavy hammer, as if a crate
+# is pruned from the graph, all of its dependencies will also be pruned unless
+# they are connected to another crate in the graph that hasn't been pruned,
+# so it should be used with care. The identifiers are [Package ID Specifications]
+# (https://doc.rust-lang.org/cargo/reference/pkgid-spec.html)
+#exclude = []
+# If true, metadata will be collected with `--all-features`. Note that this can't
+# be toggled off if true, if you want to conditionally enable `--all-features` it
+# is recommended to pass `--all-features` on the cmd line instead
+all-features = false
+# If true, metadata will be collected with `--no-default-features`. The same
+# caveat with `all-features` applies
+no-default-features = false
+# If set, these feature will be enabled when collecting metadata. If `--features`
+# is specified on the cmd line they will take precedence over this option.
+#features = []
+
+# The output table provides options for how/if diagnostics are outputted
+[output]
+# When outputting inclusion graphs in diagnostics that include features, this
+# option can be used to specify the depth at which feature edges will be added.
+# This option is included since the graphs can be quite large and the addition
+# of features from the crate(s) to all of the graph roots can be far too verbose.
+# This option can be overridden via `--feature-depth` on the cmd line
+feature-depth = 1
+
+# This section is considered when running `cargo deny check advisories`
+# More documentation for the advisories section can be found here:
+# https://embarkstudios.github.io/cargo-deny/checks/advisories/cfg.html
+[advisories]
+# The path where the advisory databases are cloned/fetched into
+#db-path = "$CARGO_HOME/advisory-dbs"
+# The url(s) of the advisory databases to use
+#db-urls = ["https://github.com/rustsec/advisory-db"]
+# A list of advisory IDs to ignore. Note that ignored advisories will still
+# output a note when they are encountered.
+ignore = [
+    #"RUSTSEC-0000-0000",
+    #{ id = "RUSTSEC-0000-0000", reason = "you can specify a reason the advisory is ignored" },
+    #"a-crate-that-is-yanked@0.1.1", # you can also ignore yanked crate versions if you wish
+    #{ crate = "a-crate-that-is-yanked@0.1.1", reason = "you can specify why you are ignoring the yanked crate" },
+]
+# If this is true, then cargo deny will use the git executable to fetch advisory database.
+# If this is false, then it uses a built-in git library.
+# Setting this to true can be helpful if you have special authentication requirements that cargo-deny does not support.
+# See Git Authentication for more information about setting up git authentication.
+#git-fetch-with-cli = true
+
+# This section is considered when running `cargo deny check licenses`
+# More documentation for the licenses section can be found here:
+# https://embarkstudios.github.io/cargo-deny/checks/licenses/cfg.html
+[licenses]
+version = 2
+# List of explicitly allowed licenses
+# See https://spdx.org/licenses/ for list of possible licenses
+# [possible values: any SPDX 3.11 short identifier (+ optional exception)].
+allow = [
+  # Free software licenses compatible with (A)GPL.
+  # List extracted from: https://www.gnu.org/licenses/license-list.en.html#GPLCompatibleLicenses
+  # "GPL-3.0",
+  # "GPL-2.0",
+  "LGPL-3.0",
+  # "LGPL-2.1",
+  "AGPL-3.0",
+  # "FSFAP",
+  "Apache-2.0",
+  "Apache-2.0 WITH LLVM-exception",
+  # "Artistic-2.0",
+  # "ClArtistic",
+  # "Sleepycat",
+  "BSL-1.0",
+  "BSD-3-Clause",
+  # "CECILL-2.0",
+  # "BSD-3-Clause-Clear",
+  # "ECL-2.0",
+  # "EFL-2.0",
+  # "EUDatagrid",
+  "MIT",
+  "BSD-2-Clause",
+  # "FTL",
+  # "HPND",
+  # "iMatix",
+  # "Imlib2",
+  # "IJG",
+  # "Intel",
+  "ISC",
+  "MPL-2.0",
+  "NCSA",
+  # "OLDAP-2.7",
+  # "NIST-PD",
+  # "CC-PDDC",
+  "CC0-1.0",
+  # "Python-2.0",
+  # "Ruby",
+  # "SGI-B-2.0",
+  # "SMLNJ",
+  # "UPL-1.0",
+  "Unlicense",
+  # "Vim",
+  # "W3C",
+  # "WTFPL",
+  # "X11",
+  # "XFree86-1.1",
+  "Zlib",
+  # "zlib-acknowledgement",
+  # "ZPL-2.0",
+  # "ZPL-2.1",
+  # Not expressely listed as (A)GPL compatible in the page above, but
+  # according to https://opensource.org/licenses/0BSD it is a modification
+  # of the ISC license, which is compatible. Its text is also extremely
+  # simple and allows using the code for any purpose
+  "0BSD",
+  # Permissive license used by the Unicode consortium, similar in spirit
+  # to other permissive licenses:
+  # https://spdx.org/licenses/Unicode-DFS-2016.html
+  "Unicode-DFS-2016",
+  # Permissive license used by the Unicode consortium, similar in spirit
+  # to other permissive licenses:
+  # https://spdx.org/licenses/Unicode-3.0.html
+  "Unicode-3.0",
+]
+# The confidence threshold for detecting a license from license text.
+# The higher the value, the more closely the license text must be to the
+# canonical license text of a valid SPDX license file.
+# [possible values: any between 0.0 and 1.0].
+confidence-threshold = 0.8
+# Allow 1 or more licenses on a per-crate basis, so that particular licenses
+# aren't accepted for every possible crate as with the normal allow list
+exceptions = [
+    # Each entry is the crate and version constraint, and its specific allow
+    # list
+    #{ allow = ["Zlib"], crate = "adler32" },
+]
+
+# Some crates don't have (easily) machine readable licensing information,
+# adding a clarification entry for it allows you to manually specify the
+# licensing information
+# [[licenses.clarify]]
+# The package spec the clarification applies to
+# crate = "ring"
+# The SPDX expression for the license requirements of the crate
+# expression = "MIT AND ISC AND OpenSSL"
+# One or more files in the crate's source used as the "source of truth" for
+# the license expression. If the contents match, the clarification will be used
+# when running the license check, otherwise the clarification will be ignored
+# and the crate will be checked normally, which may produce warnings or errors
+# depending on the rest of your configuration
+# license-files = [
+#Each entry is a crate relative path, and the (opaque) hash of its contents
+#   { path = "LICENSE", hash = 0xbd0eed23 }
+# ]
+
+[licenses.private]
+# If true, ignores workspace crates that aren't published, or are only
+# published to private registries.
+# To see how to mark a crate as unpublished (to the official registry),
+# visit https://doc.rust-lang.org/cargo/reference/manifest.html#the-publish-field.
+ignore = false
+# One or more private registries that you might publish crates to, if a crate
+# is only published to private registries, and ignore is true, the crate will
+# not have its license(s) checked
+registries = [
+    #"https://sekretz.com/registry
+]
+
+# This section is considered when running `cargo deny check bans`.
+# More documentation about the 'bans' section can be found here:
+# https://embarkstudios.github.io/cargo-deny/checks/bans/cfg.html
+[bans]
+# Lint level for when multiple versions of the same crate are detected
+multiple-versions = "warn"
+# Lint level for when a crate version requirement is `*`
+wildcards = "allow"
+# The graph highlighting used when creating dotgraphs for crates
+# with multiple versions
+# * lowest-version - The path to the lowest versioned duplicate is highlighted
+# * simplest-path - The path to the version with the fewest edges is highlighted
+# * all - Both lowest-version and simplest-path are used
+highlight = "all"
+# The default lint level for `default` features for crates that are members of
+# the workspace that is being checked. This can be overridden by allowing/denying
+# `default` on a crate-by-crate basis if desired.
+workspace-default-features = "allow"
+# The default lint level for `default` features for external crates that are not
+# members of the workspace. This can be overridden by allowing/denying `default`
+# on a crate-by-crate basis if desired.
+external-default-features = "allow"
+# List of crates that are allowed. Use with care!
+allow = [
+    #"ansi_term@0.11.0",
+    #{ crate = "ansi_term@0.11.0", reason = "you can specify a reason it is allowed" },
+]
+# List of crates to deny
+deny = [
+    #"ansi_term@0.11.0",
+    #{ crate = "ansi_term@0.11.0", reason = "you can specify a reason it is banned" },
+    # Wrapper crates can optionally be specified to allow the crate when it
+    # is a direct dependency of the otherwise banned crate
+    #{ crate = "ansi_term@0.11.0", wrappers = ["this-crate-directly-depends-on-ansi_term"] },
+]
+
+# List of features to allow/deny
+# Each entry the name of a crate and a version range. If version is
+# not specified, all versions will be matched.
+#[[bans.features]]
+#crate = "reqwest"
+# Features to not allow
+#deny = ["json"]
+# Features to allow
+#allow = [
+#    "rustls",
+#    "__rustls",
+#    "__tls",
+#    "hyper-rustls",
+#    "rustls",
+#    "rustls-pemfile",
+#    "rustls-tls-webpki-roots",
+#    "tokio-rustls",
+#    "webpki-roots",
+#]
+# If true, the allowed features must exactly match the enabled feature set. If
+# this is set there is no point setting `deny`
+#exact = true
+
+# Certain crates/versions that will be skipped when doing duplicate detection.
+skip = [
+    #"ansi_term@0.11.0",
+    #{ crate = "ansi_term@0.11.0", reason = "you can specify a reason why it can't be updated/removed" },
+]
+# Similarly to `skip` allows you to skip certain crates during duplicate
+# detection. Unlike skip, it also includes the entire tree of transitive
+# dependencies starting at the specified crate, up to a certain depth, which is
+# by default infinite.
+skip-tree = [
+    #"ansi_term@0.11.0", # will be skipped along with _all_ of its direct and transitive dependencies
+    #{ crate = "ansi_term@0.11.0", depth = 20 },
+]
+
+# This section is considered when running `cargo deny check sources`.
+# More documentation about the 'sources' section can be found here:
+# https://embarkstudios.github.io/cargo-deny/checks/sources/cfg.html
+[sources]
+# Lint level for what to happen when a crate from a crate registry that is not
+# in the allow list is encountered
+unknown-registry = "warn"
+# Lint level for what to happen when a crate from a git repository that is not
+# in the allow list is encountered
+unknown-git = "warn"
+# List of URLs for allowed crate registries. Defaults to the crates.io index
+# if not specified. If it is specified but empty, no registries are allowed.
+allow-registry = ["https://github.com/rust-lang/crates.io-index"]
+# List of URLs for allowed Git repositories
+allow-git = [
+  "https://github.com/matrix-org/matrix-rust-sdk.git"
+]
+
+[sources.allow-org]
+# github.com organizations to allow git sources for
+github = []
+# gitlab.com organizations to allow git sources for
+gitlab = []
+# bitbucket.org organizations to allow git sources for
+bitbucket = []
--- a/docker/Dockerfile.ci-lint-audit
+++ b/docker/Dockerfile.ci-lint-audit
@@ -0,0 +1,26 @@
+FROM rust:1.86 AS builder
+
+RUN apt update \
+    && apt install -y --no-install-recommends libclang-dev hunspell \
+    && apt clean
+
+RUN rustup default nightly \
+    && rustup component add rustfmt clippy
+
+RUN cargo install cargo-binstall
+
+RUN cargo binstall cargo-sort-derives cargo-spellcheck cargo-udeps cargo-deny
+
+
+FROM debian:trixie-slim
+
+RUN apt update \
+    && apt install -y --no-install-recommends ca-certificates git rustup  build-essential \
+    libssl-dev pkg-config libglib2.0-0 libpango-1.0-0 libatk1.0-dev libgdk-pixbuf-2.0-dev \
+    libcairo2-dev libgtk-3-dev libsoup-3.0-dev libwebkit2gtk-4.1-dev \
+    && apt clean
+
+COPY --from=builder /usr/local/rustup/toolchains/nightly-x86_64-unknown-linux-gnu/ /root/.rustup/toolchains/nightly-x86_64-unknown-linux-gnu/
+COPY --from=builder /usr/local/cargo/bin /root/.cargo/bin/
+
+RUN rustup default nightly
--- a/public/assets/index.css
+++ b/public/assets/index.css
@@ -1,207 +0,0 @@
-
-@font-face {
-    src: url("../fonts/Geist/Geist-Medium.woff2") format("woff2");
-    font-family: "Geist";
-    font-weight: normal;
-}
-
-@font-face {
-    src: url("../fonts/Geist/Geist-Bold.woff2") format("woff2");
-    font-family: "Geist";
-    font-weight: bold;
-}
-
-html, body {
-    height: 100%;
-    width: 100%;
-
-    margin: 0;
-
-    font-family: "Geist";
-    font-weight: normal;
-}
-
-#main {
-    height: 100%;
-    width: 100%;
-}
-
-@keyframes multicolor {
-    0%  { fill: #1DB2CF; /* color-primary-100 */ }
-    33% { fill: #7E6BB6; /* color-secondary-100 */ }
-    66% { fill: #D53583; /* color-ternary-100 */ }
-}
-
-:root {
-    --wallpaper-pattern-height: 128px;
-    --spinner-height: 5%;
-    --window-center-pos: calc(50% + (var(--wallpaper-pattern-height) / 2) - (var(--spinner-height) / 2));
-}
-
-/* @media (0px < height <= calc(var(--wallpaper-pattern-height) * 5)) { */
-@media (min-height: 0px) and (max-height: 640px) {
-    :root {
-        --spinner-top: var(--window-center-pos);
-    }
-}
-/* @media (calc($wallpaper-pattern-height * 5) < height <= calc($wallpaper-pattern-height * 6)) { */
-@media (min-height: 641px) and (max-height: 768px) {
-    :root {
-        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 2));
-    }
-}
-/* @media (calc($wallpaper-pattern-height * 6) < height <= calc($wallpaper-pattern-height * 8)) { */
-@media (min-height: 769px) and (max-height: 1024px) {
-    :root {
-        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 2));
-    }
-}
-/* @media (calc($wallpaper-pattern-height * 8) < height <= calc($wallpaper-pattern-height * 10)) { */
-@media (min-height: 1025px) and (max-height: 1280px) {
-    :root {
-        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 3));
-    }
-}
-/* @media (calc($wallpaper-pattern-height * 10) < height <= calc($wallpaper-pattern-height * 12)) { */
-@media (min-height: 1281px) and (max-height: 1536px) {
-    :root {
-        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 4));
-    }
-}
-/* @media (calc($wallpaper-pattern-height * 12) < height <= calc($wallpaper-pattern-height * 14)) { */
-@media (min-height: 1537px) and (max-height: 1792px) {
-    :root {
-        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 5));
-    }
-}
-/* @media (calc($wallpaper-pattern-height * 14) < height <= calc($wallpaper-pattern-height * 16)) { */
-@media (min-height: 1793px) and (max-height: 2048px) {
-    :root {
-        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 6));
-    }
-}
-/* @media (calc($wallpaper-pattern-height * 16) < height <= calc($wallpaper-pattern-height * 18)) { */
-@media (min-height: 2049px) and (max-height: 2304px) {
-    :root {
-        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 7));
-    }
-}
-/* @media (calc($wallpaper-pattern-height * 18) < height <= calc($wallpaper-pattern-height * 20)) { */
-@media (min-height: 2305px) and (max-height: 2560px) {
-    :root {
-        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 8));
-    }
-}
-/* @media (calc($wallpaper-pattern-height * 20) < height <= calc($wallpaper-pattern-height * 22)) { */
-@media (min-height: 2561px) and (max-height: 2816px) {
-    :root {
-        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 9));
-    }
-}
-/* @media (calc($wallpaper-pattern-height * 22) < height <= calc($wallpaper-pattern-height * 24)) { */
-@media (min-height: 2817px) and (max-height: 3072px) {
-    :root {
-        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 10));
-    }
-}
-/* @media (calc($wallpaper-pattern-height * 24) < height <= calc($wallpaper-pattern-height * 26)) { */
-@media (min-height: 3073px) and (max-height: 3328px) {
-    :root {
-        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 11));
-    }
-}
-/* @media (calc($wallpaper-pattern-height * 26) < height <= calc($wallpaper-pattern-height * 28)) { */
-@media (min-height: 3329px) and (max-height: 3584px) {
-    :root {
-        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 12));
-    }
-}
-/* @media (calc($wallpaper-pattern-height * 28) < height <= calc($wallpaper-pattern-height * 30)) { */
-@media (min-height: 3585px) and (max-height: 3840px) {
-    :root {
-        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 13));
-    }
-}
-/* @media (calc($wallpaper-pattern-height * 30) < height <= calc($wallpaper-pattern-height * 32)) { */
-@media (min-height: 3841px) and (max-height: 4096px) {
-    :root {
-        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 14));
-    }
-}
-/* @media (calc($wallpaper-pattern-height * 32) < height <= calc($wallpaper-pattern-height * 34)) { */
-@media (min-height: 4097px) and (max-height: 4352px) {
-    :root {
-        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 15));
-    }
-}
-/* @media (calc($wallpaper-pattern-height * 34) < height <= calc($wallpaper-pattern-height * 36)) { */
-@media (min-height: 4353px) and (max-height: 4608px) {
-    :root {
-        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 16));
-    }
-}
-/* @media (calc($wallpaper-pattern-height * 36) < height <= calc($wallpaper-pattern-height * 38)) { */
-@media (min-height: 4609px) and (max-height: 4864px) {
-    :root {
-        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 17));
-    }
-}
-/* @media (calc($wallpaper-pattern-height * 38) < height <= calc($wallpaper-pattern-height * 40)) { */
-@media (min-height: 4865px) and (max-height: 5120px) {
-    :root {
-        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 18));
-    }
-}
-
-.loader {
-    height: 100%;
-    width: 100%;
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    .wallpaper {
-        height: 100%;
-        width: 100%;
-        z-index: -1;
-
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        overflow: hidden;
-
-        .content {
-            background-image: url("../images/wallpaper-pattern.svg");
-            background-position: center;
-
-            width: 150%;
-            height: 150%;
-        }
-    }
-
-    .spinner {
-        height: var(--spinner-height);
-        aspect-ratio: 2;
-
-        position: absolute;
-
-        top: var(--spinner-top);
-
-        svg {
-            --fps: 4;
-            --duration_sec: 3;
-            --steps: calc(var(--duration_sec) * var(--fps));
-
-            height: 100%;
-            width: 100%;
-
-            fill: #1DB2CF; /* color-primary-100 */
-            stroke: #1B1B1B; /* greyscale-90 */
-
-            animation: 3s multicolor linear infinite;
-            animation-timing-function: steps(var(--steps), end);
-        }
-    }
-}
--- a/public/images/wallpaper-pattern.svg
+++ b/public/images/wallpaper-pattern.svg
@@ -1,4 +1,3 @@
-<!-- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1152 128"> -->
 <svg xmlns="http://www.w3.org/2000/svg" height="128" width="384" viewBox="0 0 384 128">
  <pattern id="p" width="384" height="128" patternUnits="userSpaceOnUse" stroke="#1B1B1B" stroke-linejoin="round" stroke-width="4">
    <path fill="#1DB2CF" d="M 9.736 -15 L -30 3.337 l 23.642 -0.088 L -10.212 15 L 30 -3.425 H 6.834 L 9.736 -15 Z"/>
@@ -6,9 +5,9 @@
    <path fill="#1DB2CF" d="M 393.736 -15 L 354 3.337 l 23.642 -0.088 L 373.788 15 L 414 -3.425 H 390.834 L 393.736 -15 Z"/>
    <path fill="#7E6BB6" d="M 105.736 50 L 66 68.337 l 23.642 -0.088 L 85.788 80 L 126 61.575 H 102.834 L 105.736 50 Z"/>
    <path fill="#7E6BB6" d="M 297.736 50 L 258 68.337 l 23.642 -0.088 L 277.788 80 L 318 61.575 H 294.834 L 297.736 50 Z"/>
-    <path fill="#1DB2CF" d="M 9.736 114 L -30 132.337 l 23.642 -0.088 L -10.212 144 L 30 125.575 H 6.834 L 9.736 114 Z"/>
-    <path fill="#D53583" d="M 201.736 114 L 162 132.337 l 23.642 -0.088 L 181.788 144 L 222 125.575 H 198.834 L 201.736 114 Z"/>
-    <path fill="#1DB2CF" d="M 393.736 114 L 354 132.337 l 23.642 -0.088 L 373.788 144 L 414 125.575 H 390.834 L 393.736 114 Z"/>
+    <path fill="#1DB2CF" d="M 9.736 113 L -30 131.337 l 23.642 -0.088 L -10.212 143 L 30 124.575 H 6.834 L 9.736 113 Z"/>
+    <path fill="#D53583" d="M 201.736 113 L 162 131.337 l 23.642 -0.088 L 181.788 143 L 222 124.575 H 198.834 L 201.736 113 Z"/>
+    <path fill="#1DB2CF" d="M 393.736 113 L 354 131.337 l 23.642 -0.088 L 373.788 143 L 414 124.575 H 390.834 L 393.736 113 Z"/>
  </pattern>
   <rect fill="url(#p)" width="100%" height="100%"/>
 </svg>
--- a/public/index.html
+++ b/public/index.html
@@ -1,16 +1,207 @@
 <!DOCTYPE html>
 <html>
    <head>
-        <!-- Hack to avoid the addition of the script part by dioxus-cli -->
-        <!-- <title>{base_path}</title> -->
-        <!-- <title>{app_name}</title> -->
-
-        <title></title>
+        <title>{app_name}</title>
        <meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta charset="UTF-8" />
-        {style_include}
-        {script_include}
+        <style>
+         html, body {
+            height: 100%;
+            width: 100%;
+
+            margin: 0;
+
+            font-family: "Geist";
+            font-weight: normal;
+         }
+
+         #main {
+            height: 100%;
+            width: 100%;
+         }
+
+         @keyframes multicolor {
+            0%  { fill: #1DB2CF; /* color-primary-100 */ }
+            33% { fill: #7E6BB6; /* color-secondary-100 */ }
+            66% { fill: #D53583; /* color-ternary-100 */ }
+         }
+
+         :root {
+            --wallpaper-pattern-height: 128px;
+            --spinner-height: 5%;
+            --window-center-pos: calc(50% + (var(--wallpaper-pattern-height) / 2) - (var(--spinner-height) / 2));
+         }
+
+         /* @media (0px < height <= calc(var(--wallpaper-pattern-height) * 5)) { */
+         @media (min-height: 0px) and (max-height: 640px) {
+             :root {
+                 --spinner-top: var(--window-center-pos);
+             }
+         }
+         /* @media (calc($wallpaper-pattern-height * 5) < height <= calc($wallpaper-pattern-height * 6)) { */
+         @media (min-height: 641px) and (max-height: 768px) {
+             :root {
+                 --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 2));
+             }
+         }
+         /* @media (calc($wallpaper-pattern-height * 6) < height <= calc($wallpaper-pattern-height * 8)) { */
+         @media (min-height: 769px) and (max-height: 1024px) {
+             :root {
+                 --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 2));
+             }
+         }
+         /* @media (calc($wallpaper-pattern-height * 8) < height <= calc($wallpaper-pattern-height * 10)) { */
+         @media (min-height: 1025px) and (max-height: 1280px) {
+             :root {
+                 --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 3));
+             }
+         }
+         /* @media (calc($wallpaper-pattern-height * 10) < height <= calc($wallpaper-pattern-height * 12)) { */
+         @media (min-height: 1281px) and (max-height: 1536px) {
+             :root {
+                 --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 4));
+             }
+         }
+         /* @media (calc($wallpaper-pattern-height * 12) < height <= calc($wallpaper-pattern-height * 14)) { */
+         @media (min-height: 1537px) and (max-height: 1792px) {
+             :root {
+                 --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 5));
+             }
+         }
+         /* @media (calc($wallpaper-pattern-height * 14) < height <= calc($wallpaper-pattern-height * 16)) { */
+         @media (min-height: 1793px) and (max-height: 2048px) {
+             :root {
+                 --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 6));
+             }
+         }
+         /* @media (calc($wallpaper-pattern-height * 16) < height <= calc($wallpaper-pattern-height * 18)) { */
+         @media (min-height: 2049px) and (max-height: 2304px) {
+             :root {
+                 --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 7));
+             }
+         }
+         /* @media (calc($wallpaper-pattern-height * 18) < height <= calc($wallpaper-pattern-height * 20)) { */
+         @media (min-height: 2305px) and (max-height: 2560px) {
+             :root {
+                 --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 8));
+             }
+         }
+         /* @media (calc($wallpaper-pattern-height * 20) < height <= calc($wallpaper-pattern-height * 22)) { */
+         @media (min-height: 2561px) and (max-height: 2816px) {
+             :root {
+                 --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 9));
+             }
+         }
+         /* @media (calc($wallpaper-pattern-height * 22) < height <= calc($wallpaper-pattern-height * 24)) { */
+         @media (min-height: 2817px) and (max-height: 3072px) {
+             :root {
+                 --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 10));
+             }
+         }
+         /* @media (calc($wallpaper-pattern-height * 24) < height <= calc($wallpaper-pattern-height * 26)) { */
+         @media (min-height: 3073px) and (max-height: 3328px) {
+             :root {
+                 --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 11));
+             }
+         }
+         /* @media (calc($wallpaper-pattern-height * 26) < height <= calc($wallpaper-pattern-height * 28)) { */
+         @media (min-height: 3329px) and (max-height: 3584px) {
+             :root {
+                 --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 12));
+             }
+         }
+         /* @media (calc($wallpaper-pattern-height * 28) < height <= calc($wallpaper-pattern-height * 30)) { */
+         @media (min-height: 3585px) and (max-height: 3840px) {
+             :root {
+                 --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 13));
+             }
+         }
+         /* @media (calc($wallpaper-pattern-height * 30) < height <= calc($wallpaper-pattern-height * 32)) { */
+         @media (min-height: 3841px) and (max-height: 4096px) {
+             :root {
+                 --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 14));
+             }
+         }
+         /* @media (calc($wallpaper-pattern-height * 32) < height <= calc($wallpaper-pattern-height * 34)) { */
+         @media (min-height: 4097px) and (max-height: 4352px) {
+             :root {
+                 --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 15));
+             }
+         }
+         /* @media (calc($wallpaper-pattern-height * 34) < height <= calc($wallpaper-pattern-height * 36)) { */
+         @media (min-height: 4353px) and (max-height: 4608px) {
+             :root {
+                 --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 16));
+             }
+         }
+         /* @media (calc($wallpaper-pattern-height * 36) < height <= calc($wallpaper-pattern-height * 38)) { */
+         @media (min-height: 4609px) and (max-height: 4864px) {
+             :root {
+                 --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 17));
+             }
+         }
+         /* @media (calc($wallpaper-pattern-height * 38) < height <= calc($wallpaper-pattern-height * 40)) { */
+         @media (min-height: 4865px) and (max-height: 5120px) {
+             :root {
+                 --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 18));
+             }
+         }
+
+         .loader {
+            height: 100%;
+            width: 100%;
+
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+             .wallpaper {
+                 height: 100%;
+                 width: 100%;
+                 z-index: -1;
+
+                 display: flex;
+                 align-items: center;
+                 justify-content: center;
+
+                 overflow: hidden;
+
+                 .content {
+                     background-image: url("data:image/svg+xml, <svg xmlns='http://www.w3.org/2000/svg' height='128' width='384' viewBox='0 0 384 128'><pattern id='p' width='384' height='128' patternUnits='userSpaceOnUse' stroke='%231B1B1B' stroke-linejoin='round' stroke-width='4'><path fill='%231DB2CF' d='M 9.736 -15 L -30 3.337 l 23.642 -0.088 L -10.212 15 L 30 -3.425 H 6.834 L 9.736 -15 Z'/><path fill='%23D53583' d='M 201.736 -15 L 162 3.337 l 23.642 -0.088 L 181.788 15 L 222 -3.425 H 198.834 L 201.736 -15 Z'/><path fill='%231DB2CF' d='M 393.736 -15 L 354 3.337 l 23.642 -0.088 L 373.788 15 L 414 -3.425 H 390.834 L 393.736 -15 Z'/><path fill='%237E6BB6' d='M 105.736 50 L 66 68.337 l 23.642 -0.088 L 85.788 80 L 126 61.575 H 102.834 L 105.736 50 Z'/><path fill='%237E6BB6' d='M 297.736 50 L 258 68.337 l 23.642 -0.088 L 277.788 80 L 318 61.575 H 294.834 L 297.736 50 Z'/><path fill='%231DB2CF' d='M 9.736 113 L -30 131.337 l 23.642 -0.088 L -10.212 143 L 30 124.575 H 6.834 L 9.736 113 Z'/><path fill='%23D53583' d='M 201.736 113 L 162 131.337 l 23.642 -0.088 L 181.788 143 L 222 124.575 H 198.834 L 201.736 113 Z'/><path fill='%231DB2CF' d='M 393.736 113 L 354 131.337 l 23.642 -0.088 L 373.788 143 L 414 124.575 H 390.834 L 393.736 113 Z'/></pattern><rect fill='url(%23p)' width='100%' height='100%'/></svg>");
+                     background-position: center;
+                     backgrond-size: var(--wallpaper-pattern-height);
+
+                     width: 150%;
+                     height: 150%;
+                 }
+             }
+
+             .spinner {
+                 height: var(--spinner-height);
+                 aspect-ratio: 2;
+
+                 position: absolute;
+
+                 top: var(--spinner-top);
+
+                 svg {
+                     --fps: 4;
+                     --duration_sec: 3;
+                     --steps: calc(var(--duration_sec) * var(--fps));
+
+                     height: 100%;
+                     width: 100%;
+
+                     fill: #1DB2CF; /* color-primary-100 */
+                     stroke: #1B1B1B; /* greyscale-90 */
+
+                     animation: 3s multicolor linear infinite;
+                     animation-timing-function: steps(var(--steps), end);
+                 }
+             }
+         }
+        </style>
    </head>
    <body>
        <div id="main">
@@ -19,7 +210,7 @@
                    <div class="content"></div>
                </div>
                <div class="spinner">
-                    <svg viewBox="0 0 184 94" xmlns="http://www.w3.org/2000/svg">
+                    <svg xmlns="http://www.w3.org/2000/svg" width='184' height='94' viewBox="0 0 184 94">
                        <path
                            stroke-linejoin="round"
                            stroke-width="6"
@@ -29,25 +220,5 @@
                </div>
            </div>
        </div>
-        <script type="module" async>
-         import init from "{base_path}/assets/dioxus/beau-gosse-du-92.js";
-
-         // Ensure that everything needed to render preloader has been downloaded
-         // before fetching the wasm bundle.
-         window.onload=function() {
-             init("{base_path}/assets/dioxus/beau-gosse-du-92_bg.wasm").then(
-                 wasm => {
-                     const preloader = document.getElementById("preloader");
-                     if (preloader !== undefined) {
-                         preloader.style.display = 'none';
-                     }
-
-                     if (wasm.__wbindgen_start == undefined) {
-                         wasm.main();
-                     }
-                 }
-             );
-         }
-        </script>
    </body>
 </html>
--- a/renovate.json
+++ b/renovate.json
@@ -0,0 +1,3 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json"
+}
--- a/spellcheck.dic
+++ b/spellcheck.dic
@@ -0,0 +1,6 @@
+5
+Dioxus
+MSN
+renderers
+SDK
+TODO
--- a/spellcheck.toml
+++ b/spellcheck.toml
@@ -0,0 +1,10 @@
+# Also take into account developer comments
+dev_comments = false
+
+# Skip the README.md file as defined in the cargo manifest
+skip_readme = false
+
+[Hunspell]
+lang = "en_US"
+search_dirs = [ "." ]
+extra_dictionaries = [ "./spellcheck.dic" ]
--- a/src/domain/model/messaging_interface.rs
+++ b/src/domain/model/messaging_interface.rs
@@ -44,6 +44,7 @@ pub trait RoomMessagingConsumerInterface {
 #[async_trait(?Send)]
 pub trait RoomMessagingProviderInterface {
    async fn get_avatar(&self, id: &RoomId) -> anyhow::Result<Option<Avatar>>;
+    async fn join(&self, room_id: &RoomId) -> anyhow::Result<bool>;
 }

 #[async_trait(?Send)]
--- a/src/domain/model/room.rs
+++ b/src/domain/model/room.rs
@@ -21,7 +21,7 @@ use crate::infrastructure::services::mozaik_builder::create_mozaik;

 pub type RoomId = OwnedRoomId;

-#[derive(PartialEq, Clone)]
+#[derive(Clone, PartialEq)]
 pub struct Invitation {
    invitee_id: UserId,
    sender_id: UserId,
@@ -123,11 +123,6 @@ impl Room {
        self.name.borrow().clone()
    }

-    #[allow(dead_code)]
-    pub fn topic(&self) -> &Option<String> {
-        &self.topic
-    }
-
    #[allow(dead_code)]
    pub fn set_topic(&mut self, topic: Option<String>) {
        self.topic = topic;
@@ -308,6 +303,10 @@ impl RoomStoreConsumerInterface for Room {
        self.name.borrow().clone()
    }

+    fn topic(&self) -> Option<String> {
+        self.topic.clone()
+    }
+
    async fn avatar(&self) -> Option<Avatar> {
        self.get_avatar().await
    }
@@ -315,4 +314,10 @@ impl RoomStoreConsumerInterface for Room {
    fn spaces(&self) -> &Vec<SpaceId> {
        &self.spaces
    }
+
+    async fn join(&self) {
+        if let Some(messaging_provider) = &self.messaging_provider {
+            let _ = messaging_provider.join(&self.id).await;
+        }
+    }
 }
--- a/src/domain/model/store_interface.rs
+++ b/src/domain/model/store_interface.rs
@@ -28,16 +28,19 @@ pub trait RoomStoreConsumerInterface {
    fn id(&self) -> &RoomId;
    fn is_direct(&self) -> Option<bool>;
    fn name(&self) -> Option<String>;
+    fn topic(&self) -> Option<String>;
+    fn spaces(&self) -> &Vec<SpaceId>;

    #[allow(dead_code)]
    async fn avatar(&self) -> Option<Avatar>;
-
-    fn spaces(&self) -> &Vec<SpaceId>;
+    async fn join(&self);
 }

 pub trait RoomStoreProviderInterface {
    fn on_new_name(&self, name: Option<String>);
    fn on_new_avatar(&self, avatar: Option<Avatar>);
+    #[allow(dead_code)]
+    fn on_new_topic(&self, topic: Option<String>);
    fn on_new_member(&self, member: RoomMember);
    fn on_invitation(&self, invitation: Invitation);
 }
--- a/src/infrastructure/messaging/matrix/client.rs
+++ b/src/infrastructure/messaging/matrix/client.rs
@@ -9,7 +9,7 @@ use dioxus::prelude::Task;
 use matrix_sdk::{
    config::SyncSettings,
    event_handler::Ctx,
-    media::{MediaFormat, MediaRequest, MediaThumbnailSize},
+    media::{MediaFormat, MediaRequest, MediaThumbnailSettings, MediaThumbnailSize},
    room::{ParentSpace, Room},
    ruma::{
        api::client::media::get_content_thumbnail::v3::Method,
@@ -43,7 +43,7 @@ use super::{
 };
 use crate::utils::oneshot;

-#[derive(thiserror::Error, Debug)]
+#[derive(Debug, thiserror::Error)]
 pub enum ClientError {
    #[error("Matrix client error: {0}")]
    Matrix(#[from] matrix_sdk::Error),
@@ -448,10 +448,13 @@ impl Client {
    async fn on_room_avatar_event(room: &Room, senders: &Ctx<Senders>) {
        let room_id = room.room_id();
        let avatar = match room
-            .avatar(MediaFormat::Thumbnail(MediaThumbnailSize {
+            .avatar(MediaFormat::Thumbnail(MediaThumbnailSettings {
+                size: MediaThumbnailSize {
                    method: Method::Scale,
                    width: uint!(256),
                    height: uint!(256),
+                },
+                animated: false,
            }))
            .await
        {
@@ -668,10 +671,13 @@ impl Client {

        match client
            .account()
-            .get_avatar(MediaFormat::Thumbnail(MediaThumbnailSize {
+            .get_avatar(MediaFormat::Thumbnail(MediaThumbnailSettings {
+                size: MediaThumbnailSize {
                    method: Method::Scale,
                    width: uint!(256),
                    height: uint!(256),
+                },
+                animated: false,
            }))
            .await
        {
@@ -685,10 +691,13 @@ impl Client {

        if let Some(room) = client.get_room(room_id) {
            match room
-                .avatar(MediaFormat::Thumbnail(MediaThumbnailSize {
+                .avatar(MediaFormat::Thumbnail(MediaThumbnailSettings {
+                    size: MediaThumbnailSize {
                        method: Method::Scale,
                        width: uint!(256),
                        height: uint!(256),
+                    },
+                    animated: false,
                }))
                .await
            {
@@ -709,10 +718,13 @@ impl Client {

        let request = MediaRequest {
            source: MediaSource::Plain(media_url),
-            format: MediaFormat::Thumbnail(MediaThumbnailSize {
+            format: MediaFormat::Thumbnail(MediaThumbnailSettings {
+                size: MediaThumbnailSize {
                    method: Method::Scale,
                    width: uint!(256),
                    height: uint!(256),
+                },
+                animated: false,
            }),
        };

@@ -739,10 +751,13 @@ impl Client {
                    Ok(room_member) => {
                        if let Some(room_member) = room_member {
                            let res = match room_member
-                                .avatar(MediaFormat::Thumbnail(MediaThumbnailSize {
+                                .avatar(MediaFormat::Thumbnail(MediaThumbnailSettings {
+                                    size: MediaThumbnailSize {
                                        method: Method::Scale,
                                        width: uint!(256),
                                        height: uint!(256),
+                                    },
+                                    animated: false,
                                }))
                                .await
                            {
@@ -761,6 +776,19 @@ impl Client {
        Ok(None)
    }

+    async fn join_room(&self, room_id: &RoomId) -> anyhow::Result<bool> {
+        let client = self.client.as_ref().unwrap();
+
+        if let Some(room) = client.get_room(room_id) {
+            return match room.join().await {
+                Ok(_) => Ok(true),
+                Err(err) => Err(err.into()),
+            };
+        }
+
+        Ok(false)
+    }
+
    async fn work(&mut self, mut rx: UnboundedReceiver<WorkerTask>) {
        while let Some(task) = rx.recv().await {
            self.run(task).await;
@@ -805,6 +833,9 @@ impl Client {
                    )
                    .await;
            }
+            WorkerTask::JoinRoom(id, reply) => {
+                reply.send(self.join_room(&id).await).await;
+            }
        }
    }
 }
--- a/src/infrastructure/messaging/matrix/requester.rs
+++ b/src/infrastructure/messaging/matrix/requester.rs
@@ -362,6 +362,10 @@ impl RoomMessagingProviderInterface for Requester {
    async fn get_avatar(&self, room_id: &RoomId) -> anyhow::Result<Option<Avatar>> {
        request_to_worker!(self, WorkerTask::GetRoomAvatar, room_id.clone())
    }
+
+    async fn join(&self, room_id: &RoomId) -> anyhow::Result<bool> {
+        request_to_worker!(self, WorkerTask::JoinRoom, room_id.clone())
+    }
 }

 #[async_trait(?Send)]
--- a/src/infrastructure/messaging/matrix/worker_tasks.rs
+++ b/src/infrastructure/messaging/matrix/worker_tasks.rs
@@ -23,6 +23,7 @@ pub enum WorkerTask {
        OwnedUserId,
        Sender<anyhow::Result<Option<Vec<u8>>>>,
    ),
+    JoinRoom(OwnedRoomId, Sender<anyhow::Result<bool>>),
 }

 impl Debug for WorkerTask {
@@ -61,6 +62,10 @@ impl Debug for WorkerTask {
                .field(room_id)
                .field(user_id)
                .finish(),
+            WorkerTask::JoinRoom(room_id, _) => f
+                .debug_tuple("WorkerTask::JoinRoom")
+                .field(room_id)
+                .finish(),
        }
    }
 }
--- a/src/infrastructure/services/mozaik_builder.rs
+++ b/src/infrastructure/services/mozaik_builder.rs
@@ -1,8 +1,7 @@
 use std::io::Cursor;

 use image::imageops::FilterType;
-use image::io::Reader;
-use image::{DynamicImage, ImageFormat};
+use image::{DynamicImage, ImageFormat, ImageReader};
 use image::{GenericImage, RgbImage};
 use tracing::{error, warn};

@@ -13,7 +12,7 @@ cfg_if! {
 }

 fn from_raw_to_image(raw: &Vec<u8>) -> Option<DynamicImage> {
-    match Reader::new(Cursor::new(raw)).with_guessed_format() {
+    match ImageReader::new(Cursor::new(raw)).with_guessed_format() {
        Ok(reader) => match reader.decode() {
            Ok(image) => return Some(image),
            Err(err) => error!("Unable to decode the image: {}", err),
--- a/src/infrastructure/services/random_svg_generators.rs
+++ b/src/infrastructure/services/random_svg_generators.rs
@@ -15,7 +15,7 @@ cfg_if! {
    }
 }

-#[derive(Eq, PartialEq, Hash)]
+#[derive(Eq, Hash, PartialEq)]
 pub enum AvatarFeeling {
    Ok,
    Warning,
--- a/src/main.rs
+++ b/src/main.rs
@@ -10,6 +10,7 @@ mod utils;

 use std::rc::Rc;

+use dioxus::document::{Link, Style};
 use dioxus::prelude::*;
 use futures_util::stream::StreamExt;
 use tracing::{debug, error, warn};
@@ -89,17 +90,25 @@ async fn login(mut rx: UnboundedReceiver<bool>, session: &GlobalSignal<Session>)
 fn app() -> Element {
    let login_coro = use_coroutine(|rx| login(rx, &SESSION));

-    if !SESSION.read().is_logged {
+    let is_logged = SESSION.read().is_logged;
+
+    if !is_logged {
        login_coro.send(false);
    }

-    if SESSION.read().is_logged {
    rsx! {
-            Conversations {}
+        Link {
+            href: asset!("public/fonts/Geist/Geist-Medium.woff2"), as: "font", type: "font/woff2"
        }
-    } else {
-        rsx! {
-            Login {},
+        Style {
+            id: "style-head", "body {{ font-family: 'Geist'; font-weight: normal; }}"
+        }
+
+        if !is_logged {
+            Login {}
+        }
+        else {
+            Conversations {}
        }
    }
 }
--- a/src/ui/_base.scss
+++ b/src/ui/_base.scss
@@ -181,18 +181,14 @@ $border-thin: solid $border-thin-width $border-default-color;
 // TODO: Radius should be a percentage(eg: 1024/16px).
 $border-radius: 16px;

-$geist-font-path: "../fonts/Geist";
-
 $transition-duration: 300ms;

@font-face {
-    src: url("#{$geist-font-path}/Geist-Medium.woff2") format("woff2");
    font-family: "Geist";
    font-weight: normal;
 }

@font-face {
-    src: url("#{$geist-font-path}/Geist-Bold.woff2") format("woff2");
    font-family: "Geist";
    font-weight: bold;
 }
@@ -218,6 +214,11 @@ input {
    font-family: inherit;
 }

+// Hide the preloader as soon as the application is loaded and ready to be rendered
+#preloader {
+    display: none;
+}
+
 #main {
    height: 100%;
    width: 100%;
--- a/src/ui/components/button.rs
+++ b/src/ui/components/button.rs
@@ -3,7 +3,7 @@ use dioxus_free_icons::{Icon, IconShape};

 turf::style_sheet!("src/ui/components/button.scss");

-#[derive(PartialEq, Clone, Props)]
+#[derive(Clone, PartialEq, Props)]
 struct _ButtonProps {
    children: Element,
    #[props(default = false)]
@@ -15,7 +15,7 @@ struct _ButtonProps {

 macro_rules! svg_text_icon {
    ($name:ident,$text:literal) => {
-        #[derive(Copy, Clone, PartialEq)]
+        #[derive(Clone, Copy, PartialEq)]
        struct $name;
        impl IconShape for $name {
            fn view_box(&self) -> &str {
@@ -43,7 +43,7 @@ macro_rules! svg_text_button {
    ($name:ident,$style:ident,$icon:ident) => {
        pub fn $name(props: ButtonProps) -> Element {
            rsx! {
-                style { {STYLE_SHEET} },
+                style { {STYLE_SHEET} }

                Button {
                    id: props.id,
@@ -67,7 +67,7 @@ macro_rules! svg_text_button {
    };
 }

-#[derive(PartialEq, Clone, Props)]
+#[derive(Clone, PartialEq, Props)]
 pub struct ButtonProps {
    #[props(default = false)]
    focus: bool,
@@ -79,7 +79,7 @@ pub struct ButtonProps {

 pub fn Button(props: ButtonProps) -> Element {
    rsx! {
-        style { {STYLE_SHEET} },
+        style { {STYLE_SHEET} }

        button {
            id: props.id,
@@ -96,8 +96,8 @@ pub fn Button(props: ButtonProps) -> Element {
                }
            },

-            {props.children},
-        },
+            {props.children}
+        }
    }
 }

--- a/src/ui/components/chat_panel.rs
+++ b/src/ui/components/chat_panel.rs
@@ -5,7 +5,7 @@ turf::style_sheet!("src/ui/components/chat_panel.scss");
 #[component]
 pub fn ChatPanel(name: String) -> Element {
    rsx! {
-        style { {STYLE_SHEET} },
+        style { {STYLE_SHEET} }

        div {
            class: ClassName::CHAT_PANEL,
--- a/src/ui/components/conversations.rs
+++ b/src/ui/components/conversations.rs
@@ -2,6 +2,7 @@ use std::{rc::Rc, time::Duration};

 use base64::{engine::general_purpose, Engine as _};
 use dioxus::prelude::*;
+use futures_util::StreamExt;
 use tracing::{debug, warn};

 use super::{button::Button, icons::SearchIcon, text_input::TextInput};
@@ -21,19 +22,14 @@ turf::style_sheet!("src/ui/components/conversations.scss");

 #[component]
 fn AccountAvatar(content: Option<Vec<u8>>, class_name: Option<String>) -> Element {
-    match content {
-        Some(content) => {
-            let encoded = general_purpose::STANDARD.encode(content);
    rsx! {
+        if let Some(content) = content {
            div {
                class: class_name,
-                    background_image: format!("url(data:image/jpeg;base64,{encoded})")
+                background_image: format!("url(data:image/jpeg;base64,{})", general_purpose::STANDARD.encode(content))
            }
        }
    }
-        // TODO: Manage acount without avatar
-        None => None,
-    }
 }

 #[component]
@@ -54,11 +50,11 @@ fn PresenceState(state: Option<DomainPresenceState>, class_name: Option<String>)
            rsx! {
                div {
                    class: classes,
-                    LogoIcon {},
+                    LogoIcon {}
                }
            }
        }
-        None => None,
+        None => VNode::empty(),
    }
 }

@@ -70,12 +66,12 @@ fn DisplayName(display_name: Option<String>, class_name: Option<String>) -> Elem
                div {
                    class: class_name,
                    p {
-                        {display_name},
+                        {display_name}
                    }
                }
            }
        }
-        None => None,
+        None => VNode::empty(),
    }
 }

@@ -137,37 +133,35 @@ pub fn Account() -> Element {
    });

    rsx! {
-        style { {STYLE_SHEET} },
-
        div {
            class: ClassName::ACCOUNT,

-            {avatar},
-            {presence_state},
-            {display_name},
+            {avatar}
+            {presence_state}
+            {display_name}

-            {status},
+            {status}

            div {
                class: ClassName::ACCOUNT_SPACES,
                Button {
-                    SpacesIcon {},
+                    SpacesIcon {}
+                }
            }
-            },

            div {
                class: ClassName::ACCOUNT_CHAT,
                Button {
-                    ChatsIcon {},
+                    ChatsIcon {}
+                }
            }
-            },

            div {
                class: ClassName::ACCOUNT_ROOM,
                Button {
-                    RoomsIcon {},
+                    RoomsIcon {}
+                }
            }
-            },
        }
    }
 }
@@ -175,8 +169,8 @@ pub fn Account() -> Element {
 #[component]
 pub fn ConversationAvatar(
    room_id: RoomId,
-    on_selected: EventHandler<RoomId>,
-    on_pressed: EventHandler<RoomId>,
+    on_selected: Option<EventHandler<RoomId>>,
+    on_pressed: Option<EventHandler<RoomId>>,
 ) -> Element {
    let long_press_duration = Duration::from_millis(500);

@@ -185,7 +179,7 @@ pub fn ConversationAvatar(
    let room_id = Rc::new(room_id);
    let room_name = room.name();

-    let selected_room_id = use_context::<Signal<Option<RoomId>>>();
+    let selected_room_id = use_signal(|| None::<RoomId>);

    let invited_badge = if room.is_invited() {
        rsx! {
@@ -193,12 +187,12 @@ pub fn ConversationAvatar(
                class: ClassName::CONVERSATION_AVATAR_INVITED_BADGE,

                p {
-                    "Invited",
+                    "Invited"
                }
            }
        }
    } else {
-        None
+        VNode::empty()
    };

    let is_selected = match selected_room_id.read().as_ref() {
@@ -206,7 +200,6 @@ pub fn ConversationAvatar(
        None => false,
    };

-    // let avatar = if let Some(Some(content)) = &*avatar.read() {
    let avatar = if let Some(content) = room.avatar() {
        let encoded = general_purpose::STANDARD.encode(content);
        rsx! {
@@ -230,7 +223,7 @@ pub fn ConversationAvatar(
            div {
                class: ClassName::CONVERSATION_AVATAR_IMAGE,

-                {placeholder},
+                {placeholder}
            }
        }
    };
@@ -244,12 +237,16 @@ pub fn ConversationAvatar(
    let on_press = {
        let room_id = room_id.clone();
        move || {
-            on_selected.call(room_id.as_ref().clone());
+            if let Some(c) = on_selected {
+                c.call(room_id.as_ref().clone())
+            }
        }
    };

    let on_long_press = move || {
-        on_pressed.call(room_id.as_ref().clone());
+        if let Some(c) = on_pressed {
+            c.call(room_id.as_ref().clone())
+        }
    };

    let long_press_hook = use_long_press(long_press_duration, on_press, on_long_press);
@@ -302,7 +299,7 @@ pub fn ConversationsCarousel(
            onscroll: move |_| {
                // Catch scrolling events.
            },
-            {rendered_avatars},
+            {rendered_avatars}
        }
    }
 }
@@ -367,8 +364,6 @@ pub fn Space(id: Option<SpaceId>, on_pressed_conversation: EventHandler<RoomId>)
    let classes_str = space_classes.join(" ");

    rsx! {
-        style { {STYLE_SHEET} },
-
        div {
            class: "{classes_str}",

@@ -382,17 +377,17 @@ pub fn Space(id: Option<SpaceId>, on_pressed_conversation: EventHandler<RoomId>)
                p {
                    {name}
                }
-            },
+            }
            ConversationsCarousel {
                on_selected_conversation,
                on_pressed_conversation,
-            },
+            }
            div {
                class: ClassName::SPACE_CONVERSATION_NAME,
                p {
-                    {selected_room_name},
+                    {selected_room_name}
+                }
            }
-            },
        }
    }
 }
@@ -412,19 +407,24 @@ pub fn Spaces(on_pressed_conversation: EventHandler<RoomId>) -> Element {
        div {
            class: ClassName::SPACES,

-            {rendered_spaces},
+            {rendered_spaces}

-            Space { on_pressed_conversation },
+            Space { on_pressed_conversation }
        }
    }
 }

+#[component]
 pub fn Search() -> Element {
    rsx! {
        div {
            class: ClassName::SEARCH,

+            div {
+                class: ClassName::SEARCH_TEXT,
+
                TextInput {}
+            }

            div {
                class: ClassName::SEARCH_BUTTON,
@@ -436,8 +436,21 @@ pub fn Search() -> Element {
    }
 }

+#[derive(PartialEq)]
+enum ConversationOptionsMenuActions {
+    Join(RoomId),
+    Close,
+}
+
 #[component]
-fn ConversationOptionsMenu(room_id: RoomId, on_close: EventHandler) -> Element {
+fn ConversationOptionsMenu(
+    room_id: RoomId,
+    callbacks: Coroutine<ConversationOptionsMenuActions>,
+) -> Element {
+    let room = STORE.read().rooms().get(&room_id).unwrap().signal();
+
+    let topic = room.topic().unwrap_or("<No topic set>".to_string());
+
    rsx! {
        div {
            class: ClassName::CONVERSATION_OPTIONS_MENU,
@@ -447,31 +460,46 @@ fn ConversationOptionsMenu(room_id: RoomId, on_close: EventHandler) -> Element {

                div {
                    class: ClassName::CONVERSATION_OPTIONS_MENU_INNER_AVATAR,
+                    ConversationAvatar { room_id: room_id.clone() }
                }

                div {
                    class: ClassName::CONVERSATION_OPTIONS_MENU_INNER_NAME,
+                    p {
+                        {room.name()}
+                    }
                }

                div {
                    class: ClassName::CONVERSATION_OPTIONS_MENU_INNER_TOPIC,
+                    p {
+                        {topic}
+                    }
                }

                div {
                    class: ClassName::CONVERSATION_OPTIONS_MENU_INNER_CONFIG,
+                    p {
+                        "Coming soon..."
+                    }
                }

                div {
                    class: ClassName::CONVERSATION_OPTIONS_MENU_INNER_CLOSE_BUTTON,
                    RejectButton {
-                        onclick: move |_| on_close(()),
+                        onclick: move |_| {
+                            callbacks.send(ConversationOptionsMenuActions::Close);
+                        }
                    }
                }

                div {
                    class: ClassName::CONVERSATION_OPTIONS_MENU_INNER_JOIN_BUTTON,
                    JoinButton {
-                        onclick: move |_| on_close(()),
+                        onclick: move |_| {
+                            callbacks.send(ConversationOptionsMenuActions::Join(room_id.clone()));
+                            callbacks.send(ConversationOptionsMenuActions::Close);
+                        }
                    }
                }
            }
@@ -480,37 +508,61 @@ fn ConversationOptionsMenu(room_id: RoomId, on_close: EventHandler) -> Element {
 }

 pub fn Conversations() -> Element {
-    let mut conversation_options_menu = use_signal(|| None::<Element>);
+    let mut room_id = use_signal(|| None::<RoomId>);

-    let on_conversation_options_menu_close = move |_| {
-        conversation_options_menu.set(None);
+    let on_pressed_conversation = move |id: RoomId| {
+        room_id.set(Some(id));
    };

-    let on_pressed_conversation = move |room_id: RoomId| {
-        conversation_options_menu.set(Some(rsx! { ConversationOptionsMenu { room_id, on_close: on_conversation_options_menu_close } }));
+    let callbacks = use_coroutine(
+        move |mut rx: UnboundedReceiver<ConversationOptionsMenuActions>| async move {
+            while let Some(action) = rx.next().await {
+                match action {
+                    ConversationOptionsMenuActions::Join(room_id) => {
+                        let rooms = STORE.read().rooms();
+                        if let Some(room) = rooms.get(&room_id) {
+                            room.join().await;
+                        }
+                    }
+                    ConversationOptionsMenuActions::Close => {
+                        room_id.set(None);
+                    }
+                }
+            }
+        },
+    );
+
+    let menu = match room_id.read().as_ref() {
+        Some(room_id) => {
+            let room_id = room_id.clone();
+            rsx! {
+                ConversationOptionsMenu { room_id, callbacks }
+            }
+        }
+        None => VNode::empty(),
    };

    rsx! {
-        style { {STYLE_SHEET} },
+        style { {STYLE_SHEET} }

        div {
            class: ClassName::CONVERSATIONS,

            div {
                class: ClassName::CONVERSATIONS_ACCOUNT,
-                Account {},
-            },
+                Account {}
+            }

            div {
                class: ClassName::CONVERSATIONS_SPACES,
-                Spaces { on_pressed_conversation },
-            },
+                Spaces { on_pressed_conversation }
+            }

            div {
                class: ClassName::CONVERSATIONS_SEARCH,
-                Search {},
-            },
-        },
-        {conversation_options_menu}
+                Search {}
+            }
+        }
+        {menu}
    }
 }
--- a/src/ui/components/conversations.scss
+++ b/src/ui/components/conversations.scss
@@ -268,6 +268,11 @@
    display: flex;
    gap: 5%;

+    &__text {
+        height: 100%;
+        width: 100%;
+    }
+
    &__button {
        @include button-class();

@@ -313,6 +318,24 @@
    }
 }

+%base-helper-text {
+    margin: 0;
+    margin-top: 0.3vh;
+
+    font-size: 1.2vh;
+
+    // TODO: Set color used for text in _base.scss file
+    color: get-color(greyscale, 90);
+
+    p {
+        margin: 0;
+
+        &.invalid {
+            color: get-color(critical, 100);
+        }
+    }
+}
+
 .conversation-options-menu {
    width: 100%;
    height: 100%;
@@ -355,23 +378,50 @@

            width: 100%;
            aspect-ratio: 1;
-
-            background-color: green;
        }

        &__name {
            grid-area: name;
-            background-color: orange;
+
+            // TODO: Merge with &__display-name
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            p {
+                font-size: 2.5vh;
+                margin: 0;
+                text-align: center;
+            }
        }

        &__topic {
            grid-area: topic;
-            background-color: aqua;
+
+            // TODO: Merge with &__display-name
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            @extend %base-helper-text;
+            p {
+                font-size: 2vh;
+                margin: 0;
+                text-align: center;
+            }
        }

        &__config {
            grid-area: config;
-            background-color: purple;
+
+            // TODO: Merge with &__display-name
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            border: $border-thin;
+            border-color: get-color(ternary, 90);
+            border-radius: $border-radius;
        }

        button {
--- a/src/ui/components/icons.rs
+++ b/src/ui/components/icons.rs
@@ -15,7 +15,8 @@ macro_rules! transparent_icon {
    ($name:ident, $icon:ident) => {
        pub fn $name() -> Element {
            rsx! {
-                style { {STYLE_SHEET} },
+                style { {STYLE_SHEET} }
+
                Icon {
                    class: ClassName::TRANSPARENT_ICON,
                    icon: $icon,
@@ -52,7 +53,7 @@ impl IconShape for LogoShape {

 pub fn LogoIcon() -> Element {
    rsx! {
-        style { {STYLE_SHEET} },
+        style { {STYLE_SHEET} }

        Icon {
            icon: LogoShape,
@@ -86,7 +87,7 @@ const _PYRAMID_VIEWBOX_HEIGHT: i64 = (_PYRAMID_CENTRAL_EDGE_E2_Y + _PYRAMID_STRO
 const _PYRAMID_VIEWBOX_WIDTH: i64 = (_PYRAMID_RIGHT_EDGE_E2_X + _PYRAMID_STROKE_WIDTH) as i64;
 const _PYRAMID_VIEWBOX: &str = formatcp!("0 0 {_PYRAMID_VIEWBOX_WIDTH} {_PYRAMID_VIEWBOX_HEIGHT}");

-#[derive(PartialEq, Clone)]
+#[derive(Clone, PartialEq)]
 struct PyramidShape {
    color: String,
    ratio: f64,
@@ -133,14 +134,14 @@ impl IconShape for PyramidShape {
        L {_PYRAMID_EDGES_E1_X} {_PYRAMID_CENTRAL_EDGE_E2_Y} \
        M {_PYRAMID_EDGES_E1_X} {_PYRAMID_EDGES_E1_Y} \
        V {_PYRAMID_CENTRAL_EDGE_Y_LEN}",
-                },
+                }
                path {
                    d: "\
        M {_PYRAMID_CENTRAL_EDGE_E2_X} {_PYRAMID_CENTRAL_EDGE_E2_Y} \
        V {central_edge_ratio_e2_y} \
        L {left_edge_ratio_e1_x} {no_central_edge_ratio_e1_y} \
        L {_PYRAMID_LEFT_EDGE_E2_X} {_PYRAMID_LEFT_EDGE_E2_Y} Z",
-                },
+                }
                path {
                    d: "\
        M {_PYRAMID_CENTRAL_EDGE_E2_X} {_PYRAMID_CENTRAL_EDGE_E2_Y} \
@@ -153,7 +154,7 @@ impl IconShape for PyramidShape {
    }
 }

-#[derive(PartialEq, Clone, Props)]
+#[derive(Clone, PartialEq, Props)]
 pub struct PyramidProps {
    color: Option<String>,
    #[props(default = 0.5)]
@@ -168,10 +169,11 @@ pub fn Pyramid(props: PyramidProps) -> Element {
        .unwrap_or(COLOR_TERNARY_100.to_string());

    rsx! {
-        style { {STYLE_SHEET} },
+        style { {STYLE_SHEET} }

        Icon {
            class: ClassName::PYRAMID_ICON,
+
            icon: PyramidShape { ratio: props.ratio, color, progress_color },
        }
    }
--- a/src/ui/components/login.rs
+++ b/src/ui/components/login.rs
@@ -97,27 +97,6 @@ impl Clone for Box<dyn OnValidationError> {
    }
 }

-#[derive(Clone)]
-struct TextInputHandler {
-    state: Signal<TextInputState>,
-}
-
-impl TextInputHandler {}
-
-impl OnValidationError for TextInputHandler {
-    fn reset(&mut self) {
-        self.state.write().reset();
-    }
-
-    fn invalidate(&mut self, helper_text: String) {
-        self.state.write().invalidate(helper_text);
-    }
-
-    fn box_clone(&self) -> Box<dyn OnValidationError> {
-        Box::new(self.clone())
-    }
-}
-
 #[derive(Clone)]
 struct UrlInputHandler {
    state: Signal<TextInputState>,
@@ -744,7 +723,7 @@ pub fn Login() -> Element {
    let confirm_password_classes_str = confirm_password_classes.join(" ");

    rsx! {
-        style { {STYLE_SHEET} },
+        style { {STYLE_SHEET} }

        div {
            class: "{classes_str}",
@@ -756,73 +735,79 @@ pub fn Login() -> Element {
                    random_avatar_future.restart()
                },

-                {avatar},
-            },
+                {avatar}
+            }

            div {
                class: ClassName::LOGIN_HOMESERVER,
+
                TextInput {
                    placeholder: "Homeserver URL",
                    value: "{homeserver_url}",
                    state: homeserver_url_state,
                    oninput: on_input![data, homeserver_url],
-                },
-            },
+                }
+            }

            div {
                class: ClassName::LOGIN_ID,
+
                TextInput {
                    placeholder: "{id_placeholder}",
                    value: "{id}",
                    state: id_state,
                    oninput: on_input![data, id],
-                },
-            },
+                }
+            }

            div {
                class: "{password_classes_str}",
+
                PasswordTextInput {
                    placeholder: "Password",
                    value: "{password}",
                    state: password_state,
                    oninput: on_input![data, password],
-                },
-
-            },
+                }
+            }

            div {
                class: "{confirm_password_classes_str}",
+
                PasswordTextInput {
                    placeholder: "Confirm Password",
                    value: "{confirm_password}",
                    state: confirm_password_state,
                    oninput: on_input![data, confirm_password],
                }
-            },
+            }

            div {
                class: ClassName::LOGIN_SPINNER,
+
                Spinner {
                    animate: *spinner_animated.read(),
-                },
-            },
+                }
+            }

            div {
                class: ClassName::LOGIN_REGISTER_BUTTON,
+
                RegisterButton {
                    onclick: on_clicked_register,
-                },
-            },
+                }
+            }

            div {
                class: ClassName::LOGIN_LOGIN_BUTTON,
+
                LoginButton {
                    focus: true,
                    onclick: on_clicked_login,
-                },
-            },
-        },
+                }
+            }
+        }

-        {rendered_modal},
+        {rendered_modal}
    }
 }
--- a/src/ui/components/modal.rs
+++ b/src/ui/components/modal.rs
@@ -15,7 +15,7 @@ use style::{COLOR_CRITICAL_100, COLOR_SUCCESS_100, COLOR_WARNING_100};

 turf::style_sheet!("src/ui/components/modal.scss");

-#[derive(Clone, Copy, Eq, PartialEq, Hash)]
+#[derive(Clone, Copy, Eq, Hash, PartialEq)]
 pub enum Severity {
    Ok,
    Warning,
@@ -42,7 +42,7 @@ fn avatar_configs() -> &'static HashMap<Severity, AvatarConfig<'static>> {
    })
 }

-#[derive(Props, Clone, PartialEq)]
+#[derive(Clone, PartialEq, Props)]
 pub struct ModalProps {
    pub severity: Severity,
    #[props(optional)]
@@ -76,10 +76,10 @@ pub fn Modal(props: ModalProps) -> Element {
        Severity::Critical => ErrorButton,
    };

-    icon.as_ref()?;
+    let _ = icon.as_ref().ok_or(VNode::empty());

    rsx! {
-        style { {STYLE_SHEET} },
+        style { {STYLE_SHEET} }

        div {
            class: ClassName::MODAL,
@@ -90,17 +90,17 @@ pub fn Modal(props: ModalProps) -> Element {
                div {
                    class: ClassName::MODAL_CONTENT_ICON,
                    {icon}
-                },
+                }

                div {
                    class: ClassName::MODAL_CONTENT_TITLE,
-                    {props.title},
-                },
+                    {props.title}
+                }

                div {
                    class: ClassName::MODAL_CONTENT_MSG,
-                    {props.children},
-                },
+                    {props.children}
+                }

                div {
                    class: ClassName::MODAL_CONTENT_BUTTONS,
@@ -109,10 +109,10 @@ pub fn Modal(props: ModalProps) -> Element {
                            if let Some(cb) = &props.on_confirm {
                                cb.call(evt);
                            }
-                        },
-                    },
-                },
-            },
-        },
+                        }
+                    }
+                }
+            }
+        }
    }
 }
--- a/src/ui/components/spinner.rs
+++ b/src/ui/components/spinner.rs
@@ -5,7 +5,7 @@ use crate::ui::components::icons::LogoShape;

 turf::style_sheet!("src/ui/components/spinner.scss");

-#[derive(PartialEq, Clone, Props)]
+#[derive(Clone, PartialEq, Props)]
 pub struct SpinnerProps {
    #[props(default = true)]
    animate: bool,
@@ -13,13 +13,14 @@ pub struct SpinnerProps {

 pub fn Spinner(props: SpinnerProps) -> Element {
    rsx! {
-        style { {STYLE_SHEET} },
+        style { {STYLE_SHEET} }

        div {
            class: ClassName::SPINNER,

            Icon {
                class: if props.animate { "" } else { ClassName::PAUSED },
+
                icon: LogoShape,
            }
        }
--- a/src/ui/components/text_input.rs
+++ b/src/ui/components/text_input.rs
@@ -9,7 +9,7 @@ turf::style_sheet!("src/ui/components/text_input.scss");

 pub trait InputPropsData {}

-#[derive(Props, Clone, PartialEq)]
+#[derive(Clone, PartialEq, Props)]
 pub struct InputProps<D: InputPropsData + 'static + std::cmp::PartialEq + std::clone::Clone> {
    value: Option<String>,
    placeholder: Option<String>,
@@ -67,7 +67,7 @@ pub fn TextInput(props: InputProps<TextInputState>) -> Element {
    let input_classes_str = [ClassName::TEXT_INPUT_INPUT, criticity_class].join(" ");

    rsx! {
-        style { {STYLE_SHEET} },
+        style { {STYLE_SHEET} }

        div {
            class: ClassName::TEXT_INPUT,
@@ -83,7 +83,7 @@ pub fn TextInput(props: InputProps<TextInputState>) -> Element {
                        cb.call(evt);
                    }
                },
-            },
+            }

            div {
                class: ClassName::TEXT_INPUT_HELPER_TEXT,
@@ -97,7 +97,7 @@ pub fn TextInput(props: InputProps<TextInputState>) -> Element {
    }
 }

-#[derive(Props, Clone, PartialEq)]
+#[derive(Clone, PartialEq, Props)]
 pub struct PasswordInputState {
    text_input_state: TextInputState,
    #[props(default = 0.0)]
@@ -159,7 +159,7 @@ pub fn PasswordTextInput(props: InputProps<PasswordInputState>) -> Element {
    let input_classes = [ClassName::PASSWORD_TEXT_INPUT_INPUT, criticity_class].join(" ");

    rsx! {
-        style { {STYLE_SHEET} },
+        style { {STYLE_SHEET} }

        div {
            class: "{text_input_classes}",
@@ -175,7 +175,7 @@ pub fn PasswordTextInput(props: InputProps<PasswordInputState>) -> Element {
                        cb.call(evt);
                    }
                },
-            },
+            }

            if let Some(score) = score {
                div {
@@ -184,7 +184,7 @@ pub fn PasswordTextInput(props: InputProps<PasswordInputState>) -> Element {
                        ratio: score,
                    }
                }
-            },
+            }

            div {
                class: ClassName::PASSWORD_TEXT_INPUT_SHOW_TOGGLE,
@@ -203,7 +203,7 @@ pub fn PasswordTextInput(props: InputProps<PasswordInputState>) -> Element {
                        icon: IoEye,
                    }
                }
-            },
+            }

            div {
                class: ClassName::PASSWORD_TEXT_INPUT_HELPER_TEXT,
@@ -212,7 +212,7 @@ pub fn PasswordTextInput(props: InputProps<PasswordInputState>) -> Element {
                    class: criticity_class,
                    {helper_text}
                }
-            },
+            }
        }
    }
 }
--- a/src/ui/components/text_input.scss
+++ b/src/ui/components/text_input.scss
@@ -1,4 +1,4 @@
-@import "../_base.scss"
+@import "../_base.scss";

 %base-text-input {
    $horizontal-padding: 1vw;
--- a/src/ui/components/wallpaper.rs
+++ b/src/ui/components/wallpaper.rs
@@ -7,20 +7,26 @@ turf::style_sheet!("src/ui/components/wallpaper.scss");

 #[component]
 pub fn Wallpaper(display_version: Option<bool>) -> Element {
+    let background_image_asset = asset!("/public/images/wallpaper-pattern.svg");
+    let background_image = format!("url({})", background_image_asset.to_string());
+
    let version = display_version.map(|flag| if flag { Some(GIT_VERSION) } else { None });

    rsx! {
-        style { {STYLE_SHEET} },
+        style { {STYLE_SHEET} }
+
        div {
            class: ClassName::WALLPAPER,

            div {
                class: ClassName::WALLPAPER_CONTENT,
+                background_image: "{background_image}",
            }

            div {
                class: ClassName::WALLPAPER_VERSION,
-                {version},
+
+                {version}
            }
        }
    }
--- a/src/ui/components/wallpaper.scss
+++ b/src/ui/components/wallpaper.scss
@@ -12,7 +12,6 @@
    overflow: hidden;

    &__content {
-        background-image: url("./images/wallpaper-pattern.svg");
        background-position: center;

        width: 150%;
--- a/src/ui/hooks/use_long_press.rs
+++ b/src/ui/hooks/use_long_press.rs
@@ -14,20 +14,20 @@ pub fn use_long_press(
    on_long_press: impl FnMut() + 'static,
 ) -> UseLongPress {
    let on_press = std::rc::Rc::new(RefCell::new(on_press));
-    let on_press_cb = use_callback(move || {
+    let on_press_cb = use_callback(move |_| {
        let mut on_press = on_press.as_ref().borrow_mut();
        on_press();
    });

    let on_long_press = std::rc::Rc::new(RefCell::new(on_long_press));
-    let on_long_press_cb = use_callback(move || {
+    let on_long_press_cb = use_callback(move |_| {
        let mut on_long_press = on_long_press.as_ref().borrow_mut();
        on_long_press();
    });

    let mut timer = use_future(move || async move {
        task::sleep(duration).await;
-        on_long_press_cb.call();
+        on_long_press_cb.call(());
    });

    timer.cancel();
@@ -39,7 +39,7 @@ pub fn use_long_press(
    let selection_end_cb = move |_: Event<PlatformEventData>| {
        if !timer.finished() {
            timer.cancel();
-            on_press_cb.call();
+            on_press_cb.call(());
        }
    };

--- a/src/ui/layouts/conversations.rs
+++ b/src/ui/layouts/conversations.rs
@@ -1,15 +1,19 @@
-use std::rc::Rc;
+use std::{collections::HashSet, rc::Rc};

+use base64::{engine::general_purpose, Engine as _};
 use dioxus::prelude::*;
 use futures::join;
 use tracing::warn;

-use crate::ui::{
+use crate::{
+    domain::model::room::RoomId,
+    ui::{
        components::{
            chat_panel::ChatPanel, conversations::Conversations as ConversationsComponent,
            wallpaper::Wallpaper,
        },
        STORE,
+    },
 };

 turf::style_sheet!("src/ui/layouts/conversations.scss");
@@ -66,7 +70,7 @@ fn LayoutSmall() -> Element {
            let inner = rsx! {
                    div {
                        class: ClassName::CONVERSATIONS_VIEW_SMALL_PANEL_INNER,
-                        ChatPanel { name: format!("CHAT {room_name_repr}") },
+                        ChatPanel { name: format!("CHAT {room_name_repr}") }
                    }
            };

@@ -88,7 +92,7 @@ fn LayoutSmall() -> Element {
                }
            };

-            if let Some(panel) = panel {
+            if let Ok(panel) = panel {
                conversation_panels.push(panel);
            }
        } else {
@@ -96,8 +100,18 @@ fn LayoutSmall() -> Element {
        }
    }

+    // Add tail div to dynamic rendered conversation_panels avoids side effects on layout changes
+    conversation_panels.push(
        rsx! {
-        style { {STYLE_SHEET} },
+            div {
+                class: ClassName::CONVERSATIONS_VIEW_TAIL,
+            }
+        }
+        .unwrap(),
+    );
+
+    rsx! {
+        style { {STYLE_SHEET} }

        div {
            class: ClassName::CONVERSATIONS_VIEW_SMALL,
@@ -133,17 +147,64 @@ fn LayoutSmall() -> Element {

                div {
                    class: ClassName::CONVERSATIONS_VIEW_SMALL_CONVERSATIONS_PANEL_INNER,
-                    ConversationsComponent {},
-                },
-            },
+                    ConversationsComponent {}
+                }
+            }

            {conversation_panels.iter()}
+        }
+    }
+}
+
+#[component]
+fn Tab(room_id: RoomId) -> Element {
+    let rooms = STORE.read().rooms();
+    let room = rooms.get(&room_id).unwrap().signal();
+
+    let room_avatar = if let Some(content) = room.avatar() {
+        let encoded = general_purpose::STANDARD.encode(content);
+        rsx! {
+            div {
+                class: ClassName::TAB_AVATAR_IMAGE,

                div {
-                class: ClassName::CONVERSATIONS_VIEW_TAIL,
+                    class: ClassName::TAB_AVATAR_IMAGE,
+                    background_image: format!("url(data:image/jpeg;base64,{encoded})"),
                }
            }
        }
+    } else {
+        VNode::empty()
+    };
+
+    rsx! {
+        div {
+            class: ClassName::TAB,
+
+            {room_avatar}
+
+            div {
+                class: ClassName::TAB_NAME,
+
+                {room.name()}
+            }
+        }
+    }
+}
+
+#[component]
+fn TabsBar(room_ids: HashSet<RoomId>) -> Element {
+    let tabs = room_ids
+        .iter()
+        .map(|room_id| rsx! { Tab { room_id: room_id.clone() }});
+
+    rsx! {
+        div {
+            class: ClassName::TABS_BAR,
+
+            {tabs}
+        }
+    }
 }

 fn LayoutBig() -> Element {
@@ -164,33 +225,33 @@ fn LayoutBig() -> Element {
                is_first = false;
                rsx! {
                    div {
-                        class: ClassName::CONVERSATIONS_VIEW_BIG_CONVERSATION_PANELS_PANEL,
+                        class: ClassName::CONVERSATIONS_VIEW_BIG_CONVERSATIONS_PANELS_PANEL,
                        onmounted: move |cx| async move {
                            let data = cx.data();
                            let _ = data.as_ref().scroll_to(ScrollBehavior::Smooth).await;
                            first_div.set(Some(data));
                        },
-                        ChatPanel { name: room_name_repr },
+                        ChatPanel { name: room_name_repr }
                    }
                }
            } else if displayed_room_ids_it.peek().is_none() {
                rsx! {
                    div {
-                        class: ClassName::CONVERSATIONS_VIEW_BIG_CONVERSATION_PANELS_PANEL,
+                        class: ClassName::CONVERSATIONS_VIEW_BIG_CONVERSATIONS_PANELS_PANEL,
                        onmounted: move |cx: Event<MountedData>| last_div.set(Some(cx.data())),
-                        ChatPanel { name: room_name_repr },
+                        ChatPanel { name: room_name_repr }
                    }
                }
            } else {
                rsx! {
                    div {
-                        class: ClassName::CONVERSATIONS_VIEW_BIG_CONVERSATION_PANELS_PANEL,
-                        ChatPanel { name: room_name_repr },
+                        class: ClassName::CONVERSATIONS_VIEW_BIG_CONVERSATIONS_PANELS_PANEL,
+                        ChatPanel { name: room_name_repr }
                    }
                }
            };

-            if let Some(panel) = panel {
+            if let Ok(panel) = panel {
                conversation_panels.push(panel);
            }
        } else {
@@ -198,8 +259,18 @@ fn LayoutBig() -> Element {
        }
    }

+    // Add tail div to dynamic rendered conversation_panels avoids side effects on layout changes
+    conversation_panels.push(
        rsx! {
-        style { {STYLE_SHEET} },
+            div {
+                class: ClassName::CONVERSATIONS_VIEW_TAIL,
+            }
+        }
+        .unwrap(),
+    );
+
+    rsx! {
+        style { {STYLE_SHEET} }

        div {
            class: ClassName::CONVERSATIONS_VIEW_BIG,
@@ -207,11 +278,20 @@ fn LayoutBig() -> Element {
            div {
                class: ClassName::CONVERSATIONS_VIEW_BIG_CONVERSATIONS_PANEL,

-                ConversationsComponent {},
-            },
+                ConversationsComponent {}
+            }

            div {
-                class: ClassName::CONVERSATIONS_VIEW_BIG_CONVERSATION_PANELS,
+                class: ClassName::CONVERSATIONS_VIEW_BIG_CONVERSATIONS,
+
+                div {
+                    class: ClassName::CONVERSATIONS_VIEW_BIG_CONVERSATIONS_TABS_BAR,
+
+                    TabsBar { room_ids: displayed_room_ids}
+                }
+
+                div {
+                    class: ClassName::CONVERSATIONS_VIEW_BIG_CONVERSATIONS_PANELS,

                    onmounted: move |cx| async move {
                        let data = cx.data();
@@ -235,46 +315,41 @@ fn LayoutBig() -> Element {
                    }

                    {conversation_panels.iter()}
-
-                div {
-                    class: ClassName::CONVERSATIONS_VIEW_TAIL,
                }
-
-            },
+            }
        }
    }
 }

 pub fn Conversations() -> Element {
-    let mut layout = use_signal(|| None::<VNode>);
+    let mut use_big_layout = use_signal(|| false);

    rsx! {
-        style { {STYLE_SHEET} },
+        style { {STYLE_SHEET} }

        Wallpaper {
            display_version: true
-        },
+        }

        div {
            class: ClassName::CONVERSATIONS_VIEW,

-            onresized: move |cx| {
+            onresize: move |cx| {
                let data = cx.data();
-                let mut use_big_layout = false;

                if let Ok(size) = data.get_border_box_size() {
-                    if let Some(size) = size.first() {
                    // Use LayoutBig if the layout can contain 2 panels side by side
                    let component_width = size.height * INNER_PANEL_HEIGHT_RATIO * ASPECT_RATIO;
                    let breakpoint_width = component_width * 2_f64;
-                        use_big_layout = size.width > breakpoint_width;
+                    use_big_layout.set(size.width > breakpoint_width);
                }
-                }
-
-                layout.set(rsx! { if use_big_layout { LayoutBig {} } else { LayoutSmall {} }});
            },

-            {layout}
+            if use_big_layout() {
+                LayoutBig {}
+            } else {
+                LayoutSmall {}
+            }
        }
    }
 }
--- a/src/ui/layouts/conversations.scss
+++ b/src/ui/layouts/conversations.scss
@@ -110,11 +110,26 @@ $inner-panel-height-ratio: 0.95;
            aspect-ratio: $aspect-ratio;
        }

-        &__conversation-panels {
+        &__conversations {
            height: $content-height;
+            min-width: 64px;

            flex-grow: 1;

+            display: flex;
+            flex-direction: column;
+            gap: $gap;
+
+            &__tabs-bar {
+                height: 5%;
+                width: 100%;
+
+                flex-grow: 0;
+            }
+
+            &__panels {
+                flex-grow: 1;
+
                display: flex;
                flex-direction: row;
                overflow-x: scroll;
@@ -135,4 +150,66 @@ $inner-panel-height-ratio: 0.95;
                }
            }
        }
+    }
+}
+
+.tabs-bar {
+    $gap: min(1vw, 8px);
+
+    height: 100%;
+    width: 100%;
+
+    display: flex;
+    gap: $gap;
+    overflow: scroll;
+
+    scrollbar-width: none;
+
+    white-space: nowrap;
+}
+
+.tab {
+    $gap: min(1vw, 8px);
+
+    height: 100%;
+    min-width: 0px;
+    max-width: 100%;
+
+    flex-shrink: 0;
+
+    display: inline-flex;
+    align-items: center;
+    gap: $gap;
+
+    border: $border-normal;
+    border-color: get-color(primary, 90);
+    border-radius: $border-radius;
+
+    padding: calc($gap / 2) $gap;
+
+    font-size: 2vh;
+
+    background-color: get-color(greyscale, 0);
+
+    &__avatar-image {
+        height: 100%;
+        aspect-ratio: 1;
+
+        border: $border-thin;
+        border-color: get-color(greyscale, 90);
+        border-radius: $border-radius;
+
+        background-size: cover;
+    }
+
+    &__name {
+        display: inline-block;
+        margin: 0px;
+
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+
+        cursor: default3;
+    }
 }
--- a/src/ui/layouts/login.rs
+++ b/src/ui/layouts/login.rs
@@ -7,7 +7,7 @@ turf::style_sheet!("src/ui/layouts/login.scss");

 pub fn Login() -> Element {
    rsx! {
-        style { {STYLE_SHEET} },
+        style { {STYLE_SHEET} }

        Wallpaper {
            display_version: true
--- a/src/ui/store/room.rs
+++ b/src/ui/store/room.rs
@@ -12,13 +12,15 @@ use crate::domain::model::{
    store_interface::{RoomStoreConsumerInterface, RoomStoreProviderInterface},
 };

-#[modx::props(id, is_direct, name, spaces)]
+#[modx::props(id, is_direct, name, topic, spaces)]
 #[modx::store]
 pub struct Store {
    id: RoomId,

    is_direct: Option<bool>,
    name: Option<String>,
+    topic: Option<String>,
+
    avatar: Option<Avatar>,
    members: Vec<RoomMember>,
    invitations: Vec<Invitation>,
@@ -31,7 +33,6 @@ pub struct Store {
 pub struct Room {
    store: RefCell<Store>,

-    #[allow(dead_code)]
    domain: Rc<dyn RoomStoreConsumerInterface>,
 }

@@ -45,6 +46,7 @@ impl Room {
            room.id().clone(),
            room.is_direct(),
            room.name(),
+            room.topic(),
            room.spaces().clone(),
        );

@@ -54,6 +56,10 @@ impl Room {
        }
    }

+    pub async fn join(&self) {
+        self.domain.join().await;
+    }
+
    #[allow(dead_code)]
    pub async fn get_avatar(&self) -> Option<Avatar> {
        self.domain.avatar().await
@@ -71,8 +77,18 @@ impl RoomStoreProviderInterface for Room {
        store.avatar.set(avatar);
    }

+    fn on_new_topic(&self, topic: Option<String>) {
+        let mut store = self.store.borrow_mut();
+        store.topic.set(topic);
+    }
+
    fn on_new_member(&self, member: RoomMember) {
        let mut store = self.store.borrow_mut();
+
+        if member.is_account_user() {
+            store.is_invited.set(false);
+        }
+
        store.members.write().push(member);
    }
Author	SHA1	Message	Date
Adrien	63f82eab07	🔇 Undo temporary logs All checks were successful ci/woodpecker/pr/lint Pipeline was successful Details ci/woodpecker/pr/audit Pipeline was successful Details	2025-05-02 21:08:36 +02:00
Adrien	f00adf9276	🔨 Add profile section to the Cargo.toml file	2025-05-02 20:56:18 +02:00
Adrien	216b4cee80	🔊 Add another logs to the Dockerfile	2025-05-02 20:23:57 +02:00
Adrien	cdc02a601d	🔊 Deploy web app on commit on this branch (TEMP !!!) All checks were successful ci/woodpecker/push/dockerize Pipeline was successful Details ci/woodpecker/pr/lint Pipeline was successful Details ci/woodpecker/pr/audit Pipeline was successful Details	2025-05-02 20:04:50 +02:00
Adrien	8bcb479b57	Add logs All checks were successful ci/woodpecker/pr/lint Pipeline was successful Details ci/woodpecker/pr/audit Pipeline was successful Details	2025-05-02 19:47:01 +02:00
Adrien	e9fb20ad6e	🐛 Install git-lfs All checks were successful ci/woodpecker/pr/lint Pipeline was successful Details ci/woodpecker/pr/audit Pipeline was successful Details	2025-05-02 17:46:35 +02:00
Adrien	d98222cd4a	Merge pull request '🐛 Hide the preloader once the app loaded' (#14 ) from fix/hide-preloaded-once-the-app-loaded into develop All checks were successful ci/woodpecker/push/dockerize Pipeline was successful Details ci/woodpecker/push/deploy Pipeline was successful Details Reviewed-on: #14	2025-05-02 13:05:49 +00:00
Adrien	c6effdfa15	🐛 Hide preloader once the app loaded All checks were successful ci/woodpecker/pr/lint Pipeline was successful Details ci/woodpecker/pr/audit Pipeline was successful Details	2025-05-02 14:51:57 +02:00
Adrien	f17986fa16	Merge pull request '🐛 404 error returned on js loading' (#13 ) from fix/404-on-js-loading into develop All checks were successful ci/woodpecker/push/dockerize Pipeline was successful Details ci/woodpecker/push/deploy Pipeline was successful Details Reviewed-on: #13	2025-05-02 12:02:34 +00:00
Adrien	cc65e7d5ff	🐛 Let dioxus add the preload script during the building process All checks were successful ci/woodpecker/pr/lint Pipeline was successful Details ci/woodpecker/pr/audit Pipeline was successful Details	2025-05-02 13:29:52 +02:00
Adrien	1f42eaa37c	Merge pull request 'Ensure that the linters and builds pass before merging a PR' (#7 ) from ci/add-checks-on-mr into develop All checks were successful ci/woodpecker/push/dockerize Pipeline was successful Details ci/woodpecker/push/deploy Pipeline was successful Details Reviewed-on: #7	2025-05-02 07:41:57 +00:00
Adrien	acbe15ed69	👷 Split lint and audit jobs and fix woodpecker linter warns All checks were successful ci/woodpecker/pr/lint Pipeline was successful Details ci/woodpecker/pr/audit Pipeline was successful Details	2025-05-02 09:18:42 +02:00
Adrien	4671a5ee51	👷 Use of the ci-lint-audit docker image All checks were successful ci/woodpecker/pr/validate Pipeline was successful Details	2025-05-01 22:32:17 +02:00
Adrien	9e7ba84576	👷 Add Dockerfile for the ci-lint-audit image All checks were successful ci/woodpecker/pr/validate Pipeline was successful Details ci/woodpecker/manual/dependencies Pipeline was successful Details ci/woodpecker/manual/lint-audit-image Pipeline was successful Details	2025-04-28 07:25:17 +02:00
Adrien	a8a7b16e9f	👷 Add cargo sort-derives tool All checks were successful ci/woodpecker/pr/validate Pipeline was successful Details	2025-04-27 22:10:27 +02:00
Adrien	8684086c74	👷 Add cargo spellcheck tool All checks were successful ci/woodpecker/pr/validate Pipeline was successful Details	2025-04-27 21:12:32 +02:00
Adrien	cd0a763c0a	👷 Fix lint - dependencies CI job All checks were successful ci/woodpecker/pr/validate Pipeline was successful Details	2025-04-27 20:34:40 +02:00
Adrien	4d6d6d3515	👷 Add cargo udeps tool Some checks failed ci/woodpecker/pr/validate Pipeline failed Details	2025-04-27 17:34:34 +02:00
Adrien	2bdd0b6a6d	👷 Add the cargo-deny configuration file	2025-04-27 13:27:50 +02:00
Adrien	a9996d448c	👷 Run cargo deny only if we're able to build the web docker image All checks were successful ci/woodpecker/pr/validate Pipeline was successful Details	2025-04-27 11:52:15 +02:00
Adrien	d5e92f282a	👷 For now, Don't block PRs on clippy or cargo deny errors Some checks failed ci/woodpecker/pr/validate Pipeline failed Details	2025-04-27 11:50:14 +02:00
Adrien	285d4ba590	📄 Set AGPL-3.0-or-later license Some checks failed ci/woodpecker/pr/validate Pipeline failed Details	2025-04-27 11:36:45 +02:00
Adrien	6b8cef176f	✏️ Fix typo	2025-04-27 11:36:27 +02:00
Adrien	60756b7e72	👷 Add cargo deny tool All checks were successful ci/woodpecker/pr/validate Pipeline was successful Details	2025-04-27 11:08:34 +02:00
Adrien	18ee33d512	💚 Add credential to pull images from our private Docker registry All checks were successful ci/woodpecker/manual/dependencies Pipeline was successful Details ci/woodpecker/pr/validate Pipeline was successful Details	2025-04-27 04:27:03 +02:00
Adrien	e2c20e4c64	💚 Dry run to ensure that we're able to build the web Docker image Some checks failed ci/woodpecker/pr/validate Pipeline failed Details	2025-04-27 04:23:29 +02:00
Adrien	28aa250f58	💚 Use the custom dioxus-cli image to build the webclient dockerfile Some checks failed ci/woodpecker/pr/validate Pipeline failed Details	2025-04-27 03:46:57 +02:00
Adrien	d29a3a0821	👷 Restore validation trigger Some checks failed ci/woodpecker/pr/validate Pipeline failed Details	2025-04-21 18:20:15 +02:00
Adrien	570c792bf4	👷 Test the build for web on PR All checks were successful ci/woodpecker/manual/dependencies Pipeline was successful Details	2025-04-21 17:40:06 +02:00
Adrien	fb37125740	Merge pull request 'Configure Renovate' (#3 ) from renovate/configure into develop Some checks failed ci/woodpecker/push/dockerize Pipeline failed Details ci/woodpecker/push/deploy unknown status Details ci/woodpecker/cron/dependencies Pipeline was successful Details Reviewed-on: #3	2025-04-21 13:19:25 +00:00
renovate-bot	6ce395cf7c	Add renovate.json All checks were successful ci/woodpecker/pr/validate Pipeline was successful Details	2025-04-21 13:11:42 +00:00
Adrien	a4eae624d3	👷 Retry to fix renovate git auth issue by setting RENOVATE_GIT_AUTHOR Some checks failed ci/woodpecker/push/dockerize Pipeline failed Details ci/woodpecker/push/deploy unknown status Details ci/woodpecker/cron/dependencies Pipeline was successful Details	2025-04-21 15:10:57 +02:00
Adrien	f53e4fbadf	👷 Try to fix renovate git auth issue by setting RENOVATE_GIT_AUTHOR Some checks failed ci/woodpecker/push/dockerize Pipeline failed Details ci/woodpecker/push/deploy unknown status Details ci/woodpecker/cron/dependencies Pipeline failed Details	2025-04-21 15:06:59 +02:00
Adrien	b4bc48d576	👷 Remove the dry run option for renovate Some checks failed ci/woodpecker/push/dockerize Pipeline failed Details ci/woodpecker/push/deploy unknown status Details ci/woodpecker/cron/dependencies Pipeline failed Details	2025-04-21 14:46:36 +02:00
Adrien	b435bc73a7	👷 Try to fix renovate token issue (fix RENOVATE_ENDPOINT) All checks were successful ci/woodpecker/push/dockerize Pipeline was successful Details ci/woodpecker/cron/dependencies Pipeline was successful Details ci/woodpecker/push/deploy Pipeline was successful Details	2025-04-21 14:02:36 +02:00
Adrien	a741c6ea8e	👷 Try to fix renovate token issue (move RENOVATE_TOKEN to env Some checks failed ci/woodpecker/push/dockerize Pipeline was successful Details ci/woodpecker/cron/dependencies Pipeline failed Details ci/woodpecker/push/deploy Pipeline was successful Details	2025-04-21 13:44:01 +02:00
Adrien	c761b203cc	👷 Try to fix renovate token issue (Upercase renovate_token) Some checks failed ci/woodpecker/cron/dependencies Pipeline failed Details	2025-04-21 13:39:16 +02:00
Adrien	d85a2a97b7	👷 Remove command from the dependency scanning job Some checks failed ci/woodpecker/push/dockerize Pipeline was successful Details ci/woodpecker/cron/dependencies Pipeline failed Details ci/woodpecker/push/deploy Pipeline was successful Details	2025-04-21 12:40:42 +02:00
Adrien	403d238463	👷 First try adding renovate to the CI	2025-04-21 12:37:51 +02:00
Adrien	581a3d159a	⬆️ Bump modx version (0.1.2 -> 0.1.4) All checks were successful ci/woodpecker/push/dockerize Pipeline was successful Details ci/woodpecker/push/deploy Pipeline was successful Details	2025-04-21 11:03:34 +02:00
Adrien	4bbe863a56	⬆️ Bump Dioxus version (0.6.1 -> 0.6.3) All checks were successful ci/woodpecker/push/dockerize Pipeline was successful Details ci/woodpecker/push/deploy Pipeline was successful Details	2025-04-21 10:14:54 +02:00
Adrien	722d98f5d1	♻️ Use of the assets management introduced by Dioxus 0.6.0 All checks were successful ci/woodpecker/push/dockerize Pipeline was successful Details ci/woodpecker/push/deploy Pipeline was successful Details Cf. https://dioxuslabs.com/blog/release-060#stabilizing-manganis-asset-system	2025-04-21 09:43:25 +02:00
Adrien	219fac87b1	⬆️ Bump rust version (1.83 -> 1.86) All checks were successful ci/woodpecker/push/dockerize Pipeline was successful Details ci/woodpecker/push/deploy Pipeline was successful Details	2025-04-20 23:45:48 +02:00
Adrien	c9deeea36f	🚧 Try to fix CI after the bump of the woodpecker version Some checks failed ci/woodpecker/push/dockerize Pipeline failed Details ci/woodpecker/push/deploy unknown status Details	2025-04-20 23:28:55 +02:00
Adrien	d19a8a7f7d	🚧 Try to fix CI dockerize job	2025-04-20 23:11:59 +02:00
Adrien	5bc8ac409e	⬆️ Force the commit used for matrix-sdk (fa6066b8) Some checks failed ci/woodpecker/push/dockerize Pipeline failed Details ci/woodpecker/push/deploy unknown status Details	2024-12-29 16:53:12 +01:00
Adrien	6586edf287	⬆️ Bump dioxus version (main -> 0.6.1) Some checks failed ci/woodpecker/push/dockerize Pipeline failed Details ci/woodpecker/push/deploy unknown status Details	2024-12-29 16:25:30 +01:00
Adrien	a533f1869d	🐛 Disable caching for dockerize Some checks failed ci/woodpecker/push/dockerize Pipeline failed Details ci/woodpecker/push/deploy unknown status Details	2024-09-25 23:35:01 +02:00
Adrien	6b9ef5dc90	🐛 Don't run validation on commit into default branch Some checks failed ci/woodpecker/push/dockerize Pipeline failed Details ci/woodpecker/push/deploy unknown status Details	2024-09-25 22:59:24 +02:00
Adrien	93b6027c73	🐛 Use dioxus-cli:6ff7a54 image to dockerize Some checks failed ci/woodpecker/push/validate Pipeline failed Details ci/woodpecker/push/dockerize unknown status Details ci/woodpecker/push/deploy unknown status Details	2024-09-25 22:17:59 +02:00
Adrien	8026b6fa32	🐛 Use stable dioxus-cli Some checks failed ci/woodpecker/push/validate Pipeline was successful Details ci/woodpecker/push/dockerize Pipeline failed Details ci/woodpecker/push/deploy unknown status Details	2024-09-25 21:04:35 +02:00
Adrien	8652d56f51	🐛 Fix wasm-bindgen-cli version in Dockerfile Some checks failed ci/woodpecker/push/validate Pipeline was successful Details ci/woodpecker/push/dockerize Pipeline failed Details ci/woodpecker/push/deploy unknown status Details	2024-09-25 00:11:12 +02:00
Adrien	c5045c328c	Merge pull request 'Run validation step on push into default branch (2)' (#2 ) from fix/ci-add-first-checks into develop Some checks failed ci/woodpecker/push/validate Pipeline was successful Details ci/woodpecker/push/dockerize Pipeline failed Details ci/woodpecker/push/deploy unknown status Details Reviewed-on: #2	2024-09-24 21:37:11 +00:00
Adrien	ba96ad77d3	👷 Run validation step on push into default branch All checks were successful ci/woodpecker/pr/validate Pipeline was successful Details	2024-09-24 23:18:44 +02:00
Adrien	5ff06c93f4	Merge pull request 'Run tests on PR' (#1 ) from fix/ci-add-first-checks into develop Reviewed-on: #1	2024-09-24 21:12:34 +00:00
Adrien	831085e8b6	👷 Disable build step on MR All checks were successful ci/woodpecker/pr/validate Pipeline was successful Details	2024-09-24 22:56:04 +02:00
Adrien	691dc7572a	🚨 Fix some clippy warnings All checks were successful ci/woodpecker/pr/validate Pipeline was successful Details	2024-09-23 22:16:55 +02:00
Adrien	b728f6efcd	👷 Install deps Some checks failed ci/woodpecker/pr/validate Pipeline failed Details	2024-09-23 21:58:07 +02:00
Adrien	d8e3d49d95	👷 Install clippy Some checks failed ci/woodpecker/pr/validate Pipeline failed Details	2024-09-23 20:52:08 +02:00
Adrien	9b2ab337b2	👷 Install rustfmt Some checks failed ci/woodpecker/pr/validate Pipeline failed Details	2024-09-23 20:50:51 +02:00
Adrien	deb3e273f4	👷 Add format and clippy steps Some checks failed ci/woodpecker/pr/validate Pipeline failed Details	2024-09-23 20:47:23 +02:00
Adrien	abea905feb	👷 Check that no error occurs during the build of the webapp All checks were successful ci/woodpecker/pr/validate Pipeline was successful Details	2024-09-22 23:40:22 +02:00
Adrien	c7955d5571	Merge branch 'fix/invalid-wysiwyg-dep' into develop Some checks failed ci/woodpecker/push/dockerize Pipeline failed Details ci/woodpecker/push/deploy unknown status Details	2024-09-22 22:50:16 +02:00
Adrien	f99296bdce	🐛 Fix Cargo.toml	2024-09-22 22:49:09 +02:00
Adrien	7989d86af1	Merge branch 'conversations-panel' into develop Some checks failed ci/woodpecker/push/dockerize Pipeline failed Details ci/woodpecker/push/deploy unknown status Details	2024-09-22 21:19:37 +02:00
Adrien	d2108fa6fc	♻️ Remove duplicated if statement	2024-09-22 19:39:06 +02:00
Adrien	44ba3d4d23	🐛 script_include is not used anymore (since Dioxus #2258 )	2024-09-22 19:36:43 +02:00
Adrien	5206fb13c8	♻️ Use of manganis for wallpaper pattern	2024-09-22 18:51:48 +02:00
Adrien	27934c7fc9	🚨 Fix some clippy warnings	2024-09-08 16:12:33 +02:00
Adrien	9d95bd4481	✨ Add the capability to join a conversation	2024-09-08 16:07:13 +02:00
Adrien	648be8ba72	🐛 Add tail div to dynamic conversation_panels to fix some side effects	2024-09-07 13:01:26 +02:00
Adrien	b7b98dff15	✨ Add TabsBar to the LayoutBig (Conversations layout)	2024-09-07 12:58:39 +02:00
Adrien	aaafa91cbe	⬆️ Bump turf version (0.8.0 -> 0.9.3)	2024-08-21 23:29:35 +02:00
Adrien	9a5f7ae504	⬆️ Use of Dioxus main branch instead of 0.5 release	2024-08-21 23:29:33 +02:00
Adrien	d5d996eec3	✨ Add topic to the UI store Room	2024-06-27 08:25:11 +02:00
Adrien	f566d88df2	Merge branch 'conversations-panel' into develop All checks were successful ci/woodpecker/push/dockerize Pipeline was successful Details ci/woodpecker/push/deploy Pipeline was successful Details	2024-05-26 12:00:55 +02:00
Adrien	7b6781a007	🐛 Fix gap in wallpaper pattern All checks were successful ci/woodpecker/push/dockerize Pipeline was successful Details ci/woodpecker/push/deploy Pipeline was successful Details	2024-04-23 11:35:31 +02:00