Feat: Custom Avatar & Hovering Feature

[paretar758-cloud]

Describe the feature

@rahulharpal1603 Sir please assign this issue to me and if you want some more changes in it you can tell me those changes too.

Issue 1: Add Hover Tooltips for Face Detection Scanner and Profile Icons
Description

The top navigation bar includes two key UI elements:

Face Detection Scanner Icon

User Profile Icon

Currently, users must click these icons to understand their purpose. Modern UI/UX standards recommend displaying hover tooltips that reveal the function of each icon without user interaction. This improves clarity and reduces accidental clicks.

Problem

No tooltip appears when hovering over the icons, causing discoverability issues for new users.

Expected Behavior

When the user hovers over:

Face Detection Scanner icon → Tooltip: "Face Scanner"

Profile icon → Tooltip: "Profile"

The tooltip should appear with a slight fade animation and follow standard UI accessibility guidelines.

Actual Behavior

Hovering does not reveal any label or tooltip.

Steps to Reproduce

Open the application.

Move the cursor over the face scanner icon.

Move the cursor over the profile icon.

Observe that no informational tooltip appears.

Technical Notes

The frontend uses React, ShadCN, and TailwindCSS, which support tooltip components.

Implement using ShadCN or a lightweight custom component.

Ensure tooltips are keyboard accessible for tab-navigation (ARIA support).

Issue 2: Prevent User Registration Without Selecting a Folder
Description

During the initial onboarding flow, new users are prompted to select at least one folder for PictoPy’s gallery scanning process. However, the system currently allows the user to proceed without selecting any folder.

This leads to potential runtime issues (empty gallery, no scans) and breaks the expected onboarding flow.

Problem

The "Continue" button is enabled even when no folder is selected.

Expected Behavior

User must select at least one folder before proceeding.

If no folder is selected, display an error message:
"Please select at least one folder to continue."

Disable the "Continue" button when the folder selection array is empty.

Actual Behavior

The user can continue without selecting a folder, resulting in an incomplete setup.

Steps to Reproduce

Register a new account.

Reach the folder selection screen.

Do not select any folder.

Click the "Continue" button.

Onboarding continues despite invalid input.

Technical Notes

Frontend state is managed using Redux Toolkit.

Add validation check before dispatching the onboarding completion action.

Disable the button using a simple condition:
disabled={selectedFolders.length === 0}

Show inline validation message using a modal, toast, or ShadCN .

Issue 3: Add Custom Avatar Upload Option During User Registration
Description

During the registration process, the application allows users to choose an avatar from a set of predefined images. There is no option for users to upload their own custom image as an avatar.

Adding a Custom Avatar option will enhance personalization and align with common UX practices in modern applications.

Problem

User cannot upload a personalized avatar; they are limited to default system-generated options.

Expected Behavior

Show an additional avatar option: "Custom Avatar".

When the user clicks it, open the system file picker.

Allow selecting any image file from the device gallery.

Crop or resize the image automatically to match avatar dimensions (if required).

Store the selected image path or base64 in the user profile metadata.

Actual Behavior

Only predefined avatar images are available; no upload option exists.

Steps to Reproduce

Register a new account.

Reach the avatar selection screen.

Observe that only default avatars are available.

Attempt to upload a custom image → no option provided.

Technical Notes

Avatar selection UI is built with React, Tailwind, and ShadCN.

Use Tauri's file dialog API:
tauri::api::dialog::FileDialogBuilder to open the system file picker.

Validate supported image formats (e.g., .jpg, .png, .jpeg).

Store selected avatar in SQLite and load on next login.

Add ScreenShots

Sir see this image i want if user is hovering on these their name should appear to user.

Sir see this image i think user should select atleast one folder here before proceeding further.

Sir see this image i wanna add custom avatar feature here.

Record

• I agree to follow this project's Code of Conduct
• I want to work on this issue

Checklist before Submitting.

• Have you updated docs for it?.
• Have you added unit tests?.
• Have you made sure unit tests pass?
• Have you made sure code formatting is correct?
• Does it contain any style related issues?

[nischaldoescode]

Issue 1: OverView

My Approach

1. Component Analysis

In Navbar.tsx, the following can be found:

• FaceSearchDialog (Face Scanner icon)
• Profile / User Avatar (Profile icon link)

Neither of these elements has a tooltip upon hover, making it less clear what they do to a new user.

---

2. Implementation Strategy

Use the existing ShadCN Tooltip component to wrap both interactive elements. In this way, UI implementation would be much more consistent.

Example structure:

<Tooltip>
  <TooltipTrigger>
    {/* Icon Component */}
  </TooltipTrigger>
  <TooltipContent>Label</TooltipContent>
</Tooltip>

---

Key Requirements

• A tooltip will appear upon hover, with a fade-in animation.
• Fully accessible: supports keyboard focus, ARIA roles/labels, and screen readers.
• Clear, professional labels:
  • "Face Scanner" for the FaceSearchDialog icon
  • "Profile" for the user avatar icon

---

Almost Halfway Done if you reply then I could work on the Issue 2 as well.

Thanks...

[nischaldoescode]

Hello @rahulharpal1603, and @paretar758-cloud

I’ve opened a Pull Request addressing Issue 1,
The PR implements the hover tooltips for both the Face Scanner and Profile icons as discussed.
If you reply I can also start working on the issue 2.

[avishek0769]

@paretar758-cloud Thanks for creating this issue. I noticed that it contains three separate items, each with different scopes (UI enhancement, validation fix, and a new feature).
To avoid confusion and to make contributions/PR reviews smoother, would it be possible to split them into separate issues?
Issue 1 is already being worked on by @nischaldoescode, and I’d like to take up Issue 2 and Issue 3 once they are separated.

[avishek0769]

Hi @nischaldoescode @paretar758-cloud just an update - I’ve opened a PR addressing the Issue 2 from this combined issue.
Once the issues are separated, I’ll update the PR to correctly reference the new issue number.
I would like to know your suggestions of any additional changes in my approach of solving this issue, by reviewing the PR. Thank you!

[nischaldoescode]

Hi @avishek0769 wait for atleast the author of the issue or the mentor to reply, I worked on Issue 1 because I had asked the author.