Feat: make notes on caption (#544)

* add segment model

* add note model

* db handle segment & note

* add notes & segments handler

* refactor media caption components

* segment & note create

* fix type

* update note column & may sync

* display selected words for note

* refactor selected words

* auto select words when editing note

* refactor

* refactor caption component

* display notes

* refactor notes components

* fix

* refactor segment & notes into context

* destroy note

* update locale

* fix caption switch issue

* fix layout

* refactor caption layout

* remove deprecated code

* may share note

* improve UI

* fix notes list auto update after created

* remove console.log

* add notes page

* refactor note parameters

* refactor components

* mark note on transcription

* handle no notes

* improve style

* improve style

* show context menu on selection text

* fix utils

enjoy/src/renderer/components/posts/posts.tsx

@@ -18,7 +18,7 @@ export const Posts = (props: { userId?: string }) => {
   const { webApi } = useContext(AppSettingsProviderContext);
   const [loading, setLoading] = useState<boolean>(true);
   const [type, setType] = useState<
-    "all" | "recording" | "medium" | "story" | "prompt" | "gpt"
+    "all" | "recording" | "medium" | "story" | "prompt" | "gpt" | "note"
   >("all");
   const [by, setBy] = useState<"all" | "following">("following");
   const [posts, setPosts] = useState<PostType[]>([]);
@@ -109,6 +109,9 @@ export const Posts = (props: { userId?: string }) => {
             <SelectItem key="recording" value="recording">
               {t("recordingType")}
             </SelectItem>
+            <SelectItem key="note" value="note">
+              {t("noteType")}
+            </SelectItem>
             <SelectItem key="prompt" value="prompt">
               {t("promptType")}
             </SelectItem>
@@ -133,10 +136,10 @@ export const Posts = (props: { userId?: string }) => {
 
       <div className="space-y-6">
         {posts.map((post) => (
-          <>
-            <PostCard key={post.id} post={post} handleDelete={handleDelete} />
+          <div key={post.id}>
+            <PostCard post={post} handleDelete={handleDelete} />
             <Separator />
-          </>
+          </div>
         ))}
       </div>