diff --git a/.beans/sendou.ink-1kb8--show-times-on-mobile-my-calendar-panel.md b/.beans/sendou.ink-1kb8--show-times-on-mobile-my-calendar-panel.md new file mode 100644 index 000000000..aca71ea80 --- /dev/null +++ b/.beans/sendou.ink-1kb8--show-times-on-mobile-my-calendar-panel.md @@ -0,0 +1,40 @@ +--- +# sendou.ink-1kb8 +title: Show times on mobile My Calendar panel +status: todo +type: task +created_at: 2026-01-11T09:48:18Z +updated_at: 2026-01-11T09:48:18Z +parent: sendou.ink-6eko +--- + +## Summary + +The mobile My Calendar panel currently only shows tournament names without any time information. Add day headers and event times to help players know when things are happening. + +## Current state + +Panel shows a flat list of tournaments with just: +- Tournament logo +- Tournament name + +## Proposed design + +Group events by day with headers, then show time per event: + +``` +Today + 3:00 PM PICNIC #2 + 7:00 PM In The Zone 22 + +Tomorrow + 2:00 PM Paddling Pool 253 + 5:00 PM Swim or Sink 101 +``` + +## Checklist + +- [ ] Add day header groupings (Today, Tomorrow, weekday names, or dates) +- [ ] Show event start time next to each entry +- [ ] Ensure times display in user's local timezone +- [ ] Test with events spanning multiple days \ No newline at end of file diff --git a/.beans/sendou.ink-1l22--css-rework-for-modern-practices-and-theming-access.md b/.beans/sendou.ink-1l22--css-rework-for-modern-practices-and-theming-access.md new file mode 100644 index 000000000..df6c04f3c --- /dev/null +++ b/.beans/sendou.ink-1l22--css-rework-for-modern-practices-and-theming-access.md @@ -0,0 +1,34 @@ +--- +# sendou.ink-1l22 +title: CSS rework for modern practices and theming accessibility +status: in-progress +type: epic +priority: normal +created_at: 2026-01-11T09:33:26Z +updated_at: 2026-01-11T09:34:23Z +--- + +## Why + +The existing CSS architecture needed modernization to support: + +1. **Consistency** - Standardized design tokens and variable naming conventions +2. **Modern CSS practices** - Leveraging newer CSS features for better maintainability +3. **Accessibility for user-defined themes** - Making it easy for users to customize themes while maintaining readability and contrast requirements + +## What's been done + +- Redefined all styles in `vars.css` with a consistent naming convention +- Established design tokens for colors, spacing, typography, and other properties +- Created a foundation that supports user theme customization while preserving accessibility + +## Goals + +- All components use CSS variables from `vars.css` consistently +- Theme customization is straightforward and accessible +- Color contrast and other accessibility requirements are maintained across all themes +- Reduced CSS specificity conflicts and improved maintainability + +## Completion criteria + +All child tickets resolved and the new CSS variable system is fully adopted across the codebase. \ No newline at end of file diff --git a/.beans/sendou.ink-1qfh--fix-notification-button-and-indicator-dot-overlay.md b/.beans/sendou.ink-1qfh--fix-notification-button-and-indicator-dot-overlay.md new file mode 100644 index 000000000..57caa1cff --- /dev/null +++ b/.beans/sendou.ink-1qfh--fix-notification-button-and-indicator-dot-overlay.md @@ -0,0 +1,27 @@ +--- +# sendou.ink-1qfh +title: Fix notification button and indicator dot overlay +status: todo +type: bug +created_at: 2026-01-11T09:37:03Z +updated_at: 2026-01-11T09:37:03Z +parent: sendou.ink-6eko +--- + +## Problem + +The notification bell icon and the unread indicator dot are displayed side by side instead of the dot being overlayed on top of the bell icon. + +## Screenshot + +The blue notification dot appears next to the bell icon rather than positioned as an overlay badge on the icon. + +## Expected behavior + +The notification indicator dot should be positioned as an overlay on the bell icon (typically top-right corner), following standard notification badge UI patterns. + +## Acceptance criteria + +- Notification dot is positioned as an overlay on the bell icon +- Dot placement follows common UI conventions (e.g., top-right corner) +- Works correctly on both desktop sidebar and mobile layouts \ No newline at end of file diff --git a/.beans/sendou.ink-255r--friends-feature.md b/.beans/sendou.ink-255r--friends-feature.md new file mode 100644 index 000000000..19f1b92d8 --- /dev/null +++ b/.beans/sendou.ink-255r--friends-feature.md @@ -0,0 +1,23 @@ +--- +# sendou.ink-255r +title: Friends feature +status: draft +type: epic +created_at: 2026-01-11T09:27:40Z +updated_at: 2026-01-11T09:27:40Z +--- + +## Overview + +Friends functionality for sendou.ink. Currently friends are mocked with placeholder data in the sidebar. + +## Current State + +- Friends list displays in sidebar (desktop) and mobile panel +- Data is mocked in `app/features/sidebar/routes/sidebar.ts` with placeholder avatars +- Friend items have empty `to=""` links - clicking them does nothing +- No real data integration exists + +## Scope + +TBD - needs design and requirements definition. \ No newline at end of file diff --git a/.beans/sendou.ink-36pm--add-weapon-mega-menu-to-mobile-design.md b/.beans/sendou.ink-36pm--add-weapon-mega-menu-to-mobile-design.md new file mode 100644 index 000000000..d9bb43052 --- /dev/null +++ b/.beans/sendou.ink-36pm--add-weapon-mega-menu-to-mobile-design.md @@ -0,0 +1,28 @@ +--- +# sendou.ink-36pm +title: Add weapon mega menu to mobile design +status: todo +type: task +created_at: 2026-01-11T09:31:09Z +updated_at: 2026-01-11T09:31:09Z +parent: sendou.ink-6eko +--- + +## Problem + +The desktop layout has a weapon mega menu in the top navigation bar that allows users to quickly access weapon-specific pages. This menu is missing from the mobile design, which uses bottom tab navigation instead. + +## Context + +Mobile users currently lack quick access to weapon-related content that desktop users have via the top menu bar category dropdowns. + +## Possible approaches + +- Add weapon navigation to the mobile menu modal +- Create a dedicated weapons section accessible from mobile tabs +- Integrate weapon categories into the existing mobile menu structure + +## Acceptance criteria + +- Mobile users can access the same weapon navigation options as desktop users +- Navigation is intuitive and follows the established mobile design patterns \ No newline at end of file diff --git a/.beans/sendou.ink-3qrp--improve-mobile-menu-grid-alignment-and-prevent-lab.md b/.beans/sendou.ink-3qrp--improve-mobile-menu-grid-alignment-and-prevent-lab.md new file mode 100644 index 000000000..41e4a9ec8 --- /dev/null +++ b/.beans/sendou.ink-3qrp--improve-mobile-menu-grid-alignment-and-prevent-lab.md @@ -0,0 +1,45 @@ +--- +# sendou.ink-3qrp +title: Improve mobile menu grid alignment and prevent label wrapping +status: todo +type: bug +created_at: 2026-01-11T09:42:29Z +updated_at: 2026-01-11T09:42:29Z +parent: sendou.ink-6eko +--- + +## Problem + +On mobile, the menu grid has alignment issues and some page labels are breaking into two or three lines, creating an inconsistent and cluttered appearance. + +## Screenshot + +Labels breaking to multiple lines: +- "Build Analyzer" (2 lines) +- "User Search" (2 lines) +- "Top Search" (2 lines) +- "Tier List Maker" (3 lines) +- "Plus Server" (2 lines) +- "Leaderboards" wrapping + +Meanwhile other labels like "Settings", "SendouQ", "Builds", "Scrims", "LFG" etc. fit on one line. + +## Expected behavior + +- Menu items should be consistently aligned +- Labels should ideally fit on a single line +- If wrapping is unavoidable, it should be limited to two lines maximum + +## Possible solutions + +- Reduce number of columns to give more horizontal space per item +- Use shorter label names where possible +- Adjust font size for labels +- Use text truncation with ellipsis for long labels + +## Acceptance criteria + +- Menu grid is visually balanced and aligned +- No labels break to three lines +- Minimize two-line labels where possible +- Consistent spacing between menu items \ No newline at end of file diff --git a/.beans/sendou.ink-6eko--desktop-sidebar-and-mobile-tabs-layout.md b/.beans/sendou.ink-6eko--desktop-sidebar-and-mobile-tabs-layout.md index 83a693e00..115bbd1a5 100644 --- a/.beans/sendou.ink-6eko--desktop-sidebar-and-mobile-tabs-layout.md +++ b/.beans/sendou.ink-6eko--desktop-sidebar-and-mobile-tabs-layout.md @@ -5,7 +5,9 @@ status: in-progress type: epic priority: normal created_at: 2026-01-11T08:58:29Z -updated_at: 2026-01-11T09:19:14Z +updated_at: 2026-01-11T09:34:23Z +blocking: + - sendou.ink-1l22 --- ## Why diff --git a/.beans/sendou.ink-6i41--move-settings-to-same-row-as-user-avatar-in-mobile.md b/.beans/sendou.ink-6i41--move-settings-to-same-row-as-user-avatar-in-mobile.md new file mode 100644 index 000000000..78d81e4b5 --- /dev/null +++ b/.beans/sendou.ink-6i41--move-settings-to-same-row-as-user-avatar-in-mobile.md @@ -0,0 +1,30 @@ +--- +# sendou.ink-6i41 +title: Move Settings to same row as user avatar in mobile user tab +status: todo +type: bug +created_at: 2026-01-11T09:40:48Z +updated_at: 2026-01-11T09:40:48Z +parent: sendou.ink-6eko +--- + +## Problem + +On mobile, in the user tab modal, the Settings option is positioned at the bottom of the panel. It should instead be on the same row as the user avatar and name. + +## Current behavior + +- User avatar + name (Sendou) on one row +- Notifications section +- Settings at the bottom (separate location) + +## Expected behavior + +- User avatar + name + Settings on the same row +- Notifications section below + +## Acceptance criteria + +- Settings button/link is positioned on the same row as the user avatar and name +- Layout is balanced and visually clean +- Settings remains easily accessible \ No newline at end of file diff --git a/.beans/sendou.ink-bti2--fix-duplicate-notifications-header-in-mobile-user.md b/.beans/sendou.ink-bti2--fix-duplicate-notifications-header-in-mobile-user.md new file mode 100644 index 000000000..da979f717 --- /dev/null +++ b/.beans/sendou.ink-bti2--fix-duplicate-notifications-header-in-mobile-user.md @@ -0,0 +1,31 @@ +--- +# sendou.ink-bti2 +title: Fix duplicate Notifications header in mobile user tab +status: todo +type: bug +created_at: 2026-01-11T09:39:53Z +updated_at: 2026-01-11T09:39:53Z +parent: sendou.ink-6eko +--- + +## Problem + +On mobile, the user tab modal shows the "Notifications" header twice in a row - once as a section header and again immediately below it with a refresh button. + +## Screenshot + +The "You" modal displays: +- User profile (Sendou) +- 🔔 Notifications (first instance) +- 🔔 Notifications + refresh button (second instance) +- Notification list items + +## Expected behavior + +The Notifications header should only appear once. + +## Acceptance criteria + +- Only one Notifications header is displayed in the mobile user tab +- Refresh functionality is preserved +- Layout remains clean and properly structured \ No newline at end of file diff --git a/.beans/sendou.ink-eb17--add-ad-slots-to-new-layout.md b/.beans/sendou.ink-eb17--add-ad-slots-to-new-layout.md new file mode 100644 index 000000000..92e018a9e --- /dev/null +++ b/.beans/sendou.ink-eb17--add-ad-slots-to-new-layout.md @@ -0,0 +1,21 @@ +--- +# sendou.ink-eb17 +title: Add ad slots to new layout +status: draft +type: task +created_at: 2026-01-11T09:29:25Z +updated_at: 2026-01-11T09:29:25Z +parent: sendou.ink-6eko +--- + +## Task + +Define and implement ad slot placements for the new sidebar/mobile layout. + +## To Define + +- Where should ads appear? (sidebar, content area, mobile panels?) +- Ad sizes and formats +- How do ads interact with sidebar collapse? +- Mobile-specific ad placements +- Integration with existing ad provider \ No newline at end of file diff --git a/.beans/sendou.ink-jopf--decide-on-front-page-content-proper-feed-or-restor.md b/.beans/sendou.ink-jopf--decide-on-front-page-content-proper-feed-or-restor.md new file mode 100644 index 000000000..9bc839f54 --- /dev/null +++ b/.beans/sendou.ink-jopf--decide-on-front-page-content-proper-feed-or-restor.md @@ -0,0 +1,35 @@ +--- +# sendou.ink-jopf +title: 'Decide on front page content: proper feed or restore old layout' +status: todo +type: task +created_at: 2026-01-11T09:47:05Z +updated_at: 2026-01-11T09:47:05Z +parent: sendou.ink-6eko +--- + +## Summary + +The front page needs attention - either build out a proper activity feed or restore the previous front page content for now. + +## Options + +### Option A: Build proper feed +- Design and implement a real activity feed with relevant content +- Would include things like: recent tournament results, friend activity, team updates, community highlights +- More work but provides value + +### Option B: Restore old front page +- Bring back the previous front page content/layout +- Quick solution to have something meaningful on the homepage +- Can revisit feed implementation later + +## Decision needed + +Decide which approach to take based on timeline and priorities. + +## Checklist + +- [ ] Decide on approach (feed vs restore old) +- [ ] Implement chosen solution +- [ ] Test on desktop and mobile \ No newline at end of file diff --git a/.beans/sendou.ink-kw6u--show-scrims-in-my-calendar.md b/.beans/sendou.ink-kw6u--show-scrims-in-my-calendar.md new file mode 100644 index 000000000..2c941b78c --- /dev/null +++ b/.beans/sendou.ink-kw6u--show-scrims-in-my-calendar.md @@ -0,0 +1,29 @@ +--- +# sendou.ink-kw6u +title: Show scrims in My calendar +status: todo +type: task +created_at: 2026-01-11T09:44:26Z +updated_at: 2026-01-11T09:44:26Z +parent: sendou.ink-6eko +--- + +## Summary + +Display scrims (both scheduled and looking-for-match) in the sidebar's "My calendar" section. + +## Details + +The My calendar section currently shows tournament calendar entries. It should also include: + +1. **Scheduled scrims** - Scrims where the user's team has a confirmed match scheduled +2. **Looking-for-match scrims** - Active scrim postings where user's team is still searching for opponents + +This gives competitive players visibility into their upcoming scrim commitments directly from the sidebar, reducing the need to navigate to a separate scrims page. + +## Checklist + +- [ ] Identify where scrim data is fetched/stored +- [ ] Add scrim entries to My calendar data source +- [ ] Distinguish between scheduled vs looking-for-match scrims visually +- [ ] Test with various scrim states \ No newline at end of file diff --git a/.beans/sendou.ink-n3wk--rename-mobile-menu-tab-from-calendar-to-avoid-conf.md b/.beans/sendou.ink-n3wk--rename-mobile-menu-tab-from-calendar-to-avoid-conf.md new file mode 100644 index 000000000..770f396b0 --- /dev/null +++ b/.beans/sendou.ink-n3wk--rename-mobile-menu-tab-from-calendar-to-avoid-conf.md @@ -0,0 +1,30 @@ +--- +# sendou.ink-n3wk +title: Rename mobile menu tab from Calendar to avoid confusion +status: todo +type: bug +created_at: 2026-01-11T09:38:36Z +updated_at: 2026-01-11T09:38:36Z +parent: sendou.ink-6eko +--- + +## Problem + +On mobile, the bottom tab bar has a calendar icon labeled "Calendar" that opens the menu/navigation modal. This is confusing because there is an actual Calendar page in the app, and users may expect tapping "Calendar" to navigate there. + +## Screenshot + +The bottom tab shows a calendar icon with "Calendar" label, but it functions as the menu button. + +## Expected behavior + +The menu tab should have a label that clearly indicates it opens navigation/menu, not the Calendar page. + +## Possible solutions + +- Rename to "My Calendar" (check if fits) + +## Acceptance criteria + +- Mobile menu tab label clearly communicates its function +- No confusion with the actual Calendar page diff --git a/.beans/sendou.ink-om3i--my-calendar-page.md b/.beans/sendou.ink-om3i--my-calendar-page.md new file mode 100644 index 000000000..387107670 --- /dev/null +++ b/.beans/sendou.ink-om3i--my-calendar-page.md @@ -0,0 +1,29 @@ +--- +# sendou.ink-om3i +title: My calendar page +status: draft +type: epic +created_at: 2026-01-11T09:45:51Z +updated_at: 2026-01-11T09:45:51Z +--- + +## Summary + +A dedicated page for viewing the user's personal calendar with all their commitments. + +## Why + +While the sidebar shows a quick glance at upcoming events, players need a full page view to see their complete schedule at a glance + +## Scope + +TBD - This is a placeholder epic for future planning. + +## Potential features + +- Calendar view (week/month) of all user events +- Tournament matches and check-in times +- Scheduled scrims +- SendouQ sessions +- Team practice times +- Integration with external calendars (Google, etc.) diff --git a/.beans/sendou.ink-reks--define-sidebar-loading-behavior.md b/.beans/sendou.ink-reks--define-sidebar-loading-behavior.md new file mode 100644 index 000000000..788573534 --- /dev/null +++ b/.beans/sendou.ink-reks--define-sidebar-loading-behavior.md @@ -0,0 +1,27 @@ +--- +# sendou.ink-reks +title: Define sidebar loading behavior +status: todo +type: task +created_at: 2026-01-11T09:27:48Z +updated_at: 2026-01-11T09:27:48Z +parent: sendou.ink-6eko +--- + +## Problem + +Currently the sidebar shows empty/nothing while data loads, making the page appear broken briefly. + +## Task + +Define how the sidebar should behave when loading data: +- Should we show skeleton loaders? +- Should we show the previous cached data while fetching fresh data? +- Should we show a loading spinner? +- What about error states if the fetch fails? + +## Current Implementation + +- Sidebar uses a fetcher to load data on mount (`app/components/layout/index.tsx`) +- No loading or error states are shown +- If fetcher fails, error is silently ignored \ No newline at end of file diff --git a/.beans/sendou.ink-s83f--restore-sendou-bluepink-and-whitepink-themes.md b/.beans/sendou.ink-s83f--restore-sendou-bluepink-and-whitepink-themes.md new file mode 100644 index 000000000..0686b5260 --- /dev/null +++ b/.beans/sendou.ink-s83f--restore-sendou-bluepink-and-whitepink-themes.md @@ -0,0 +1,22 @@ +--- +# sendou.ink-s83f +title: Restore Sendou blue+pink and white+pink themes +status: todo +type: task +created_at: 2026-01-11T09:49:34Z +updated_at: 2026-01-11T09:49:34Z +parent: sendou.ink-1l22 +--- + +## Summary + +Re-add the classic Sendou themes for the CSS rework: + +1. **Blue + Pink** - The signature Sendou.ink dark theme +2. **White + Pink** - Light theme variant + +## Checklist + +- [ ] Define theme CSS variables for blue+pink theme +- [ ] Define theme CSS variables for white+pink theme +- [ ] Verify accessibility/contrast requirements are met diff --git a/.beans/sendou.ink-tq5i--fix-bracket-lines-and-match-timer-color-contrast.md b/.beans/sendou.ink-tq5i--fix-bracket-lines-and-match-timer-color-contrast.md new file mode 100644 index 000000000..c5b8084b0 --- /dev/null +++ b/.beans/sendou.ink-tq5i--fix-bracket-lines-and-match-timer-color-contrast.md @@ -0,0 +1,27 @@ +--- +# sendou.ink-tq5i +title: Fix bracket lines and match timer color contrast +status: todo +type: bug +created_at: 2026-01-11T09:36:11Z +updated_at: 2026-01-11T09:36:11Z +parent: sendou.ink-1l22 +--- + +## Problem + +On the tournament bracket page, the bracket connector lines and match timer badge blend together because they use the same or very similar colors. This makes it difficult to visually distinguish the timer from the bracket structure. + +## Screenshot + +The timer showing "0m" and the bracket lines are both a similar gray/muted color, reducing visual clarity. + +## Expected behavior + +The bracket lines and match timer should have distinct colors so they're easily distinguishable at a glance. + +## Acceptance criteria + +- Bracket connector lines and match timer have sufficient color contrast between them +- Both elements remain accessible and readable +- Fits within the new CSS variable system in `vars.css` \ No newline at end of file diff --git a/.beans/sendou.ink-utog--update-user-pickable-themes-to-use-new-css-vars.md b/.beans/sendou.ink-utog--update-user-pickable-themes-to-use-new-css-vars.md new file mode 100644 index 000000000..a4800b60e --- /dev/null +++ b/.beans/sendou.ink-utog--update-user-pickable-themes-to-use-new-css-vars.md @@ -0,0 +1,27 @@ +--- +# sendou.ink-utog +title: Update user-pickable themes to use new CSS vars +status: todo +type: task +created_at: 2026-01-11T09:49:34Z +updated_at: 2026-01-11T09:49:34Z +parent: sendou.ink-1l22 +--- + +## Summary + +User profile pages and team pages allow custom theme colors. These need to be updated to work with the new CSS variable system from the CSS rework. + +## Affected areas + +- **User pages** - Profile customization with user-selected colors +- **Team pages** - Team branding colors + +## Checklist + +- [ ] Audit current user theme implementation +- [ ] Map old theme values to new CSS variable system +- [ ] Update user page theme application logic +- [ ] Update team page theme application logic +- [ ] Test custom themes don't break with new CSS structure +- [ ] Ensure theme picker UI works correctly \ No newline at end of file diff --git a/.beans/sendou.ink-wn5o--define-sidebar-data-update-strategy.md b/.beans/sendou.ink-wn5o--define-sidebar-data-update-strategy.md new file mode 100644 index 000000000..407c55e49 --- /dev/null +++ b/.beans/sendou.ink-wn5o--define-sidebar-data-update-strategy.md @@ -0,0 +1,26 @@ +--- +# sendou.ink-wn5o +title: Define sidebar data update strategy +status: todo +type: task +created_at: 2026-01-11T09:27:58Z +updated_at: 2026-01-11T09:27:58Z +parent: sendou.ink-6eko +--- + +## Problem + +Currently the sidebar fetches fresh data every time the Layout mounts. Need to define when and how sidebar data should be updated. + +## Questions to Answer + +- When should sidebar data be refreshed? (On every navigation? On a timer? Only on specific actions?) +- Should we use polling for real-time updates (e.g., friend online status, new tournaments)? +- What data needs to stay fresh vs. can be cached longer? +- How do we invalidate the cache when user takes actions (e.g., joins a tournament)? + +## Current Implementation + +- Sidebar fetches on mount via `useFetcher` (`app/components/layout/index.tsx:76-86`) +- No cache invalidation strategy exists +- Could cause excessive requests on rapid navigation \ No newline at end of file diff --git a/.beans/sendou.ink-yg4i--implement-sidebar-collapseexpand.md b/.beans/sendou.ink-yg4i--implement-sidebar-collapseexpand.md new file mode 100644 index 000000000..148608c57 --- /dev/null +++ b/.beans/sendou.ink-yg4i--implement-sidebar-collapseexpand.md @@ -0,0 +1,27 @@ +--- +# sendou.ink-yg4i +title: Implement sidebar collapse/expand +status: todo +type: task +created_at: 2026-01-11T09:28:55Z +updated_at: 2026-01-11T09:28:55Z +parent: sendou.ink-6eko +--- + +## Feature + +Allow users to collapse the sidebar to show icons only, giving more horizontal space to content. + +## Behavior + +- Collapsed state shows just icons for each section (profile, calendar, friends, streams) +- User can toggle between collapsed and expanded states +- Should persist preference (localStorage or user settings) + +## Considerations + +- Toggle button placement (in sidebar header? floating?) +- Animation/transition when collapsing +- Tooltip on hover for collapsed icons +- Keyboard shortcut to toggle? +- Mobile: does this apply or is mobile handled differently? \ No newline at end of file diff --git a/.claude/settings.json b/.claude/settings.json new file mode 100644 index 000000000..5b5d98b06 --- /dev/null +++ b/.claude/settings.json @@ -0,0 +1,10 @@ +{ + "hooks": { + "SessionStart": [ + { "hooks": [{ "type": "command", "command": "beans prime" }] } + ], + "PreCompact": [ + { "hooks": [{ "type": "command", "command": "beans prime" }] } + ] + } +}