Fix PR review findings: theme validation, a11y, and naming

- Validate localStorage theme value against allowed themes before use,
  falling back to defaultTheme on mismatch or missing value
- Create ThemeProviderContext with undefined default so useTheme guard
  properly detects usage outside ThemeProvider
- Add aria-label to icon-only theme toggle button for screen readers
- Standardize 'Github' key to 'GitHub' in e2e test selectors

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: gkorland

app/src/components/theme-provider.tsx

@@ -9,11 +9,9 @@ type ThemeProviderState = {
   setTheme: (theme: Theme) => void
 }
 
-const ThemeProviderContext = createContext<ThemeProviderState>({
-  theme: "system",
-  resolvedTheme: "light",
-  setTheme: () => null,
-})
+const VALID_THEMES: Theme[] = ["light", "dark", "system"]
+
+const ThemeProviderContext = createContext<ThemeProviderState | undefined>(undefined)
 
 const MEDIA_QUERY = "(prefers-color-scheme: dark)"
 
@@ -29,9 +27,10 @@ export function ThemeProvider({
   defaultTheme?: Theme
   storageKey?: string
 }) {
-  const [theme, setTheme] = useState<Theme>(
-    () => (localStorage.getItem(storageKey) as Theme) || defaultTheme
-  )
+  const [theme, setTheme] = useState<Theme>(() => {
+    const stored = localStorage.getItem(storageKey)
+    return stored && VALID_THEMES.includes(stored as Theme) ? (stored as Theme) : defaultTheme
+  })
   const [systemTheme, setSystemTheme] = useState<ResolvedTheme>(getSystemTheme)
 
   useEffect(() => {

app/src/components/theme-toggle.tsx

@@ -13,6 +13,7 @@ export function ThemeToggle() {
       size="icon"
       onClick={() => setTheme(isDark ? "light" : "dark")}
       title={isDark ? "Switch to light mode" : "Switch to dark mode"}
+      aria-label={isDark ? "Switch to light mode" : "Switch to dark mode"}
     >
       {isDark ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />}
     </Button>

e2e/logic/POM/codeGraph.ts

@@ -37,7 +37,7 @@ export default class CodeGraph extends BasePage {
         return (navItem: string) => {
             const navItemSelectors: Record<string, string> = {
                 "Main Website": "//a[@title='Home' or .//p[normalize-space()='Main Website'] or contains(@href, 'falkordb.com')]",
-                "Github": "//a[@title='GitHub' or .//p[normalize-space()='GitHub'] or contains(@href, 'github.com/FalkorDB/code-graph')]",
+                "GitHub": "//a[@title='GitHub' or .//p[normalize-space()='GitHub'] or contains(@href, 'github.com/FalkorDB/code-graph')]",
                 "Discord": "//a[@title='Discord' or .//p[normalize-space()='Discord'] or contains(@href, 'discord.gg/falkordb')]",
             };
             const selector = navItemSelectors[navItem] ?? `//a[@title='${navItem}' or .//p[normalize-space()='${navItem}']]`;

e2e/tests/navBar.spec.ts

@@ -22,7 +22,7 @@ test.describe(' Navbar tests', () => {
 
   const navitems: { navItem: string; expectedRes: string }[] = [
     { navItem: "Main Website", expectedRes: urls.falkorDBUrl },
-    { navItem: "Github", expectedRes: urls.falkorDbGithubUrl }
+    { navItem: "GitHub", expectedRes: urls.falkorDbGithubUrl }
   ];  
 
   navitems.forEach(({navItem, expectedRes}) => {