Skip to content

Docs/architecture workflow diagram #1368

Open
serusharma wants to merge 3 commits into
AOSSIE-Org:mainfrom
serusharma:docs/architecture-workflow-diagram
Open

Docs/architecture workflow diagram #1368
serusharma wants to merge 3 commits into
AOSSIE-Org:mainfrom
serusharma:docs/architecture-workflow-diagram

Conversation

@serusharma

@serusharma serusharma commented Jul 7, 2026

Copy link
Copy Markdown

Summary

This PR improves the architecture documentation by adding:

  • High-level system flow diagram
  • Image processing workflow diagram
  • Better visualization of interactions between the frontend, Rust backend, Python backend, database, and AI models

These changes help make the documentation more visual, structured, and easier to understand for new contributors and users.

Summary by CodeRabbit

  • Documentation

    • Expanded the architecture overview with clearer system flow and end-to-end image processing diagrams.
    • Added more detail on how the app’s major components connect and exchange data.
  • Bug Fixes

    • Added a confirmation prompt before deleting a folder to help prevent accidental removals.

@github-actions

github-actions Bot commented Jul 7, 2026

Copy link
Copy Markdown
Contributor

⚠️ No issue was linked in the PR description.
Please make sure to link an issue (e.g., 'Fixes #issue_number')

@coderabbitai

coderabbitai Bot commented Jul 7, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

Walkthrough

This PR adds new architecture documentation with Mermaid diagrams illustrating system flow and image processing workflow, and modifies the folder deletion handler in FolderManagementCard to prompt for user confirmation via window.confirm before deleting a folder.

Changes

Architecture Documentation

Layer / File(s) Summary
High-level system flow and image processing diagrams
docs/overview/architecture.md
Adds a "High Level System Flow" section with a Mermaid flowchart of frontend/backend/model interactions, and an "Image Processing Workflow" section with a Mermaid sequence diagram covering image processing from selection to result display, retaining the existing "Backend rust (via Tauri)" section.

Folder Deletion Confirmation

Layer / File(s) Summary
Confirm-before-delete flow
frontend/src/pages/SettingsPage/components/FolderManagementCard.tsx
The folder delete button now shows a window.confirm dialog and only calls deleteFolder when the user confirms.

Estimated code review effort: 1 (Trivial) | ~5 minutes

Possibly related issues

Possibly related PRs

  • AOSSIE-Org/PictoPy#516: Relates to the original FolderManagementCard implementation wiring the delete button to deleteFolder(folder.folder_id).
  • AOSSIE-Org/PictoPy#606: Relates to prior edits to FolderManagementCard's folder-item UI, including the Delete button placement.

Suggested labels: Documentation, TypeScript/JavaScript

Suggested reviewers: rohan-pandeyy

Poem

A rabbit hopped through docs and code today,
Drew diagrams to show the AI's way,
Then paused before a folder's fate,
"Are you sure?" it asked, before too late.
Confirm and flowchart, safe and clear —
Hop, hop, hooray, the release is near! 🐇✨

🚥 Pre-merge checks | ✅ 4
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title is concise and matches the main documentation change about the architecture workflow diagram.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@github-actions

github-actions Bot commented Jul 7, 2026

Copy link
Copy Markdown
Contributor

⚠️ No issue was linked in the PR description.
Please make sure to link an issue (e.g., 'Fixes #issue_number')

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🧹 Nitpick comments (1)
frontend/src/pages/SettingsPage/components/FolderManagementCard.tsx (1)

79-87: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Consider using an in-app confirmation dialog instead of window.confirm.

The guard logic itself is correct, but window.confirm renders a native OS-styled popup that ignores the app's theming (light/dark mode, styled buttons) used throughout this component. Since the project already relies on a UI component library, a themed AlertDialog/Dialog component would keep the confirmation experience consistent with the rest of the settings page.

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@frontend/src/pages/SettingsPage/components/FolderManagementCard.tsx` around
lines 79 - 87, The delete-folder guard in FolderManagementCard uses
window.confirm, which bypasses the app’s themed UI. Replace the inline browser
confirm inside the onClick handler with an in-app confirmation flow using the
project’s dialog component (for example an AlertDialog/Dialog from the UI
library), and keep deleteFolder(folder.folder_id) behind the confirmed action.
Use the existing FolderManagementCard component and its delete action wiring to
locate and swap out the confirmation logic.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@docs/overview/architecture.md`:
- Line 36: The section title in the architecture documentation needs a hyphen
for consistency: update the “High Level System Flow” heading to “High-Level
System Flow.” Make the change directly in the markdown heading text so the
documentation style matches the rest of the docs and the title uses the correct
wording.

---

Nitpick comments:
In `@frontend/src/pages/SettingsPage/components/FolderManagementCard.tsx`:
- Around line 79-87: The delete-folder guard in FolderManagementCard uses
window.confirm, which bypasses the app’s themed UI. Replace the inline browser
confirm inside the onClick handler with an in-app confirmation flow using the
project’s dialog component (for example an AlertDialog/Dialog from the UI
library), and keep deleteFolder(folder.folder_id) behind the confirmed action.
Use the existing FolderManagementCard component and its delete action wiring to
locate and swap out the confirmation logic.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: b7589006-d1be-40d9-94c0-67767d57eac0

📥 Commits

Reviewing files that changed from the base of the PR and between ffc0d48 and a3331e4.

📒 Files selected for processing (2)
  • docs/overview/architecture.md
  • frontend/src/pages/SettingsPage/components/FolderManagementCard.tsx

<br>
<br>

## High Level System Flow

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win

Hyphenate the section title.

High Level should be High-Level here for consistency and cleaner documentation style. As per path instructions, documentation and comments must be free of spelling mistakes.

Suggested edit
-## High Level System Flow
+## High-Level System Flow
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
## High Level System Flow
## High-Level System Flow
🧰 Tools
🪛 LanguageTool

[grammar] ~36-~36: Use a hyphen to join words.
Context: ...d in our API section.

## High Level System Flow The following diagram...

(QB_NEW_EN_HYPHEN)

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@docs/overview/architecture.md` at line 36, The section title in the
architecture documentation needs a hyphen for consistency: update the “High
Level System Flow” heading to “High-Level System Flow.” Make the change directly
in the markdown heading text so the documentation style matches the rest of the
docs and the title uses the correct wording.

Source: Path instructions

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant