feat: add comment source

Signed-off-by: Innei <[email protected]>

src/components/icons/platform/AppleIcon.tsx

@@ -0,0 +1,18 @@
+import type { SVGProps } from 'react'
+
+export function AppleIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path
+        className="fill-black dark:fill-white"
+        d="M17.05 20.28c-.98.95-2.05.8-3.08.35c-1.09-.46-2.09-.48-3.24 0c-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8c1.18-.24 2.31-.93 3.57-.84c1.51.12 2.65.72 3.4 1.8c-3.12 1.87-2.38 5.98.48 7.13c-.57 1.5-1.31 2.99-2.54 4.09l.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25c.29 2.58-2.34 4.5-3.74 4.25z"
+      />
+    </svg>
+  )
+}

src/components/icons/platform/FacebookIcon.tsx

@@ -0,0 +1,22 @@
+import type { SVGProps } from 'react'
+
+export function LogosFacebook(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      viewBox="0 0 256 256"
+      {...props}
+    >
+      <path
+        fill="#1877F2"
+        d="M256 128C256 57.308 198.692 0 128 0C57.308 0 0 57.308 0 128c0 63.888 46.808 116.843 108 126.445V165H75.5v-37H108V99.8c0-32.08 19.11-49.8 48.348-49.8C170.352 50 185 52.5 185 52.5V84h-16.14C152.959 84 148 93.867 148 103.99V128h35.5l-5.675 37H148v89.445c61.192-9.602 108-62.556 108-126.445"
+      />
+      <path
+        fill="#FFF"
+        d="m177.825 165l5.675-37H148v-24.01C148 93.866 152.959 84 168.86 84H185V52.5S170.352 50 156.347 50C127.11 50 108 67.72 108 99.8V128H75.5v37H108v89.445A128.959 128.959 0 0 0 128 256a128.9 128.9 0 0 0 20-1.555V165h29.825"
+      />
+    </svg>
+  )
+}

src/components/icons/platform/MicrosoftIcon.tsx

@@ -0,0 +1,18 @@
+import type { SVGProps } from 'react'
+
+export function LogosMicrosoftIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      viewBox="0 0 256 256"
+      {...props}
+    >
+      <path fill="#F1511B" d="M121.666 121.666H0V0h121.666z" />
+      <path fill="#80CC28" d="M256 121.666H134.335V0H256z" />
+      <path fill="#00ADEF" d="M121.663 256.002H0V134.336h121.663z" />
+      <path fill="#FBBC09" d="M256 256.002H134.335V134.336H256z" />
+    </svg>
+  )
+}

src/components/layout/header/internal/UserAuthFromIcon.tsx

@@ -4,9 +4,7 @@ import React from 'react'
 
 import { useUser } from '@clerk/nextjs'
 
-import { GitHubBrandIcon } from '~/components/icons/platform/GitHubBrandIcon'
-import { GoogleBrandIcon } from '~/components/icons/platform/GoogleBrandIcon'
-import { MailIcon } from '~/components/icons/platform/MailIcon'
+import { getStrategyIconComponent } from '~/components/ui/user/UserAuthStrategyIcon'
 import { clsxm } from '~/lib/helper'
 
 export const UserAuthFromIcon: Component = ({ className }) => {
@@ -16,15 +14,7 @@ export const UserAuthFromIcon: Component = ({ className }) => {
     if (!strategy) {
       return null
     }
-
-    switch (strategy) {
-      case 'from_oauth_github':
-        return GitHubBrandIcon
-      case 'from_oauth_google':
-        return GoogleBrandIcon
-      default:
-        return MailIcon
-    }
+    return getStrategyIconComponent(strategy)
   }, [user?.primaryEmailAddress?.verification.strategy])
 
   if (!StrategyIcon) {

src/components/ui/user/UserAuthStrategyIcon.tsx

@@ -0,0 +1,41 @@
+import type { FC } from 'react'
+
+import { AppleIcon } from '~/components/icons/platform/AppleIcon'
+import { LogosFacebook } from '~/components/icons/platform/FacebookIcon'
+import { GitHubBrandIcon } from '~/components/icons/platform/GitHubBrandIcon'
+import { GoogleBrandIcon } from '~/components/icons/platform/GoogleBrandIcon'
+import { LogosMicrosoftIcon } from '~/components/icons/platform/MicrosoftIcon'
+import { TwitterIcon } from '~/components/icons/platform/Twitter'
+
+export const UserAuthStrategyIcon: FC<{
+  strategy: string
+  className?: string
+}> = ({ strategy, className }) => {
+  const Icon = getStrategyIconComponent(strategy)
+
+  if (!strategy) {
+    return null
+  }
+
+  if (!Icon) return null
+  return <Icon className={className} />
+}
+
+export const getStrategyIconComponent = (strategy: string) => {
+  switch (strategy) {
+    case 'from_oauth_github':
+      return GitHubBrandIcon
+    case 'from_oauth_google':
+      return GoogleBrandIcon
+    case 'from_oauth_apple':
+      return AppleIcon
+    case 'from_oauth_microsoft':
+      return LogosMicrosoftIcon
+    case 'from_oauth_facebook':
+      return LogosFacebook
+    case 'from_oauth_twitter':
+      return TwitterIcon
+    default:
+      return null
+  }
+}

src/components/widgets/comment/Comment.tsx

@@ -17,6 +17,7 @@ import type { PropsWithChildren } from 'react'
 
 import { Avatar } from '~/components/ui/avatar'
 import { RelativeTime } from '~/components/ui/relative-time'
+import { UserAuthStrategyIcon } from '~/components/ui/user/UserAuthStrategyIcon'
 import { softSpringPreset } from '~/constants/spring'
 import { jotaiStore } from '~/lib/store'
 
@@ -40,6 +41,7 @@ export const Comment: Component<{
     location,
     isWhispers,
     url,
+    source,
   } = comment
   const parentId =
     typeof comment.parent === 'string' ? comment.parent : comment.parent?.id
@@ -93,6 +95,12 @@ export const Comment: Component<{
                 width={24}
                 height={24}
               />
+              {source && (
+                <UserAuthStrategyIcon
+                  className="absolute bottom-0.5 right-0.5 h-3.5 w-3.5 ring-1 ring-slate-100 dark:ring-zinc-800"
+                  strategy={source}
+                />
+              )}
             </div>
 
             {/* Header */}

src/components/widgets/comment/CommentBox/AuthedInput.tsx

@@ -21,9 +21,13 @@ export const CommentBoxAuthedInput = () => {
   useEffect(() => {
     if (!user) return
     setter('author', displayName)
-    setter('avatar', user.profileImageUrl)
+    setter('avatar', user.imageUrl)
     setter('mail', user.primaryEmailAddress?.emailAddress || '')
-  }, [displayName, user])
+
+    const strategy = user.primaryEmailAddress?.verification.strategy
+
+    strategy && setter('source', strategy)
+  }, [displayName, setter, user])
 
   if (!user) return <CommentBoxAuthedInputSkeleton />
   return (
@@ -37,7 +41,7 @@ export const CommentBoxAuthedInput = () => {
       >
         <Image
           className="rounded-full object-cover"
-          src={user.profileImageUrl}
+          src={user.imageUrl}
           alt={`${displayName}'s avatar`}
           width={48}
           height={48}

src/components/widgets/comment/CommentBox/hooks.tsx

@@ -69,11 +69,14 @@ export const useSetCommentBoxValues = <
   T extends keyof CommentContextValue,
 >() => {
   const ctx = useContext(CommentBoxContext)
-  return (key: T, value: ExtractAtomValue<CommentContextValue[T]>) => {
-    const atom = ctx[key]
-    if (!atom) throw new Error(`atom ${key} not found`)
-    jotaiStore.set(atom as any, value)
-  }
+  return useCallback(
+    (key: T, value: ExtractAtomValue<CommentContextValue[T]>) => {
+      const atom = ctx[key]
+      if (!atom) throw new Error(`atom ${key} not found`)
+      jotaiStore.set(atom as any, value)
+    },
+    [ctx],
+  )
 }
 
 // Comment Mode

src/components/widgets/comment/CommentBox/providers.tsx

@@ -7,7 +7,6 @@ import type { CommentModel } from '@mx-space/api-client'
 import type { FC, PropsWithChildren } from 'react'
 
 import { useBeforeMounted } from '~/hooks/common/use-before-mounted'
-import { useRefValue } from '~/hooks/common/use-ref-value'
 import { jotaiStore } from '~/lib/store'
 
 import { setCommentActionLeftSlot, useCommentActionLeftSlot } from './hooks'
@@ -48,10 +47,13 @@ export const CommentBoxProvider = (
 ) => {
   const { refId, children, afterSubmit, initialValue } = props
 
-  const ctxValue = useRefValue(() => ({
-    ...createInitialValue(),
-    refId: atom(refId),
-  }))
+  const ctxValue = useMemo(
+    () => ({
+      ...createInitialValue(),
+      refId: atom(refId),
+    }),
+    [refId],
+  )
   useBeforeMounted(() => {
     if (initialValue) {
       jotaiStore.set(ctxValue.text, initialValue)