feat(trash): move trash API to normalized version (with cursor, orderBy) + normalize Trash section to existing components

normalize also component to format badges (expiry, role, etc)

static/css/views/mySharesView.css

@@ -132,8 +132,12 @@
 
 /* ── Grant row ───────────────────────────────────────────────────────────── */
 
+/* Four-column grid so the role pill and expiry chip line up vertically
+ * across every row in a lane. Reserved widths fit the longest expected
+ * label ("Can manage" → ~110px, "Expires Mar 5, 2026" → ~180px). */
 .ms-grant-row {
-    display: flex;
+    display: grid;
+    grid-template-columns: 1fr 110px 180px auto;
     align-items: center;
     gap: 8px;
     padding: 7px 14px 7px 28px;
@@ -141,6 +145,13 @@
     transition: background 0.1s;
 }
 
+/* Pill / chip sit at the start of their column rather than stretching
+ * to fill it — keeps the natural rounded shape. */
+.ms-grant-row > .role-chip,
+.ms-grant-row > .expiry-chip {
+    justify-self: start;
+}
+
 .ms-grant-row:last-child {
     border-bottom: none;
 }
@@ -212,65 +223,8 @@
     text-decoration: underline;
 }
 
-/* ── Role pill ───────────────────────────────────────────────────────────── */
-
-.ms-role-pill {
-    display: inline-block;
-    flex-shrink: 0;
-    padding: 2px 8px;
-    border-radius: 10px;
-    font-size: 11px;
-    font-weight: 600;
-    white-space: nowrap;
-}
-
-.ms-role-pill--manage {
-    background: var(--color-badge-orange-bg);
-    color: var(--color-badge-orange-text);
-}
-
-.ms-role-pill--edit {
-    background: var(--color-badge-blue-bg);
-    color: var(--color-badge-blue-text);
-}
-
-.ms-role-pill--view {
-    background: var(--color-bg-muted);
-    color: var(--color-text-muted);
-}
-
-/* ── Expiry chip ─────────────────────────────────────────────────────────── */
-
-.ms-expiry-chip {
-    display: inline-flex;
-    align-items: center;
-    flex-shrink: 0;
-    gap: 4px;
-    padding: 2px 7px;
-    border-radius: 10px;
-    font-size: 11px;
-    white-space: nowrap;
-}
-
-.ms-expiry-chip--never {
-    background: var(--color-bg-muted);
-    color: var(--color-text-faint);
-}
-
-.ms-expiry-chip--active {
-    background: var(--color-bg-muted);
-    color: var(--color-text-muted);
-}
-
-.ms-expiry-chip--soon {
-    background: var(--color-badge-amber-bg);
-    color: var(--color-badge-amber-text);
-}
-
-.ms-expiry-chip--expired {
-    background: var(--color-danger-lighter);
-    color: var(--color-danger-text-alt);
-}
+/* Role chip styles moved to components/roleChip.css (shared component).
+ * Expiry chip styles moved to components/expiryChip.css (shared with Trash). */
 
 /* ── Kebab / icon buttons ────────────────────────────────────────────────── */
 

static/css/views/trash.css

@@ -1,58 +1,52 @@
-.trash-item {
-    position: relative;
-}
+/*
+ * Trash-specific styling.
+ *
+ * The trash list reuses the generic ResourceList layout entirely. Only the
+ * permanent-delete tint, the "Empty trash" danger button, and the
+ * remaining-days badge live here — everything else inherits from
+ * `.btn-action` and the generic `--color-*` tokens.
+ *
+ * Restore is intentionally a NEUTRAL action (no tint) — it just undoes a
+ * previous delete and shouldn't compete visually with the destructive action.
+ */
 
-.trash-actions {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    display: none;
-    gap: 8px;
-}
-
-.files-grid-view .file-card.trash-item:hover .trash-actions,
-.files-list-view .file-item.trash-item:hover .actions-cell {
-    display: flex;
-}
-
-.trash-actions button,
-.actions-cell button {
-    background: var(--color-trash-surface);
-    border: 1px solid var(--color-trash-border);
-    border-radius: 4px;
-    padding: 4px 8px;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 30px;
-    height: 30px;
-    transition: all 0.2s;
-}
-
-.trash-actions button:hover,
-.actions-cell button:hover {
-    background: var(--color-trash-empty-bg);
-}
-
-.btn-restore {
-    color: var(--color-trash-restore);
-}
-
-.btn-delete {
-    color: var(--color-trash-delete);
-}
-
-/* .file-item.trash-item > .path-cell → resourceList.css */
-
-.actions-cell {
-    display: flex;
-    gap: 8px;
-    justify-content: flex-start;
-    align-items: center;
+.btn-action--delete {
+    color: var(--color-danger-text-alt);
 }
 
 .btn-danger {
-    background-color: var(--color-trash-delete);
+    background-color: var(--color-danger-bg);
     color: var(--color-danger-text);
 }
+
+.btn-danger:hover {
+    background-color: var(--color-danger-bg-hover);
+}
+
+/* Expiry chip itself (`.expiry-chip`) lives in components/expiryChip.css
+ * since it's shared with My Shares. Below is just the Trash-specific
+ * grid-view overlay positioning. */
+
+/* ── Grid view: anchor the chip on the card's top-right corner ───────
+ * The generic `.date-cell` is hidden in grid view (resourceList.css);
+ * trash overrides this so the badge stays visible as an overlay.
+ * Scoped to `.trash-list` so other sections are unaffected.
+ *
+ * Negative offsets make the chip straddle the card edge so it visually
+ * "tags" the corner without eating into the centred icon/name area —
+ * no extra padding is needed on the card body.
+ */
+.files-grid-view.trash-list .file-item .date-cell {
+    display: block;
+    position: absolute;
+    top: -1px;
+    right: 3px;
+    z-index: 2;
+    padding: 0;
+}
+
+/* A subtle shadow lifts the chip above the card border so it reads as
+ * a tag sitting on top, not as misaligned content. */
+.files-grid-view.trash-list .file-item .date-cell .expiry-chip {
+    box-shadow: 0 1px 3px var(--color-shadow-xs);
+}