wip

apps/web-arbitrum/app/[daoSlug]/[groupId]/components/body/Body.tsx

@@ -149,15 +149,15 @@ export const getDocument = () => {
 };
 
 const QUOTE_STYLES = {
-  wrapper: 'my-4 border-l-2 p-4 bg-gray-50',
+  wrapper: 'my-4 border-l-2 p-4',
   header: 'flex text-sm mb-2 font-bold',
   content: '',
 } as const;
 
 const COLLAPSIBLE_STYLES = {
   details: 'my-4 border rounded-lg overflow-hidden',
-  summary: 'p-4 bg-gray-100 cursor-pointer font-bold',
-  content: 'p-4 bg-white',
+  summary: 'p-4 cursor-pointer font-bold',
+  content: 'p-4',
 } as const;
 
 export const MARKDOWN_STYLES = {

apps/web-arbitrum/app/[daoSlug]/components/LazyLoadTrigger.tsx

@@ -1,41 +1,71 @@
 'use client';
 
 import { useRouter, useSearchParams } from 'next/navigation';
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 
-export function LazyLoadTrigger({ currentPage }: { currentPage: number }) {
+interface LazyLoadTriggerProps {
+  currentPage: number;
+  hasMore?: boolean; // Add this prop to control if there's more content
+}
+
+export function LazyLoadTrigger({
+  currentPage,
+  hasMore = true, // Default to true for backward compatibility
+}: LazyLoadTriggerProps) {
   const router = useRouter();
   const searchParams = useSearchParams();
+  const triggerRef = useRef<HTMLDivElement>(null);
+  const observerRef = useRef<IntersectionObserver | null>(null);
 
   useEffect(() => {
-    const observer = new IntersectionObserver(
-      (entries) => {
-        const entry = entries[0];
-        if (entry.isIntersecting) {
-          // Increment the page query parameter
-          const nextPage = currentPage + 1;
-          const newSearchParams = new URLSearchParams(searchParams.toString());
-          newSearchParams.set('page', nextPage.toString());
-          router.replace(`?${newSearchParams.toString()}`, { scroll: false });
+    // If there's no more content to load, don't set up the observer
+    if (!hasMore) return;
+
+    // Check if content height is less than viewport height
+    const contentHeight = document.documentElement.scrollHeight;
+    const viewportHeight = window.innerHeight;
+    const isContentShorterThanViewport = contentHeight <= viewportHeight;
+
+    // Only set up observer if content is taller than viewport
+    if (!isContentShorterThanViewport) {
+      observerRef.current = new IntersectionObserver(
+        (entries) => {
+          const entry = entries[0];
+          if (entry.isIntersecting) {
+            // Increment the page query parameter
+            const nextPage = currentPage + 1;
+            const newSearchParams = new URLSearchParams(
+              searchParams.toString()
+            );
+            newSearchParams.set('page', nextPage.toString());
+            router.replace(`?${newSearchParams.toString()}`, { scroll: false });
+          }
+        },
+        {
+          threshold: 0.1,
+          rootMargin: '100px', // Add some margin to trigger loading earlier
         }
-      },
-      { threshold: 0.5 } // Trigger when 50% of the element is visible
-    );
+      );
 
-    const trigger = document.getElementById('lazy-load-trigger');
-    if (trigger) {
-      observer.observe(trigger);
+      if (triggerRef.current) {
+        observerRef.current.observe(triggerRef.current);
+      }
     }
 
     return () => {
-      if (trigger) {
-        observer.unobserve(trigger);
+      if (observerRef.current) {
+        observerRef.current.disconnect();
       }
     };
-  }, [currentPage, searchParams, router]);
+  }, [currentPage, searchParams, router, hasMore]);
+
+  if (!hasMore) {
+    return null;
+  }
 
   return (
     <div
+      ref={triggerRef}
       id='lazy-load-trigger'
       className='flex items-center justify-center p-6'
     >

apps/web-arbitrum/app/[daoSlug]/components/NavBar.tsx

@@ -13,7 +13,7 @@ export function NavBar({ daoSlug, dao }: NavBarProps) {
   return (
     <div
       className='fixed left-0 top-0 z-20 flex min-h-screen w-20 flex-col items-center border-r
-        border-brand-350 bg-brand-200 p-4 dark:border-brand-700 dark:bg-brand-800'
+        p-4'
     >
       <Link href={`/${daoSlug}`}>
         <Image

apps/web-arbitrum/app/[daoSlug]/layout.tsx

@@ -3,6 +3,8 @@ import { unstable_cache } from 'next/cache';
 import { notFound } from 'next/navigation';
 import { ReactNode } from 'react';
 import { NavBar } from './components/NavBar';
+import { ThemeProvider } from '../components/theme-provider';
+import { ModeToggle } from '../components/theme-switch';
 
 // Define a cached function to fetch the DAO data
 const getDaoBySlug = unstable_cache(
@@ -34,9 +36,14 @@ export default async function DaoLayout({
   }
 
   return (
-    <div className='flex min-h-screen w-full flex-row'>
-      <NavBar dao={dao} daoSlug={daoSlug} />
-      <div className='flex w-full justify-between'>{children}</div>
-    </div>
+    <ThemeProvider daoSlug={daoSlug}>
+      <div className='absolute right-4 top-4 z-50'>
+        <ModeToggle />
+      </div>
+      <div className='flex min-h-screen w-full flex-row bg-neutral-200 dark:bg-neutral-700'>
+        <NavBar dao={dao} daoSlug={daoSlug} />
+        <div className='flex w-full justify-between'>{children}</div>
+      </div>
+    </ThemeProvider>
   );
 }

apps/web-arbitrum/app/[daoSlug]/loading.tsx

@@ -1,7 +1,3 @@
 export default function Loading() {
-  return (
-    <div className='flex w-full items-center justify-center p-6'>
-      <div className='h-12 w-12 animate-pulse rounded-full bg-gray-200' />
-    </div>
-  );
+  return <div className='flex w-full items-center justify-center p-6'></div>;
 }

apps/web-arbitrum/app/[daoSlug]/page.tsx

@@ -67,10 +67,6 @@ export default async function ListPage({
   // Convert Map values to array
   const allGroups = Array.from(groupsMap.values());
 
-  if (!allGroups.length) {
-    notFound();
-  }
-
   after(async () => {
     await Promise.all(
       allGroups.map((group) => {
@@ -80,25 +76,18 @@ export default async function ListPage({
   });
 
   return (
-    <div className='flex min-h-screen w-full flex-row bg-brand-50 pl-20 dark:bg-brand-900'>
+    <div className='flex min-h-screen w-full flex-row pl-20'>
       <div className='w-full p-8'>
-        <h1 className='mb-8 text-4xl font-bold text-brand-700 dark:text-brand-100'>
-          {daoName || daoSlug}
-        </h1>
+        <h1 className='mb-8 text-4xl font-bold'>{daoName || daoSlug}</h1>
         <div className='flex flex-col gap-4'>
           {allGroups.map((group) => (
             <Link
               key={group.id}
               href={`/${daoSlug}/${group.id}`}
               prefetch={true}
             >
-              <div
-                className='rounded-lg border border-brand-350 p-6 shadow-sm transition-shadow duration-200
-                  hover:shadow-md dark:border-brand-800'
-              >
-                <h2 className='text-xl font-semibold text-brand-700 dark:text-brand-100'>
-                  {group.name}
-                </h2>
+              <div className='rounded-lg border p-6 shadow-sm transition-shadow duration-200 hover:shadow-md'>
+                <h2 className='text-xl font-semibold'>{group.name}</h2>
                 <p className='mt-2 text-sm'>
                   View proposals and discussions in the {group.name} group.
                 </p>
@@ -108,7 +97,10 @@ export default async function ListPage({
         </div>
 
         <Suspense fallback={<LoadingSkeleton />}>
-          <LazyLoadTrigger currentPage={currentPage} />
+          <LazyLoadTrigger
+            currentPage={currentPage}
+            hasMore={allGroups.length === currentPage * itemsPerPage}
+          />
         </Suspense>
       </div>
     </div>

apps/web-arbitrum/app/components/theme-provider.tsx

@@ -0,0 +1,19 @@
+'use client';
+
+import { ThemeProvider as NextThemesProvider } from 'next-themes';
+import * as React from 'react';
+
+interface ThemeProviderProps {
+  children: React.ReactNode;
+  daoSlug: string;
+}
+
+export function ThemeProvider({ children, daoSlug }: ThemeProviderProps) {
+  return (
+    <NextThemesProvider attribute='class' defaultTheme='light' enableSystem>
+      <div data-theme={daoSlug} className='min-h-screen'>
+        {children}
+      </div>
+    </NextThemesProvider>
+  );
+}

apps/web-arbitrum/app/components/theme-switch.tsx

@@ -10,7 +10,7 @@ import { Moon, Sun } from 'lucide-react';
 import { useTheme } from 'next-themes';
 
 export function ModeToggle() {
-  const { setTheme } = useTheme();
+  const { setTheme, theme } = useTheme();
 
   return (
     <DropdownMenu>
@@ -31,8 +31,7 @@ export function ModeToggle() {
       </DropdownMenuTrigger>
       <DropdownMenuContent
         align='end'
-        className='min-w-[120px] rounded-md border border-brand-350 bg-brand-50 shadow-lg
-          dark:border-brand-700 dark:bg-brand-900'
+        className='min-w-[120px] rounded-md border shadow-lg'
       >
         <DropdownMenuItem
           className='cursor-pointer px-4 py-2 text-sm'

apps/web-arbitrum/app/layout.tsx

@@ -6,7 +6,6 @@ import '../styles/globals.css';
 import { ModeToggle } from './components/theme-switch';
 import { PHProvider } from './providers/posthog-provider';
 import { SessionProvider } from './providers/session-provider';
-import { ThemeProvider } from './providers/theme-provider';
 
 export const metadata: Metadata = {
   metadataBase: new URL(process.env.WEB_URL ?? 'https://proposals.app'),
@@ -56,20 +55,8 @@ export default async function RootLayout({
         <NuqsAdapter>
           <PHProvider>
             <body>
-              <ThemeProvider
-                attribute='class'
-                defaultTheme='system'
-                enableSystem
-                disableTransitionOnChange
-              >
-                <PostHogPageView />
-
-                <div className='absolute right-4 top-4 z-50'>
-                  <ModeToggle />
-                </div>
-
-                {children}
-              </ThemeProvider>
+              <PostHogPageView />
+              {children}
             </body>
           </PHProvider>
         </NuqsAdapter>

apps/web-arbitrum/package.json

@@ -48,6 +48,7 @@
     "react-window": "^1.8.11",
     "recharts": "^2.15.0",
     "rehype-stringify": "^10.0.1",
+    "tw-colors": "^3.3.2",
     "unified": "^11.0.5",
     "uuid": "^11.0.3",
     "web-push": "^3.6.7"

apps/web-arbitrum/styles/globals.css

@@ -2,9 +2,61 @@
 @tailwind components;
 @tailwind utilities;
 
+/* Arbitrum Theme */
+[data-theme='arbitrum_dao'] {
+  --for-400: #87ff42;
+  --for-600: #56b200;
+  --abstain-400: #ffdc42;
+  --abstain-600: #ffbc1f;
+  --against-400: #ff5842;
+  --against-600: #ff4242;
+  --neutral-50: #fbf9f9;
+  --neutral-100: #f4f5f6;
+  --neutral-200: #e1e6e9;
+  --neutral-300: #ced6da;
+  --neutral-350: #b3bfc6;
+  --neutral-400: #96a6b0;
+  --neutral-450: #80949f;
+  --neutral-500: #637783;
+  --neutral-550: #566771;
+  --neutral-600: #47555d;
+  --neutral-650: #414e56;
+  --neutral-700: #374249;
+  --neutral-800: #21272b;
+  --neutral-900: #14181a;
+  --neutral-950: #0a0a0a;
+  --brand-accent: #12aaff;
+}
+
+/* Safe Theme */
+[data-theme='optimism'] {
+  --for-400: #87ff42;
+  --for-600: #56b200;
+  --abstain-400: #ffdc42;
+  --abstain-600: #ffbc1f;
+  --against-400: #ff5842;
+  --against-600: #ff4242;
+  --neutral-50: #fbf9f9;
+  --neutral-100: #f6f4f4;
+  --neutral-200: #e9e1e2;
+  --neutral-300: #dacecf;
+  --neutral-350: #c6b3b6;
+  --neutral-400: #b09699;
+  --neutral-450: #9f8084;
+  --neutral-500: #836366;
+  --neutral-550: #715659;
+  --neutral-600: #5d4749;
+  --neutral-650: #564143;
+  --neutral-700: #493739;
+  --neutral-800: #2b2122;
+  --neutral-900: #1a1415;
+  --neutral-950: #0b0909;
+  --brand-accent: #6600ff;
+}
+
 @layer base {
   body {
-    @apply bg-brand-50 dark:bg-brand-900;
+    @apply bg-neutral-50 dark:bg-neutral-900;
   }
 }