Use modules.

imports/Spectral/Component/AutoMouseArea.qml

@@ -1,5 +1,6 @@
 import QtQuick 2.9
-import Spectral.Settings 0.1
+
+import Spectral.Setting 0.1
 
 MouseArea {
     signal primaryClicked()

imports/Spectral/Component/Emoji/EmojiPicker.qml

@@ -2,6 +2,7 @@ import QtQuick 2.9
 import QtQuick.Controls 2.2
 import QtQuick.Layouts 1.3
 import QtQuick.Controls.Material 2.2
+
 import Spectral 0.1
 
 Popup {

imports/Spectral/Component/Emoji/qmldir

@@ -0,0 +1,2 @@
+module Spectral.Component.Emoji
+EmojiPicker 2.0 EmojiPicker.qml

imports/Spectral/Component/MaterialIcon.qml

@@ -1,7 +1,9 @@
 import QtQuick 2.9
 import QtQuick.Controls 2.2
 import QtQuick.Layouts 1.3
-import Spectral.Settings 0.1
+
+import Spectral.Setting 0.1
+import Spectral.Font 0.1
 
 Text {
     property alias icon: materialLabel.text
@@ -10,7 +12,7 @@ Text {
 
     color: MSettings.darkTheme ? "white" : "dark"
     font.pointSize: 16
-    font.family: materialFont.name
+    font.family: MaterialFont.name
     horizontalAlignment: Text.AlignHCenter
     verticalAlignment: Text.AlignVCenter
 }

imports/Spectral/Component/Timeline/AutoLabel.qml

@@ -1,7 +1,8 @@
 import QtQuick 2.9
 import QtQuick.Controls 2.2
 import QtQuick.Controls.Material 2.2
-import Spectral.Settings 0.1
+
+import Spectral.Setting 0.1
 
 Label {
     property bool coloredBackground

imports/Spectral/Component/Timeline/GenericBubble.qml

@@ -1,7 +1,11 @@
 import QtQuick 2.9
 import QtQuick.Controls 2.2
 import QtQuick.Controls.Material 2.2
-import Spectral.Settings 0.1
+
+import Spectral.Component 2.0
+import Spectral.Effect 2.0
+
+import Spectral.Setting 0.1
 
 Control {
     property bool highlighted: false

imports/Spectral/Component/Timeline/MessageDelegate.qml

@@ -2,8 +2,10 @@ import QtQuick 2.9
 import QtQuick.Controls 2.2
 import QtQuick.Layouts 1.3
 import QtQuick.Controls.Material 2.2
+
 import Spectral 0.1
-import Spectral.Settings 0.1
+import Spectral.Setting 0.1
+
 import "qrc:/js/util.js" as Util
 
 RowLayout {

imports/Spectral/Component/Timeline/StateDelegate.qml

@@ -2,7 +2,8 @@ import QtQuick 2.9
 import QtQuick.Controls 2.2
 import QtQuick.Layouts 1.3
 import QtQuick.Controls.Material 2.2
-import Spectral.Settings 0.1
+
+import Spectral.Setting 0.1
 
 Label {
     Layout.alignment: Qt.AlignHCenter

imports/Spectral/Component/Timeline/qmldir

@@ -0,0 +1,4 @@
+module Spectral.Component.Timeline
+MessageDelegate 2.0 MessageDelegate.qml
+StateDelegate 2.0 StateDelegate.qml
+

imports/Spectral/Component/qmldir

@@ -0,0 +1,4 @@
+module Spectral.Component
+AutoMouseArea 2.0 AutoMouseArea.qml
+MaterialIcon 2.0 MaterialIcon.qml
+SideNavButton 2.0 SideNavButton.qml

imports/Spectral/Effect/qmldir

@@ -0,0 +1,2 @@
+module Spectral.Effect
+ElevationEffect 2.0 ElevationEffect.qml

imports/Spectral/Font/MaterialFont.qml

@@ -0,0 +1,6 @@
+pragma Singleton
+import QtQuick 2.9
+
+FontLoader {
+    source: "qrc:/assets/font/material.ttf"
+}

imports/Spectral/Form/RoomDrawer.qml

@@ -2,6 +2,9 @@ import QtQuick 2.9
 import QtQuick.Controls 2.2
 import QtQuick.Controls.Material 2.2
 import QtQuick.Layouts 1.3
+
+import Spectral.Component 2.0
+
 import Spectral 0.1
 
 import "qrc:/js/util.js" as Util

imports/Spectral/Form/RoomForm.qml

@@ -2,12 +2,17 @@ import QtQuick 2.9
 import QtQuick.Controls 2.2
 import QtQuick.Layouts 1.3
 import QtQuick.Controls.Material 2.2
+
+import Spectral.Component 2.0
+import Spectral.Component.Emoji 2.0
+import Spectral.Component.Timeline 2.0
+import Spectral.Menu 2.0
+import Spectral.Effect 2.0
+
 import Spectral 0.1
-import Spectral.Settings 0.1
+import Spectral.Setting 0.1
 import SortFilterProxyModel 0.2
 
-import "../component"
-import "../menu"
 import "qrc:/js/md.js" as Markdown
 import "qrc:/js/util.js" as Util
 
@@ -122,20 +127,15 @@ Item {
             spacing: 8
 
             cacheBuffer: 200
-            flickDeceleration: 4096
 
             boundsBehavior: Flickable.DragOverBounds
 
             property int largestVisibleIndex: count > 0 ? indexAt(contentX, contentY + height - 1) : -1
 
             onContentYChanged: {
-                // Check whether we're about to bump into the ceiling in 2 seconds
-                var curVelocity = verticalVelocity // Snapshot the current speed
-                if(curVelocity < 0 && contentY  - 5000 < originY)
-                {
+                if(verticalVelocity < 0 && contentY  - 5000 < originY)
                     currentRoom.getPreviousContent(50);
             }
-            }
 
             onMovementEnded: currentRoom.saveViewport(sortedMessageEventModel.mapToSource(indexAt(contentX, contentY)), sortedMessageEventModel.mapToSource(largestVisibleIndex))
 
@@ -167,7 +167,7 @@ Item {
                             messageListView.currentIndex = lastScrollPosition
                         }
                         if (messageListView.contentY < messageListView.originY + 10 || currentRoom.timelineSize === 0)
-                            currentRoom.getPreviousContent(50)
+                            currentRoom.getPreviousContent(100)
                     }
                     console.log("Model timeline reset")
                 }

imports/Spectral/Form/RoomListForm.qml

@@ -4,12 +4,15 @@ import QtQuick.Layouts 1.3
 import QtGraphicalEffects 1.0
 import QtQuick.Controls.Material 2.2
 import QtQml.Models 2.3
-import Spectral 0.1
-import SortFilterProxyModel 0.2
-import Spectral.Settings 0.1
 
-import "../component"
-import "../menu"
+import Spectral.Component 2.0
+import Spectral.Menu 2.0
+import Spectral.Effect 2.0
+
+import Spectral 0.1
+import Spectral.Setting 0.1
+import SortFilterProxyModel 0.2
+
 import "qrc:/js/util.js" as Util
 
 Rectangle {

imports/Spectral/Form/qmldir

@@ -0,0 +1,4 @@
+module Spectral.Form
+RoomForm 2.0 RoomForm.qml
+RoomListForm 2.0 RoomListForm.qml
+

imports/Spectral/Menu/qmldir

@@ -0,0 +1,4 @@
+module Spectral.Menu
+MessageContextMenu 2.0 MessageContextMenu.qml
+RoomContextMenu 2.0 RoomContextMenu.qml
+

imports/Spectral/Page/Login.qml

@@ -3,10 +3,10 @@ import QtQuick.Layouts 1.3
 import QtGraphicalEffects 1.0
 import QtQuick.Controls 2.2
 import QtQuick.Controls.Material 2.2
-import Qt.labs.settings 1.0
-import Spectral.Settings 0.1
 
-import "component"
+import Spectral.Component 2.0
+
+import Spectral.Setting 0.1
 
 Page {
     property var controller
@@ -22,7 +22,7 @@ Page {
                 Image {
                     id: background
                     anchors.fill: parent
-                    source: "qrc:/asset/img/background.jpg"
+                    source: "qrc:/assets/img/background.jpg"
                     fillMode: Image.PreserveAspectCrop
                     cache: false
                 }

imports/Spectral/Page/Room.qml

@@ -2,11 +2,13 @@ import QtQuick 2.9
 import QtQuick.Controls 2.2
 import QtQuick.Layouts 1.3
 import QtQuick.Controls.Material 2.2
-import Spectral 0.1
-import Spectral.Settings 0.1
 
-import "form"
-import "component"
+import Spectral.Form 2.0
+import Spectral.Component 2.0
+import Spectral.Effect 2.0
+
+import Spectral 0.1
+import Spectral.Setting 0.1
 
 Page {
     property alias connection: roomListModel.connection

imports/Spectral/Page/Setting.qml

@@ -2,11 +2,13 @@ import QtQuick 2.9
 import QtQuick.Controls 2.2
 import QtQuick.Controls.Material 2.2
 import QtQuick.Layouts 1.3
-import Spectral 0.1
-import Spectral.Settings 0.1
 
-import "component"
-import "form"
+import Spectral.Component 2.0
+import Spectral.Effect 2.0
+
+import Spectral 0.1
+import Spectral.Setting 0.1
+
 import "qrc:/js/util.js" as Util
 
 Page {
@@ -227,7 +229,7 @@ Page {
                 Layout.preferredWidth: 64
                 Layout.preferredHeight: 64
 
-                source: "qrc:/asset/img/icon.png"
+                source: "qrc:/assets/img/icon.png"
             }
             Label { text: "Spectral, an IM client for the Matrix protocol." }
             Label { text: "Released under GNU General Public License, version 3." }

imports/Spectral/Page/qmldir

@@ -0,0 +1,5 @@
+module Spectral.Page
+Login 2.0 Login.qml
+Room 2.0 Room.qml
+Setting 2.0 Setting.qml
+

qml/main.qml

@@ -3,12 +3,13 @@ import QtQuick.Controls 2.2
 import QtQuick.Layouts 1.3
 import QtQuick.Controls.Material 2.2
 import Qt.labs.settings 1.0
-import QtGraphicalEffects 1.0
-import Spectral 0.1
-import Spectral.Settings 0.1
 
-import "component"
-import "form"
+import Spectral.Component 2.0
+import Spectral.Page 2.0
+
+import Spectral 0.1
+import Spectral.Setting 0.1
+
 import "qrc:/js/util.js" as Util
 
 ApplicationWindow {
@@ -28,8 +29,6 @@ ApplicationWindow {
 
     Material.accent: spectralController.color(currentConnection ? currentConnection.localUserId : "")
 
-    FontLoader { id: materialFont; source: "qrc:/asset/font/material.ttf" }
-
     Controller {
         id: spectralController
 

res.qrc

@@ -1,35 +1,43 @@
 <RCC>
     <qresource prefix="/">
         <file>qtquickcontrols2.conf</file>
-        <file>asset/img/avatar.png</file>
-        <file>asset/img/background.jpg</file>
-        <file>asset/font/material.ttf</file>
-        <file>qml/Login.qml</file>
         <file>qml/main.qml</file>
-        <file>qml/form/RoomForm.qml</file>
-        <file>qml/Room.qml</file>
-        <file>qml/component/SideNavButton.qml</file>
-        <file>qml/component/MaterialIcon.qml</file>
-        <file>asset/img/icon.png</file>
         <file>js/md.js</file>
-        <file>qml/component/MessageDelegate.qml</file>
-        <file>qml/component/DownloadableContent.qml</file>
-        <file>qml/form/RoomListForm.qml</file>
-        <file>qml/Setting.qml</file>
-        <file>qml/component/EmojiPicker.qml</file>
-        <file>qml/component/EmojiButton.qml</file>
-        <file>qml/component/AutoImage.qml</file>
-        <file>asset/img/icon.ico</file>
-        <file>asset/img/icon.icns</file>
-        <file>qml/component/AutoMouseArea.qml</file>
-        <file>qml/SpectralSettings.qml</file>
-        <file>qml/menu/MessageContextMenu.qml</file>
-        <file>qml/menu/RoomContextMenu.qml</file>
-        <file>qml/component/GenericBubble.qml</file>
-        <file>qml/component/StateDelegate.qml</file>
-        <file>qml/component/AutoLabel.qml</file>
-        <file>qml/component/RoomDrawer.qml</file>
         <file>js/util.js</file>
-        <file>qml/component/ElevationEffect.qml</file>
+        <file>imports/Spectral/Component/Emoji/EmojiButton.qml</file>
+        <file>imports/Spectral/Component/Emoji/EmojiPicker.qml</file>
+        <file>imports/Spectral/Component/Emoji/qmldir</file>
+        <file>imports/Spectral/Component/Timeline/AutoImage.qml</file>
+        <file>imports/Spectral/Component/Timeline/AutoLabel.qml</file>
+        <file>imports/Spectral/Component/Timeline/DownloadableContent.qml</file>
+        <file>imports/Spectral/Component/Timeline/GenericBubble.qml</file>
+        <file>imports/Spectral/Component/Timeline/MessageDelegate.qml</file>
+        <file>imports/Spectral/Component/Timeline/qmldir</file>
+        <file>imports/Spectral/Component/Timeline/StateDelegate.qml</file>
+        <file>imports/Spectral/Component/AutoMouseArea.qml</file>
+        <file>imports/Spectral/Component/MaterialIcon.qml</file>
+        <file>imports/Spectral/Component/qmldir</file>
+        <file>imports/Spectral/Component/SideNavButton.qml</file>
+        <file>imports/Spectral/Effect/ElevationEffect.qml</file>
+        <file>imports/Spectral/Effect/qmldir</file>
+        <file>imports/Spectral/Form/qmldir</file>
+        <file>imports/Spectral/Form/RoomDrawer.qml</file>
+        <file>imports/Spectral/Form/RoomForm.qml</file>
+        <file>imports/Spectral/Form/RoomListForm.qml</file>
+        <file>imports/Spectral/Menu/MessageContextMenu.qml</file>
+        <file>imports/Spectral/Menu/qmldir</file>
+        <file>imports/Spectral/Menu/RoomContextMenu.qml</file>
+        <file>imports/Spectral/Page/Login.qml</file>
+        <file>imports/Spectral/Page/qmldir</file>
+        <file>imports/Spectral/Page/Room.qml</file>
+        <file>imports/Spectral/Page/Setting.qml</file>
+        <file>assets/font/material.ttf</file>
+        <file>assets/img/avatar.png</file>
+        <file>assets/img/background.jpg</file>
+        <file>assets/img/icon.icns</file>
+        <file>assets/img/icon.ico</file>
+        <file>assets/img/icon.png</file>
+        <file>imports/Spectral/Setting/Setting.qml</file>
+        <file>imports/Spectral/Font/MaterialFont.qml</file>
     </qresource>
 </RCC>

spectral.pro

@@ -39,26 +39,26 @@ DEFINES += QT_DEPRECATED_WARNINGS
 # You can also select to disable deprecated APIs only up to a certain version of Qt.
 #DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000    # disables all the APIs deprecated before Qt 6.0.0
 
-SOURCES += $$PWD/src/main.cpp \
-    $$PWD/src/controller.cpp \
-    $$PWD/src/roomlistmodel.cpp \
-    $$PWD/src/imageprovider.cpp \
-    $$PWD/src/messageeventmodel.cpp \
-    $$PWD/src/emojimodel.cpp \
-    $$PWD/src/spectralroom.cpp \
-    $$PWD/src/userlistmodel.cpp \
-    $$PWD/src/imageitem.cpp \
-    $$PWD/src/accountlistmodel.cpp \
-    $$PWD/src/spectraluser.cpp
+SOURCES += src/main.cpp \
+    src/controller.cpp \
+    src/roomlistmodel.cpp \
+    src/imageprovider.cpp \
+    src/messageeventmodel.cpp \
+    src/emojimodel.cpp \
+    src/spectralroom.cpp \
+    src/userlistmodel.cpp \
+    src/imageitem.cpp \
+    src/accountlistmodel.cpp \
+    src/spectraluser.cpp
 
 RESOURCES += \
     res.qrc
 
 # Additional import path used to resolve QML modules in Qt Creator's code model
-QML_IMPORT_PATH =
+QML_IMPORT_PATH += imports/
 
 # Additional import path used to resolve QML modules just for Qt Quick Designer
-QML_DESIGNER_IMPORT_PATH =
+QML_DESIGNER_IMPORT_PATH += imports/
 
 # Default rules for deployment.
 unix:!mac:isEmpty(PREFIX) {
@@ -80,11 +80,11 @@ unix:!mac {
 }
 
 win32 {
-    RC_ICONS = asset/img/icon.ico
+    RC_ICONS = assets/img/icon.ico
 }
 
 mac {
-    ICON = asset/img/icon.icns
+    ICON = assets/img/icon.icns
 }
 
 HEADERS += \

src/controller.cpp

@@ -27,7 +27,7 @@
 #include <QtNetwork/QNetworkReply>
 
 Controller::Controller(QObject* parent) : QObject(parent) {
-  tray->setIcon(QIcon(":/asset/img/icon.png"));
+  tray->setIcon(QIcon(":/assets/img/icon.png"));
   tray->setToolTip("Spectral");
   connect(tray, &QSystemTrayIcon::activated,
           [this](QSystemTrayIcon::ActivationReason r) {

src/main.cpp

@@ -8,10 +8,10 @@
 #include "emojimodel.h"
 #include "imageitem.h"
 #include "imageprovider.h"
-#include "spectralroom.h"
 #include "messageeventmodel.h"
 #include "room.h"
 #include "roomlistmodel.h"
+#include "spectralroom.h"
 #include "userlistmodel.h"
 
 #include "csapi/joining.h"
@@ -47,11 +47,18 @@ int main(int argc, char *argv[]) {
   qmlRegisterUncreatableType<RoomMessageEvent>("Spectral", 0, 1,
                                                "RoomMessageEvent", "ENUM");
   qmlRegisterUncreatableType<RoomType>("Spectral", 0, 1, "RoomType", "ENUM");
-  qmlRegisterSingletonType(QUrl("qrc:/qml/SpectralSettings.qml"),
-                           "Spectral.Settings", 0, 1, "MSettings");
+
+  qmlRegisterSingletonType(QUrl("qrc:/imports/Spectral/Setting/Setting.qml"),
+                           "Spectral.Setting", 0, 1, "MSettings");
+  qmlRegisterSingletonType(
+      QUrl("qrc:/imports/Spectral/Font/MaterialFont.qml"), "Spectral.Font",
+      0, 1, "MaterialFont");
+  qmlRegisterModule("qrc:/qml/component", 2, 0);
 
   QQmlApplicationEngine engine;
 
+  engine.addImportPath("qrc:/imports");
+
   ImageProvider *m_provider = new ImageProvider();
 
   engine.rootContext()->setContextProperty("imageProvider", m_provider);

src/messageeventmodel.cpp

@@ -87,10 +87,12 @@ void MessageEventModel::setRoom(SpectralRoom* room) {
                                   {AboveEventTypeRole, AboveAuthorRole,
                                    AboveSectionRole, AboveTimeRole});
               }
+
               for (auto i = m_currentRoom->maxTimelineIndex() - biggest;
                    i <= m_currentRoom->maxTimelineIndex() - lowest; ++i)
                 refreshLastUserEvents(i);
-            });
+            },
+            Qt::QueuedConnection);
     connect(m_currentRoom, &Room::pendingEventAboutToAdd, this,
             [this] { beginInsertRows({}, 0, 0); });
     connect(m_currentRoom, &Room::pendingEventAdded, this,