ref(bug reports): unread items marked by dot (#58803)

unread items are marked with a dot, which doesn't go away until the user
manually marks it as read (the dot does not automatically disappear upon
clicking the feedback detail)

<img width="411" alt="SCR-20231025-mwdi"
src="https://github.com/getsentry/sentry/assets/56095982/4b5088cc-56d2-4c23-8f55-4b3535bb4ce3">

static/app/components/feedback/list/feedbackListItem.tsx

@@ -11,7 +11,7 @@ import {Flex} from 'sentry/components/profiling/flex';
 import useReplaysCount from 'sentry/components/replays/useReplaysCount';
 import TextOverflow from 'sentry/components/textOverflow';
 import TimeSince from 'sentry/components/timeSince';
-import {IconPlay} from 'sentry/icons';
+import {IconCircleFill, IconPlay} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import {IssueCategory} from 'sentry/types';
@@ -87,6 +87,17 @@ const FeedbackListItem = forwardRef<HTMLDivElement, Props>(
           <span style={{gridArea: 'time'}}>
             <TimeSince date={feedbackItem.timestamp} />
           </span>
+          {feedbackItem.hasSeen ? null : (
+            <span
+              style={{
+                gridArea: 'unread',
+                display: 'flex',
+                justifyContent: 'center',
+              }}
+            >
+              <IconCircleFill size="xs" color="purple300" />
+            </span>
+          )}
           <div style={{gridArea: 'message'}}>
             <TextOverflow>{feedbackItem.metadata.message}</TextOverflow>
           </div>
@@ -132,7 +143,7 @@ const LinkedFeedbackCard = styled(Link)`
   grid-template-rows: max-content 1fr max-content;
   grid-template-areas:
     'checkbox user time'
-    'right message message'
+    'unread message message'
     'right icons icons';
   gap: ${space(1)};
   place-items: stretch;