Redesign categories section with sleek, elegant UI

[4tala]

🎨 UI Redesign for Categories Section

Makes the categories bar more modern and polished.

Changes

Before	After
Small 40px icons	Larger 44px icons with circular background
Hard borders	Subtle drop shadows
Basic hover	Smooth elevation animation
Just category name	Added initiative count
Basic selected state	Elegant blue accent with glow

Visual Improvements

• Cards: Rounded corners (xl), subtle shadows, no harsh borders
• Icons: Circular container background, larger size
• Hover: Smooth lift effect with shadow
• Selected: Blue tint + border + shadow glow
• Typography: Better font weights, improved color contrast
• Info: Shows יוזמות count under each category

Code Quality

• Cleaner component structure
• Uses cubic-bezier for smoother animations
• Better semantic color usage

[netlify]

✅ Deploy Preview for linksforisrael ready!

Name	Link
🔨 Latest commit	dcfbbd9
🔍 Latest deploy log	https://app.netlify.com/projects/linksforisrael/deploys/69887e11bb6f860008e476de
😎 Deploy Preview	https://deploy-preview-730--linksforisrael.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[qodo-code-review]

Review Summary by Qodo

Redesign categories section with modern, elegant UI
✨ Enhancement

Walkthroughs

Description

• Redesigned categories UI with larger 44px icons in circular backgrounds
• Enhanced visual hierarchy with improved shadows, spacing, and typography
• Added initiative count display under each category name
• Implemented smooth animations with cubic-bezier easing and elevation effects
• Improved selected state with blue accent, border, and glow shadow
• Refined tooltip styling with dark background and better contrast

Diagram

flowchart LR
  A["Old Categories UI"] -->|"Larger icons 44px"| B["Icon Container"]
  A -->|"Better shadows & spacing"| C["Card Styling"]
  A -->|"Initiative count"| D["Category Info"]
  A -->|"Smooth animations"| E["Hover Effects"]
  A -->|"Blue accent & glow"| F["Selected State"]
  B --> G["Modern UI"]
  C --> G
  D --> G
  E --> G
  F --> G

Loading

File Changes

1. app/components/Categories/CategoriesList.tsx ✨ Enhancement +74/-20

Redesign categories with modern UI and animations

• Increased icon size from 40px to 44px with circular container background
• Enhanced card styling with rounded corners (xl), subtle shadows, and improved spacing
• Added initiative count display using getNumberOfInitiatives() function
• Improved selected state with blue.50 background, blue.200 border, and colored glow shadow
• Refined hover animations with cubic-bezier timing and increased elevation
• Enhanced typography with better font weights and color contrast based on selection state
• Improved tooltip appearance with dark gray background and white text
• Added helper function isSelected() to reduce code duplication

app/components/Categories/CategoriesList.tsx

---

[qodo-code-review]

Code Review by Qodo

🐞 Bugs (2) 📘 Rule violations (0) 📎 Requirement gaps (0)

1. Analytics fires without navigation 🐞 Bug ✓ Correctness

Description

• The card container (<Box>) handles onClick (tracking + clearing search) while navigation is
  handled by a nested next/link <Link>; clicks on the card padding/whitespace can trigger
  analytics/search reset without actually navigating.
• This can skew the “Category Viewed” metric and creates inconsistent UX (users expect clicking the
  card to navigate) and weaker accessibility semantics due to nested interactive behavior.

Code

app/components/Categories/CategoriesList.tsx[R76-109]

  				onSearch("");
  			}}
  			cursor="pointer"
-						m={2}
-						p={2}
-						borderWidth="1px"
-						borderRadius="md"
-						_hover={{ boxShadow: "lg", transform: "translateY(-2px)" }}
-						bg={!search && category.id === categoryId ? "blue.200" : "white"}
-						transition="all 0.2s ease-in-out"
+						p={4}
+						borderRadius="xl"
+						bg={isSelected(category) ? "blue.50" : "white"}
+						boxShadow={
+							isSelected(category)
+								? "0 4px 20px rgba(66, 153, 225, 0.3)"
+								: "0 2px 8px rgba(0, 0, 0, 0.06)"
+						}
+						border="1px solid"
+						borderColor={isSelected(category) ? "blue.200" : "transparent"}
+						_hover={{
+							boxShadow: "0 8px 24px rgba(0, 0, 0, 0.12)",
+							transform: "translateY(-4px)",
+							bg: isSelected(category) ? "blue.50" : "gray.50",
+						}}
+						transition="all 0.25s cubic-bezier(0.4, 0, 0.2, 1)"
+						minW="100px"
+						display="flex"
+						flexDirection="column"
+						alignItems="center"
+						justifyContent="center"
  		>
-						<Link href={`/${category.id}`}>
+						<Link
+							href={`/${category.id}`}
+							style={{
+								display: "flex",
+								flexDirection: "column",
+								alignItems: "center",
+								textDecoration: "none",
+							}}
+						>

Evidence

The PR makes the category card visually larger (more padding/min width), but navigation still only
occurs when clicking the nested Link. The outer Box click handler will run regardless of whether
navigation happens, and it calls trackCategoryView which is explicitly a “Category Viewed” event.

app/components/Categories/CategoriesList.tsx[72-109]
app/utils/analytica/analytics.ts[25-38]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
The category card currently has an outer clickable container that fires analytics + clears search, while navigation happens only via a nested `<Link>`. This allows clicks that do not navigate to still be tracked as “Category Viewed”.
### Issue Context
Because the card now has larger padding/min width, users are more likely to click areas that are inside the `<Box>` but outside the `<Link>`’s hit target.
### Fix
Prefer one of these patterns:
1) Make the `<Link>` wrap the entire card and attach the click handler to the Link (so it only runs on navigation clicks), or
2) Use Chakra’s `LinkBox`/`LinkOverlay` to make the whole card a link while keeping layout components.
Also ensure keyboard accessibility (Enter/Space) triggers navigation + tracking.
### Fix Focus Areas
- app/components/Categories/CategoriesList.tsx[72-109]
- app/utils/analytica/analytics.ts[25-38]

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

2. Initiatives label pluralization 🐞 Bug ✓ Correctness

Description

• The newly added initiatives count label is hard-coded as "יוזמות" (plural) for all counts,
  producing grammatically incorrect UI such as "1 יוזמות".
• The codebase already contains examples of conditional Hebrew/English copy; this label should
  follow a similar pattern (at minimum singular/plural handling).

Code

app/components/Categories/CategoriesList.tsx[R136-143]

+							<Text
+								fontSize="xs"
+								color={isSelected(category) ? "blue.500" : "gray.400"}
+								mt={1}
+								fontWeight="500"
+							>
+								{getNumberOfInitiatives(category)} יוזמות
+							</Text>

Evidence

CategoriesList renders a numeric count followed by a fixed plural Hebrew string. Other UI areas
already branch copy based on direction/locale, indicating the codebase accepts conditional strings.

app/components/Categories/CategoriesList.tsx[136-143]
app/components/Categories/CategoriesList.tsx[25-29]
app/components/Initiative/InitiativeShowMoreModal.tsx[171-203]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
The initiatives count label always uses the plural Hebrew word "יוזמות", which is incorrect for a count of 1 (and potentially other special cases).
### Issue Context
This label is rendered for every category card.
### Fix
Compute the count once per category render and choose the correct label:
- `const count = getNumberOfInitiatives(category);`
- `const label = count === 1 ? "יוזמה" : "יוזמות";`
- Render: `{count} {label}`
Optionally extract a small helper like `formatInitiativesLabel(count)` and/or use `useMemo` to precompute counts per `categories` to avoid repeated reductions.
### Fix Focus Areas
- app/components/Categories/CategoriesList.tsx[25-29]
- app/components/Categories/CategoriesList.tsx[136-143]

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

ⓘ The new review experience is currently in Beta. Learn more