Only show unactioned notes in the Inbox panel.

And hide notes once an action has been taken.

plugins/woocommerce-admin/client/header/activity-panel/activity-card/style.scss

@@ -219,6 +219,11 @@
 // Needs the double-class for specificity
 .woocommerce-activity-card.woocommerce-inbox-activity-card {
 	grid-template-columns: 72px 1fr;
+	height: 100%;
+	opacity: 1;
+	padding: $fallback-gutter;
+	padding: $gutter;
+	transition: opacity 1s, height 0s, padding 0s;
 
 	@include breakpoint( '<782px' ) {
 		grid-template-columns: 64px 1fr;
@@ -227,6 +232,13 @@
 	.woocommerce-activity-card__header {
 		margin-bottom: $gap-small;
 	}
+
+	&.actioned {
+		height: 0;
+		opacity: 0;
+		padding: 0;
+		transition: opacity 1s, height 0s 1s, padding 0s 1s;
+	}
 }
 
 .woocommerce-review-activity-card {

plugins/woocommerce-admin/client/header/activity-panel/panels/inbox.js

@@ -18,6 +18,7 @@ import { EmptyContent, Section } from '@woocommerce/components';
 import sanitizeHTML from 'lib/sanitize-html';
 import { QUERY_DEFAULTS } from 'wc-api/constants';
 import withSelect from 'wc-api/with-select';
+import classnames from 'classnames';
 
 class InboxPanel extends Component {
 	constructor( props ) {
@@ -76,7 +77,9 @@ class InboxPanel extends Component {
 		return notesArray.map( note => (
 			<ActivityCard
 				key={ note.id }
-				className="woocommerce-inbox-activity-card"
+				className={ classnames( 'woocommerce-inbox-activity-card', {
+					actioned: 'unactioned' !== note.status,
+				} ) }
 				title={ note.title }
 				date={ note.date_created_gmt }
 				icon={ <Gridicon icon={ note.icon } size={ 48 } /> }
@@ -150,6 +153,7 @@ export default compose(
 			type: 'info,warning',
 			orderby: 'date',
 			order: 'desc',
+			status: 'unactioned',
 		};
 
 		const notes = getNotes( inboxQuery );