feat: Added a conflict resolution dialog and a Conflicts view for easier management of conflicts (#2337)

packages/web/src/javascripts/Components/NotesOptions/NoteAttributes.tsx

@@ -1,13 +1,10 @@
 import { useMemo, FunctionComponent } from 'react'
-import { SNApplication, SNNote } from '@standardnotes/snjs'
+import { SNApplication, SNNote, classNames } from '@standardnotes/snjs'
 import { formatDateForContextMenu } from '@/Utils/DateUtils'
 import { calculateReadTime } from './Utils/calculateReadTime'
 import { countNoteAttributes } from './Utils/countNoteAttributes'
 
-export const NoteAttributes: FunctionComponent<{
-  application: SNApplication
-  note: SNNote
-}> = ({ application, note }) => {
+export const useNoteAttributes = (application: SNApplication, note: SNNote) => {
   const { words, characters, paragraphs } = useMemo(() => countNoteAttributes(note.text), [note.text])
 
   const readTime = useMemo(() => (typeof words === 'number' ? calculateReadTime(words) : 'N/A'), [words])
@@ -19,8 +16,29 @@ export const NoteAttributes: FunctionComponent<{
   const editor = application.componentManager.editorForNote(note)
   const format = editor?.package_info?.file_type || 'txt'
 
+  return {
+    words,
+    characters,
+    paragraphs,
+    readTime,
+    dateLastModified,
+    dateCreated,
+    format,
+  }
+}
+
+export const NoteAttributes: FunctionComponent<{
+  application: SNApplication
+  note: SNNote
+  className?: string
+}> = ({ application, note, className }) => {
+  const { words, characters, paragraphs, readTime, dateLastModified, dateCreated, format } = useNoteAttributes(
+    application,
+    note,
+  )
+
   return (
-    <div className="select-text px-3 py-1.5 text-sm font-medium text-neutral lg:text-xs">
+    <div className={classNames('select-text px-3 py-1.5 text-sm font-medium text-neutral lg:text-xs', className)}>
       {typeof words === 'number' && (format === 'txt' || format === 'md') ? (
         <>
           <div className="mb-1">