ui(empty-state): make Settings link clickable in empty gallery

[skyforge-glitch]

Fixes #965

🧭 Make “Settings” link clickable in empty gallery

What

Makes the “Go to Settings to add folders” text in the empty gallery state clickable and navigates directly to the Settings page.

Why

When users land on an empty gallery, adding folders is the next obvious action.
Making the Settings link clickable reduces friction and improves first-time user experience.

Scope

• UI-only change
• No backend changes
• No routing logic modified
• Limited to EmptyGalleryState

Implementation

• Uses existing router navigation
• Only the word Settings is interactive for clarity and accessibility

---

📸 Screenshots

Before

Plain text, not clickable.

After

Settings is clickable and navigates directly to the Settings page.

---

Testing

• Verified navigation to Settings from empty gallery state
• No regressions observed

Summary by CodeRabbit

• New Features

  • Empty gallery state now shows an interactive "Settings" button replacing static guidance; tapping it opens the Settings screen to configure folders, improving discoverability.

• Chores

  • Navigation behavior added to enable the Settings button; no changes to public component APIs or exported interfaces.

[github-actions]

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

[coderabbitai]

📝 Walkthrough

Walkthrough

The EmptyGalleryState component now imports useNavigate and ROUTES, creates const navigate = useNavigate(), and replaces the static "Go to Settings to add folders." text with an inline clickable Settings button that calls navigate(\/${ROUTES.SETTINGS}`)`.

Changes

Cohort / File(s)	Summary
Navigation Enhancement in Empty Gallery State frontend/src/components/EmptyStates/EmptyGalleryState.tsx	Added useNavigate and ROUTES imports; introduced navigate hook; replaced static guidance text with an inline clickable Settings button that triggers navigate(\/${ROUTES.SETTINGS}`)`.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• Add empty state placeholders for AI tagging and home pages #549 — Modifies the same EmptyGalleryState component to add navigation via useNavigate and a Settings button routing to SETTINGS.

Poem

🐇 I hopped through an empty gallery room,
Found a glowing "Settings" in bloom,
One click, a hop, a gentle glide,
To folders waiting on the other side. ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately and concisely describes the main UI change: making the Settings link clickable in the empty gallery state message.
Linked Issues check	✅ Passed	The PR implementation fully addresses issue #965 requirements: Settings text is clickable, navigates to Settings page, uses centralized routing, and is UI-only with no backend changes.
Out of Scope Changes check	✅ Passed	All changes are scoped to the EmptyGalleryState component and directly implement the linked issue requirements; no out-of-scope modifications detected.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[github-actions]

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

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI Agents

In @frontend/src/components/EmptyStates/EmptyGalleryState.tsx:
- Around line 22-32: The button in EmptyGalleryState.tsx currently removes the
focus outline via the class "focus:outline-none"; replace that with a visible
focus indicator (e.g., use Tailwind focus-visible or focus classes such as
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-400" or
"focus:ring-2 focus:ring-blue-400") on the Settings button (the button with
onClick={() => navigate("/settings")}) so keyboard users get a clear, accessible
focus state while preserving hover/visual styles.

🧹 Nitpick comments (1)

frontend/src/components/EmptyStates/EmptyGalleryState.tsx (1)

24-30: Consider using the Link component for better semantics and accessibility.

While the button approach works, using React Router's Link component is more semantic for navigation and provides better accessibility (e.g., right-click to open in a new tab, visible href for screen readers).

🔎 Alternative implementation using Link

First, update the import on line 2:

-import { useNavigate } from "react-router";
+import { Link } from "react-router";

Then replace the button with a Link:

-          <span>
-            Go to{" "}
-            <button
-              type="button"
-              onClick={() => navigate("/settings")}
-              className="text-blue-500 hover:underline focus:outline-none"
-            >
-              Settings
-            </button>{" "}
-            to add folders.
-          </span>
+          <span>
+            Go to{" "}
+            <Link
+              to="/settings"
+              className="text-blue-500 hover:underline focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+            >
+              Settings
+            </Link>{" "}
+            to add folders.
+          </span>

And remove the navigate hook initialization (lines 5-6) if it's no longer needed elsewhere.

📜 Review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 4bdf1d3 and 576fa5f.

📒 Files selected for processing (1)

• frontend/src/components/EmptyStates/EmptyGalleryState.tsx

🔇 Additional comments (2)

frontend/src/components/EmptyStates/EmptyGalleryState.tsx (2)

5-5: LGTM!

The useNavigate hook is correctly initialized at the component level following React's Rules of Hooks.

---

2-2: The import statement is correct for React Router 7. In v7, useNavigate is imported from "react-router" (not "react-router-dom" as in v6).

[skyforge-glitch]

Hi @rahulharpal1603 ,
As discussed, I’ve raised the PR for making the “Go to Settings to add folders” text in the empty gallery state clickable.

Please let me know if this looks good or if you’d like any changes.

[skyforge-glitch]

Hi @rahulharpal1603 , I’ve updated the navigation to remove hard-coded paths and now use the centralized routes provided in the project. Please let me know if this looks good.

[rahulharpal1603]

Thanks @skyforge-glitch!