feat(commits): enhance commit listing with pagination and skipping

This update introduces pagination and skipping functionality for the
commit listing feature, allowing users to load commits in pages and
navigate through them more efficiently. The UI has been adjusted to
support loading more commits dynamically, improving the overall user
experience when dealing with large repositories.

- Added pagination support for commit history
- Introduced a loading mechanism for fetching more commits
- Updated UI components to reflect changes in commit loading behavior

src/app.css

@@ -2861,6 +2861,31 @@
     background: var(--color-surface-dim);
   }
 
+  .history-load-more {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    min-height: 54px;
+    padding: 9px 12px;
+    border-top: 1px solid var(--color-border-subtle);
+    color: var(--color-ink-faint);
+    background: var(--color-surface-dim);
+    font-size: 11.5px;
+  }
+
+  .history-load-more-button {
+    min-height: 30px;
+    border-color: transparent;
+    color: var(--color-primary);
+    background: transparent;
+  }
+
+  .history-load-more-button:hover:not(:disabled) {
+    border-color: color-mix(in srgb, var(--color-primary) 22%, transparent);
+    background: color-mix(in srgb, var(--color-primary) 8%, transparent);
+  }
+
   .graph-row {
     display: grid;
     grid-template-columns: auto minmax(0, 1fr);
@@ -5753,6 +5778,10 @@ input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px color-mix(in s
 }
 .graph-row + .graph-row .commit-body { border-top: 1px solid var(--color-border-subtle); }
 .graph-row:hover .commit-body { background: var(--color-surface-hover); }
+.graph-row {
+  content-visibility: auto;
+  contain-intrinsic-block-size: 108px;
+}
 .commit-avatar { border-radius: 50%; }
 .commit-kind, .commit-branch-chip, .ref-chip { border-radius: 4px !important; }
 .file-history-row { margin: 0; border: 0; border-bottom: 1px solid var(--color-border-subtle); border-radius: 0; background: transparent; }
@@ -5808,6 +5837,10 @@ input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px color-mix(in s
   *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
 }
 
+@media (hover: none), (pointer: coarse) {
+  .status-file-actions { opacity: 1; }
+}
+
 :root[data-theme="light"] .repo-tab-wrap {
   background: rgba(255,255,255,0.5);
 }
@@ -6106,12 +6139,53 @@ input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px color-mix(in s
   background: #eef3f9;
 }
 
+:root[data-theme="light"] .cred-card {
+  border-color: rgba(49, 95, 214, 0.22);
+  background: #ffffff;
+  box-shadow: 0 28px 72px rgba(28, 44, 74, 0.2), 0 0 0 1px rgba(255,255,255,0.82) inset;
+}
+
+:root[data-theme="light"] .cred-hero {
+  border-bottom-color: rgba(34, 49, 78, 0.1);
+  background:
+    radial-gradient(circle at 8% 0%, rgba(49,95,214,0.13), transparent 42%),
+    linear-gradient(135deg, #f8faff, #eef4fc);
+}
+
+:root[data-theme="light"] .cred-hero-icon {
+  border-color: rgba(49,95,214,0.2);
+  color: #ffffff;
+  background: linear-gradient(135deg, #4d8dff, #0f8fb5);
+  box-shadow: 0 12px 26px rgba(49,95,214,0.2), inset 0 1px 0 rgba(255,255,255,0.24);
+}
+
+:root[data-theme="light"] .cred-hero-label { color: #315fd6; }
+:root[data-theme="light"] .cred-hero-title { color: #172033; }
+:root[data-theme="light"] .cred-hero-copy { color: #526078; }
+
+:root[data-theme="light"] .cred-security-note {
+  border-color: rgba(15,143,181,0.2);
+  color: #21647a;
+  background: rgba(15,143,181,0.07);
+}
+
+:root[data-theme="light"] .cred-security-note svg { color: #0f8fb5; }
+
+:root[data-theme="light"] .cred-body {
+  background: #ffffff;
+}
+
 :root[data-theme="light"] .cred-seg-btn.active {
   border-color: rgba(49,95,214,0.26);
   background: linear-gradient(135deg, rgba(49,95,214,0.12), rgba(15,143,181,0.08));
   box-shadow: 0 8px 18px rgba(28,44,74,0.1), inset 0 1px 0 rgba(255,255,255,0.9);
 }
 
+:root[data-theme="light"] .cred-seg-btn:hover:not(.active) {
+  color: var(--color-ink);
+  background: rgba(255,255,255,0.68);
+}
+
 :root[data-theme="light"] .cred-close {
   border-color: var(--color-border-subtle);
   color: var(--color-ink-dim);
@@ -6147,10 +6221,18 @@ input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px color-mix(in s
 
 :root[data-theme="light"] .cred-input input,
 :root[data-theme="light"] .cred-expiry input[type="date"] {
+  border-color: var(--color-border-input);
   background: rgba(255,255,255,0.92);
   color-scheme: light;
 }
 
+:root[data-theme="light"] .cred-input input::placeholder { color: #8995a8; }
+
+:root[data-theme="light"] .cred-reveal:hover {
+  color: var(--color-ink);
+  background: var(--color-surface-hover);
+}
+
 :root[data-theme="light"] .cred-token-hint code {
   color: #0d78a0;
 }