feat(cards): show operation icons on hover

src/shared/ui/EntryCard.module.css

@@ -40,3 +40,56 @@
 		text-align: left;
 	}
 }
+
+.valueFooter {
+	display: grid;
+	align-items: center;
+	justify-items: end;
+	min-height: 28px;
+}
+.valueLabel,
+.actions {
+	grid-area: 1 / 1;
+	transition: opacity 180ms ease;
+}
+.valueLabel {
+	opacity: 0;
+}
+.actions {
+	display: flex;
+}
+@media (hover: hover) and (pointer: fine) {
+	.valueLabel {
+		opacity: 1;
+	}
+	.actions {
+		opacity: 0;
+		pointer-events: none;
+	}
+	.row:hover .actions,
+	.row:focus-within .actions {
+		opacity: 1;
+		pointer-events: auto;
+	}
+	.row:hover .valueLabel,
+	.row:focus-within .valueLabel {
+		opacity: 0;
+	}
+}
+@media (max-width: 36em) {
+	.valueFooter {
+		justify-items: start;
+	}
+}
+@media (pointer: coarse) {
+	.actions button {
+		min-width: 36px;
+		min-height: 36px;
+	}
+}
+@media (prefers-reduced-motion: reduce) {
+	.valueLabel,
+	.actions {
+		transition: none;
+	}
+}

src/shared/ui/EntryCard.tsx

@@ -6,6 +6,7 @@ type EntryCardProps = {
 	title: string;
 	metadata: string;
 	details?: ReactNode;
+	actions?: ReactNode;
 	initial: string;
 	imageSrc?: string | null;
 	value: string;
@@ -40,9 +41,17 @@ const EntryCard: FC<EntryCardProps> = (props) => {
 				<Text className={classes[props.tone]} fw={700}>
 					{props.value}
 				</Text>
-				<Text className={classes[props.tone]} size="sm">
-					{props.valueLabel}
-				</Text>
+				<div className={props.actions ? classes.valueFooter : undefined}>
+					<Text
+						className={`${classes[props.tone]} ${props.actions ? classes.valueLabel : ""}`}
+						size="sm"
+					>
+						{props.valueLabel}
+					</Text>
+					{props.actions && (
+						<div className={classes.actions}>{props.actions}</div>
+					)}
+				</div>
 			</Stack>
 		</Paper>
 	);