vanta-admin 0.3.1__tar.gz → 0.5.0__tar.gz

{vanta_admin-0.3.1/vanta_admin.egg-info → vanta_admin-0.5.0}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: vanta-admin
-Version: 0.3.1
+Version: 0.5.0
 Summary: A sharp, dark, and portable Django admin theme forged for builders who want the admin to feel less default.
 Author: oli-dev0
 License-Expression: MIT
@@ -35,7 +35,9 @@ feels more deliberate in everyday use.
 ## What It Adds
 
 - A cleaner admin layout with a fixed sidebar that remembers how you left it.
+- A sidebar navigation filter that lets users quickly narrow large admin menus by app or model name.
 - Light and dark mode, using the same calm Vanta look across the admin.
+- A more settled light-mode palette with clearer search focus states and stronger changelist table headers.
 - Less visual noise on the main admin screens, login pages, cards, filters, and
   two-factor auth pages.
 - Denser dashboards, tables, filters, messages, and forms so admin work feels
@@ -47,8 +49,12 @@ feels more deliberate in everyday use.
 - Styled select controls for common admin dropdowns, while Django's native
   multi-select fields stay unchanged.
 - Built-in icons for common admin areas, models, and recent actions.
-- A cleaner account menu with theme controls, project links, password access,
-  logout, and a Vanta support link.
+- A cleaner account menu with display preferences, project links, password
+  access, logout, and a Vanta support link.
+- A 12-hour and 24-hour time-format preference for changelist date/time values,
+  stored in the browser for each admin user.
+- Shorter changelist date formatting that makes date-heavy tables easier to
+  scan.
 - A packaged favicon for the admin.
 - A mobile sidebar overlay that makes the admin easier to use on smaller
   screens.

{vanta_admin-0.3.1 → vanta_admin-0.5.0}/README.md

@@ -10,7 +10,9 @@ feels more deliberate in everyday use.
 ## What It Adds
 
 - A cleaner admin layout with a fixed sidebar that remembers how you left it.
+- A sidebar navigation filter that lets users quickly narrow large admin menus by app or model name.
 - Light and dark mode, using the same calm Vanta look across the admin.
+- A more settled light-mode palette with clearer search focus states and stronger changelist table headers.
 - Less visual noise on the main admin screens, login pages, cards, filters, and
   two-factor auth pages.
 - Denser dashboards, tables, filters, messages, and forms so admin work feels
@@ -22,8 +24,12 @@ feels more deliberate in everyday use.
 - Styled select controls for common admin dropdowns, while Django's native
   multi-select fields stay unchanged.
 - Built-in icons for common admin areas, models, and recent actions.
-- A cleaner account menu with theme controls, project links, password access,
-  logout, and a Vanta support link.
+- A cleaner account menu with display preferences, project links, password
+  access, logout, and a Vanta support link.
+- A 12-hour and 24-hour time-format preference for changelist date/time values,
+  stored in the browser for each admin user.
+- Shorter changelist date formatting that makes date-heavy tables easier to
+  scan.
 - A packaged favicon for the admin.
 - A mobile sidebar overlay that makes the admin easier to use on smaller
   screens.

{vanta_admin-0.3.1 → vanta_admin-0.5.0}/pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "vanta-admin"
-version = "0.3.1"
+version = "0.5.0"
 description = "A sharp, dark, and portable Django admin theme forged for builders who want the admin to feel less default."
 readme = "README.md"
 license = "MIT"

{vanta_admin-0.3.1 → vanta_admin-0.5.0}/vanta_admin/static/admin/css/theme.admin.css

@@ -112,11 +112,66 @@ body.admin-sidebar-collapsed .admin-sidebar__collapse-arrow {
   white-space: nowrap;
 }
 
+.admin-sidebar__filter {
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: 0.85rem 1rem 0;
+}
+
+.admin-sidebar__filter::before {
+  content: "";
+  position: absolute;
+  left: 1.72rem;
+  width: 0.95rem;
+  height: 0.95rem;
+  background: var(--accent);
+  mask: url("../img/search.svg") center / contain no-repeat;
+  -webkit-mask: url("../img/search.svg") center / contain no-repeat;
+  pointer-events: none;
+}
+
+#nav-sidebar .admin-sidebar__filter input[type="search"] {
+  width: 100%;
+  min-height: 2rem;
+  border: 0;
+  border-radius: 0.27rem;
+  background: var(--surface-muted);
+  color: var(--text);
+  padding: 0.32rem 0.7rem 0.32rem 2.65rem;
+  font-size: 0.82rem;
+  font-weight: 650;
+  outline: none;
+  transition:
+    background-color var(--admin-transition),
+    color var(--admin-transition);
+}
+
+#nav-sidebar .admin-sidebar__filter input[type="search"]::placeholder {
+  color: var(--admin-muted);
+  opacity: 0.82;
+}
+
+#nav-sidebar .admin-sidebar__filter input[type="search"]:focus,
+#nav-sidebar .admin-sidebar__filter input[type="search"]:focus-visible {
+  background: var(--surface);
+  box-shadow: none;
+}
+
+#nav-sidebar .admin-sidebar__filter input[type="search"]::-webkit-search-decoration {
+  appearance: none;
+}
+
+html[data-theme="light"] #nav-sidebar .admin-sidebar__filter input[type="search"]:focus,
+html[data-theme="light"] #nav-sidebar .admin-sidebar__filter input[type="search"]:focus-visible {
+  background: #e8f1fa;
+}
+
 .admin-sidebar__groups {
   flex: 1 1 auto;
   min-height: 0;
   overflow-y: auto;
-  padding: 0.9rem 1rem 8.25rem;
+  padding: 0.65rem 1rem 8.25rem;
   scrollbar-color: var(--border-strong) transparent;
   scrollbar-width: thin;
 }
@@ -332,8 +387,8 @@ body.admin-sidebar-collapsed .admin-sidebar__collapse-arrow {
   position: absolute;
   bottom: -0.2rem;
   left: 10.45rem;
-  width: 12.7rem;
-  padding: 0.72rem;
+  width: 16.6rem;
+  padding: 0.42rem 0.72rem;
   border: 1px solid var(--border-strong);
   border-radius: var(--radius-md);
   background: var(--surface-strong);
@@ -341,23 +396,71 @@ body.admin-sidebar-collapsed .admin-sidebar__collapse-arrow {
   color: var(--text);
 }
 
-.admin-sidebar__theme-controls {
+.admin-sidebar__account-section {
+  padding: 0.64rem 0;
+}
+
+.admin-sidebar__account-section + .admin-sidebar__account-section {
+  border-top: 1px solid var(--border);
+}
+
+.admin-sidebar__section-title {
+  margin: 0 0 0.24rem;
+  color: var(--subtle);
+  font-size: 0.72rem;
+  font-weight: 760;
+}
+
+.admin-sidebar__display-section {
+  display: grid;
+  gap: 0.16rem;
+}
+
+.admin-sidebar__display-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 0.28rem;
+  min-height: 2.15rem;
+}
+
+.admin-sidebar__display-label {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+  gap: 0.18rem;
+  color: var(--text);
+  font-size: 0.82rem;
+  font-weight: 680;
+}
+
+.admin-sidebar__display-label svg {
+  width: 0.95rem;
+  height: 0.95rem;
+  flex: 0 0 auto;
+  color: var(--muted);
+  transform: translateX(-0.08rem);
+}
+
+.admin-sidebar__theme-controls,
+.admin-sidebar__time-controls {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 0.32rem;
-  padding: 0.25rem;
-  margin-bottom: 0.64rem;
+  gap: 0.24rem;
+  padding: 0.18rem;
+  width: 4.75rem;
   border-radius: 0.34rem;
   background: var(--surface-muted);
 }
 
-.admin-sidebar__theme-button {
+.admin-sidebar__theme-button,
+.admin-sidebar__time-button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 0.42rem;
-  min-height: 2.05rem;
-  padding: 0 0.58rem;
+  min-height: 1.62rem;
+  padding: 0 0.38rem;
   border: 0;
   border-radius: 0.27rem;
   background: transparent;
@@ -365,15 +468,21 @@ body.admin-sidebar-collapsed .admin-sidebar__collapse-arrow {
   cursor: pointer;
   font-size: 0.82rem;
   font-weight: 720;
+  white-space: nowrap;
+}
+
+.admin-sidebar__time-button {
+  letter-spacing: 0;
 }
 
 .admin-sidebar__theme-button svg {
-  width: 0.95rem;
-  height: 0.95rem;
+  width: 0.92rem;
+  height: 0.92rem;
 }
 
 html[data-theme="dark"] .admin-sidebar__theme-button--dark,
-html[data-theme="light"] .admin-sidebar__theme-button--light {
+html[data-theme="light"] .admin-sidebar__theme-button--light,
+.admin-sidebar__time-button[aria-pressed="true"] {
   color: var(--accent-strong);
   background: var(--accent-soft);
 }
@@ -382,13 +491,18 @@ html[data-theme="light"] .admin-sidebar__theme-button--light {
   background: var(--accent-softer);
 }
 
+html[data-theme="light"] .admin-sidebar__time-button[aria-pressed="true"] {
+  background: var(--accent-softer);
+}
+
 .admin-sidebar__account-links {
   display: grid;
   gap: 0.1rem;
 }
 
 .admin-sidebar__account-links a,
-.admin-sidebar__account-links button {
+.admin-sidebar__account-links button,
+.admin-sidebar__logout-section button {
   display: flex;
   align-items: center;
   gap: 0.68rem;
@@ -409,7 +523,8 @@ html[data-theme="light"] .admin-sidebar__theme-button--light {
     transform 130ms var(--ease);
 }
 
-.admin-sidebar__account-links svg {
+.admin-sidebar__account-links svg,
+.admin-sidebar__logout-section svg {
   width: 1rem;
   height: 1rem;
   color: var(--muted);
@@ -486,13 +601,15 @@ html[data-theme="light"] .admin-sidebar__theme-button--light {
 .admin-sidebar__account-links .admin-sidebar__external-icon {
   width: 0.86rem;
   height: 0.86rem;
-  margin-left: auto;
+  margin-left: 0.58rem;
 }
 
 .admin-sidebar__account-links a:hover,
 .admin-sidebar__account-links a:focus,
 .admin-sidebar__account-links button:hover,
-.admin-sidebar__account-links button:focus {
+.admin-sidebar__account-links button:focus,
+.admin-sidebar__logout-section button:hover,
+.admin-sidebar__logout-section button:focus {
   color: var(--accent-strong);
   background: var(--accent-softer);
   transform: translateX(1px);
@@ -501,17 +618,12 @@ html[data-theme="light"] .admin-sidebar__theme-button--light {
 .admin-sidebar__account-links a:hover svg,
 .admin-sidebar__account-links a:focus svg,
 .admin-sidebar__account-links button:hover svg,
-.admin-sidebar__account-links button:focus svg {
+.admin-sidebar__account-links button:focus svg,
+.admin-sidebar__logout-section button:hover svg,
+.admin-sidebar__logout-section button:focus svg {
   color: var(--accent);
 }
 
-.admin-sidebar__account-divider {
-  display: block;
-  height: 1px;
-  margin: 0.42rem 0.24rem;
-  background: var(--border);
-}
-
 @keyframes donation-steam {
   0%,
   100% {
@@ -534,6 +646,7 @@ body.admin-sidebar-collapsed .admin-sidebar {
 }
 
 body.admin-sidebar-collapsed .admin-sidebar__brand,
+body.admin-sidebar-collapsed .admin-sidebar__filter,
 body.admin-sidebar-collapsed .admin-sidebar__groups,
 body.admin-sidebar-collapsed .admin-sidebar__account {
   display: none;
@@ -1075,6 +1188,11 @@ select,
   max-width: 16.8rem;
 }
 
+html[data-theme="light"] #changelist-search input[type="text"]:focus,
+html[data-theme="light"] #changelist input[type="search"]:focus {
+  background: #e8f1fa;
+}
+
 #changelist .actions select {
   appearance: none;
   min-height: 1.5rem;
@@ -1519,6 +1637,10 @@ input[type="checkbox"]:focus-visible {
   vertical-align: middle;
 }
 
+html[data-theme="light"] #changelist table thead th {
+  background: #d5e3f1;
+}
+
 #changelist table thead th:first-child {
   border-radius: var(--admin-radius-sm) 0 0 var(--admin-radius-sm);
 }
@@ -1563,6 +1685,11 @@ input[type="checkbox"]:focus-visible {
   transform: translateY(-2px);
 }
 
+html[data-theme="light"] #changelist table thead th a:hover,
+html[data-theme="light"] #changelist table thead th a:focus {
+  background: #c7d9eb;
+}
+
 #changelist table thead th a:focus-visible {
   outline: 2px solid var(--admin-accent);
   outline-offset: 2px;
@@ -1581,6 +1708,11 @@ input[type="checkbox"]:focus-visible {
   vertical-align: middle;
 }
 
+html[data-theme="light"] #changelist table thead th.sorted .text,
+html[data-theme="light"] #changelist table thead th.sorted .sortoptions {
+  background: #c7d9eb !important;
+}
+
 #changelist table thead th.sorted .text {
   float: none !important;
   padding: 0 !important;

{vanta_admin-0.3.1 → vanta_admin-0.5.0}/vanta_admin/static/admin/css/theme.responsive.css

@@ -182,7 +182,7 @@
     right: 0;
     left: auto;
     bottom: calc(100% + 0.55rem);
-    width: min(12.7rem, calc(100vw - 2.4rem));
+    width: min(16.6rem, calc(100vw - 2.4rem));
   }
 
   .admin-model-row {

{vanta_admin-0.3.1 → vanta_admin-0.5.0}/vanta_admin/static/admin/css/theme.tokens.css

@@ -93,15 +93,15 @@ body[data-theme="light"],
 body.theme-light,
 .theme-light {
   color-scheme: light;
-  --page-bg: #ffffff;
-  --shell-bg: #ffffff;
-  --sidebar-bg: #f6faff;
-  --surface: #f6faff;
-  --surface-strong: #ffffff;
-  --surface-muted: #f1f7ff;
-  --surface-hover: #eaf4ff;
-  --row-bg: #ffffff;
-  --row-bg-alt: #f4f9ff;
+  --page-bg: #f3f7fb;
+  --shell-bg: #f3f7fb;
+  --sidebar-bg: #eef5fb;
+  --surface: #f7fbff;
+  --surface-strong: #fbfdff;
+  --surface-muted: #dfeaf5;
+  --surface-hover: #e4f0fb;
+  --row-bg: #fbfdff;
+  --row-bg-alt: #f2f8fe;
   --border: #d7e6f4;
   --border-strong: #bcd3e8;
   --text: #102033;
@@ -114,12 +114,12 @@ body.theme-light,
   --accent-softer: color-mix(in srgb, var(--accent) 8%, transparent);
   --shadow: none;
   --shadow-soft: none;
-  --input-bg: #ffffff;
-  --admin-bg: #ffffff;
-  --admin-sidebar-bg: #f6faff;
-  --admin-surface: #ffffff;
-  --admin-surface-muted: #f6faff;
-  --admin-surface-raised: #f1f7ff;
+  --input-bg: #dfeaf5;
+  --admin-bg: #f3f7fb;
+  --admin-sidebar-bg: #eef5fb;
+  --admin-surface: #fbfdff;
+  --admin-surface-muted: #dfeaf5;
+  --admin-surface-raised: #f7fbff;
   --admin-text: #102033;
   --admin-muted: #4f647a;
   --admin-muted-soft: #71879d;
@@ -146,7 +146,7 @@ body.theme-light,
   --admin-warning-bg: color-mix(in srgb, var(--admin-warning) 14%, transparent);
   --admin-link: color-mix(in srgb, var(--admin-accent) 78%, var(--admin-muted));
   --admin-link-strong: color-mix(in srgb, var(--admin-accent) 86%, var(--admin-text));
-  --admin-nav-item-active-bg: #eaf4ff;
+  --admin-nav-item-active-bg: #dbe9f7;
   --admin-nav-item-active-border: color-mix(in srgb, var(--admin-accent) 34%, var(--admin-border));
   --admin-button-text: #ffffff;
   --admin-shadow-soft: none;

{vanta_admin-0.3.1 → vanta_admin-0.5.0}/vanta_admin/static/admin/js/sidebar.js

@@ -10,8 +10,10 @@
     const collapseButton = document.getElementById('admin-sidebar-collapse');
     const menuButton = document.getElementById('admin-sidebar-menu-button');
     const accountDetails = document.querySelector('.admin-sidebar__account');
+    const navFilter = document.getElementById('admin-nav-filter');
     const mobileQuery = window.matchMedia('(max-width: 1024px)');
     const navSections = Array.from(document.querySelectorAll('[data-admin-nav-section]'));
+    let isFilteringNavigation = false;
 
     function setCollapsed(isCollapsed, shouldPersist) {
         body.classList.toggle('admin-sidebar-collapsed', isCollapsed);
@@ -75,6 +77,10 @@
     }
 
     function persistOpenSections() {
+        if (isFilteringNavigation) {
+            return;
+        }
+
         const openSections = navSections
             .filter(isSectionOpen)
             .map(getSectionKey)
@@ -83,6 +89,60 @@
         localStorage.setItem(navSectionsStateKey, JSON.stringify(openSections));
     }
 
+    function normalizeFilterValue(value) {
+        return value.trim().toLowerCase();
+    }
+
+    function getNavItemText(element) {
+        return element.textContent.trim().toLowerCase();
+    }
+
+    function filterNavigation() {
+        if (!navFilter) {
+            return;
+        }
+
+        const query = normalizeFilterValue(navFilter.value);
+        const hasQuery = query.length > 0;
+
+        isFilteringNavigation = true;
+
+        navSections.forEach((section) => {
+            const sectionTitle = section.querySelector('.admin-sidebar__group-title span');
+            const modelItems = Array.from(section.querySelectorAll('.admin-sidebar__model'));
+            const matchesSection = sectionTitle && getNavItemText(sectionTitle).includes(query);
+            let hasVisibleModel = false;
+
+            modelItems.forEach((item) => {
+                const matchesModel = getNavItemText(item).includes(query);
+                const isVisible = !hasQuery || matchesSection || matchesModel;
+
+                item.hidden = !isVisible;
+                hasVisibleModel = hasVisibleModel || isVisible;
+            });
+
+            section.hidden = hasQuery && !matchesSection && !hasVisibleModel;
+
+            if (hasQuery && !section.hidden) {
+                section.open = true;
+            }
+
+            syncSectionAria(section);
+        });
+
+        if (!hasQuery) {
+            applyStoredOpenSections();
+            navSections.forEach((section) => {
+                section.hidden = false;
+                section.querySelectorAll('.admin-sidebar__model').forEach((item) => {
+                    item.hidden = false;
+                });
+            });
+        }
+
+        isFilteringNavigation = false;
+    }
+
     function applyStoredOpenSections() {
         const storedOpenSections = getStoredOpenSections();
 
@@ -134,6 +194,10 @@
         });
     });
 
+    if (navFilter) {
+        navFilter.addEventListener('input', filterNavigation);
+    }
+
     document.addEventListener('keydown', (event) => {
         if (event.key === 'Escape') {
             setMobileOpen(false);

vanta_admin-0.5.0/vanta_admin/static/admin/js/vanta-theme.js

@@ -0,0 +1,128 @@
+'use strict';
+
+{
+    const validThemeValues = new Set(['light', 'dark']);
+    const validTimeFormatValues = new Set(['12', '24']);
+    const timeFormatStorageKey = 'django.admin.theme.timeFormat';
+    const root = document.documentElement;
+    const themeButtons = document.querySelectorAll('[data-admin-theme-value]');
+    const timeFormatButtons = document.querySelectorAll('[data-admin-time-format-value]');
+
+    function updateThemeButtons(theme) {
+        themeButtons.forEach((button) => {
+            button.setAttribute('aria-pressed', String(button.dataset.adminThemeValue === theme));
+        });
+    }
+
+    function applyTheme(theme) {
+        if (!validThemeValues.has(theme)) {
+            return;
+        }
+
+        root.dataset.theme = theme;
+        localStorage.setItem('theme', theme);
+        updateThemeButtons(theme);
+    }
+
+    function updateTimeFormatButtons(timeFormat) {
+        timeFormatButtons.forEach((button) => {
+            button.setAttribute('aria-pressed', String(button.dataset.adminTimeFormatValue === timeFormat));
+        });
+    }
+
+    function formatHour(hour, meridiem) {
+        let formattedHour = Number(hour);
+
+        if (meridiem === 'p.m.' && formattedHour !== 12) {
+            formattedHour += 12;
+        } else if (meridiem === 'a.m.' && formattedHour === 12) {
+            formattedHour = 0;
+        }
+
+        return String(formattedHour).padStart(2, '0');
+    }
+
+    function abbreviateMonth(text) {
+        return text.replace(
+            /\b(January|February|March|April|May|June|July|August|September|October|November|December)\b/g,
+            (month) => month.slice(0, 3),
+        );
+    }
+
+    function formatDateOrder(text) {
+        return text.replace(
+            /\b(Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec) (\d{1,2}), (\d{4}), ([^,]+)/g,
+            (match, month, day, year, time) => `${day} ${month} ${year} ${time}`,
+        );
+    }
+
+    function formatTableDateText(text) {
+        return formatDateOrder(abbreviateMonth(text));
+    }
+
+    function formatTableTimeText(text) {
+        const formattedMinuteTime = text.replace(
+            /(\b[A-Z][a-z]+ \d{1,2}, \d{4}, )(\d{1,2}):(\d{2}) (a\.m\.|p\.m\.)(?=$|[^\w])/g,
+            (match, datePrefix, hour, minute, meridiem) => `${datePrefix}${formatHour(hour, meridiem)}:${minute}`,
+        );
+
+        const formattedTime = formattedMinuteTime.replace(
+            /(\b[A-Z][a-z]+ \d{1,2}, \d{4}, )(\d{1,2}) (a\.m\.|p\.m\.)(?=$|[^\w])/g,
+            (match, datePrefix, hour, meridiem) => `${datePrefix}${Number(formatHour(hour, meridiem))}h`,
+        );
+
+        return formatTableDateText(formattedTime);
+    }
+
+    function updateTableTimeFormat(timeFormat) {
+        document.querySelectorAll('#changelist table tbody th, #changelist table tbody td').forEach((cell) => {
+            if (cell.childElementCount !== 0) {
+                return;
+            }
+
+            if (!cell.dataset.adminOriginalTimeText) {
+                cell.dataset.adminOriginalTimeText = cell.textContent;
+            }
+
+            const originalText = cell.dataset.adminOriginalTimeText;
+            const formattedText = timeFormat === '24' ? formatTableTimeText(originalText) : formatTableDateText(originalText);
+
+            cell.textContent = formattedText;
+        });
+    }
+
+    function applyTimeFormat(timeFormat) {
+        if (!validTimeFormatValues.has(timeFormat)) {
+            return;
+        }
+
+        localStorage.setItem(timeFormatStorageKey, timeFormat);
+        updateTimeFormatButtons(timeFormat);
+        updateTableTimeFormat(timeFormat);
+    }
+
+    const storedTheme = localStorage.getItem('theme');
+    if (validThemeValues.has(storedTheme)) {
+        root.dataset.theme = storedTheme;
+        updateThemeButtons(storedTheme);
+    } else {
+        updateThemeButtons(root.dataset.theme);
+    }
+
+    themeButtons.forEach((button) => {
+        button.addEventListener('click', () => {
+            applyTheme(button.dataset.adminThemeValue);
+        });
+    });
+
+    const storedTimeFormat = localStorage.getItem(timeFormatStorageKey);
+    const initialTimeFormat = validTimeFormatValues.has(storedTimeFormat) ? storedTimeFormat : '12';
+    updateTimeFormatButtons(initialTimeFormat);
+    updateTableTimeFormat(initialTimeFormat);
+
+    timeFormatButtons.forEach((button) => {
+        button.addEventListener('click', () => {
+            applyTimeFormat(button.dataset.adminTimeFormatValue);
+        });
+    });
+}

{vanta_admin-0.3.1 → vanta_admin-0.5.0}/vanta_admin/templates/admin/nav_sidebar.html

@@ -52,6 +52,19 @@
     </div>
   </div>
 
+  {% if available_apps %}
+    <div class="admin-sidebar__filter">
+      <label class="visually-hidden" for="admin-nav-filter">Filter navigation items</label>
+      <input
+        type="search"
+        id="admin-nav-filter"
+        autocomplete="off"
+        spellcheck="false"
+        placeholder="Start typing to filter..."
+      >
+    </div>
+  {% endif %}
+
   <div class="admin-sidebar__groups">
     {% if available_apps %}
       {% grouped_admin_nav_apps available_apps as nav_apps %}
@@ -103,18 +116,41 @@
       </summary>
 
       <div class="admin-sidebar__account-menu">
-        <div class="admin-sidebar__theme-controls" aria-label="Theme controls">
-          <button class="admin-sidebar__theme-button admin-sidebar__theme-button--light" type="button" data-admin-theme-value="light">
-            <svg aria-hidden="true"><use href="#admin-icon-sun"></use></svg>
-            <span>Light</span>
-          </button>
-          <button class="admin-sidebar__theme-button admin-sidebar__theme-button--dark" type="button" data-admin-theme-value="dark">
-            <svg aria-hidden="true"><use href="#admin-icon-moon"></use></svg>
-            <span>Dark</span>
-          </button>
+        <div class="admin-sidebar__account-section admin-sidebar__display-section">
+          <div class="admin-sidebar__section-title">Display</div>
+          <div class="admin-sidebar__display-row">
+            <span class="admin-sidebar__display-label">
+              <svg aria-hidden="true"><use href="#admin-icon-sun"></use></svg>
+              <span>Theme</span>
+            </span>
+            <span class="admin-sidebar__theme-controls" aria-label="Theme controls">
+              <button class="admin-sidebar__theme-button admin-sidebar__theme-button--light" type="button" data-admin-theme-value="light">
+                <svg aria-hidden="true"><use href="#admin-icon-sun"></use></svg>
+                <span class="visually-hidden">Light</span>
+              </button>
+              <button class="admin-sidebar__theme-button admin-sidebar__theme-button--dark" type="button" data-admin-theme-value="dark">
+                <svg aria-hidden="true"><use href="#admin-icon-moon"></use></svg>
+                <span class="visually-hidden">Dark</span>
+              </button>
+            </span>
+          </div>
+          <div class="admin-sidebar__display-row">
+            <span class="admin-sidebar__display-label">
+              <svg aria-hidden="true"><use href="#admin-icon-clock"></use></svg>
+              <span>Time format</span>
+            </span>
+            <span class="admin-sidebar__time-controls" aria-label="Time format controls">
+              <button class="admin-sidebar__time-button admin-sidebar__time-button--12" type="button" data-admin-time-format-value="12">
+                <span>12h</span>
+              </button>
+              <button class="admin-sidebar__time-button admin-sidebar__time-button--24" type="button" data-admin-time-format-value="24">
+                <span>24h</span>
+              </button>
+            </span>
+          </div>
         </div>
 
-        <div class="admin-sidebar__account-links">
+        <div class="admin-sidebar__account-section admin-sidebar__account-links">
           {% if site_url %}
             <a href="{{ site_url }}">
               <svg aria-hidden="true"><use href="#admin-icon-external"></use></svg>
@@ -134,7 +170,9 @@
             <span class="donation-button__label">Buy me a coffee</span>
             <svg class="admin-sidebar__external-icon" aria-hidden="true"><use href="#admin-icon-external"></use></svg>
           </a>
-          <span class="admin-sidebar__account-divider" aria-hidden="true"></span>
+        </div>
+
+        <div class="admin-sidebar__account-section admin-sidebar__logout-section">
           <form method="post" action="{% url 'admin:logout' %}">
             {% csrf_token %}
             <button type="submit">

{vanta_admin-0.3.1 → vanta_admin-0.5.0/vanta_admin.egg-info}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: vanta-admin
-Version: 0.3.1
+Version: 0.5.0
 Summary: A sharp, dark, and portable Django admin theme forged for builders who want the admin to feel less default.
 Author: oli-dev0
 License-Expression: MIT
@@ -35,7 +35,9 @@ feels more deliberate in everyday use.
 ## What It Adds
 
 - A cleaner admin layout with a fixed sidebar that remembers how you left it.
+- A sidebar navigation filter that lets users quickly narrow large admin menus by app or model name.
 - Light and dark mode, using the same calm Vanta look across the admin.
+- A more settled light-mode palette with clearer search focus states and stronger changelist table headers.
 - Less visual noise on the main admin screens, login pages, cards, filters, and
   two-factor auth pages.
 - Denser dashboards, tables, filters, messages, and forms so admin work feels
@@ -47,8 +49,12 @@ feels more deliberate in everyday use.
 - Styled select controls for common admin dropdowns, while Django's native
   multi-select fields stay unchanged.
 - Built-in icons for common admin areas, models, and recent actions.
-- A cleaner account menu with theme controls, project links, password access,
-  logout, and a Vanta support link.
+- A cleaner account menu with display preferences, project links, password
+  access, logout, and a Vanta support link.
+- A 12-hour and 24-hour time-format preference for changelist date/time values,
+  stored in the browser for each admin user.
+- Shorter changelist date formatting that makes date-heavy tables easier to
+  scan.
 - A packaged favicon for the admin.
 - A mobile sidebar overlay that makes the admin easier to use on smaller
   screens.

vanta_admin-0.3.1/vanta_admin/static/admin/js/vanta-theme.js

@@ -1,37 +0,0 @@
-'use strict';
-
-{
-    const validThemeValues = new Set(['light', 'dark']);
-    const root = document.documentElement;
-    const themeButtons = document.querySelectorAll('[data-admin-theme-value]');
-
-    function updateThemeButtons(theme) {
-        themeButtons.forEach((button) => {
-            button.setAttribute('aria-pressed', String(button.dataset.adminThemeValue === theme));
-        });
-    }
-
-    function applyTheme(theme) {
-        if (!validThemeValues.has(theme)) {
-            return;
-        }
-
-        root.dataset.theme = theme;
-        localStorage.setItem('theme', theme);
-        updateThemeButtons(theme);
-    }
-
-    const storedTheme = localStorage.getItem('theme');
-    if (validThemeValues.has(storedTheme)) {
-        root.dataset.theme = storedTheme;
-        updateThemeButtons(storedTheme);
-    } else {
-        updateThemeButtons(root.dataset.theme);
-    }
-
-    themeButtons.forEach((button) => {
-        button.addEventListener('click', () => {
-            applyTheme(button.dataset.adminThemeValue);
-        });
-    });
-}