feat: read count (#135)

RSSNext · Jul 15, 2024 · c8dbd59 · c8dbd59
1 parent a79bda7
commit c8dbd59
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 0 deletions.
diff --git a/icons/mgc/eye_2_cute_re.svg b/icons/mgc/eye_2_cute_re.svg
diff --git a/src/renderer/src/modules/entry-content/index.tsx b/src/renderer/src/modules/entry-content/index.tsx
@@ -1,7 +1,10 @@
 import { useUISettingKey } from "@renderer/atoms/settings/ui"
+import { useUser } from "@renderer/atoms/user"
 import { m } from "@renderer/components/common/Motion"
 import { Logo } from "@renderer/components/icons/logo"
 import { AutoResizeHeight } from "@renderer/components/ui/auto-resize-height"
+import { Avatar, AvatarFallback, AvatarImage } from "@renderer/components/ui/avatar"
+import { Tooltip, TooltipContent, TooltipTrigger } from "@renderer/components/ui/tooltip"
 import { useAuthQuery, useTitle } from "@renderer/hooks/common"
 import { stopPropagation } from "@renderer/lib/dom"
 import { parseHtml } from "@renderer/lib/parse-html"
@@ -42,6 +45,8 @@ export const EntryContent = ({ entryId }: { entryId: ActiveEntryId }) => {
 }
 
 function EntryContentRender({ entryId }: { entryId: string }) {
+  const user = useUser()
+
   const { error, data } = useAuthQuery(Queries.entries.byId(entryId), {
     staleTime: 300_000,
     meta: {
@@ -143,6 +148,67 @@ function EntryContentRender({ entryId }: { entryId: string }) {
                 {entry.entries.publishedAt &&
                   new Date(entry.entries.publishedAt).toLocaleString()}
               </div>
+              <div className="mt-2 flex items-center gap-2 text-[13px] text-zinc-500">
+                <div className="flex items-center gap-1 font-medium">
+                  <i className="i-mgc-eye-2-cute-re" />
+                  <span>
+                    {(
+                      (data?.entries.entryReadHistories.readCount ?? 0) +
+                      (data?.entries.entryReadHistories.users.every((u) => u.id !== user?.id) ? 1 : 0) // if no me, +1
+                    ).toLocaleString()}
+                  </span>
+                </div>
+                <div className="flex items-center">
+                  {[
+                    {
+                      id: user?.id,
+                      name: user?.name ?? null,
+                      image: user?.image ?? null,
+                      handle: user?.handle ?? null,
+                    },
+                  ] // myself first
+                    .concat(
+                      data?.entries.entryReadHistories.users.filter(
+                        (u) => u.id !== user?.id,
+                      ) ?? [],
+                    ) // then others
+                    .slice(0, 10) // only show 10
+                    .concat(
+                      data?.entries.entryReadHistories.readCount &&
+                      data.entries.entryReadHistories.readCount > 10 ?
+                          [
+                            {
+                              id: "more",
+                              name: `+${
+                                data?.entries.entryReadHistories.readCount - 10
+                              }`,
+                              image: null,
+                              handle: null,
+                            },
+                          ] :
+                          [],
+                    ) // show more count
+                    .map((user, i) => (
+                      <Tooltip key={user.id}>
+                        <TooltipTrigger>
+                          <div
+                            style={{
+                              transform: `translateX(-${i * 5}px)`,
+                            }}
+                          >
+                            <Avatar className="aspect-square size-6 border border-black dark:border-white">
+                              <AvatarImage src={user?.image || undefined} />
+                              <AvatarFallback>
+                                {user.name?.slice(0, 2)}
+                              </AvatarFallback>
+                            </Avatar>
+                          </div>
+                        </TooltipTrigger>
+                        <TooltipContent side="top">{user.name}</TooltipContent>
+                      </Tooltip>
+                    ))}
+                </div>
+              </div>
             </a>
             <WrappedElementProvider boundingDetection>
               <TitleMetaHandler entryId={entry.entries.id} />