From f8e7ec7948d04db120935304c3bc179880e4f683 Mon Sep 17 00:00:00 2001
From: Marc Mintel <marc@mintel.me>
Date: Tue, 20 Jan 2026 00:52:02 +0100
Subject: [PATCH] website refactor

---
 apps/website/components/layout/AppSidebar.tsx | 128 +++++++++++-------
 apps/website/ui/shell/Shell.tsx               |   2 +-
 2 files changed, 82 insertions(+), 48 deletions(-)

diff --git a/apps/website/components/layout/AppSidebar.tsx b/apps/website/components/layout/AppSidebar.tsx
index 141735c2a..23963a6d4 100644
--- a/apps/website/components/layout/AppSidebar.tsx
+++ b/apps/website/components/layout/AppSidebar.tsx
@@ -1,24 +1,25 @@
 'use client';
 
-import { BrandMark } from '@/ui/BrandMark';
-import { NavLink } from '@/ui/NavLink';
+import { useSidebar } from '@/components/layout/SidebarContext';
 import { routes } from '@/lib/routing/RouteConfig';
+import { Box } from '@/ui/Box';
+import { BrandMark } from '@/ui/BrandMark';
+import { Button } from '@/ui/Button';
+import { NavLink } from '@/ui/NavLink';
+import { ShellSidebar } from '@/ui/shell/Shell';
 import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
-import { 
-  LayoutGrid, 
-  Trophy, 
-  Users, 
-  Calendar, 
-  Flag, 
-  Home,
+import {
+  Calendar,
   ChevronLeft,
-  ChevronRight
+  ChevronRight,
+  Flag,
+  Home,
+  LayoutGrid,
+  Trophy,
+  Users
 } from 'lucide-react';
 import { usePathname } from 'next/navigation';
-import { useSidebar } from '@/components/layout/SidebarContext';
-import { ShellSidebar } from '@/ui/shell/Shell';
-import { Button } from '@/ui/Button';
 
 export function AppSidebar() {
   const pathname = usePathname();
@@ -46,55 +47,88 @@ export function AppSidebar() {
           onClick={toggleCollapse}
           variant="ghost"
           fullWidth
-          justifyContent={isCollapsed ? 'center' : 'start'}
         >
           {!isCollapsed && "Collapse"}
         </Button>
       }
     >
-      <Stack gap={8}>
-        <Stack gap={3}>
-          {!isCollapsed && (
-            <Text size="xs" variant="low" weight="bold" uppercase>
-              Platform
-            </Text>
-          )}
+      <Box display="flex" flexDirection="col" height="full">
+        <Stack gap={8} flex={1}>
           <Stack gap={3}>
-            {mainItems.map((item) => (
-              <NavLink
-                key={item.href}
-                href={item.href}
-                label={item.label}
-                icon={item.icon}
-                isActive={pathname === item.href}
-                variant="sidebar"
-                collapsed={isCollapsed}
-              />
-            ))}
+            {!isCollapsed && (
+              <Text size="xs" variant="low" weight="bold" uppercase>
+                Platform
+              </Text>
+            )}
+            <Stack gap={3}>
+              {mainItems.map((item) => (
+                <NavLink
+                  key={item.href}
+                  href={item.href}
+                  label={item.label}
+                  icon={item.icon}
+                  isActive={pathname === item.href}
+                  variant="sidebar"
+                  collapsed={isCollapsed}
+                />
+              ))}
+            </Stack>
+          </Stack>
+
+          <Stack gap={3}>
+            {!isCollapsed && (
+              <Text size="xs" variant="low" weight="bold" uppercase>
+                Competition
+              </Text>
+            )}
+            <Stack gap={3}>
+              {competitionItems.map((item) => (
+                <NavLink
+                  key={item.href}
+                  href={item.href}
+                  label={item.label}
+                  icon={item.icon}
+                  isActive={pathname === item.href}
+                  variant="sidebar"
+                  collapsed={isCollapsed}
+                />
+              ))}
+            </Stack>
           </Stack>
         </Stack>
 
-        <Stack gap={3}>
+        <Stack gap={3} marginTop="auto" paddingBottom={8}>
           {!isCollapsed && (
             <Text size="xs" variant="low" weight="bold" uppercase>
-              Competition
+              Community
             </Text>
           )}
-          <Stack gap={3}>
-            {competitionItems.map((item) => (
-              <NavLink
-                key={item.href}
-                href={item.href}
-                label={item.label}
-                icon={item.icon}
-                isActive={pathname === item.href}
-                variant="sidebar"
-                collapsed={isCollapsed}
-              />
-            ))}
+          <Stack gap={2}>
+            <Button
+              as="a"
+              href="https://discord.gg/gridpilot"
+              target="_blank"
+              variant="ghost"
+              fullWidth
+              icon={<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/></svg>}
+              className="text-text-low hover:text-white border border-white/5 hover:border-white/20 rounded-full"
+            >
+              {!isCollapsed && "Discord"}
+            </Button>
+            <Button
+              as="a"
+              href="https://x.com/gridpilot"
+              target="_blank"
+              variant="ghost"
+              fullWidth
+              icon={<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>}
+              className="text-text-low hover:text-white border border-white/5 hover:border-white/20 rounded-full"
+            >
+              {!isCollapsed && "Follow on X"}
+            </Button>
           </Stack>
         </Stack>
-      </Stack>
+      </Box>
     </ShellSidebar>
   );
 }
diff --git a/apps/website/ui/shell/Shell.tsx b/apps/website/ui/shell/Shell.tsx
index 868e32d1c..243979fd6 100644
--- a/apps/website/ui/shell/Shell.tsx
+++ b/apps/website/ui/shell/Shell.tsx
@@ -35,7 +35,7 @@ export function ShellSidebar({
         </Box>
       )}
 
-      <Box flex={1} px={collapsed ? 2 : 4} className="overflow-y-auto scrollbar-hide transition-all duration-300">
+      <Box flex={1} px={collapsed ? 2 : 4} className="overflow-y-auto scrollbar-hide transition-all duration-300 flex flex-col">
         {children}
       </Box>