streamlined folder structure and updated imports

code/frontend/src/components/profile/username/Username.tsx

@@ -0,0 +1,43 @@
+import { useState } from "react";
+import { Popover, Typography } from "@mui/material";
+import "./username.css";
+
+export default function Username({ username }: { username: string }) {
+  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
+
+  const openPopover = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const closePopover = () => {
+    setAnchorEl(null);
+  };
+
+  const isPopoverOpen = Boolean(anchorEl);
+  const id = isPopoverOpen ? "simple-popover" : undefined;
+
+  return (
+    <>
+      <Popover
+        className="profile-popover"
+        onClose={closePopover}
+        id={id}
+        open={isPopoverOpen}
+        anchorEl={anchorEl}
+        anchorOrigin={{
+          vertical: "top",
+          horizontal: "left",
+        }}
+        transformOrigin={{
+          vertical: "bottom",
+          horizontal: "left",
+        }}
+      >
+        <Typography sx={{ p: 1 }}>{username}</Typography>
+      </Popover>
+      <span className="profile-username body-bold" onClick={openPopover}>
+        {username}
+      </span>
+    </>
+  );
+}