Merge pull request #3 from typelets/fix/encryption-user-id-debug

fix: resolve file encryption issues and add note ID to status bar

Author: typelets

.gitignore

@@ -260,3 +260,6 @@ drizzle/
 *.njsproj
 *.sln
 *.sw?
+
+# Claude Code
+.claude

src/components/editor/Editor/StatusBar.tsx

@@ -7,6 +7,7 @@ interface StatusBarProps {
   scrollPercentage: number;
   zoomLevel: number;
   saveStatus: 'saved' | 'saving' | 'error';
+  noteId?: string;
   onZoomIn: () => void;
   onZoomOut: () => void;
   onResetZoom: () => void;
@@ -19,6 +20,7 @@ export function StatusBar({
   scrollPercentage,
   zoomLevel,
   saveStatus,
+  noteId,
   onZoomIn,
   onZoomOut,
   onResetZoom,
@@ -52,6 +54,13 @@ export function StatusBar({
           </span>
         )}
 
+        {/* Note ID */}
+        {noteId && (
+          <span className="hover:bg-muted px-1.5 py-0.5 rounded cursor-default" title="Note ID">
+            {noteId}
+          </span>
+        )}
+        
         {/* Zoom controls */}
         <div className="flex items-center gap-1">
           <button

src/components/editor/index.tsx

@@ -620,6 +620,7 @@ export default function Index({
         scrollPercentage={scrollPercentage}
         zoomLevel={zoomLevel}
         saveStatus={saveStatus}
+        noteId={note?.id}
         onZoomIn={handleZoomIn}
         onZoomOut={handleZoomOut}
         onResetZoom={resetZoom}

src/components/folders/index.tsx

@@ -212,7 +212,7 @@ export default function FolderPanel({
             <h3 className="text-foreground text-lg font-semibold">Folders</h3>
           </div>
           <div className="text-muted-foreground flex items-center gap-2 text-sm">
-            <span className="text-xs opacity-80">Typelets v{APP_VERSION}</span>
+            <span className="text-xs opacity-80">Typelets v{APP_VERSION}.beta</span>
           </div>
         </div>
 

src/components/layout/MainLayout.tsx

@@ -128,6 +128,7 @@ export default function MainLayout() {
     onDeleteNote: deleteNote,
     onArchiveNote: archiveNote,
     onToggleStar: toggleStar,
+    userId,
   };
 
   if (isChecking) {

src/lib/encryption/index.ts

@@ -364,8 +364,7 @@ class EncryptionService {
       });
 
       return result;
-    } catch (error) {
-      console.error('Decryption failed:', error);
+    } catch {
       throw new Error('Failed to decrypt note.');
     }
   }

src/services/fileService.ts

@@ -1,4 +1,4 @@
-import { encryptNoteData, decryptNoteData } from '@/lib/encryption';
+import { encryptNoteData } from '@/lib/encryption';
 import type { FileAttachment } from '@/types/note';
 
 const API_BASE_URL = import.meta.env.VITE_API_URL || 'http://localhost:3001/api';
@@ -34,7 +34,17 @@ export class FileService {
 
   private async encryptFile(file: File, userId: string): Promise<{ encryptedData: string; encryptedTitle: string; iv: string; salt: string }> {
     const fileBuffer = await file.arrayBuffer();
-    const base64Content = btoa(String.fromCharCode(...new Uint8Array(fileBuffer)));
+    
+    // Convert ArrayBuffer to base64 safely for large files
+    const bytes = new Uint8Array(fileBuffer);
+    let base64Content = '';
+    const chunkSize = 0x8000; // 32KB chunks to avoid function argument limits
+    
+    for (let i = 0; i < bytes.length; i += chunkSize) {
+      const chunk = bytes.subarray(i, Math.min(i + chunkSize, bytes.length));
+      base64Content += String.fromCharCode.apply(null, Array.from(chunk));
+    }
+    base64Content = btoa(base64Content);
 
     const encrypted = await encryptNoteData(userId, file.name, base64Content);
     return {
@@ -45,15 +55,50 @@ export class FileService {
     };
   }
 
-  private async decryptFile(encryptedData: string, encryptedTitle: string, iv: string, salt: string, userId: string): Promise<ArrayBuffer> {
-    const decrypted = await decryptNoteData(userId, encryptedTitle, encryptedData, iv, salt);
+  private async decryptFile(encryptedData: string, iv: string, salt: string, userId: string): Promise<ArrayBuffer> {
+    
+    const { encryptionService } = await import('@/lib/encryption');
+    
+    // Convert base64 strings to required formats
+    const ivBytes = this.base64ToUint8Array(iv);
+    const saltBytes = this.base64ToUint8Array(salt);
+    const encryptedBytes = this.base64ToArrayBuffer(encryptedData);
+    
+    // Derive the same key used for encryption
+    const key = await encryptionService.deriveKey(userId, saltBytes);
+    
+    // Decrypt the file content
+    const decryptedBuffer = await crypto.subtle.decrypt(
+      { name: 'AES-GCM', iv: ivBytes },
+      key,
+      encryptedBytes
+    );
+    
+    // The decrypted content is base64-encoded, so we need to decode it
+    const decryptedText = new TextDecoder().decode(decryptedBuffer);
 
-    const binaryString = atob(decrypted.content);
-    const bytes = new Uint8Array(binaryString.length);
-    for (let i = 0; i < binaryString.length; i++) {
-      bytes[i] = binaryString.charCodeAt(i);
+    // Decode the base64 to get the actual file content
+    const actualFileContent = atob(decryptedText);
+    const finalBuffer = new Uint8Array(actualFileContent.length);
+    for (let i = 0; i < actualFileContent.length; i++) {
+      finalBuffer[i] = actualFileContent.charCodeAt(i);
     }
-    return bytes.buffer;
+    
+    return finalBuffer.buffer;
+  }
+  
+  private base64ToUint8Array(base64: string): Uint8Array {
+    const binary = atob(base64);
+    const bytes = new Uint8Array(binary.length);
+    for (let i = 0; i < binary.length; i++) {
+      bytes[i] = binary.charCodeAt(i);
+    }
+    return bytes;
+  }
+  
+  private base64ToArrayBuffer(base64: string): ArrayBuffer {
+    const bytes = this.base64ToUint8Array(base64);
+    return bytes.buffer.slice(bytes.byteOffset, bytes.byteOffset + bytes.byteLength);
   }
 
   async uploadFiles(
@@ -78,6 +123,7 @@ export class FileService {
     userId: string,
     onProgress?: (progress: UploadProgress) => void
   ): Promise<FileAttachment> {
+    
     if (file.size > 10 * 1024 * 1024) {
       throw new Error('File size exceeds 10MB limit');
     }
@@ -150,13 +196,13 @@ export class FileService {
     const encryptedFile = await response.json();
     const decryptedBuffer = await this.decryptFile(
       encryptedFile.encryptedData,
-      encryptedFile.encryptedTitle,
       encryptedFile.iv,
       encryptedFile.salt,
       userId
     );
 
-    return new Blob([decryptedBuffer], { type: attachment.mimeType });
+    const blob = new Blob([decryptedBuffer], { type: attachment.mimeType });
+    return blob;
   }
 
   async removeFile(attachmentId: string): Promise<void> {