Building the app

Now to the fun part - coding. Except wait, first I need to set up Electron, TypeScript, Webpack and GitHub's design system. Despite doing this for years, it easily ate up multiple hours of my time and set me back significantly. Perhaps I should've used one of Electron boilerplates, but it's been a long time since I worked with Electron and I wanted to understand how everything works. No regrets... almost.

What has really failed me and lost me a significant amount of time is Primer - GitHub's design system and React components. I don't know if it's the incorrect TypeScript definitions or out-dated documentation, but the thing just doesn't work half the time, even when I copy-paste examples from the docs. At one point I had enough of this and just converted the whole UI to Tailwind - a tool I'm really familiar with from my work on Linkjar.

It's funny how I heard the advice of "use familiar technology over hype" and I still went the other way. In the yesterday's post I thought I would get a productivity boost from working with a ready-to-use design system and their components and hopefully get a pretty similar look to GitHub. Obviously, it didn't work that way and I'm going to remember that lesson now for sure.

Anyway, so here's what I've got now.

Lotus supports "Sign in with GitHub" OAuth flow to avoid having to ask users to generate access tokens with the right scopes and then paste them into my app. I could obviously take that shortcut and save a lot of time, but I think this is going to pay off in the long run. To implement that, I'm spinning up a Node.js server under the hood and waiting for GitHub to redirect the user to it after they complete the authentication flow. Then I extract the access token and save it in an encrypted local storage.

Here are the useful Electron modules I've used by the way:

• electron-better-ipc
• electron-serve
• electron-store
• electron-unhandled
• electron-util

All of them are by Sindre Sorhus, so thank you Sindre!

First draft of an "Unread" page UI looks like this:

Next, I wanted to render notification threads (issues or pull requests) right in the app for several reasons:

1. It would be annoying to open each link in the browser just to say what it's about
2. I need a place to show a list of actions for each notification ("Mark as read", "Reply later" and "Bookmark")
3. GitHub automatically marks the notification as read right after you open it for some unknown reason

Last one is where things got really weird. There's no API provided by GitHub to mark notification as unread again, so I had to reverse-engineer their UI and see what kind of request it sends to do that. It was a fun exercise for sure and involved decoding some base64 hashes and injecting custom JavaScript into GitHub's page to send an accordingly crafted request as if it was GitHub who's sending it. Now when you open a notification in Lotus, notification is automatically marked back as unread, so viewing something is truly a read-only operation.

After also injecting some custom CSS to hide unnecessary parts of GitHub's UI to make it look good in an embedded web view, here's what I've got:

I'm happy that I was able to overcome this obstacle, but I hoped I'd built more by the end of today. There's still one more day left anyway and hopefully I won't come across more issues or hacky workarounds. Tomorrow I'm going to actually build some functionality that this app is about lol.