Prompt Update - UI

[Pkcarreno]

Closes https://github.com/lumen-notes/lumen/issues/348

This time taking what was done in the previous PR and adding the visual/interaction side of the process.

There are two ways in which the user is "notified" that there is a new update, the first is through buttons on the interface that only appear when an update is available.

The second is by making use of the sonner library, showing a toast on the screen.

When clicking on the toast the app is immediately updated

In the case of clicking on one of the two buttons in the layout it generates a alert dialog before updating.

In this version only 2 dependencies were installed:

• sonner
• workbox-window

Also I created a context of the service worker state and placed it in the form of a provider to maintain consistency of the data in the app.

I placed this provider in src/index.tsx, if you don't like the position I gave it you can modify it without problem, the important thing is to keep the <Toaster /> component at the same level or higher than <PromptUpdateProvider />.

And the icon of "refresh" that was added is taken from featherIcon

Only one issue remains, it is ideal to check before updating that the status is "synchronized" or at least force the synchronization of the notes before refreshing the page. I left a comment to manage this, I could not fully understand the synchronization process and how to integrate it yet.

The above file is src/components/nav-bar.tsx line 329

What do you think of the UI and implementation? I look forward to any changes or suggestions.

[netlify[bot]]

✅ Deploy Preview for lumen-notes ready!

Name	Link
🔨 Latest commit	394eeb48a7659139cba874c06f5b4d70cbe0c678
🔍 Latest deploy log	https://app.netlify.com/sites/lumen-notes/deploys/66bd027d9fd83d00087413a7
😎 Deploy Preview	https://deploy-preview-372--lumen-notes.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 58 Accessibility: 81 Best Practices: 100 SEO: 75 PWA: 60 View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify[bot]]

✅ Deploy Preview for lumen-storybook ready!

Name	Link
🔨 Latest commit	394eeb48a7659139cba874c06f5b4d70cbe0c678
🔍 Latest deploy log	https://app.netlify.com/sites/lumen-storybook/deploys/66bd027d9ea8120008e34c7f
😎 Deploy Preview	https://deploy-preview-372--lumen-storybook.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[colebemis]

Amazing @Pkcarreno 💖 I'll take a look soon!

[colebemis]

Thank you for all the work you've put into this, @Pkcarreno!

Before I get too deep into a code review, I wanted to ask: Why are there two ways of notifying the user that an update is available?

I'd prefer if there were only one way to update the app, but please let me know if there are tradeoffs I don't know about.

I like the first option you implemented, where a button appears in the sidebar when an update is available. Maybe we can combine that with a notification dot to draw attention to the button. Something like this:

[Pkcarreno]

Hey @colebemis, in fact there is no tradeoff behind any section of the UI. My thought on this was that the button by itself would not be eye catching enough to make the user aware of the update, however I like your proposal of the notification dot.

I will remove the changes related to the toast and add the red dot to the UI. I will have it ready for tomorrow.

[Pkcarreno]

The changes have been made

The update buttons look like this now:

It only remains to resolve the synchronization before refreshing the page.

I tried to use the sync method but being a synchronous function I have no way to wait for its resolution, I could make a promise that executes the sync and with a setTimeout wait for the state to be success, but before, I would like to know if there is already a function like that.

[colebemis]

Thanks for your patience @Pkcarreno 🙏 I got back from vacation recently and this slipped through the cracks. Going to take a look this weekend!

[Pkcarreno]

Amazing @colebemis! Indeed, testing locally is a bit tedious. I'll explain a little bit the workflow so you can take it into consideration during future developments:

1. When running in the development environment (npm run dev:netlify) it generates a new sw.js.
2. When loading the web for the first time (or refreshing the page) it checks if there is a new version of sw.js and updates immediately.
3. if the web is already open and a new sw.js is generated, it checks at an hourly interval if a new version exists. If a new version exists then it displays the update button.

So the update button will not always be visible with each update, but for those people who have the app open during the release of a new version. You can change the behavior, but I think this is the right one.

I'm still available if you require any changes in this section 👍 Thanks for this amazing app!