feat: display connected accounts in site header

src/components/common/FollowingCount.tsx

@@ -33,7 +33,7 @@ export const FollowingCount = ({
       <Button
         variant="text"
         className={
-          "xlog-site-followers align-middle text-zinc-500 -ml-2" +
+          "xlog-site-followers align-middle text-zinc-500 -ml-3" +
           (disableList ? "" : " cursor-pointer")
         }
         onClick={() => setIsFollowListOpen(true)}

src/components/site/ConnectedAccounts.tsx

@@ -0,0 +1,53 @@
+import { cn } from "~/lib/utils"
+
+import { Platform } from "./Platform"
+
+export default function ConnectedAccounts({
+  connectedAccounts,
+  className,
+}: {
+  connectedAccounts?: (
+    | string
+    | { uri: string }
+    | { identity: string; platform: string }
+  )[]
+  className?: string
+}) {
+  return (
+    <>
+      {!!connectedAccounts?.length && (
+        <div
+          className={cn(
+            "xlog-social-platforms align-middle inline-flex items-center pt-1",
+            className,
+          )}
+        >
+          {connectedAccounts.map((account) => {
+            let match: RegExpMatchArray | null = null
+            switch (typeof account) {
+              case "string":
+                match = account.match(/:\/\/account:(.*)@(.*)/)
+                break
+              case "object":
+                if ("uri" in account) {
+                  match = account.uri.match(/:\/\/account:(.*)@(.*)/)
+                } else if (account.identity && account.platform) {
+                  match = ["", account.identity, account.platform]
+                }
+                break
+            }
+            if (match) {
+              return (
+                <Platform
+                  key={match[2] + match[1]}
+                  platform={match[2]}
+                  username={match[1]}
+                ></Platform>
+              )
+            }
+          })}
+        </div>
+      )}
+    </>
+  )
+}

src/components/site/Platform.tsx

@@ -167,24 +167,26 @@ export const Platform = ({
   return (
     <UniLink
       className={cn(
-        "inline-flex hover:scale-110 transition-transform ease align-middle",
+        "w-5 h-5 inline-flex hover:scale-110 ease align-middle mr-3 sm:mr-6 transition-transform",
         className,
       )}
-      key={platform}
+      key={platform + username}
       href={link}
     >
       <Tooltip
         label={`${PlatformsSyncMap[platform]?.name || platform}: ${username}`}
+        className="text-sm"
       >
-        <span className="w-6 h-6 inline-block overflow-hidden">
+        <span className="inline-flex items-center">
           {PlatformsSyncMap[platform]?.icon ? (
             <Image
               src={PlatformsSyncMap[platform]?.icon}
               alt={platform}
-              fill={true}
+              width={20}
+              height={20}
             />
           ) : (
-            <span className="rounded-md inline-flex text-white justify-center items-center bg-zinc-300 w-6 h-6">
+            <span className="rounded-md inline-flex text-white justify-center items-center bg-zinc-300">
               <i className="icon-[mingcute--planet-line] text-xl" />
             </span>
           )}

src/components/site/SiteFooter.tsx

@@ -1,13 +1,13 @@
 import Script from "next/script"
 
 import { Logo } from "~/components/common/Logo"
-import { Platform } from "~/components/site/Platform"
 import { SITE_URL } from "~/lib/env"
 import { Trans, getTranslation } from "~/lib/i18n"
 import { ExpandedCharacter } from "~/lib/types"
 
 import { DarkModeSwitch } from "../common/DarkModeSwitch"
 import { UniLink } from "../ui/UniLink"
+import ConnectedAccounts from "./ConnectedAccounts"
 
 export default async function SiteFooter({
   site,
@@ -49,44 +49,9 @@ export default async function SiteFooter({
               ns="site"
             />
           </div>
-          {site?.metadata?.content?.connected_accounts && (
-            <div className="xlog-social-platforms sm:-mr-5 sm:block inline-block align-middle mr-4">
-              {site?.metadata?.content?.connected_accounts.map(
-                (
-                  account:
-                    | string
-                    | { uri: string }
-                    | { identity: string; platform: string }
-                    | any, // Otherwise type check will alarm
-                  index,
-                ) => {
-                  let match: RegExpMatchArray | null = null
-                  switch (typeof account) {
-                    case "string":
-                      match = account.match(/:\/\/account:(.*)@(.*)/)
-                      break
-                    case "object":
-                      if (account.uri) {
-                        match = account.uri.match(/:\/\/account:(.*)@(.*)/)
-                      } else if (account.identity && account.platform) {
-                        match = ["", account.identity, account.platform]
-                      }
-                      break
-                  }
-                  if (match) {
-                    return (
-                      <Platform
-                        key={account}
-                        platform={match[2]}
-                        username={match[1]}
-                        className="mr-2 sm:mr-5"
-                      ></Platform>
-                    )
-                  }
-                },
-              )}
-            </div>
-          )}
+          <ConnectedAccounts
+            connectedAccounts={site?.metadata?.content?.connected_accounts}
+          />
           <DarkModeSwitch />
         </div>
       </footer>

src/components/site/SiteHeader.tsx

@@ -9,6 +9,7 @@ import { fetchGetSite } from "~/queries/site.server"
 
 import { ConnectButton } from "../common/ConnectButton"
 import { Avatar } from "../ui/Avatar"
+import ConnectedAccounts from "./ConnectedAccounts"
 import { HeaderLink, type HeaderLinkType } from "./SiteHeaderLink"
 import { SiteHeaderMenu } from "./SiteHeaderMenu"
 
@@ -74,7 +75,7 @@ export const SiteHeader = async ({
             className={cn(
               "xlog-site-info flex space-x-6 sm:space-x-8 items-center w-full",
               site?.metadata?.content?.banners?.[0]?.address
-                ? "bg-white bg-opacity-50 backdrop-blur-sm rounded-xl p-4 sm:p-8 z-[1] border"
+                ? "bg-white bg-opacity-50 backdrop-blur-sm rounded-3xl p-4 sm:p-8 z-[1] border"
                 : "",
             )}
           >
@@ -86,7 +87,7 @@ export const SiteHeader = async ({
               name={site?.metadata?.content?.name}
               priority={true}
             />
-            <div className="flex-1 min-w-0 relative">
+            <div className="flex-1 min-w-0 relative space-y-2 sm:space-y-3">
               <div className="flex items-center justify-between">
                 <h1 className="xlog-site-name text-3xl sm:text-4xl font-bold text-zinc-900 leading-snug break-words min-w-0">
                   {site?.metadata?.content?.site_name ||
@@ -104,7 +105,7 @@ export const SiteHeader = async ({
                 </div>
               </div>
               {site?.metadata?.content?.bio && (
-                <div className="xlog-site-description text-gray-500 leading-snug my-2 sm:my-3 text-sm sm:text-base line-clamp-4 whitespace-pre-wrap">
+                <div className="xlog-site-description text-gray-500 leading-snug text-sm sm:text-base line-clamp-4 whitespace-pre-wrap">
                   {site?.metadata?.content?.bio}
                 </div>
               )}
@@ -116,6 +117,10 @@ export const SiteHeader = async ({
                   <PatronButton site={site || undefined} />
                 </span>
               </div>
+              <ConnectedAccounts
+                className="hidden sm:block"
+                connectedAccounts={site?.metadata?.content?.connected_accounts}
+              />
             </div>
           </div>
         </div>

src/components/ui/Image.tsx

@@ -120,7 +120,7 @@ export const Image = ({
     />
   ) : (
     <span
-      className="inline-block w-full h-full overflow-hidden"
+      className="inline-flex justify-center w-full h-full overflow-hidden"
       style={
         autoSize
           ? {