Replace the bibtex entries table with a card layout (#35565)

* Replace the bibtex entries table with a card layout

Render each reference as a card (citation key, title, author, year and an
error indicator) instead of a table row. Drop @tanstack/react-table, which was
the last consumer of the dependency, and keep @tanstack/react-virtual for
virtualization.

- Add a compact card variant (via a `compact` prop) for the bibtex editor:
  tighter spacing, no border-radius, and cards separated by a single collapsing
  border rather than a gap.
- Add hover and green selected/selected+hover states.
- Move the select-all checkbox out of the scrolling list into the editor
  toolbar so it stays fixed while the list scrolls.
- Lay out title/author/year with nested flex so author and year wrap together.

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

* In progress dark mode for review

* Slight design changes & updated dark mode

* Small tweaks to dark mode secondary text, and light mode border

* Truncate long authors, also use .summarize() on authors

* Refactor comments: reduce verbose, remove unnecessary

* Fix empty line

---------

Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
Co-authored-by: Tom Wells <wellsthomas@hotmail.co.uk>
GitOrigin-RevId: feaa6718484eefb9e9efb44b99f456910697cb17

services/web/frontend/stylesheets/foundations/colors.scss

@@ -9,6 +9,7 @@
 
 /* Neutral */
 $white: #fff;
+$neutral-05: #fafafb;
 $neutral-10: #f4f5f6;
 $neutral-20: #e7e9ee;
 $neutral-30: #d0d5dd;
@@ -17,15 +18,18 @@ $neutral-50: #8d96a5;
 $neutral-60: #677283;
 $neutral-70: #495365;
 $neutral-80: #2f3a4c;
+$neutral-85: #252e3c;
 $neutral-90: #1b222c;
 
 /* Green */
 $green-10: #eaf6ef;
+$green-15: #daede2;
 $green-20: #b8dbc8;
 $green-30: #86caa5;
 $green-40: #53b57f;
 $green-50: #098842;
 $green-60: #1e6b41;
+$green-65: #1c623b;
 $green-70: #195936;
 
 /* Blue */
@@ -121,6 +125,7 @@ $link-ui-visited-dark: $blue-40;
 :root {
   /* Neutral */
   --white: #{$white};
+  --neutral-05: #{$neutral-05};
   --neutral-10: #{$neutral-10};
   --neutral-20: #{$neutral-20};
   --neutral-30: #{$neutral-30};
@@ -129,15 +134,18 @@ $link-ui-visited-dark: $blue-40;
   --neutral-60: #{$neutral-60};
   --neutral-70: #{$neutral-70};
   --neutral-80: #{$neutral-80};
+  --neutral-85: #{$neutral-85};
   --neutral-90: #{$neutral-90};
 
   /* Green */
   --green-10: #{$green-10};
+  --green-15: #{$green-15};
   --green-20: #{$green-20};
   --green-30: #{$green-30};
   --green-40: #{$green-40};
   --green-50: #{$green-50};
   --green-60: #{$green-60};
+  --green-65: #{$green-65};
   --green-70: #{$green-70};
 
   /* Blue */

services/web/frontend/stylesheets/foundations/tokens/colors.json

@@ -5,6 +5,11 @@
       "$value": "#fff",
       "$primitive": null
     },
+    "neutral-05": {
+      "$type": "color",
+      "$value": "#fafafb",
+      "$primitive": null
+    },
     "neutral-10": {
       "$type": "color",
       "$value": "#f4f5f6",
@@ -45,6 +50,11 @@
       "$value": "#2f3a4c",
       "$primitive": null
     },
+    "neutral-85": {
+      "$type": "color",
+      "$value": "#252e3c",
+      "$primitive": null
+    },
     "neutral-90": {
       "$type": "color",
       "$value": "#1b222c",
@@ -55,6 +65,11 @@
       "$value": "#eaf6ef",
       "$primitive": null
     },
+    "green-15": {
+      "$type": "color",
+      "$value": "#daede2",
+      "$primitive": null
+    },
     "green-20": {
       "$type": "color",
       "$value": "#b8dbc8",
@@ -80,6 +95,11 @@
       "$value": "#1e6b41",
       "$primitive": null
     },
+    "green-65": {
+      "$type": "color",
+      "$value": "#1c623b",
+      "$primitive": null
+    },
     "green-70": {
       "$type": "color",
       "$value": "#195936",

services/web/package.json

@@ -104,7 +104,6 @@
     "@slack/webhook": "^7.0.2",
     "@stripe/react-stripe-js": "^3.9.0",
     "@stripe/stripe-js": "^7.7.0",
-    "@tanstack/react-table": "^8.21.3",
     "@xmldom/xmldom": "^0.8.13",
     "accepts": "^1.3.7",
     "ai": "^6.0.169",

yarn.lock

@@ -7489,7 +7489,6 @@ __metadata:
     "@stripe/react-stripe-js": "npm:^3.9.0"
     "@stripe/stripe-js": "npm:^7.7.0"
     "@tailwindcss/container-queries": "npm:^0.1.1"
-    "@tanstack/react-table": "npm:^8.21.3"
     "@tanstack/react-virtual": "npm:^3.13.23"
     "@testing-library/cypress": "npm:10.1.0"
     "@testing-library/dom": "npm:^10.4.0"
@@ -9839,18 +9838,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@tanstack/react-table@npm:^8.21.3":
-  version: 8.21.3
-  resolution: "@tanstack/react-table@npm:8.21.3"
-  dependencies:
-    "@tanstack/table-core": "npm:8.21.3"
-  peerDependencies:
-    react: ">=16.8"
-    react-dom: ">=16.8"
-  checksum: 10c0/85d1d0fcb690ecc011f68a5a61c96f82142e31a0270dcf9cbc699a6f36715b1653fe6ff1518302a6d08b7093351fc4cabefd055a7db3cd8ac01e068956b0f944
-  languageName: node
-  linkType: hard
-
 "@tanstack/react-virtual@npm:^3.13.23":
   version: 3.13.23
   resolution: "@tanstack/react-virtual@npm:3.13.23"
@@ -9863,13 +9850,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@tanstack/table-core@npm:8.21.3":
-  version: 8.21.3
-  resolution: "@tanstack/table-core@npm:8.21.3"
-  checksum: 10c0/40e3560e6d55e07cc047024aa7f83bd47a9323d21920d4adabba8071fd2d21230c48460b26cedf392588f8265b9edc133abb1b0d6d0adf4dae0970032900a8c9
-  languageName: node
-  linkType: hard
-
 "@tanstack/virtual-core@npm:3.13.23":
   version: 3.13.23
   resolution: "@tanstack/virtual-core@npm:3.13.23"