Idea about modernizing the frontend

[scinca]

Hello, me again.

I apologize this is going to be a long post, but I wanted to present a proposal.

I am mainly a frontend developer and when I looked through this application's frontend I found some things that I would like to change in order to make it lighter, more maintainable, and responsive.

Proposed Changes:

• Introduce CSS variables for colors, spacing, and theming
• Remove/reduce !important usage (currently over 10 instances) which makes debugging really hard
• Use media queries for light/dark mode to cleanup dark mode logic and fix issues like 14.3 dark mode white flashes #1629

Example:

:root {
  --bg: #f5f5f5;
  --text: #404040;
  --primary: #5a52f0;
  --accent: #f0b852;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #262626;
    --text: #ebebeb;
    --primary: #6a5aff;
    --accent: #f5d16a;
  }
}

• Move from float-based layout to CSS Grid for modern responsive design (would make dashboard usable on mobile)
• Replace jquery ui with native HTML5 inputs (e.g., <input type="date">, <input type="datetime-local">)
• Modernize JavaScript to reduce jQuery dependency

Context:

I know there is #1706 which rewrites the entire frontend with Vue, but at 40,000 LOC I think it's too large for anyone to review effectively. For reference:

• Current frontend: ~10k LOC
• Entire DNS server: ~45k LOC
• PR Modernized UI (VueJS based) #1706: 40k LOC (almost 4x the current frontend, nearly as large as the entire server)

My Plan:

• Make a smaller, focused modernization (target: 3-5k LOC, down from <10k)
• Focus on simplicity and maintainability (functionality > fancy animations)
• No changes to backend APIs or C# logic
• Can be done incrementally without breaking existing features

Estimated Benefits:

• 30-50% reduction in frontend code size
• Better mobile/tablet support
• Easier maintenance (modern CSS/JS patterns)
• Smaller bundle size (fewer dependencies)
• System dark mode support

If you're open to this idea, I'd be happy to create a draft showing my idea. Would love to hear your thoughts about this.

[ShreyasZare]

Thanks for the post. I really appreciate you for considering to contribute to this project to improve it. I am not from web frontend background and thus have limited experience with JS frameworks and the ecosystem in general. So, there is definitely scope for improvement on the frontend part without any doubt.

That said, I am not really prioritizing UI changes currently just so that I can focus on pending core features that are being requested for which people are waiting for long time. There are many major DNS features planned and the entire DHCP server part is to be redesigned with support for DHCPv6.

I am ok with small changed in UI which can improve things. Changes which I can maintain easily would be much better since with the limited time I have, its tough to find time to learn new JS frameworks and then refactor existing working code for it.

There is already a couple of PRs for fixing dark mode issues but if you have better idea for fixing issues with it then you are welcome to push another PR with a better solution.

[scinca]

Thanks for answering. And I can understand that you have limited experience with js and its ecosystem so I wanted to ask about your opinion on sticking with modern vanilla js and css, but then (incrementally) replacing big parts of jquery and bootstrap with HTML5 input types like for example

<input type="date">

which is more modern, reliable and easier to use than jquery based components.

And if you are open to maybe learn one new concept then I would suggest web components since they are widely supported in all browsers (except with maybe old internet explorer versions) and they would really help clean up the codebase ( index.html is ~6000 loc and lots of ui is done in various js files with jquery and web components will make stuff easier to navigate.

A web component looks roughly like this:

<!-- usage is like any html component-->
<stat-card title="Total Queries" value="1234" color="#6699ff"></stat-card>

<!-- definition looks like this ( but they are usually stored in a separate file for readability  -->
<script>
class StatCard extends HTMLElement {
  connectedCallback() {
    const title = this.getAttribute('title');
    const value = this.getAttribute('value');
    const color = this.getAttribute('color');
    
    this.innerHTML = `
      <div style="background: ${color}; color: white; padding: 12px; border-radius: 4px;">
        <div style="font-size: 24px; font-weight: bold;">${value}</div>
        <div>${title}</div>
      </div>
    `;
  }
}

customElements.define('stat-card', StatCard);
</script>

This was just an idea, but if you don't like it I'm fine with focusing on cleaning up some problems in css and js and sticking with the jquery and bootstrap approach.

[ShreyasZare]

Thanks for the response. This looks nice but really not sure how to proceed with such changes. These kind of changes are good to have but my main concern is that even when you work on this an push a PR, I have to spend time for reviewing it and studying it since without it, I wont be able to make new changes as needed. My current to-do list has so many items, it would take 2-3 years easily to implement them. And that's a conservative estimate. Any other task I add in between just means that the rest of the items in the list gets pushed back further.