new app card

[bordalix]

Small UI fixes in App cards

Before:

After:

Summary by CodeRabbit

• New Features

  • Added visual bullet indicators for newly added apps.
  • Live apps can now display a purple-highlighted border to indicate live status.

• Style

  • Updated tag appearance and colors for "new" and "coming soon" states (background and text color adjustments).
  • Enhanced app card styling with added padding and improved status/layout presentation.

[coderabbitai]

Walkthrough

Added a boolean borderPurple prop to the Shadow component to choose between purple or dark border color. The Apps Index screen was updated to pass borderPurple for live items, adjusted Tag visuals, replaced an IonText wrapper with simple layout markup, and added padding to the app card container.

Changes

Cohort / File(s)	Summary
Shadow component src/components/Shadow.tsx	Added public prop borderPurple?: boolean to ShadowProps; destructured it in the Shadow function; border color logic now uses var(--purple) when border && borderPurple else var(--dark10).
Apps screen / Tag & layout changes src/screens/Apps/Index.tsx	Added a small Middot/Bullet inline component; adjusted Tag styling (background/text colors) for 'new' vs 'coming soon'; replaced IonText wrapper with a div + FlexRow; added padding: 0.5rem to app container; pass borderPurple={live} to Shadow and wire Tag label to live state.

Sequence Diagram(s)

sequenceDiagram
  participant Apps as Apps/Index
  participant Shadow as Shadow component
  Apps->>Shadow: render(app, props... , borderPurple = live)
  alt live == true
    Note right of Shadow: borderPurple=true\nchoose var(--purple) border
  else live == false
    Note right of Shadow: borderPurple=false\nchoose var(--dark10) border
  end
  Shadow-->>Apps: renders children with computed border color

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• Check borderPurple prop typing and default behavior when undefined.
• Verify border color computation and CSS variable names (--purple, --dark10).
• Validate Apps/Index UI changes: Tag color adjustments, Middot inclusion, layout replacement (IonText -> div/FlexRow), and the added padding interact correctly with existing styles and click behavior.

Suggested reviewers

• tiero

Pre-merge checks and finishing touches

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.
Title check	❓ Inconclusive	The title 'new app card' is vague and generic, using non-descriptive terms that don't convey meaningful information about the specific UI changes made to the app cards.	Consider a more specific title like 'Update app card styling with purple border and new tag indicator' to clearly communicate the main changes being made.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch app_card

---

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

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 82ad320 and bb1ee08.

📒 Files selected for processing (2)

• src/components/Shadow.tsx (3 hunks)
• src/screens/Apps/Index.tsx (4 hunks)

🧰 Additional context used

🧬 Code graph analysis (1)

src/screens/Apps/Index.tsx (3)

src/components/Bullet.tsx (1)

• Bullet (1-12)

src/components/FlexRow.tsx (1)

• FlexRow (16-45)

src/components/Shadow.tsx (1)

• Shadow (18-55)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: test

🔇 Additional comments (4)

src/components/Shadow.tsx (1)

5-5: LGTM! Clean conditional border styling.

The borderPurple prop is well-integrated and follows the existing pattern. The conditional logic clearly switches between purple and dark10 border colors based on the prop value.

Also applies to: 20-20, 42-42

src/screens/Apps/Index.tsx (3)

21-44: LGTM! Tag component refactoring looks good.

The updated styling and layout effectively differentiate between 'new' and 'coming soon' states. The use of FlexRow with the Bullet component for 'new' items provides a clear visual indicator, and the non-breaking space ensures "coming soon" displays correctly.

---

55-91: LGTM! App component updates enhance the UI.

The added padding improves the clickable area, and the borderPurple={live} prop correctly ties the border styling to the app's live status, creating a cohesive visual design with the Tag component.

---

93-132: LGTM! App status indicators are correctly configured.

The live prop is appropriately set for active apps (Boltz, LendaSat, LendaSwap), while Fuji Money correctly defaults to "coming soon" status. The visual hierarchy effectively communicates app availability.

[cloudflare-workers-and-pages]

Deploying wallet-signet with    Cloudflare Pages

Latest commit:	ea0897c
Status:	✅  Deploy successful!
Preview URL:	https://2775e81e.wallet-23u.pages.dev
Branch Preview URL:	https://app-card.wallet-23u.pages.dev

View logs

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

src/screens/Apps/Index.tsx (1)

37-42: Consider using <span> instead of <p> for inline text.

The <p> element typically has default vertical margins that could interfere with the tight layout inside FlexRow. Since this is inline text within a flex container, a <span> would be more appropriate.

Apply this diff:

     <div style={style}>
       <FlexRow centered gap='0.25rem'>
         {kind === 'new' ? <Middot /> : ''}
-        <p>{kind.replace(' ', '\u00A0')}</p>
+        <span>{kind.replace(' ', '\u00A0')}</span>
       </FlexRow>
     </div>

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between bb1ee08 and ea0897c.

📒 Files selected for processing (1)

• src/screens/Apps/Index.tsx (4 hunks)

🧰 Additional context used

🧬 Code graph analysis (1)

src/screens/Apps/Index.tsx (2)

src/components/FlexRow.tsx (1)

• FlexRow (16-45)

src/components/Shadow.tsx (1)

• Shadow (18-55)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: test

🔇 Additional comments (4)

src/screens/Apps/Index.tsx (4)

15-19: LGTM! Accessibility and naming concerns addressed.

The aria-hidden='true' attribute has been properly added, and the component has been renamed from "Bullet" to "Middot" to avoid collision with src/components/Bullet.tsx. The implementation is correct.

---

60-60: LGTM!

The padding addition improves the visual spacing of the app card container.

---

69-69: LGTM!

The borderPurple prop correctly wires the live state to the Shadow component's border styling, applying a purple border for live apps and a dark border otherwise.

---

77-77: LGTM!

The conditional logic correctly displays the 'new' tag for live apps and 'coming soon' for others, aligning with the updated visual design.

[cloudflare-workers-and-pages]

Deploying wallet-mutinynet with    Cloudflare Pages

Latest commit:	ea0897c
Status:	✅  Deploy successful!
Preview URL:	https://5425909f.arkade-wallet.pages.dev
Branch Preview URL:	https://app-card.arkade-wallet.pages.dev

View logs

[cloudflare-workers-and-pages]

Deploying wallet-bitcoin with    Cloudflare Pages

Latest commit:	ea0897c
Status:	✅  Deploy successful!
Preview URL:	https://1ce8deee.wallet-bitcoin.pages.dev
Branch Preview URL:	https://app-card.wallet-bitcoin.pages.dev

View logs