A few custom theme hacks for improving Inbox Favourites (max-height, scrollable, reduce avatar size, etc) and other things that frustrate me with Beeper's UI/UX

[0xdevalias]

A few of my custom theme hacks for improving Inbox Favourites (max-height, scrollable, reduce avatar size, etc):

• https://gist.github.com/0xdevalias/3d2f5a861335cc1277b21a29d1285cfe#devalias-beeper-css-hacks

Announcement tweet: https://twitter.com/_devalias/status/1651766148046921728

Reddit thread: https://www.reddit.com/r/beeper/comments/13cezdc/beeper_ui_ux_hacksimprovements_via_custom_themes/

Snapshot of gist contents at time of posting this issue follows...

Improving UI/UX for users with lots of favourites

(Reported to Beeper Support as DES-10976 (and probably at least one other time before that))

Reduces the size of the user avatars in the favourites section of the unified inbox, sets a max-height to the favourites area, and makes the overflow vertically scrollable.

/* Inbox - Favourites */

.rooms > .favourites {
  /* Custom Variables */
  --devalias-fav-section-max-height: 30vh;
  --devalias-fav-width: 40px;
  --devalias-fav-height: 40px;
  --devalias-fav-avatar-width: 30px;
  --devalias-fav-avatar-height: 30px;
  --devalias-fav-avatar-font-size: 17px;
}

/* .bp_LeftPanel .rooms .favourites__icons {
  TODO: This is where display: grid is set.. can we somehow make it more compact so it automagically fits the tiles on the row as space allows?
}*/

.rooms > .favourites > .favourites__icons > .favourites__tiles {
  max-height: var(--devalias-fav-section-max-height, none) !important;
  overflow: auto;
}

.rooms > .favourites > .favourites__icons > .favourites__tiles > .favourites__row > span {  
  --fav-width: var(--devalias-fav-width, 40px) !important;
}

.bp_LeftPanel .rooms .favourites_avatar {
  height: var(--devalias-fav-height, 60px) !important;
}

.bp_LeftPanel .rooms .favourites .bp_RoomTile.small {
  height: var(--devalias-fav-height, 48px) !important;
}

.bp_LeftPanel .rooms .favourites .bp_RoomTile.small .mx_BaseAvatar_image {
  width: var(--devalias-fav-avatar-width, 44px) !important;
  height: var(--devalias-fav-avatar-height, 44px) !important;
}

.bp_LeftPanel .rooms .favourites .bp_RoomTile.small .mx_BaseAvatar_initial {
  font-size: var(--devalias-fav-avatar-font-size, 19.8px) !important;
  width: var(--devalias-fav-avatar-width, 44px) !important;
  line-height: var(--devalias-fav-avatar-width, 44px) !important;
}

.bp_LeftPanel .rooms .favourites .bp_RoomTile.small .outline .outline-details {
  width: var(--devalias-fav-width, var(--fav-width, 45px)) !important;
}

Before: Inbox is flooded by favourites	After: ✨👌

Improving UI/UX with the Custom CSS TextArea

(Reported to Beeper Support as DES-10977)

/* Custom CSS TextArea */

.mx_AppearanceUserSettingsTab .mx_Field.mx_Field_textarea {
  width: 100% !important;
  height: 500px !important;
}

Before: Textarea is tiny and squashed and barely usable	After: The textarea expands to take up a decent/usable amount of the available space

[0xdevalias]

Add an 'external link' icon next to the 'Chat Networks' 'tab' in the main 'Settings' dialog

Updated to also add an 'external link' icon next to the 'Chat Networks' 'tab' in the main 'Settings' dialog:

/* 'Chat Networks' 'tab' in the 'Settings' dialog*/

.mx_SettingsDialog_content > .mx_TabbedView > .mx_TabbedView_tabLabels > .mx_TabbedView_tabLabel:has(> span.mx_UserSettingsDialog_chatSettingsIcon) > .mx_TabbedView_tabLabel_text::after {
  content: "🔗";
  margin-left: 16px;
}

Before:

After:

This is a hacky workaround for Beeper bug report DES-10656, implementing option 3:

I know i've reported this in the past, but when the settings dialog is open, there is a list of 'settings tabs' down the left hand side. It feels like super weird and annoying UX that the 'Chat Networks' link here isn't actually a 'tab within the settings dialog', but opens the completely separate 'chat networks' dialog, which has no 'back' button to take you back to the settings.

Desired UX, in order of preference (but likely also effort to implement):

1. 'chat networks' is shown as just another 'tab' within the main settings dialog, not as a unique dialog
2. the 'chat networks' dialog shows a 'back to settings' button (it would be fine if this was only shown when 'chat networks' was opened from the link in the settings dialog; but it could also just always be present)
3. the simplest UI hack that would still massively improve the UX here would be to add an icon that represents 'opens in a new window (dialog)' next to the 'chat networks' 'tab' label in the settings dialog, so that at least the UI is communicating the fact that it will respond differently to the other 'tabs' here

[0xdevalias]

Reduce the 'in your face' bright/colourful/'glare' from the network icons on the new 'View Space Bar in side panel' lab

(Edit: There is a variation on this tweak/workaround documented below (Ref), that allows replacing these new icons with the old lineart icons)

Added a new tweak to reduce the 'in your face' bright/colourful/'glare' from the network icons on the new 'View Space Bar in side panel' lab:

/* Beeper Space Sidebar */

#beeperSpaceBar > .mx_AccessibleButton {
  opacity: 0.8;
  filter: grayscale(75%);
}

Before: The new icons are overly bright/glary/distracting/feel like i'm staring into the sun	After: The icons are still visible/usable, but don't 'take over' the entire UI with their vividness

[0xdevalias]

Add the 🔗 emoji after the 'Chat Networks' item in the main settings menu + remove extra noise from settings menu

A variation on #6 (comment) that was requested by a user in the 'Beeper Community' chat, which adds the 🔗 emoji after the 'Chat Networks' item in the main settings menu as well:

/* 'Chat Networks' button on the main Settings menu */
 
#mx_ContextualMenu_Container .mx_AccessibleButton[aria-label="Chat Networks"]::after {
  content: "🔗";
}

Before:	After:

---

Though for my personal needs.. why don't we just remove all of those extra/annoying/cluttering buttons entirely!

/* Main Settings Menu */

#mx_ContextualMenu_Container .mx_AccessibleButton[aria-label="Chat Networks"] {
  display: none;
}

#mx_ContextualMenu_Container .mx_AccessibleButton[aria-label="Mark All As Read"] {
  display: none;
}

#mx_ContextualMenu_Container .mx_AccessibleButton[aria-label="Check for Update"] {
  display: none;
}

#mx_ContextualMenu_Container .mx_AccessibleButton[aria-label="Download Mobile App"] {
  display: none;
}

Before:	After:

[0xdevalias]

From 'Beeper Community' channel, exploring the possibility of hacking the new 'beeper space bar' to make use of the old chat network icons as a variation to #6 (comment):

These are all the classes used for the 'old' network icons I have:

bp_SpaceBarItem_image inbox
bp_SpaceBarItem_image bookmarks
bp_SpaceBarItem_image bp_SpaceBarItem_image--protocol facebook
bp_SpaceBarItem_image bp_SpaceBarItem_image--protocol instagram
bp_SpaceBarItem_image bp_SpaceBarItem_image--protocol imessage
bp_SpaceBarItem_image bp_SpaceBarItem_image--protocol twitter
bp_SpaceBarItem_image bp_SpaceBarItem_image--protocol telegram
bp_SpaceBarItem_image bp_SpaceBarItem_image--protocol signal
bp_SpaceBarItem_image bp_SpaceBarItem_image--protocol linkedin
bp_SpaceBarItem_image bp_SpaceBarItem_image--protocol discord
bp_SpaceBarItem_image bp_SpaceBarItem_image--protocol beeper
bp_SpaceBarItem_image bp_SpaceBarItem_image--protocol whatsapp
bp_SpaceBarItem_image low
 
bp_SpaceBarItem_badge unread

They're all defined in theme-dark.css, though use pretty specific CSS selectors to make them not very reusable as is, eg.

.mx_MatrixChat_wrapper .bp_LeftPanel .spaceBar .bp_SpaceBarItem_image.facebook {
  background-image: url(../../img/social/lineart-color/dark/messenger.1544eb2.svg);
}

That said, could just use the url(...) directly in our own hack css instead of trying to reuse existing classes.

But the code in the new beeper space bar on the left hand side is kind of horrible for customising. Looks like it's using CSS-in-JS patterns or similar, which just results in ugly hacky code to try and override:

[0xdevalias]

Remove the 'Archive' button from the new 'beeper spaces sidebar'

Further 'beeper space sidebar' customisations/hacks, based on a request in 'Beeper Community' channel:

Is there a way to hide the archive bar from the sidebar?

You could maybe target it with a css selector that targets the data-src of the svg of the icon.. but pretty much everything else that I would normally use is hacky generated/unstable random names

This seems to allow targeting it in devtools console:

$('#beeperSpaceBar > .mx_AccessibleButton:has(.bp_icon svg[data-src="img/beeper/square-archive16.b1ef8a0.svg"])')

This will hide it using devtools console:

$('#beeperSpaceBar > .mx_AccessibleButton:has(.bp_icon svg[data-src="img/beeper/square-archive16.b1ef8a0.svg"])').style.display = 'none'

So this would be a CSS theme snippet to hide it:

#beeperSpaceBar > .mx_AccessibleButton:has(.bp_icon svg[data-src="img/beeper/square-archive16.b1ef8a0.svg"]) {
  display: none;
}

[0xdevalias]

Hide the floating 'Archived' and 'Sweep' buttons in the new 'beeper space sidebar'

(Reported to Beeper Support as DES-10914)

With the new 'beeper space sidebar', when it's collapsed, we can hide the floating 'Archived' and 'Sweep' buttons (and some empty divs that block selecting chats around that area) as follows:

/* Beeper Space Sidebar - Collapsed - Hide Empty Div Blockers */

.mx_MatrixChat > div:first-child > div:empty {
  display: none;
}

/* Beeper Space Sidebar - Collapsed - Hide Floating Archived Button */

.mx_MatrixChat > div > div:has(.mx_AccessibleButton > .bp_icon > div > svg[data-src="img/beeper/new-archive16.2003809.svg"]) {
  display: none;
}

/* Beeper Space Sidebar - Collapsed - Hide Floating Sweep Button */

.mx_MatrixChat > div > div:has(.mx_AccessibleButton > .bp_icon > div > svg[data-src="img/beeper/sweep16.36d9c67.svg"]) {
  display: none;
}

---

Edit: Contribution from @ashirbhallalevine:beeper.com in Beeper Community chat:

New clause to add for the new "Archive All Read Messages" button that appears when the spacebar is open:

/* Open - Hide New Floating Archive/Sweep Button */
.mx_MatrixChat > div > div:has(.mx_AccessibleButton > .bp_icon > div > svg[data-src="img/beeper/new-sweep16.978771b.svg"]) {
  display: none;
}

My full section of CSS customizations for that now reads as follows:

/* Spacebar Menu Action Buttons */
 
/* Collapsed - Hide Empty Div Blockers */
.mx_MatrixChat > div:first-child > div:empty {
  display: none;
}
 
/* Collapsed - Hide Floating Archived Button */
.mx_MatrixChat > div > div:has(.mx_AccessibleButton > .bp_icon > div > svg[data-src="img/beeper/new-archive16.2003809.svg"]) {
  display: none;
}
 
/* Collapsed - Hide Floating Sweep Button */
.mx_MatrixChat > div > div:has(.mx_AccessibleButton > .bp_icon > div > svg[data-src="img/beeper/sweep16.36d9c67.svg"]) {
  display: none;
}
 
/* Open - Hide New Floating Archive/Sweep Button */
.mx_MatrixChat > div > div:has(.mx_AccessibleButton > .bp_icon > div > svg[data-src="img/beeper/new-sweep16.978771b.svg"]) {
  display: none;
}

[0xdevalias]

Change the network icons in the new 'beeper space sidebar' to use the old lineart icons

Beeper Support Report

Reported to Beeper Support as DES-10915

CSS Hacks

• Updates
  • 20230615: Added additional lineart icons that can be used
  • 20230616: Added additional replacement rules for Android SMS and Google Chat (contributed by @tobiah:beeper.com)

Following on from my initial research above (Ref), here is how we can change the network icons in the new 'beeper space sidebar' to use the old lineart icons instead.

The following is a basic example, using the 'archive' as an example; but similar rules could be written to target all of the networks:

/* Beeper Space Sidebar - Archive - Hide Original Icon */

#beeperSpaceBar svg[data-src="img/beeper/square-archive16.b1ef8a0.svg"] {
  display: none
}

/* Beeper Space Sidebar - Archive - Use Lineart Icon */

#beeperSpaceBar > .mx_AccessibleButton:has(.bp_icon svg[data-src="img/beeper/square-archive16.b1ef8a0.svg"]) > div > div > div {
    width: 100%;
    height: 100%;
    background-image: url("nova://nova-web/webapp/img/social/lineart/archive.4363fd0.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

This is a (probably non-exhaustive) list of the new icons that can be targeted (as above example) to be replaced:

## Constructed from paths in `nova://nova-web/webapp/bundles/bf956948361b1661854d/init.js`

svg[data-src="img/beeper/add-network16.1eb5cb1.svg"]
svg[data-src="img/beeper/square-androidsms16.4c0b49c.svg"]
svg[data-src="img/beeper/square-archive16.b1ef8a0.svg"]
svg[data-src="img/beeper/square-beeper16.749ed9b.svg"]
svg[data-src="img/beeper/square-bookmarks16.6853926.svg"]
svg[data-src="img/beeper/square-discord16.e91cca3.svg"]
svg[data-src="img/beeper/square-facebook16.9d9e23d.svg"]
svg[data-src="img/beeper/square-googlechat16.61657b2.svg"]
svg[data-src="img/beeper/square-imessage16.11b6604.svg"]
svg[data-src="img/beeper/square-inbox16.ea471fd.svg"]
svg[data-src="img/beeper/square-instagram16.1e8ed4e.svg"]
svg[data-src="img/beeper/square-linkedin16.f764edc.svg"]
svg[data-src="img/beeper/square-lowpriority16.6779879.svg"]
svg[data-src="img/beeper/square-signal16.85ba0c4.svg"]
svg[data-src="img/beeper/square-slack16.a4e40dd.svg"]
svg[data-src="img/beeper/square-telegram16.d011ded.svg"]
svg[data-src="img/beeper/square-twitter16.ddd9bad.svg"]
svg[data-src="img/beeper/square-whatsapp16.411f722.svg"]

This is a (probably non-exhaustive) list of the lineart icons that can be used (as above example) as replacements:

nova://nova-web/webapp/img/social/lineart/add-space.b91886d.svg
nova://nova-web/webapp/img/social/lineart/archive.4363fd0.svg
nova://nova-web/webapp/img/social/lineart/bookmarks.3f3eb77.svg
nova://nova-web/webapp/img/social/lineart/expand.a1e4885.svg
nova://nova-web/webapp/img/social/lineart/smart-inbox.04b2d4e.svg

## From `nova://nova-web/webapp/bundles/bf956948361b1661854d/theme-dark.css`

nova://nova-web/webapp/img/social/lineart-color/dark/beeper.c685f80.svg
nova://nova-web/webapp/img/social/lineart-color/dark/discord.6daf490.svg
nova://nova-web/webapp/img/social/lineart-color/dark/messenger.1544eb2.svg
nova://nova-web/webapp/img/social/lineart-color/dark/gchat.bc14811.svg
nova://nova-web/webapp/img/social/lineart-color/dark/telegram.77fa320.svg
nova://nova-web/webapp/img/social/lineart-color/dark/whatsapp.2210499.svg
nova://nova-web/webapp/img/social/lineart-color/dark/instagram.e9184e9.svg
nova://nova-web/webapp/img/social/lineart-color/dark/twitter.972096c.svg
nova://nova-web/webapp/img/social/lineart-color/dark/slack.4310255.svg
nova://nova-web/webapp/img/social/lineart-color/dark/matrix.512ad87.svg
nova://nova-web/webapp/img/social/lineart-color/skype.ca8a916.svg
nova://nova-web/webapp/img/social/lineart-color/sms.ca23784.svg
nova://nova-web/webapp/img/social/lineart-color/dark/android.ccaf23f.svg
nova://nova-web/webapp/img/social/lineart-color/dark/imessage.aedae37.svg
nova://nova-web/webapp/img/social/lineart-color/dark/signal.315d199.svg
nova://nova-web/webapp/img/social/lineart-color/dark/linkedin.2297fef.svg

## From `nova://nova-web/webapp/bundles/bf956948361b1661854d/theme-light.css`

nova://nova-web/webapp/img/social/lineart-color/messenger.ce312b0.svg
nova://nova-web/webapp/img/social/lineart-color/gchat.b78f568.svg
nova://nova-web/webapp/img/social/lineart-color/telegram.267254c.svg
nova://nova-web/webapp/img/social/lineart-color/whatsapp.7f52fb4.svg
nova://nova-web/webapp/img/social/lineart-color/instagram.5118a74.svg
nova://nova-web/webapp/img/social/lineart-color/twitter.8aee2e2.svg
nova://nova-web/webapp/img/social/lineart-color/slack.148f3ab.svg
nova://nova-web/webapp/img/social/lineart-color/beeper.2c42cd0.svg
nova://nova-web/webapp/img/social/lineart-color/matrix.c7fa7e8.svg
nova://nova-web/webapp/img/social/lineart-color/discord.0d68c9a.svg
nova://nova-web/webapp/img/social/lineart-color/skype.ca8a916.svg
nova://nova-web/webapp/img/social/lineart-color/sms.ca23784.svg
nova://nova-web/webapp/img/social/lineart-color/android.51f1193.svg
nova://nova-web/webapp/img/social/lineart-color/imessage.3e28f6f.svg
nova://nova-web/webapp/img/social/lineart-color/signal.e61c8a1.svg
nova://nova-web/webapp/img/social/lineart-color/linkedin.7ac06b0.svg

So you could replace all icons on the space sidebar with something like this:

/* Beeper Space Sidebar - Hide Original Icons */

#beeperSpaceBar svg {
  display: none
}

/* Beeper Space Sidebar - Use Lineart Icons */

#beeperSpaceBar > .mx_AccessibleButton:has(.bp_icon svg) > div > div > div {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* Beeper Space Sidebar - Use Lineart Icons - Inbox */

#beeperSpaceBar > .mx_AccessibleButton:has(.bp_icon svg[data-src="img/beeper/square-inbox16.ea471fd.svg"]) > div > div > div {
    background-image: url("nova://nova-web/webapp/img/social/lineart/smart-inbox.04b2d4e.svg");
}

/* Beeper Space Sidebar - Use Lineart Icons - Low Priority */

#beeperSpaceBar > .mx_AccessibleButton:has(.bp_icon svg[data-src="img/beeper/square-lowpriority16.6779879.svg"]) > div > div > div {
    background-image: url("nova://nova-web/webapp/img/social/lineart/archive.4363fd0.svg");
}

/* Beeper Space Sidebar - Use Lineart Icons - Archive */

#beeperSpaceBar > .mx_AccessibleButton:has(.bp_icon svg[data-src="img/beeper/square-archive16.b1ef8a0.svg"]) > div > div > div {
    background-image: url("nova://nova-web/webapp/img/social/lineart/archive.4363fd0.svg");
}

/* Beeper Space Sidebar - Use Lineart Icons - Bookmarks */

#beeperSpaceBar > .mx_AccessibleButton:has(.bp_icon svg[data-src="img/beeper/square-bookmarks16.6853926.svg"]) > div > div > div {
    background-image: url("nova://nova-web/webapp/img/social/lineart/bookmarks.3f3eb77.svg");
}

/* Beeper Space Sidebar - Use Lineart Icons - Facebook */

#beeperSpaceBar > .mx_AccessibleButton:has(.bp_icon svg[data-src="img/beeper/square-facebook16.9d9e23d.svg"]) > div > div > div {
    background-image: url("nova://nova-web/webapp/img/social/lineart-color/dark/messenger.1544eb2.svg");
}

/* Beeper Space Sidebar - Use Lineart Icons - Instagram */

#beeperSpaceBar > .mx_AccessibleButton:has(.bp_icon svg[data-src="img/beeper/square-instagram16.1e8ed4e.svg"]) > div > div > div {
    background-image: url("nova://nova-web/webapp/img/social/lineart-color/dark/instagram.e9184e9.svg");
}

/* Beeper Space Sidebar - Use Lineart Icons - iMessage */

#beeperSpaceBar > .mx_AccessibleButton:has(.bp_icon svg[data-src="img/beeper/square-imessage16.11b6604.svg"]) > div > div > div {
    background-image: url("nova://nova-web/webapp/img/social/lineart-color/dark/imessage.aedae37.svg");
}

/* Beeper Space Sidebar - Use Lineart Icons - Twitter */

#beeperSpaceBar > .mx_AccessibleButton:has(.bp_icon svg[data-src="img/beeper/square-twitter16.ddd9bad.svg"]) > div > div > div {
    background-image: url("nova://nova-web/webapp/img/social/lineart-color/dark/twitter.972096c.svg");
}

/* Beeper Space Sidebar - Use Lineart Icons - Telegram */

#beeperSpaceBar > .mx_AccessibleButton:has(.bp_icon svg[data-src="img/beeper/square-telegram16.d011ded.svg"]) > div > div > div {
    background-image: url("nova://nova-web/webapp/img/social/lineart-color/dark/telegram.77fa320.svg");
}

/* Beeper Space Sidebar - Use Lineart Icons - Signal */

#beeperSpaceBar > .mx_AccessibleButton:has(.bp_icon svg[data-src="img/beeper/square-signal16.85ba0c4.svg"]) > div > div > div {
    background-image: url("nova://nova-web/webapp/img/social/lineart-color/dark/signal.315d199.svg");
}

/* Beeper Space Sidebar - Use Lineart Icons - LinkedIn */

#beeperSpaceBar > .mx_AccessibleButton:has(.bp_icon svg[data-src="img/beeper/square-linkedin16.f764edc.svg"]) > div > div > div {
    background-image: url("nova://nova-web/webapp/img/social/lineart-color/dark/linkedin.2297fef.svg");
}

/* Beeper Space Sidebar - Use Lineart Icons - Discord */

#beeperSpaceBar > .mx_AccessibleButton:has(.bp_icon svg[data-src="img/beeper/square-discord16.e91cca3.svg"]) > div > div > div {
    background-image: url("nova://nova-web/webapp/img/social/lineart-color/dark/discord.6daf490.svg");
}

/* Beeper Space Sidebar - Use Lineart Icons - Beeper */

#beeperSpaceBar > .mx_AccessibleButton:has(.bp_icon svg[data-src="img/beeper/square-beeper16.749ed9b.svg"]) > div > div > div {
    background-image: url("nova://nova-web/webapp/img/social/lineart-color/dark/beeper.c685f80.svg");
}

/* Beeper Space Sidebar - Use Lineart Icons - WhatsApp */

#beeperSpaceBar > .mx_AccessibleButton:has(.bp_icon svg[data-src="img/beeper/square-whatsapp16.411f722.svg"]) > div > div > div {
    background-image: url("nova://nova-web/webapp/img/social/lineart-color/dark/whatsapp.2210499.svg");
}

/* Beeper Space Sidebar - Use Lineart Icons - Add Network */

#beeperSpaceBar > .mx_AccessibleButton:has(.bp_icon svg[data-src="img/beeper/add-network16.1eb5cb1.svg"]) > div > div > div {
    background-image: url("nova://nova-web/webapp/img/social/lineart/add-space.b91886d.svg");
}

/* Beeper Space Sidebar - Use Lineart Icons - Android SMS (contributed by @tobiah:beeper.com) */

#beeperSpaceBar > .mx_AccessibleButton:has(.bp_icon svg[data-src="img/beeper/square-androidsms16.4c0b49c.svg"]) > div > div > div {
    background-image: url("nova://nova-web/webapp/img/social/lineart-color/sms.ca23784.svg");
}

/* Beeper Space Sidebar - Use Lineart Icons - Google Chat (contributed by @tobiah:beeper.com) */

#beeperSpaceBar > .mx_AccessibleButton:has(.bp_icon svg[data-src="img/beeper/square-googlechat16.61657b2.svg"]) > div > div > div {
    background-image: url("nova://nova-web/webapp/img/social/lineart-color/dark/gchat.bc14811.svg");
}

Before:	After:

IMO it's probably nicer to keep the 'original' new icons for the following though:

• Inbox
• Low Priority
• Archive
• Bookmarks
• Add Network

So we could modify our main 'hide original icons' CSS theme hack as follows, and then remove the extra rules from the above code that were setting the lineart svg's for these buttons:

/* Beeper Space Sidebar - Hide Original Icons */

#beeperSpaceBar svg:not(svg[data-src="img/beeper/square-inbox16.ea471fd.svg"]):not(svg[data-src="img/beeper/square-lowpriority16.6779879.svg"]):not(svg[data-src="img/beeper/square-archive16.b1ef8a0.svg"]):not(svg[data-src="img/beeper/square-bookmarks16.6853926.svg"]):not(svg[data-src="img/beeper/add-network16.1eb5cb1.svg"]) {
  display: none
}

Which will then end up looking something more like this ('second variation'), which IMO looks much nicer all around:

Original:	First Variation:	Second Variation:

[0xdevalias]

With the 'new' 'Beeper Space Sidebar', hide the floating 'open archive' button, and always show the floating 'Archive All Read Messages' button

Beeper Support Report

Reported to Beeper Support as DES-11233:

Sat with it a while, and I can definitely say that I still hate the floating 'archive' button in the inbox, so CSS hacks to hide it re-enabled.

Though it's kind of annoying that because the 'archive read messages' button 'expands' out from the archive button on hover, I now basically have no way to use that. I thought the fact that it would only show up when there were read messages in the inbox that could be archived would make me not hate it, as it would only be present when relevant, but in it's current state, I guess i'll never know.

My ideal scenario would be to have the 'archive read messages' button show up in the inbox only when there are messages that can be archived (eg. they are read, they aren't pinned, etc). Ideally this would also show a count, and/or a confirmation dialog that would show me which messages were going to be archived (and allow me to select which ones to archive/not). Instead of the dialog, this need could also probably be addressed by adding another 'inbox filter' that would show me 'archiveable' messages (similar to how the current 'unread' filter works); that way I can use the filter to see what would be archived before I click the button, or can use that filtered view to manually archive only the ones I want, while keeping the ones that I don't want to archive yet, but also don't want to have officially pinned.

I would also love for an inbox setting to disable the floating 'archive' button entirely, since it's redundant and annoying since we already have an 'archive' section on the new sidebar. I can hackily hide it with CSS, but that's not a great UX.

Since I am interested in the 'archive all read messages' button, but hate the redundant 'show archive' button; the way they are connected in the latest update (where 'archive all read' is only shown after hovering over the 'show archive' button) means that I basically have to have both of them, or none of them. That's super sub-optimal for my desired workflow, so it would be really great if something could be done to fix that.

CSS Hacks

Updates:

• 20230525 - Fixed selector to target updated svg image name (Ref)

/* Beeper Space Sidebar - Collapsed - Hide Floating 'Open Archive' Button */

.mx_MatrixChat > div > div > .mx_AccessibleButton:has(> .bp_icon > div > svg[data-src="img/beeper/archive16.2003809.svg"]) {
  display: none;
}

/* Beeper Space Sidebar - Show Floating 'Archive All Read Messages' Button */

.mx_MatrixChat > div > div:has(.mx_AccessibleButton > .bp_icon > div > svg[data-src="img/beeper/new-sweep16.978771b.svg"]) {
  width: max-content !important;
}

.mx_MatrixChat > div > div > div:has(.mx_AccessibleButton > .bp_icon > div > svg[data-src="img/beeper/new-sweep16.978771b.svg"]) {
  display: block !important;
}

.mx_MatrixChat > div > div > div > .mx_AccessibleButton:has(> .bp_icon > div > svg[data-src="img/beeper/new-sweep16.978771b.svg"]) {
  opacity: unset;
}

Caveats

The release notes that introduced this change stated that the 'Archive All Read Messages' button would only be visible when there were actually message that it could archive. I didn't test if that was true, but if it was, the CSS hacks here in their current form may break that aspect, and just make it always visible.

Screenshots

Before

Inbox with Sidebar Collapsed, Not Hovering

Inbox with Sidebar Collapsed, Hovering 'Open Archive'

Inbox with Sidebar Collapsed, Hovering 'Archive All Read Messages'

Inbox with Sidebar Opened, Not Hovering

Inbox with Sidebar Opened, Hovering

After

Inbox with Sidebar Collapsed, Not Hovering

Inbox with Sidebar Collapsed, Hovering 'Open Archive'

N/A, it's hidden now

Inbox with Sidebar Collapsed, Hovering 'Archive All Read Messages'

Inbox with Sidebar Opened, Not Hovering

Inbox with Sidebar Opened, Hovering

[0xdevalias]

Bonus Hacks - Accessing the React internals for the Beeper 'Rooms' component using Beeper / Electron's DevTools

const el = $('#matrixchat > .mx_MatrixChat_wrapper > .mx_MatrixChat > .bp_LeftPanel > .bp_LeftPanel_contentWrapper > .bp_LeftPanel_content > .rooms')
 
const elProps = Object.getOwnPropertyNames(el);
 
const elReactFiberKey = elProps.filter(k => k.includes('__reactFiber'))
const elReactPropsKey = elProps.filter(k => k.includes('__reactProps'))

const elReactInternals = {
  reactFiber: el[elReactFiberKey],
  reactProps: el[elReactPropsKey],
}
 
//console.log(elReactInternals)

const UnreadList = elReactInternals.reactProps.children[3].props.children[0]
const ReadList = elReactInternals.reactProps.children[3].props.children[1]

console.log('Inbox Chats', UnreadList.props.unreads)
// (303) [Room, Room, ...]

console.log('Archived Chats', ReadList.props.rooms)
// (1633) [Room, Room, ...]

[0xdevalias]

Reduce the size of the 'new' 'Beeper Space Sidebar' + it's 'chat network' buttons

Background Context

Based on a user request in 'Beeper Community' chat, here are some quick (unrefined, could definitely be improved upon, particularly the CSS selectors used for targeting the elements) hacks for reducing/changing the size of the new 'Beeper Sidebar', and the network icons within it.

Would reducing the size of the sidebar/icons within it satisfy your need of not consuming the extra space? Or would that still be 'too much'?

😄 That would be better 👍

The image icon is 26 x 26px, the parent of that is 32 x 32px, the .spaceBar div seems to set the gap between the grid icons (so could probably make them 'tighter' with less space between), then the .bp_col div seems to set width to 55px

Those classes aren't the specific ones setting the widths/etc (as most of that seems to be happening in the CSS-in-JS generated classnames); but they should be roughly relevant enough to write some CSS selectors to target the relevant bits + reduce the overall size of the related elements

Beeper Support Report

N/A

Caveats

These are very quick/hacky rules (I would probably figure better CSS selectors for them since currently they are based on the CSS-in-JS selectors that are almost certainly going to change with future Beeper release versions.. but it might work well enough), and without spending much time tweaking the actual sizes to be 'just right' (as not really sure what would work best for you), here are some CSS hacks to mess around with the sidebar network icon sizes (you may need to use !important on some of the rules if they don't work directly when added to the 'custom CSS' section; I'm hacking these in devtools atm)

CSS Hacks

/* Sidebar */
._3dTltcKuNeSKUTCEM-UGN0._2BAyduJRAqtYY0FLUV2lT0 {
    width: 30px;
}
 
/* Sidebar - Buttons - 'Toggle Sidebar' - SVG Icon */
.YNfZXerLXxU4qXwy0a5gv svg {
    width: 15px;
    height: 15px;
}
 
/* Sidebar - Buttons*/
.ED6hnM59dIDcpfzGwRgcw {
  width: 15px;
  height: 15px;
}
 
/* Sidebar - Buttons - SVG Icons */
.ZQDbHi0qd3Vf1JPuEisR7 svg {
    width: 15px;
    height: 15px;
}
 
/* Sidebar - Buttons - Notfication Count Bubble */
.Yb_gdONE4knKPc_e7bgN3 {
    font-size: 8px;
    height: 10px;
    min-width: 10px;
    top: -6px;
    right: -10px;
}

Screenshots

It's a little hard to see the side by side in these images.. but notice how the 'Before' sidebar extends for '6 favourites + 6.5 chats' of height, whereas the 'After' only extends of '6 favourites + 3 chats' of height.

Before	After

[0xdevalias]

Hide Left Panel/Sidebar While Chat Is Open

Background Context

Based on a user request in 'Beeper Community' chat:

would it be possible, using custom CSS, to make the desktop app hide the left chat list when you open a chat (and comes back out when I hit ESC to close that chat)?

so that the UX kinda acts like mail clients. either I have the inbox open, or a chat. was curious how that'd feel like

Beeper Support Report

N/A

Caveats

N/A

CSS Hacks

/**********************************************/
/* Hide Left Panel/Sidebar While Chat Is Open */
/**********************************************/

.mx_MatrixChat:has(> .bp_MainPanel > .mx_RoomView) > .bp_LeftPanel {
  display: none;
}

.mx_MatrixChat:has(> .bp_MainPanel > .mx_RoomView) > div:has(.spaceBar) {
  display: none;
}

Screenshots

Before

Beeper's inbox/side panel are visible whether a chat is open or closed:

After

Beeper's inbox/side panel are visible only when a chat is closed:

Chat Open:

Chat Closed:

[0xdevalias]

Change the min-width of the Left 'Inbox' Side Panel

Has anyone been able to decrease the minimum width for the left panel using custom CSS?

Via @ashirbhallalevine:beeper.com on Beeper Community chat:

body .bp_LeftPanel {
min-width: 200px;
 /* When I tested it I didn't need to change max-width, but Arjan seemed to when they used it, so YMMV */
 /* max-width: 200px; */
}

[0xdevalias]

Ensure full image preview is visible, rather than a zoomed part of it

Background Context

It annoyed me when images shared in chats with a certain aspect ratio ended up getting zoomed in to fill the space (and looking super weird in the process), rather than just being scaled down and showing the full content.

Beeper Support Report

N/A

Caveats

N/A

CSS Hacks

/* Ensure full image preview is visible, rather than a zoomed part of it */
.mx_EventTile_image .mx_MImageBody img.mx_MImageBody_thumbnail {
  object-fit: contain !important;
}

Screenshots

Before

After

[0xdevalias]

Change the colours of existing svg images embedded in the DOM

The following comes from a request from the Beeper Community chat.

Extends from some of the original sidebar work in: #6 (comment)

The following rules allow you to target each path within an svg embedded in the DOM of the page, and then use CSS to customise properties like the colours/etc of the paths within that vector image.

For example, this changes the 'inbox' icon on the sidebar to be red and green (rather than it's default white/grey):

.spaceBar > .mx_AccessibleButton .bp_icon svg[data-src="img/beeper/square-inbox16.ea471fd.svg"] > path:nth-child(1) {
    fill: red;
}
 
.spaceBar > .mx_AccessibleButton .bp_icon svg[data-src="img/beeper/square-inbox16.ea471fd.svg"] > path:nth-child(2) {
    fill: green;
}

You could similarly target and customise other svg based images where the svg is directly embedded in the DOM.

Before:

After: