GIT_SILENT Sync po/docbooks with svn

Avatars are shown rounded in the main interface, so they should look the
same in the notification tray too. On top of that, if the room is a
group then show that group's icon when applicable in the bottom right.


(cherry picked from commit 470418f14f)

.kde-ci.yml

@@ -58,9 +58,5 @@ Dependencies:
   'require':
     'frameworks/kdbusaddons': '@latest-kf6'
 
-- 'on': ['Linux/Qt6', 'Linux/Qt5']
-  'require':
-    'sdk/selenium-webdriver-at-spi': '@latest-kf6'
-
 Options:
-  require-passing-tests-on: [ 'Linux/Qt5', 'FreeBSD', 'Windows' ]
+  require-passing-tests-on: [ 'Linux/Qt5', 'FreeBSD' ]

CMakeLists.txt

@@ -8,8 +8,8 @@ cmake_minimum_required(VERSION 3.16)
 
 # KDE Applications version, managed by release script.
 set(RELEASE_SERVICE_VERSION_MAJOR "23")
-set(RELEASE_SERVICE_VERSION_MINOR "11")
-set(RELEASE_SERVICE_VERSION_MICRO "70")
+set(RELEASE_SERVICE_VERSION_MINOR "07")
+set(RELEASE_SERVICE_VERSION_MICRO "80")
 set(RELEASE_SERVICE_VERSION "${RELEASE_SERVICE_VERSION_MAJOR}.${RELEASE_SERVICE_VERSION_MINOR}.${RELEASE_SERVICE_VERSION_MICRO}")
 
 project(NeoChat VERSION ${RELEASE_SERVICE_VERSION})
@@ -93,6 +93,12 @@ set_package_properties(KF${QT_MAJOR_VERSION}Kirigami2 PROPERTIES
         )
 find_package(KF${QT_MAJOR_VERSION}KirigamiAddons 0.7.2 REQUIRED)
 
+find_package(Qt${QT_MAJOR_VERSION}Keychain)
+set_package_properties(Qt${QT_MAJOR_VERSION}Keychain PROPERTIES
+    TYPE REQUIRED
+    PURPOSE "Secure storage of account secrets"
+)
+
 if(ANDROID)
     find_package(OpenSSL)
     set_package_properties(OpenSSL PROPERTIES
@@ -154,6 +160,10 @@ set_package_properties(KF${QT_MAJOR_VERSION}DocTools PROPERTIES DESCRIPTION
     TYPE OPTIONAL
 )
 
+if(NOT Quotient${QUOTIENT_SUFFIX}_VERSION_MINOR GREATER 6)
+    cmake_policy(SET CMP0063 OLD)
+endif()
+
 if(ANDROID)
     find_package(Sqlite3)
     configure_file(${CMAKE_CURRENT_SOURCE_DIR}/android/version.gradle.in ${CMAKE_BINARY_DIR}/version.gradle)
@@ -169,11 +179,9 @@ install(FILES org.kde.neochat.tray.svg DESTINATION ${KDE_INSTALL_FULL_ICONDIR}/h
 add_definitions(-DQT_NO_FOREACH)
 
 add_subdirectory(src)
-
-if (BUILD_TESTING)
+if (BUILD_TESTING AND Quotient${QUOTIENT_SUFFIX}_VERSION_MINOR GREATER 6)
     find_package(Qt${QT_MAJOR_VERSION} ${QT_MIN_VERSION} NO_MODULE COMPONENTS Test)
     add_subdirectory(autotests)
-    add_subdirectory(appiumtests)
 endif()
 
 if(KF${QT_MAJOR_VERSION}DocTools_FOUND)

appiumtests/CMakeLists.txt

@@ -1,23 +0,0 @@
-# SPDX-License-Identifier: BSD-3-Clause
-# SPDX-FileCopyrightText: 2022 Harald Sitter <sitter@kde.org>
-
-
-if(NOT BUILD_TESTING OR NOT CMAKE_SYSTEM_NAME MATCHES "Linux")
-    return()
-endif()
-
-find_package(SeleniumWebDriverATSPI)
-set_package_properties(SeleniumWebDriverATSPI PROPERTIES
-    DESCRIPTION "Server component for selenium tests using Linux accessibility infrastructure"
-    PURPOSE "Needed for GUI tests"
-    URL "https://invent.kde.org/sdk/selenium-webdriver-at-spi"
-    TYPE OPTIONAL
-)
-if(NOT SeleniumWebDriverATSPI_FOUND)
-    return()
-endif()
-
-add_test(
-    NAME logintest
-    COMMAND selenium-webdriver-at-spi-run ${CMAKE_CURRENT_SOURCE_DIR}/logintest.py
-)

appiumtests/login-server.py

@@ -1,42 +0,0 @@
-# SPDX-License-Identifier: MIT
-# SPDX-FileCopyrightText: 2023 Tobias Fella <tobias.fella@kde.org>
-
-
-from flask import Flask, request, abort
-app = Flask(__name__)
-
-@app.route("/_matrix/client/v3/login", methods=["GET"])
-def login_get():
-    result = dict()
-    result["flows"] = [dict()]
-    result["flows"][0]["type"] = "m.login.password"
-    return result
-
-@app.route("/_matrix/client/v3/login", methods=["POST"])
-def login_post():
-    data = request.get_json()
-    if data["identifier"]["user"] != "user" or data["password"] != "1234":
-        abort(403)
-    print(data)
-    result = dict()
-    result["access_token"] = "token_1234"
-    result["device_id"] = "device_1234"
-    result["user_id"] = "@user:localhost:1234"
-    return result
-
-@app.route("/_matrix/client/r0/sync")
-def sync():
-    result = dict()
-    result["next_batch"] = "batch1234"
-    return result
-
-@app.route("/.well-known/matrix/client")
-def well_known():
-    reply = dict()
-    reply["m.homeserver"] = dict()
-    reply["m.homeserver"]["base_url"] = "https://localhost:1234"
-    return reply
-
-
-if __name__ == "__main__":
-    app.run(ssl_context='adhoc', port=1234)

appiumtests/logintest.py

@@ -1,44 +0,0 @@
-#!/usr/bin/env python3
-
-# SPDX-License-Identifier: MIT
-# SPDX-FileCopyrightText: 2021-2022 Harald Sitter <sitter@kde.org>
-# SPDX-FileCopyrightText: 2023 Tobias Fella <tobias.fella@kde.org>
-
-import unittest
-from appium import webdriver
-from appium.webdriver.common.appiumby import AppiumBy
-from selenium.webdriver.support.ui import WebDriverWait
-import time
-import subprocess
-
-class LoginTest(unittest.TestCase):
-    @classmethod
-    def setUpClass(self):
-        desired_caps = {}
-        desired_caps["app"] = "neochat --ignore-ssl-errors"
-        desired_caps["timeouts"] = {'implicit': 10000}
-        self.driver = webdriver.Remote(
-            command_executor='http://127.0.0.1:4723',
-            desired_capabilities=desired_caps)
-        subprocess.Popen(["python","login-server.py"])
-
-    def setUp(self):
-        pass
-
-    def tearDown(self):
-        if not self._outcome.result.wasSuccessful():
-            self.driver.get_screenshot_as_file("failed_test_shot_{}.png".format(self.id()))
-
-    @classmethod
-    def tearDownClass(self):
-        self.driver.quit()
-
-    def test_login(self):
-        self.driver.find_element(by=AppiumBy.NAME, value="Matrix ID").send_keys("@user:localhost:1234")
-        self.driver.find_element(by=AppiumBy.NAME, value="Continue").click()
-        self.driver.find_element(by=AppiumBy.NAME, value="Password").send_keys("1234")
-        self.driver.find_element(by=AppiumBy.NAME, value="Login").click()
-        self.driver.find_element(by=AppiumBy.NAME, value="Join some rooms to get started").click()
-
-if __name__ == '__main__':
-    unittest.main()

org.kde.neochat.appdata.xml

@@ -40,7 +40,6 @@
   <name xml:lang="ru">NeoChat</name>
   <name xml:lang="sk">NeoChat</name>
   <name xml:lang="sl">NeoChat</name>
-  <name xml:lang="sv">NeoChat</name>
   <name xml:lang="ta">நியோச்சாட்</name>
   <name xml:lang="tr">NeoChat</name>
   <name xml:lang="uk">NeoChat</name>
@@ -77,7 +76,6 @@
   <summary xml:lang="ru">Клиент для Matrix — децентрализованного коммуникационного протокола</summary>
   <summary xml:lang="sk">Klient pre matrix, decentralizovaný komunikačný protokol</summary>
   <summary xml:lang="sl">Odjemalec za matrix, decentralizirani komunikacijski protokol</summary>
-  <summary xml:lang="sv">En klient för Matrix, det decentraliserade kommunikationsprotokollet</summary>
   <summary xml:lang="ta">மையமில்லா தகவல் பரிமாற்ற நெறிமுறையான மேட்ரிக்ஸுக்கான செயலி</summary>
   <summary xml:lang="tr">Merkezi olmayan iletişim protokolü Matrix için bir istemci</summary>
   <summary xml:lang="uk">Клієнт matrix, децентралізованого протоколу обміну даними</summary>
@@ -98,6 +96,7 @@ to provide a convergent experience across multiple platforms.</p>
     <p xml:lang="ia">NeoChat es un cliente per Matrix, le protocollo de communication decentralisate per messager instantanee. Illo te permitte inviar messager de texto, files de video e audio a tu familia, collegas e amicos usante. Illo usa KDE frameworks e super toto Kirigamii forni un experientia convergente trans platteforme multiple.</p>
     <p xml:lang="it">NeoChat è un client per Matrix, il protocollo di comunicazione decentralizzato per la messaggistica istantanea. Ti consente di inviare messaggi di testo, video e file audio a familiari, colleghi e amici. Utilizza i framework KDE e in particolare Kirigami per fornire un'esperienza convergente su più piattaforme.</p>
     <p xml:lang="ka">NeoChat არის Matrix კლიენტი. ის საშუალებას გაძლევთ გაგზავნოთ ტექსტური შეტყობინებები, ვიდეოები და აუდიო ფაილები თქვენს ოჯახს, კოლეგებსა და მეგობრებს მატრიქსის პროტოკოლის გამოყენებით.</p>
+    <p xml:lang="ko">NeoChat은 분산형 인스턴트 메시징 통신 프로토콜인 Matrix 클라이언트입니다. 가족, 동료, 친구에게 텍스트 메시지, 동영상, 오디오 파일을 전송할 수 있습니다. KDE 프레임워크와 Kirigami를 사용하여 다양한 플랫폼에서 일관적인 사용자 경험을 제공합니다.</p>
     <p xml:lang="nl">NeoChat is een client voor Matrix, het gedecentraliseerde communicatieprotocol voor instant messages. Het biedt u het verzenden van tekstberichten, video's en geluidsbestanden naar uw familie, collega's en vrienden. Het gebruik KDE frameworks en het meest opmerkelijk Kirigami om een convergente ervaring te leveren op meerdere platforms.</p>
     <p xml:lang="nn">NeoChat er ein klient for Matrix, ein protokoll for desentralisert kommunikasjon. Du kan utveksla tekst, lyd og videoar med kollegaar, vennar og familie. Programmet brukar KDE Frameworks og Kirigami for å gje ei brukarflate tilpassa ulike plattformer.</p>
     <p xml:lang="pl">NeoChat jest programem do Matriksa, protokołu rozproszonego porozumiewania się w czasie rzeczywistym. Umożliwia wysyłanie wiadomości tekstowych, filmów oraz dźwięku do twojej rodziny, znajomych oraz przyjaciół. Używa szkieletów KDE i głównie Kirigami, aby zapewnić spójne wrażenia na wielu platformach</p>
@@ -118,6 +117,7 @@ to provide a convergent experience across multiple platforms.</p>
     <p xml:lang="ia">NeoChat aspira a esser un application plenemente eminente per le specification de Matrix. Tal como omne cosas in le specification currentemente stabile con le exceptiones notabile de VOIP, threads e alcun aspectos del cryptation End-to-End es supportate. Il ha ltere pauc omissiones, debite al facto que le specification de Matrix es in evolution constante ma le aspiration remane a fornir supporto eventual per le integre specification.</p>
     <p xml:lang="it">NeoChat mira ad essere un'applicazione completa per le specifiche Matrix. Pertanto, sono supportati tutti gli elementi dell'attuale specifica stabile con le notevoli eccezioni di VoIP, conversazioni e alcuni aspetti della cifratura end-to-end. Ci sono alcune altre piccole omissioni dovute al fatto che le specifiche Matrix sono in continua evoluzione, ma l'obiettivo rimane quello di fornire un eventuale supporto per l'intera specifica.</p>
     <p xml:lang="ka">NeoChat-ი მიზნად ისახავს Matrix სპეციფიკაციის სრული განხორციელება ჰქონდეს. როგორც ასეთი, ყველაფერი მიმდინარე სპეციფიკაციიდან, VoIP-ის, ძაფებისა და გამჭოლი დაშიფვრის ზოგიერთი ასპექტის გარდა, მხარდაჭერილია. შეძლება ასევე იყოს მცირე ლაფსუსებიც იმის გამო, რომ Matrix-ის სპეციფიკაცია მუდმივად ვითარგდება, მაგრამ ჩვენი მიზანი მისი სრული მხარდაჭერაა.</p>
+    <p xml:lang="ko">NeoChat은 Matrix 표준을 따르는 프로그램을 목표로 합니다. 현재 안정 버전의 표준에서 제공하는 기능의 대부분을 지원하며, VoIP, 스레드, 일부 종단간 암호화와 같은 기능은 아직 지원하지 않습니다. Matrix 표준은 계속하여 진화 중이기 때문에 일부 기능이 빠져 있을 수도 있지만 장기적으로는 전체 표준을 지원하는 것이 목표입니다.</p>
     <p xml:lang="nl">NeoChat richt zich op het volledig bieden van alle mogelijkheden van de Matrix-specificatie. Alles in de huidige stabiele specificatie met merkbare uitzondering van VoIP, gekoppelde discussies en sommige aspecten van eind-tot-eind versleuteling worden ondersteund. Er zijn een paar andere kleinere omissies vanwege het feit dat de Matrix specificatie constant evolueert maar het doel blijft het eventueel bieden van ondersteuning van de gehele specificatie.</p>
     <p xml:lang="nn">NeoChat har som mål å støtta all funksjonalitet i Matrix-spesifikasjonen. Førebels er alt i den gjeldande stabile spesifikasjonen støtta, med unntak av VoIP, trådar og nokre delar av ende-til-kryptering. Det finst òg andre småting som ikkje er støtta, sidan Matrix-spesifikasjon er i stadig endring, men målet er altså støtte for alt.</p>
     <p xml:lang="pl">NeoChat w zamyśle ma być pełnowartościową aplikacją wg wytycznych Matriksa. Z tego powodu, wszystko, co jest obecnie w stabilnych wytycznych z pominięciem VoIP, wątków i niektórych części szyfrowania Użytkownik-do-Użytkownika są obecnie obsługiwane. Pominięto też kilka mniejszych rzeczy ze względu na ciągły rozwój wytycznych Matriksa, lecz celem nadal jest zapewnienie obsługi wszystkich wytycznych.</p>
@@ -138,6 +138,7 @@ to provide a convergent experience across multiple platforms.</p>
     <p xml:lang="ia">Debite al natura del disveloppamento de specification de Matrix NeoChat tamben supporta numerose characteristicas instabile. Currentemente istes es:</p>
     <p xml:lang="it">A causa della natura dello sviluppo delle specifiche Matrix, NeoChat supporta anche numerose funzionalità instabili. Attualmente queste sono:</p>
     <p xml:lang="ka">Matrix-ის სპეციფიკაციის განვითარების ბუნების გამო NeoChat-ს ასევე აქვს უამრავი არასტაბილური ფუნქციაც. ახლა ისინია:</p>
+    <p xml:lang="ko">Matrix 표준 개발의 특징으로 인하여 NeoChat은 일부 실험적인 기능을 지원합니다. 현재 지원하는 기능은 다음과 같습니다.</p>
     <p xml:lang="nl">Vanwege de aard van de ontwikkeling van de Matrix specificatie ondersteunt NeoChat ook talloze onstabiele mogelijkheden. Dit zijn nu:</p>
     <p xml:lang="nn">På grunn av måten Matrix-spesifikasjonen vert utvikla på, støttar NeoChat òg nokre uferdige funksjonar:</p>
     <p xml:lang="pl">Ze względu na sposób rozwoju Matriksa, NeoChat obsługuje także kilka niestabilnych możliwości. Obecnie są to:</p>
@@ -159,6 +160,7 @@ to provide a convergent experience across multiple platforms.</p>
       <li xml:lang="ia">Inquestas - MSC3381</li>
       <li xml:lang="it">Sondaggi - MSC3381</li>
       <li xml:lang="ka">Polls - MSC3381</li>
+      <li xml:lang="ko">투표 - MSC3381</li>
       <li xml:lang="nl">Polls - MSC3381</li>
       <li xml:lang="nn">Avstemmingar – MSC3381</li>
       <li xml:lang="pt">Inquéritos - MSC3381</li>
@@ -179,6 +181,7 @@ to provide a convergent experience across multiple platforms.</p>
       <li xml:lang="ia">Etiquetta gummate (sticker) -MSC2545</li>
       <li xml:lang="it">Pacchetti di adesivi - MSC2545</li>
       <li xml:lang="ka">სტიკერების პაკეტები - MSC2545</li>
+      <li xml:lang="ko">스티커 팩 - MSC2545</li>
       <li xml:lang="nl">Sticker Packs - MSC2545</li>
       <li xml:lang="nn">Klistremerke-pakkar – MSC2545</li>
       <li xml:lang="pt">Pacotes de Autocolantes - MSC2545</li>
@@ -199,6 +202,7 @@ to provide a convergent experience across multiple platforms.</p>
       <li xml:lang="ia">Eventos de Location - MSC3488</li>
       <li xml:lang="it">Località eventi - MSC3488</li>
       <li xml:lang="ka">მდებარეობის მოვლენები - MSC3488</li>
+      <li xml:lang="ko">위치 이벤트 - MSC3488</li>
       <li xml:lang="nl">Locatie gebeurtenissen - MSC3488</li>
       <li xml:lang="nn">Posisjonshendingar – MSC3488</li>
       <li xml:lang="pt">Eventos com Localizações - MSC3488</li>
@@ -245,7 +249,6 @@ to provide a convergent experience across multiple platforms.</p>
   <developer_name xml:lang="ru">Сообщество KDE</developer_name>
   <developer_name xml:lang="sk">KDE Komunita</developer_name>
   <developer_name xml:lang="sl">Skupnost KDE</developer_name>
-  <developer_name xml:lang="sv">KDE-gemenskapen</developer_name>
   <developer_name xml:lang="ta">கே.டீ.யீ. சமூகம்</developer_name>
   <developer_name xml:lang="tr">KDE Topluluğu</developer_name>
   <developer_name xml:lang="uk">Спільнота KDE</developer_name>
@@ -267,7 +270,10 @@ to provide a convergent experience across multiple platforms.</p>
     <value key="KDE::windows_store::screenshots::1::caption" xml:lang="ca-valencia">Vista principal amb la llista de sales, xats i informació de les sales</value>
     <value key="KDE::windows_store::screenshots::1::caption" xml:lang="es">Vista principal con la lista de salas, chat e información de la sala</value>
     <value key="KDE::windows_store::screenshots::1::caption" xml:lang="fr">Vue principale avec la liste des salons ainsi que des informations sur les salons et forums de discussions</value>
+    <value key="KDE::windows_store::screenshots::1::caption" xml:lang="ia">Vista principal con lista de sala, chat e information de sala</value>
+    <value key="KDE::windows_store::screenshots::1::caption" xml:lang="it">Vista principale con elenco delle stanze, chat e informazioni sulla stanza</value>
     <value key="KDE::windows_store::screenshots::1::caption" xml:lang="ka">მთავარი ხედი სურათების სიით, ჩატით და ოთახის ინფორმაციით</value>
+    <value key="KDE::windows_store::screenshots::1::caption" xml:lang="ko">대화방 목록, 채팅, 대화방 정보가 표시된 주 보기</value>
     <value key="KDE::windows_store::screenshots::1::caption" xml:lang="nl">Hoofdweergave met lijst met rooms, chat en roominformatie</value>
     <value key="KDE::windows_store::screenshots::1::caption" xml:lang="pt">A área principal com a lista de salas e com informações sobre a conversa e a sala</value>
     <value key="KDE::windows_store::screenshots::1::caption" xml:lang="sl">Glavni pogled s seznamom sob, klepetom in informacijami o sobah</value>
@@ -281,7 +287,10 @@ to provide a convergent experience across multiple platforms.</p>
     <value key="KDE::windows_store::screenshots::2::caption" xml:lang="ca-valencia">Pantalla d'inici de sessió</value>
     <value key="KDE::windows_store::screenshots::2::caption" xml:lang="es">Pantalla de inicio de sesión</value>
     <value key="KDE::windows_store::screenshots::2::caption" xml:lang="fr">Écran de connexion</value>
+    <value key="KDE::windows_store::screenshots::2::caption" xml:lang="ia">Schermo de accesso</value>
+    <value key="KDE::windows_store::screenshots::2::caption" xml:lang="it">Schermata di accesso</value>
     <value key="KDE::windows_store::screenshots::2::caption" xml:lang="ka">შესვლის ეკრანი</value>
+    <value key="KDE::windows_store::screenshots::2::caption" xml:lang="ko">로그인 화면</value>
     <value key="KDE::windows_store::screenshots::2::caption" xml:lang="nl">Aanmeldscherm</value>
     <value key="KDE::windows_store::screenshots::2::caption" xml:lang="pt">Ecrã de autenticação</value>
     <value key="KDE::windows_store::screenshots::2::caption" xml:lang="sl">Prijavni zaslon</value>

org.kde.neochat.desktop

@@ -35,7 +35,6 @@ Name[ro]=NeoChat
 Name[ru]=NeoChat
 Name[sk]=NeoChat
 Name[sl]=NeoChat
-Name[sv]=NeoChat
 Name[ta]=நியோச்சாட்
 Name[tr]=NeoChat
 Name[uk]=NeoChat
@@ -74,7 +73,6 @@ GenericName[ro]=Client Matrix
 GenericName[ru]=Клиент Matrix
 GenericName[sk]=Matrix Client
 GenericName[sl]=Odjemalec Matrix
-GenericName[sv]=Matrix-klient
 GenericName[ta]=Matrix வாங்கி
 GenericName[tr]=Matrix İstemcisi
 GenericName[uk]=Клієнт Matrix
@@ -112,7 +110,6 @@ Comment[ro]=Client pentru protocolul Matrix
 Comment[ru]=Клиент для протокола Matrix
 Comment[sk]=Klient protokolu Matrix
 Comment[sl]=Odjemalec za protokol Matrix
-Comment[sv]=Klient för protokollet Matrix
 Comment[ta]=Matrix நெறிமுறைக்கான வாங்கி
 Comment[tr]=Matrix protokolü için istemci
 Comment[uk]=Клієнт протоколу Matrix

po/nn/neochat.po

@@ -6,7 +6,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: neochat\n"
 "Report-Msgid-Bugs-To: https://bugs.kde.org\n"
-"POT-Creation-Date: 2023-07-20 00:49+0000\n"
+"POT-Creation-Date: 2023-07-20 02:45+0000\n"
 "PO-Revision-Date: 2023-07-02 14:09+0200\n"
 "Last-Translator: Karl Ove Hufthammer <karl@huftis.org>\n"
 "Language-Team: Norwegian Nynorsk <l10n-no@lister.huftis.org>\n"

src/CMakeLists.txt

@@ -175,7 +175,7 @@ else()
 endif()
 
 target_include_directories(neochat PRIVATE ${CMAKE_BINARY_DIR})
-target_link_libraries(neochat PUBLIC Qt::Core Qt::Quick Qt::Qml Qt::Gui Qt::Multimedia Qt::Network Qt::QuickControls2 KF${QT_MAJOR_VERSION}::I18n KF${QT_MAJOR_VERSION}::Kirigami2 KF${QT_MAJOR_VERSION}::Notifications KF${QT_MAJOR_VERSION}::ConfigCore KF${QT_MAJOR_VERSION}::ConfigGui KF${QT_MAJOR_VERSION}::CoreAddons KF${QT_MAJOR_VERSION}::SonnetCore  KF${QT_MAJOR_VERSION}::ItemModels Quotient${QUOTIENT_SUFFIX} cmark::cmark QCoro::Core)
+target_link_libraries(neochat PUBLIC Qt::Core Qt::Quick Qt::Qml Qt::Gui Qt::Multimedia Qt::Network Qt::QuickControls2 KF${QT_MAJOR_VERSION}::I18n KF${QT_MAJOR_VERSION}::Kirigami2 KF${QT_MAJOR_VERSION}::Notifications KF${QT_MAJOR_VERSION}::ConfigCore KF${QT_MAJOR_VERSION}::ConfigGui KF${QT_MAJOR_VERSION}::CoreAddons KF${QT_MAJOR_VERSION}::SonnetCore  KF${QT_MAJOR_VERSION}::ItemModels Quotient${QUOTIENT_SUFFIX} cmark::cmark ${QTKEYCHAIN_LIBRARIES} QCoro::Core)
 kconfig_add_kcfg_files(neochat GENERATE_MOC neochatconfig.kcfgc)
 
 if(NEOCHAT_FLATPAK)

src/chatdocumenthandler.cpp

@@ -218,8 +218,8 @@ void ChatDocumentHandler::setRoom(NeoChatRoom *room)
 void ChatDocumentHandler::complete(int index)
 {
     if (m_completionModel->autoCompletionType() == CompletionModel::User) {
-        auto name = m_completionModel->data(m_completionModel->index(index, 0), CompletionModel::Text).toString();
-        auto id = m_completionModel->data(m_completionModel->index(index, 0), CompletionModel::Subtitle).toString();
+        auto name = m_completionModel->data(m_completionModel->index(index, 0), CompletionModel::DisplayNameRole).toString();
+        auto id = m_completionModel->data(m_completionModel->index(index, 0), CompletionModel::SubtitleRole).toString();
         auto text = getText();
         auto at = text.lastIndexOf(QLatin1Char('@'), cursorPosition() - 1);
         QTextCursor cursor(document()->textDocument());
@@ -232,7 +232,7 @@ void ChatDocumentHandler::complete(int index)
         pushMention({cursor, name, 0, 0, id});
         m_highlighter->rehighlight();
     } else if (m_completionModel->autoCompletionType() == CompletionModel::Command) {
-        auto command = m_completionModel->data(m_completionModel->index(index, 0), CompletionModel::ReplacedText).toString();
+        auto command = m_completionModel->data(m_completionModel->index(index, 0), CompletionModel::ReplacedTextRole).toString();
         auto text = getText();
         auto at = text.lastIndexOf(QLatin1Char('/'));
         QTextCursor cursor(document()->textDocument());
@@ -240,7 +240,7 @@ void ChatDocumentHandler::complete(int index)
         cursor.setPosition(cursorPosition(), QTextCursor::KeepAnchor);
         cursor.insertText(QStringLiteral("/%1 ").arg(command));
     } else if (m_completionModel->autoCompletionType() == CompletionModel::Room) {
-        auto alias = m_completionModel->data(m_completionModel->index(index, 0), CompletionModel::Subtitle).toString();
+        auto alias = m_completionModel->data(m_completionModel->index(index, 0), CompletionModel::SubtitleRole).toString();
         auto text = getText();
         auto at = text.lastIndexOf(QLatin1Char('#'), cursorPosition() - 1);
         QTextCursor cursor(document()->textDocument());
@@ -253,7 +253,7 @@ void ChatDocumentHandler::complete(int index)
         pushMention({cursor, alias, 0, 0, alias});
         m_highlighter->rehighlight();
     } else if (m_completionModel->autoCompletionType() == CompletionModel::Emoji) {
-        auto shortcode = m_completionModel->data(m_completionModel->index(index, 0), CompletionModel::ReplacedText).toString();
+        auto shortcode = m_completionModel->data(m_completionModel->index(index, 0), CompletionModel::ReplacedTextRole).toString();
         auto text = getText();
         auto at = text.lastIndexOf(QLatin1Char(':'));
         QTextCursor cursor(document()->textDocument());

src/main.cpp

@@ -4,7 +4,6 @@
 #include <QCommandLineParser>
 #include <QIcon>
 #include <QNetworkProxyFactory>
-#include <QObject>
 #include <QQmlApplicationEngine>
 #include <QQmlContext>
 #include <QQmlNetworkAccessManagerFactory>
@@ -324,18 +323,11 @@ int main(int argc, char *argv[])
     QCommandLineParser parser;
     parser.setApplicationDescription(i18n("Client for the matrix communication protocol"));
     parser.addPositionalArgument(QStringLiteral("urls"), i18n("Supports matrix: url scheme"));
-    parser.addOption(QCommandLineOption("ignore-ssl-errors", i18n("Ignore all SSL Errors, e.g., unsigned certificates.")));
 
     about.setupCommandLine(&parser);
     parser.process(app);
     about.processCommandLine(&parser);
 
-    if (parser.isSet("ignore-ssl-errors")) {
-        QObject::connect(NetworkAccessManager::instance(), &QNetworkAccessManager::sslErrors, NetworkAccessManager::instance(), [](QNetworkReply *reply) {
-            reply->ignoreSslErrors();
-        });
-    }
-
     engine.addImageProvider(QLatin1String("mxc"), new MatrixImageProvider);
     engine.addImageProvider(QLatin1String("blurhash"), new BlurhashImageProvider);
 

src/matriximageprovider.cpp

@@ -32,11 +32,17 @@ ThumbnailResponse::ThumbnailResponse(QString id, QSize size)
         requestedSize.setWidth(100);
     }
     if (mediaId.count('/') != 1) {
-        errorStr = i18n("Media id '%1' doesn't follow server/mediaId pattern", mediaId);
-        Q_EMIT finished();
-        return;
+        if (mediaId.startsWith(QLatin1Char('/'))) {
+            mediaId = mediaId.mid(1);
+        } else {
+            errorStr = i18n("Media id '%1' doesn't follow server/mediaId pattern", mediaId);
+            Q_EMIT finished();
+            return;
+        }
     }
 
+    mediaId = mediaId.split(QLatin1Char('?'))[0];
+
     QImage cachedImage;
     if (cachedImage.load(localFile)) {
         image = cachedImage;

src/matriximageprovider.h

@@ -34,7 +34,7 @@ private Q_SLOTS:
     void prepareResult();
 
 private:
-    const QString mediaId;
+    QString mediaId;
     QSize requestedSize;
     const QString localFile;
     Quotient::MediaThumbnailJob *job = nullptr;

src/models/completionmodel.cpp

@@ -53,54 +53,54 @@ QVariant CompletionModel::data(const QModelIndex &index, int role) const
     }
     auto filterIndex = m_filterModel->index(index.row(), 0);
     if (m_autoCompletionType == User) {
-        if (role == Text) {
+        if (role == DisplayNameRole) {
             return m_filterModel->data(filterIndex, UserListModel::DisplayNameRole);
         }
-        if (role == Subtitle) {
+        if (role == SubtitleRole) {
             return m_filterModel->data(filterIndex, UserListModel::UserIdRole);
         }
-        if (role == Icon) {
+        if (role == IconNameRole) {
             return m_filterModel->data(filterIndex, UserListModel::AvatarRole);
         }
     }
 
     if (m_autoCompletionType == Command) {
-        if (role == Text) {
+        if (role == DisplayNameRole) {
             return m_filterModel->data(filterIndex, ActionsModel::Prefix).toString() + QStringLiteral(" ")
                 + m_filterModel->data(filterIndex, ActionsModel::Parameters).toString();
         }
-        if (role == Subtitle) {
+        if (role == SubtitleRole) {
             return m_filterModel->data(filterIndex, ActionsModel::Description);
         }
-        if (role == Icon) {
+        if (role == IconNameRole) {
             return QStringLiteral("invalid");
         }
-        if (role == ReplacedText) {
+        if (role == ReplacedTextRole) {
             return m_filterModel->data(filterIndex, ActionsModel::Prefix);
         }
     }
     if (m_autoCompletionType == Room) {
-        if (role == Text) {
+        if (role == DisplayNameRole) {
             return m_filterModel->data(filterIndex, RoomListModel::DisplayNameRole);
         }
-        if (role == Subtitle) {
+        if (role == SubtitleRole) {
             return m_filterModel->data(filterIndex, RoomListModel::CanonicalAliasRole);
         }
-        if (role == Icon) {
+        if (role == IconNameRole) {
             return m_filterModel->data(filterIndex, RoomListModel::AvatarRole);
         }
     }
     if (m_autoCompletionType == Emoji) {
-        if (role == Text) {
+        if (role == DisplayNameRole) {
             return m_filterModel->data(filterIndex, CustomEmojiModel::DisplayRole);
         }
-        if (role == Icon) {
+        if (role == IconNameRole) {
             return m_filterModel->data(filterIndex, CustomEmojiModel::MxcUrl);
         }
-        if (role == ReplacedText) {
+        if (role == ReplacedTextRole) {
             return m_filterModel->data(filterIndex, CustomEmojiModel::ReplacedTextRole);
         }
-        if (role == Subtitle) {
+        if (role == SubtitleRole) {
             return m_filterModel->data(filterIndex, EmojiModel::DescriptionRole);
         }
     }
@@ -111,10 +111,10 @@ QVariant CompletionModel::data(const QModelIndex &index, int role) const
 QHash<int, QByteArray> CompletionModel::roleNames() const
 {
     return {
-        {Text, "text"},
-        {Subtitle, "subtitle"},
-        {Icon, "icon"},
-        {ReplacedText, "replacedText"},
+        {DisplayNameRole, "displayName"},
+        {SubtitleRole, "subtitle"},
+        {IconNameRole, "iconName"},
+        {ReplacedTextRole, "replacedText"},
     };
 }
 

src/models/completionmodel.h

@@ -64,10 +64,10 @@ public:
      * @brief Defines the model roles.
      */
     enum Roles {
-        Text = Qt::DisplayRole, /**< The main text to show. */
-        Subtitle, /**< The subtitle text to show. */
-        Icon, /**< The icon to show. */
-        ReplacedText, /**< The text to replace the input text with for the completion. */
+        DisplayNameRole = Qt::DisplayRole, /**< The main text to show. */
+        SubtitleRole, /**< The subtitle text to show. */
+        IconNameRole, /**< The icon to show. */
+        ReplacedTextRole, /**< The text to replace the input text with for the completion. */
     };
     Q_ENUM(Roles)
 

src/models/userdirectorylistmodel.cpp

@@ -144,7 +144,7 @@ QVariant UserDirectoryListModel::data(const QModelIndex &index, int role) const
         auto avatarUrl = user.avatarUrl;
 
         if (avatarUrl.isEmpty()) {
-            return "";
+            return QString();
         }
         return avatarUrl.url().remove(0, 6);
     }
@@ -153,7 +153,7 @@ QVariant UserDirectoryListModel::data(const QModelIndex &index, int role) const
     }
     if (role == DirectChatsRole) {
         if (!m_connection) {
-            return {};
+            return QStringList();
         };
 
         auto userObj = m_connection->user(user.userId);
@@ -165,6 +165,8 @@ QVariant UserDirectoryListModel::data(const QModelIndex &index, int role) const
                 return QVariant::fromValue(directChatsForUser);
             }
         }
+
+        return QStringList();
     }
 
     return {};

src/neochat.notifyrc

@@ -33,7 +33,6 @@ Name[ro]=NeoChat
 Name[ru]=NeoChat
 Name[sk]=NeoChat
 Name[sl]=NeoChat
-Name[sv]=NeoChat
 Name[ta]=நியோச்சாட்
 Name[tr]=NeoChat
 Name[uk]=NeoChat
@@ -73,7 +72,6 @@ Comment[ro]=Client pentru Matrix, protocolul de comunicare descentralizată
 Comment[ru]=Клиент для Matrix — децентрализованного коммуникационного протокола
 Comment[sk]=Klient pre matrix, decentralizovaný komunikačný protokol
 Comment[sl]=Odjemalec za decentralizirani komunikacijski protokol matrix
-Comment[sv]=En klient för matrix, det decentraliserade kommunikationsprotokollet
 Comment[tr]=Merkezi olmayan iletişim protokolü Matrix için bir istemci
 Comment[uk]=Клієнт matrix, децентралізованого протоколу обміну даними
 Comment[x-test]=xxA client for matrix, the decentralized communication protocolxx
@@ -114,7 +112,6 @@ Name[ro]=Mesaj nou
 Name[ru]=Новое сообщение
 Name[sk]=Nová správa
 Name[sl]=Novo sporočilo
-Name[sv]=Nytt meddelande
 Name[ta]=புதிய செய்தி
 Name[tr]=Yeni ileti
 Name[uk]=Нове повідомлення
@@ -152,7 +149,6 @@ Comment[ro]=Este un mesaj nou
 Comment[ru]=Доступно новое сообщение
 Comment[sk]=Je nová správa
 Comment[sl]=Prišlo je novo sporočilo
-Comment[sv]=Det finns ett nytt meddelande
 Comment[ta]=ஒரு புதிய செய்தி உள்ளது
 Comment[tr]=Yeni bir ileti var
 Comment[uk]=Надійшло нове повідомлення
@@ -190,7 +186,6 @@ Name[pt]=Novo Convite
 Name[pt_BR]=Novo convite
 Name[ru]=Новое приглашение
 Name[sl]=Novo povabilo
-Name[sv]=Ny inbjudan
 Name[ta]=புதிய அழைப்பிதழ்
 Name[tr]=Yeni Davet
 Name[uk]=Нове запрошення
@@ -224,7 +219,6 @@ Comment[pt]=Existe um novo convite para uma sala
 Comment[pt_BR]=Existe um novo convite para uma sala
 Comment[ru]=Доступно новое приглашение в комнату
 Comment[sl]=Tam je novo povabilo v sobo
-Comment[sv]=Det finns en ny inbjudan till ett rum
 Comment[ta]=ஓர் அரங்கிற்கான புதிய அழைப்பிதழ் உள்ளது
 Comment[tr]=Bir odaya yeni bir davetiye var
 Comment[uk]=У кімнаті нове запрошення

src/neochatroom.cpp

@@ -993,7 +993,7 @@ void NeoChatRoom::deleteMessagesByUser(const QString &user, const QString &reaso
 QString NeoChatRoom::joinRule() const
 {
     auto joinRulesEvent = currentState().get<JoinRulesEvent>();
-    if (joinRulesEvent) {
+    if (!joinRulesEvent) {
         return {};
     }
     return joinRulesEvent->joinRule();
@@ -1941,7 +1941,7 @@ QByteArray NeoChatRoom::roomAcountDataJson(const QString &eventType)
 QUrl NeoChatRoom::avatarForMember(NeoChatUser *user) const
 {
     const auto &url = memberAvatarUrl(user->id());
-    if (url.isEmpty()) {
+    if (url.isEmpty() || url.scheme() != "mxc"_ls) {
         return {};
     }
     auto avatar = connection()->makeMediaUrl(url);

src/notificationsmanager.cpp

@@ -11,6 +11,7 @@
 #include <KNotification>
 #include <KNotificationReplyAction>
 
+#include <QPainter>
 #include <Quotient/accountregistry.h>
 #include <Quotient/connection.h>
 #include <Quotient/csapi/pushrules.h>
@@ -203,7 +204,7 @@ void NotificationsManager::postNotification(NeoChatRoom *room,
     }
 
     notification->setText(notification->text() + '\n' + entry);
-    notification->setPixmap(QPixmap::fromImage(icon));
+    notification->setPixmap(createNotificationImage(icon, room));
 
     notification->setDefaultAction(i18n("Open NeoChat in this room"));
     connect(notification, &KNotification::defaultActivated, this, [notification, room]() {
@@ -239,7 +240,7 @@ void NotificationsManager::postInviteNotification(NeoChatRoom *room, const QStri
     KNotification *notification = new KNotification("invite");
     notification->setText(i18n("%1 invited you to a room", sender));
     notification->setTitle(title);
-    notification->setPixmap(img);
+    notification->setPixmap(createNotificationImage(icon, nullptr));
     notification->setFlags(KNotification::Persistent);
     notification->setDefaultAction(i18n("Open this invitation in NeoChat"));
     connect(notification, &KNotification::defaultActivated, this, [notification, room]() {
@@ -282,4 +283,33 @@ void NotificationsManager::clearInvitationNotification(const QString &roomId)
     }
 }
 
+QPixmap NotificationsManager::createNotificationImage(const QImage &icon, NeoChatRoom *room)
+{
+    // Handle avatars that are lopsided in one dimension
+    const int biggestDimension = std::max(icon.width(), icon.height());
+    const QRect imageRect{0, 0, biggestDimension, biggestDimension};
+
+    QImage roundedImage(imageRect.size(), QImage::Format_ARGB32);
+    roundedImage.fill(Qt::transparent);
+
+    QPainter painter(&roundedImage);
+    painter.setRenderHint(QPainter::Antialiasing);
+
+    QBrush brush(icon.scaledToHeight(biggestDimension));
+    painter.setBrush(brush);
+    painter.drawRoundedRect(imageRect, imageRect.width(), imageRect.height());
+
+    if (room != nullptr) {
+        const QImage roomAvatar = room->avatar(imageRect.width(), imageRect.height());
+        if (icon != roomAvatar) {
+            const QRect lowerQuarter{imageRect.center(), imageRect.size() / 2};
+
+            painter.setBrush(roomAvatar.scaled(lowerQuarter.size()));
+            painter.drawRoundedRect(lowerQuarter, lowerQuarter.width(), lowerQuarter.height());
+        }
+    }
+
+    return QPixmap::fromImage(roundedImage);
+}
+
 #include "moc_notificationsmanager.cpp"

src/notificationsmanager.h

@@ -97,4 +97,7 @@ private:
 
 private Q_SLOTS:
     void processNotificationJob(QPointer<Quotient::Connection> connection, Quotient::GetNotificationsJob *job, bool initialization);
+
+private:
+    QPixmap createNotificationImage(const QImage &icon, NeoChatRoom *room);
 };

src/plasma-runner-neochat.desktop

@@ -34,7 +34,6 @@ Name[ro]=NeoChat
 Name[ru]=NeoChat
 Name[sk]=NeoChat
 Name[sl]=NeoChat
-Name[sv]=NeoChat
 Name[ta]=நியோச்சாட்
 Name[tr]=NeoChat
 Name[uk]=NeoChat
@@ -67,7 +66,6 @@ Comment[pt]=Procurar salas no NeoChat
 Comment[pt_BR]=Encontrar salas no NeoChat
 Comment[ru]=Поиск комнат NeoChat
 Comment[sl]=Najdi sobe v NeoChatu
-Comment[sv]=Sök efter rum i NeoChat
 Comment[ta]=நியோச்சாட்டில் அரங்குகளை கண்டுபிடிக்கும்
 Comment[tr]=NeoChat'te odalar bulun
 Comment[uk]=Пошук кімнат у NeoChat

src/qml/Component/AvatarTabButton.qml

@@ -8,6 +8,7 @@ import QtQuick.Controls 2.15 as QQC2
 import QtQuick.Templates 2.15 as T
 import org.kde.kirigami 2.20 as Kirigami
 import org.kde.kirigamiaddons.delegates 1.0 as Delegates
+import org.kde.kirigamiaddons.labs.components 1.0 as KirigamiComponents
 
 Delegates.RoundedItemDelegate {
     id: root
@@ -30,7 +31,7 @@ Delegates.RoundedItemDelegate {
         onTapped: root.contextMenuRequested()
     }
 
-    contentItem: Kirigami.Avatar {
+    contentItem: KirigamiComponents.Avatar {
         source: root.source
         name: root.text
     }

src/qml/Component/ChatBox/ChatBox.qml

@@ -56,15 +56,6 @@ ColumnLayout {
     Kirigami.Theme.colorSet: Kirigami.Theme.View
     Kirigami.Theme.inherit: false
 
-    Kirigami.InlineMessage {
-        Layout.fillWidth: true
-        Layout.leftMargin: 1 // So we can see the border
-        Layout.rightMargin: 1 // So we can see the border
-
-        text: i18n("NeoChat is offline. Please check your network connection.")
-        visible: !Controller.isOnline
-    }
-
     Kirigami.Separator {
         Layout.fillWidth: true
     }

src/qml/Component/ChatBox/CompletionMenu.qml

@@ -8,6 +8,8 @@ import QtQuick.Controls 2.15 as QQC2
 import Qt.labs.qmlmodels 1.0
 
 import org.kde.kirigami 2.15 as Kirigami
+import org.kde.kirigamiaddons.delegates 1.0 as Delegates
+import org.kde.kirigamiaddons.labs.components 1.0 as KirigamiComponents
 
 import org.kde.neochat 1.0
 
@@ -43,6 +45,7 @@ QQC2.Popup {
     rightPadding: 0
     topPadding: 0
     bottomPadding: 0
+
     implicitHeight: Math.min(completions.contentHeight, Kirigami.Units.gridUnit * 10)
 
     contentItem: ListView {
@@ -53,23 +56,35 @@ QQC2.Popup {
         currentIndex: 0
         keyNavigationWraps: true
         highlightMoveDuration: 100
-        delegate: Kirigami.BasicListItem {
-            text: model.text
-            subtitle: model.subtitle ?? ""
-            labelItem.textFormat: Text.PlainText
-            subtitleItem.textFormat: Text.PlainText
-            leading: RowLayout {
-                Kirigami.Avatar {
-                    visible: model.icon !== "invalid"
-                    Layout.preferredWidth: height
-                    Layout.fillHeight: true
-                    source: model.icon === "invalid" ? "" : ("image://mxc/" + model.icon)
-                    name: model.text
+        delegate: Delegates.RoundedItemDelegate {
+            id: completionDelegate
+
+            required property int index
+            required property string displayName
+            required property string subtitle
+            required property string iconName
+
+            text: displayName
+
+            contentItem: RowLayout {
+                KirigamiComponents.Avatar {
+                    visible: completionDelegate.iconName !== "invalid"
+                    Layout.preferredWidth: Kirigami.Units.iconSizes.medium
+                    Layout.preferredHeight: Kirigami.Units.iconSizes.medium
+                    source: completionDelegate.iconName === "invalid" ? "" : ("image://" + completionDelegate.iconName)
+                    name: completionDelegate.text
+                }
+                Delegates.SubtitleContentItem {
+                    itemDelegate: completionDelegate
+                    labelItem.textFormat: Text.PlainText
+                    subtitle: completionDelegate.subtitle ?? ""
+                    subtitleItem.textFormat: Text.PlainText
                 }
             }
-            onClicked: completionMenu.chatDocumentHandler.complete(model.index)
+            onClicked: completionMenu.chatDocumentHandler.complete(completionDelegate.index)
         }
     }
+
     background: Rectangle {
         color: Kirigami.Theme.backgroundColor
     }

src/qml/Component/ChatBox/ReplyPane.qml

@@ -6,7 +6,8 @@ import QtQuick 2.15
 import QtQuick.Layouts 1.15
 import QtQuick.Controls 2.15 as QQC2
 
-import org.kde.kirigami 2.14 as Kirigami
+import org.kde.kirigami 2.15 as Kirigami
+import org.kde.kirigamiaddons.labs.components 1.0 as KirigamiComponents
 
 import org.kde.neochat 1.0
 
@@ -40,7 +41,7 @@ GridLayout {
         implicitWidth: Kirigami.Units.smallSpacing
         color: userColor
     }
-    Kirigami.Avatar {
+    KirigamiComponents.Avatar {
         id: replyAvatar
 
         implicitWidth: Kirigami.Units.iconSizes.small

src/qml/Component/LocationMapItem.qml

@@ -9,6 +9,7 @@ import QtLocation 5.15
 import QtPositioning 5.15
 
 import org.kde.kirigami 2.15 as Kirigami
+import org.kde.kirigamiaddons.labs.components 1.0 as KirigamiComponents
 
 import org.kde.neochat 1.0
 
@@ -44,7 +45,7 @@ MapQuickItem {
             isMask: true
             color: parent.color
         }
-        Kirigami.Avatar {
+        KirigamiComponents.Avatar {
             anchors.centerIn: parent
             anchors.verticalCenterOffset: -parent.height / 8
             visible: root.asset === "m.self"

src/qml/Component/Login/Login.qml

@@ -28,7 +28,6 @@ LoginStep {
             id: matrixIdField
             Kirigami.FormData.label: i18n("Matrix ID:")
             placeholderText: "@user:matrix.org"
-            Accessible.name: i18n("Matrix ID")
             onTextChanged: {
                 LoginHelper.matrixId = text
             }

src/qml/Component/Login/Password.qml

@@ -38,7 +38,6 @@ LoginStep {
             id: passwordField
             onTextChanged: LoginHelper.password = text
             enabled: !LoginHelper.isLoggingIn
-            Accessible.name: i18n("Password")
 
             Component.onCompleted: {
                 passwordField.forceActiveFocus()

src/qml/Component/NeochatMaximizeComponent.qml

@@ -56,7 +56,7 @@ Components.AlbumMaximizeComponent {
     }
 
     leading: RowLayout {
-        Kirigami.Avatar {
+        Components.Avatar {
             id: userAvatar
             implicitWidth: Kirigami.Units.iconSizes.medium
             implicitHeight: Kirigami.Units.iconSizes.medium

src/qml/Component/Timeline/AvatarFlow.qml

@@ -5,6 +5,7 @@ import QtQuick 2.15
 import QtQuick.Controls 2.15 as QQC2
 
 import org.kde.kirigami 2.15 as Kirigami
+import org.kde.kirigamiaddons.labs.components 1.0 as KirigamiComponents
 
 Flow {
     id: root
@@ -17,11 +18,11 @@ Flow {
     spacing: -avatarSize / 2
     Repeater {
         id: avatarFlowRepeater
-        delegate: Kirigami.Avatar {
-            topInset: Kirigami.Units.smallSpacing / 2
-            topPadding: Kirigami.Units.smallSpacing / 2
-            implicitWidth: avatarSize
-            implicitHeight: avatarSize + Kirigami.Units.smallSpacing / 2
+        delegate: KirigamiComponents.Avatar {
+            required property var modelData
+
+            implicitWidth: root.avatarSize
+            implicitHeight: root.avatarSize
 
             name: modelData.displayName
             source: modelData.avatarSource

src/qml/Component/Timeline/ImageDelegate.qml

@@ -105,10 +105,6 @@ TimelineContainer {
         Layout.preferredHeight: imageHeight
         source: root.mediaInfo.source
 
-        Drag.active: dragHandler.active
-        Drag.dragType: Drag.Automatic
-        Drag.supportedActions: Qt.CopyAction
-
         Image {
             anchors.fill: parent
             source: root.mediaInfo.tempInfo.source
@@ -145,28 +141,6 @@ TimelineContainer {
             }
         }
 
-        Item {
-            anchors.fill: parent
-
-            DragHandler {
-                id: dragHandler
-                enabled: img.status === Image.Ready
-
-                onActiveChanged: {
-                    if (active) {
-                        img.grabToImage((result) => {
-                            img.Drag.mimeData = {
-                                "image/png": result.image,
-                            };
-                            img.Drag.active = dragHandler.active;
-                        });
-                    } else {
-                        img.Drag.active = false;
-                    }
-                }
-            }
-        }
-
         TapHandler {
             acceptedButtons: Qt.LeftButton
             onTapped: {

src/qml/Component/Timeline/ReactionDelegate.qml

@@ -50,10 +50,10 @@ Flow {
                 Kirigami.Theme.inherit: false
                 Kirigami.Theme.colorSet: Kirigami.Theme.View
                 radius: height / 2
-                shadow {
-                    size: Kirigami.Units.smallSpacing
-                    color: !model.hasLocalUser ? Qt.rgba(0.0, 0.0, 0.0, 0.10) : Qt.rgba(Kirigami.Theme.textColor.r, Kirigami.Theme.textColor.g, Kirigami.Theme.textColor.b, 0.10)
-                }
+                shadow.size: Kirigami.Units.smallSpacing
+                shadow.color: !model.hasLocalUser ? Qt.rgba(0.0, 0.0, 0.0, 0.10) : Qt.rgba(Kirigami.Theme.textColor.r, Kirigami.Theme.textColor.g, Kirigami.Theme.textColor.b, 0.10)
+                border.color: Kirigami.ColorUtils.tintWithAlpha(color, Kirigami.Theme.textColor, 0.15)
+                border.width: 1
             }
 
             onClicked: reactionClicked(model.reaction)

src/qml/Component/Timeline/ReplyComponent.qml

@@ -7,6 +7,7 @@ import QtQuick.Controls 2.15 as QQC2
 import QtQuick.Layouts 1.15
 
 import org.kde.kirigami 2.15 as Kirigami
+import org.kde.kirigamiaddons.labs.components 1.0 as KirigamiComponents
 
 import org.kde.neochat 1.0
 
@@ -93,7 +94,7 @@ Item {
             implicitWidth: Kirigami.Units.smallSpacing
             color: root.author.color
         }
-        Kirigami.Avatar {
+        KirigamiComponents.Avatar {
             id: replyAvatar
 
             implicitWidth: Kirigami.Units.iconSizes.small

src/qml/Component/Timeline/StateComponent.qml

@@ -6,6 +6,7 @@ import QtQuick.Controls 2.15 as QQC2
 import QtQuick.Layouts 1.15
 
 import org.kde.kirigami 2.15 as Kirigami
+import org.kde.kirigamiaddons.labs.components 1.0 as KirigamiComponents
 
 import org.kde.neochat 1.0
 
@@ -21,14 +22,23 @@ RowLayout {
 
     implicitHeight: Math.max(label.contentHeight, stateAvatar.implicitHeight)
 
-    Kirigami.Avatar {
+    KirigamiComponents.Avatar {
         id: stateAvatar
+
         Layout.preferredWidth: Kirigami.Units.iconSizes.small
         Layout.preferredHeight: Kirigami.Units.iconSizes.small
 
         name: root.name
         color: root.color
 
+        Rectangle {
+            radius: height
+            height: 4
+            width: 4
+            color: root.color
+            anchors.centerIn: parent
+        }
+
         MouseArea {
             anchors.fill: parent
             cursorShape: Qt.PointingHandCursor

src/qml/Component/Timeline/StateDelegate.qml

@@ -6,6 +6,7 @@ import QtQuick.Controls 2.15 as QQC2
 import QtQuick.Layouts 1.15
 
 import org.kde.kirigami 2.15 as Kirigami
+import org.kde.kirigamiaddons.labs.components 1.0 as KirigamiComponents
 
 import org.kde.neochat 1.0
 
@@ -71,34 +72,61 @@ QQC2.Control {
             Flow {
                 visible: columnLayout.folded
                 spacing: -Kirigami.Units.iconSizes.small / 2
+
                 Repeater {
                     model: authorList
-                    delegate: Kirigami.Avatar {
-                        topInset: Kirigami.Units.smallSpacing / 2
-                        topPadding: Kirigami.Units.smallSpacing / 2
+                    delegate: Item {
+                        id: avatarDelegate
+
+                        required property var modelData
+
                         implicitWidth: Kirigami.Units.iconSizes.small
                         implicitHeight: Kirigami.Units.iconSizes.small + Kirigami.Units.smallSpacing / 2
 
-                        name: modelData.displayName
-                        source: modelData.avatarSource
-                        color: modelData.color
+                        KirigamiComponents.Avatar {
+                            y: Kirigami.Units.smallSpacing / 2
+
+                            implicitWidth: Kirigami.Units.iconSizes.small
+                            implicitHeight: Kirigami.Units.iconSizes.small
+
+                            name: parent.modelData.displayName
+                            source: parent.modelData.avatarSource
+                            color: parent.modelData.color
+
+                            Rectangle {
+                                radius: height
+                                height: 4
+                                width: 4
+                                color: avatarDelegate.modelData.color
+                                anchors.centerIn: parent
+                            }
+                        }
                     }
                 }
+
                 QQC2.Label {
                     id: excessAuthorsLabel
+
                     text: model.excessAuthors
                     visible: model.excessAuthors !== ""
                     color: Kirigami.Theme.textColor
                     horizontalAlignment: Text.AlignHCenter
                     background: Kirigami.ShadowedRectangle {
-                        color: Kirigami.Theme.backgroundColor
                         Kirigami.Theme.inherit: false
                         Kirigami.Theme.colorSet: Kirigami.Theme.View
+
+                        color: Kirigami.Theme.backgroundColor
                         radius: height / 2
-                        shadow.size: Kirigami.Units.smallSpacing
-                        shadow.color: Qt.rgba(Kirigami.Theme.textColor.r, Kirigami.Theme.textColor.g, Kirigami.Theme.textColor.b, 0.10)
-                        border.color: Kirigami.ColorUtils.tintWithAlpha(color, Kirigami.Theme.textColor, 0.15)
-                        border.width: 1
+
+                        shadow {
+                            size: Kirigami.Units.smallSpacing
+                            color: Qt.rgba(Kirigami.Theme.textColor.r, Kirigami.Theme.textColor.g, Kirigami.Theme.textColor.b, 0.10)
+                        }
+
+                        border {
+                            color: Kirigami.ColorUtils.tintWithAlpha(color, Kirigami.Theme.textColor, 0.15)
+                            width: 1
+                        }
                     }
 
                     height: Kirigami.Units.iconSizes.small + Kirigami.Units.smallSpacing
@@ -125,13 +153,13 @@ QQC2.Control {
                 visible: !columnLayout.folded
             }
             QQC2.ToolButton {
-                icon.name: (!columnLayout.folded ? "go-up" : "go-down")
-                icon.width: Kirigami.Units.iconSizes.small
-                icon.height: Kirigami.Units.iconSizes.small
-
-                onClicked: {
-                    columnLayout.toggleFolded()
+                icon {
+                    name: (!columnLayout.folded ? "go-up" : "go-down")
+                    width: Kirigami.Units.iconSizes.small
+                    height: Kirigami.Units.iconSizes.small
                 }
+
+                onClicked: columnLayout.toggleFolded()
             }
         }
         Repeater {

src/qml/Component/Timeline/TimelineContainer.qml

@@ -6,6 +6,7 @@ import QtQuick.Controls 2.15 as QQC2
 import QtQuick.Layouts 1.15
 
 import org.kde.kirigami 2.15 as Kirigami
+import org.kde.kirigamiaddons.labs.components 1.0 as KirigamiComponents
 
 import org.kde.neochat 1.0
 
@@ -353,18 +354,15 @@ ColumnLayout {
             }
         }
 
-        Kirigami.Avatar {
+        KirigamiComponents.Avatar {
             id: avatar
-            width: visible || Config.showAvatarInTimeline ? Kirigami.Units.gridUnit * 2 + Kirigami.Units.smallSpacing * 2 : 0
+            width: visible || Config.showAvatarInTimeline ? Kirigami.Units.gridUnit + Kirigami.Units.largeSpacing * 2: 0
             height: width
-            padding: Kirigami.Units.smallSpacing
-            topInset: Kirigami.Units.smallSpacing
-            bottomInset: Kirigami.Units.smallSpacing
-            leftInset: Kirigami.Units.smallSpacing
-            rightInset: Kirigami.Units.smallSpacing
             anchors {
                 left: parent.left
                 leftMargin: Kirigami.Units.smallSpacing
+                top: parent.top
+                topMargin: Kirigami.Units.smallSpacing
             }
 
             visible: root.showAuthor &&
@@ -395,7 +393,8 @@ ColumnLayout {
             hoverEnabled: true
 
             anchors {
-                leftMargin: Kirigami.Units.smallSpacing
+                left: avatar.right
+                leftMargin: Kirigami.Units.largeSpacing
                 rightMargin: Kirigami.Units.largeSpacing
             }
             // HACK: anchoring didn't reset anchors.right when switching from parent.right to undefined reliably
@@ -486,7 +485,7 @@ ColumnLayout {
 
                         Layout.maximumWidth: contentMaxWidth
 
-                        active: root.isReply && root.reply
+                        active: root.isReply
                         visible: active
 
                         sourceComponent: ReplyComponent {
@@ -527,20 +526,21 @@ ColumnLayout {
                         return Kirigami.Theme.backgroundColor
                     }
                     radius: Kirigami.Units.smallSpacing
-                    shadow {
-                        size:  Kirigami.Units.smallSpacing
-                        color: root.isHighlighted ? Qt.rgba(0.0, 0.0, 0.0, 0.10) : Qt.rgba(Kirigami.Theme.textColor.r, Kirigami.Theme.textColor.g, Kirigami.Theme.textColor.b, 0.10)
-                    }
+                    shadow.size: Kirigami.Units.smallSpacing
+                    shadow.color: root.showHighlight ? Qt.rgba(0.0, 0.0, 0.0, 0.10) : Qt.rgba(Kirigami.Theme.textColor.r, Kirigami.Theme.textColor.g, Kirigami.Theme.textColor.b, 0.10)
+                    border.color: Kirigami.ColorUtils.tintWithAlpha(color, Kirigami.Theme.textColor, 0.15)
+                    border.width: 1
 
                     Behavior on color {
-                        ColorAnimation { duration: Kirigami.Units.shortDuration }
+                        enabled: isTemporaryHighlighted
+                        ColorAnimation {target: bubbleBackground; duration: Kirigami.Units.veryLongDuration; easing.type: Easing.InOutCubic}
                     }
                 }
             }
         }
 
         background: Rectangle {
-            visible: mainContainer.hovered && Config.compactLayout
+            visible: mainContainer.hovered
             color: Kirigami.ColorUtils.tintWithAlpha(Kirigami.Theme.backgroundColor, Kirigami.Theme.highlightColor, 0.15)
             radius: Kirigami.Units.smallSpacing
         }

src/qml/Dialog/UserDetailDialog.qml

@@ -7,6 +7,7 @@ import QtQuick.Controls 2.15 as QQC2
 import QtQuick.Layouts 1.15
 
 import org.kde.kirigami 2.20 as Kirigami
+import org.kde.kirigamiaddons.labs.components 1.0 as KirigamiComponents
 
 import org.kde.neochat 1.0
 
@@ -37,7 +38,7 @@ Kirigami.OverlaySheet {
             Layout.bottomMargin: Kirigami.Units.largeSpacing
             spacing: Kirigami.Units.largeSpacing
 
-            Kirigami.Avatar {
+            KirigamiComponents.Avatar {
                 Layout.preferredWidth: Kirigami.Units.iconSizes.huge
                 Layout.preferredHeight: Kirigami.Units.iconSizes.huge
 

src/qml/Menu/Timeline/MessageDelegateContextMenu.qml

@@ -6,6 +6,7 @@ import QtQuick 2.15
 import QtQuick.Controls 2.15 as QQC2
 import QtQuick.Layouts 1.15
 import org.kde.kirigami 2.15 as Kirigami
+import org.kde.kirigamiaddons.labs.components 1.0 as KirigamiComponents
 
 import org.kde.neochat 1.0
 
@@ -222,11 +223,11 @@ Loader {
                         Layout.fillWidth: true
                         Layout.margins: Kirigami.Units.largeSpacing
                         spacing: Kirigami.Units.largeSpacing
-                        Kirigami.Avatar {
+                        KirigamiComponents.Avatar {
                             id: avatar
                             source: author.avatarSource
-                            Layout.preferredWidth: Kirigami.Units.gridUnit * 3
-                            Layout.preferredHeight: Kirigami.Units.gridUnit * 3
+                            Layout.preferredWidth: Kirigami.Units.gridUnit * 2
+                            Layout.preferredHeight: Kirigami.Units.gridUnit * 2
                             Layout.alignment: Qt.AlignTop
                         }
                         ColumnLayout {

src/qml/Page/InviteUserPage.qml

@@ -6,6 +6,8 @@ import QtQuick.Controls 2.15 as QQC2
 import QtQuick.Layouts 1.15
 
 import org.kde.kirigami 2.15 as Kirigami
+import org.kde.kirigamiaddons.delegates 1.0 as Delegates
+import org.kde.kirigamiaddons.labs.components 1.0 as KirigamiComponents
 
 import org.kde.neochat 1.0
 
@@ -68,38 +70,51 @@ Kirigami.ScrollablePage {
             text: i18n("No users available")
         }
 
-        delegate: Kirigami.BasicListItem {
+        delegate: Delegates.RoundedItemDelegate {
             id: delegate
+
+            required property string userID
+            required property string name
+            required property string avatar
+
             property bool inRoom: room && room.containsUser(userID)
 
-            label: model.name
-            subtitle: model.userID
+            text: name
 
-            leading: Kirigami.Avatar {
-                implicitWidth: height
-                source: model.avatar ? ("image://mxc/" + model.avatar) : ""
-                name: model.name
-            }
-            trailing: QQC2.ToolButton {
-                id: inviteButton
-                icon.name: "document-send"
-                text: i18n("Send invitation")
-                checkable: true
-                checked: inRoom
-                opacity: inRoom ? 0.5 : 1
-
-                onToggled: {
-                    if (inRoom) {
-                        checked = true
-                    } else {
-                        room.inviteToRoom(model.userID);
-                        applicationWindow().pageStack.layers.pop();
-                    }
+            contentItem: RowLayout {
+                KirigamiComponents.Avatar {
+                    Layout.preferredWidth: Kirigami.Units.iconSizes.medium
+                    Layout.preferredHeight: Kirigami.Units.iconSizes.medium
+                    source: delegate.avatar ? ("image://mxc/" + delegate.avatar) : ""
+                    name: delegate.name
                 }
 
-                QQC2.ToolTip.text: !inRoom ? text : i18n("User is either already a member or has been invited")
-                QQC2.ToolTip.visible: inviteButton.hovered
-                QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay
+                Delegates.SubtitleContentItem {
+                    itemDelegate: delegate
+                    subtitle: delegate.userID
+                }
+
+                QQC2.ToolButton {
+                    id: inviteButton
+                    icon.name: "document-send"
+                    text: i18n("Send invitation")
+                    checkable: true
+                    checked: inRoom
+                    opacity: inRoom ? 0.5 : 1
+
+                    onToggled: {
+                        if (inRoom) {
+                            checked = true
+                        } else {
+                            room.inviteToRoom(delegate.userID);
+                            applicationWindow().pageStack.layers.pop();
+                        }
+                    }
+
+                    QQC2.ToolTip.text: !inRoom ? text : i18n("User is either already a member or has been invited")
+                    QQC2.ToolTip.visible: inviteButton.hovered
+                    QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay
+                }
             }
         }
     }

src/qml/Page/JoinRoomPage.qml

@@ -8,6 +8,7 @@ import QtQuick.Layouts 1.15
 import Qt.labs.qmlmodels 1.0
 
 import org.kde.kirigami 2.15 as Kirigami
+import org.kde.kirigamiaddons.labs.components 1.0 as KirigamiComponents
 
 import org.kde.neochat 1.0
 
@@ -202,7 +203,7 @@ Kirigami.ScrollablePage {
                 applicationWindow().pageStack.layers.pop();
             }
             contentItem: RowLayout {
-                Kirigami.Avatar {
+                KirigamiComponents.Avatar {
                     Layout.preferredWidth: Kirigami.Units.gridUnit * 2
                     Layout.preferredHeight: Kirigami.Units.gridUnit * 2
 

src/qml/Page/RoomList/CollapsedRoomDelegate.qml

@@ -7,6 +7,7 @@ import QtQuick.Layouts 1.15
 import QtQml.Models 2.15
 
 import org.kde.kirigami 2.15 as Kirigami
+import org.kde.kirigamiaddons.labs.components 1.0 as KirigamiComponents
 import org.kde.kitemmodels 1.0
 
 import org.kde.neochat 1.0
@@ -32,7 +33,7 @@ QQC2.ItemDelegate {
 
     visible: root.categoryVisible || filterText.length > 0 || Config.mergeRoomList
 
-    contentItem: Kirigami.Avatar {
+    contentItem: KirigamiComponents.Avatar {
         source: root.avatar ? `image://mxc/${root.avatar}` : ""
         name: root.displayName
 

src/qml/Page/RoomList/ContextMenu.qml

@@ -7,6 +7,7 @@ import QtQuick.Controls 2.15 as QQC2
 import QtQuick.Layouts 1.15
 
 import org.kde.kirigami 2.19 as Kirigami
+import org.kde.kirigamiaddons.labs.components 1.0 as KirigamiComponents
 
 import org.kde.neochat 1.0
 
@@ -157,7 +158,7 @@ Loader {
                     Layout.fillWidth: true
                     Layout.margins: Kirigami.Units.largeSpacing
                     spacing: Kirigami.Units.largeSpacing
-                    Kirigami.Avatar {
+                    KirigamiComponents.Avatar {
                         id: avatar
                         source: room.avatarMediaId ? ("image://mxc/" + room.avatarMediaId) : ""
                         name: room.displayName

src/qml/Page/RoomList/RoomDelegate.qml

@@ -8,6 +8,7 @@ import QtQml.Models 2.15
 
 import org.kde.kirigami 2.15 as Kirigami
 import org.kde.kirigamiaddons.delegates 1.0 as Delegates
+import org.kde.kirigamiaddons.labs.components 1.0 as Components
 import org.kde.kitemmodels 1.0
 
 import org.kde.neochat 1.0
@@ -39,19 +40,17 @@ Delegates.RoundedItemDelegate {
     }
 
     contentItem: RowLayout {
-        Kirigami.Avatar {
+        spacing: Kirigami.Units.largeSpacing
+
+        Components.Avatar {
             source: root.avatar ? "image://mxc/" +  root.avatar : ""
             name: root.displayName
-            implicitWidth: visible ? height : 0
-            implicitHeight: Kirigami.Units.gridUnit + Kirigami.Units.largeSpacing
             visible: Config.showAvatarInRoomDrawer
-            sourceSize {
-                width: Kirigami.Units.gridUnit + Kirigami.Units.largeSpacing
-                height: Kirigami.Units.gridUnit + Kirigami.Units.largeSpacing
-            }
+            implicitHeight: Kirigami.Units.gridUnit + Kirigami.Units.largeSpacing * 2
+            implicitWidth: visible ? implicitHeight : 0
 
-            Layout.topMargin: Kirigami.Units.largeSpacing / 2
-            Layout.bottomMargin: Kirigami.Units.largeSpacing / 2
+            Layout.fillHeight: true
+            Layout.preferredWidth: height
         }
 
         ColumnLayout {

src/qml/Page/RoomList/SpaceListContextMenu.qml

@@ -7,6 +7,7 @@ import QtQuick.Controls 2.15 as QQC2
 import QtQuick.Layouts 1.15
 
 import org.kde.kirigami 2.19 as Kirigami
+import org.kde.kirigamiaddons.labs.components 1.0 as KirigamiComponents
 
 import org.kde.neochat 1.0
 
@@ -78,7 +79,7 @@ Loader {
                     Layout.fillWidth: true
                     Layout.margins: Kirigami.Units.largeSpacing
                     spacing: Kirigami.Units.largeSpacing
-                    Kirigami.Avatar {
+                    KirigamiComponents.Avatar {
                         id: avatar
                         source: room.avatarMediaId ? ("image://mxc/" + room.avatarMediaId) : ""
                         Layout.preferredWidth: Kirigami.Units.gridUnit * 3

src/qml/Page/RoomList/UserInfo.qml

@@ -5,6 +5,8 @@ import QtQuick 2.15
 import QtQuick.Controls 2.15 as QQC2
 import QtQuick.Layouts 1.15
 import org.kde.kirigami 2.20 as Kirigami
+import org.kde.kirigamiaddons.labs.components 1.0 as KirigamiComponents
+import org.kde.kirigamiaddons.delegates 1.0 as Delegates
 
 import org.kde.neochat 1.0
 
@@ -27,34 +29,28 @@ QQC2.ToolBar {
 
             header: Kirigami.Separator {}
 
-            footer: Kirigami.BasicListItem {
+            footer: Delegates.RoundedItemDelegate {
+                id: addButton
                 width: parent.width
-                highlighted: focus
-                background: Rectangle {
-                    id: background
-                    color: addAccount.backgroundColor
-
-                    Rectangle {
-                        anchors.fill: parent
-                        visible: !Kirigami.Settings.tabletMode && addAccount.hoverEnabled
-                        color: addAccount.activeBackgroundColor
-                        opacity: {
-                            if ((addAccount.highlighted || addAccount.ListView.isCurrentItem) && !addAccount.pressed) {
-                                return .6
-                            } else if (addAccount.hovered && !addAccount.pressed) {
-                                return .3
-                            } else {
-                                return 0
-                            }
-                        }
-                    }
-                }
+                highlighted: focus || (addAccount.highlighted || addAccount.ListView.isCurrentItem) && !addAccount.pressed
                 Component.onCompleted: userInfo.addAccount = this
-                icon: "list-add"
+                icon {
+                    name: "list-add"
+                    width: Kirigami.Units.iconSizes.smallMedium
+                    height: Kirigami.Units.iconSizes.smallMedium
+                }
                 text: i18n("Add Account")
-                subtitle: i18n("Log in to an existing account")
+                contentItem: Delegates.SubtitleContentItem {
+                    itemDelegate: parent
+                    subtitle: i18n("Log in to an existing account")
+                    labelItem.textFormat: Text.PlainText
+                    subtitleItem.textFormat: Text.PlainText
+                }
+
                 onClicked: {
-                    pageStack.pushDialogLayer("qrc:/WelcomePage.qml", {}, {title: i18nc("@title:window", "Login")})
+                    pageStack.pushDialogLayer("qrc:/WelcomePage.qml", {}, {
+                        title: i18nc("@title:window", "Login"),
+                    });
                     if (switchUserButton.checked) {
                         switchUserButton.checked = false
                     }
@@ -101,26 +97,36 @@ QQC2.ToolBar {
 
             width: parent.width
             Layout.preferredHeight: contentHeight
-            delegate: Kirigami.BasicListItem {
-                leftPadding: topPadding
-                leading: Kirigami.Avatar {
-                    implicitWidth: Kirigami.Units.gridUnit + Kirigami.Units.largeSpacing
-                    implicitHeight: Kirigami.Units.gridUnit + Kirigami.Units.largeSpacing
-                    sourceSize {
-                        width: Kirigami.Units.gridUnit + Kirigami.Units.largeSpacing
-                        height: Kirigami.Units.gridUnit + Kirigami.Units.largeSpacing
-                    }
-                    source: model.connection.localUser.avatarMediaId ? ("image://mxc/" + model.connection.localUser.avatarMediaId) : ""
-                    name: model.connection.localUser.displayName ?? model.connection.localUser.id
-                }
+            delegate: Delegates.RoundedItemDelegate {
+                id: userDelegate
+
+                required property var connection
+
                 width: parent.width
-                text: model.connection.localUser.displayName
-                labelItem.textFormat: Text.PlainText
-                subtitleItem.textFormat: Text.PlainText
-                subtitle: model.connection.localUser.id
+                text: connection.localUser.displayName
+
+                contentItem: RowLayout {
+                    KirigamiComponents.Avatar {
+                        implicitWidth: Kirigami.Units.gridUnit + Kirigami.Units.largeSpacing
+                        implicitHeight: Kirigami.Units.gridUnit + Kirigami.Units.largeSpacing
+                        sourceSize {
+                            width: Kirigami.Units.gridUnit + Kirigami.Units.largeSpacing
+                            height: Kirigami.Units.gridUnit + Kirigami.Units.largeSpacing
+                        }
+                        source: userDelegate.connection.localUser.avatarMediaId ? ("image://mxc/" + userDelegate.connection.localUser.avatarMediaId) : ""
+                        name: userDelegate.connection.localUser.displayName ?? userDelegate.connection.localUser.id
+                    }
+
+                    Delegates.SubtitleContentItem {
+                        itemDelegate: userDelegate
+                        subtitle: userDelegate.connection.localUser.id
+                        labelItem.textFormat: Text.PlainText
+                        subtitleItem.textFormat: Text.PlainText
+                    }
+                }
 
                 onClicked: {
-                    Controller.activeConnection = model.connection
+                    Controller.activeConnection = userDelegate.connection
                     if (switchUserButton.checked) {
                         switchUserButton.checked = false
                     }
@@ -139,29 +145,31 @@ QQC2.ToolBar {
             Layout.bottomMargin: Kirigami.Units.smallSpacing
             Layout.minimumHeight: Kirigami.Units.gridUnit * 2 - 2 // HACK: -2 here is to ensure the ChatBox and the UserInfo have the same height
 
-            Kirigami.Avatar {
-                readonly property string mediaId: Controller.activeConnection.localUser.avatarMediaId
-
+            QQC2.AbstractButton {
                 Layout.preferredWidth: Kirigami.Units.gridUnit + Kirigami.Units.largeSpacing
                 Layout.preferredHeight: Kirigami.Units.gridUnit + Kirigami.Units.largeSpacing
                 Layout.leftMargin: Kirigami.Units.largeSpacing
 
-                source: mediaId ? ("image://mxc/" + mediaId) : ""
-                name: Controller.activeConnection.localUser.displayName ?? Controller.activeConnection.localUser.id
-                actions.main: Kirigami.Action {
-                    text: i18n("Edit this account")
-                    icon.name: "document-edit"
-                    onTriggered: pageStack.pushDialogLayer(Qt.resolvedUrl('qrc:/AccountEditorPage.qml'), {
-                        connection: Controller.activeConnection
-                    }, {
-                        title: i18n("Account editor")
-                    });
-                }
                 TapHandler {
                     acceptedButtons: Qt.RightButton
                     acceptedDevices: PointerDevice.Mouse
                     onTapped: accountMenu.open()
                 }
+
+                text: i18n("Edit this account")
+
+                onClicked: pageStack.pushDialogLayer(Qt.resolvedUrl('qrc:/AccountEditorPage.qml'), {
+                    connection: Controller.activeConnection
+                }, {
+                    title: i18n("Account editor")
+                });
+
+                contentItem: KirigamiComponents.Avatar {
+                    readonly property string mediaId: Controller.activeConnection.localUser.avatarMediaId
+
+                    source: mediaId ? ("image://mxc/" + mediaId) : ""
+                    name: Controller.activeConnection.localUser.displayName ?? Controller.activeConnection.localUser.id
+                }
             }
 
             ColumnLayout {
@@ -220,7 +228,7 @@ QQC2.ToolBar {
                 Layout.minimumWidth: Layout.preferredWidth
                 Layout.alignment: Qt.AlignRight
                 Layout.rightMargin: Kirigami.Units.largeSpacing
-                QQC2.ToolTip.text: parent.text
+                QQC2.ToolTip.text: text
                 QQC2.ToolTip.visible: hovered
                 QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay
             }

src/qml/Page/RoomPage.qml

@@ -43,7 +43,22 @@ Kirigami.Page {
         }
     }
 
+    Connections {
+        target: Controller
+        function onIsOnlineChanged() {
+            if (true || !Controller.isOnline) {
+                banner.text = i18n("NeoChat is offline. Please check your network connection.");
+                banner.visible = true;
+                banner.type = Kirigami.MessageType.Error;
+            } else {
+                banner.visible = false;
+            }
+        }
+    }
+
     header: KirigamiComponents.Banner {
+        id: banner
+
         showCloseButton: true
         visible: false
     }
@@ -162,16 +177,16 @@ Kirigami.Page {
     Connections {
         target: currentRoom
         function onShowMessage(messageType, message) {
-            root.header.text = message;
-            root.headertype = messageType === ActionsHandler.Error ? Kirigami.MessageType.Error : messageType === ActionsHandler.Positive ? Kirigami.MessageType.Positive : Kirigami.MessageType.Information;
-            root.header.visible = true;
+            banner.text = message;
+            banner.type = messageType === ActionsHandler.Error ? Kirigami.MessageType.Error : messageType === ActionsHandler.Positive ? Kirigami.MessageType.Positive : Kirigami.MessageType.Information;
+            banner.visible = true;
         }
     }
 
     function warning(title, message) {
-        root.header.text = `${title}<br />${message}`;
-        root.header.type =  Kirigami.MessageType.Warning;
-        root.header.visible = true;
+        banner.text = `${title}<br />${message}`;
+        banner.type =  Kirigami.MessageType.Warning;
+        banner.visible = true;
     }
 
     function showUserDetail(user) {

src/qml/Page/StartChatPage.qml

@@ -7,6 +7,8 @@ import QtQuick.Controls 2.15 as QQC2
 import QtQuick.Layouts 1.15
 
 import org.kde.kirigami 2.15 as Kirigami
+import org.kde.kirigamiaddons.delegates 1.0 as Delegates
+import org.kde.kirigamiaddons.labs.components 1.0 as KirigamiComponents
 
 import org.kde.neochat 1.0
 
@@ -60,69 +62,68 @@ Kirigami.ScrollablePage {
             keyword: identifierField.text
         }
 
-        delegate: Kirigami.AbstractListItem {
-            width: userDictListView.width
+        delegate: Delegates.RoundedItemDelegate {
+            id: delegate
+
+            required property string userID
+            required property string avatar
+            required property string name
+            required property var directChats
+
+            text: name
+
             contentItem: RowLayout {
-                spacing: Kirigami.Units.largeSpacing
-
-                Kirigami.Avatar {
-                    Layout.preferredWidth: height
-                    Layout.fillHeight: true
-
-                    source: model.avatar ? ("image://mxc/" + model.avatar) : ""
-                    name: model.name
+                KirigamiComponents.Avatar {
+                    Layout.preferredWidth: Kirigami.Units.iconSizes.medium
+                    Layout.preferredHeight: Kirigami.Units.iconSizes.medium
+                    source: delegate.avatar ? ("image://mxc/" + delegate.avatar) : ""
+                    name: delegate.name
                 }
 
-                ColumnLayout {
+                Delegates.SubtitleContentItem {
+                    itemDelegate: delegate
+                    subtitle: delegate.userID
                     Layout.fillWidth: true
-                    Layout.fillHeight: true
-
-                    spacing: 0
-
-                    Kirigami.Heading {
-                        Layout.fillWidth: true
-                        Layout.fillHeight: true
-
-                        text: name
-                        textFormat: Text.PlainText
-                        elide: Text.ElideRight
-                        wrapMode: Text.NoWrap
-                    }
-
-                    QQC2.Label {
-                        Layout.fillWidth: true
-                        Layout.fillHeight: true
-
-                        text: userID
-                        textFormat: Text.PlainText
-                        elide: Text.ElideRight
-                        wrapMode: Text.NoWrap
-                    }
                 }
 
                 QQC2.Button {
                     id: joinChatButton
-                    Layout.alignment: Qt.AlignRight
-                    visible: directChats && directChats.length > 0
+
+                    visible: delegate.directChats && delegate.directChats.length > 0
+                    text: i18n("Join existing chat")
+                    display: QQC2.Button.IconOnly
 
                     icon.name: "document-send"
                     onClicked: {
-                        connection.requestDirectChat(userID);
+                        connection.requestDirectChat(delegate.userID);
                         applicationWindow().pageStack.layers.pop();
                     }
+
+                    Layout.alignment: Qt.AlignRight
+
+                    QQC2.ToolTip.text: text
+                    QQC2.ToolTip.visible: hovered
+                    QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay
                 }
 
                 QQC2.Button {
-                    Layout.alignment: Qt.AlignRight
                     icon.name: "irc-join-channel"
                     // We wants to make sure an user can't start more than one
                     // chat with someone.
                     visible: !joinChatButton.visible
+                    text: i18n("Create new chat")
+                    display: QQC2.Button.IconOnly
 
                     onClicked: {
-                        connection.requestDirectChat(userID);
+                        connection.requestDirectChat(delegate.userID);
                         applicationWindow().pageStack.layers.pop();
                     }
+
+                    Layout.alignment: Qt.AlignRight
+
+                    QQC2.ToolTip.text: text
+                    QQC2.ToolTip.visible: hovered
+                    QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay
                 }
             }
         }

src/qml/Panel/DirectChatDrawerHeader.qml

@@ -6,6 +6,7 @@ import QtQuick 2.15
 import QtQuick.Controls 2.15 as QQC2
 import QtQuick.Layouts 1.15
 import org.kde.kirigami 2.15 as Kirigami
+import org.kde.kirigamiaddons.labs.components 1.0 as KirigamiComponents
 
 import org.kde.neochat 1.0
 
@@ -18,43 +19,45 @@ ColumnLayout {
         Layout.fillWidth: true
         Layout.preferredHeight: Kirigami.Units.largeSpacing * 2
     }
-    Kirigami.Avatar {
+
+    QQC2.AbstractButton {
         Layout.preferredWidth: Math.round(Kirigami.Units.gridUnit * 3.5)
         Layout.preferredHeight: Math.round(Kirigami.Units.gridUnit * 3.5)
         Layout.alignment: Qt.AlignHCenter
 
-        name: room ? room.displayName : ""
-        source: room ? ("image://mxc/" +  room.avatarMediaId) : ""
-
-        Rectangle {
-            visible: room.usesEncryption
-            color: Kirigami.Theme.backgroundColor
-
-            width: Kirigami.Units.gridUnit
-            height: Kirigami.Units.gridUnit
-            anchors.bottom: parent.bottom
-            anchors.right: parent.right
-
-            radius: Math.round(width / 2)
-
-            Kirigami.Icon {
-                source: "channel-secure-symbolic"
-                anchors.fill: parent
+        onClicked: {
+            const popup = userDetailDialog.createObject(QQC2.ApplicationWindow.overlay, {
+                room: room,
+                user: room.getUser(room.directChatRemoteUser.id),
+            })
+            popup.closed.connect(() => {
+                userListItem.highlighted = false
+            })
+            if (roomDrawer.modal) {
+                roomDrawer.close()
             }
+            popup.open()
         }
-        actions.main: Kirigami.Action {
-            onTriggered: {
-                const popup = userDetailDialog.createObject(QQC2.ApplicationWindow.overlay, {
-                    room: room,
-                    user: room.getUser(room.directChatRemoteUser.id),
-                })
-                popup.closed.connect(() => {
-                    userListItem.highlighted = false
-                })
-                if (roomDrawer.modal) {
-                    roomDrawer.close()
+
+        contentItem: KirigamiComponents.Avatar {
+            name: room ? room.displayName : ""
+            source: room ? ("image://mxc/" +  room.avatarMediaId) : ""
+
+            Rectangle {
+                visible: room.usesEncryption
+                color: Kirigami.Theme.backgroundColor
+
+                width: Kirigami.Units.gridUnit
+                height: Kirigami.Units.gridUnit
+                anchors.bottom: parent.bottom
+                anchors.right: parent.right
+
+                radius: Math.round(width / 2)
+
+                Kirigami.Icon {
+                    source: "channel-secure-symbolic"
+                    anchors.fill: parent
                 }
-                popup.open()
             }
         }
     }

src/qml/Panel/GroupChatDrawerHeader.qml

@@ -6,6 +6,7 @@ import QtQuick 2.15
 import QtQuick.Controls 2.15 as QQC2
 import QtQuick.Layouts 1.15
 import org.kde.kirigami 2.20 as Kirigami
+import org.kde.kirigamiaddons.labs.components 1.0 as KirigamiComponents
 
 import org.kde.neochat 1.0
 
@@ -17,11 +18,14 @@ ColumnLayout {
     RowLayout {
         Layout.fillWidth: true
         Layout.leftMargin: Kirigami.Units.largeSpacing
+        Layout.topMargin: Kirigami.Units.largeSpacing
+        Layout.bottomMargin: Kirigami.Units.largeSpacing
+
         spacing: Kirigami.Units.largeSpacing
 
-        Kirigami.Avatar {
-            Layout.preferredWidth: Kirigami.Units.gridUnit * 3.5
-            Layout.preferredHeight: Kirigami.Units.gridUnit * 3.5
+        KirigamiComponents.Avatar {
+            Layout.preferredWidth: Kirigami.Units.iconSizes.large
+            Layout.preferredHeight: Kirigami.Units.iconSizes.large
 
             name: room ? room.displayName : ""
             source: room && room.avatarMediaId ? ("image://mxc/" +  room.avatarMediaId) : ""
@@ -47,6 +51,7 @@ ColumnLayout {
             }
         }
 
+
         ColumnLayout {
             Layout.fillWidth: true
             Layout.alignment: Qt.AlignVCenter
@@ -54,14 +59,13 @@ ColumnLayout {
 
             Kirigami.Heading {
                 Layout.fillWidth: true
-                type: Kirigami.Heading.Type.Primary
-                wrapMode: QQC2.Label.Wrap
                 text: room ? room.displayName : i18n("No name")
                 textFormat: Text.PlainText
             }
 
             Kirigami.SelectableLabel {
                 Layout.fillWidth: true
+                font: Kirigami.Theme.smallFont
                 textFormat: TextEdit.PlainText
                 text: room && room.canonicalAlias ? room.canonicalAlias : i18n("No Canonical Alias")
             }

src/qml/Panel/RoomDrawer.qml

@@ -8,6 +8,7 @@ import QtQuick.Layouts 1.15
 
 import org.kde.kirigami 2.20 as Kirigami
 import org.kde.kirigamiaddons.delegates 1.0 as Delegates
+import org.kde.kirigamiaddons.labs.components 1.0 as KirigamiComponents
 import org.kde.kitemmodels 1.0
 
 import org.kde.neochat 1.0
@@ -74,11 +75,15 @@ Kirigami.OverlayDrawer {
         active: roomDrawer.drawerOpen
 
         sourceComponent: ColumnLayout {
-            readonly property string userSearchText: userListView.headerItem.userListSearchField.text
+            readonly property string userSearchText: userListView.headerItem ? userListView.headerItem.userListSearchField.text : ''
             property alias highlightedUser: userListView.currentIndex
 
             spacing: 0
 
+            function clearSearch() {
+                userListView.headerItem.userListSearchField.text = ""
+            }
+
             QQC2.ToolBar {
                 Layout.fillWidth: true
 
@@ -129,6 +134,9 @@ Kirigami.OverlayDrawer {
                             Layout.fillWidth: true
                             Layout.topMargin: Kirigami.Units.smallSpacing
                             sourceComponent: room.isDirectChat() ? directChatDrawerHeader : groupChatDrawerHeader
+                            onItemChanged: if (item) {
+                                userListView.positionViewAtBeginning();
+                            }
                         }
 
                         Kirigami.ListSectionHeader {
@@ -299,7 +307,7 @@ Kirigami.OverlayDrawer {
                         }
 
                         contentItem: RowLayout {
-                            Kirigami.Avatar {
+                            KirigamiComponents.Avatar {
                                 implicitWidth: height
                                 sourceSize {
                                     height: Kirigami.Units.gridUnit + Kirigami.Units.smallSpacing * 2.5
@@ -335,7 +343,7 @@ Kirigami.OverlayDrawer {
 
     onRoomChanged: {
         if (loader.active) {
-            loader.item.userSearchText = ""
+            loader.item.clearSearch()
             loader.item.highlightedUser = -1
         }
         if (room == null) {

src/qml/RoomSettings/General.qml

@@ -9,6 +9,7 @@ import QtQuick.Window 2.15
 
 import org.kde.kirigami 2.15 as Kirigami
 import org.kde.kirigamiaddons.labs.mobileform 0.1 as MobileForm
+import org.kde.kirigamiaddons.labs.components 1.0 as KirigamiComponents
 
 import org.kde.neochat 1.0
 
@@ -38,11 +39,13 @@ Kirigami.ScrollablePage {
                         Item {
                             Layout.fillWidth: true
                         }
-                        Kirigami.Avatar {
+                        KirigamiComponents.Avatar {
                             id: avatar
                             Layout.alignment: Qt.AlignRight
                             name: room.name
                             source: room.avatarMediaId ? ("image://mxc/" + room.avatarMediaId) : ""
+                            implicitWidth: Kirigami.Units.iconSizes.medium
+                            implicitHeight: Kirigami.Units.iconSizes.medium
                         }
                         QQC2.Button {
                             Layout.alignment: Qt.AlignLeft

src/qml/RoomSettings/Permissions.qml

@@ -7,6 +7,8 @@ import QtQuick.Layouts 1.15
 
 import org.kde.kirigami 2.15 as Kirigami
 import org.kde.kirigamiaddons.labs.mobileform 0.1 as MobileForm
+import org.kde.kirigamiaddons.delegates 1.0 as Delegates
+import org.kde.kirigamiaddons.labs.components 1.0 as KirigamiComponents
 import org.kde.kitemmodels 1.0
 
 import org.kde.neochat 1.0
@@ -93,17 +95,19 @@ Kirigami.ScrollablePage {
                     visible: room.canSendState("m.room.power_levels")
 
                     contentItem: Kirigami.SearchField {
-                            id: userListSearchField
-                            Layout.fillWidth: true
-                            autoAccept: false
+                        id: userListSearchField
 
-                            Keys.onUpPressed: userListView.decrementCurrentIndex()
-                            Keys.onDownPressed: userListView.incrementCurrentIndex()
+                        autoAccept: false
 
-                            onAccepted: {
-                                let currentUser = userListView.itemAtIndex(userListView.currentIndex);
-                                currentUser.action.trigger();
-                            }
+                        Layout.fillWidth: true
+
+                        Keys.onUpPressed: userListView.decrementCurrentIndex()
+                        Keys.onDownPressed: userListView.incrementCurrentIndex()
+
+                        onAccepted: {
+                            let currentUser = userListView.itemAtIndex(userListView.currentIndex);
+                            currentUser.action.trigger();
+                        }
                     }
                     QQC2.Popup {
                         id: userListSearchPopup
@@ -119,21 +123,31 @@ Kirigami.ScrollablePage {
                             return Math.max(Math.min(filterContentHeight, maxHeight), minHeight);
                         }
                         padding: Kirigami.Units.smallSpacing
+                        leftPadding: Kirigami.Units.smallSpacing / 2
+                        rightPadding: Kirigami.Units.smallSpacing / 2
                         modal: false
                         onClosed: userListSearchField.text = ""
 
                         background: Kirigami.ShadowedRectangle {
+                            property color borderColor: Kirigami.Theme.textColor
+
+                            Kirigami.Theme.colorSet: Kirigami.Theme.View
+                            Kirigami.Theme.inherit: false
+
                             radius: 4
                             color: Kirigami.Theme.backgroundColor
 
-                            property color borderColor: Kirigami.Theme.textColor
-                            border.color: Qt.rgba(borderColor.r, borderColor.g, borderColor.b, 0.3)
-                            border.width: 1
+                            border {
+                                color: Qt.rgba(borderColor.r, borderColor.g, borderColor.b, 0.3)
+                                width: 1
+                            }
 
-                            shadow.xOffset: 0
-                            shadow.yOffset: 4
-                            shadow.color: Qt.rgba(0, 0, 0, 0.3)
-                            shadow.size: 8
+                            shadow {
+                                xOffset: 0
+                                yOffset: 4
+                                color: Qt.rgba(0, 0, 0, 0.3)
+                                size: 8
+                            }
                         }
 
                         contentItem: QQC2.ScrollView {
@@ -158,16 +172,42 @@ Kirigami.ScrollablePage {
                                     }
                                 }
 
-                                delegate: Kirigami.BasicListItem {
+                                delegate: Delegates.RoundedItemDelegate {
                                     id: userListItem
 
-                                    implicitHeight: Kirigami.Units.gridUnit * 2
-                                    leftPadding: Kirigami.Units.largeSpacing + Kirigami.Units.smallSpacing
+                                    required property string userId
+                                    required property string avatar
+                                    required property string name
+                                    required property int powerLevel
+                                    required property string powerLevelString
 
-                                    label: name
-                                    labelItem.textFormat: Text.PlainText
-                                    subtitle: userId
-                                    subtitleItem.textFormat: Text.PlainText
+                                    text: name
+
+                                    contentItem: RowLayout {
+                                        KirigamiComponents.Avatar {
+                                            Layout.preferredWidth: Kirigami.Units.iconSizes.medium
+                                            Layout.preferredHeight: Kirigami.Units.iconSizes.medium
+                                            source: userListItem.avatar ? ("image://" + userListItem.avatar) : ""
+                                            name: userListItem.name
+                                        }
+
+                                        Delegates.SubtitleContentItem {
+                                            itemDelegate: userListItem
+                                            subtitle: userListItem.userId
+                                            labelItem.textFormat: Text.PlainText
+                                            subtitleItem.textFormat: Text.PlainText
+                                            Layout.fillWidth: true
+                                        }
+
+                                        QQC2.Label {
+                                            visible: userListItem.powerLevel > 0
+
+                                            text: userListItem.powerLevelString
+                                            color: Kirigami.Theme.disabledTextColor
+                                            textFormat: Text.PlainText
+                                            wrapMode: Text.NoWrap
+                                        }
+                                    }
 
                                     action: Kirigami.Action {
                                         id: editPowerLevelAction
@@ -175,30 +215,13 @@ Kirigami.ScrollablePage {
                                             userListSearchPopup.close()
                                             let dialog = powerLevelDialog.createObject(applicationWindow().overlay, {
                                                 room: root.room,
-                                                userId: model.userId,
-                                                powerLevel: model.powerLevel
+                                                userId: userListItem.userId,
+                                                powerLevel: userListItem.powerLevel
                                             });
                                             dialog.open();
                                         }
                                     }
 
-                                    leading: Kirigami.Avatar {
-                                        implicitWidth: height
-                                        sourceSize.height: Kirigami.Units.gridUnit + Kirigami.Units.smallSpacing * 2.5
-                                        sourceSize.width: Kirigami.Units.gridUnit + Kirigami.Units.smallSpacing * 2.5
-                                        source: avatar ? ("image://mxc/" + avatar) : ""
-                                        name: model.userId
-                                    }
-
-                                    trailing: QQC2.Label {
-                                        visible: powerLevel > 0
-
-                                        text: powerLevelString
-                                        color: Kirigami.Theme.disabledTextColor
-                                        textFormat: Text.PlainText
-                                        wrapMode: Text.NoWrap
-                                    }
-
                                     Component {
                                         id: powerLevelDialog
                                         PowerLevelDialog {

src/qml/Settings/AccountEditorPage.qml

@@ -10,6 +10,7 @@ import QtQuick.Window 2.15
 
 import org.kde.kirigami 2.15 as Kirigami
 import org.kde.kirigamiaddons.labs.mobileform 0.1 as MobileForm
+import org.kde.kirigamiaddons.labs.components 1.0 as KirigamiComponents
 import org.kde.neochat 1.0
 
 Kirigami.ScrollablePage {
@@ -24,6 +25,78 @@ Kirigami.ScrollablePage {
     rightPadding: 0
     ColumnLayout {
         spacing: 0
+
+        QQC2.RoundButton {
+            property var fileDialog: null;
+
+            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+            Layout.topMargin: Kirigami.Units.largeSpacing
+
+            // Square button
+            implicitWidth: Kirigami.Units.gridUnit * 5
+            implicitHeight: implicitWidth
+
+            padding: 0
+
+            contentItem: KirigamiComponents.Avatar {
+                id: avatar
+                source: root.connection && root.connection.localUser.avatarMediaId ? ("image://mxc/" + root.connection.localUser.avatarMediaId) : ""
+                name: root.connection.localUser.displayName
+            }
+
+            onClicked: {
+                if (fileDialog != null) {
+                    return;
+                }
+
+                fileDialog = openFileDialog.createObject(QQC2.ApplicationWindow.Overlay)
+                fileDialog.chosen.connect(function(receivedSource) {
+                    if (!receivedSource) {
+                        return;
+                    }
+                    avatar.source = receivedSource;
+                });
+                fileDialog.onRejected.connect(function() {
+                    mouseArea.fileDialog = null;
+                });
+                fileDialog.open();
+            }
+
+            QQC2.Button {
+                anchors {
+                    bottom: parent.bottom
+                    right: parent.right
+                }
+                visible: avatar.source.toString().length === 0
+                icon.name: "cloud-upload"
+                text: i18n("Upload new avatar")
+                display: QQC2.AbstractButton.IconOnly
+
+                onClicked: parent.onClicked()
+
+                QQC2.ToolTip.text: text
+                QQC2.ToolTip.visible: hovered
+                QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay
+            }
+
+            QQC2.Button {
+                anchors {
+                    bottom: parent.bottom
+                    right: parent.right
+                }
+                visible: avatar.source.toString().length !== 0
+                icon.name: "edit-clear"
+                text: i18n("Remove current avatar")
+                display: QQC2.AbstractButton.IconOnly
+
+                onClicked: avatar.source = ""
+
+                QQC2.ToolTip.text: text
+                QQC2.ToolTip.visible: hovered
+                QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay
+            }
+        }
+
         MobileForm.FormHeader {
             Layout.fillWidth: true
             title: i18n("User information")
@@ -32,73 +105,22 @@ Kirigami.ScrollablePage {
             Layout.fillWidth: true
             contentItem: ColumnLayout {
                 spacing: 0
-                MobileForm.AbstractFormDelegate {
-                    Layout.fillWidth: true
-                    background: Item {}
-                    contentItem: RowLayout {
-                        Item {
-                            Layout.fillWidth: true
-                        }
-                        Kirigami.Avatar {
-                            id: avatar
-                            Layout.alignment: Qt.AlignRight
-                            source: root.connection && root.connection.localUser.avatarMediaId ? ("image://mxc/" + root.connection.localUser.avatarMediaId) : ""
-                            name: root.connection.localUser.displayName
-
-                            MouseArea {
-                                id: mouseArea
-                                anchors.fill: parent
-                                property var fileDialog: null;
-                                onClicked: {
-                                    if (fileDialog != null) {
-                                        return;
-                                    }
-
-                                    fileDialog = openFileDialog.createObject(QQC2.ApplicationWindow.Overlay)
-                                    fileDialog.chosen.connect(function(receivedSource) {
-                                        mouseArea.fileDialog = null;
-                                        if (!receivedSource) {
-                                            return;
-                                        }
-                                        parent.source = receivedSource;
-                                    });
-                                    fileDialog.onRejected.connect(function() {
-                                        mouseArea.fileDialog = null;
-                                    });
-                                    fileDialog.open();
-                                }
-                            }
-                        }
-                        QQC2.Button {
-                            Layout.alignment: Qt.AlignLeft
-                            visible: avatar.source.toString().length !== 0
-                            icon.name: "edit-clear"
-                            text: i18n("Remove current avatar")
-                            display: QQC2.AbstractButton.IconOnly
-
-                            onClicked: avatar.source = ""
-
-                            QQC2.ToolTip.text: text
-                            QQC2.ToolTip.visible: hovered
-                        }
-                        Item {
-                            Layout.fillWidth: true
-                        }
-                    }
-                }
                 MobileForm.FormTextFieldDelegate {
                     id: name
                     label: i18n("Name:")
                     text: root.connection ? root.connection.localUser.displayName : ""
                 }
+                MobileForm.FormDelegateSeparator {}
                 MobileForm.FormTextFieldDelegate {
                     id: accountLabel
                     label: i18n("Label:")
                     text: root.connection ? Controller.activeAccountLabel : ""
                 }
+                MobileForm.FormDelegateSeparator {}
                 MobileForm.AbstractFormDelegate {
                     Layout.fillWidth: true
-                    background: Item {}
+                    background: null
+                    padding: Kirigami.Units.smallSpacing
                     contentItem: RowLayout {
                         Item {
                             Layout.fillWidth: true
@@ -136,18 +158,21 @@ Kirigami.ScrollablePage {
                     visible: root.connection !== undefined && root.connection.canChangePassword === false
                     text: i18n("Your server doesn't support changing your password")
                 }
+                MobileForm.FormDelegateSeparator { visible: root.connection !== undefined && root.connection.canChangePassword === false }
                 MobileForm.FormTextFieldDelegate {
                     id: currentPassword
                     label: i18n("Current Password:")
                     enabled: root.connection !== undefined && root.connection.canChangePassword !== false
                     echoMode: TextInput.Password
                 }
+                MobileForm.FormDelegateSeparator {}
                 MobileForm.FormTextFieldDelegate {
                     id: newPassword
                     label: i18n("New Password:")
                     enabled: root.connection !== undefined && root.connection.canChangePassword !== false
                     echoMode: TextInput.Password
                 }
+                MobileForm.FormDelegateSeparator {}
                 MobileForm.FormTextFieldDelegate {
                     id: confirmPassword
                     label: i18n("Confirm new Password:")
@@ -161,9 +186,10 @@ Kirigami.ScrollablePage {
                         confirmPassword.statusMessage = '';
                     }
                 }
+                MobileForm.FormDelegateSeparator {}
                 MobileForm.AbstractFormDelegate {
                     Layout.fillWidth: true
-                    background: Item {}
+                    background: null
                     contentItem: RowLayout {
                         Item {
                             Layout.fillWidth: true

src/qml/Settings/AccountsPage.qml

@@ -8,6 +8,7 @@ import Qt.labs.platform 1.1
 
 import org.kde.kirigami 2.19 as Kirigami
 import org.kde.kirigamiaddons.labs.mobileform 0.1 as MobileForm
+import org.kde.kirigamiaddons.labs.components 1.0 as KirigamiComponents
 
 import org.kde.neochat 1.0
 
@@ -38,7 +39,7 @@ Kirigami.ScrollablePage {
                         })
 
                         contentItem: RowLayout {
-                            Kirigami.Avatar {
+                            KirigamiComponents.Avatar {
                                 name: model.connection.localUser.displayName
                                 source: model.connection.localUser.avatarMediaId ? ("image://mxc/" + model.connection.localUser.avatarMediaId) : ""
 

src/qml/Settings/AppearanceSettingsPage.qml

@@ -8,6 +8,7 @@ import QtQuick.Layouts 1.15
 
 import org.kde.kirigami 2.15 as Kirigami
 import org.kde.kirigamiaddons.labs.mobileform 0.1 as MobileForm
+import org.kde.kirigamiaddons.labs.components 1.0 as KirigamiComponents
 
 import org.kde.neochat 1.0
 
@@ -42,7 +43,7 @@ Kirigami.ScrollablePage {
                             innerObject: [
                                 RowLayout {
                                     Layout.fillWidth: true
-                                    Kirigami.Avatar {
+                                    KirigamiComponents.Avatar {
                                         color: "#4a5bcc"
                                         Layout.alignment: Qt.AlignTop
                                         visible: Config.showAvatarInTimeline
@@ -79,7 +80,7 @@ Kirigami.ScrollablePage {
                                 },
                                 RowLayout {
                                     Layout.fillWidth: true
-                                    Kirigami.Avatar {
+                                    KirigamiComponents.Avatar {
                                         color: "#9f244b"
                                         Layout.alignment: Qt.AlignTop
                                         visible: Config.showAvatarInTimeline
@@ -132,7 +133,7 @@ Kirigami.ScrollablePage {
                             innerObject: [
                                 RowLayout {
                                     Layout.fillWidth: true
-                                    Kirigami.Avatar {
+                                    KirigamiComponents.Avatar {
                                         color: "#4a5bcc"
                                         Layout.alignment: Qt.AlignTop
                                         visible: Config.showAvatarInTimeline
@@ -159,7 +160,7 @@ Kirigami.ScrollablePage {
                                 },
                                 RowLayout {
                                     Layout.fillWidth: true
-                                    Kirigami.Avatar {
+                                    KirigamiComponents.Avatar {
                                         color: "#9f244b"
                                         Layout.alignment: Qt.AlignTop
                                         visible: Config.showAvatarInTimeline