diff --git a/.cursor/rules/general.mdc b/.cursor/rules/general.mdc
index 1721dab..52b590d 100644
--- a/.cursor/rules/general.mdc
+++ b/.cursor/rules/general.mdc
@@ -10,4 +10,5 @@ When working with this project, follow these rules:
need to typecheck or build the app, in that case:
- To typecheck, run "npm run frontend:typecheck".
- - To build, run "npm run frontend:build".
\ No newline at end of file
+ - To build, run "npm run frontend:build".
+- Do NOT "cd" to the project directory.
\ No newline at end of file
diff --git a/frontend/src/ui/components/chat/EditMessageDialog.tsx b/frontend/src/ui/components/chat/EditMessageDialog.tsx
index 5e2e8b1..9ff7b20 100644
--- a/frontend/src/ui/components/chat/EditMessageDialog.tsx
+++ b/frontend/src/ui/components/chat/EditMessageDialog.tsx
@@ -1,6 +1,6 @@
import { useState, useEffect } from "react";
import type { Message } from "../../../core/types";
-import { MaterialDialog } from "../Dialog";
+import { MaterialDialog } from "../core/Dialog";
interface EditMessageDialogProps {
isOpen: boolean;
diff --git a/frontend/src/ui/components/chat/ReplyMessageDialog.tsx b/frontend/src/ui/components/chat/ReplyMessageDialog.tsx
index 85fd727..0af2fd1 100644
--- a/frontend/src/ui/components/chat/ReplyMessageDialog.tsx
+++ b/frontend/src/ui/components/chat/ReplyMessageDialog.tsx
@@ -1,6 +1,7 @@
import { useState, useEffect } from "react";
import type { Message } from "../../../core/types";
-import { MaterialDialog } from "../Dialog";
+import { MaterialDialog } from "../core/Dialog";
+import { MaterialTextField } from "../core/TextField";
interface ReplyMessageDialogProps {
isOpen: boolean;
@@ -42,14 +43,13 @@ export function ReplyMessageDialog({ isOpen, onOpenChange, replyToMessage, onSen
{replyToMessage.content}
- setReplyContent((e.target as HTMLInputElement).value)}
label="Reply"
variant="outlined"
placeholder="Type your reply..."
- maxlength={1000}>
-
+ maxlength={1000} />
Cancel
Send Reply
diff --git a/frontend/src/ui/components/chat/UserProfileDialog.tsx b/frontend/src/ui/components/chat/UserProfileDialog.tsx
index b3cbdc9..14e3f11 100644
--- a/frontend/src/ui/components/chat/UserProfileDialog.tsx
+++ b/frontend/src/ui/components/chat/UserProfileDialog.tsx
@@ -1,6 +1,6 @@
import type { DialogProps } from "../../../core/types";
import type { UserProfile } from "../../../core/types";
-import { MaterialDialog } from "../Dialog";
+import { MaterialDialog } from "../core/Dialog";
import { formatTime } from "../../../utils/utils";
import defaultAvatar from "../../../resources/images/default-avatar.png";
diff --git a/frontend/src/ui/components/Dialog.tsx b/frontend/src/ui/components/core/Dialog.tsx
similarity index 97%
rename from frontend/src/ui/components/Dialog.tsx
rename to frontend/src/ui/components/core/Dialog.tsx
index 7b0d758..6735ae5 100644
--- a/frontend/src/ui/components/Dialog.tsx
+++ b/frontend/src/ui/components/core/Dialog.tsx
@@ -1,7 +1,7 @@
import type { Dialog as MduiDialog } from "mdui/components/dialog";
import React, { useEffect, useRef } from "react"
import { createPortal } from "react-dom";
-import { id } from "../../utils/utils";
+import { id } from "../../../utils/utils";
export interface BaseDialogProps {
onOpenChange: (value: boolean) => void;
diff --git a/frontend/src/ui/components/core/TextField.tsx b/frontend/src/ui/components/core/TextField.tsx
new file mode 100644
index 0000000..c1d0c0b
--- /dev/null
+++ b/frontend/src/ui/components/core/TextField.tsx
@@ -0,0 +1,9 @@
+import type { TextField } from "mdui/components/text-field";
+
+type TextFieldProps = React.ComponentPropsWithoutRef<"mdui-text-field">
+
+export function MaterialTextField(props: TextFieldProps & { ref?: React.Ref }) {
+ return })} />
+}
\ No newline at end of file
diff --git a/frontend/src/ui/components/profile/ProfileDialog.tsx b/frontend/src/ui/components/profile/ProfileDialog.tsx
index a012957..fbfdee4 100644
--- a/frontend/src/ui/components/profile/ProfileDialog.tsx
+++ b/frontend/src/ui/components/profile/ProfileDialog.tsx
@@ -2,9 +2,10 @@ import { useState, useEffect, useRef, type FormEvent } from "react";
import defaultAvatar from "../../../resources/images/default-avatar.png";
import type { TextField } from "mdui/components/text-field";
import type { DialogProps } from "../../../core/types";
-import { MaterialDialog } from "../Dialog";
+import { MaterialDialog } from "../core/Dialog";
import { useProfile } from "../../hooks/useProfile";
import { ImageCropper } from "./ImageCropper";
+import { MaterialTextField } from "../core/TextField";
export function ProfileDialog({ isOpen, onOpenChange }: DialogProps) {
const { profileData, isLoading, isUpdating, updateProfileData, uploadProfilePictureData } = useProfile();
@@ -109,19 +110,18 @@ export function ProfileDialog({ isOpen, onOpenChange }: DialogProps) {
onChange={handleImageSelect}
/>
- ) => setUsername((e.target as TextField).value)}
autocomplete="username"
- disabled={isLoading || isUpdating}
- />
+ disabled={isLoading || isUpdating} />