Merge pull request #233 from CodeForPhilly/fix/chat-links

fix(web): make Slack links leave the SPA for the /chat redirect

Author: themightychris

apps/web/src/components/AppFooter.tsx

@@ -177,9 +177,9 @@ export function AppFooter() {
             <h2 className="text-sm font-semibold text-foreground mb-3">Connect</h2>
             <ul className="space-y-2 text-sm text-muted-foreground mb-4">
               <li>
-                <Link to="/chat" className="hover:text-foreground transition-colors">
+                <a href="/chat" className="hover:text-foreground transition-colors">
                   Slack
-                </Link>
+                </a>
               </li>
             </ul>
             <div className="flex items-center gap-3 flex-wrap">

apps/web/src/components/ProjectCard.tsx

@@ -77,7 +77,7 @@ export function ProjectCard({ project }: ProjectCardProps) {
         )}
         {project.links.chatChannel && (
           <Button asChild size="sm" variant="outline">
-            <Link to={`/chat?channel=${encodeURIComponent(project.links.chatChannel)}`}>Chat</Link>
+            <a href={`/chat?channel=${encodeURIComponent(project.links.chatChannel)}`}>Chat</a>
           </Button>
         )}
         {project.openHelpWantedCount > 0 && (

apps/web/src/screens/EventsIndex.tsx

@@ -74,9 +74,9 @@ function UpcomingList({ isStaff }: { isStaff: boolean }) {
       <div className="py-12 text-center">
         <p className="text-muted-foreground">
           Nothing on the calendar yet.{' '}
-          <Link to="/chat" className="text-primary hover:underline">
+          <a href="/chat" className="text-primary hover:underline">
             Join the Slack
-          </Link>{' '}
+          </a>{' '}
           and watch #announcements — or check back soon.
         </p>
         {isStaff && (

apps/web/src/screens/ProjectDetail.tsx

@@ -485,9 +485,9 @@ export function ProjectDetail({ anchor }: ProjectDetailProps = {}) {
               )}
               {project.links.chatChannel && (
                 <Button asChild variant="outline">
-                  <Link to={`/chat?channel=${encodeURIComponent(project.links.chatChannel)}`}>
+                  <a href={`/chat?channel=${encodeURIComponent(project.links.chatChannel)}`}>
                     Chat Channel
-                  </Link>
+                  </a>
                 </Button>
               )}
             </div>

apps/web/src/screens/Volunteer.tsx

@@ -52,7 +52,7 @@ export function Volunteer() {
               We coordinate everything in our Slack workspace.
             </p>
             <Button asChild variant="outline" size="sm">
-              <Link to="/chat">Open Slack →</Link>
+              <a href="/chat">Open Slack →</a>
             </Button>
           </div>
           <div className="rounded-lg border border-border bg-card p-5">

eslint.config.js

@@ -25,6 +25,22 @@ export default tseslint.config(
     languageOptions: { globals: { ...globals.browser } },
     rules: {
       ...reactHooks.configs.recommended.rules,
+      // Paths the server answers before the SPA (specs/screens/chat.md →
+      // "Linking to it from the app"): a router <Link> never reaches them and
+      // renders the SPA's 404 page. Use a plain <a href> for these.
+      'no-restricted-syntax': [
+        'error',
+        {
+          selector:
+            "JSXAttribute[name.name='to'] > Literal[value=/^\\/(chat|calendar)(\\/|\\?|$)|^\\/api\\//]",
+          message: 'Server-handled path: use <a href>, not a router link (specs/screens/chat.md).',
+        },
+        {
+          selector:
+            "JSXAttribute[name.name='to'] > JSXExpressionContainer > TemplateLiteral > TemplateElement:first-child[value.raw=/^\\/(chat|calendar)(\\/|\\?|$)|^\\/api\\//]",
+          message: 'Server-handled path: use <a href>, not a router link (specs/screens/chat.md).',
+        },
+      ],
     },
   },
   {

plans/chat-links-full-navigation.md

@@ -0,0 +1,52 @@
+---
+status: in-progress
+depends: [chat-redirect]
+specs:
+  - specs/screens/chat.md
+issues: [230]
+---
+
+# Plan: In-app links to /chat navigate to the server
+
+## Scope
+
+Clicking "Slack" in the footer (and every other in-app link to `/chat`)
+shows the SPA's 404 page, because the links are React Router `<Link>`s and
+`/chat` is a server-side redirect the client router has no route for. A
+new tab or a refresh works, which is why it went unnoticed.
+
+**In:** the five `/chat` links (footer, Volunteer, events empty state,
+project "Chat Channel" button, project card "Chat") become plain anchors;
+a lint rule rejects router links whose literal target starts with `/chat`,
+`/api/` or `/calendar`.
+
+**Out:** the visible Slack entry point in the header (#231).
+
+## Implements
+
+- [screens/chat.md](../specs/screens/chat.md#linking-to-it-from-the-app)
+
+## Approach
+
+1. `<Link to="/chat…">` → `<a href="/chat…">`, keeping classes and the
+   `Button asChild` wrappers.
+2. `no-restricted-syntax` in `eslint.config.js` for `apps/web`: a
+   `to` attribute whose string literal, or template literal's first
+   chunk, starts with one of the server prefixes.
+
+## Validation
+
+- [ ] `npm run type-check && npm run lint && npm test` clean.
+- [ ] The rule flags the five links before the fix (checked by running
+  lint against the unfixed tree).
+- [ ] In the built app, clicking footer "Slack" leaves the SPA for the
+  Slack SSO start URL instead of rendering the 404 page.
+
+## Risks / unknowns
+
+- The lint rule only sees literal targets; a computed `to={someVar}`
+  slips past. Acceptable: every current server link is a literal.
+
+## Notes
+
+## Follow-ups

specs/screens/chat.md

@@ -35,6 +35,19 @@ Use **302** (temporary) rather than 301 so we can change the destination later w
 - Project pages use `/chat?channel=<chatChannel>` for the "Chat Channel" button so the link looks like part of the site rather than an external Slack URL.
 - If we move off Slack later, every link gets re-pointed by changing this one redirect rather than chasing references through the codebase.
 
+## Linking to it from the app
+
+Every in-app link to `/chat` (the footer's "Slack", the Volunteer page's
+"Open Slack", the events empty state, the project "Chat Channel" button and
+the project card's "Chat") is a **full-page navigation** — a plain anchor,
+never a client-side router link. `/chat` exists only on the server; a
+router link never reaches it and lands on the SPA's 404 page instead. The
+same holds for every other path the server answers before the SPA does:
+`/api/*` and the legacy redirects (`/calendar`, laddr URL forms — see
+[legacy-id-mapping.md](../behaviors/legacy-id-mapping.md)). Lint rejects a
+router link whose literal target starts with `/chat`, `/api/` or
+`/calendar`.
+
 ## Open redirect protection
 
 `channel` only feeds the `redir` value's path segment after `/messages/`; the host is hard-coded. No user input touches the host.