Completely redesigned the front-end panel style

[CJackHwang]

Summary

This PR redesigns the frontend panel UI and improves refresh behavior.

Changes

1. Responsive layout improvements for cards, charts, sidebar, and lists.
2. Visual redesign with a minimalist black-and-white style and rounded corners.
3. Fixed brief flicker during page refresh when switching themes.
4. Added list pagination and internal scrolling.
5. Added i18n support for English and Chinese.
6. Improved refresh flow for smoother page updates.

Screenshots

Verification

Tested on:

• Device: Orange Pi Zero3 2GB
• OS: DietPi v10.0.1
• Backend: v0.7.0
• Verification time: 2026-02-15 20:15 UTC

Validated:

1. Desktop and mobile layouts render correctly.
2. Theme switching + refresh no longer flickers.
3. List pagination and internal scrolling work as expected.
4. Language switching (EN/ZH) works correctly.
5. Regular page refresh is stable and smooth.

Compatibility / Scope

• No backend protocol changes.
• Frontend-focused changes only.

[MichaIng]

Uff, I mean it looks very nice, but I would highly prefer this being separated into dedicated PRs, like visual-only changes, l10n implementation (which is great), refresh flow, ... Looks like the 6 commits could be made moreless separate PRs from? If one depends much on the other and would require too much work to rebase on our current main, it could be opened as dependent PR. But so that we can review and discuss the changes individually, instead all at once.

However, I am not the project owner, just my opinion. And not to understand me wrong: it does look great, and I love the fact that it adds l10n 🤩!

[CJackHwang]

Uff, I mean it looks very nice, but I would highly prefer this being separated into dedicated PRs, like visual-only changes, l10n implementation (which is great), refresh flow, ... Looks like the 6 commits could be made moreless separate PRs from? If one depends much on the other and would require too much work to rebase on our current main, it could be opened as dependent PR. But so that we can review and discuss the changes individually, instead all at once.

However, I am not the project owner, just my opinion. And not to understand me wrong: it does look great, and I love the fact that it adds l10n 🤩!

From my personal perspective, I don't think the front-end needs to be broken down into too many pull requests (PRs?). Most of the changes are mainly to CSS styles. I haven't changed the back-end logic, and the front-end feels more like a whole. During a refactoring, I think it's difficult to separate it into multiple PRs. Of course, one reason is that I don't have a particularly fine-grained approach to development. Each commit is more like an archive point for me than a specific feature being addressed 😂😂😂. This is a strange personal habit of mine, and it might not be good. If you really want to break it down, you could separate the localization functionality, but I've been developing continuously for a day and then all night, so I need to rest first.

By the way, do you think the new front-end development style looks good?

[Fourdee]

@CJackHwang Just wanted to say, I actually really like the design here. Clean, smooth, modern, well done 👍 . The additions (compared to live version) are much needed (at least for my use case 😄 )

I've been wanting for a Netdata replacement since they went full "AI" and "corp profit mode". Does the current disk usage stats and file manager all function? Cant see this on the current version I have installed on NAS, really need it!

Also, noticed the current version only shows the root OS drive in dashboard, it would be great to see all /mnt drives automatically populated on the UI?

[Joulinar]

If @Fourdee (the original founder of DietPi) approved the design, we most probably should implement it in one or the other way 😄

[CJackHwang]

@CJackHwang Just wanted to say, I actually really like the design here. Clean, smooth, modern, well done 👍 . The additions (compared to live version) are much needed (at least for my use case 😄 )

I've been wanting for a Netdata replacement since they went full "AI" and "corp profit mode". Does the current disk usage stats and file manager all function? Cant see this on the current version I have installed on NAS, really need it!

Also, noticed the current version only shows the root OS drive in dashboard, it would be great to see all /mnt drives automatically populated on the UI?

Thank you very much for liking it, but to be honest, I am currently busy with my studies, and I have a lot of open-source projects to maintain (my open-source project has been on GitHubTrending recently, which is extremely popular, and there are many problems with it).
I just improved this dietpi panel on a whim. As for more other functions, I have not had time to develop them. (Of course, there is another point that I have hardly used this system and panel since my development board storage broke), so it is more troublesome if I need to debug or something.
I hope to have the opportunity to continue to improve it in the future!

[nonnorm]

Thanks for raising this, @Fourdee - definitely a good incentive to prioritize it 😄.

If there are other missing features in comparison to other projects, feel free to open a request so I can track them properly. Believe me, they'll get a slight bump in priority. That said, if anything in the current UI redesign is broken, I’d consider that a blocker before merging.

Apologies for the delay here. I’ve recently been balancing exams and a variety of personal commitments, so progress has been slower than I’d like. The project is still active (even if development has been slow), and I’ll be getting back to this as soon as I have more time.

[MichaIng]

Agreed, but let's push a stable release with the current state, before applying such a larger change, no?

@nonnorm good luck with your exams, been there 💪🤓!

[Fourdee]

@CJackHwang I just improved this dietpi panel on a whim

Blew me away 👍

If @Fourdee (the original founder of DietPi) approved the design, we most probably should implement it in one or the other way 😄

Lol. Honestly its just a personal preference, and, I just thought I should reply to @CJackHwang as he didnt get one for a while.

@MichaIng Agreed, but let's push a stable release with the current state, before applying such a larger change, no?

I wish I could chip in, however, as everyone knows time gets shorter the older one gets, and, priorities have to change (thats my hidden way of saying "I couldn't code a hello world" lol).
Regardless, please dont do anything for my sake, just wanted to provide some feedback on @CJackHwang excellent visual rework ,and, @nonnorm excellent work on making our wishlist of "We need this in DietPi" from a long long time ago, actually happen, so thank you!

@nonnorm I'll try and remember to do some feature requests, however, don't protize any of it, focus on you and good luck with exams 👍

@MichaIng as always, makes my day to see you continue to run your project with integrity, honour, an open mind and always willing to share your vast knowledge to those who chip in. A true inspiration for the way an open source community should be run. You set a bar all projects can and should be striving for.
Keep up the good work boss, I owe you a few beers I believe 😄 👍