Feat: Updated Mobile View (#21)

groq · Feb 6, 2025 · ff39379 · ff39379
1 parent 6c0ac22
commit ff39379
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 32 deletions.
diff --git a/src/app/components/new-button.tsx b/src/app/components/new-button.tsx
@@ -17,23 +17,37 @@ export function NewButton({ className }: { className?: string }) {
 		setCurrentFeedback,
 	} = useStudio();
 	const router = useRouter();
+
+	const handleClick = () => {
+		setStudioMode(false);
+		setQuery("");
+		setHistory([]);
+		setHistoryIndex(-1);
+		setCurrentHtml("");
+		setSessionId(uuidv4());
+		setMode("query");
+		setCurrentFeedback("");
+		router.push("/");
+	};
+
 	return (
-		<Button
-			className={cn("flex items-center gap-2", className)}
-			onClick={() => {
-				setStudioMode(false);
-				setQuery("");
-				setHistory([]);
-				setHistoryIndex(-1);
-				setCurrentHtml("");
-				setSessionId(uuidv4());
-				setMode("query");
-				setCurrentFeedback("");
-				router.push("/");
-			}}
-		>
-			<Plus size={16} />
-			<span className="hidden lg:flex">New</span>
-		</Button>
+		<>
+			{/* Mobile view - just the icon */}
+			<button
+				onClick={handleClick}
+				className={cn("lg:hidden text-foreground px-2", className)}
+			>
+				<Plus size={20} />
+			</button>
+
+			{/* Desktop view - full button */}
+			<Button
+				className={cn("hidden lg:flex items-center gap-2", className)}
+				onClick={handleClick}
+			>
+				<Plus size={16} />
+				<span>New</span>
+			</Button>
+		</>
 	);
 }
diff --git a/src/app/components/options-button.tsx b/src/app/components/options-button.tsx
@@ -14,9 +14,10 @@ export function OptionsButton({ className }: { className?: string }) {
 	return (
 		<DropdownMenu>
 			<DropdownMenuTrigger asChild>
-				<Button variant="outline" size="icon" className={cn(className)}>
-					<Ellipsis size={16} />
-				</Button>
+				{/* Mobile view - just the icon */}
+				<button className={cn("lg:hidden text-foreground px-2", className)}>
+					<Ellipsis size={20} />
+				</button>
 			</DropdownMenuTrigger>
 			<DropdownMenuContent>
 				<DropdownMenuItem onClick={() => setIsOverlayOpen(!isOverlayOpen)}>

diff --git a/src/app/components/prompt-input.tsx b/src/app/components/prompt-input.tsx
@@ -79,7 +79,9 @@ export function PromptInput() {
 				}}
 			/>
 			<MicrophoneButton onTranscription={handleTranscription} />
-			<SubmitButton />
+			<div className="flex-shrink-0">
+				<SubmitButton />
+			</div>
 		</div>
 	);
 }
diff --git a/src/app/components/studio-view.tsx b/src/app/components/studio-view.tsx
@@ -109,12 +109,13 @@ function HomeContent() {
 	return (
 		<main className="h-screen flex flex-col overflow-hidden">
 			{/* Top Input Bar */}
-			<div className="p-4 bg-background border-b flex-shrink-0">
+			<div className="p-4 bg-background lg:border-b flex-shrink-0">
 				<div className="flex flex-col gap-4">
 					{/* Mobile Layout */}
-					<div className="flex flex-col gap-2 lg:hidden">
+
+					<div className="flex flex-col gap-4 lg:hidden">
 						{/* Top Row - Controls */}
-						<div className="flex items-center justify-between gap-2">
+						<div className="flex items-center justify-between gap-2 mb-1">
 							<NewButton />
 							<VersionSwitcher
 								className="justify-center flex-1"

diff --git a/src/app/components/submit-button.tsx b/src/app/components/submit-button.tsx
@@ -1,5 +1,6 @@
 import { Button } from "@/components/ui/button";
 import { useStudio } from "@/providers/studio-provider";
+import { SendHorizontal, Wand2 } from "lucide-react";
 
 export function SubmitButton() {
 	const {
@@ -16,20 +17,30 @@ export function SubmitButton() {
 				(mode === "query" && (!query.trim() || isGenerating)) ||
 				(mode === "feedback" && isApplying)
 			}
-			className={`bg-groq text-groq-foreground transition-all duration-200 rounded-full ${
+			size="default"
+			className={`bg-groq text-groq-foreground transition-all duration-200 rounded-full lg:px-4 lg:h-10 lg:w-auto w-10 h-10 ${
 				isGenerating || isApplying
 					? "loading-animation"
 					: "bg-[#F55036] hover:bg-[#D93D26]"
 			}`}
 			onClick={mode === "query" ? generateHtml : submitFeedback}
 		>
-			{mode === "query"
-				? isGenerating
-					? "Generating..."
-					: "Generate"
-				: isApplying
-					? "Applying..."
-					: "Apply Edit"}
+			<span className="hidden lg:inline">
+				{mode === "query"
+					? isGenerating
+						? "Generating..."
+						: "Generate"
+					: isApplying
+						? "Applying..."
+						: "Apply Edit"}
+			</span>
+			<span className="lg:hidden">
+				{mode === "query" ? (
+					<Wand2 className="h-4 w-4" />
+				) : (
+					<SendHorizontal className="h-4 w-4" />
+				)}
+			</span>
 		</Button>
 	);
 }