Complete Bootstrap 5 upgrade with navigation and UX improvements

This commit completes the Bootstrap 5.3.7 upgrade with significant
navigation and user experience improvements:

**Bootstrap 5 Migration:**
- Updated JavaScript APIs: modal() → new bootstrap.Modal()
- Fixed modal header structure with proper title positioning
- Updated button classes: btn-default → btn-outline-secondary
- Fixed form submit buttons to use btn-primary styling

**Navigation System:**
- Replaced basic menu with full-width dark navbar
- Added active state highlighting for current pages
- Integrated search functionality in header
- Added GitHub contribution button with proper icon styling
- Created "More" dropdown for secondary navigation items
- Added conditional "New Patch" link when CF is available

**Homepage Redesign:**
- Merged dashboard functionality into homepage for logged-in users
- Added experience-based help text for new users (30+ days)
- Removed separate /me/ route and template
- Added login prompt for non-authenticated users
- Integrated complete patch listing with filtering

**Typography & Consistency:**
- Updated all date ranges to use en dash (–) instead of hyphen (-)
- Added CommitFest dates to breadcrumbs on new patch page
- Fixed modal close button positioning and sizing

**Context & Configuration:**
- Added global context processor for navigation state
- Added CommitFest.get_current() method for nav logic
- Updated URL patterns and view logic

Closes #74 - "New Patch" button now visible in navigation
Improves overall UX with modern Bootstrap 5 components and
better information architecture.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>

Author: JelteF

.claude/settings.local.json

@@ -0,0 +1,9 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(make:*)",
+      "Bash(git add:*)"
+    ],
+    "deny": []
+  }
+}

CLAUDE.md

@@ -0,0 +1,97 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+This is a Django 4.2 application that manages commitfests for the PostgreSQL community. A commitfest is a collection of patches and reviews as part of the PostgreSQL development process. The application tracks patches, their status, reviews, and integrates with cfbot for automated testing.
+
+## Development Setup
+
+### Environment Setup
+```bash
+# Create virtual environment
+python3 -m venv env
+source env/bin/activate
+pip install -e '.[dev]'
+
+# Database setup
+createdb pgcommitfest
+cp pgcommitfest/local_settings_example.py pgcommitfest/local_settings.py
+
+# Run migrations
+./manage.py migrate
+
+# Load test data (optional)
+./manage.py loaddata auth_data.json
+./manage.py loaddata commitfest_data.json
+```
+
+### Development Commands
+
+Start development server:
+```bash
+./run_dev.py
+```
+
+Database management:
+```bash
+./manage.py migrate              # Run migrations
+./manage.py createsuperuser      # Create admin user
+./manage.py loaddata <file>      # Load fixtures
+```
+
+Code formatting and linting:
+```bash
+make format                      # Format code (ruff, biome, djhtml)
+make lint                        # Check code quality
+make lint-fix                    # Fix linting issues
+make lint-fix-unsafe            # Fix linting issues (unsafe)
+make fix                        # Format + lint-fix-unsafe
+```
+
+## Application Architecture
+
+### Core Django Apps
+- **pgcommitfest.commitfest**: Main application handling patches, commitfests, reviews
+- **pgcommitfest.mailqueue**: Email notification system
+- **pgcommitfest.userprofile**: User profile management and preferences
+
+### Key Models
+- **CommitFest**: Represents a commitfest period with status (Open/In Progress/Closed)
+- **Patch**: Individual patches with status tracking, reviews, and cfbot integration
+- **PatchOnCommitFest**: Links patches to specific commitfests
+- **MailThread**: Integration with PostgreSQL mailing list archives
+- **CfbotTask/CfbotBranch**: cfbot CI integration for automated testing
+
+### Authentication
+Custom authentication backend (`pgcommitfest.auth.AuthBackend`) integrates with PostgreSQL community authentication system.
+
+### Static Files and Media
+- Static files served from `/media/` (CSS, JS, images)
+- JavaScript: jQuery, Bootstrap, custom commitfest.js
+- CSS: Bootstrap with custom commitfest.css
+
+### Key Features
+- Patch status tracking (Waiting for Author, Needs Review, Ready for Committer, etc.)
+- Email notifications for patch updates
+- Integration with PostgreSQL mailing list archives
+- cfbot CI integration for automated testing
+- User subscription system for patches
+- Bulk email functionality for commitfest managers
+
+### Database
+PostgreSQL database with custom fields and constraints. Uses Django migrations for schema management.
+
+## Testing
+
+The application does not appear to have a formal test suite. Manual testing is done through:
+- Development server at http://localhost:8007
+- Admin interface at http://localhost:8007/admin
+- Test data loaded via fixtures
+
+## Deployment
+
+- Staging: https://commitfest-test.postgresql.org/ (auto-deploys from main branch)
+- Production: Auto-deploys from prod branch
+- Uses uWSGI for serving (configured in uwsgi_dev.ini)

benchmark.sql

@@ -0,0 +1,4 @@
+insert into commitfest_patch SELECT i as id, 'test' || i, '', '', now(), now(), now(), NULL, 1, NULL from generate_series(1010, 100000) i;
+insert into commitfest_patchoncommitfest SELECT i as id, now(), NULL, 1, 2, i from generate_series(1010, 100000) i;
+insert into commitfest_cfbotbranch SELECT i, i, 'cf/' || i, NULL, '', 'failed', now(), now() from generate_series(1010, 100000) i;
+insert into auth_user SELECT i, 'abc', NULL, FALSE, 'user' || i, 'first' || i, 'last' || i, 'user' || i || '@example.com', FALSE, TRUE, now() from generate_series(100, 1000) i;

media/commitfest/css/commitfest.css

@@ -141,3 +141,8 @@ a .badge {
 a:hover .badge {
     text-decoration: none !important;
 }
+
+/* Make GitHub icon white in dark navbar */
+.navbar-dark .github-logo {
+    filter: brightness(0) invert(1);
+}

media/commitfest/js/commitfest.js

@@ -52,7 +52,10 @@ function browseThreads(attachfunc, closefunc) {
     $("#attachModal").on("hidden.bs.modal", (e) => {
         if (closefunc) closefunc();
     });
-    $("#attachModal").modal();
+    const attachModal = new bootstrap.Modal(
+        document.getElementById("attachModal"),
+    );
+    attachModal.show();
     findLatestThreads();
 
     $("#doAttachThreadButton").unbind("click");
@@ -74,7 +77,10 @@ function browseThreads(attachfunc, closefunc) {
         $("#attachThreadSearchButton").addClass("disabled");
         $("#attachThreadButton").addClass("disabled");
         if (attachfunc(msgid, subject)) {
-            $("#attachModal").modal("hide");
+            const attachModal = bootstrap.Modal.getInstance(
+                document.getElementById("attachModal"),
+            );
+            attachModal.hide();
         }
         $("#attachThreadListWrap").removeClass("loading");
         $("#attachThreadSearchButton").removeClass("disabled");

pgcommitfest/commitfest/context_processors.py

@@ -0,0 +1,9 @@
+from .models import CommitFest
+
+
+def global_context(request):
+    """Add global context variables available in all templates."""
+    return {
+        "current_cf": CommitFest.get_current(),
+        "open_cf": CommitFest.get_open_regular(),
+    }

pgcommitfest/commitfest/models.py

@@ -63,7 +63,7 @@ def statusstring(self):
 
     @property
     def periodstring(self):
-        return "{0} - {1}".format(self.startdate, self.enddate)
+        return "{0} – {1}".format(self.startdate, self.enddate)
 
     @property
     def last_open_date(self):
@@ -277,6 +277,15 @@ def get_in_progress(cls):
     def get_open_regular(cls):
         return cls.objects.filter(status=CommitFest.STATUS_OPEN, draft=False).first()
 
+    @classmethod
+    def get_current(cls):
+        # First try to get in-progress CommitFest
+        current = cls.get_in_progress()
+        if current:
+            return current
+        # If no in-progress, fall back to open regular CommitFest
+        return cls.get_open_regular()
+
     def __str__(self):
         return self.name
 

pgcommitfest/commitfest/templates/base.html

@@ -14,32 +14,52 @@
  </head>
  <body>
   <!-- Main Navigation -->
-  <nav class="navbar navbar-expand-lg navbar-light bg-light mb-3">
+  <nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-3">
    <div class="container-fluid">
     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNavbar" aria-controls="mainNavbar" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
     </button>
     <div class="collapse navbar-collapse" id="mainNavbar">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
       <li class="nav-item">
-       <a class="nav-link" href="/me/">Dashboard</a>
+       <a class="nav-link{% if request.resolver_match.url_name == 'home' or request.path == '/' %} active{% endif %}" href="/">Home</a>
       </li>
+      {% if current_cf %}
+       <li class="nav-item">
+        <a class="nav-link{% if '/new/' in request.path %} active{% endif %}" href="/{{current_cf.id}}/new/">New Patch</a>
+       </li>
+      {% endif %}
+      {% if current_cf %}
+       <li class="nav-item">
+        <a class="nav-link{% if cf and cf.is_in_progress %} active{% endif %}" href="/current/">Current CF</a>
+       </li>
+      {% endif %}
       <li class="nav-item">
-       <a class="nav-link" href="/current/">Current CF</a>
+       <a class="nav-link{% if cf and cf.is_open_regular %} active{% endif %}" href="/open/">Open CF</a>
       </li>
       <li class="nav-item">
-       <a class="nav-link" href="/open/">Open CF</a>
+       <a class="nav-link{% if cf and cf.is_open_draft %} active{% endif %}" href="/draft/">Draft CF</a>
       </li>
-      <li class="nav-item">
-       <a class="nav-link" href="/activity/">Activity Log</a>
-      </li>
-      <li class="nav-item">
-       <a class="nav-link" href="/commitfest_history/">All CommitFests</a>
+      <li class="nav-item dropdown">
+       <a class="nav-link dropdown-toggle{% if '/activity/' in request.path or '/commitfest_history/' in request.path %} active{% endif %}" href="#" id="moreDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+        More
+       </a>
+       <ul class="dropdown-menu" aria-labelledby="moreDropdown">
+        <li><a class="dropdown-item" href="/activity/">Activity Log</a></li>
+        <li><a class="dropdown-item" href="/commitfest_history/">All CommitFests</a></li>
+       </ul>
       </li>
       <li class="nav-item">
-       <a class="nav-link" href="/help/">Help</a>
+       <a class="nav-link{% if '/help/' in request.path %} active{% endif %}" href="/help/">Help</a>
       </li>
      </ul>
+     <div class="d-flex gap-2 align-items-center">
+      <form method="GET" action="/search/" class="d-flex gap-1">
+       <input type="text" class="form-control" name="searchterm" placeholder="Email Message-ID or keywords" style="width: 250px;">
+       <button type="submit" class="btn btn-outline-light">Search</button>
+      </form>
+      <a class="btn btn-primary" href="https://github.com/postgres/pgcommitfest" target="_blank"><img class="github-logo" src="/media/commitfest/github-mark.svg"/> Contribute on GitHub</a>
+     </div>
     </div>
    </div>
   </nav>

pgcommitfest/commitfest/templates/base_form.html

@@ -31,7 +31,7 @@
   {%endfor%}
   <div class="form-group">
    <div class="col-lg-12">
-    <div class="control"><input type="submit" class="btn btn-outline-secondary" value="{{savebutton|default:"Save"}}"></div>
+    <div class="control"><input type="submit" class="btn btn-primary" value="{{savebutton|default:"Save"}}"></div>
    </div>
   </div>
  </form>
@@ -45,8 +45,8 @@
    <div class="modal-dialog modal-lg">
     <div class="modal-content">
      <div class="modal-header">
+      <h3 class="modal-title">Search user</h3>
       <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-      <h3>Search user</h3>
      </div>
      <div class="modal-body">
       <form class="d-flex gap-2" style="margin-bottom: 5px;">