add statistics endpoint for today's top songs and implement paginatio…

.claude/settings.local.json

@@ -3,7 +3,12 @@
     "allow": [
       "WebFetch(domain:github.com)",
       "WebSearch",
-      "WebFetch(domain:support.discord.com)"
+      "WebFetch(domain:support.discord.com)",
+      "Skill(dataviz)",
+      "Bash(node scripts/validate_palette.js \"#ff6b6b,#4ecdc4,#45b7d1,#f9ca24,#f0932b,#eb4d4b,#6ab04c,#9c88ff\" --mode dark)",
+      "PowerShell(node \"C:\\\\Users\\\\stand\\\\AppData\\\\Local\\\\Temp\\\\claude\\\\bundled-skills\\\\2.1.206\\\\086a8e9e37ae6507cf6e474311e79744\\\\dataviz\\\\scripts\\\\validate_palette.js\" \"#ff6b6b,#4ecdc4,#45b7d1,#f9ca24,#f0932b,#eb4d4b,#6ab04c,#9c88ff\" --mode dark)",
+      "PowerShell(node \"C:\\\\Users\\\\stand\\\\AppData\\\\Local\\\\Temp\\\\claude\\\\bundled-skills\\\\2.1.206\\\\086a8e9e37ae6507cf6e474311e79744\\\\dataviz\\\\scripts\\\\validate_palette.js\" \"#3987e5,#199e70,#c98500,#008300,#9085e9,#e66767,#d55181,#d95926\" --mode dark --surface \"#366472\")",
+      "PowerShell(node \"C:\\\\Users\\\\stand\\\\AppData\\\\Local\\\\Temp\\\\claude\\\\G--personal-Discord-Music-Bot\\\\42ca7a0b-f5a7-4a2e-a708-2f026c81c580\\\\scratchpad\\\\mock-api.js\")"
     ]
   }
 }

src/UI/Api/ControllerExtensions.cs

@@ -17,6 +17,11 @@ public void AddApiController()
                         await statisticsService.GetAllSongsAsync())
                 .WithName("GetStatisticsAll");
 
+            app.MapGet("/api/statistics-today",
+                    async (IStatisticsService statisticsService, int? limit) =>
+                        await statisticsService.GetTopSongsAsync(true, limit ?? 100))
+                .WithName("GetStatisticsToday");
+
             app.MapGet("/api/users",
                     async (IUserService userService) => await userService.GetAllUsersAsync())
                 .WithName("GetAllUsers");

src/UI/App/src/components/Pagination.tsx

@@ -0,0 +1,47 @@
+interface PaginationProps {
+  page: number;
+  pageCount: number;
+  totalItems: number;
+  pageSize: number;
+  onPageChange: (page: number) => void;
+}
+
+export function Pagination({
+  page,
+  pageCount,
+  totalItems,
+  pageSize,
+  onPageChange,
+}: PaginationProps) {
+  if (pageCount <= 1) return null;
+
+  const start = (page - 1) * pageSize + 1;
+  const end = Math.min(page * pageSize, totalItems);
+
+  return (
+    <div className="pagination">
+      <span className="pagination-info">
+        Showing {start}-{end} of {totalItems}
+      </span>
+      <div className="pagination-controls">
+        <button
+          className="glass-button pagination-button"
+          disabled={page <= 1}
+          onClick={() => onPageChange(page - 1)}
+        >
+          Prev
+        </button>
+        <span className="pagination-page">
+          {page} / {pageCount}
+        </span>
+        <button
+          className="glass-button pagination-button"
+          disabled={page >= pageCount}
+          onClick={() => onPageChange(page + 1)}
+        >
+          Next
+        </button>
+      </div>
+    </div>
+  );
+}

src/UI/App/src/components/SortableTh.tsx

@@ -0,0 +1,34 @@
+interface SortableThProps {
+  label: string;
+  active: boolean;
+  direction: 'asc' | 'desc';
+  onSort: () => void;
+  className?: string;
+}
+
+export function SortableTh({
+  label,
+  active,
+  direction,
+  onSort,
+  className,
+}: SortableThProps) {
+  return (
+    <th
+      className={`sortable ${className ?? ''}`}
+      onClick={onSort}
+      title={`Sort by ${label}`}
+      aria-sort={
+        active ? (direction === 'asc' ? 'ascending' : 'descending') : 'none'
+      }
+    >
+      <span className="sort-header">
+        {label}
+        <span
+          className={`sort-arrow ${active ? `active ${direction}` : ''}`}
+          aria-hidden="true"
+        />
+      </span>
+    </th>
+  );
+}

src/UI/App/src/hooks/useIsMobile.ts

@@ -0,0 +1,17 @@
+import { useSyncExternalStore } from 'react';
+
+const MOBILE_QUERY = '(max-width: 768px)';
+
+function subscribe(callback: () => void) {
+  const mql = window.matchMedia(MOBILE_QUERY);
+  mql.addEventListener('change', callback);
+  return () => mql.removeEventListener('change', callback);
+}
+
+function getSnapshot() {
+  return window.matchMedia(MOBILE_QUERY).matches;
+}
+
+export function useIsMobile(): boolean {
+  return useSyncExternalStore(subscribe, getSnapshot, () => false);
+}