Backup branch

package.json

@@ -47,6 +47,8 @@
     "@crossbell/util-hooks": "1.5.27",
     "@crossbell/util-metadata": "1.5.27",
     "@ddietr/codemirror-themes": "1.4.2",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
     "@floating-ui/react": "0.26.16",
     "@headlessui/react": "1.7.19",
     "@heroicons/react": "2.1.3",
@@ -57,6 +59,8 @@
     "@mantine/hooks": "7.10.0",
     "@microflash/remark-callout-directives": "4.1.0",
     "@monaco-editor/react": "4.6.0",
+    "@mui/icons-material": "^7.0.2",
+    "@mui/material": "^7.0.2",
     "@popperjs/core": "2.11.8",
     "@prisma/client": "5.14.0",
     "@shikijs/transformers": "^1.6.0",
@@ -66,7 +70,7 @@
     "@urql/core": "5.0.3",
     "@vercel/otel": "1.8.2",
     "@wagmi/core": "1",
-    "@xlog/shiki": "link:./packages/shiki",
+    "@xlog/shiki": "file:./packages/shiki",
     "ahooks": "3.8.0",
     "aplayer": "1.10.1",
     "async-lock": "1.4.1",

src/components/home/BlockNumber.tsx

@@ -3,6 +3,8 @@
 import { useTranslations } from "next-intl"
 import { useEffect, useState } from "react"
 
+import { Box, CircularProgress, Typography } from "@mui/material"
+
 import AnimatedNumber from "~/components/common/AnimatedNumber"
 import { useGetBlockNumber } from "~/queries/site"
 
@@ -32,13 +34,25 @@ export const BlockNumber = () => {
   }, [])
 
   return (
-    <div className="flex flex-col items-center">
-      {t("Current Block Height")}
-      <AnimatedNumber
-        animateToNumber={realBlockNumber || blockNumber || 0}
-        includeComma={true}
-        height={24}
-      ></AnimatedNumber>
-    </div>
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        textAlign: "center",
+      }}
+    >
+      <Typography variant="h6">{t("Current Block Height")}</Typography>
+      {realBlockNumber === null ? (
+        <CircularProgress size={24} sx={{ marginTop: 2 }} />
+      ) : (
+        <AnimatedNumber
+          animateToNumber={realBlockNumber || blockNumber || 0}
+          includeComma={true}
+          height={24}
+        />
+      )}
+    </Box>
   )
 }

src/components/home/HomeActivitiesTabs.tsx

@@ -5,32 +5,19 @@ import { usePathname, useRouter } from "next/navigation"
 
 import { useConnectedAction } from "@crossbell/connect-kit"
 
-import { Tabs } from "~/components/ui/Tabs"
-
 import topics from "../../../data/topics.json"
+import { TabsComponent } from "../../components/ui/Tabs"
 
 export const HomeActivitiesTabs = () => {
   const pathname = usePathname()
   const router = useRouter()
   const t = useTranslations()
 
   const tabs = [
-    {
-      text: "Featured",
-      href: "/",
-    },
-    {
-      text: "Shorts",
-      href: "/shorts",
-    },
-    {
-      text: "Latest",
-      href: "/latest",
-    },
-    {
-      text: "Hottest",
-      href: "/hottest",
-    },
+    { text: "Featured", href: "/" },
+    { text: "Shorts", href: "/shorts" },
+    { text: "Latest", href: "/latest" },
+    { text: "Hottest", href: "/hottest" },
     {
       text: "Following",
       onClick: useConnectedAction(() => router.push(`/following`)),
@@ -42,5 +29,5 @@ export const HomeActivitiesTabs = () => {
     })),
   ]
 
-  return <Tabs items={tabs} className="border-none" />
+  return <TabsComponent items={tabs} className="border-none" />
 }

src/components/ui/APlayer.tsx

@@ -4,11 +4,13 @@ import { useTranslations } from "next-intl"
 import Image from "next/image"
 import { memo } from "react"
 
+import { Box, IconButton, Tooltip, Typography } from "@mui/material" // Importing Tooltip from MUI
+
 import {
   sitePlayerAddToPlaylist,
   sitePlayerPlayNow,
 } from "~/components/common/SitePlayer"
-import { Tooltip } from "~/components/ui/Tooltip"
+// MUI imports
 import { toGateway } from "~/lib/ipfs-parser"
 
 const APlayer = memo(function APlayer({
@@ -55,57 +57,77 @@ const APlayer = memo(function APlayer({
   }
 
   return (
-    <div className="border border-[var(--border-color)] rounded-lg outline-2 outline-transparent flex flex-row gap-4">
-      {/*Info*/}
-      <div className="flex flex-row grow gap-4">
-        {/*Cover*/}
-        <div className="shrink-0">
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "row",
+        gap: 2,
+        border: "1px solid",
+        borderColor: "var(--border-color)",
+        borderRadius: "8px",
+        outline: "2px solid transparent",
+        alignItems: "center",
+      }}
+    >
+      {/* Info Section */}
+      <Box sx={{ display: "flex", gap: 2, flexGrow: 1, alignItems: "center" }}>
+        {/* Cover Image */}
+        <Box sx={{ flexShrink: 0 }}>
           <Image
             width={72}
             height={72}
             alt={audioInfo.name}
             src={audioInfo.cover}
             className="rounded-l-lg"
           />
-        </div>
+        </Box>
 
-        {/*Name & Artist*/}
-        <div className="flex flex-col justify-center items-center">
-          {/*Name*/}
-          <div className="font-semibold">{audioInfo.name}</div>
+        {/* Name & Artist */}
+        <Box
+          sx={{
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "center",
+          }}
+        >
+          {/* Name */}
+          <Typography variant="h6" sx={{ fontWeight: "bold" }}>
+            {audioInfo.name}
+          </Typography>
 
-          {/*Artist*/}
-          <div className="text-sm">{audioInfo.artist}</div>
-        </div>
-      </div>
+          {/* Artist */}
+          <Typography variant="body2" color="textSecondary">
+            {audioInfo.artist}
+          </Typography>
+        </Box>
+      </Box>
 
-      {/*Control buttons*/}
-      <div className="flex flex-row items-center mr-4 gap-3">
-        {/*Play Now*/}
-        <div>
-          <Tooltip label={t("Play")}>
-            <button
-              onClick={playNow}
-              className="p-2 rounded-full bg-accent opacity-90 hover:opacity-100 transition-opacity"
-            >
-              <i className="i-mingcute-play-fill block text-4xl text-white" />
-            </button>
-          </Tooltip>
-        </div>
+      {/* Control Buttons */}
+      <Box sx={{ display: "flex", gap: 2, alignItems: "center", mr: 2 }}>
+        {/* Play Now Button */}
+        <Tooltip title={t("Play")} arrow>
+          <IconButton
+            onClick={playNow}
+            sx={{
+              bgcolor: "accent.main",
+              "&:hover": { bgcolor: "accent.dark" },
+            }}
+          >
+            <i className="i-mingcute-play-fill text-white text-4xl" />
+          </IconButton>
+        </Tooltip>
 
-        {/*Add to playlist*/}
-        <div>
-          <Tooltip label={t("Add to playlist")}>
-            <button
-              onClick={addToList}
-              className="p-2 rounded-full bg-gray-50 hover:bg-gray-100"
-            >
-              <i className="i-mingcute-calendar-add-line block text-2xl" />
-            </button>
-          </Tooltip>
-        </div>
-      </div>
-    </div>
+        {/* Add to Playlist Button */}
+        <Tooltip title={t("Add to playlist")} arrow>
+          <IconButton
+            onClick={addToList}
+            sx={{ bgcolor: "grey.50", "&:hover": { bgcolor: "grey.100" } }}
+          >
+            <i className="i-mingcute-calendar-add-line text-2xl" />
+          </IconButton>
+        </Tooltip>
+      </Box>
+    </Box>
   )
 })
 

src/components/ui/AdvancedImage.tsx

@@ -1,5 +1,7 @@
 import { memo } from "react"
 
+import { Box } from "@mui/material" // MUI Box for layout
+
 import FadeIn from "~/components/common/FadeIn"
 import { Image, type TImageProps } from "~/components/ui/Image"
 import { SITE_URL } from "~/lib/env"
@@ -33,16 +35,25 @@ const AdvancedImage = memo(async function AdvancedImage(props: TImageProps) {
 
   return (
     <FadeIn className="text-center">
-      <Image
-        {...autoProps}
-        {...props}
-        zoom
-        className={cn(
-          props.className,
-          info && info.size.height < 50 ? "" : "rounded-xl",
-        )}
-        alt={props.alt || "image"}
-      />
+      <Box
+        sx={{
+          display: "inline-block",
+          borderRadius: info && info.size.height < 50 ? "none" : "16px", // Rounded corners with MUI styling
+          overflow: "hidden",
+          textAlign: "center",
+        }}
+      >
+        <Image
+          {...autoProps}
+          {...props}
+          zoom
+          className={cn(
+            props.className,
+            info && info.size.height < 50 ? "" : "rounded-xl",
+          )}
+          alt={props.alt || "image"}
+        />
+      </Box>
     </FadeIn>
   )
 })

src/components/ui/Avatar.tsx

@@ -1,6 +1,7 @@
 import React, { useMemo } from "react"
 
-import { Image } from "~/components/ui/Image"
+import { Box, Avatar as MuiAvatar } from "@mui/material" // MUI Avatar and Box for layout
+
 import { getRandomAvatarUrl } from "~/lib/helpers"
 import { toGateway } from "~/lib/ipfs-parser"
 import { cn } from "~/lib/utils"
@@ -17,50 +18,56 @@ export const Avatar = ({
   ...props
 }: {
   cid?: string | number | null
-  images: (string | null | undefined)[]
+  images: (string | null | undefined)[] // List of image URLs
   name?: string | null
-  size?: number
-  rounded?: boolean
-  imageRef?: React.MutableRefObject<HTMLImageElement>
-  className?: string
-  priority?: boolean
+  size?: number // Size of the avatar
+  rounded?: boolean // Whether the avatar should be circular or not
+  imageRef?: React.MutableRefObject<HTMLImageElement> // Reference for the image
+  className?: string // Custom classes for additional styling
+  priority?: boolean // Whether to load image with priority
 } & React.HTMLAttributes<HTMLSpanElement>) => {
-  size = size || 60
+  size = size || 60 // Default size is 60 if not provided
 
+  // Select the first valid image from the images list
   let image = useMemo(() => {
     for (const image of images) {
-      if (image) return toGateway(image)
+      if (image) return toGateway(image) // Convert the image to the gateway URL
     }
   }, [images])
 
-  const borderRadius = rounded === false ? "rounded-lg" : "rounded-full"
+  // If no image is found, use a random avatar
+  const borderRadius = rounded === false ? "8px" : "50%" // Rounded or square avatar
 
   if (!image) {
-    image = getRandomAvatarUrl(cid || "")
+    image = getRandomAvatarUrl(cid || "") // Default to a random avatar URL
   }
 
   return (
-    <span
+    <Box
       {...props}
       className={cn(
-        `inline-flex text-zinc-500 shrink-0 items-center justify-center font-medium uppercase overflow-hidden text-[0px] max-w-full max-h-full`,
-        borderRadius,
+        "inline-flex items-center justify-center overflow-hidden",
         className,
       )}
-      style={{
+      sx={{
         width: `${size}px`,
         height: `${size}px`,
+        borderRadius: borderRadius,
+        overflow: "hidden",
       }}
     >
-      <Image
-        className="h-full overflow-hidden object-cover"
+      <MuiAvatar
+        alt={name || "Avatar"}
         src={image}
-        width={size}
-        height={size}
-        alt={name || ""}
-        imageRef={imageRef}
+        sx={{
+          width: "100%",
+          height: "100%",
+          objectFit: "cover",
+          borderRadius: "inherit", // Ensure the border radius applies to the image
+        }}
+        ref={imageRef}
         priority={priority}
       />
-    </span>
+    </Box>
   )
 }