feat: refresh Support Open Source widget on Home

[stackingsaunter]

Summary

• rename the Home support card title from Support Alby to Support Open Source
• apply the updated support card UI used in the redesign (heart icon/content treatment)
• move the widget to the right column under Recently Used Apps

Test plan

• Run cd frontend && yarn tsc:compile
• Verify widget renders as Support Open Source with updated UI
• Verify widget appears in the right column below Recently Used Apps

Made with Cursor

Summary by CodeRabbit

• Style
  • Redesigned the Support widget with improved layout and visual hierarchy
  • Added a decorative heart icon alongside donation messaging
  • Updated call-to-action text to better emphasize donation options
  • Repositioned the Support widget to a more prominent location on the home screen for increased visibility

[coderabbitai]

📝 Walkthrough

Walkthrough

The PR restructures the SupportAlbyWidget component's internal layout, moving descriptive content from CardHeader to CardContent and adding a heart icon, while repositioning the widget from the left column to the right column in the Home screen.

Changes

Cohort / File(s)	Summary
Widget UI Restructuring frontend/src/components/home/widgets/SupportAlbyWidget.tsx	CardHeader restructured to contain only title; descriptive text moved to new CardContent with horizontal layout and orange heart icon; CardFooter padding/margin adjusted; heart icon removed from LinkButton.
Screen Layout Reorganization frontend/src/screens/Home.tsx	SupportAlbyWidget repositioned from left column (between WhatsNewWidget and conditional Alby Account link) to right column at top position (after LatestUsedAppsWidget).

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related issues

• Epic: Home dashboard refresh (widgets, APIs, layout cleanup) #2177: Updates SupportAlbyWidget UI with refreshed "Support Open Source" branding and repositions it within Home screen layout.

Possibly related PRs

• style(frontend): remove card shadows and unify card grid spacing #2154: Modifies Home screen layout with grid spacing adjustments in the same file.

Poem

🐰 A widget hops with a heart so bright,
From left to right, a layout delight!
Orange beats within CardContent embrace,
"Support Open Source" finds its place. 💖

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'feat: refresh Support Open Source widget on Home' directly describes the main changes: refreshing the Support widget UI and its positioning on the Home screen.
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

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/support-open-source-widget

---

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.}

[reneaaron]

Removed card rounding and shadow-removal as this should be done on a theme-basis.

tACK

[coderabbitai]

🧹 Nitpick comments (1)

frontend/src/components/home/widgets/SupportAlbyWidget.tsx (1)

16-16: Optional: align component naming with new user-facing title.

Since the card now says “Support Open Source,” renaming SupportAlbyWidget (and related identifiers later) would improve long-term readability.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@frontend/src/components/home/widgets/SupportAlbyWidget.tsx` at line 16,
Rename the component SupportAlbyWidget and any related identifiers to reflect
the new user-facing title (e.g., SupportOpenSourceWidget): update the function
name SupportAlbyWidget, its exported identifier, any filenames, CSS classes,
prop or handler names that include "Alby", and all imports/usages throughout the
codebase (components, tests, stories, and routing) to the new name so references
remain consistent; ensure default/exported names and any i18n keys or analytics
event labels that mention "Alby" are also updated to the new "Support Open
Source" naming.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@frontend/src/components/home/widgets/SupportAlbyWidget.tsx`:
- Line 16: Rename the component SupportAlbyWidget and any related identifiers to
reflect the new user-facing title (e.g., SupportOpenSourceWidget): update the
function name SupportAlbyWidget, its exported identifier, any filenames, CSS
classes, prop or handler names that include "Alby", and all imports/usages
throughout the codebase (components, tests, stories, and routing) to the new
name so references remain consistent; ensure default/exported names and any i18n
keys or analytics event labels that mention "Alby" are also updated to the new
"Support Open Source" naming.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: f594cfee-ab21-4772-aee7-9c6c1d23e275

📥 Commits

Reviewing files that changed from the base of the PR and between c0e8df6 and d825b04.

📒 Files selected for processing (2)

• frontend/src/components/home/widgets/SupportAlbyWidget.tsx
• frontend/src/screens/Home.tsx