|
| 1 | +# Feature: Responsive Footer Name & Legal Contact Links |
| 2 | + |
| 3 | +## Metadata |
| 4 | + |
| 5 | +run_id: `d7e7bdf6` |
| 6 | +prompt: `im footer mein name markus neusinger ist recht lang bei kleinen bildschrimen mobile... sieht das nichtmehr gut, minimal aus, ich möchte das ab der grösse bei der auch auf der startseite die filter zeile mit catolog... steht in 2 zeilen übergeht das mein name nichtmehr im footer zu sehen ist, dafür soll aber im legal tab bei contact links zu meinem linkedin x und github account sein zusätlich zu der email die schon da steht https://x.com/MarkusNeusinger https://github.com/MarkusNeusinger https://www.linkedin.com/in/markus-neusinger/` |
| 7 | + |
| 8 | +## Feature Description |
| 9 | + |
| 10 | +Two related changes to improve the mobile experience: |
| 11 | + |
| 12 | +1. **Footer**: Hide the "markus neusinger" link on small screens (below `md` / 960px breakpoint) — the same breakpoint where the FilterBar catalog/filter row wraps to 2 lines on the homepage. The name is too long and makes the footer look cramped on mobile. The dot separator before/after the name link should also be hidden. |
| 13 | + |
| 14 | +2. **Legal Page**: Add social/contact links (LinkedIn, X/Twitter, GitHub) to the Contact section in the Legal Notice, alongside the existing email. This ensures the contact information remains discoverable even when the footer name link is hidden on mobile. |
| 15 | + |
| 16 | +## Requirements |
| 17 | + |
| 18 | +- Hide the "markus neusinger" link (and its surrounding dot separators) in the footer when viewport width is below `md` (960px) — matching the FilterBar's `isMobile` breakpoint |
| 19 | +- On viewports `md` and above (960px+), the footer remains unchanged |
| 20 | +- Add LinkedIn, X (Twitter), and GitHub links to the Contact section of the Legal Notice on LegalPage |
| 21 | +- Social links: LinkedIn (`https://www.linkedin.com/in/markus-neusinger/`), X (`https://x.com/MarkusNeusinger`), GitHub (`https://github.com/MarkusNeusinger`) |
| 22 | +- Maintain consistent styling with existing Legal Page link patterns (color `#3776AB`, monospace font) |
| 23 | +- Track social link clicks via existing analytics (`onTrackEvent` / `trackEvent`) |
| 24 | + |
| 25 | +## Relevant Files |
| 26 | + |
| 27 | +### Existing Files to Modify |
| 28 | + |
| 29 | +- **`app/src/components/Footer.tsx`** — Hide the "markus neusinger" `<Link>` and its adjacent dot `<span>` separators on screens below `md` breakpoint using MUI's `sx` display responsive prop |
| 30 | +- **`app/src/pages/LegalPage.tsx`** — Add LinkedIn, X, and GitHub links to the Contact section (lines 102-109) in the Legal Notice Paper, below the existing email link |
| 31 | + |
| 32 | +### New Files to Create |
| 33 | + |
| 34 | +None. |
| 35 | + |
| 36 | +## Implementation Plan |
| 37 | + |
| 38 | +IMPORTANT: Execute every step in order, top to bottom. |
| 39 | + |
| 40 | +### 1. Update Footer to hide name on mobile |
| 41 | + |
| 42 | +In `app/src/components/Footer.tsx`: |
| 43 | + |
| 44 | +- Add `useMediaQuery` and `useTheme` imports from MUI |
| 45 | +- Add `const theme = useTheme()` and `const isMobile = useMediaQuery(theme.breakpoints.down('md'))` inside the component |
| 46 | +- Wrap the "markus neusinger" `<Link>` (lines 54-66) and the `<span>·</span>` separator immediately **before** it (line 53) in a `<Box>` (or use `sx={{ display: { xs: 'none', md: 'contents' } }}`) to hide them on small screens |
| 47 | +- The simplest approach: use MUI's responsive `display` prop on the separator span and the link: |
| 48 | + - On the `<span>·</span>` at line 53: add `sx={{ display: { xs: 'none', md: 'inline' } }}` |
| 49 | + - On the `<Link>` for "markus neusinger": add `display: { xs: 'none', md: 'inline' }` to its `sx` prop |
| 50 | +- This leaves the remaining 4 links (github · stats · mcp · legal) visible on mobile, with proper dot separation |
| 51 | + |
| 52 | +### 2. Add social/contact links to Legal Page |
| 53 | + |
| 54 | +In `app/src/pages/LegalPage.tsx`: |
| 55 | + |
| 56 | +- Locate the Contact section inside the Legal Notice Paper (around lines 102-109) |
| 57 | +- After the existing email link `<Link>`, add three more links on separate lines: |
| 58 | + - LinkedIn: `https://www.linkedin.com/in/markus-neusinger/` |
| 59 | + - X: `https://x.com/MarkusNeusinger` |
| 60 | + - GitHub: `https://github.com/MarkusNeusinger` |
| 61 | +- Use the same styling pattern as the email link (`sx={{ color: '#3776AB' }}`) |
| 62 | +- Add `target="_blank"` and `rel="noopener noreferrer"` for external links |
| 63 | +- Add `onClick` analytics tracking with `trackEvent('external_link', { destination: 'linkedin' })` etc. |
| 64 | +- Structure: keep it as a simple list within the existing `<Typography sx={textStyle}>` block using `<br />` for line breaks (matching the existing pattern in the Contact section) |
| 65 | + |
| 66 | +### 3. Verify responsive behavior |
| 67 | + |
| 68 | +- Build the frontend to ensure no TypeScript/compilation errors |
| 69 | +- Verify the footer shows 4 links on mobile (<960px) and 5 links on desktop (>=960px) |
| 70 | +- Verify the Legal page Contact section shows email + 3 social links |
| 71 | + |
| 72 | +### 4. Add Tests |
| 73 | + |
| 74 | +- No frontend test files exist in the project currently — skip test creation as there is no test infrastructure for React components |
| 75 | + |
| 76 | +## Validation Commands |
| 77 | + |
| 78 | +Execute these commands to validate the feature: |
| 79 | + |
| 80 | +- `cd app && npx tsc --noEmit` - Check TypeScript types |
| 81 | +- `cd app && yarn build` - Build frontend to verify no compilation errors |
| 82 | + |
| 83 | +## Notes |
| 84 | + |
| 85 | +- The `md` breakpoint (960px) was chosen because the user specifically asked for the same breakpoint where the FilterBar wraps to 2 lines, and `FilterBar.tsx` uses `theme.breakpoints.down('md')` for its `isMobile` check |
| 86 | +- Using MUI responsive `display` (`{ xs: 'none', md: 'inline' }`) is the lightest-weight approach — no JS needed, pure CSS media queries via MUI's system |
| 87 | +- The existing LinkedIn link in the footer (`markus neusinger`) already points to the same URL that will be added to the Legal page — this is intentional redundancy for discoverability |
| 88 | +- The GitHub link uses `GITHUB_URL` constant already imported in LegalPage for the Source Code section; the personal GitHub URL (`https://github.com/MarkusNeusinger`) is different from the project repo URL |
0 commit comments