Add light mode/dark mode theme switcher with localStorage persistence

app/actions.ts

@@ -15,7 +15,7 @@ export type Option = {
 export type PrimaryDataType = 'issue' | 'commit' | 'pull-request' | 'snippet' | 'item';
 type GridCellState = 'empty' | 'generating' | 'done' | 'error';
 
-export type ColumnType = 'text' | 'select' | 'select-user' | 'file' | 'issue-pr' | 'commit';
+export type ColumnType = 'text' | 'select' | 'select-user' | 'file' | 'issue-pr' | 'commit' | 'boolean';
 
 export type ColumnResponse = {
   text: string;
@@ -50,7 +50,7 @@ export type ColumnResponse = {
       message?: string;
     }>;
   };
-  boolean: boolean;
+  boolean: { value: boolean };
 };
 
 export type GridCell<T extends keyof ColumnResponse = ColumnType> = {

app/columns/IssuePRColumnType.tsx

@@ -110,7 +110,7 @@ export const IssuePRColumnType: BaseColumnType<'issue-pr'> = {
       parsed = JSON.parse(responseContent);
     } catch (error) {
       console.error('Failed to parse response content:', error);
-      return multiple ? { references: [] } : { reference: null };
+      return multiple ? { references: [] } : { reference: undefined };
     }
     return multiple ? { references: parsed.references } : { reference: parsed.reference };
   },

app/components/GridHeader.tsx

@@ -2,6 +2,7 @@ import { TextInput, Text, ActionMenu, ActionList, Box, Button, CounterLabel } fr
 import { ArrowLeftIcon } from '@primer/octicons-react';
 import { SearchIcon } from '@primer/octicons-react';
 import { useGridContext } from './GridContext';
+import { ThemeSwitcher } from './ThemeSwitcher';
 import NextLink from 'next/link';
 
 export function Search() {
@@ -167,6 +168,7 @@ export function GridHeader({ title, setShowNewColumnForm, count }: GridHeaderPro
         <Search />
         <GroupBy />
         <FilterBy />
+        <ThemeSwitcher />
         <Button onClick={handleSaveGist} disabled={isSavingGist}>
           Save to gist
         </Button>

app/components/ThemeContext.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+import React, { createContext, useContext, useEffect, useState } from 'react';
+
+type ColorMode = 'light' | 'dark';
+
+interface ThemeContextType {
+  colorMode: ColorMode;
+  setColorMode: (mode: ColorMode) => void;
+  toggleColorMode: () => void;
+  isLoaded: boolean;
+}
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+export const useTheme = () => {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
+  return context;
+};
+
+interface ThemeProviderProps {
+  children: React.ReactNode;
+}
+
+export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
+  const [colorMode, setColorModeState] = useState<ColorMode>('light');
+  const [isLoaded, setIsLoaded] = useState(false);
+
+  // Load saved theme preference on mount
+  useEffect(() => {
+    const savedTheme = localStorage.getItem('colorMode') as ColorMode;
+    if (savedTheme && (savedTheme === 'light' || savedTheme === 'dark')) {
+      setColorModeState(savedTheme);
+    }
+    setIsLoaded(true);
+  }, []);
+
+  const setColorMode = (mode: ColorMode) => {
+    setColorModeState(mode);
+    localStorage.setItem('colorMode', mode);
+  };
+
+  const toggleColorMode = () => {
+    const newMode = colorMode === 'light' ? 'dark' : 'light';
+    setColorMode(newMode);
+  };
+
+  const value = {
+    colorMode,
+    setColorMode,
+    toggleColorMode,
+    isLoaded,
+  };
+
+  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
+};

app/components/ThemeSwitcher.tsx

@@ -0,0 +1,19 @@
+'use client';
+
+import React from 'react';
+import { IconButton } from '@primer/react';
+import { SunIcon, MoonIcon } from '@primer/octicons-react';
+import { useTheme } from './ThemeContext';
+
+export const ThemeSwitcher: React.FC = () => {
+  const { colorMode, toggleColorMode } = useTheme();
+
+  return (
+    <IconButton
+      aria-label={`Switch to ${colorMode === 'light' ? 'dark' : 'light'} mode`}
+      icon={colorMode === 'light' ? MoonIcon : SunIcon}
+      variant="invisible"
+      onClick={toggleColorMode}
+    />
+  );
+};

app/functions/updateIssue.ts

@@ -65,7 +65,6 @@ async function run(
   stateReason?: 'completed' | 'not_planned' | 'reopened'
 ) {
   return await updateIssue({
-    repository,
     title,
     body,
     labels,

app/grid/[id]/page.tsx

@@ -1,17 +1,46 @@
+'use client';
+
 import { createPrimaryColumn, hydrateCell } from '../../actions';
-import { BaseStyles, ThemeProvider } from '@primer/react';
+import { BaseStyles, ThemeProvider as PrimerThemeProvider } from '@primer/react';
+import { ThemeProvider } from '../../components/ThemeContext';
+import { useTheme } from '../../components/ThemeContext';
 import Grid from '../../components/Grid';
 
-export default function GridPage({ params }: { params: { id: string } }) {
+function ThemedApp({ initialGridId }: { initialGridId: string }) {
+  const { colorMode, isLoaded } = useTheme();
+
+  // Don't render until theme is loaded to prevent hydration mismatch
+  if (!isLoaded) {
+    return (
+      <PrimerThemeProvider colorMode="light">
+        <BaseStyles>
+          <Grid
+            createPrimaryColumn={createPrimaryColumn}
+            hydrateCell={hydrateCell}
+            initialGridId={initialGridId}
+          />
+        </BaseStyles>
+      </PrimerThemeProvider>
+    );
+  }
+
   return (
-    <ThemeProvider>
+    <PrimerThemeProvider colorMode={colorMode}>
       <BaseStyles>
         <Grid
           createPrimaryColumn={createPrimaryColumn}
           hydrateCell={hydrateCell}
-          initialGridId={params.id}
+          initialGridId={initialGridId}
         />
       </BaseStyles>
+    </PrimerThemeProvider>
+  );
+}
+
+export default function GridPage({ params }: { params: { id: string } }) {
+  return (
+    <ThemeProvider>
+      <ThemedApp initialGridId={params.id} />
     </ThemeProvider>
   );
 }

app/page.tsx

@@ -1,14 +1,39 @@
+'use client';
+
 import { createPrimaryColumn, hydrateCell } from './actions';
-import { BaseStyles, ThemeProvider } from '@primer/react';
+import { BaseStyles, ThemeProvider as PrimerThemeProvider } from '@primer/react';
+import { ThemeProvider } from './components/ThemeContext';
+import { useTheme } from './components/ThemeContext';
 
 import Grid from './components/Grid';
 
-export default function Page() {
+function ThemedApp() {
+  const { colorMode, isLoaded } = useTheme();
+
+  // Don't render until theme is loaded to prevent hydration mismatch
+  if (!isLoaded) {
+    return (
+      <PrimerThemeProvider colorMode="light">
+        <BaseStyles>
+          <Grid createPrimaryColumn={createPrimaryColumn} hydrateCell={hydrateCell} />
+        </BaseStyles>
+      </PrimerThemeProvider>
+    );
+  }
+
   return (
-    <ThemeProvider>
+    <PrimerThemeProvider colorMode={colorMode}>
       <BaseStyles>
         <Grid createPrimaryColumn={createPrimaryColumn} hydrateCell={hydrateCell} />
       </BaseStyles>
+    </PrimerThemeProvider>
+  );
+}
+
+export default function Page() {
+  return (
+    <ThemeProvider>
+      <ThemedApp />
     </ThemeProvider>
   );
 }