admin/PromptArch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add full mobile responsive design with hamburger menu, responsive components, and mobile optimizations

Browse Source
This commit is contained in:
Gemini AI
2025-12-26 15:57:31 +04:00
Unverified
parent d3c3490655
commit 6b33913471
10 changed files with 341 additions and 243 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
components/HistoryPanel.tsx
View File

@@ -4,7 +4,6 @@ import useStore from "@/lib/store";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Clock, Trash2, RotateCcw } from "lucide-react";
import { cn } from "@/lib/utils";
export default function HistoryPanel() {
const { history, setCurrentPrompt, clearHistory } = useStore();
@@ -22,11 +21,11 @@ export default function HistoryPanel() {
if (history.length === 0) {
return (
<Card>
<CardContent className="flex h-[400px] items-center justify-center">
<CardContent className="flex h-[300px] lg:h-[400px] items-center justify-center p-4 lg:p-6">
<div className="text-center">
<Clock className="mx-auto h-12 w-12 text-muted-foreground/50" />
<p className="mt-4 text-muted-foreground">No history yet</p>
<p className="mt-2 text-sm text-muted-foreground">
<Clock className="mx-auto h-10 w-10 lg:h-12 lg:w-12 text-muted-foreground/50" />
<p className="mt-3 lg:mt-4 text-sm lg:text-base text-muted-foreground">No history yet</p>
<p className="mt-1.5 lg:mt-2 text-xs lg:text-sm text-muted-foreground">
Start enhancing prompts to see them here
</p>
</div>
@@ -37,35 +36,35 @@ export default function HistoryPanel() {
return (
<Card>
<CardHeader className="flex-row items-center justify-between">
<CardHeader className="flex-row items-center justify-between p-4 lg:p-6">
<div>
<CardTitle>History</CardTitle>
<CardDescription>{history.length} items</CardDescription>
<CardTitle className="text-base lg:text-lg">History</CardTitle>
<CardDescription className="text-xs lg:text-sm">{history.length} items</CardDescription>
</div>
<Button variant="outline" size="icon" onClick={handleClear}>
<Trash2 className="h-4 w-4" />
<Button variant="outline" size="icon" onClick={handleClear} className="h-8 w-8 lg:h-9 lg:w-9">
<Trash2 className="h-3.5 w-3.5 lg:h-4 lg:w-4" />
</Button>
</CardHeader>
<CardContent className="space-y-3">
<CardContent className="space-y-2 lg:space-y-3 p-4 lg:p-6 pt-0 lg:pt-0">
{history.map((item) => (
<div
key={item.id}
className="rounded-md border bg-muted/30 p-4 transition-colors hover:bg-muted/50"
className="rounded-md border bg-muted/30 p-3 lg:p-4 transition-colors hover:bg-muted/50"
>
<div className="mb-2 flex items-center justify-between">
<span className="text-xs text-muted-foreground">
<div className="mb-1.5 lg:mb-2 flex items-center justify-between gap-2">
<span className="text-[10px] lg:text-xs text-muted-foreground truncate">
{new Date(item.timestamp).toLocaleString()}
</span>
<Button
variant="ghost"
size="icon"
className="h-6 w-6"
className="h-6 w-6 flex-shrink-0"
onClick={() => handleRestore(item.prompt)}
>
<RotateCcw className="h-3 w-3" />
</Button>
</div>
<p className="line-clamp-3 text-sm">{item.prompt}</p>
<p className="line-clamp-3 text-xs lg:text-sm">{item.prompt}</p>
</div>
))}
</CardContent>