flora: schildichat-web → element-web

since schildichat-web has essentially been unmaintained for a while now,
i guess i don't really have any choice here.

I've tried to at least hack a little css into my element so it won't
bother me too much (mostly making UI elements smaller & changing some
colours). However, it turns out they do UI calculations in javascript
which just make hard assumptions over values set in the css, and so far
I've not succeeded in fixing these.

Das ist doch wirklich alles Unsinn in diesem Ökosystem …

2 files changed, 164 insertions, 0 deletions

diff --git a/pkgs/overlay.nix b/pkgs/overlay.nix
index 9d8b7b8..93de992 100644
--- a/pkgs/overlay.nix
+++ b/pkgs/overlay.nix
@@ -116,6 +116,19 @@ in
     meta.mainProgram = "ntfy-matrix-bot";
   };
 
+  element-web-unwrapped = super.element-web-unwrapped.overrideAttrs {
+    patches = [ ./patches/element-css.patch ];
+    preBuild = ''
+      substituteInPlace node_modules/matrix-react-sdk/lib/components/views/rooms/RoomSublist.js \
+        --replace "HEADER_HEIGHT = 32" "HEADER_HEIGHT = 10" \
+        --replace "SHOW_N_BUTTON_HEIGHT = 28" "SHOW_N_BUTTON_HEIGHT = 16"
+      substituteInPlace node_modules/matrix-react-sdk/lib/src/components/views/rooms/RoomSublist.d.ts \
+        --replace "HEADER_HEIGHT = 32" "HEADER_HEIGHT = 10"
+      substituteInPlace node_modules/matrix-react-sdk/lib/stores/room-list/ListLayout.js \
+        --replace "TILE_HEIGHT_PX = 44" "TILE_HEIGHT = 22"
+    '';
+  };
+
   bahnhof-name =
     let
       haskellPkgs = self.haskellPackages.override (old: {
diff --git a/pkgs/patches/element-css.patch b/pkgs/patches/element-css.patch
new file mode 100644
index 0000000..dae7298
--- /dev/null
+++ b/pkgs/patches/element-css.patch
@@ -0,0 +1,151 @@
+diff --git a/res/css/dings.custom.css b/res/css/dings.custom.css
+new file mode 100644
+index 000000000..48ae3414f
+--- /dev/null
++++ b/res/css/dings.custom.css
+@@ -0,0 +1,104 @@
++
++.mx_RoomTile .mx_RoomTile_titleContainer .mx_RoomTile_title {
++    font-size: 11pt !important;
++}
++.mx_RoomTile .mx_RoomTile_titleContainer {
++    height: 20px;
++}
++.mx_EventTile_avatar {
++    padding-top: 3.5px;
++}
++
++[class^="_avatar"].mx_BaseAvatar:not(.mx_UserMenu_userAvatar *, .mx_RoomSummaryCard_avatar *, .mx_GenericEventListSummary_avatars *) {
++  --cpd-avatar-size:  20px !important;
++}
++.mx_TabbedView_tabLabel{
++    padding: 4px 10px;
++}
++.mx_AccessibleButton.mx_AccessibleButton_hasKind {
++    padding: 4px 10px;
++}
++
++.mx_Username_color1 {
++    color: darkred;
++}
++.mx_Username_color2 {
++    color: darkcyan;
++}
++.mx_Username_color3 {
++    color: darkorange;
++}
++.mx_Username_color4 {
++    color: purple;
++}
++.mx_Username_color5 {
++    color: darkblue;
++}
++.mx_Username_color6 {
++    color: darkslateblue;
++}
++.mx_Username_color7 {
++    color: darkmagenta;
++}
++.mx_Username_color8 {
++    color: darkgreen;
++}
++
++/* css modules get name mangled, so use a catchall for those */
++[class^="_avatar"] {
++  color: white !important;
++  &[data-color="1"] {
++    background-color: darkred;
++  }
++  &[data-color="2"] {
++    background-color: darkcyan;
++  }
++  &[data-color="3"] {
++    background-color: darkorange;
++  }
++  &[data-color="4"] {
++    background-color: purple;
++  }
++  &[data-color="5"] {
++    background-color: darkblue;
++    color: black !important;
++  }
++  &[data-color="6"] {
++    background-color: darkslateblue;
++  }
++  &[data-color="7"] {
++    background-color: darkmagenta;
++  }
++  &[data-color="8"] {
++    background-color: darkgreen;
++  }
++  & > [class^="_image"] {
++      width: 20px;
++      height: 20px;
++  }
++}
++
++
++.mx_RoomListHeader .mx_RoomListHeader_plusButton {
++    border-radius: 2px;
++}
++.mx_RoomTile.mx_RoomTile_selected, .mx_RoomTile:hover, .mx_RoomTile:focus-within, .mx_RoomTile.mx_RoomTile_hasMenuOpen {
++    border-radius: 2px;
++}
++.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_exploreButton, .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_recentsButton {
++    border-radius: 2px;
++}
++.mx_RoomSearch, .mx_MessageActionBar, .mx_ContextualMenu {
++    border-radius: 2px;
++}
++.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList:last-child .mx_IconizedContextMenu_item:last-child {
++    border-radius: 0 0 2px 2px;
++}
++
++
++body {
++    --cpd-color-text-action-accent: darkmagenta !important;
++    --cpd-color-text-critical-primary: #cc0055 !important;
++    --MBody-border-radius: 2px !important;
++}
++
+diff --git a/src/vector/index.html b/src/vector/index.html
+index f5213701c..50e0729d9 100644
+--- a/src/vector/index.html
++++ b/src/vector/index.html
+@@ -48,6 +48,7 @@
+            <link rel="stylesheet" href="<%= file %>">
+         <% }
+     } %>
++    <link rel="stylesheet" href="<%= require('../../res/css/dings.custom.css') %>">
+ 
+     <% for (const tag of htmlWebpackPlugin.tags.headTags) {
+         let path = tag.attributes && tag.attributes.href;
+diff --git a/webpack.config.js b/webpack.config.js
+index d7dc5ffa0..00f751ed8 100644
+--- a/webpack.config.js
++++ b/webpack.config.js
+@@ -365,6 +365,24 @@ module.exports = (env, argv) => {
+                             },
+                         },
+                     ],
++                    exclude: /\.custom\.css$/,
++                },
++                {
++                    test: /\.custom\.css$/,
++                    use: [
++                        {
++                            loader: "file-loader",
++                            options: {
++                                esModule: false,
++                                name: "dings.custom.[hash:7].[ext]",
++                                outputPath: getAssetOutputPath,
++                                publicPath: function (url, resourcePath) {
++                                    const outputPath = getAssetOutputPath(url, resourcePath);
++                                    return toPublicPath(outputPath);
++                                },
++                            },
++                        },
++                    ],
+                 },
+                 {
+                     test: /\.pcss$/,