Schedule message: modal now always opens (even with empty composer); includes its own message textarea pre-filled from editor content; removed null-content early-return guard from handleScheduleClick; fixed error text to use color.Critical.Main not CSS var Image compression: removed 200KB size threshold — checkbox now shows for all JPEG/PNG uploads (not just large ones); 'no significant saving' message handles already-small files gracefully Activity log: auto-paginate on mount — state events are absent from initial sync window, so the log was always empty until Load More was clicked manually Insights summary: Text size H4→H5 with toLocaleString() formatting and overflow:ellipsis so large numbers don't push tiles off screen Bookmarks panel: replaced var(--bg-*) CSS vars (undefined in folds themes) with color.Surface/SurfaceVariant/Primary folds tokens; added left accent border on message preview block, count badge, clear button in search, improved empty state, cleaner button hierarchy Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
69 lines
1.8 KiB
TypeScript
69 lines
1.8 KiB
TypeScript
export type CompressionResult = {
|
|
blob: Blob;
|
|
originalSize: number;
|
|
compressedSize: number;
|
|
width: number;
|
|
height: number;
|
|
};
|
|
|
|
const COMPRESSIBLE_TYPES = ['image/jpeg', 'image/png'];
|
|
|
|
/** Returns true if this file type can be compressed (JPEG or PNG, any size). */
|
|
export function isCompressible(file: File): boolean {
|
|
return COMPRESSIBLE_TYPES.includes(file.type);
|
|
}
|
|
|
|
/**
|
|
* Compress an image file via canvas.toBlob.
|
|
* Returns null if the file type is not compressible (GIF, SVG, WebP, video, audio, etc.).
|
|
*/
|
|
export async function compressImage(file: File, quality = 0.82): Promise<CompressionResult | null> {
|
|
if (!COMPRESSIBLE_TYPES.includes(file.type)) return null;
|
|
|
|
const img = await loadImage(file);
|
|
const canvas = document.createElement('canvas');
|
|
canvas.width = img.naturalWidth;
|
|
canvas.height = img.naturalHeight;
|
|
const ctx = canvas.getContext('2d')!;
|
|
ctx.drawImage(img, 0, 0);
|
|
|
|
return new Promise((resolve) => {
|
|
canvas.toBlob(
|
|
(blob) => {
|
|
if (!blob) {
|
|
resolve(null);
|
|
return;
|
|
}
|
|
resolve({
|
|
blob,
|
|
originalSize: file.size,
|
|
compressedSize: blob.size,
|
|
width: img.naturalWidth,
|
|
height: img.naturalHeight,
|
|
});
|
|
},
|
|
'image/jpeg',
|
|
quality,
|
|
);
|
|
});
|
|
}
|
|
|
|
function loadImage(file: File): Promise<HTMLImageElement> {
|
|
return new Promise((resolve, reject) => {
|
|
const url = URL.createObjectURL(file);
|
|
const img = new Image();
|
|
img.onload = () => {
|
|
URL.revokeObjectURL(url);
|
|
resolve(img);
|
|
};
|
|
img.onerror = reject;
|
|
img.src = url;
|
|
});
|
|
}
|
|
|
|
export function formatFileSize(bytes: number): string {
|
|
if (bytes < 1024) return `${bytes} B`;
|
|
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
|
|
return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
|
|
}
|