refactor(ui): trash: show action buttons in grid view

frontend/src/lib/styles/ported/resourceList.css

@@ -708,13 +708,35 @@
     outline-offset: 2px;
 }
 
-/* More actions button (three dots) — top-right of the thumbnail on a scrim. */
-/* Grid cards surface actions through the corner kebab (.file-actions) + the
-   favorite star, both absolutely positioned below. The inline per-row action
-   buttons (share/move/rename/delete) belong to the list view only — hide them
-   here so they don't stack up along the bottom edge of the card. */
-.files-grid-view .file-item .action-cell .btn-action {
-    display: none;
+/* ── Grid card action cluster ─────────────────────────────────────
+   Every action a row can surface — favorite star, `.file-actions`
+   kebab, per-section `.btn-action` icons (e.g. trash's Restore /
+   Delete permanently) — lives in a single `.action-cell` container
+   pinned to the top-right of the card. The container carries the
+   position + hover-reveal + gap; its children just supply their
+   own chip visuals (30x30 scrim pill, etc.), no more one-off
+   absolute positioning per child.
+
+   Old rules put `.file-actions` and `.favorite-star` at hand-crafted
+   absolute coordinates and hid `.btn-action` entirely — that made
+   trash's per-item buttons invisible in grid view. The unified
+   container reads as one design pattern and takes whatever children
+   the row template hands it. */
+.files-grid-view .file-item .action-cell {
+    position: absolute;
+    top: calc(var(--space-3) + 8px);
+    right: calc(var(--space-3) + 8px);
+    z-index: 10;
+    display: flex;
+    gap: var(--space-1);
+    opacity: 0;
+    transition: opacity var(--motion-fast) var(--ease-standard);
+}
+
+.files-grid-view .file-item:hover .action-cell,
+.files-grid-view .file-item:focus-within .action-cell,
+.files-grid-view .file-item .action-cell:has(.favorite-star.active) {
+    opacity: 1;
 }
 
 /* The favorite state is already shown by the corner star button, so the inline
@@ -723,34 +745,32 @@
     display: none;
 }
 
-.files-grid-view .file-item .file-actions {
-    position: absolute;
-    top: calc(var(--space-3) + 8px);
-    right: calc(var(--space-3) + 8px);
+/* Chip visuals for anything inside the corner cluster — the kebab, the star,
+   any `.btn-action`. Uniform 30x30 scrim pill so they line up in the flex row. */
+.files-grid-view .file-item .action-cell .file-actions,
+.files-grid-view .file-item .action-cell .favorite-star,
+.files-grid-view .file-item .action-cell .btn-action {
+    position: static;
     width: 30px;
     height: 30px;
-    border-radius: var(--radius-full);
+    padding: 0;
     border: none;
+    border-radius: var(--radius-full);
     background: var(--color-scrim-control);
     backdrop-filter: blur(6px);
     -webkit-backdrop-filter: blur(6px);
     box-shadow: 0 1px 3px var(--color-shadow-sm);
-    display: flex;
+    display: inline-flex;
     align-items: center;
     justify-content: center;
-    opacity: 0;
-    z-index: 10;
-    cursor: pointer;
     color: var(--color-text);
     font-size: var(--text-md);
-    transition: opacity var(--motion-fast) var(--ease-standard);
-}
-
-.files-grid-view .file-item:hover .file-actions {
+    cursor: pointer;
+    /* Opacity/hover-reveal moves up to `.action-cell` — children stay opaque. */
     opacity: 1;
 }
 
-.files-grid-view .file-item .file-actions:hover {
+.files-grid-view .file-item .action-cell .file-actions:hover {
     color: var(--color-accent);
 }
 
@@ -782,34 +802,16 @@
     line-height: var(--leading-none);
 }
 
-/* Favorite star — top-right of the thumbnail, left of the kebab, on a scrim. */
+/* Favorite star — visual overrides only. Position, hover-reveal, chip
+   geometry all come from the shared corner-cluster rule on
+   `.files-grid-view .file-item .action-cell`. What's left here is just
+   the star's per-state colour: subtle at rest, active-gold when the
+   item is a favorite. `.active` still bumps the parent cluster's
+   opacity so an unhovered card can still show its star. */
 .files-grid-view .file-item button.favorite-star {
-    position: absolute;
-    top: calc(var(--space-3) + 8px);
-    right: calc(var(--space-3) + 8px + 34px);
-    width: 30px;
-    height: 30px;
-    border-radius: var(--radius-full);
-    border: none;
-    background: var(--color-scrim-control);
-    backdrop-filter: blur(6px);
-    -webkit-backdrop-filter: blur(6px);
-    box-shadow: 0 1px 3px var(--color-shadow-sm);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    opacity: 0;
-    z-index: 12;
-    cursor: pointer;
     color: var(--color-text-subtle);
     font-size: 15px;
-    padding: 0;
     line-height: var(--leading-none);
-    transition: opacity var(--motion-fast) var(--ease-standard);
-}
-
-.files-grid-view .file-item:hover button.favorite-star {
-    opacity: 1;
 }
 
 .files-grid-view .file-item button.favorite-star:hover {
@@ -817,7 +819,6 @@
 }
 
 .files-grid-view .file-item button.favorite-star.active {
-    opacity: 1;
     color: var(--color-star-text-hover);
 }
 

frontend/src/routes/trash/+page.svelte

@@ -400,4 +400,14 @@
 		color: var(--color-danger-text);
 		font-weight: var(--weight-semibold);
 	}
+
+	/* Grid-corner action-cell layout + chip visuals now live in the
+	   shared `ported/resourceList.css`; every section using ResourceList
+	   picks them up. What stays here is only the trash-specific danger
+	   red on the "Delete permanently" button — `--color-error-text` is
+	   the right red-text token (the shared `.file-actions:hover` accent
+	   colour still lands on the plain `.btn-action` restore button). */
+	:global(.files-grid-view .file-item .action-cell .btn-action--delete:hover) {
+		color: var(--color-error-text);
+	}
 </style>