refactor: remove "more" menu in menubar

src/components/ThemeIcon.tsx

@@ -2,7 +2,11 @@ import { useContext } from "react";
 import { ThemeContext } from "@/context/Theme";
 import { MoonIcon, SunIcon, SunMoonIcon } from "lucide-react";
 
-function ThemeIcon() {
+interface Props {
+	inApp?: boolean;
+}
+
+function ThemeIcon({ inApp }: Props) {
 	const { theme, setTheme } = useContext(ThemeContext);
 
 	const onClick = () => {
@@ -11,18 +15,20 @@ function ThemeIcon() {
 	};
 
 	const getIcon = () => {
+		const size = inApp ? 24 : 30;
+
 		switch (theme) {
 			case "light":
-				return <SunIcon size={30} />;
+				return <SunIcon size={size} />;
 			case "dark":
-				return <MoonIcon size={30} />;
+				return <MoonIcon size={size} />;
 			case "system":
-				return <SunMoonIcon size={30} />;
+				return <SunMoonIcon size={size} />;
 		}
 	};
 
 	return (
-		<button onClick={onClick} title={theme} className="text-white">
+		<button onClick={onClick} title={theme} className={`text-white ${inApp ? "text-black" : ""}`}>
 			{getIcon()}
 		</button>
 	);

src/components/menubar/MoreMenu.tsx

@@ -1,15 +0,0 @@
-import { MenubarContent, MenubarMenu, MenubarTrigger } from "@/components/ui/menubar";
-import ThemeChanger from "./ThemeChanger";
-
-function MoreMenu() {
-	return (
-		<MenubarMenu>
-			<MenubarTrigger>More</MenubarTrigger>
-			<MenubarContent>
-				<ThemeChanger />
-			</MenubarContent>
-		</MenubarMenu>
-	);
-}
-
-export default MoreMenu;

src/components/menubar/index.tsx

@@ -10,7 +10,8 @@ import FileMenu from "./FileMenu";
 import EditMenu from "./EditMenu";
 import SelectMenu from "./SelectMenu";
 import ViewMenu from "./ViewMenu";
-import MoreMenu from "./MoreMenu";
+
+import ThemeIcon from "@/components/ThemeIcon";
 
 import BlockmaticIcon from "@/assets/blockmatic-icon-colored.svg?react";
 import BlockmaticText from "@/assets/blockmatic-text-colored.svg?react";
@@ -31,11 +32,13 @@ function Menubar() {
 				<EditMenu />
 				<SelectMenu />
 				<ViewMenu />
-				<MoreMenu />
 
-				<a href="https://github.com/trafficlunar/blockmatic" className="w-6 absolute right-2">
-					<GithubIcon fill={isDark ? "white" : "black"} />
-				</a>
+				<div className="absolute right-3 flex items-center gap-1">
+					<ThemeIcon inApp={true} />
+					<a href="https://github.com/trafficlunar/blockmatic" className="w-5">
+						<GithubIcon fill={isDark ? "white" : "black"} />
+					</a>
+				</div>
 			</UIMenubar>
 		</DialogProvider>
 	);

src/pages/IndexPage.tsx

@@ -7,7 +7,7 @@ import { ThemeContext } from "@/context/Theme";
 import { Button } from "@/components/ui/button";
 import { Separator } from "@/components/ui/separator";
 
-import ThemeIcon from "@/components/home/ThemeIcon";
+import ThemeIcon from "@/components/ThemeIcon";
 import ImageComparison from "@/components/home/ImageComparison";
 
 import BlockmaticLogo from "@/assets/blockmatic.svg?react";
@@ -22,12 +22,12 @@ function IndexPage() {
 			<header className="w-full flex justify-evenly p-8 z-10">
 				<BlockmaticLogo className="h-16 w-max" fill={"white"} />
 
-				<div className="flex items-center gap-2">
+				<div className="flex items-center gap-1">
 					<Button className="bg-white text-black hover:bg-zinc-50/90 mr-4" asChild>
 						<Link to={{ pathname: "/app" }}>Editor</Link>
 					</Button>
 
-					<a href="https://github.com/trafficlunar/blockmatic" className="w-8">
+					<a href="https://github.com/trafficlunar/blockmatic" className="w-7">
 						<GithubIcon fill="white" />
 					</a>
 					<ThemeIcon />