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/base/variables.css

@@ -290,13 +290,6 @@
     --color-share-remove-text: #b71c1c;
     --color-share-owner-text: #757575;
 
-    /* Trash view */
-    --color-trash-surface: #ffffff;
-    --color-trash-border: #ddd;
-    --color-trash-restore: #4caf50;
-    --color-trash-delete: #f44336;
-    --color-trash-empty-bg: #f0f0f0;
-
     /* Primary (style.css) */
     --color-primary: #2563eb;
     --color-primary-hover: #1d4ed8;

static/css/components/csp-utilities.css

@@ -7,7 +7,7 @@
     margin-bottom: 16px;
 }
 .empty-state-icon.error {
-    color: var(--color-trash-delete);
+    color: var(--color-danger-text-alt);
 }
 .empty-state-icon.spinner {
     color: var(--color-text-medium);

static/css/components/expiryChip.css

@@ -0,0 +1,63 @@
+/*
+ * Shared expiry chip — used by My Shares (link expiration), Trash
+ * (remaining lifetime), and any future expiry display.
+ *
+ * Produced by `formatExpiryChip(value)` in `core/formatters.js`.
+ * Six tiers map a date to an urgency colour:
+ *
+ *   never     → null value           — neutral, infinity icon
+ *   normal    → > 30 days away       — neutral grey
+ *   caution   → 8–30 days            — soft amber
+ *   soon      → 2–7 days             — soft orange
+ *   urgent    → today or tomorrow    — soft red
+ *   expired   → past                 — deeper red, warning icon
+ *
+ * Colours are pastel/tinted on purpose: the chip should give an
+ * at-a-glance cue without competing visually with surrounding content.
+ */
+
+.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;
+}
+
+.expiry-chip__icon {
+    font-size: 10px;
+    opacity: 0.7;
+}
+
+.expiry-chip--never {
+    background-color: var(--color-bg-muted);
+    color: var(--color-text-faint);
+}
+
+.expiry-chip--normal {
+    background-color: var(--color-bg-muted);
+    color: var(--color-text-muted);
+}
+
+.expiry-chip--caution {
+    background-color: var(--color-warning-bg-light);
+    color: var(--color-warning-text-amber);
+}
+
+.expiry-chip--soon {
+    background-color: var(--color-warning-orange-bg);
+    color: var(--color-warning-orange-text);
+}
+
+.expiry-chip--urgent {
+    background-color: var(--color-danger-light-bg);
+    color: var(--color-danger-text-alt);
+}
+
+.expiry-chip--expired {
+    background-color: var(--color-error-bg);
+    color: var(--color-error-text-dark);
+}

static/css/components/resourceList.css

@@ -118,12 +118,32 @@
     align-items: center;
 }
 
-.list-header.trash-header {
-    grid-template-columns: minmax(180px, 1.5fr) 0.5fr 1fr 140px 100px;
+/* Trash view: Name → [Path] → Size → Date → Actions
+ * Override --files-list-columns so the trash header AND trash items align.
+ * No checkbox (selectable=false), no owner cell visible, no type column.
+ *
+ * Mobile-first: the Path column is hidden by default to keep the layout
+ * legible on narrow screens (path stays accessible via itemTooltip on hover).
+ * From 1000px upward, Path reappears and claims roughly half the table
+ * width via a 3fr share against Name's 1fr. */
+.files-list-view.trash-list {
+    --files-list-columns: minmax(180px, 1fr) 110px 130px 100px;
 }
 
-.trash-item.file-item {
-    grid-template-columns: minmax(180px, 1.5fr) 0.5fr 1fr 140px 100px;
+.files-list-view.trash-list .file-item .path-cell,
+.files-list-view.trash-list .list-header.trash-header > div:nth-child(2) {
+    display: none;
+}
+
+@media (min-width: 1000px) {
+    .files-list-view.trash-list {
+        --files-list-columns: minmax(180px, 1fr) 3fr 110px 130px 100px;
+    }
+
+    .files-list-view.trash-list .file-item .path-cell,
+    .files-list-view.trash-list .list-header.trash-header > div:nth-child(2) {
+        display: block;
+    }
 }
 
 .list-header > div,
@@ -238,7 +258,10 @@
     text-align: right;
 }
 
-.files-list-view .file-item .action-cell button,
+/* Styles for the built-in action-cell buttons (favorite-star, kebab).
+ * `.btn-action` is excluded — it owns its own colors via the generic
+ * `.btn-action` rule + variant modifiers (e.g. `.btn-action--delete`). */
+.files-list-view .file-item .action-cell button:not(.btn-action),
 .files-list-view .file-item .action-cell div {
     display: inline;
     width: 28px;
@@ -253,7 +276,7 @@
     font-size: 16px;
 }
 
-.files-list-view .file-item .action-cell button:hover {
+.files-list-view .file-item .action-cell button:not(.btn-action):hover {
     background: var(--color-border-subtle);
     color: var(--color-text-dark);
 }
@@ -677,9 +700,46 @@
     height: 30px;
 }
 
-/* — Trash — */
+/* ── Path column (opt-in via ResourceListConfig.showPath) ──────────
+ * Visible in list view only — grid cards hide it because they have no
+ * dedicated column slot. itemTooltip still surfaces the path on hover.
+ */
+.files-list-view .file-item .path-cell {
+    color: var(--color-text-secondary);
+    font-size: 13px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
 
-/* path-cell is shown in trashView; hide it in non-trash contexts */
-.file-item.trash-item > .path-cell {
+.files-grid-view .file-item .path-cell {
     display: none;
 }
+
+/* ── Custom inline actions (ResourceListConfig.customActions) ──────
+ * Always visible in both list and grid view — used by trash for the
+ * restore / permanent-delete buttons that must be one click away.
+ */
+.btn-action {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    border-radius: 8px;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    color: var(--color-text-subtle);
+    font-size: 16px;
+    padding: 0;
+}
+
+.btn-action:hover {
+    background: var(--color-border-subtle);
+    color: var(--color-text-dark);
+}
+
+.files-grid-view .file-item .btn-action {
+    margin-top: 4px;
+}

static/css/components/roleChip.css

@@ -0,0 +1,46 @@
+/*
+ * Shared role chip — used by My Shares (and any other surface that
+ * needs to display a permission role with consistent styling).
+ *
+ * Produced by `formatRoleChip(role)` / `buildRoleChip(role)` in
+ * `components/roleChip.js`. Three tiers:
+ *
+ *   manage → orange (admin)
+ *   edit   → blue   (editor)
+ *   view   → muted  (viewer)
+ *
+ * Sized to match `.expiry-chip` so the role and expiry chips line up
+ * visually side by side.
+ */
+
+.role-chip {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+    gap: 4px;
+    padding: 2px 8px;
+    border-radius: 10px;
+    font-size: 11px;
+    font-weight: 600;
+    white-space: nowrap;
+}
+
+.role-chip__icon {
+    font-size: 10px;
+    opacity: 0.85;
+}
+
+.role-chip--manage {
+    background: var(--color-badge-orange-bg);
+    color: var(--color-badge-orange-text);
+}
+
+.role-chip--edit {
+    background: var(--color-badge-blue-bg);
+    color: var(--color-badge-blue-text);
+}
+
+.role-chip--view {
+    background: var(--color-bg-muted);
+    color: var(--color-text-muted);
+}

static/css/components/shareModal.css

@@ -177,7 +177,7 @@
     border: 0.5px solid var(--color-border-medium);
     border-radius: 20px;
     background: var(--color-bg-hover);
-    font-size: 13px;
+    font-size: 14px;
     color: var(--color-text-heading);
 }
 
@@ -485,7 +485,7 @@
     width: 100%;
     box-sizing: border-box;
     padding: 4px 8px;
-    font-size: 12px;
+    font-size: 14px;
     border: 1px dashed var(--color-border-medium);
     border-radius: 6px;
     background: transparent;

static/css/main.css

@@ -15,6 +15,8 @@
 @import url("./components/fileType.css");
 @import url("./components/fileManager.css");
 @import url("./components/resourceList.css");
+@import url("./components/expiryChip.css");
+@import url("./components/roleChip.css");
 @import url("./components/contextMenu.css");
 @import url("./components/dialogs.css");
 @import url("./components/modals.css");

static/css/themes/dark.css

@@ -58,9 +58,6 @@
     --color-warning-bg: #3d2e00;
     --color-warning-bg-dark: #5a4200;
     --color-notification-bg: #1e293b;
-    --color-trash-surface: #1e293b;
-    --color-trash-border: #334155;
-    --color-trash-empty-bg: #334155;
     --color-user-menu-header-bg: linear-gradient(135deg, #1a2332 0%, #1e2940 100%);
     --color-user-menu-header-border: #3a2520;
     --color-info-bg: #0c1e35;
@@ -68,6 +65,20 @@
     --color-info-surface: #0c1e35;
     --color-danger-light-bg: #2a0c0c;
     --color-danger-lighter: #2a0c0c;
+    --color-error-text-dark: #f87171;
+
+    /* Pastel chip backgrounds need dark equivalents — otherwise the light
+     * cream / white-blue / pink-cream backdrops glow against dark surfaces
+     * and the saturated text colours become unreadable on the now-dark fill.
+     * Same pattern: dark tinted background + lighter pastel text. */
+    --color-badge-orange-bg: #2a1814;
+    --color-badge-orange-text: #ff8a65;
+    --color-badge-blue-bg: #0c2d48;
+    --color-badge-blue-text: #93c5fd;
+    --color-warning-bg-light: #2a2410;
+    --color-warning-text-amber: #fbbf24;
+    --color-warning-orange-bg: #2a1c10;
+    --color-warning-orange-text: #fb923c;
     --color-purple-bg: #1a0a33;
     --color-success-bg-alt: #0a2015;
     --color-success-bg-green: #0a2015;
@@ -106,21 +117,6 @@
     background-color: #1e293b;
 }
 
-/* ── trash.css ── */
-/* FIXME avoir as much as possible specific cases */
-[data-theme="dark"] .trash-actions button,
-[data-theme="dark"] .actions-cell button {
-    background: var(--color-bg-surface);
-    border-color: var(--color-border);
-    color: var(--color-text);
-}
-
-[data-theme="dark"] .trash-actions button:hover,
-[data-theme="dark"] .actions-cell button:hover {
-    background: var(--color-bg-alt);
-    color: var(--color-accent);
-}
-
 [data-theme="dark"] .smd-expiry-date-input::-webkit-calendar-picker-indicator {
     filter: invert(1);
 }

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);
+}