add help link in options

pages/options/src/Options.tsx

@@ -5,11 +5,12 @@ import { withErrorBoundary, withSuspense } from '@extension/shared';
 import { GeneralSettings } from './components/GeneralSettings';
 import { ModelSettings } from './components/ModelSettings';
 
-type TabTypes = 'general' | 'models';
+type TabTypes = 'general' | 'models' | 'help';
 
 const TABS: { id: TabTypes; icon: string; label: string }[] = [
   { id: 'general', icon: '⚙️', label: 'General' },
   { id: 'models', icon: '📊', label: 'Models' },
+  { id: 'help', icon: '📚', label: 'Help' },
 ];
 
 const Options = () => {
@@ -29,6 +30,14 @@ const Options = () => {
     return () => darkModeMediaQuery.removeEventListener('change', handleChange);
   }, []);
 
+  const handleTabClick = (tabId: TabTypes) => {
+    if (tabId === 'help') {
+      window.location.href = 'https://nanobrowser.ai/docs';
+    } else {
+      setActiveTab(tabId);
+    }
+  };
+
   const renderTabContent = () => {
     switch (activeTab) {
       case 'general':
@@ -52,7 +61,7 @@ const Options = () => {
             {TABS.map(item => (
               <li key={item.id}>
                 <Button
-                  onClick={() => setActiveTab(item.id)}
+                  onClick={() => handleTabClick(item.id)}
                   className={`flex w-full items-center space-x-2 rounded-lg px-4 py-2 text-left text-base 
                     ${
                       activeTab !== item.id