feat: implement UX enhancements for playground
Add comprehensive UX improvements to color playground: **URL State Sharing:** - Implement URL parameter sync for colors - Add share button to copy playground URLs - Wrap in Suspense boundary for Next.js 16 compatibility - Colors persist in URL for easy sharing **Keyboard Shortcuts:** - Create reusable useKeyboard hook with modifier support - Add Cmd/Ctrl+C to copy current color - Add Cmd/Ctrl+S to share color URL - Add Cmd/Ctrl+R for random color generation - Display keyboard hints in playground header - Cross-platform support (Mac/Windows/Linux) **Color History:** - Implement Zustand store with localStorage persistence - Track up to 50 most recent colors with timestamps - Auto-deduplicate and keep most recent entry - Add visual history grid in playground - Click to restore previous colors - Individual color removal with hover UI - Clear all history option **Playground UI Enhancements:** - Add visual keyboard shortcut indicators (⌘C, ⌘S, ⌘R) - Implement Recent Colors section with 5-column grid - Add hover effects for history color swatches - Individual remove buttons on hover - Toast notifications for all actions - Improved button layout and spacing **Files Added:** - lib/hooks/useKeyboard.ts - Keyboard shortcut management - lib/stores/historyStore.ts - Color history with persistence **Files Modified:** - app/playground/page.tsx - Integrated all UX features Successfully builds with all features working. Ready for user testing. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
valknarness
@@ -1,15 +1,26 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useState, useEffect, Suspense } from 'react';
|
||||
import { useSearchParams, useRouter } from 'next/navigation';
|
||||
import { ColorPicker } from '@/components/color/ColorPicker';
|
||||
import { ColorDisplay } from '@/components/color/ColorDisplay';
|
||||
import { ColorInfo } from '@/components/color/ColorInfo';
|
||||
import { ManipulationPanel } from '@/components/tools/ManipulationPanel';
|
||||
import { useColorInfo } from '@/lib/api/queries';
|
||||
import { Loader2 } from 'lucide-react';
|
||||
import { useKeyboard } from '@/lib/hooks/useKeyboard';
|
||||
import { useColorHistory } from '@/lib/stores/historyStore';
|
||||
import { Loader2, Share2, History, X } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
export default function PlaygroundPage() {
|
||||
const [color, setColor] = useState('#ff0099');
|
||||
function PlaygroundContent() {
|
||||
const searchParams = useSearchParams();
|
||||
const router = useRouter();
|
||||
const [color, setColor] = useState(() => {
|
||||
// Initialize from URL if available
|
||||
const urlColor = searchParams.get('color');
|
||||
return urlColor ? `#${urlColor.replace('#', '')}` : '#ff0099';
|
||||
});
|
||||
|
||||
const { data, isLoading, isError, error } = useColorInfo({
|
||||
colors: [color],
|
||||
@@ -17,6 +28,58 @@ export default function PlaygroundPage() {
|
||||
|
||||
const colorInfo = data?.colors[0];
|
||||
|
||||
// Color history
|
||||
const { history, addColor, removeColor, clearHistory, getRecent } = useColorHistory();
|
||||
const recentColors = getRecent(10);
|
||||
|
||||
// Update URL and history when color changes
|
||||
useEffect(() => {
|
||||
const hex = color.replace('#', '');
|
||||
router.push(`/playground?color=${hex}`, { scroll: false });
|
||||
addColor(color);
|
||||
}, [color, router, addColor]);
|
||||
|
||||
// Share color via URL
|
||||
const handleShare = () => {
|
||||
const url = `${window.location.origin}/playground?color=${color.replace('#', '')}`;
|
||||
navigator.clipboard.writeText(url);
|
||||
toast.success('Link copied to clipboard!');
|
||||
};
|
||||
|
||||
// Copy color to clipboard
|
||||
const handleCopyColor = () => {
|
||||
navigator.clipboard.writeText(color);
|
||||
toast.success('Color copied to clipboard!');
|
||||
};
|
||||
|
||||
// Random color generation
|
||||
const handleRandomColor = () => {
|
||||
const randomHex = '#' + Math.floor(Math.random() * 16777215).toString(16).padStart(6, '0');
|
||||
setColor(randomHex);
|
||||
};
|
||||
|
||||
// Keyboard shortcuts
|
||||
useKeyboard([
|
||||
{
|
||||
key: 'c',
|
||||
meta: true,
|
||||
handler: handleCopyColor,
|
||||
description: 'Copy color',
|
||||
},
|
||||
{
|
||||
key: 's',
|
||||
meta: true,
|
||||
handler: handleShare,
|
||||
description: 'Share color',
|
||||
},
|
||||
{
|
||||
key: 'r',
|
||||
meta: true,
|
||||
handler: handleRandomColor,
|
||||
description: 'Random color',
|
||||
},
|
||||
]);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen p-8">
|
||||
<div className="max-w-7xl mx-auto space-y-8">
|
||||
@@ -25,6 +88,14 @@ export default function PlaygroundPage() {
|
||||
<p className="text-muted-foreground">
|
||||
Interactive color manipulation and analysis tool
|
||||
</p>
|
||||
<div className="mt-3 flex flex-wrap gap-2 text-xs text-muted-foreground">
|
||||
<kbd className="px-2 py-1 bg-muted rounded border">⌘C</kbd>
|
||||
<span>Copy</span>
|
||||
<kbd className="px-2 py-1 bg-muted rounded border ml-3">⌘S</kbd>
|
||||
<span>Share</span>
|
||||
<kbd className="px-2 py-1 bg-muted rounded border ml-3">⌘R</kbd>
|
||||
<span>Random</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||
@@ -36,11 +107,60 @@ export default function PlaygroundPage() {
|
||||
</div>
|
||||
|
||||
<div className="p-6 border rounded-lg bg-card">
|
||||
<h2 className="text-xl font-semibold mb-4">Preview</h2>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h2 className="text-xl font-semibold">Preview</h2>
|
||||
<Button onClick={handleShare} variant="outline" size="sm">
|
||||
<Share2 className="h-4 w-4 mr-2" />
|
||||
Share
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex justify-center">
|
||||
<ColorDisplay color={color} size="xl" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{recentColors.length > 0 && (
|
||||
<div className="p-6 border rounded-lg bg-card">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<History className="h-5 w-5" />
|
||||
<h2 className="text-xl font-semibold">Recent Colors</h2>
|
||||
</div>
|
||||
<Button
|
||||
onClick={clearHistory}
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
Clear
|
||||
</Button>
|
||||
</div>
|
||||
<div className="grid grid-cols-5 gap-2">
|
||||
{recentColors.map((entry) => (
|
||||
<button
|
||||
key={entry.timestamp}
|
||||
className="group relative aspect-square rounded-lg border-2 border-border hover:border-primary transition-all hover:scale-110 focus:outline-none focus:ring-2 focus:ring-ring"
|
||||
style={{ backgroundColor: entry.color }}
|
||||
onClick={() => setColor(entry.color)}
|
||||
title={entry.color}
|
||||
>
|
||||
<div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity bg-black/30 rounded-lg">
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
removeColor(entry.color);
|
||||
toast.success('Color removed from history');
|
||||
}}
|
||||
className="p-1 bg-destructive rounded-full hover:bg-destructive/80"
|
||||
>
|
||||
<X className="h-3 w-3 text-destructive-foreground" />
|
||||
</button>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Right Column: Color Information */}
|
||||
@@ -74,3 +194,17 @@ export default function PlaygroundPage() {
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function PlaygroundPage() {
|
||||
return (
|
||||
<Suspense fallback={
|
||||
<div className="min-h-screen p-8">
|
||||
<div className="max-w-7xl mx-auto flex items-center justify-center">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
</div>
|
||||
}>
|
||||
<PlaygroundContent />
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user