From 73e5ca87e4081954acd6ddee1777a1d03acdfcb0 Mon Sep 17 00:00:00 2001 From: Abhishek Kumar Date: Sat, 11 Apr 2026 15:32:16 +0530 Subject: [PATCH] feat: add github and slack community buttons --- .../workflow/[workflowId]/RenderWorkflow.tsx | 2 +- .../components/WorkflowEditorHeader.tsx | 28 +++++++++++--- ui/src/components/layout/AppLayout.tsx | 37 +++++++++++++++---- ui/src/components/layout/AppSidebar.tsx | 32 +++++++++------- ui/src/components/layout/GitHubStarBadge.tsx | 24 ++++++++++++ 5 files changed, 95 insertions(+), 28 deletions(-) create mode 100644 ui/src/components/layout/GitHubStarBadge.tsx diff --git a/ui/src/app/workflow/[workflowId]/RenderWorkflow.tsx b/ui/src/app/workflow/[workflowId]/RenderWorkflow.tsx index 7d27363..089f437 100644 --- a/ui/src/app/workflow/[workflowId]/RenderWorkflow.tsx +++ b/ui/src/app/workflow/[workflowId]/RenderWorkflow.tsx @@ -297,7 +297,7 @@ function RenderWorkflow({ initialWorkflowName, workflowId, initialFlow, initialT return ( -
+
{/* New Workflow Editor Header */} { const router = useRouter(); + const { toggleSidebar } = useSidebar(); const [savingWorkflow, setSavingWorkflow] = useState(false); const [duplicating, setDuplicating] = useState(false); const [publishing, setPublishing] = useState(false); @@ -140,8 +143,15 @@ export const WorkflowEditorHeader = ({ return (
- {/* Left section: Back button + Workflow name */} -
+ {/* Left section: Mobile menu + Back button + Workflow name */} +
+
@@ -361,6 +374,11 @@ export const WorkflowEditorHeader = ({ + + {/* GitHub star badge - desktop only */} +
+ +
); diff --git a/ui/src/components/layout/AppLayout.tsx b/ui/src/components/layout/AppLayout.tsx index 7598659..93bdec7 100644 --- a/ui/src/components/layout/AppLayout.tsx +++ b/ui/src/components/layout/AppLayout.tsx @@ -1,6 +1,7 @@ "use client"; import { Menu } from "lucide-react"; +import Link from "next/link"; import { usePathname } from "next/navigation"; import React, { ReactNode } from "react"; @@ -8,16 +9,35 @@ import { Button } from "@/components/ui/button"; import { SidebarInset, SidebarProvider, useSidebar } from "@/components/ui/sidebar"; import { AppSidebar } from "./AppSidebar"; +import { GitHubStarBadge } from "./GitHubStarBadge"; -function MobileHeader() { +function AppHeader() { const { toggleSidebar } = useSidebar(); return ( -
- - Dograh +
+
+ + Dograh +
+
); } @@ -40,7 +60,8 @@ const AppLayout: React.FC = ({ const shouldShowSidebar = pathname !== "/" && !pathname.startsWith("/handler") && !pathname.startsWith("/auth"); // Check if we're in workflow editor mode or superadmin runs - collapse sidebar by default - const isWorkflowEditor = /^\/workflow\/\d+/.test(pathname); + // Only match the exact editor page /workflow/, not sub-routes like /workflow//runs + const isWorkflowEditor = /^\/workflow\/\d+$/.test(pathname); const isSuperadmin = pathname.startsWith("/superadmin"); // Always render SidebarProvider to keep the component tree shape consistent @@ -51,7 +72,7 @@ const AppLayout: React.FC = ({
- + {!isWorkflowEditor && } {/* Optional header area for specific pages */} {headerActions && (
diff --git a/ui/src/components/layout/AppSidebar.tsx b/ui/src/components/layout/AppSidebar.tsx index 90d9d38..61a92b9 100644 --- a/ui/src/components/layout/AppSidebar.tsx +++ b/ui/src/components/layout/AppSidebar.tsx @@ -73,6 +73,10 @@ export function AppSidebar() { const { provider, getSelectedTeam, logout, user } = useAuth(); const { config } = useAppConfig(); + // On mobile the sidebar renders as a full-width sheet overlay, so treat it + // as always "expanded" regardless of the desktop collapsed/expanded state. + const effectiveState = isMobile ? "expanded" : state; + // Get selected team for Stack auth (cast to Team type from Stack) // Stabilize the reference so SelectedTeamSwitcher only sees a change when the team ID changes, // preventing unnecessary PATCH calls to Stack Auth on every route navigation. @@ -181,7 +185,7 @@ export function AppSidebar() { const isItemActive = isActive(item.url); const Icon = item.icon; - if (state === "collapsed") { + if (effectiveState === "collapsed") { return ( @@ -228,7 +232,7 @@ export function AppSidebar() {
{/* Logo - only show when expanded */} - {state === "expanded" && ( + {effectiveState === "expanded" && ( - {state === "expanded" ? ( + {effectiveState === "expanded" ? ( ) : ( @@ -255,7 +259,7 @@ export function AppSidebar() {
{/* Team Switcher for Stack Auth - at the top */} - {provider === "stack" && state === "expanded" && ( + {provider === "stack" && effectiveState === "expanded" && (
- {state === "collapsed" ? ( + {effectiveState === "collapsed" ? ( @@ -321,7 +325,7 @@ export function AppSidebar() { {/* Overview Section */} @@ -337,7 +341,7 @@ export function AppSidebar() { {/* BUILD Section */} {buildSection.length > 0 && ( - {state === "expanded" && ( + {effectiveState === "expanded" && ( BUILD @@ -354,7 +358,7 @@ export function AppSidebar() { {/* OBSERVE Section */} - {state === "expanded" && ( + {effectiveState === "expanded" && ( OBSERVE @@ -371,7 +375,7 @@ export function AppSidebar() { {/* Bottom Actions */}
@@ -379,7 +383,7 @@ export function AppSidebar() { {provider !== "stack" && (
@@ -421,7 +425,7 @@ export function AppSidebar() { {provider === "stack" && (
@@ -473,9 +477,9 @@ export function AppSidebar() { {/* Theme Toggle - at the very bottom */}
- {state === "collapsed" ? ( + {effectiveState === "collapsed" ? ( diff --git a/ui/src/components/layout/GitHubStarBadge.tsx b/ui/src/components/layout/GitHubStarBadge.tsx new file mode 100644 index 0000000..5b7be5b --- /dev/null +++ b/ui/src/components/layout/GitHubStarBadge.tsx @@ -0,0 +1,24 @@ +"use client"; + +import { cn } from "@/lib/utils"; + +export function GitHubStarBadge({ className }: { className?: string }) { + return ( + + + + + + Star + + + ); +}