feat(footer): use @profullstack/footer

apps/web/package.json

@@ -19,6 +19,7 @@
     "@anthropic-ai/sdk": "^0.128.0",
     "@profullstack/autoblog": "github:profullstack/autoblog#75e54af",
     "@profullstack/emailer": "^1.0.3",
+    "@profullstack/footer": "latest",
     "@profullstack/notifications": "0.1.0",
     "@profullstack/stack": "^0.1.3",
     "@profullstack/x402-gateway": "^0.7.0",

apps/web/src/app/settings/page.test.tsx

@@ -14,11 +14,6 @@ vi.mock('@/components/header-client', () => ({
   HeaderClient: () => <header data-testid="header">Header</header>,
 }));
 
-// Mock Footer
-vi.mock('@/components/footer', () => ({
-  Footer: () => <footer data-testid="footer">Footer</footer>,
-}));
-
 // Mock NotificationPreferences (uses fetch and service worker APIs)
 vi.mock('@/components/notifications/NotificationPreferences', () => ({
   NotificationPreferences: () => (
@@ -52,7 +47,7 @@ describe('SettingsPage', () => {
     });
 
     it('should render header and footer', () => {
-      render(<SettingsContent user={null} />);
+      render(<SettingsContent user={null} footer={<footer data-testid="footer">Footer</footer>} />);
 
       expect(screen.getByTestId('header')).toBeInTheDocument();
       expect(screen.getByTestId('footer')).toBeInTheDocument();

apps/web/src/app/settings/page.tsx

@@ -1,6 +1,7 @@
 import type { Metadata } from 'next';
 import { createClient } from '@/lib/supabase/server';
 import type { UserData } from '@/components/header';
+import { Footer } from '@/components/footer';
 import { SettingsContent } from './settings-content';
 
 export const metadata: Metadata = {
@@ -33,5 +34,5 @@ export default async function SettingsPage() {
     // Supabase not configured — user stays null
   }
 
-  return <SettingsContent user={user} />;
+  return <SettingsContent user={user} footer={<Footer />} />;
 }

apps/web/src/app/settings/settings-content.tsx

@@ -4,7 +4,6 @@ import { useState, useEffect } from 'react';
 import Link from 'next/link';
 import { User, Video, Users, Palette, Info, ArrowLeft, Check, Bell } from 'lucide-react';
 import { HeaderClient } from '@/components/header-client';
-import { Footer } from '@/components/footer';
 import { NotificationPreferences } from '@/components/notifications/NotificationPreferences';
 import { YouTubeConnect } from './youtube-connect';
 import type { UserData } from '@/components/header';
@@ -49,7 +48,13 @@ const DEFAULT_SETTINGS: AppSettings = {
 // Local storage key for settings
 const SETTINGS_KEY = 'pairux-web-settings';
 
-export function SettingsContent({ user }: { user: UserData | null }) {
+export function SettingsContent({
+  user,
+  footer,
+}: {
+  user: UserData | null;
+  footer?: React.ReactNode;
+}) {
   const [settings, setSettings] = useState<AppSettings>(DEFAULT_SETTINGS);
   const [saved, setSaved] = useState(false);
 
@@ -457,7 +462,7 @@ export function SettingsContent({ user }: { user: UserData | null }) {
         </div>
       </main>
 
-      <Footer />
+      {footer}
     </div>
   );
 }

apps/web/src/components/footer.tsx

@@ -1,4 +1,5 @@
 import Link from 'next/link';
+import { Footer as PfsFooter } from '@profullstack/footer/react';
 import { Logo } from '@/components/Logo';
 
 // Custom GitHub icon SVG component (brand icons deprecated in lucide)
@@ -193,50 +194,9 @@ export function Footer() {
           </div>
         </div>
 
-        {/* Bottom bar */}
-        <div className="mt-12 border-t border-gray-200 pt-8">
-          <p className="text-center text-sm text-gray-500">
-            &copy; {new Date().getFullYear()}{' '}
-            <a
-              href="https://profullstack.com"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="hover:text-gray-700"
-            >
-              Profullstack, Inc.
-            </a>{' '}
-            Open source under MIT License.
-          </p>
-          <nav
-            className="webring mt-3 flex justify-center gap-3 text-sm text-gray-500"
-            aria-label="Profullstack webring"
-          >
-            <a
-              href="https://rssamplifier.com/ring/profullstack/previous?from=https%3A%2F%2Fpairux.com%2F"
-              rel="prev"
-              className="hover:text-gray-700"
-            >
-              {'<<'}
-            </a>
-            <a href="https://rssamplifier.com/ring/profullstack" className="hover:text-gray-700">
-              Profullstack
-            </a>
-            <a
-              href="https://rssamplifier.com/ring/profullstack/next?from=https%3A%2F%2Fpairux.com%2F"
-              rel="next"
-              className="hover:text-gray-700"
-            >
-              {'>>'}
-            </a>
-            <a
-              href="https://rssamplifier.com/ring/profullstack/random?from=https%3A%2F%2Fpairux.com%2F"
-              title="Random site"
-              aria-label="Random site"
-              className="hover:text-gray-700"
-            >
-              {'⚄'}
-            </a>
-          </nav>
+        {/* Bottom bar: copyright + Profullstack ring, from @profullstack/footer */}
+        <div className="mt-12">
+          <PfsFooter site="https://pairux.com/" tagline="Open source under MIT License." />
         </div>
       </div>
     </footer>