Improve layout (#510)

* fix assessment layout

* improve player layout

* refactor sidebar

* default system theme

* may toggle theme

* fix calendar in dark theme

* fix style in dark mode

* improve player layout

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

@@ -12,7 +12,7 @@ import {
   DefaultAudioLayout,
   defaultLayoutIcons,
 } from "@vidstack/react/player/layouts/default";
-export const STORAGE_WORKER_ENDPOINT = "https://enjoy-storage.baizhiheizi.com";
+import { STORAGE_WORKER_ENDPOINT } from "@/constants";
 import { TimelineEntry } from "echogarden/dist/utilities/Timeline.d.js";
 import { t } from "i18next";
 import { XCircleIcon } from "lucide-react";

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

@@ -12,7 +12,6 @@ import { formatDateTime } from "@renderer/lib/utils";
 import { t } from "i18next";
 import Markdown from "react-markdown";
 import { Link } from "react-router-dom";
-import { BotIcon } from "lucide-react";
 
 export const PostCard = (props: {
   post: PostType;
@@ -22,7 +21,7 @@ export const PostCard = (props: {
   const { user } = useContext(AppSettingsProviderContext);
 
   return (
-    <div className="rounded p-4 bg-background space-y-3">
+    <div className="p-4 rounded-lg space-y-3 hover:bg-muted">
       <div className="flex items-center justify-between">
         <div className="flex items-center space-x-2">
           <Link to={`/users/${post.user.id}`}>
@@ -51,7 +50,7 @@ export const PostCard = (props: {
           <div className="text-xs text-muted-foreground">
             {t("sharedPrompt")}
           </div>
-          <Markdown className="prose prose-slate prose-pre:whitespace-pre-line select-text">
+          <Markdown className="prose prose-slate prose-pre:whitespace-pre-line dark:prose-invert select-text">
             {"```prompt\n" + post.metadata.content + "\n```"}
           </Markdown>
         </>
@@ -59,16 +58,17 @@ export const PostCard = (props: {
 
       {post.metadata?.type === "gpt" && (
         <>
-          <div className="text-xs text-muted-foreground">
-            {t("sharedGpt")}
-          </div>
+          <div className="text-xs text-muted-foreground">{t("sharedGpt")}</div>
           <div className="text-sm">
-            {t('models.conversation.roleDefinition')}:
+            {t("models.conversation.roleDefinition")}:
           </div>
-          <div className="prose prose-stone prose-pre:whitespace-pre-line select-text">
+          <div className="prose prose-stone prose-pre:whitespace-pre-line dark:prose-invert select-text">
             <blockquote className="not-italic whitespace-pre-line">
               <Markdown>
-                {(post.metadata.content as { [key: string]: any }).configuration?.roleDefinition}
+                {
+                  (post.metadata.content as { [key: string]: any })
+                    .configuration?.roleDefinition
+                }
               </Markdown>
             </blockquote>
           </div>

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

@@ -1,6 +1,6 @@
 import { PostAudio } from "@renderer/components";
 import { t } from "i18next";
-import { MediaPlayer, MediaProvider } from "@vidstack/react";
+import { MediaPlayer, MediaProvider, PlayerSrc } from "@vidstack/react";
 import {
   DefaultVideoLayout,
   defaultLayoutIcons,
@@ -24,7 +24,7 @@ export const PostMedium = (props: { medium: MediumType }) => {
                 medium.extname.replace(".", "") || "mp4"
               }`,
               src: medium.sourceUrl,
-            }}
+            } as PlayerSrc}
           >
             <MediaProvider />
             <DefaultVideoLayout icons={defaultLayoutIcons} />

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

@@ -160,7 +160,7 @@ export const PostRecording = (props: {
 
       {recording.referenceText && (
         <div className="mt-2 bg-muted px-4 py-2 rounded">
-          <div className="text-muted-foreground text-center font-serif">
+          <div className="text-muted-foreground text-center font-serif select-text">
             {recording.referenceText}
           </div>
         </div>

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

@@ -1,15 +1,26 @@
 import { useContext, useEffect, useState } from "react";
 import { AppSettingsProviderContext } from "@renderer/context";
 import { PostCard, LoaderSpin } from "@renderer/components";
-import { toast, Button, Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "@renderer/components//ui";
+import {
+  toast,
+  Button,
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectItem,
+  Separator,
+} from "@renderer/components//ui";
 import { t } from "i18next";
 
 export const Posts = (props: { userId?: string }) => {
   const { userId } = props;
   const { webApi } = useContext(AppSettingsProviderContext);
   const [loading, setLoading] = useState<boolean>(true);
-  const [type, setType] = useState<'all' | 'recording' | 'medium' | 'story' | 'prompt' | 'gpt'>("all");
-  const [by, setBy] = useState<'all' | 'following'>("following");
+  const [type, setType] = useState<
+    "all" | "recording" | "medium" | "story" | "prompt" | "gpt"
+  >("all");
+  const [by, setBy] = useState<"all" | "following">("following");
   const [posts, setPosts] = useState<PostType[]>([]);
   const [nextPage, setNextPage] = useState(1);
 
@@ -34,7 +45,7 @@ export const Posts = (props: { userId?: string }) => {
         items: 10,
         userId,
         by,
-        type
+        type,
       })
       .then((res) => {
         if (page === 1) {
@@ -63,40 +74,69 @@ export const Posts = (props: { userId?: string }) => {
   return (
     <div className="max-w-screen-sm mx-auto">
       <div className="flex justify-end space-x-4 py-4">
-        {
-          !userId && <Select value={by} onValueChange={(value: 'all' | 'following') => setBy(value)}>
+        {!userId && (
+          <Select
+            value={by}
+            onValueChange={(value: "all" | "following") => setBy(value)}
+          >
             <SelectTrigger>
               <SelectValue />
             </SelectTrigger>
             <SelectContent>
-              <SelectItem key="following" value="following">{t('following')}</SelectItem>
-              <SelectItem key="all" value="all">{t('allUsers')}</SelectItem>
+              <SelectItem key="following" value="following">
+                {t("following")}
+              </SelectItem>
+              <SelectItem key="all" value="all">
+                {t("allUsers")}
+              </SelectItem>
             </SelectContent>
           </Select>
-        }
+        )}
 
-        <Select value={type} onValueChange={(value: 'all' | 'recording' | 'medium' | 'story' | 'prompt' | 'gpt') => setType(value)}>
+        <Select
+          value={type}
+          onValueChange={(
+            value: "all" | "recording" | "medium" | "story" | "prompt" | "gpt"
+          ) => setType(value)}
+        >
           <SelectTrigger>
             <SelectValue />
           </SelectTrigger>
           <SelectContent>
-            <SelectItem key="all" value="all">{t('allTypes')}</SelectItem>
-            <SelectItem key="recording" value="recording">{t('recordingType')}</SelectItem>
-            <SelectItem key="prompt" value="prompt">{t('promptType')}</SelectItem>
-            <SelectItem key="gpt" value="gpt">{t('gptType')}</SelectItem>
-            <SelectItem key="medium" value="medium">{t('mediumType')}</SelectItem>
-            <SelectItem key="story" value="story">{t('storyType')}</SelectItem>
+            <SelectItem key="all" value="all">
+              {t("allTypes")}
+            </SelectItem>
+            <SelectItem key="recording" value="recording">
+              {t("recordingType")}
+            </SelectItem>
+            <SelectItem key="prompt" value="prompt">
+              {t("promptType")}
+            </SelectItem>
+            <SelectItem key="gpt" value="gpt">
+              {t("gptType")}
+            </SelectItem>
+            <SelectItem key="medium" value="medium">
+              {t("mediumType")}
+            </SelectItem>
+            <SelectItem key="story" value="story">
+              {t("storyType")}
+            </SelectItem>
           </SelectContent>
         </Select>
       </div>
 
       {posts.length === 0 && (
-        <div className="text-center text-muted-foreground py-4">{t("noOneSharedYet")}</div>
+        <div className="text-center text-muted-foreground py-4">
+          {t("noOneSharedYet")}
+        </div>
       )}
 
-      <div className="space-y-4">
+      <div className="space-y-6">
         {posts.map((post) => (
-          <PostCard key={post.id} post={post} handleDelete={handleDelete} />
+          <>
+            <PostCard key={post.id} post={post} handleDelete={handleDelete} />
+            <Separator />
+          </>
         ))}
       </div>