Add a help button + dialog

src/components/HelpDialog.tsx

@@ -0,0 +1,67 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { BookOpenIcon, BugIcon } from "lucide-react";
+import { IpcClient } from "@/ipc/ipc_client";
+
+interface HelpDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export function HelpDialog({ isOpen, onClose }: HelpDialogProps) {
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Need help with Dyad?</DialogTitle>
+        </DialogHeader>
+        <DialogDescription className="">
+          If you need assistance or want to report an issue, here are some
+          resources:
+        </DialogDescription>
+        <div className="flex flex-col space-y-4 w-full">
+          <div className="flex flex-col space-y-2">
+            <Button
+              variant="outline"
+              onClick={() => {
+                IpcClient.getInstance().openExternalUrl(
+                  "https://www.dyad.sh/docs"
+                );
+              }}
+              className="w-full py-6 bg-(--background-lightest)"
+            >
+              <BookOpenIcon className="mr-2 h-5 w-5" /> Open Docs
+            </Button>
+            <p className="text-sm text-muted-foreground px-2">
+              Get help with common questions and issues.
+            </p>
+          </div>
+          <div className="flex flex-col space-y-2">
+            <Button
+              variant="outline"
+              onClick={() =>
+                IpcClient.getInstance().openExternalUrl(
+                  "https://github.com/dyad-sh/dyad/issues/new"
+                )
+              }
+              className="w-full py-6 bg-(--background-lightest)"
+            >
+              <BugIcon className="mr-2 h-5 w-5" /> Report a Bug
+            </Button>
+            <p className="text-sm text-muted-foreground px-2">
+              We’ll auto-fill your report with system info and logs. You can
+              review it for any sensitive info before submitting.
+            </p>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

src/components/app-sidebar.tsx

@@ -1,4 +1,4 @@
-import { Home, Inbox, Settings } from "lucide-react";
+import { Home, Inbox, Settings, HelpCircle } from "lucide-react";
 import { Link, useRouterState } from "@tanstack/react-router";
 import { useSidebar } from "@/components/ui/sidebar"; // import useSidebar hook
 import { useEffect, useState, useRef } from "react";
@@ -17,6 +17,7 @@ import {
 } from "@/components/ui/sidebar";
 import { ChatList } from "./ChatList";
 import { AppList } from "./AppList";
+import { HelpDialog } from "./HelpDialog"; // Import the new dialog
 import { usePostHog } from "posthog-js/react";
 
 // Menu items.
@@ -49,6 +50,7 @@ export function AppSidebar() {
   const { state, toggleSidebar } = useSidebar(); // retrieve current sidebar state
   const [hoverState, setHoverState] = useState<HoverState>("no-hover");
   const expandedByHover = useRef(false);
+  const [isHelpDialogOpen, setIsHelpDialogOpen] = useState(false); // State for dialog
 
   useEffect(() => {
     if (
@@ -114,6 +116,26 @@ export function AppSidebar() {
         </div>
       </SidebarContent>
 
+      <SidebarFooter>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            {/* Change button to open dialog instead of linking */}
+            <SidebarMenuButton
+              size="sm"
+              className="font-medium w-14 flex flex-col items-center gap-1 h-14 mb-2 rounded-2xl"
+              onClick={() => setIsHelpDialogOpen(true)} // Open dialog on click
+            >
+              <HelpCircle className="h-5 w-5" />
+              <span className={"text-xs"}>Help</span>
+            </SidebarMenuButton>
+            <HelpDialog
+              isOpen={isHelpDialogOpen}
+              onClose={() => setIsHelpDialogOpen(false)}
+            />
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarFooter>
+
       <SidebarRail />
     </Sidebar>
   );