Annotations: FE

CHANGELOG.md

@@ -6,6 +6,7 @@ All notable changes to this project will be documented in this file.
 
 ### Added
 
+- Annotations feature
 - Pages report can now be broken down by URL (hostname + path) in addition to path only
 - New "AI Assistants" acquisition channel + improved recognized sources database
 - Allow querying revenue metrics (`total_revenue`, `average_revenue`) with visit dimensions in Stats API v2

assets/css/app.css

@@ -63,6 +63,10 @@
       disabled:cursor-not-allowed;
   }
 
+  .btn-xs {
+    @apply px-2 py-1;
+  }
+
   .btn-sm {
     @apply px-3 py-2;
   }

assets/js/dashboard/annotations/annotation-list-items.tsx

@@ -0,0 +1,60 @@
+import React, { ReactNode } from 'react'
+import classNames from 'classnames'
+import {
+  Annotation,
+  getAnnotationAttribution,
+  getAttributionDateLabel
+} from './annotations'
+
+export const AnnotationsListContainer = ({
+  children
+}: {
+  children: ReactNode
+}) => (
+  <div className="text-sm font-normal text-gray-100 flex flex-col gap-2">
+    {children}
+  </div>
+)
+
+const VerticalBar = () => (
+  <div className="rounded-xs w-[3px] bg-green-500 shrink-0" />
+)
+
+export const AnnotationItemRow = ({ children }: { children: ReactNode }) => (
+  <div className="group flex flex-row gap-x-2">
+    <VerticalBar />
+    {children}
+  </div>
+)
+
+export const AnnotationAttributionLine = ({
+  annotation
+}: {
+  annotation: Annotation
+}) => (
+  <div className="flex items-baseline text-xs text-gray-300 pr-8">
+    <span className="truncate min-w-0">
+      {getAnnotationAttribution(annotation)}
+    </span>
+    <span className="whitespace-nowrap shrink-0">
+      {` • ${getAttributionDateLabel(annotation)}`}
+    </span>
+  </div>
+)
+
+export const AnnotationNote = ({
+  note,
+  clamp
+}: {
+  note: string
+  clamp?: boolean
+}) => (
+  <div
+    className={classNames(
+      'text-left whitespace-pre-wrap [overflow-wrap:anywhere] [word-break:normal]',
+      { 'line-clamp-2': clamp }
+    )}
+  >
+    {note}
+  </div>
+)