UI Refactor: Homepage, Dashboard, and Global Navbar (#302, #303)

[mnietona]

Description

This PR modernizes the global UI/UX of DocHub. It fixes navigation issues, improves the dashboard layout, and resolves a blocking bug in the bulk upload form.

Closes #302
Closes #303

Key Changes

1. Mandatory Institutional Disclaimer (#302)

• Added the official disclaimer on the landing page regarding MonULB/UV documents to comply with institutional requirements.

2. Dashboard & Home Overhaul (#303)

• New Grid Layout: Replaced the single vertical column with a 2-column grid (Favorites on the left, Recent Documents on the right).
• Better Scrolling: Removed the restrictive max-height and internal scrolls. The page now flows naturally, making it much easier to use.
• Empty States: Added a clean UI for users who don't have documents or favorites yet.

3. Critical Bug Fix: Bulk Upload

• Turbo Fix: Added data-turbo="false" to the bulk upload form. This fixes a bug where the "Submit" button would do nothing because of a conflict between Django and Turbo. (Import de masse)

4. Search & Navbar Improvements

• Archived Courses: Courses marked as "archived" now appear with a specific icon and lower opacity to distinguish them from active courses.
• Z-Index Fix: Fixed the search bar results so they no longer appear behind other page elements.

5. Unified Error Pages

• Redesigned the 404, 500, and CAS login error pages.
• They now use a compact, modern design with a technical "Debug Console" at the bottom to help developers identify issues quickly.

6. Architecture

• Moved inline CSS into a centralized style.css file.
• Used ULB official colors and reusable components for better maintainability.

Screenshots

Manual Testing

• Bulk Upload: Verified that the "Submit" button now works and redirects correctly.
• Search: Tested the autocomplete; text is truncated properly, and archived courses are clearly visible.
• Dashboard: Confirmed the new grid layout works on both Desktop and Mobile.
• Errors: Manually triggered a 404 to verify the new compact design.

[C4ptainCrunch]

Oh wow, this is a big change :) Could we discuss it a bit more before you send some more time on it ?

Hot takes (i'm a bit short on time, let's discuss more in depth in the following days):

• I would prefer separate PRs for the "small things":
  • one for each point 1, 3, 4 and 5.2. Those would be easy tor review and deploy quickly
  • then one for the new UI (2, 5.1 and 6). This will take more time and effort to land (both on your side and on ours)
• Do you have a screenshot for 5.2 ?
• i would prefer some "positive" wording and colors for the banner. More in the vibe of thanking the CI and Urlab for providing the tool and saying that users can be involved if they like than in the "warning" vibe.
• I do like the color scheme, but using the ULB blue might do the contrary of what we want in Make it clear DocHub is a student initiative (and open to contributions) #302
• I like the 2 columns layout of the upload form, it makes the 2 options much clearer. (this too could be a separate PR if you want to land something useful quicker)

[mnietona]

Thanks for the feedback! You are totally right, it was a massive PR. Breaking it down makes perfect sense for reviewing and deploying.

I’ve started splitting the "quick wins" into separate PRs based on your notes:

✅ 1. Positive Disclaimer (Point 1) -> PR #372: I completely changed the wording to be welcoming, explicitly thanking the CI/UrLab, and inviting contributions.
✅ 2. Bulk Upload Bug (Point 3)
-> PR #370: I kept this one strictly technical to fix the Turbo bug quickly.
✅ 3. Search & Navbar (Point 4)
-> PR #371: Improved the visibility of archived courses.

---

Regarding Point 5.2 (Debug Console Screenshots)

You asked for screenshots of the new Error Pages with the Debug Console. The goal here is to have a user-friendly page for the student, but with a clean, collapsible technical block at the bottom to help us debug when they send a screenshot of their issue.

Here is the Before / After:

Before (Standard Django)	After (New UI + Debug Console)

Let me know if you like this approach, and I'll open a dedicated PR for it!

---

Next steps & The "Big UI" Refactor (Points 2, 5.1, 6)

• Upload Form: I'm glad you liked the 2-column layout! Since I kept PR fix: enable bulk upload form submission (Turbo conflict) #370 purely for the bug fix, I can open a quick separate PR just for this 2-column UI if you'd like to land it quickly.
• Colors & Branding: I totally get your point about the ULB blue. We definitely need to find a color scheme that feels "DocHub/Student" rather than "Official ULB Admin" to align with Make it clear DocHub is a student initiative (and open to contributions) #302.
• Dashboard Layout: For the rest of the UI (the 2-column dashboard, the unified CSS), I'd love to discuss the design direction with you in the coming days before spending more time on the code. Let me know what works best for you (async here, or a quick chat)!