Settings, build info, service info queue controls, manual batches should be packed away in a menu of some sorts.
The most important items in the UI is
is the service running and ready
is any file currently being imported
queue / jobs list
Think minimalistic UI like sabnzb (picture)
Settings, build info, service info queue controls, manual batches should be packed away in a menu of some sorts.
The most important items in the UI is
- is the service running and ready
- is any file currently being imported
- queue / jobs list
Think minimalistic UI like sabnzb (picture)
<img width="1639" alt="image.png" src="attachments/169bc991-dc11-40c9-a17f-95a8b2945e90">
## Implementation update
Implemented the SABnzbd-inspired UI direction from the mobile and desktop references.
## What changed
- Reworked the top bar into a compact status/control toolbar.
- Added a primary summary strip for queue mode, current import, imported count, and failed count.
- Moved service/build details, queue controls, and manual batches into collapsed secondary sections/menu access.
- Renamed the main work area to Queue and history and kept jobs grouped there.
- Updated the responsive styling toward a dense SABnzbd-like grey/dark layout with truncated desktop rows and mobile job cards.
- Added coverage that the secondary controls are packed away and updated stylesheet expectations.
## Verification
- `.venv/bin/python -m pytest tests/test_status.py` — 11 passed, 1 existing Starlette deprecation warning.
## Commit
- `2a7c39b` on `main`
## Result
Issue #30 is ready for manual inspection.
daniels
added the ready label 2026-07-29 20:19:52 +02:00
daniels
removed the ready label 2026-07-29 20:22:39 +02:00
UI Elements are a little clunky (settings menu for instance doesn't close when clicking away), the jobs queue is still way too big per row, use small fonts and have the second column be subtext underneath the title in the first column. The third column (readyness) should be just the chip 'ready' (or other status) and a hover text with the explanation. The actions column should either be a small dropdown menu or just icons for the different actions.
<img width="1215" alt="image.png" src="attachments/07ce0c5a-ef64-47d9-96ce-c0765a8fc96a">
UI Elements are a little clunky (settings menu for instance doesn't close when clicking away), the jobs queue is still way too big per row, use small fonts and have the second column be subtext underneath the title in the first column. The third column (readyness) should be just the chip 'ready' (or other status) and a hover text with the explanation. The actions column should either be a small dropdown menu or just icons for the different actions.
The follow-up refinements are deployed and ready for manual inspection.
## Follow-up implementation update
Applied the latest UI refinement comments on issue #30.
## What changed since the previous attempt
- Switched the palette back toward blue / light-blue / purple.
- Reduced row padding and font sizes to make the UI less clunky.
- Removed the separate context column from the jobs table; context now appears as subtext under the file title.
- Readiness now renders as a chip only, with the explanation available as hover/title text.
- Changed row actions to compact icon buttons with hover titles.
- Added outside-click behavior for the hamburger menu.
- Added backdrop-click close behavior for the settings dialog.
- Updated status tests for the refined structure and interactions.
## Verification
- `.venv/bin/python -m pytest tests/test_status.py` — 11 passed, 1 existing Starlette deprecation warning.
- Deployed to dgsserver1 with `/opt/importarr/repo-upgrade.sh`.
- Verified `https://importarr.delphas.dk/health` returns ok.
- Verified `https://importarr.delphas.dk/api/status` reports git SHA `da4df5020549`.
## Commit
- `da4df50` on `main`
## Result
The follow-up refinements are deployed and ready for manual inspection.
daniels
added the ready label 2026-07-29 20:28:33 +02:00
The light/dark palette update is deployed and ready for manual inspection.
## Color scheme follow-up
Applied the supplied palette direction for issue #30.
## What changed
- Added CSS custom properties for the new palette.
- Light mode now uses the white / soft blue surface treatment with purple, light-blue, cyan, and violet accents.
- Dark mode now switches via `prefers-color-scheme: dark` to the supplied blue-grey dashboard look with the same purple/light-blue/cyan accent family.
- Kept the tighter row sizing and compact icon actions from the previous update.
- Added stylesheet checks for the dark-mode media query and core palette values.
## Verification
- `.venv/bin/python -m pytest tests/test_status.py` — 11 passed, 1 existing Starlette deprecation warning.
- Deployed to dgsserver1 with `/opt/importarr/repo-upgrade.sh`.
- Verified public health and status after a brief proxy warm-up:
- `https://importarr.delphas.dk/health` returned ok.
- `https://importarr.delphas.dk/api/status` reports git SHA `b2c34ef995fd`.
## Commit
- `b2c34ef` on `main`
## Result
The light/dark palette update is deployed and ready for manual inspection.
Create proper dark mode light mode versions.
I cant tell if the current one is ligth or dark.
If light, then the background is too dark and the purple color text disappears entirely.
If dark, then the text is too dark and disappearing into the background.
Also, i need you to fully comply with the color scheme, the yellow and red off colors are wrong.
Perhaps implement a full UI suite lige NiceGui or similar (was just a quick google, pick a better one if present).
<img width="1265" alt="image.png" src="attachments/b7bd38bf-778a-4f5f-88dc-6b19501280b3">
Create proper dark mode light mode versions.
I cant tell if the current one is ligth or dark.
If light, then the background is too dark and the purple color text disappears entirely.
If dark, then the text is too dark and disappearing into the background.
Also, i need you to fully comply with the color scheme, the yellow and red off colors are wrong.
Perhaps implement a full UI suite lige NiceGui or similar (was just a quick google, pick a better one if present).
Applied the latest feedback about the light/dark palette clarity.
What changed
Made light mode explicitly light: white page background, white cards, soft blue panel accents, and dark readable text.
Made dark mode explicitly dark: blue-grey page background and panels with white/high-contrast text.
Kept the requested purple / light-blue / cyan / violet palette values as the theme accents.
Removed the off-palette yellow/red action coloring from the normal warning/error styles and mapped them into the supplied cyan/violet palette instead.
Kept compact job rows, chip-only readiness, and icon actions.
Note on UI framework suggestion
I did not introduce NiceGUI or another full UI suite for this pass. This change is purely CSS/theme-focused and keeps the existing FastAPI/Jinja/vanilla JS UI small. A framework migration would be a larger architectural change and is probably better as a separate issue if still desired after the theme/layout settles.
The clearer light/dark theme update is deployed and ready for manual inspection.
## Theme contrast follow-up
Applied the latest feedback about the light/dark palette clarity.
## What changed
- Made light mode explicitly light: white page background, white cards, soft blue panel accents, and dark readable text.
- Made dark mode explicitly dark: blue-grey page background and panels with white/high-contrast text.
- Kept the requested purple / light-blue / cyan / violet palette values as the theme accents.
- Removed the off-palette yellow/red action coloring from the normal warning/error styles and mapped them into the supplied cyan/violet palette instead.
- Kept compact job rows, chip-only readiness, and icon actions.
## Note on UI framework suggestion
I did not introduce NiceGUI or another full UI suite for this pass. This change is purely CSS/theme-focused and keeps the existing FastAPI/Jinja/vanilla JS UI small. A framework migration would be a larger architectural change and is probably better as a separate issue if still desired after the theme/layout settles.
## Verification
- `.venv/bin/python -m pytest tests/test_status.py` — 11 passed, 1 existing Starlette deprecation warning.
- Deployed to dgsserver1 with `/opt/importarr/repo-upgrade.sh`.
- Verified public health and status:
- `https://importarr.delphas.dk/health` returned ok.
- `https://importarr.delphas.dk/api/status` reports git SHA `5c205fff1357`.
## Commit
- `5c205ff` on `main`
## Result
The clearer light/dark theme update is deployed and ready for manual inspection.
daniels
added the ready label 2026-07-29 20:43:18 +02:00
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
Settings, build info, service info queue controls, manual batches should be packed away in a menu of some sorts.
The most important items in the UI is
Think minimalistic UI like sabnzb (picture)
Implementation update
Implemented the SABnzbd-inspired UI direction from the mobile and desktop references.
What changed
Verification
.venv/bin/python -m pytest tests/test_status.py— 11 passed, 1 existing Starlette deprecation warning.Commit
2a7c39bonmainResult
Issue #30 is ready for manual inspection.
UI Elements are a little clunky (settings menu for instance doesn't close when clicking away), the jobs queue is still way too big per row, use small fonts and have the second column be subtext underneath the title in the first column. The third column (readyness) should be just the chip 'ready' (or other status) and a hover text with the explanation. The actions column should either be a small dropdown menu or just icons for the different actions.
Also the color scheme needs to go back to blue, lightblue, purple ish
Follow-up implementation update
Applied the latest UI refinement comments on issue #30.
What changed since the previous attempt
Verification
.venv/bin/python -m pytest tests/test_status.py— 11 passed, 1 existing Starlette deprecation warning./opt/importarr/repo-upgrade.sh.https://importarr.delphas.dk/healthreturns ok.https://importarr.delphas.dk/api/statusreports git SHAda4df5020549.Commit
da4df50onmainResult
The follow-up refinements are deployed and ready for manual inspection.
Color scheme follow-up
Applied the supplied palette direction for issue #30.
What changed
prefers-color-scheme: darkto the supplied blue-grey dashboard look with the same purple/light-blue/cyan accent family.Verification
.venv/bin/python -m pytest tests/test_status.py— 11 passed, 1 existing Starlette deprecation warning./opt/importarr/repo-upgrade.sh.https://importarr.delphas.dk/healthreturned ok.https://importarr.delphas.dk/api/statusreports git SHAb2c34ef995fd.Commit
b2c34efonmainResult
The light/dark palette update is deployed and ready for manual inspection.
Create proper dark mode light mode versions.
I cant tell if the current one is ligth or dark.
If light, then the background is too dark and the purple color text disappears entirely.
If dark, then the text is too dark and disappearing into the background.
Also, i need you to fully comply with the color scheme, the yellow and red off colors are wrong.
Perhaps implement a full UI suite lige NiceGui or similar (was just a quick google, pick a better one if present).
Theme contrast follow-up
Applied the latest feedback about the light/dark palette clarity.
What changed
Note on UI framework suggestion
I did not introduce NiceGUI or another full UI suite for this pass. This change is purely CSS/theme-focused and keeps the existing FastAPI/Jinja/vanilla JS UI small. A framework migration would be a larger architectural change and is probably better as a separate issue if still desired after the theme/layout settles.
Verification
.venv/bin/python -m pytest tests/test_status.py— 11 passed, 1 existing Starlette deprecation warning./opt/importarr/repo-upgrade.sh.https://importarr.delphas.dk/healthreturned ok.https://importarr.delphas.dk/api/statusreports git SHA5c205fff1357.Commit
5c205ffonmainResult
The clearer light/dark theme update is deployed and ready for manual inspection.