Web Interface Rework

[zekroTJA]

Prelude

The current web interface of shinpuru is built with Angular and has went though a lot of style and layout iterations as well as feature extensions as shinpuru has evolved. Therefore, there was never a clear concept behind the style and design of the web interface which today leads to a pretty bad user experience. Also, the project state of the web interface has reached a point of non-maintainability so that I've decided to re-create the whole web interface using React with a clear and concise plan in mind to make it more maintainable, resilient and user friendly.

Demos

You can see the code of the new web interface in the web.new/ directory in the dev branch.

The current state of the reworked web interface is currently available in the Canary Version of shinpuru. Just go to c.shnp.de/beta to play around with the new web interface, If you have not already, invite shinpuru Canary using this link.

I am also posting some sneak peeks and insights to my twitter timeline. Also, I am regularly asking for feedback on my development Guild. Feel free to join there if you want to be involved into the development process of the new interface. I am also sometimes streaming some development on my YouTube channel.

Status

Because there is a heck lot to do to re-implement all features of the current web interface, I just want to list down all features and their state of implementation in the new interface.

Basic Framework

• [x] API Wrapper
• [x] Main Page
• [x] Login Page
• [x] "No Guilds" Route

Guilds

• Members

  • [x] Member List
  • [x] Member Info
  • [x] Create Member Reports
  • [x] Revoke Member Reports

• Moderation

  • [x] Modlog List
  • [x] Revokation in Modlog
  • [x] Create Unban Requests
  • [x] Unban Requests List
  • [x] Process Unban Requests

• Starboard

  • [x] List Starboard Entries

• Karma

  • [x] List Karma Scoreboard

• Guild Settings

  • [x] Backup Switch
  • [x] Backup List
  • [x] Invite Blocking Switch
  • [x] Permission Management
  • [x] Autoroles
  • [x] Modlog Channel
  • [x] Voicelog Channel
  • [x] Join/Leave Message
  • [x] Antiraid
  • [x] Code Execution
  • [x] User Verification
  • [x] karma
  • [x] Logs
  • [x] Data Removal
  • [x] API Access

• User Settings

  • [x] Logout
  • [x] API Token Management
  • [x] One Time Auth Switch
  • [x] Privacy Settings
  • [x] Preferred Language
  • [x] Theme select

• Bot Settings

  • [x] Presence

• Informational Stuff

  • [x] Info Page
  • [x] Command List
  • [x] Docs

• External

  • [x] User verification
  • [x] Unban requests

[voxain]

Fantastic job on the new web UI so far! It's come a long way, and there's still a lot to do. But the rework has definetely sorted out a lot of issues with the old one!

[zekroTJA]

Thank you very much. It was probably my largest web frontend project I've worked on for now and afterwards, I somewhat regret building all UI components by myself instead of simply using a component library. There is a hell lot to take in consideration to make a good user experience including all ways to control such a web interface and there is still probably the most work to do.

But I think with the new interface, we have a solid foundation to build upon. ^^

[voxain]

Very true. It is definetely a project of passion ❤️