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/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;