release: v0.20.1 — sidebar redesign, Inter font, admin pagination, design polish

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: olivierlambert

CHANGELOG.md

@@ -86,6 +86,26 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/), and this
 
 ## [Unreleased]
 
+## [0.20.1] - 2026-03-13
+
+### Changed
+
+- **Sidebar redesign** — calrs logo + two-tone brand name ("cal" blue, "rs" orange) at top linking to dashboard; user profile moved to bottom in a compact row with inline sign-out icon; clicking name/avatar goes to settings
+- **Inter font** — loaded from Google Fonts for consistent typography across platforms
+- **Admin pagination** — users and groups lists paginated (5 per page) with prev/next navigation
+- **Admin search fields** — pill-shaped rounded inputs with accent focus ring
+- **Stat card watermark icons** — faint centered emoji backgrounds (4% opacity) for visual personality
+- **Welcome card accent** — 2px blue top border on the dashboard welcome card
+- **Button gradient** — primary buttons use a subtle diagonal gradient instead of flat color
+- **Pressed states** — buttons scale down (0.97×) on click for tactile feedback
+- **Brand logo route** — `/brand-logo` serves the calrs logo (compiled into the binary)
+
+### Fixed
+
+- **Page flash removed** — removed the fade-in animation that caused a white flash on navigation
+- **Footer overlap** — "Powered by calrs" no longer renders under the sidebar on dashboard pages; hidden on authenticated pages, shown only on public pages
+- **Footer link** — "Powered by calrs" now links to cal.rs website instead of GitHub repo
+
 ## [0.20.0] - 2026-03-13
 
 ### Added

Cargo.lock

@@ -1,6 +1,6 @@
 [package]
 name = "calrs"
-version = "0.20.0"
+version = "0.20.1"
 edition = "2021"
 description = "A fast, self-hostable scheduling platform. Like Cal.com, but written in Rust."
 license = "AGPL-3.0"

Cargo.toml

@@ -460,6 +460,7 @@ pub fn create_router(pool: SqlitePool, data_dir: PathBuf, secret_key: [u8; 32])
         )
         // Serve logo
         .route("/logo", get(serve_logo))
+        .route("/brand-logo", get(serve_brand_logo))
         // Group public routes (before the catch-all)
         .route("/g/{group_slug}", get(group_profile))
         .route("/g/{group_slug}/{slug}", get(show_group_slots))
@@ -6689,6 +6690,17 @@ async fn serve_logo(State(state): State<Arc<AppState>>) -> impl IntoResponse {
     }
 }
 
+async fn serve_brand_logo() -> impl IntoResponse {
+    static BRAND_LOGO: &[u8] = include_bytes!("../../assets/calrs.png");
+    axum::response::Response::builder()
+        .status(200)
+        .header("Content-Type", "image/png")
+        .header("Cache-Control", "public, max-age=86400")
+        .body(axum::body::Body::from(BRAND_LOGO))
+        .unwrap_or_else(|_| axum::response::Response::new(axum::body::Body::empty()))
+        .into_response()
+}
+
 async fn admin_upload_logo(
     State(state): State<Arc<AppState>>,
     _admin: crate::auth::AdminUser,

src/web/mod.rs

@@ -31,7 +31,7 @@ <h2>Company logo</h2>
 <div class="card">
   <h2>Users ({{ user_count }})</h2>
   <div style="margin-bottom: 1rem;">
-    <input type="text" id="user-search" placeholder="Filter by name or email…" oninput="filterUsers()" style="width: 100%; max-width: 360px;">
+    <input type="text" id="user-search" placeholder="Filter by name or email…" oninput="filterUsers()" style="width: 100%; max-width: 360px; padding: 0.5rem 0.875rem; border: 1px solid var(--border); border-radius: 9999px; font-size: 0.875rem; font-family: inherit; background: var(--surface); color: var(--text); outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease;" onfocus="this.style.borderColor='var(--accent)';this.style.boxShadow='0 0 0 3px var(--accent-subtle)'" onblur="this.style.borderColor='var(--border)';this.style.boxShadow='none'">
   </div>
   {% if users %}
   <div id="user-list" style="display: flex; flex-direction: column; gap: 0.75rem;">
@@ -75,6 +75,7 @@ <h2>Users ({{ user_count }})</h2>
     </div>
     {% endfor %}
   </div>
+  <div id="user-pagination" style="display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 1rem;"></div>
   <div id="user-no-results" style="display: none; padding: 1rem; color: var(--text-muted); font-size: 0.875rem;">No users match your filter.</div>
   {% else %}
   <p class="empty" style="padding: 1rem;">No users yet.</p>
@@ -86,7 +87,7 @@ <h2>Users ({{ user_count }})</h2>
   <h2>Groups ({{ group_count }})</h2>
   {% if groups %}
   <div style="margin-bottom: 1rem;">
-    <input type="text" id="group-search" placeholder="Filter by group name…" oninput="filterGroups()" style="width: 100%; max-width: 360px;">
+    <input type="text" id="group-search" placeholder="Filter by group name…" oninput="filterGroups()" style="width: 100%; max-width: 360px; padding: 0.5rem 0.875rem; border: 1px solid var(--border); border-radius: 9999px; font-size: 0.875rem; font-family: inherit; background: var(--surface); color: var(--text); outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease;" onfocus="this.style.borderColor='var(--accent)';this.style.boxShadow='0 0 0 3px var(--accent-subtle)'" onblur="this.style.borderColor='var(--border)';this.style.boxShadow='none'">
   </div>
   <div style="overflow-x: auto;">
     <table style="width: 100%; border-collapse: collapse; font-size: 0.875rem;">
@@ -106,6 +107,7 @@ <h2>Groups ({{ group_count }})</h2>
       </tbody>
     </table>
   </div>
+  <div id="group-pagination" style="display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 1rem;"></div>
   <div id="group-no-results" style="display: none; padding: 1rem; color: var(--text-muted); font-size: 0.875rem;">No groups match your filter.</div>
   {% else %}
   <p class="empty" style="padding: 1rem; color: var(--text-muted); font-size: 0.875rem;">No groups synced yet. Groups are automatically synced from your OIDC provider.</p>
@@ -183,29 +185,102 @@ <h2>SMTP settings</h2>
 </div>
 
 <script>
-function filterUsers() {
-  const q = document.getElementById('user-search').value.toLowerCase();
-  const items = document.querySelectorAll('.user-item');
-  let visible = 0;
-  items.forEach(el => {
-    const match = !q || el.dataset.name.includes(q) || el.dataset.email.includes(q);
-    el.style.display = match ? '' : 'none';
-    if (match) visible++;
-  });
-  const noResults = document.getElementById('user-no-results');
-  if (noResults) noResults.style.display = (items.length > 0 && visible === 0) ? '' : 'none';
-}
-function filterGroups() {
-  const q = document.getElementById('group-search').value.toLowerCase();
-  const items = document.querySelectorAll('.group-item');
-  let visible = 0;
-  items.forEach(el => {
-    const match = !q || el.dataset.name.includes(q);
-    el.style.display = match ? '' : 'none';
-    if (match) visible++;
-  });
-  const noResults = document.getElementById('group-no-results');
-  if (noResults) noResults.style.display = (items.length > 0 && visible === 0) ? '' : 'none';
-}
+(function() {
+  var USER_PAGE_SIZE = 5;
+  var userPage = 1;
+
+  function getFilteredUsers() {
+    var q = document.getElementById('user-search').value.toLowerCase();
+    var items = document.querySelectorAll('.user-item');
+    var filtered = [];
+    items.forEach(function(el) {
+      if (!q || el.dataset.name.indexOf(q) !== -1 || el.dataset.email.indexOf(q) !== -1) {
+        filtered.push(el);
+      }
+    });
+    return filtered;
+  }
+
+  function renderUserPage() {
+    var items = document.querySelectorAll('.user-item');
+    var filtered = getFilteredUsers();
+    var totalPages = Math.max(1, Math.ceil(filtered.length / USER_PAGE_SIZE));
+    if (userPage > totalPages) userPage = totalPages;
+    var start = (userPage - 1) * USER_PAGE_SIZE;
+    var end = start + USER_PAGE_SIZE;
+
+    items.forEach(function(el) { el.style.display = 'none'; });
+    filtered.forEach(function(el, i) {
+      el.style.display = (i >= start && i < end) ? '' : 'none';
+    });
+
+    var noResults = document.getElementById('user-no-results');
+    if (noResults) noResults.style.display = (items.length > 0 && filtered.length === 0) ? '' : 'none';
+
+    var pag = document.getElementById('user-pagination');
+    if (!pag) return;
+    if (totalPages <= 1) { pag.innerHTML = ''; return; }
+
+    var html = '<span style="font-size:0.8rem;color:var(--text-muted);">Page ' + userPage + ' of ' + totalPages + '</span> ';
+    if (userPage > 1) html += '<button onclick="window._userPageNav(-1)" class="slot-btn" style="font-size:0.8rem;cursor:pointer;padding:0.3rem 0.6rem;">&larr;</button> ';
+    if (userPage < totalPages) html += '<button onclick="window._userPageNav(1)" class="slot-btn" style="font-size:0.8rem;cursor:pointer;padding:0.3rem 0.6rem;">&rarr;</button>';
+    pag.innerHTML = html;
+  }
+
+  window._userPageNav = function(dir) { userPage += dir; renderUserPage(); };
+
+  window.filterUsers = function() { userPage = 1; renderUserPage(); };
+
+  // Initial render
+  if (document.getElementById('user-list')) renderUserPage();
+})();
+
+(function() {
+  var GROUP_PAGE_SIZE = 5;
+  var groupPage = 1;
+
+  function getFilteredGroups() {
+    var q = document.getElementById('group-search').value.toLowerCase();
+    var items = document.querySelectorAll('.group-item');
+    var filtered = [];
+    items.forEach(function(el) {
+      if (!q || el.dataset.name.indexOf(q) !== -1) {
+        filtered.push(el);
+      }
+    });
+    return filtered;
+  }
+
+  function renderGroupPage() {
+    var items = document.querySelectorAll('.group-item');
+    var filtered = getFilteredGroups();
+    var totalPages = Math.max(1, Math.ceil(filtered.length / GROUP_PAGE_SIZE));
+    if (groupPage > totalPages) groupPage = totalPages;
+    var start = (groupPage - 1) * GROUP_PAGE_SIZE;
+    var end = start + GROUP_PAGE_SIZE;
+
+    items.forEach(function(el) { el.style.display = 'none'; });
+    filtered.forEach(function(el, i) {
+      el.style.display = (i >= start && i < end) ? '' : 'none';
+    });
+
+    var noResults = document.getElementById('group-no-results');
+    if (noResults) noResults.style.display = (items.length > 0 && filtered.length === 0) ? '' : 'none';
+
+    var pag = document.getElementById('group-pagination');
+    if (!pag) return;
+    if (totalPages <= 1) { pag.innerHTML = ''; return; }
+
+    var html = '<span style="font-size:0.8rem;color:var(--text-muted);">Page ' + groupPage + ' of ' + totalPages + '</span> ';
+    if (groupPage > 1) html += '<button onclick="window._groupPageNav(-1)" class="slot-btn" style="font-size:0.8rem;cursor:pointer;padding:0.3rem 0.6rem;">&larr;</button> ';
+    if (groupPage < totalPages) html += '<button onclick="window._groupPageNav(1)" class="slot-btn" style="font-size:0.8rem;cursor:pointer;padding:0.3rem 0.6rem;">&rarr;</button>';
+    pag.innerHTML = html;
+  }
+
+  window._groupPageNav = function(dir) { groupPage += dir; renderGroupPage(); };
+  window.filterGroups = function() { groupPage = 1; renderGroupPage(); };
+
+  if (document.getElementById('group-list')) renderGroupPage();
+})();
 </script>
 {% endblock dashboard_content %}

templates/admin.html

@@ -5,6 +5,9 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="color-scheme" content="light dark">
   <title>{% block title %}calrs{% endblock %}</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
   <style>
     :root {
       --bg: #f4f4f5;
@@ -55,7 +58,7 @@
     *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
     body {
-      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
+      font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
       line-height: 1.6;
       color: var(--text);
       background: var(--bg);
@@ -192,6 +195,10 @@
       box-shadow: var(--shadow);
       transform: scale(1.03);
     }
+    .slot-btn:active {
+      transform: scale(0.97);
+      box-shadow: none;
+    }
 
     /* Form */
     .form-group { margin-bottom: 1.25rem; }
@@ -230,19 +237,19 @@
     .btn {
       display: inline-block;
       padding: 0.75rem 1.5rem;
-      background: var(--accent);
+      background: linear-gradient(135deg, var(--accent), var(--accent-hover));
       color: #fff;
       border: none;
       border-radius: var(--radius);
       font-size: 0.95rem;
       font-weight: 600;
       cursor: pointer;
       width: 100%;
-      transition: background 0.15s ease, box-shadow 0.15s ease;
+      transition: all 0.15s ease;
       letter-spacing: -0.01em;
     }
-    .btn:hover { background: var(--accent-hover); box-shadow: var(--shadow-lg); }
-    .btn:active { transform: translateY(1px); }
+    .btn:hover { background: linear-gradient(135deg, var(--accent-hover), var(--accent)); box-shadow: var(--shadow-lg); }
+    .btn:active { transform: scale(0.97); box-shadow: none; }
     .btn:disabled { background: var(--accent-muted); cursor: not-allowed; }
 
     /* Confirmation */
@@ -335,15 +342,6 @@
       .week-nav .range { font-size: 0.8rem; }
     }
 
-    /* Page fade-in */
-    @keyframes fadeIn {
-      from { opacity: 0; transform: translateY(6px); }
-      to { opacity: 1; transform: translateY(0); }
-    }
-    body {
-      animation: fadeIn 0.3s ease-out;
-    }
-
     /* Interactive card hover lift */
     a.card {
       transition: border-color 0.15s ease, box-shadow 0.2s ease, transform 0.2s ease;
@@ -405,7 +403,7 @@
   {% endif %}
   <div class="container">
     {% block content %}{% endblock %}
-    <p class="powered">Powered by <a href="https://github.com/olivierlambert/calrs">calrs</a> 🦀</p>
+    {% block footer %}<p class="powered">Powered by <a href="https://cal.rs">calrs</a> 🦀</p>{% endblock %}
   </div>
 <script>
 // CSRF protection: inject _csrf hidden field into all POST forms