mirror of
https://github.com/Mail-0/Zero.git
synced 2026-07-01 08:16:28 +00:00
277f476575
Ran oxc (https://oxc.rs/docs/guide/usage/linter.html#vscode-extension) and fixed all the issues that came up, set it up to run as a PR check and added steps to the README.md asking users to use it. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Introduced JavaScript linting using oxlint in development guidelines and CI workflow for improved code quality. * Added oxlint configuration and dependencies to the project. * **Bug Fixes** * Improved error logging in various components and utilities for better debugging. * Enhanced React list rendering by updating keys to use unique values instead of array indices, reducing rendering issues. * Replaced browser alerts with toast notifications for a smoother user experience. * **Refactor** * Simplified component logic and state management by removing unused code, imports, props, and components across multiple files. * Updated function and component signatures for clarity and maintainability. * Improved efficiency of certain operations by switching from arrays to sets for membership checks. * **Chores** * Cleaned up and reorganized import statements throughout the codebase. * Removed deprecated files, components, and middleware to streamline the codebase. * **Documentation** * Updated contribution guidelines to include linting requirements for code submissions. * **Style** * Minor formatting and readability improvements in JSX and code structure. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
82 lines
2.6 KiB
TypeScript
82 lines
2.6 KiB
TypeScript
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
|
|
import { Settings, Image, FileImage, Zap } from 'lucide-react';
|
|
import type { ImageQuality } from '@/lib/image-compression';
|
|
|
|
import { Label } from '@/components/ui/label';
|
|
import { m } from '@/paraglide/messages';
|
|
|
|
interface ImageCompressionSettingsProps {
|
|
quality: ImageQuality;
|
|
onQualityChange: (quality: ImageQuality) => void;
|
|
className?: string;
|
|
}
|
|
|
|
const qualityOptions = [
|
|
{
|
|
value: 'low' as const,
|
|
icon: Zap,
|
|
color: 'text-green-600',
|
|
},
|
|
{
|
|
value: 'medium' as const,
|
|
icon: Image,
|
|
color: 'text-blue-600',
|
|
},
|
|
{
|
|
value: 'original' as const,
|
|
icon: FileImage,
|
|
color: 'text-purple-600',
|
|
},
|
|
];
|
|
|
|
export function ImageCompressionSettings({
|
|
quality,
|
|
onQualityChange,
|
|
className,
|
|
}: ImageCompressionSettingsProps) {
|
|
return (
|
|
<Card className={className}>
|
|
<CardHeader className="pb-3">
|
|
<div className="flex items-center gap-2">
|
|
<Settings className="h-4 w-4" />
|
|
<CardTitle className="text-sm font-medium">
|
|
{m['pages.createEmail.imageCompression.title']()}
|
|
</CardTitle>
|
|
</div>
|
|
<CardDescription className="text-xs">
|
|
{m['pages.createEmail.imageCompression.description']()}
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="pt-0">
|
|
<RadioGroup
|
|
value={quality}
|
|
onValueChange={(value) => onQualityChange(value as ImageQuality)}
|
|
>
|
|
<div className="space-y-3">
|
|
{qualityOptions.map((option) => {
|
|
const Icon = option.icon;
|
|
return (
|
|
<div key={option.value} className="flex items-center space-x-3">
|
|
<RadioGroupItem value={option.value} id={option.value} />
|
|
<div className="flex items-center gap-2">
|
|
<Icon className={`h-4 w-4 ${option.color}`} />
|
|
<div className="flex flex-col">
|
|
<Label htmlFor={option.value} className="cursor-pointer text-sm font-medium">
|
|
{m[`pages.createEmail.imageCompression.${option.value}.label`]()}
|
|
</Label>
|
|
<span className="text-muted-foreground text-xs">
|
|
{m[`pages.createEmail.imageCompression.${option.value}.description`]()}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</RadioGroup>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|