fix: import ThemeToggle directly, fix hydration error (#972)

ee/tabby-ui/components/header.tsx

@@ -4,7 +4,6 @@ import * as React from 'react'
 import { cn } from '@/lib/utils'
 import { buttonVariants } from '@/components/ui/button'
 import { IconGitHub, IconNotice } from '@/components/ui/icons'
-import dynamic from 'next/dynamic'
 import Link from 'next/link'
 import { useHealth } from '@/lib/hooks/use-health'
 import { ReleaseInfo, useLatestRelease } from '@/lib/hooks/use-latest-release'
@@ -12,11 +11,7 @@ import { compare } from 'compare-versions'
 import { useWorkers } from '@/lib/hooks/use-workers'
 import { WorkerKind } from '@/lib/gql/generates/graphql'
 import { has } from 'lodash-es'
-
-const ThemeToggle = dynamic(
-  () => import('@/components/theme-toggle').then(x => x.ThemeToggle),
-  { ssr: false }
-)
+import { ThemeToggle } from './theme-toggle'
 
 export function Header() {
   const { data } = useHealth()

ee/tabby-ui/components/theme-toggle.tsx

@@ -20,7 +20,7 @@ export function ThemeToggle() {
         })
       }}
     >
-      {!theme ? null : theme === 'dark' ? (
+      {theme === 'dark' ? (
         <IconMoon className="transition-all" />
       ) : (
         <IconSun className="transition-all" />