UI improvements

[BasuruK]

Summary by CodeRabbit

• New Features

  • Client-side login with encrypted credential storage and logout
  • In-app code editor, structured JSON table view, copy/clear extracted-data actions
  • New icons and upload/preview controls for image/PDF extraction

• UI/UX Enhancements

  • Authentication-gated flows with loading skeletons and spinners
  • Navbar user menu with theme toggle; footer/layout spacing improvements
  • Right-side extracted-data card with dynamic copy/preview states

• Chores

  • Dependency updates, site metadata and navigation simplified; examples removed

[coderabbitai]

Walkthrough

Adds client-side authentication with encrypted credential storage, gates the app UI behind login, refactors layout (Navbar removed from layout), implements secure API-key retrieval and OpenAI file upload/streaming, and introduces new UI components (CodeEditor, JsonTable, LoginScreen) plus Draft.js styles and dependency updates.

Changes

Cohort / File(s)	Summary
Authentication & Secure Storage lib/secure-storage.ts, components/login-screen.tsx	New secure-storage API for encrypted API keys (encrypt/decrypt validation, cache, load/save/clear/isAuthenticated/validate) and a LoginScreen component that validates encrypted keys, saves credentials, and signals onLogin.
Application Entry & Layout app/layout.tsx, app/page.tsx, config/site.ts	Layout adjusted (removed Navbar rendering, changed container classes to min-h-screen and moved spacing); app/page.tsx now implements client-side auth gating, login flow, extraction UI, streaming parsing, file preview/cleanup, JSON extraction, and conditionally renders Navbar; site metadata and nav simplified.
New UI Components & Icons components/code-editor.tsx, components/json-table.tsx, components/navbar.tsx, components/icons.tsx, components/login-screen.tsx	Added Draft.js-based CodeEditor with external-sync and composition handling; JsonTable with nested table rendering and recursion guard; Navbar now accepts username/onLogout and embeds user dropdown + theme toggle; new icons: TrashIcon, SparklesIcon, LogoutIcon; LoginScreen added (see above).
OpenAI Integration & File Handling lib/openai.ts	Reworked extraction to lazily retrieve API key from secure storage, upload PDFs via OpenAI Files API (with cleanup), send stream:true requests, adapt streaming parsing to new event shapes, and improve error reporting and logging.
Styling, Dependencies & Tooling styles/globals.css, package.json	Added Draft.js editor CSS; updated dependencies (added crypto-js, draft-js, react-markdown, remark-gfm), loosened several package versions to caret ranges, added typings, and changed electron:dev script.
Removed Examples examples/usage-examples.ts	Removed example usage file and all exported example helper functions and types.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant App as app/page.tsx
    participant Auth as lib/secure-storage.ts
    participant Login as LoginScreen
    participant API as lib/openai.ts
    participant OpenAI as OpenAI API

    rect rgb(240,248,255)
    Note over User,App: Authentication check & login
    User->>App: Open page
    App->>Auth: isAuthenticated()
    alt not authenticated
        App->>Login: render LoginScreen
        User->>Login: submit username + encrypted key
        Login->>Auth: validateEncryptedKey()
        alt valid
            Login->>Auth: saveCredentials()
            Auth-->>App: credentials cached
            App->>App: render main UI
        else invalid
            Login-->>User: show error
        end
    else authenticated
        Auth-->>App: credentials available
        App->>App: render main UI
    end
    end

    rect rgb(240,255,240)
    Note over User,OpenAI: Extraction / streaming
    User->>App: upload file & request extract
    App->>API: extractDataFromFile(file)
    API->>Auth: getDecryptedApiKey()
    Auth-->>API: decrypted key
    alt PDF
        API->>OpenAI: upload file -> file_id
    else Image
        API->>API: build content item
    end
    API->>OpenAI: start stream:true request
    loop streaming
        OpenAI->>API: stream chunk
        API->>App: emit chunk -> update extractedText/UI
    end
    API-->>App: final parsed JSON result
    App->>App: show JsonTable / CodeEditor
    end

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~50 minutes

Potential focus areas:

• lib/openai.ts — file upload, streaming parsing, and error handling.
• lib/secure-storage.ts — cryptography correctness, key handling, and localStorage guards.
• components/code-editor.tsx — Draft.js selection/composition sync logic and external value reconciliation.
• components/json-table.tsx — recursion handling and rendering correctness for deep/cyclic data.
• app/page.tsx — auth gating, state orchestration for streaming, and cleanup paths.

Poem

🐇 I nibbled keys beneath a silver moon,
Hid secrets safe in a tiny rune,
Editors hum as tables bloom,
Streams unfurl invoices from the gloom,
Hop along—our burrow’s bright and soon. ✨

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Free

📥 Commits

Reviewing files that changed from the base of the PR and between 2686e01 and 4e552bc.

📒 Files selected for processing (7)

• app/page.tsx (7 hunks)
• components/code-editor.tsx (1 hunks)
• components/json-table.tsx (1 hunks)
• components/login-screen.tsx (1 hunks)
• components/navbar.tsx (1 hunks)
• lib/openai.ts (4 hunks)
• lib/secure-storage.ts (1 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

• components/navbar.tsx

---

Note

🎁 Summarized by CodeRabbit Free

Your organization is on the Free plan. CodeRabbit will generate a high-level summary and a walkthrough for each pull request. For a comprehensive line-by-line review, please upgrade your subscription to CodeRabbit Pro by visiting https://app.coderabbit.ai/login.

_{Comment @coderabbitai help to get the list of available commands and usage tips.}