Releasing Soapbox 3.0 | Soapbox

2023-01-05 08:54:19

That is the largest launch of Soapbox ever. What began out as a fork of Gab’s 2019 UI has now grow to be a mainstay on the Fediverse. Initially created for the feminist platform Spinster, Soapbox now powers Fact Social, which has rapidly grow to be the biggest web site working Mastodon on-line.

Most of the enhancements listed here are due to a collaboration between Fact Social, a younger man in Poland, and a vibrant Open Supply neighborhood. These components have contributed equally to create one thing wonderful.

I’m proud to see Soapbox utilized by leftist anarchists, conservatives, companies, and fools. Folks from all totally different backgrounds use Soapbox, and we construct along with ranging viewpoints. The result’s the most effective UI on the Fediverse.

No line of code has gone untouched. The codebase has been transformed to TypeScript and Tailwind CSS. We now help key options corresponding to quote posting and occasions. Now could be the most effective time ever to leap ship.

We hope you take pleasure in this launch as a lot as we did making it. The journey by no means ends. However we’re higher outfitted than ever to usher ahead this new period of the web.

What’s Soapbox?

Soapbox is a UI for the Fediverse. You should use it to interchange Mastodon’s UI with one thing extra stunning, however we are able to do a lot better. Soapbox has its personal backend referred to as Rebased, constructed particularly for Soapbox to do new issues Mastodon cannot. Many of those new options are solely accessible on the most recent model of Rebased, which has additionally been launched. With Rebased, Soapbox turns into a full substitute for Mastodon.

Quote Posts

Lastly, this vital and apparent function is obtainable. Quote posting is a function individuals have come to count on, so a social media expertise is just incomplete with out it.

Backends: Rebased, Fedibird

Reply Mentions

When replying to a publish, Soapbox would beforehand insert mentions into the textual content. Now they’re separate, which makes issues extra readable.

Within the publish composer itself, recepients are seen on the prime. You may click on into them so as to add or take away recipients. (You may also tag individuals as regular so as to add them to the dialog).

Backends: Rebased, Pleroma

Enhancing

Customers can lastly edit posts! No extra damaged threads.

Edited posts will show a pencil icon, and may be clicked to view the total modifying historical past.

Backends: Rebased, Mastodon, Pleroma

Occasions

The largest new function accessible solely in Rebased – federated occasions! Customers can publish conferences, meetups, on-line occasions, or simply have some enjoyable.

Customers can be a part of occasions and touch upon them.

The occasion location may be seen on a map proper in Soapbox, powered by OpenStreetMap.

Occasions in Rebased federate with Mobilizon.

Backends: Rebased

Birthdays

Customers can now add a birthday to their profile.

When individuals you observe have a birthday, they’re going to present up within the homepage sidebar. Make sure to want them a contented birthday!

Admins may implement an age necessities for customers – through which case a birthday area will probably be added to the registration type.

Backends: Rebased, Pleroma

Chats Redesign

Chats have been fully overhauled. This new design actually brings out the most effective of chats!

The chat widget has been unified right into a single pane. This streamlines the UI and makes chatting whereas shopping simple.

On desktop, a full chats view is obtainable, permitting you to rapidly swap between chats. This UI is responsive, and collapses right into a single column on cellular.

Some main high quality of life enhancements have been made, together with

A bigger viewport.
Autoresizing textarea.
Autocomplete for emojis.
Capacity to depart a chat.

That is really the most effective direct messaging expertise the Fediverse has ever seen!

Backends: Rebased, Pleroma

Onboarding

New customers are greeting with an onboarding display screen and prompted to arrange their bio and avatar.

Backends: All

Server Guidelines

If the admin configures server guidelines, customers will probably be required to pick a number of rule violations when submitting a report. The stories modal has been fully redesigned to accomodate this.

Backends: Rebased, Mastodon

Translations

It’s now attainable to translate posts into your native language!

This depends on a third-party service, and to this point the supported choices are DeepL (proprietary) and LibreTranslate (FOSS). Solely public posts may be translated.

Backends: Rebased

UI Redesign

In Soapbox 3.0, we constructed a UI element library from the ground-up to help essentially the most primary options of Soapbox. These primary components (corresponding to Stack, HStack, Button, Enter, Card, Textual content, and so on) are used because the constructing blocks for extra advanced parts. This resulted in a excessive degree of consistency throughout the whole UI. 1000’s of strains of CSS have been deleted in favor of those UI parts, which use Tailwind CSS utility courses. Switching to TypeScript was important, because it made these new UI parts simple to make use of. Most class-based parts have been additionally transformed to practical parts so reusable hooks can simplify our code. The mission has really been made stunning each inside and outside, a reminder that good design and engineering are inseparable.

The outdated FontAwesome icons have been changed with Tabler, a lovely Open Supply icon set. Tabler makes use of “line icons” (against “stuffed”), which is a extra fashionable design development. Icons at the moment are rendered as SVGs as a substitute of fonts.

Lastly, the structure has been streamlined and beautified. Navigation and settings have been consolidated. A brand new colour system makes Darkish Mode higher than ever. Focus states make the UI extra acessible, and efficiency has been improved. That is an replace you will not need to miss!

Backends: All

Theme editor

With Tailwind CSS got here a strong new colour system. Beforehand Soapbox supported configuring just one or two colours, which it will extrapolate to the remainder of the UI. Now admins can configure each particular person colour used on the entire web site.

The theme editor has a handy hue slider that may regulate entire palettes directly, in addition to the power to export and import themes in JSON format. We hope you take pleasure in creating and sharing themes!

Backends: Rebased, Pleroma

Admin Enhancements

In Soapbox, admins can handle customers immediately from their profile. Admin actions at the moment are consolidated right into a single “Reasonable person” motion from the 3-dots menu. This shows a modal with the power to confirm, recommend, deactivate, and delete accounts.

It’s also now attainable for admins so as to add customized badges to accounts. These badges are local-only and don’t federate, however admins can add badges to each native and distant customers.

Backends: Rebased, Pleroma

Toast

A brand new toast system has been designed from the bottom up for Soapbox! It options stunning animations, and eventually the power to dismiss a toast.

Backends: All

Internationalization

Full RTL (right-to-left) help has been added, which places Soapbox into a tremendous upside-down world. RTL languages embrace Arabic, Hebrew, Persian, and Central Kurdish. A full translation into Arabic has additionally been added.

Translations for Polish and Italian have additionally been up to date. Thanks, translators!

Lastly, we’re within the early levels of establishing Weblate. This may permit customers to supply translations without having to edit the code.

Backends: All

Help for Mastodon

Soapbox is initially a fork of Mastodon’s UI, transplanted onto Pleroma. In doing so, we misplaced the power for it to run on Mastodon anymore, despite the fact that it nonetheless talked to the identical APIs.

On this launch, we’ve got restored compatibility with Mastodon. Soapbox is now very versatile, and might adapt to its circumstances. In the event you run it on Mastodon, Soapbox is aware of this, and can solely show Mastodon options.

It is vital to notice that whereas Soapbox helps Mastodon, Mastodon doesn’t help Soapbox. In the event you resolve to run Soapbox as your principal frontend on Mastodon, you may want to beat some technical hurdles, and it’ll not help each feauture that Mastodon provides. That is primarily as a result of Soapbox is only an API consumer, so it can’t do issues that Mastodon doesn’t expose an API for.

Different Stuff

This launch was so huge, we could not spotlight the whole lot. So listed here are among the different enhancements you’ll be able to count on.

Admin: reorganize UI into 3-column structure.
Admin: embrace exterior hyperlink to frontend repo for the working commit.
Compatibility: added compatibility with Fact Social, Fedibird, Pixelfed, Akkoma, and Glitch.
Composer: help customized emoji classes.
Composer: transfer emoji button alongside different composer buttons, add numerical counter.
Composer: use graphical ring counter for character depend.
Builders: added Check feed, Service Employee debugger, and Community Error preview.
Ethereum: Metamask sign-in with Mitra.
Feeds: added gaps between posts in feeds.
Feeds: mechanically load new posts when scrolled to the highest of the feed.
Feeds: show steered accounts in Dwelling feed (elective by admin).
i18n: added Icelandic translation.
i18n: added Shavian alphabet (en-Shaw) transliteration.
Structure: improved design of prime navigation bar.
Lists: skill to edit and delete an inventory.
Notifications: added unread badge to favicon when person has notifications.
Notifications: show full attachments in notifications as a substitute of hyperlinks.
Posts: hover the “replying to” line to see a preview card of the father or mother publish.
Posts: modified the thumbs-up icon to a coronary heart.
Posts: transfer occasion favicon beside username as a substitute of publish timestamp.
Posts: modified the conduct of content material warnings. CWs and delicate media are unified into one design.
Posts: redesigned interplay counters to make use of textual content as a substitute of icons.
Posts: letterbox photographs taller than 1:1.
Profile: overhauled person profiles to be per the remainder of the UI.
Profile: skill to function different customers in your profile (on Rebased, Mastodon).
Profile: take away a selected person out of your followers (on Rebased, Mastodon).
Search: added a devoted search web page with prefilled options.
Settings: unified settings below one path with separate sections.
Options: skill to view all steered profiles.
Theme: auto-detect system theme by default.

See the full CHANGELOG for an inventory of all adjustments.

Eliminated

Sadly, some options did not make the minimize. These options weren’t eliminated on objective, however have been steamrolled throughout the main UI updates and by no means added again. It is attainable a few of them may reappear sooner or later.

Halloween theme: I am unhappy to see this one go, however Soapbox has grow to be a extra critical mission. When engaged on a workforce, sustaining little issues like this may be burdensome, so we determined to not add it again.
Dyslexic mode, Demetricator: for comparable causes as above. We’d discover fixing these issues otherwise sooner or later.
Superior notification classes: function, however wants extra design work to not be overwhelming.
Non-public notes on accounts: this function will reappear. We merely did not discover a good place for it but within the new design.
Backup/export performance: additionally a function that will probably be added again. We weren’t pleased with the next export implementation, which abuses the server by making plenty of API requests and isn’t 100% correct. ZIP backups (a separate function) merely weren’t but tailored to the brand new design.

If it is advisable to entry a eliminated function, you’ll be able to nonetheless use an older model of Soapbox. We protect the 1.x and a couple of.x strains of Soapbox at https://v1.soapbox.pub and https://v2.soapbox.pub respectively. It is an ideal supply of nostalgia!

Putting in a server

Need to arrange your personal Soapbox occasion? See our install guide!

In the event you simply need to attempt it out, go to fe.soapbox.pub and log in with any Mastodon account.

Plans for 2023

This has been an enormous yr for Soapbox. Thanks to everybody who helped make it particular!

We waited means too lengthy to do that launch, partly as a result of weblog posts like this are time-consuming and distract from growth time. Sooner or later we’ll begin doing informal releases on GitLab extra usually, and save the weblog publish fanfare just for bigger releases like this one.

The polished new search for Soapbox now makes our web site look outdated. As well as, we get numerous new admins looking for assist with no environment friendly strategy to doc options. So Q1 2023 looks as if a good time to construct a brand new web site and docs. The following iteration will use Markdown information so individuals can simply contribute on GitLab.

At this level our product feels able to taking over Large Tech, so it is only a matter of sprucing and making it simpler to self-host.