feat: show edits on minute version select

Author: aydin-utting

frontend/app/transcriptions/[transcriptionId]/MinuteTab/MinuteTab.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { MinuteEditor } from '@/app/transcriptions/[transcriptionId]/MinuteTab/MinuteEditor'
+import { MinuteEditor } from '@/app/transcriptions/[transcriptionId]/MinuteTab/minute-editor/minute-editor'
 import { NewMinuteDialog } from '@/app/transcriptions/[transcriptionId]/MinuteTab/NewMinuteDialog'
 import { AudioWav } from '@/components/icons/AudioWav'
 import {

…riptionId]/MinuteTab/ai-edit-popover.tsx …uteTab/minute-editor/ai-edit-popover.tsxfrontend/app/transcriptions/[transcriptionId]/MinuteTab/ai-edit-popover.tsx renamed to frontend/app/transcriptions/[transcriptionId]/MinuteTab/minute-editor/ai-edit-popover.tsx frontend/app/transcriptions/[transcriptionId]/MinuteTab/ai-edit-popover.tsx renamed to frontend/app/transcriptions/[transcriptionId]/MinuteTab/minute-editor/ai-edit-popover.tsx

@@ -1,19 +1,13 @@
 'use client'
 
-import { AiEditPopover } from '@/app/transcriptions/[transcriptionId]/MinuteTab/ai-edit-popover'
 import SimpleEditor from '@/app/transcriptions/[transcriptionId]/MinuteTab/components/editor/tiptap-editor'
 import { RatingButton } from '@/app/transcriptions/[transcriptionId]/MinuteTab/components/rating-dialog/rating-dialog'
+import { AiEditPopover } from '@/app/transcriptions/[transcriptionId]/MinuteTab/minute-editor/ai-edit-popover'
+import { MinuteVersionSelect } from '@/app/transcriptions/[transcriptionId]/MinuteTab/minute-editor/minute-version-select'
 import { NewMinuteDialog } from '@/app/transcriptions/[transcriptionId]/MinuteTab/NewMinuteDialog'
 import { Button } from '@/components/ui/button'
 import CopyButton from '@/components/ui/copy-button'
 import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-} from '@/components/ui/select'
-import {
-  ContentSource,
   MinuteListItem,
   MinuteVersionResponse,
   Transcription,
@@ -37,30 +31,13 @@ import {
   Undo,
 } from 'lucide-react'
 import posthog from 'posthog-js'
-import {
-  Dispatch,
-  SetStateAction,
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import { Controller, useForm } from 'react-hook-form'
 
 type MinuteEditorForm = {
   html: string
 }
 
-const mapContentSource = (source: ContentSource): string => {
-  if (source === 'ai_edit') {
-    return 'AI edited'
-  } else if (source === 'manual_edit') {
-    return 'Manually edited'
-  } else {
-    return 'First version generated'
-  }
-}
-
 export function MinuteEditor({
   transcription,
   minute,
@@ -303,39 +280,6 @@ export function MinuteEditor({
   )
 }
 
-const MinuteVersionSelect = ({
-  minuteVersions,
-  version,
-  setVersion,
-}: {
-  minuteVersions: MinuteVersionResponse[]
-  version: number
-  setVersion: Dispatch<SetStateAction<number>>
-}) => {
-  return (
-    <Select value={`${version}`} onValueChange={(v) => setVersion(Number(v))}>
-      <SelectTrigger className="inline-flex">Edits</SelectTrigger>
-      <SelectContent>
-        {minuteVersions.map((v, index) => {
-          const date = new Date(v.created_datetime!)
-          return (
-            <SelectItem key={v.id!} value={`${index}`}>
-              {mapContentSource(v.content_source)}
-              <div className="text-muted-foreground flex gap-1 text-xs">
-                {date.toLocaleDateString()}{' '}
-                {date.toLocaleTimeString(undefined, {
-                  hour: 'numeric',
-                  minute: 'numeric',
-                })}
-              </div>
-            </SelectItem>
-          )
-        })}
-      </SelectContent>
-    </Select>
-  )
-}
-
 const MinuteVersionDeleteButton = ({
   minuteVersion,
   className,

…nscriptionId]/MinuteTab/MinuteEditor.tsx …inuteTab/minute-editor/minute-editor.tsxfrontend/app/transcriptions/[transcriptionId]/MinuteTab/MinuteEditor.tsx renamed to frontend/app/transcriptions/[transcriptionId]/MinuteTab/minute-editor/minute-editor.tsx frontend/app/transcriptions/[transcriptionId]/MinuteTab/MinuteEditor.tsx renamed to frontend/app/transcriptions/[transcriptionId]/MinuteTab/minute-editor/minute-editor.tsx

@@ -0,0 +1,73 @@
+'use client'
+
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+} from '@/components/ui/select'
+import { ContentSource, MinuteVersionResponse } from '@/lib/client'
+import { Edit, Wand2 } from 'lucide-react'
+import { Dispatch, SetStateAction } from 'react'
+
+const MapContentSource = ({ source }: { source: ContentSource }) => {
+  if (source === 'ai_edit') {
+    return (
+      <div className="items-centre flex gap-1">
+        <Wand2 />
+        AI edited
+      </div>
+    )
+  } else if (source === 'manual_edit') {
+    return (
+      <div className="items-centre flex gap-1">
+        <Edit />
+        Manually edited
+      </div>
+    )
+  } else {
+    return <div>First version generated</div>
+  }
+}
+
+export const MinuteVersionSelect = ({
+  minuteVersions,
+  version,
+  setVersion,
+}: {
+  minuteVersions: MinuteVersionResponse[]
+  version: number
+  setVersion: Dispatch<SetStateAction<number>>
+}) => {
+  return (
+    <Select value={`${version}`} onValueChange={(v) => setVersion(Number(v))}>
+      <SelectTrigger className="inline-flex">Edits</SelectTrigger>
+      <SelectContent>
+        {minuteVersions.map((v, index) => {
+          const date = new Date(v.created_datetime!)
+          return (
+            <SelectItem key={v.id!} value={`${index}`}>
+              <div className="flex w-full max-w-md flex-1 flex-col items-start">
+                <div className="flex items-center gap-2">
+                  <MapContentSource source={v.content_source} />
+                  <div className="text-muted-foreground flex gap-1 text-xs">
+                    {date.toLocaleDateString()}{' '}
+                    {date.toLocaleTimeString(undefined, {
+                      hour: 'numeric',
+                      minute: 'numeric',
+                    })}
+                  </div>
+                </div>
+                {v.ai_edit_instructions && (
+                  <div className="border-l-2 pl-2">
+                    <q>{v.ai_edit_instructions}</q>
+                  </div>
+                )}
+              </div>
+            </SelectItem>
+          )
+        })}
+      </SelectContent>
+    </Select>
+  )
+}