revamp title bar so it clicks to app details

src/app/TitleBar.tsx

@@ -3,6 +3,8 @@ import { selectedAppIdAtom } from "@/atoms/appAtoms";
 import { useLoadApps } from "@/hooks/useLoadApps";
 import { useRouter } from "@tanstack/react-router";
 import { useSettings } from "@/hooks/useSettings";
+import { Button } from "@/components/ui/button";
+import logo from "../../assets/logo_transparent.png";
 
 export const TitleBar = () => {
   const [selectedAppId] = useAtom(selectedAppIdAtom);
@@ -16,12 +18,26 @@ export const TitleBar = () => {
     ? `App: ${selectedApp.name}`
     : "(no app selected)";
 
-  return (
+  const handleAppClick = () => {
-    <div className="@container z-11 w-full h-8 bg-(--sidebar) absolute top-0 left-0 app-region-drag flex items-center">
+    if (selectedApp) {
-      <div className="pl-24"></div>
+      navigate({ to: "/app-details", search: { appId: selectedApp.id } });
-      <div className="hidden @md:block text-sm font-medium">{displayText}</div>
+    }
+  };
 
-      <div className="flex-1 text-center text-sm font-medium">Dyad</div>
+  return (
+    <div className="@container z-11 w-full h-11 bg-(--sidebar) absolute top-0 left-0 app-region-drag flex items-center">
+      <div className="pl-20"></div>
+      <img src={logo} alt="Dyad Logo" className="w-6 h-6 mr-2" />
+      <Button
+        variant="outline"
+        size="sm"
+        className={`hidden @md:block no-app-region-drag text-sm font-medium ${
+          selectedApp ? "cursor-pointer" : ""
+        }`}
+        onClick={handleAppClick}
+      >
+        {displayText}
+      </Button>
     </div>
   );
 };

src/styles/globals.css

@@ -59,7 +59,7 @@
 }
 
 .no-app-region-drag {
-  app-region: initial;
+  app-region: no-drag;
 }
 
 .h-screenish {