may share story

enjoy/src/renderer/components/posts/index.ts

@@ -4,3 +4,4 @@ export * from "./post-card";
 export * from "./post-actions";
 export * from "./post-medium";
 export * from "./post-recording";
+export * from "./post-story";

enjoy/src/renderer/components/posts/post-card.tsx

@@ -1,10 +1,10 @@
-import { PostRecording, PostActions, PostMedium } from "@renderer/components";
 import {
-  Avatar,
-  AvatarImage,
-  AvatarFallback,
-  Button,
-} from "@renderer/components/ui";
+  PostRecording,
+  PostActions,
+  PostMedium,
+  PostStory,
+} from "@renderer/components";
+import { Avatar, AvatarImage, AvatarFallback } from "@renderer/components/ui";
 import { formatDateTime } from "@renderer/lib/utils";
 import { t } from "i18next";
 import Markdown from "react-markdown";
@@ -55,6 +55,15 @@ export const PostCard = (props: { post: PostType }) => {
         </>
       )}
 
+      {post.targetType == "Story" && (
+        <>
+          <div className="text-xs text-muted-foreground">
+            {t("sharedStory")}
+          </div>
+          <PostStory story={post.target as StoryType} />
+        </>
+      )}
+
       <PostActions post={post} />
     </div>
   );

enjoy/src/renderer/components/posts/post-story.tsx

@@ -0,0 +1,25 @@
+import { Link } from "react-router-dom";
+
+export const PostStory = (props: { story: StoryType }) => {
+  const { story } = props;
+  return (
+    <Link className="block" to={`/stories/${story.id}`}>
+      <div className="rounded-lg flex items-start border">
+        <div className="aspect-square h-36 bg-muted">
+          <img
+            src={story.metadata?.image}
+            className="w-full h-full object-cover"
+          />
+        </div>
+        <div className="px-4 py-2">
+          <div className="line-clamp-2 text-lg font-semibold mb-2">
+            {story.metadata?.title}
+          </div>
+          <div className="line-clamp-3 text-sm text-muted-foreground">
+            {story.metadata?.description}
+          </div>
+        </div>
+      </div>
+    </Link>
+  );
+};

enjoy/src/renderer/components/stories/story-toolbar.tsx

@@ -2,6 +2,16 @@ import {
   Alert,
   AlertTitle,
   AlertDescription,
+  AlertDialog,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogCancel,
+  AlertDialogAction,
+  Button,
   ScrollArea,
   Separator,
   Sheet,
@@ -17,6 +27,7 @@ import {
   ScanTextIcon,
   LoaderIcon,
   StarIcon,
+  Share2Icon,
 } from "lucide-react";
 import { t } from "i18next";
 
@@ -36,6 +47,7 @@ export const StoryToolbar = (props: {
   marked?: boolean;
   toggleMarked?: () => void;
   pendingLookups?: LookupType[];
+  handleShare?: () => void;
 }) => {
   const {
     starred,
@@ -47,6 +59,7 @@ export const StoryToolbar = (props: {
     toggleMarked,
     meanings = [],
     pendingLookups = [],
+    handleShare,
   } = props;
 
   const [vocabularyVisible, setVocabularyVisible] = useState<boolean>(
@@ -76,6 +89,27 @@ export const StoryToolbar = (props: {
         <ToolbarButton toggled={starred} onClick={toggleStarred}>
           <StarIcon className="w-6 h-6" />
         </ToolbarButton>
+        <AlertDialog>
+          <AlertDialogTrigger asChild>
+            <ToolbarButton toggled={false} onClick={toggleStarred}>
+              <Share2Icon className="w-6 h-6" />
+            </ToolbarButton>
+          </AlertDialogTrigger>
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogTitle>{t("shareStory")}</AlertDialogTitle>
+              <AlertDialogDescription>
+                {t("areYouSureToShareThisStoryToCommunity")}
+              </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogCancel>{t("cancel")}</AlertDialogCancel>
+              <AlertDialogAction>
+                <Button onClick={handleShare}>{t("share")}</Button>
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
       </FloatingToolbar>
 
       <Sheet

enjoy/src/renderer/pages/story.tsx

@@ -1,5 +1,5 @@
 import { t } from "i18next";
-import { ScrollArea } from "@renderer/components/ui";
+import { ScrollArea, useToast } from "@renderer/components/ui";
 import {
   LoaderSpin,
   PagePlaceholder,
@@ -24,6 +24,7 @@ export default () => {
   const [scanning, setScanning] = useState<boolean>(false);
   const [marked, setMarked] = useState<boolean>(true);
   const [doc, setDoc] = useState<any>(null);
+  const { toast } = useToast();
 
   const fetchStory = async () => {
     webApi
@@ -118,6 +119,23 @@ export default () => {
     }
   };
 
+  const handleShare = async () => {
+    webApi
+      .createPost({ targetId: story.id, targetType: "Story" })
+      .then(() => {
+        toast({
+          description: t("sharedStory"),
+        });
+      })
+      .catch((error) => {
+        toast({
+          title: t("shareFailed"),
+          description: error.message,
+          variant: "destructive",
+        });
+      });
+  };
+
   useEffect(() => {
     fetchStory();
     fetchMeanings();
@@ -162,6 +180,7 @@ export default () => {
           starred={story.starred}
           toggleStarred={toggleStarred}
           pendingLookups={pendingLookups}
+          handleShare={handleShare}
         />
 
         <StoryViewer