feat: Implement room search and clean interface (#234)

.storybook/main.ts

@@ -1,3 +1,4 @@
+/* eslint-disable unicorn/prefer-module */
 import type {StorybookConfig} from "@storybook/react-vite"
 import path from "node:path"
 
@@ -17,7 +18,7 @@ const config: StorybookConfig = {
 
     config.resolve.alias = {
       ...config.resolve.alias,
-      "@": path.resolve(import.meta.dirname, "../src"),
+      "@": path.resolve(__dirname, "../src"),
     }
 
     return config

.storybook/preview.ts

@@ -1,5 +1,6 @@
 import type {Preview} from "@storybook/react"
-import "../src/styles/tailwind.css"
+import "@/styles/tailwind.css"
+import "@/styles/storybook.css"
 
 const preview: Preview = {
   parameters: {

components.json

@@ -12,6 +12,6 @@
   },
   "aliases": {
     "components": "@/components",
-    "utils": " @/utils"
+    "utils": "@/utils"
   }
 }

src/components/AppLogo.tsx

@@ -1,19 +1,20 @@
 import {StaticAssetPath} from "@/utils/util"
 import {type FC} from "react"
 import {ReactSVG} from "react-svg"
-import Typography, {TypographyVariant} from "./Typography"
+import {Heading} from "./ui/typography"
 
 const AppLogo: FC = () => {
   return (
     <div className="flex w-max flex-col items-center">
       <ReactSVG src={StaticAssetPath.NewAppLogo} className="drop-shadow-sm" />
 
-      <Typography
-        className="font-unbounded font-bold"
-        variant={TypographyVariant.BodyMedium}
+      <Heading
+        level="h6"
+        weight="bold"
+        className="font-unbounded uppercase"
         style={{color: "#D64DF4", textShadow: "#d54df433 0 1px 0"}}>
-        MIRAGE
-      </Typography>
+        Mirage
+      </Heading>
     </div>
   )
 }

src/components/AudioFilePreview.tsx

@@ -1,7 +1,6 @@
 import {useRef, type FC} from "react"
-import Typography, {TypographyVariant} from "./Typography"
 import {IoCloseCircle, IoPause, IoPlay} from "react-icons/io5"
-import {fileSizeToString, getFileExtension} from "./FileMessage"
+import {getFileExtension} from "./FileMessage"
 import {ReactSVG} from "react-svg"
 import {StaticAssetPath} from "@/utils/util"
 import {useWavesurfer} from "@wavesurfer/react"
@@ -19,14 +18,13 @@ export type AudioFilePreviewProps = {
 
 const AudioFilePreview: FC<AudioFilePreviewProps> = ({
   fileName,
-  fileSize,
   audioUrl,
   onClose,
   onSend,
 }) => {
   const {t} = useTranslation()
 
-  const fileExtension = getFileExtension(fileName).toUpperCase()
+  const _fileExtension = getFileExtension(fileName).toUpperCase()
 
   const waveformRef = useRef(null)
 
@@ -46,23 +44,26 @@ const AudioFilePreview: FC<AudioFilePreviewProps> = ({
   return (
     <div className="flex w-messageMaxWidth flex-col rounded border bg-slate-50 shadow-lg">
       <div className="flex h-16 w-full items-center rounded-t border-b bg-slate-100 px-5">
-        <Typography
+        {/* TODO: Use ui/typography.tsx */}
+        {/* <Typography
           variant={TypographyVariant.HeadingMedium}
           className="w-full">
           {t(LangKey.UploadAudio)}
-        </Typography>
+        </Typography> */}
 
         <IoCloseCircle size={20} color="gray" role="button" onClick={onClose} />
       </div>
 
       <div className="flex size-full flex-col gap-3 p-4">
         <div className="flex w-full flex-col items-center gap-2 rounded border bg-white p-2">
           <div className="flex w-full">
-            <Typography
+            {/* TODO: Use ui/typography.tsx */}
+
+            {/* <Typography
               className="line-clamp-1 font-light text-slate-700"
               variant={TypographyVariant.Body}>
               {fileName}
-            </Typography>
+            </Typography> */}
           </div>
 
           <div className="flex w-full items-center gap-2 rounded bg-slate-100 p-2 shadow">
@@ -92,7 +93,9 @@ const AudioFilePreview: FC<AudioFilePreviewProps> = ({
           </div>
 
           <div className="flex w-full">
-            <Typography
+            {/* TODO: Use ui/typography.tsx */}
+
+            {/* <Typography
               className="w-full font-semibold text-gray-400"
               variant={TypographyVariant.BodySmall}>
               {fileExtension}
@@ -102,7 +105,7 @@ const AudioFilePreview: FC<AudioFilePreviewProps> = ({
               className="min-w-20 text-right font-semibold text-gray-400"
               variant={TypographyVariant.BodySmall}>
               {fileSizeToString(fileSize)}
-            </Typography>
+            </Typography> */}
           </div>
         </div>
 

src/components/AudioMessage.tsx

@@ -1,7 +1,7 @@
 import {useEffect, useRef, useState, type FC} from "react"
 import {IoAlertCircle, IoPause, IoPlay} from "react-icons/io5"
 import AvatarImage, {AvatarType} from "./AvatarImage"
-import {assert, CommonAssertion, formatTime, validateUrl} from "@/utils/util"
+import {assert, formatTime, validateUrl} from "@/utils/util"
 import {useWavesurfer} from "@wavesurfer/react"
 import useAudioPlayerStore from "@/hooks/util/useAudioPlayerStore"
 import {type MessageBaseData, type MessageBaseProps} from "./MessageContainer"
@@ -27,8 +27,6 @@ const AudioMessage: FC<AudioMessageProps> = ({
   messageId,
   userId,
 }) => {
-  assert(messageId.length > 0, CommonAssertion.MessageIdEmpty)
-
   if (audioUrl !== undefined) {
     assert(validateUrl(audioUrl), "The audio url should be valid.")
   }