valknar/kit-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: streamline toast system and harmonize UI across tools

Browse Source 
- Migrate all toast notifications to sonner and remove custom ToastProvider
- Align Card and TextInput styling across Figlet and Pastel (rounded-lg, border-based)
- Fix build error by removing non-existent export in lib/units/index.ts
- Clean up unused Figlet components and constants
This commit is contained in:
Sebastian Krüger
2026-02-23 02:04:46 +01:00
parent 09838a203c
commit a9d0fd8443
25 changed files with 109 additions and 808 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
app/(app)/figlet/page.tsx
View File

@@ -2,12 +2,16 @@ import { FigletConverter } from '@/components/figlet/FigletConverter';
export default function FigletPage() {
return (
<div className="p-4 sm:p-8 max-w-7xl mx-auto">
<div className="mb-8">
<h1 className="text-3xl font-bold mb-2">Figlet UI</h1>
<p className="text-muted-foreground italic">ASCII Art Text Generator with 373 Fonts</p>
<div className="min-h-screen py-12">
<div className="max-w-7xl mx-auto px-8 space-y-8">
<div>
<h1 className="text-4xl font-bold mb-2">Figlet ASCII</h1>
<p className="text-muted-foreground">
ASCII Art Text Generator with 373 Fonts
</p>
</div>
<FigletConverter />
</div>
<FigletConverter />
</div>
);
}

2
app/(app)/pastel/batch/page.tsx
View File

@@ -106,7 +106,7 @@ export default function BatchPage() {
value={inputColors}
onChange={(e) => setInputColors(e.target.value)}
placeholder="#ff0099, #00ff99, #9900ff&#10;#ff5533&#10;#3355ff"
className="w-full h-48 p-3 border rounded-lg bg-background font-mono text-sm"
className="w-full h-48 p-3 border border-border rounded-xl bg-input font-mono text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:border-primary/50 transition-all duration-200"
/>
<p className="text-xs text-muted-foreground mt-2">

4
app/(app)/pastel/layout.tsx
View File

@@ -4,8 +4,8 @@ export default function PastelLayout({
children: React.ReactNode;
}>) {
return (
<div className="p-4 sm:p-8 max-w-7xl mx-auto">
<>
{children}
</div>
</>
);
}

14
app/(app)/units/page.tsx
View File

@@ -2,12 +2,16 @@ import MainConverter from '@/components/units/converter/MainConverter';
export default function UnitsPage() {
return (
<div className="p-4 sm:p-8 max-w-7xl mx-auto">
<div className="mb-8">
<h1 className="text-3xl font-bold mb-2">Units Converter</h1>
<p className="text-muted-foreground italic">Smart unit converter with 187 units across 23 categories</p>
<div className="min-h-screen py-12">
<div className="max-w-7xl mx-auto px-8 space-y-8">
<div>
<h1 className="text-4xl font-bold mb-2">Units Converter</h1>
<p className="text-muted-foreground">
Smart unit converter with 187 units across 23 categories
</p>
</div>
<MainConverter />
</div>
<MainConverter />
</div>
);
}

6
app/globals.css
View File

@@ -110,6 +110,7 @@
}
:root, .dark {
color-scheme: dark;
/* CORPORATE DARK THEME (The Standard) */
--background: #0a0a0f;
--foreground: #ffffff;
@@ -134,6 +135,7 @@
}
.light {
color-scheme: light;
/* LIGHT ADAPTATION (Keeping the "Glass" look) */
--background: oklch(98% 0.005 255);
--foreground: oklch(20% 0.04 255);
@@ -166,6 +168,10 @@
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Fix native select dropdown styling */
select option {
@apply bg-popover text-popover-foreground;
}
}
html {

2
components/BackToTop.tsx
View File

@@ -44,7 +44,7 @@ export default function BackToTop() {
{isVisible && (
<motion.button
onClick={scrollToTop}
className="fixed bottom-8 right-8 p-4 rounded-full glass hover:bg-white/10 text-purple-400 hover:text-purple-300 transition-colors shadow-lg z-40 group"
className="fixed bottom-8 right-8 p-4 rounded-full glass hover:bg-accent/50 text-purple-400 hover:text-purple-300 transition-colors shadow-lg z-40 group"
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: 20 }}

124
components/figlet/ComparisonMode.tsx
View File

@@ -1,124 +0,0 @@
'use client';
import * as React from 'react';
import { Card } from '@/components/ui/Card';
import { Button } from '@/components/ui/Button';
import { EmptyState } from '@/components/ui/EmptyState';
import { Copy, X, Download, GitCompare } from 'lucide-react';
import { cn } from '@/lib/utils/cn';
import type { FigletFont } from '@/types/figlet';
export interface ComparisonModeProps {
text: string;
selectedFonts: string[];
fontResults: Record<string, string>;
onRemoveFont: (fontName: string) => void;
onCopyFont: (fontName: string, result: string) => void;
onDownloadFont: (fontName: string, result: string) => void;
className?: string;
}
export function ComparisonMode({
text,
selectedFonts,
fontResults,
onRemoveFont,
onCopyFont,
onDownloadFont,
className,
}: ComparisonModeProps) {
return (
<div className={cn('space-y-4', className)}>
<div className="flex items-center justify-between">
<h2 className="text-lg font-semibold">Font Comparison</h2>
<span className="text-sm text-muted-foreground">
{selectedFonts.length} font{selectedFonts.length !== 1 ? 's' : ''} selected
</span>
</div>
{selectedFonts.length === 0 ? (
<Card>
<EmptyState
icon={GitCompare}
title="No fonts selected for comparison"
description="Click the + icon next to any font in the font selector to add it to the comparison"
className="py-12"
/>
</Card>
) : (
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
{selectedFonts.map((fontName, index) => (
<Card
key={fontName}
className="relative scale-in"
style={{ animationDelay: `${index * 50}ms` }}
>
<div className="p-4 space-y-3">
{/* Font Header */}
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<span className="text-sm font-mono font-semibold px-2 py-1 bg-primary/10 text-primary rounded">
{fontName}
</span>
</div>
<div className="flex items-center gap-1">
<Button
variant="ghost"
size="sm"
onClick={() => onCopyFont(fontName, fontResults[fontName] || '')}
className="h-8 w-8 p-0"
title="Copy to clipboard"
>
<Copy className="h-3.5 w-3.5" />
</Button>
<Button
variant="ghost"
size="sm"
onClick={() => onDownloadFont(fontName, fontResults[fontName] || '')}
className="h-8 w-8 p-0"
title="Download"
>
<Download className="h-3.5 w-3.5" />
</Button>
<Button
variant="ghost"
size="sm"
onClick={() => onRemoveFont(fontName)}
className="h-8 w-8 p-0 text-destructive hover:text-destructive"
title="Remove from comparison"
>
<X className="h-3.5 w-3.5" />
</Button>
</div>
</div>
{/* ASCII Art Preview */}
<div className="relative">
<pre className="p-4 bg-muted rounded-md overflow-x-auto">
<code className="text-xs font-mono whitespace-pre">
{fontResults[fontName] || 'Loading...'}
</code>
</pre>
</div>
{/* Stats */}
{fontResults[fontName] && (
<div className="flex gap-4 text-xs text-muted-foreground">
<span>
{fontResults[fontName].split('\n').length} lines
</span>
<span>
{Math.max(
...fontResults[fontName].split('\n').map((line) => line.length)
)} chars wide
</span>
</div>
)}
</div>
</Card>
))}
</div>
)}
</div>
);
}

189
components/figlet/FigletConverter.tsx
View File

@@ -4,20 +4,12 @@ import * as React from 'react';
import { TextInput } from './TextInput';
import { FontPreview } from './FontPreview';
import { FontSelector } from './FontSelector';
import { TextTemplates } from './TextTemplates';
import { HistoryPanel } from './HistoryPanel';
import { ComparisonMode } from './ComparisonMode';
import { Button } from '@/components/ui/Button';
import { Card } from '@/components/ui/Card';
import { GitCompare } from 'lucide-react';
import { textToAscii } from '@/lib/figlet/figletService';
import { getFontList } from '@/lib/figlet/fontLoader';
import { debounce } from '@/lib/utils/debounce';
import { addRecentFont } from '@/lib/storage/favorites';
import { addToHistory, type HistoryItem } from '@/lib/storage/history';
import { decodeFromUrl, updateUrl, getShareableUrl } from '@/lib/utils/urlSharing';
import { useToast } from '@/components/ui/Toast';
import { cn } from '@/lib/utils/cn';
import { toast } from 'sonner';
import type { FigletFont } from '@/types/figlet';
export function FigletConverter() {
@@ -26,10 +18,6 @@ export function FigletConverter() {
const [asciiArt, setAsciiArt] = React.useState('');
const [fonts, setFonts] = React.useState<FigletFont[]>([]);
const [isLoading, setIsLoading] = React.useState(false);
const [isComparisonMode, setIsComparisonMode] = React.useState(false);
const [comparisonFonts, setComparisonFonts] = React.useState<string[]>([]);
const [comparisonResults, setComparisonResults] = React.useState<Record<string, string>>({});
const { addToast } = useToast();
// Load fonts and check URL params on mount
React.useEffect(() => {
@@ -83,11 +71,10 @@ export function FigletConverter() {
try {
await navigator.clipboard.writeText(asciiArt);
addToHistory(text, selectedFont, asciiArt);
addToast('Copied to clipboard!', 'success');
toast.success('Copied to clipboard!');
} catch (error) {
console.error('Failed to copy:', error);
addToast('Failed to copy', 'error');
toast.error('Failed to copy');
}
};
@@ -112,10 +99,10 @@ export function FigletConverter() {
try {
await navigator.clipboard.writeText(shareUrl);
addToast('Shareable URL copied!', 'success');
toast.success('Shareable URL copied!');
} catch (error) {
console.error('Failed to copy URL:', error);
addToast('Failed to copy URL', 'error');
toast.error('Failed to copy URL');
}
};
@@ -124,164 +111,40 @@ export function FigletConverter() {
if (fonts.length === 0) return;
const randomIndex = Math.floor(Math.random() * fonts.length);
setSelectedFont(fonts[randomIndex].name);
addToast(`Random font: ${fonts[randomIndex].name}`, 'info');
toast.info(`Random font: ${fonts[randomIndex].name}`);
};
const handleSelectTemplate = (templateText: string) => {
setText(templateText);
addToast(`Template applied: ${templateText}`, 'info');
};
const handleSelectHistory = (item: HistoryItem) => {
setText(item.text);
setSelectedFont(item.font);
addToast(`Restored from history`, 'info');
};
// Comparison mode handlers
const handleToggleComparisonMode = () => {
const newMode = !isComparisonMode;
setIsComparisonMode(newMode);
if (newMode && comparisonFonts.length === 0) {
// Initialize with current font
setComparisonFonts([selectedFont]);
}
addToast(newMode ? 'Comparison mode enabled' : 'Comparison mode disabled', 'info');
};
const handleAddToComparison = (fontName: string) => {
if (comparisonFonts.includes(fontName)) {
addToast('Font already in comparison', 'info');
return;
}
if (comparisonFonts.length >= 6) {
addToast('Maximum 6 fonts for comparison', 'info');
return;
}
setComparisonFonts([...comparisonFonts, fontName]);
addToast(`Added ${fontName} to comparison`, 'success');
};
const handleRemoveFromComparison = (fontName: string) => {
setComparisonFonts(comparisonFonts.filter((f) => f !== fontName));
addToast(`Removed ${fontName} from comparison`, 'info');
};
const handleCopyComparisonFont = async (fontName: string, result: string) => {
try {
await navigator.clipboard.writeText(result);
addToHistory(text, fontName, result);
addToast(`Copied ${fontName} to clipboard!`, 'success');
} catch (error) {
console.error('Failed to copy:', error);
addToast('Failed to copy', 'error');
}
};
const handleDownloadComparisonFont = (fontName: string, result: string) => {
const blob = new Blob([result], { type: 'text/plain' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `figlet-${fontName}-${Date.now()}.txt`;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
};
// Generate comparison results
React.useEffect(() => {
if (!isComparisonMode || comparisonFonts.length === 0 || !text) return;
const generateComparisons = async () => {
const results: Record<string, string> = {};
for (const fontName of comparisonFonts) {
try {
results[fontName] = await textToAscii(text, fontName);
} catch (error) {
console.error(`Error generating ASCII art for ${fontName}:`, error);
results[fontName] = 'Error generating ASCII art';
}
}
setComparisonResults(results);
};
generateComparisons();
}, [isComparisonMode, comparisonFonts, text]);
return (
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6 items-stretch lg:max-h-[800px]">
{/* Left Column - Input and Preview */}
<div className="lg:col-span-2 space-y-6">
{/* Comparison Mode Toggle */}
<Card className="scale-in">
<div className="p-4 flex items-center justify-between">
<div className="flex items-center gap-2">
<GitCompare className={cn(
"h-4 w-4",
isComparisonMode ? "text-primary" : "text-muted-foreground"
)} />
<span className="text-sm font-medium">Comparison Mode</span>
{isComparisonMode && comparisonFonts.length > 0 && (
<span className="text-xs px-2 py-0.5 bg-primary/10 text-primary rounded-full font-medium slide-down">
{comparisonFonts.length} {comparisonFonts.length === 1 ? 'font' : 'fonts'}
</span>
)}
</div>
<Button
variant={isComparisonMode ? 'default' : 'outline'}
size="sm"
onClick={handleToggleComparisonMode}
className={cn(isComparisonMode && "shadow-lg")}
>
{isComparisonMode ? 'Disable' : 'Enable'}
</Button>
</div>
</Card>
<TextTemplates onSelectTemplate={handleSelectTemplate} />
<HistoryPanel onSelectHistory={handleSelectHistory} />
<div className="lg:col-span-2 space-y-6 overflow-y-auto pr-2 custom-scrollbar">
<TextInput
value={text}
onChange={setText}
placeholder="Type your text here..."
/>
{isComparisonMode ? (
<ComparisonMode
text={text}
selectedFonts={comparisonFonts}
fontResults={comparisonResults}
onRemoveFont={handleRemoveFromComparison}
onCopyFont={handleCopyComparisonFont}
onDownloadFont={handleDownloadComparisonFont}
/>
) : (
<FontPreview
text={asciiArt}
font={selectedFont}
isLoading={isLoading}
onCopy={handleCopy}
onDownload={handleDownload}
onShare={handleShare}
/>
)}
<FontPreview
text={asciiArt}
font={selectedFont}
isLoading={isLoading}
onCopy={handleCopy}
onDownload={handleDownload}
onShare={handleShare}
/>
</div>
{/* Right Column - Font Selector */}
<div className="lg:col-span-1">
<FontSelector
fonts={fonts}
selectedFont={selectedFont}
onSelectFont={setSelectedFont}
onRandomFont={handleRandomFont}
isComparisonMode={isComparisonMode}
comparisonFonts={comparisonFonts}
onAddToComparison={handleAddToComparison}
/>
<div className="lg:col-span-1 h-[500px] lg:h-auto relative">
<div className="lg:absolute lg:inset-0 h-full">
<FontSelector
fonts={fonts}
selectedFont={selectedFont}
onSelectFont={setSelectedFont}
onRandomFont={handleRandomFont}
className="h-full"
/>
</div>
</div>
</div>
);

7
components/figlet/FontPreview.tsx
View File

@@ -8,7 +8,7 @@ import { Skeleton } from '@/components/ui/Skeleton';
import { EmptyState } from '@/components/ui/EmptyState';
import { Copy, Download, Share2, Image as ImageIcon, AlignLeft, AlignCenter, AlignRight, Type } from 'lucide-react';
import { cn } from '@/lib/utils/cn';
import { useToast } from '@/components/ui/Toast';
import { toast } from 'sonner';
export interface FontPreviewProps {
text: string;
@@ -28,7 +28,6 @@ export function FontPreview({ text, font, isLoading, onCopy, onDownload, onShare
const previewRef = React.useRef<HTMLDivElement>(null);
const [textAlign, setTextAlign] = React.useState<TextAlign>('left');
const [fontSize, setFontSize] = React.useState<'xs' | 'sm' | 'base'>('sm');
const { addToast } = useToast();
const handleExportPNG = async () => {
if (!previewRef.current || !text) return;
@@ -44,10 +43,10 @@ export function FontPreview({ text, font, isLoading, onCopy, onDownload, onShare
link.href = dataUrl;
link.click();
addToast('Exported as PNG!', 'success');
toast.success('Exported as PNG!');
} catch (error) {
console.error('Failed to export PNG:', error);
addToast('Failed to export PNG', 'error');
toast.error('Failed to export PNG');
}
};
return (

102
components/figlet/FontSelector.tsx
View File

@@ -5,7 +5,7 @@ import Fuse from 'fuse.js';
import { Input } from '@/components/ui/Input';
import { Card } from '@/components/ui/Card';
import { EmptyState } from '@/components/ui/EmptyState';
import { Search, X, Heart, Clock, List, Shuffle, Plus, Check } from 'lucide-react';
import { Search, X, Heart, Clock, List, Shuffle } from 'lucide-react';
import { cn } from '@/lib/utils/cn';
import { Button } from '@/components/ui/Button';
import type { FigletFont } from '@/types/figlet';
@@ -16,9 +16,6 @@ export interface FontSelectorProps {
selectedFont: string;
onSelectFont: (fontName: string) => void;
onRandomFont?: () => void;
isComparisonMode?: boolean;
comparisonFonts?: string[];
onAddToComparison?: (fontName: string) => void;
className?: string;
}
@@ -29,9 +26,6 @@ export function FontSelector({
selectedFont,
onSelectFont,
onRandomFont,
isComparisonMode = false,
comparisonFonts = [],
onAddToComparison,
className
}: FontSelectorProps) {
const [searchQuery, setSearchQuery] = React.useState('');
@@ -112,9 +106,9 @@ export function FontSelector({
};
return (
<Card className={className}>
<div className="p-6">
<div className="flex items-center justify-between mb-4">
<Card className={cn("flex flex-col min-h-0 overflow-hidden", className)}>
<div className="p-6 flex flex-col flex-1 min-h-0">
<div className="flex items-center justify-between mb-4 shrink-0">
<h3 className="text-sm font-medium">Select Font</h3>
{onRandomFont && (
<Button
@@ -123,14 +117,14 @@ export function FontSelector({
onClick={onRandomFont}
title="Random font"
>
<Shuffle className="h-4 w-4" />
<Shuffle className="h-3 w-3 mr-2" />
Random
</Button>
)}
</div>
{/* Filter Tabs */}
<div className="flex gap-1 mb-4 p-1 bg-muted rounded-lg">
<div className="flex gap-1 mb-4 p-1 bg-muted rounded-lg shrink-0">
<button
onClick={() => setFilter('all')}
className={cn(
@@ -164,7 +158,7 @@ export function FontSelector({
</div>
{/* Search Input */}
<div className="relative mb-4">
<div className="relative mb-4 shrink-0">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none" />
<Input
ref={searchInputRef}
@@ -186,7 +180,7 @@ export function FontSelector({
</div>
{/* Font List */}
<div className="max-h-[400px] overflow-y-auto space-y-1 pr-2">
<div className="flex-1 overflow-y-auto space-y-1 pr-2">
{filteredFonts.length === 0 ? (
<EmptyState
icon={filter === 'favorites' ? Heart : (filter === 'recent' ? Clock : Search)}
@@ -209,66 +203,40 @@ export function FontSelector({
className="py-8"
/>
) : (
filteredFonts.map((font) => {
const isInComparison = comparisonFonts.includes(font.name);
return (
<div
key={font.name}
className={cn(
'group flex items-center gap-2 px-3 py-2 rounded-md text-sm transition-colors',
'hover:bg-accent hover:text-accent-foreground',
selectedFont === font.name && 'bg-accent text-accent-foreground font-medium'
)}
filteredFonts.map((font) => (
<div
key={font.name}
className={cn(
'group flex items-center gap-2 px-3 py-2 rounded-md text-sm transition-colors',
'hover:bg-accent hover:text-accent-foreground',
selectedFont === font.name && 'bg-accent text-accent-foreground font-medium'
)}
>
<button
onClick={() => onSelectFont(font.name)}
className="flex-1 text-left"
>
<button
onClick={() => onSelectFont(font.name)}
className="flex-1 text-left"
>
{font.name}
</button>
{isComparisonMode && onAddToComparison && (
<button
onClick={(e) => {
e.stopPropagation();
onAddToComparison(font.name);
}}
className={cn(
'opacity-0 group-hover:opacity-100 transition-opacity p-1 rounded',
isInComparison && 'opacity-100 bg-primary/10'
)}
aria-label={isInComparison ? 'In comparison' : 'Add to comparison'}
disabled={isInComparison}
>
{isInComparison ? (
<Check className="h-4 w-4 text-primary" />
) : (
<Plus className="h-4 w-4 text-muted-foreground hover:text-primary" />
)}
</button>
)}
<button
onClick={(e) => handleToggleFavorite(font.name, e)}
{font.name}
</button>
<button
onClick={(e) => handleToggleFavorite(font.name, e)}
className="p-1"
aria-label={isFavorite(font.name) ? 'Remove from favorites' : 'Add to favorites'}
>
<Heart
className={cn(
'opacity-0 group-hover:opacity-100 transition-opacity',
isFavorite(font.name) && 'opacity-100'
'h-4 w-4 transition-colors',
isFavorite(font.name) ? 'fill-red-500 text-red-500' : 'text-muted-foreground/30 hover:text-red-500/50'
)}
aria-label={isFavorite(font.name) ? 'Remove from favorites' : 'Add to favorites'}
>
<Heart
className={cn(
'h-4 w-4 transition-colors',
isFavorite(font.name) ? 'fill-red-500 text-red-500' : 'text-muted-foreground hover:text-red-500'
)}
/>
</button>
</div>
);
})
/>
</button>
</div>
))
)}
</div>
{/* Stats */}
<div className="mt-4 pt-4 border-t text-xs text-muted-foreground">
<div className="mt-4 pt-4 border-t text-xs text-muted-foreground shrink-0">
{filteredFonts.length} font{filteredFonts.length !== 1 ? 's' : ''}
{filter === 'favorites' && ` • ${favorites.length} total favorites`}
{filter === 'recent' && ` • ${recentFonts.length} recent`}

133
components/figlet/HistoryPanel.tsx
View File

@@ -1,133 +0,0 @@
'use client';
import * as React from 'react';
import { Card } from '@/components/ui/Card';
import { Button } from '@/components/ui/Button';
import { EmptyState } from '@/components/ui/EmptyState';
import { History, X, Trash2, ChevronDown, ChevronUp, Clock } from 'lucide-react';
import { cn } from '@/lib/utils/cn';
import { getHistory, clearHistory, removeHistoryItem, type HistoryItem } from '@/lib/storage/history';
export interface HistoryPanelProps {
onSelectHistory: (item: HistoryItem) => void;
className?: string;
}
export function HistoryPanel({ onSelectHistory, className }: HistoryPanelProps) {
const [isExpanded, setIsExpanded] = React.useState(false);
const [history, setHistory] = React.useState<HistoryItem[]>([]);
const loadHistory = React.useCallback(() => {
setHistory(getHistory());
}, []);
React.useEffect(() => {
loadHistory();
// Refresh history every 2 seconds when expanded
if (isExpanded) {
const interval = setInterval(loadHistory, 2000);
return () => clearInterval(interval);
}
}, [isExpanded, loadHistory]);
const handleClearAll = () => {
clearHistory();
loadHistory();
};
const handleRemove = (id: string, e: React.MouseEvent) => {
e.stopPropagation();
removeHistoryItem(id);
loadHistory();
};
const formatTime = (timestamp: number) => {
const now = Date.now();
const diff = now - timestamp;
const minutes = Math.floor(diff / 60000);
const hours = Math.floor(diff / 3600000);
if (minutes < 1) return 'Just now';
if (minutes < 60) return `${minutes}m ago`;
if (hours < 24) return `${hours}h ago`;
return new Date(timestamp).toLocaleDateString();
};
return (
<Card className={className}>
<div className="p-4">
<button
onClick={() => setIsExpanded(!isExpanded)}
className="w-full flex items-center justify-between text-sm font-medium hover:text-primary transition-colors"
>
<div className="flex items-center gap-2">
<History className="h-4 w-4" />
<span>Copy History</span>
<span className="text-xs text-muted-foreground">({history.length})</span>
</div>
{isExpanded ? (
<ChevronUp className="h-4 w-4" />
) : (
<ChevronDown className="h-4 w-4" />
)}
</button>
{isExpanded && (
<div className="mt-4 space-y-2 slide-down">
{history.length === 0 ? (
<EmptyState
icon={Clock}
title="No copy history yet"
description="Your recently copied ASCII art will appear here"
/>
) : (
<>
<div className="flex justify-end">
<Button
variant="ghost"
size="sm"
onClick={handleClearAll}
className="text-destructive hover:text-destructive"
>
<Trash2 className="h-3 w-3 mr-1" />
Clear All
</Button>
</div>
<div className="space-y-2 max-h-[300px] overflow-y-auto">
{history.map((item) => (
<div
key={item.id}
onClick={() => onSelectHistory(item)}
className="group relative p-3 bg-muted/50 hover:bg-accent hover:scale-[1.02] rounded-md cursor-pointer transition-all"
>
<div className="flex items-start justify-between gap-2">
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2 mb-1">
<span className="text-xs font-mono px-1.5 py-0.5 bg-primary/10 text-primary rounded">
{item.font}
</span>
<span className="text-xs text-muted-foreground">
{formatTime(item.timestamp)}
</span>
</div>
<p className="text-xs truncate">{item.text}</p>
</div>
<button
onClick={(e) => handleRemove(item.id, e)}
className="opacity-0 group-hover:opacity-100 transition-opacity p-1 hover:bg-destructive/10 rounded"
>
<X className="h-3 w-3 text-destructive" />
</button>
</div>
</div>
))}
</div>
</>
)}
</div>
)}
</div>
</Card>
);
}

2
components/figlet/TextInput.tsx
View File

@@ -17,7 +17,7 @@ export function TextInput({ value, onChange, placeholder, className }: TextInput
value={value}
onChange={(e) => onChange(e.target.value)}
placeholder={placeholder || 'Type something...'}
className="w-full h-32 px-4 py-3 text-base border border-input rounded-lg bg-background resize-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 placeholder:text-muted-foreground"
className="w-full h-32 px-4 py-3 text-base border border-border rounded-lg bg-input resize-none focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring placeholder:text-muted-foreground transition-all duration-200"
maxLength={100}
/>
<div className="absolute bottom-2 right-2 text-xs text-muted-foreground">

92
components/figlet/TextTemplates.tsx
View File

@@ -1,92 +0,0 @@
'use client';
import * as React from 'react';
import { Card } from '@/components/ui/Card';
import { Button } from '@/components/ui/Button';
import { Sparkles, ChevronDown, ChevronUp } from 'lucide-react';
import { cn } from '@/lib/utils/cn';
import { TEXT_TEMPLATES, TEMPLATE_CATEGORIES } from '@/lib/figlet/constants/templates';
export interface TextTemplatesProps {
onSelectTemplate: (text: string) => void;
className?: string;
}
export function TextTemplates({ onSelectTemplate, className }: TextTemplatesProps) {
const [isExpanded, setIsExpanded] = React.useState(false);
const [selectedCategory, setSelectedCategory] = React.useState<string>('all');
const filteredTemplates = React.useMemo(() => {
if (selectedCategory === 'all') return TEXT_TEMPLATES;
return TEXT_TEMPLATES.filter(t => t.category === selectedCategory);
}, [selectedCategory]);
return (
<Card className={className}>
<div className="p-4">
<button
onClick={() => setIsExpanded(!isExpanded)}
className="w-full flex items-center justify-between text-sm font-medium hover:text-primary transition-colors"
>
<div className="flex items-center gap-2">
<Sparkles className="h-4 w-4" />
<span>Text Templates</span>
<span className="text-xs text-muted-foreground">({TEXT_TEMPLATES.length})</span>
</div>
{isExpanded ? (
<ChevronUp className="h-4 w-4" />
) : (
<ChevronDown className="h-4 w-4" />
)}
</button>
{isExpanded && (
<div className="mt-4 space-y-3 slide-down">
{/* Category Filter */}
<div className="flex gap-1 flex-wrap">
<button
onClick={() => setSelectedCategory('all')}
className={cn(
'px-2 py-1 text-xs rounded-md transition-colors',
selectedCategory === 'all'
? 'bg-primary text-primary-foreground'
: 'bg-muted hover:bg-muted/80'
)}
>
All
</button>
{TEMPLATE_CATEGORIES.map((cat) => (
<button
key={cat.id}
onClick={() => setSelectedCategory(cat.id)}
className={cn(
'px-2 py-1 text-xs rounded-md transition-colors',
selectedCategory === cat.id
? 'bg-primary text-primary-foreground'
: 'bg-muted hover:bg-muted/80'
)}
>
{cat.icon} {cat.label}
</button>
))}
</div>
{/* Templates Grid */}
<div className="grid grid-cols-2 sm:grid-cols-3 gap-2">
{filteredTemplates.map((template) => (
<button
key={template.id}
onClick={() => onSelectTemplate(template.text)}
className="px-3 py-2 text-xs bg-muted hover:bg-accent hover:scale-105 rounded-md transition-all text-left truncate"
title={template.text}
>
{template.label}
</button>
))}
</div>
</div>
)}
</div>
</Card>
);
}

4
components/layout/AppHeader.tsx
View File

@@ -17,7 +17,7 @@ export function AppHeader() {
const pathSegments = pathname.split('/').filter(Boolean);
return (
<header className="h-16 border-b border-white/5 bg-background/10 backdrop-blur-xl sticky top-0 z-40 flex items-center justify-between px-4 lg:px-8">
<header className="h-16 border-b border-border bg-background/10 backdrop-blur-xl sticky top-0 z-40 flex items-center justify-between px-4 lg:px-8">
<div className="flex items-center gap-4">
<Button
variant="ghost"
@@ -69,7 +69,7 @@ function ThemeToggleComponent() {
variant="ghost"
size="icon"
onClick={() => setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')}
className="text-muted-foreground hover:text-foreground hover:bg-white/5"
className="text-muted-foreground hover:text-foreground hover:bg-accent/50"
title={`Switch to ${resolvedTheme === 'dark' ? 'light' : 'dark'} mode`}
>
{resolvedTheme === 'dark' ? (

12
components/layout/AppSidebar.tsx
View File

@@ -103,12 +103,12 @@ export function AppSidebar() {
)}
<aside className={cn(
"fixed inset-y-0 left-0 z-50 flex flex-col border-r border-white/5 bg-background/40 backdrop-blur-2xl transition-all duration-300 ease-in-out lg:relative lg:h-full",
"fixed inset-y-0 left-0 z-50 flex flex-col border-r border-border bg-background/40 backdrop-blur-2xl transition-all duration-300 ease-in-out lg:relative lg:h-full",
isOpen ? "translate-x-0" : "-translate-x-full lg:translate-x-0",
isCollapsed ? "lg:w-20" : "w-64"
)}>
{/* Sidebar Header */}
<div className="flex h-16 items-center justify-between px-6 shrink-0 border-b border-white/5">
<div className="flex h-16 items-center justify-between px-6 shrink-0 border-b border-border">
<Link href="/" className="flex items-center gap-3 group overflow-hidden">
<div className="shrink-0">
<Logo size={isCollapsed ? 32 : 32} />
@@ -151,7 +151,7 @@ export function AppSidebar() {
"flex items-center px-3 py-2 rounded-xl text-sm font-medium transition-all duration-300 relative group/item",
isActive
? "bg-primary/10 text-primary shadow-[0_0_15px_rgba(139,92,246,0.15)] ring-1 ring-primary/20"
: "text-muted-foreground hover:bg-white/5 hover:text-foreground",
: "text-muted-foreground hover:bg-accent/50 hover:text-foreground",
isCollapsed ? "justify-center" : "justify-between"
)}
title={isCollapsed ? item.title : undefined}
@@ -180,7 +180,7 @@ export function AppSidebar() {
</Link>
{item.items && pathname.startsWith(item.href) && !isCollapsed && (
<div className="ml-9 space-y-1 border-l border-white/5 pl-2 mt-1">
<div className="ml-9 space-y-1 border-l border-border pl-2 mt-1">
{item.items.map((subItem) => (
<Link
key={subItem.href}
@@ -190,7 +190,7 @@ export function AppSidebar() {
"block px-3 py-1.5 rounded-lg text-xs font-medium transition-all duration-200",
pathname === subItem.href
? "text-primary bg-primary/5 font-semibold"
: "text-muted-foreground hover:text-foreground hover:bg-white/5"
: "text-muted-foreground hover:text-foreground hover:bg-accent/50"
)}
>
{subItem.title}
@@ -207,7 +207,7 @@ export function AppSidebar() {
</nav>
{/* Sidebar Footer / Desktop Toggle */}
<div className="p-4 border-t border-white/5 hidden lg:block">
<div className="p-4 border-t border-border hidden lg:block">
<Button
variant="ghost"
size="sm"

11
components/providers/Providers.tsx
View File

@@ -4,7 +4,6 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { Toaster } from 'sonner';
import { useState } from 'react';
import { ThemeProvider } from './ThemeProvider';
import { ToastProvider } from '@/components/ui/Toast';
export function Providers({ children }: { children: React.ReactNode }) {
const [queryClient] = useState(
@@ -21,12 +20,10 @@ export function Providers({ children }: { children: React.ReactNode }) {
return (
<ThemeProvider>
<ToastProvider>
<QueryClientProvider client={queryClient}>
{children}
<Toaster position="top-right" richColors />
</QueryClientProvider>
</ToastProvider>
<QueryClientProvider client={queryClient}>
{children}
<Toaster position="top-right" richColors />
</QueryClientProvider>
</ThemeProvider>
);
}

2
components/ui/Button.tsx
View File

@@ -19,7 +19,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
{
'bg-primary text-primary-foreground shadow-[0_0_20px_rgba(139,92,246,0.3)] hover:bg-primary/90 hover:shadow-[0_0_25px_rgba(139,92,246,0.5)] hover:-translate-y-0.5':
variant === 'default',
'glass bg-white/5 border-white/10 hover:bg-white/10 hover:border-white/20 text-foreground':
'glass hover:bg-accent/10 hover:border-primary/20 text-foreground':
variant === 'outline',
'hover:bg-accent hover:text-accent-foreground': variant === 'ghost',
'bg-destructive text-destructive-foreground hover:bg-destructive/90 shadow-lg hover:shadow-destructive/20':

2
components/ui/Card.tsx
View File

@@ -5,7 +5,7 @@ const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElemen
({ className, ...props }, ref) => (
<div
ref={ref}
className={cn('glass rounded-2xl text-card-foreground shadow-xl transition-all duration-300', className)}
className={cn('bg-card text-card-foreground border rounded-lg transition-all duration-300', className)}
{...props}
/>
)

2
components/ui/Input.tsx
View File

@@ -9,7 +9,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
<input
type={type}
className={cn(
'flex h-10 w-full rounded-xl border border-white/10 bg-white/5 px-4 py-2',
'flex h-10 w-full rounded-xl border border-border bg-input px-4 py-2',
'text-sm ring-offset-background file:border-0 file:bg-transparent',
'file:text-sm file:font-medium placeholder:text-muted-foreground',
'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:border-primary/50',

2
components/ui/Select.tsx
View File

@@ -18,7 +18,7 @@ const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
)}
<select
className={cn(
'flex h-10 w-full rounded-xl border border-white/10 bg-white/5 px-3 py-2',
'flex h-10 w-full rounded-xl border border-border bg-input px-3 py-2',
'text-sm ring-offset-background',
'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:border-primary/50',
'disabled:cursor-not-allowed disabled:opacity-50 transition-all duration-200',

90
components/ui/Toast.tsx
View File

@@ -1,90 +0,0 @@
'use client';
import * as React from 'react';
import { X, CheckCircle2, AlertCircle, Info } from 'lucide-react';
import { cn } from '@/lib/utils/cn';
export type ToastType = 'success' | 'error' | 'info';
export interface Toast {
id: string;
message: string;
type: ToastType;
}
interface ToastContextType {
toasts: Toast[];
addToast: (message: string, type?: ToastType) => void;
removeToast: (id: string) => void;
}
const ToastContext = React.createContext<ToastContextType | undefined>(undefined);
export function ToastProvider({ children }: { children: React.ReactNode }) {
const [toasts, setToasts] = React.useState<Toast[]>([]);
const addToast = React.useCallback((message: string, type: ToastType = 'success') => {
const id = Math.random().toString(36).substring(7);
setToasts((prev) => [...prev, { id, message, type }]);
// Auto remove after 3 seconds
setTimeout(() => {
setToasts((prev) => prev.filter((t) => t.id !== id));
}, 3000);
}, []);
const removeToast = React.useCallback((id: string) => {
setToasts((prev) => prev.filter((t) => t.id !== id));
}, []);
return (
<ToastContext.Provider value={{ toasts, addToast, removeToast }}>
{children}
<div className="fixed bottom-4 right-4 z-50 flex flex-col gap-2 pointer-events-none">
{toasts.map((toast) => (
<ToastItem key={toast.id} toast={toast} onClose={() => removeToast(toast.id)} />
))}
</div>
</ToastContext.Provider>
);
}
function ToastItem({ toast, onClose }: { toast: Toast; onClose: () => void }) {
const Icon = toast.type === 'success' ? CheckCircle2 : toast.type === 'error' ? AlertCircle : Info;
return (
<div
className={cn(
'flex items-center gap-3 px-4 py-3 rounded-lg shadow-lg pointer-events-auto',
'animate-in slide-in-from-right-full duration-300',
'min-w-[300px] max-w-[400px]',
{
'bg-green-50 text-green-900 border border-green-200 dark:bg-green-900/20 dark:text-green-100 dark:border-green-800':
toast.type === 'success',
'bg-red-50 text-red-900 border border-red-200 dark:bg-red-900/20 dark:text-red-100 dark:border-red-800':
toast.type === 'error',
'bg-blue-50 text-blue-900 border border-blue-200 dark:bg-blue-900/20 dark:text-blue-100 dark:border-blue-800':
toast.type === 'info',
}
)}
>
<Icon className="h-5 w-5 flex-shrink-0" />
<p className="text-sm font-medium flex-1">{toast.message}</p>
<button
onClick={onClose}
className="flex-shrink-0 opacity-70 hover:opacity-100 transition-opacity"
aria-label="Close"
>
<X className="h-4 w-4" />
</button>
</div>
);
}
export function useToast() {
const context = React.useContext(ToastContext);
if (!context) {
throw new Error('useToast must be used within ToastProvider');
}
return context;
}

38
lib/figlet/constants/templates.ts
View File

@@ -1,38 +0,0 @@
export interface TextTemplate {
id: string;
label: string;
text: string;
category: 'greeting' | 'tech' | 'fun' | 'seasonal';
}
export const TEXT_TEMPLATES: TextTemplate[] = [
// Greetings
{ id: 'hello', label: 'Hello', text: 'Hello!', category: 'greeting' },
{ id: 'welcome', label: 'Welcome', text: 'Welcome', category: 'greeting' },
{ id: 'hello-world', label: 'Hello World', text: 'Hello World', category: 'greeting' },
// Tech
{ id: 'code', label: 'Code', text: 'CODE', category: 'tech' },
{ id: 'dev', label: 'Developer', text: 'DEV', category: 'tech' },
{ id: 'hack', label: 'Hack', text: 'HACK', category: 'tech' },
{ id: 'terminal', label: 'Terminal', text: 'Terminal', category: 'tech' },
{ id: 'git', label: 'Git', text: 'Git', category: 'tech' },
// Fun
{ id: 'awesome', label: 'Awesome', text: 'AWESOME', category: 'fun' },
{ id: 'cool', label: 'Cool', text: 'COOL', category: 'fun' },
{ id: 'epic', label: 'Epic', text: 'EPIC', category: 'fun' },
{ id: 'wow', label: 'Wow', text: 'WOW!', category: 'fun' },
// Seasonal
{ id: 'happy-birthday', label: 'Happy Birthday', text: 'Happy Birthday!', category: 'seasonal' },
{ id: 'congrats', label: 'Congrats', text: 'Congrats!', category: 'seasonal' },
{ id: 'thanks', label: 'Thanks', text: 'Thanks!', category: 'seasonal' },
];
export const TEMPLATE_CATEGORIES = [
{ id: 'greeting', label: 'Greetings', icon: '👋' },
{ id: 'tech', label: 'Tech', icon: '💻' },
{ id: 'fun', label: 'Fun', icon: '🎉' },
{ id: 'seasonal', label: 'Seasonal', icon: '🎊' },
] as const;

53
lib/storage/history.ts
View File

@@ -1,53 +0,0 @@
'use client';
export interface HistoryItem {
id: string;
text: string;
font: string;
result: string;
timestamp: number;
}
const HISTORY_KEY = 'figlet-ui-history';
const MAX_HISTORY = 10;
export function getHistory(): HistoryItem[] {
if (typeof window === 'undefined') return [];
try {
const stored = localStorage.getItem(HISTORY_KEY);
return stored ? JSON.parse(stored) : [];
} catch {
return [];
}
}
export function addToHistory(text: string, font: string, result: string): void {
let history = getHistory();
const newItem: HistoryItem = {
id: `${Date.now()}-${Math.random()}`,
text,
font,
result,
timestamp: Date.now(),
};
// Add to beginning
history.unshift(newItem);
// Keep only MAX_HISTORY items
history = history.slice(0, MAX_HISTORY);
localStorage.setItem(HISTORY_KEY, JSON.stringify(history));
}
export function clearHistory(): void {
localStorage.removeItem(HISTORY_KEY);
}
export function removeHistoryItem(id: string): void {
const history = getHistory();
const filtered = history.filter(item => item.id !== id);
localStorage.setItem(HISTORY_KEY, JSON.stringify(filtered));
}

1
lib/units/index.ts
View File

@@ -1,4 +1,3 @@
export * from './units';
export * from './storage';
export * from './utils';
export * from './tempo';

9
tailwind.config.ts
View File

@@ -1,9 +0,0 @@
// Tailwind CSS 4 configuration
// Most configuration is now done in CSS using @theme
export default {
content: [
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
'./components/**/*.{js,ts,jsx,tsx,mdx}',
'./app/**/*.{js,ts,jsx,tsx,mdx}',
],
};