kunthawat/moreminimore-vibe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Polish UX for Settings pages; add Go Back button to setting page

Browse Source
This commit is contained in:
Will Chen
2025-04-21 14:42:35 -07:00
parent 8373e20ded
commit 0e48d02a0b
2 changed files with 26 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/settings/ProviderSettingsPage.tsx
View File

@@ -147,7 +147,7 @@ export function ProviderSettingsPage({ provider }: ProviderSettingsPageProps) {
}, [apiKeyInput]); }, [apiKeyInput]);
return ( return (
<div className="min-h-screen p-8"> <div className="min-h-screen px-8 py-4">
<div className="max-w-4xl mx-auto"> <div className="max-w-4xl mx-auto">
<Button <Button
onClick={() => router.history.back()} onClick={() => router.history.back()}

35
src/pages/settings.tsx
View File

@@ -7,12 +7,16 @@ import { showSuccess, showError } from "@/lib/toast";
import { AutoApproveSwitch } from "@/components/AutoApproveSwitch"; import { AutoApproveSwitch } from "@/components/AutoApproveSwitch";
import { TelemetrySwitch } from "@/components/TelemetrySwitch"; import { TelemetrySwitch } from "@/components/TelemetrySwitch";
import { useSettings } from "@/hooks/useSettings"; import { useSettings } from "@/hooks/useSettings";
import { Button } from "@/components/ui/button";
import { ArrowLeft } from "lucide-react";
import { useRouter } from "@tanstack/react-router";
export default function SettingsPage() { export default function SettingsPage() {
const { theme, setTheme } = useTheme(); const { theme, setTheme } = useTheme();
const [isResetDialogOpen, setIsResetDialogOpen] = useState(false); const [isResetDialogOpen, setIsResetDialogOpen] = useState(false);
const [isResetting, setIsResetting] = useState(false); const [isResetting, setIsResetting] = useState(false);
const [appVersion, setAppVersion] = useState<string | null>(null); const [appVersion, setAppVersion] = useState<string | null>(null);
const { settings } = useSettings(); const { settings } = useSettings();
const router = useRouter();
useEffect(() => { useEffect(() => {
// Fetch app version // Fetch app version
@@ -49,18 +53,29 @@ export default function SettingsPage() {
}; };
return ( return (
<div className="min-h-screen p-8"> <div className="min-h-screen px-8 py-4">
<div className="max-w-5xl mx-auto"> <div className="max-w-5xl mx-auto">
<h1 className="text-3xl font-bold mb-8 text-gray-900 dark:text-white"> <Button
Settings onClick={() => router.history.back()}
</h1> variant="outline"
size="sm"
className="flex items-center gap-2 mb-4 bg-(--background-lightest) py-5"
>
<ArrowLeft className="h-4 w-4" />
Go Back
</Button>
<div className="flex justify-between mb-4">
<h1 className="text-3xl font-bold text-gray-900 dark:text-white">
Settings
</h1>
{/* App Version Section */} {/* App Version Section */}
<div className="mb-6 flex items-center text-sm text-gray-500 dark:text-gray-400"> <div className="flex items-center text-sm text-gray-500 dark:text-gray-400">
<span className="mr-2 font-medium">App Version:</span> <span className="mr-2 font-medium">App Version:</span>
<span className="bg-gray-100 dark:bg-gray-700 px-2 py-0.5 rounded text-gray-800 dark:text-gray-200 font-mono"> <span className="bg-gray-100 dark:bg-gray-700 px-2 py-0.5 rounded text-gray-800 dark:text-gray-200 font-mono">
{appVersion ? appVersion : "-"} {appVersion ? appVersion : "-"}
</span> </span>
</div>
</div> </div>
<div className="space-y-6"> <div className="space-y-6">