release: v0.20.0 — UX polish: hover animations, status badges, gradient profile, admin search

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

Author: olivierlambert

CHANGELOG.md

@@ -81,10 +81,28 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/), and this
 | Regression tests | 0.19.0 | 28 new tests (191 → 219) covering ICS, validation, CSRF |
 | ICS attendee names | 0.19.0 | Calendar events show "{title} — {guest} & {host}" with guest notes in description |
 | Host confirmation email | 0.19.0 | Host receives booking confirmed email (without ICS) after approving pending bookings |
+| UX polish | 0.20.0 | Clickable dashboard cards, hover animations, status badges, gradient profile header, admin search/filter |
 | ICS time fix | 0.19.0 | Correct UTC times in ICS when confirming/cancelling bookings from the database |
 
 ## [Unreleased]
 
+## [0.20.0] - 2026-03-13
+
+### Added
+
+- **Clickable dashboard cards** — stat tiles (Event Types, Upcoming Bookings, Pending Approval, Calendar Sources) are now links to their respective dashboard pages
+- **Public page link opens in new tab** — the `/u/{username}` link on the dashboard overview now opens in a new tab
+- **Admin search/filter** — users list has a live filter by name or email; groups list has a live filter by name
+- **Status badges** — "disabled" and "requires confirmation" on event types are now colored pill badges (red/amber) instead of plain text; pending bookings show an amber "pending" badge
+- **Card hover lift** — interactive cards (stat tiles, profile event types, group event types) lift with a shadow on hover
+- **Page fade-in animation** — subtle 0.3s fade-in + slide-up on every page load
+- **Slot button hover scale** — time slot buttons scale up slightly (1.03×) on hover for a tactile feel
+- **Colored left border** — event type cards on public profile and group pages have a 3px accent-colored left border
+- **Profile gradient banner** — public profile page has a blue-to-purple gradient header behind the avatar
+- **Animated checkmark** — confirmation page checkmark bounces in with a scale animation
+- **Better empty states** — empty listings (bookings, event types, slots) show a larger icon + descriptive text instead of a plain line
+- **Rust crab branding** — "Powered by calrs" footer now includes the 🦀 emoji on all pages
+
 ## [0.19.1] - 2026-03-13
 
 ### Changed

Cargo.lock

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

Cargo.toml

@@ -30,10 +30,13 @@ <h2>Company logo</h2>
 <!-- Users -->
 <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;">
+  </div>
   {% if users %}
-  <div style="display: flex; flex-direction: column; gap: 0.75rem;">
+  <div id="user-list" style="display: flex; flex-direction: column; gap: 0.75rem;">
     {% for u in users %}
-    <div style="border: 1px solid var(--border); border-radius: var(--radius); padding: 0.875rem 1rem;">
+    <div class="user-item" data-name="{{ u.name | lower }}" data-email="{{ u.email | lower }}" style="border: 1px solid var(--border); border-radius: var(--radius); padding: 0.875rem 1rem;">
       <div style="display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem; flex-wrap: wrap;">
         <div style="min-width: 0; flex: 1;">
           <div style="font-weight: 600; font-size: 0.925rem;">{{ u.name }}</div>
@@ -72,6 +75,7 @@ <h2>Users ({{ user_count }})</h2>
     </div>
     {% endfor %}
   </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>
   {% endif %}
@@ -81,6 +85,9 @@ <h2>Users ({{ user_count }})</h2>
 <div class="card">
   <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;">
+  </div>
   <div style="overflow-x: auto;">
     <table style="width: 100%; border-collapse: collapse; font-size: 0.875rem;">
       <thead>
@@ -89,16 +96,17 @@ <h2>Groups ({{ group_count }})</h2>
           <th style="padding: 0.5rem;">Members</th>
         </tr>
       </thead>
-      <tbody>
+      <tbody id="group-list">
         {% for g in groups %}
-        <tr style="border-bottom: 1px solid var(--border);">
+        <tr class="group-item" data-name="{{ g.name | lower }}" style="border-bottom: 1px solid var(--border);">
           <td style="padding: 0.5rem 0.5rem 0.5rem 0;">{{ g.name }}</td>
           <td style="padding: 0.5rem;">{{ g.member_count }}</td>
         </tr>
         {% endfor %}
       </tbody>
     </table>
   </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>
   {% endif %}
@@ -174,4 +182,30 @@ <h2>SMTP settings</h2>
   <p style="color: var(--text-muted); font-size: 0.8rem; margin-top: 0.75rem;">SMTP configuration must be managed via the CLI (<code>calrs config smtp</code>) for security reasons.</p>
 </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';
+}
+</script>
 {% endblock dashboard_content %}

templates/admin.html

@@ -190,6 +190,7 @@
       color: var(--accent);
       background: var(--accent-subtle);
       box-shadow: var(--shadow);
+      transform: scale(1.03);
     }
 
     /* Form */
@@ -261,7 +262,22 @@
     .detail { margin-bottom: 0.625rem; color: var(--text-secondary); font-size: 0.925rem; }
     .detail strong { color: var(--text); }
 
-    .empty { color: var(--text-muted); text-align: center; padding: 2.5rem 1rem; }
+    .empty {
+      color: var(--text-muted);
+      text-align: center;
+      padding: 2.5rem 1rem;
+    }
+    .empty-icon {
+      font-size: 2.5rem;
+      margin-bottom: 0.75rem;
+      opacity: 0.5;
+    }
+    .empty-text {
+      font-size: 0.925rem;
+      max-width: 320px;
+      margin: 0 auto;
+      line-height: 1.5;
+    }
 
     .logo { text-align: center; margin-bottom: 1.5rem; }
     .logo img { max-height: 80px; max-width: 280px; object-fit: contain; }
@@ -318,6 +334,62 @@
       .week-nav { flex-wrap: wrap; gap: 0.5rem; }
       .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;
+    }
+    a.card:hover {
+      border-color: var(--accent-border);
+      box-shadow: var(--shadow-lg);
+      transform: translateY(-2px);
+    }
+
+    /* Status badges */
+    .badge {
+      display: inline-block;
+      font-size: 0.7rem;
+      font-weight: 600;
+      padding: 0.15rem 0.5rem;
+      border-radius: 9999px;
+      letter-spacing: 0.02em;
+      vertical-align: middle;
+    }
+    .badge-disabled {
+      background: var(--error-bg);
+      color: var(--error-text);
+    }
+    .badge-pending {
+      background: rgba(245, 158, 11, 0.12);
+      color: #d97706;
+    }
+    .badge-confirmed {
+      background: rgba(22, 163, 74, 0.1);
+      color: var(--success);
+    }
+    .badge-requires {
+      background: rgba(245, 158, 11, 0.12);
+      color: #d97706;
+    }
+
+    /* Checkmark animation */
+    @keyframes checkPop {
+      0% { transform: scale(0); opacity: 0; }
+      60% { transform: scale(1.15); opacity: 1; }
+      100% { transform: scale(1); opacity: 1; }
+    }
+    .check {
+      animation: checkPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
+    }
   </style>
   {% block head %}{% endblock %}
 </head>
@@ -333,7 +405,7 @@
   {% endif %}
   <div class="container">
     {% block content %}{% endblock %}
-    <p class="powered">Powered by <a href="https://github.com/olivierlambert/calrs">calrs</a></p>
+    <p class="powered">Powered by <a href="https://github.com/olivierlambert/calrs">calrs</a> 🦀</p>
   </div>
 <script>
 // CSRF protection: inject _csrf hidden field into all POST forms

templates/base.html

@@ -7,7 +7,7 @@
 
 <div class="card" style="text-align: center;">
   {% if pending %}
-    <div class="check" style="background: var(--text-muted);">&#8987;</div>
+    <div class="check" style="background: #d97706;">&#8987;</div>
     <h1>Pending confirmation</h1>
     <p class="subtitle">Your booking request has been sent to {{ host_name }}. You'll receive an email at {{ guest_email }} once it's confirmed.</p>
   {% else %}

templates/confirmed.html

@@ -330,7 +330,7 @@
     <div class="container">
       {% block dashboard_content %}{% endblock %}
     </div>
-    <p class="powered" style="max-width: 900px;">Powered by <a href="https://github.com/olivierlambert/calrs">calrs</a></p>
+    <p class="powered" style="max-width: 900px;">Powered by <a href="https://github.com/olivierlambert/calrs">calrs</a> 🦀</p>
   </main>
 </div>
 {% endblock %}

templates/dashboard_base.html

@@ -45,7 +45,10 @@ <h1 style="margin-bottom: 1rem;">Upcoming bookings</h1>
     </div>
     {% endfor %}
   {% else %}
-    <p class="empty" style="padding: 1rem;">No upcoming bookings.</p>
+    <div class="empty" style="padding: 2rem 1rem;">
+      <div class="empty-icon">&#128203;</div>
+      <div class="empty-text">No upcoming bookings yet. They'll show up here once someone books a time with you.</div>
+    </div>
   {% endif %}
 </div>
 {% endblock %}

templates/dashboard_bookings.html

@@ -12,8 +12,8 @@ <h1 style="margin-bottom: 0;">Event types</h1>
       <div class="et-info">
         <strong>{{ et.title }}</strong>
         <span style="color: var(--text-muted); font-size: 0.85rem;">&middot; {{ et.duration_min }}min</span>
-        {% if not et.enabled %}<span style="color: var(--error-text); font-size: 0.8rem;"> (disabled)</span>{% endif %}
-        {% if et.requires_confirmation %}<span style="color: var(--text-muted); font-size: 0.8rem;"> (requires confirmation)</span>{% endif %}
+        {% if not et.enabled %}<span class="badge badge-disabled">disabled</span>{% endif %}
+        {% if et.requires_confirmation %}<span class="badge badge-requires">requires confirmation</span>{% endif %}
       </div>
       <div class="et-actions">
         <a href="/dashboard/event-types/{{ et.slug }}/edit" class="slot-btn" style="text-decoration: none; font-size: 0.8rem;">Edit</a>
@@ -31,7 +31,10 @@ <h1 style="margin-bottom: 0;">Event types</h1>
     </div>
     {% endfor %}
   {% else %}
-    <p class="empty" style="padding: 1rem;">No event types yet. <a href="/dashboard/event-types/new" style="color: var(--accent); text-decoration: none;">Create one</a> to start accepting bookings.</p>
+    <div class="empty" style="padding: 2rem 1rem;">
+      <div class="empty-icon">&#128197;</div>
+      <div class="empty-text">No event types yet. <a href="/dashboard/event-types/new" style="color: var(--accent); text-decoration: none;">Create one</a> to start accepting bookings.</div>
+    </div>
   {% endif %}
 </div>
 
@@ -46,7 +49,7 @@ <h2 style="margin-bottom: 0;">Group event types</h2>
     <div class="et-info">
       <strong>{{ et.title }}</strong>
       <span style="color: var(--text-muted); font-size: 0.85rem;">&middot; {{ et.group_name }} &middot; {{ et.duration_min }}min</span>
-      {% if not et.enabled %}<span style="color: var(--error-text); font-size: 0.8rem;"> (disabled)</span>{% endif %}
+      {% if not et.enabled %}<span class="badge badge-disabled">disabled</span>{% endif %}
     </div>
     <div class="et-actions">
       <a href="/g/{{ et.group_slug }}/{{ et.slug }}" class="slot-btn" style="text-decoration: none; font-size: 0.8rem;">View</a>
@@ -60,7 +63,10 @@ <h2 style="margin-bottom: 0;">Group event types</h2>
     <h2 style="margin-bottom: 0;">Group event types</h2>
     <a href="/dashboard/group-event-types/new" class="slot-btn" style="text-decoration: none; font-size: 0.85rem; font-weight: 600; color: var(--accent); border-color: var(--accent);">+ New</a>
   </div>
-  <p class="empty" style="padding: 1rem;">No group event types yet.</p>
+  <div class="empty" style="padding: 2rem 1rem;">
+    <div class="empty-icon">&#128101;</div>
+    <div class="empty-text">No group event types yet.</div>
+  </div>
 </div>
 {% endif %}
 {% endblock %}

templates/dashboard_event_types.html

@@ -8,7 +8,7 @@ <h1>Welcome, {{ user_name }}</h1>
   </p>
   {% if username %}
   <p style="font-size: 0.85rem; color: var(--text-muted); margin-top: 0.5rem;">
-    Public page: <a href="/u/{{ username }}" style="color: var(--accent); text-decoration: none;">/u/{{ username }}</a>
+    Public page: <a href="/u/{{ username }}" target="_blank" rel="noopener" style="color: var(--accent); text-decoration: none;">/u/{{ username }}</a>
   </p>
   {% endif %}
 </div>
@@ -23,22 +23,22 @@ <h2 style="margin-bottom: 0.5rem;">Connect your calendar</h2>
 {% endif %}
 
 <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1.25rem;">
-  <div class="card" style="text-align: center; padding: 1.25rem;">
+  <a href="/dashboard/event-types" class="card" style="text-align: center; padding: 1.25rem; text-decoration: none; color: inherit;">
     <div style="font-size: 1.75rem; font-weight: 700; color: var(--accent);">{{ event_type_count }}</div>
     <div style="font-size: 0.85rem; color: var(--text-muted);">Event Types</div>
-  </div>
-  <div class="card" style="text-align: center; padding: 1.25rem;">
+  </a>
+  <a href="/dashboard/bookings" class="card" style="text-align: center; padding: 1.25rem; text-decoration: none; color: inherit;">
     <div style="font-size: 1.75rem; font-weight: 700; color: var(--accent);">{{ upcoming_count }}</div>
     <div style="font-size: 0.85rem; color: var(--text-muted);">Upcoming Bookings</div>
-  </div>
-  <div class="card" style="text-align: center; padding: 1.25rem;">
+  </a>
+  <a href="/dashboard/bookings" class="card" style="text-align: center; padding: 1.25rem; text-decoration: none; color: inherit;">
     <div style="font-size: 1.75rem; font-weight: 700; color: var(--accent);">{{ pending_count }}</div>
     <div style="font-size: 0.85rem; color: var(--text-muted);">Pending Approval</div>
-  </div>
-  <div class="card" style="text-align: center; padding: 1.25rem;">
+  </a>
+  <a href="/dashboard/sources" class="card" style="text-align: center; padding: 1.25rem; text-decoration: none; color: inherit;">
     <div style="font-size: 1.75rem; font-weight: 700; color: var(--accent);">{{ source_count }}</div>
     <div style="font-size: 0.85rem; color: var(--text-muted);">Calendar Sources</div>
-  </div>
+  </a>
 </div>
 
 {% if pending_bookings %}
@@ -47,7 +47,7 @@ <h2>Pending approval</h2>
   {% for b in pending_bookings %}
   <div class="booking-row" {% if not loop.last %}style="border-bottom: 1px solid var(--border);"{% endif %}>
     <div class="booking-info">
-      <div><strong>{{ b.event_title }}</strong> with {{ b.guest_name }}</div>
+      <div><strong>{{ b.event_title }}</strong> with {{ b.guest_name }} <span class="badge badge-pending">pending</span></div>
       <div style="color: var(--text-muted); font-size: 0.85rem;">{{ b.start_at }}</div>
     </div>
     <div class="booking-actions">