editor()?.chain().focus().run()}
- />
+ <>
+
{
+ const target = e.target as HTMLElement;
+ if (target.tagName.toLowerCase() === 'img') {
+ setFullscreenImage((target as HTMLImageElement).src);
+ } else {
+ editor()?.chain().focus().run();
+ }
+ }}
+ />
+
+
+
);
};
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 03aaa4b..ebc561b 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -4,3 +4,94 @@ import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}
+
+export const compressImageBase64 = (base64Str: string, maxWidth = 800, quality = 0.7): Promise => {
+ return new Promise((resolve) => {
+ const img = new Image();
+ img.src = base64Str;
+ img.onload = () => {
+ let { width, height } = img;
+ if (width > maxWidth) {
+ height = Math.round((height * maxWidth) / width);
+ width = maxWidth;
+ }
+ if (height > maxWidth) {
+ width = Math.round((width * maxWidth) / height);
+ height = maxWidth;
+ }
+
+ const canvas = document.createElement("canvas");
+ canvas.width = width;
+ canvas.height = height;
+
+ const ctx = canvas.getContext("2d");
+ if (!ctx) {
+ resolve(base64Str);
+ return;
+ }
+
+ ctx.drawImage(img, 0, 0, width, height);
+ resolve(canvas.toDataURL("image/jpeg", quality));
+ };
+ img.onerror = () => resolve(base64Str);
+ });
+};
+
+export const convertImageToWebpFile = async (file: File): Promise => {
+ return new Promise((resolve) => {
+ const reader = new FileReader();
+ reader.onload = (e) => {
+ const img = new Image();
+ img.onload = () => {
+ let { width, height } = img;
+ const maxWidth = 2560; // 2K resolution max for task images
+
+ if (width > maxWidth) {
+ height = Math.round((height * maxWidth) / width);
+ width = maxWidth;
+ }
+ if (height > maxWidth) {
+ width = Math.round((width * maxWidth) / height);
+ height = maxWidth;
+ }
+
+ const canvas = document.createElement("canvas");
+ canvas.width = width;
+ canvas.height = height;
+
+ const ctx = canvas.getContext("2d");
+ if (!ctx) {
+ resolve(file); // Fallback to original
+ return;
+ }
+
+ ctx.drawImage(img, 0, 0, width, height);
+
+ canvas.toBlob(
+ (blob) => {
+ if (!blob) {
+ resolve(file); // Fallback to original
+ return;
+ }
+
+ // Replace original extension with .webp
+ const originalName = file.name;
+ const finalName = originalName.replace(/\.[^/.]+$/, "") + ".webp";
+
+ const newFile = new File([blob], finalName, {
+ type: "image/webp",
+ lastModified: Date.now(),
+ });
+ resolve(newFile);
+ },
+ "image/webp",
+ 0.7 // 70% Quality
+ );
+ };
+ img.onerror = () => resolve(file); // Fallback
+ img.src = e.target?.result as string;
+ };
+ reader.onerror = () => resolve(file); // Fallback
+ reader.readAsDataURL(file);
+ });
+};
diff --git a/src/store/index.ts b/src/store/index.ts
index 157fccd..6f5f412 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -41,6 +41,7 @@ export interface Task {
};
size?: number; // 0-10, task complexity/size
sharedWith?: Array<{ userId: string; access: 'view' | 'edit' }>; // Users this task is shared with
+ attachments?: string[]; // Array of filenames from PocketBase
}
export const checkRecurringTasks = () => {
@@ -423,10 +424,34 @@ const mapRecordToTask = (r: any): Task => {
updated: r.updated,
recurrence: r.recurrence,
size: (r.size === null || r.size === undefined) ? undefined : r.size,
- sharedWith: r.sharedWith
+ sharedWith: r.sharedWith,
+ attachments: r.attachments || []
};
};
+export const uploadTaskAttachment = async (taskId: string, file: File): Promise => {
+ try {
+ const formData = new FormData();
+ formData.append('attachments', file);
+
+ const record = await pb.collection(TASGRID_COLLECTION).update(taskId, formData);
+
+ // Return the URL for the newly uploaded file. PocketBase appends new files to the array.
+ // We need to find the specific filename that was just uploaded to get its URL.
+ // Since we don't know the exact generated filename, we can return the URL of the last file in the array.
+ if (record.attachments && record.attachments.length > 0) {
+ const latestFilename = record.attachments[record.attachments.length - 1];
+ return pb.files.getURL(record, latestFilename);
+ }
+
+ throw new Error("File uploaded but no attachment returned");
+ } catch (err: any) {
+ console.error("Error uploading attachment:", err);
+ toast.error("Failed to upload image.");
+ throw err;
+ }
+};
+
const mapRecordToShareRule = (r: any): ShareRule => {
return {
id: r.id,
{
+ if (e.target === e.currentTarget) {
+ setFullscreenImage(null);
+ resetZoom();
+ }
+ }}
+ onWheel={(e) => {
+ e.preventDefault();
+ const scaleSpeed = 0.05;
+ const delta = e.deltaY < 0 ? 1 : -1;
+ setZoomScale(s => Math.min(Math.max(1, s + delta * scaleSpeed), 5));
+ }}
+ onPointerDown={(e) => {
+ if (zoomScale() > 1 && e.target.tagName.toLowerCase() === 'img') {
+ setIsDragging(true);
+ setDragStart({ x: e.clientX - zoomOffset().x, y: e.clientY - zoomOffset().y });
+ (e.target as HTMLElement).setPointerCapture(e.pointerId);
+ }
+ }}
+ onPointerMove={(e) => {
+ if (isDragging()) {
+ setZoomOffset({
+ x: e.clientX - dragStart().x,
+ y: e.clientY - dragStart().y
+ });
+ }
+ }}
+ onPointerUp={(e) => {
+ setIsDragging(false);
+ (e.target as HTMLElement).releasePointerCapture(e.pointerId);
+ }}
+ onPointerCancel={(e) => {
+ setIsDragging(false);
+ (e.target as HTMLElement).releasePointerCapture(e.pointerId);
+ }}
+ >
+
+
+
+ !})
1 ? "cursor-grab" : "cursor-zoom-in")
+ )}
+ style={{
+ transform: `translate(${zoomOffset().x}px, ${zoomOffset().y}px) scale(${zoomScale()})`,
+ }}
+ draggable={false}
+ onClick={(e) => {
+ e.stopPropagation();
+ if (zoomScale() === 1) {
+ setZoomScale(2);
+ } else if (!isDragging()) {
+ // Optional: Click to single-zoom-out or do nothing during pan
+ }
+ }}
+ />
+
+