fix buttons on mobile (#21)

Author: ctate

components/deploy-button.tsx

@@ -21,6 +21,7 @@ export function DeployButton() {
           <title>Vercel logomark</title>
           <path d="m38 0 38 66H0z" />
         </svg>
+        <span className="text-sm sm:hidden">Deploy</span>
         <span className="hidden text-sm sm:inline">Deploy Your Own</span>
       </a>
     </Button>

components/github-stars-button.tsx

@@ -1,17 +1,23 @@
 "use client";
 
+import { useEffect, useState } from "react";
 import { GitHubIcon } from "@/components/icons/github-icon";
 import { Button } from "@/components/ui/button";
 import { formatAbbreviatedNumber } from "@/lib/utils/format-number";
 
 const GITHUB_REPO_URL =
   "https://github.com/vercel-labs/workflow-builder-template";
 
-type GitHubStarsButtonProps = {
-  initialStars?: number | null;
-};
+export function GitHubStarsButton() {
+  const [stars, setStars] = useState<number | null>(null);
+
+  useEffect(() => {
+    fetch("https://api.github.com/repos/vercel-labs/workflow-builder-template")
+      .then((res) => res.json())
+      .then((data) => setStars(data.stargazers_count))
+      .catch(() => setStars(null));
+  }, []);
 
-export function GitHubStarsButton({ initialStars }: GitHubStarsButtonProps) {
   return (
     <Button
       asChild
@@ -26,9 +32,9 @@ export function GitHubStarsButton({ initialStars }: GitHubStarsButtonProps) {
         target="_blank"
       >
         <GitHubIcon className="size-4.5" />
-        {initialStars && (
+        {stars !== null && (
           <span className="text-sm">
-            {formatAbbreviatedNumber(initialStars)}
+            {formatAbbreviatedNumber(stars)} stars
           </span>
         )}
       </a>

components/workflow/workflow-toolbar.tsx

@@ -951,7 +951,14 @@ function WorkflowMenuComponent({
         <DropdownMenuTrigger className="flex h-full cursor-pointer items-center gap-2 px-3 font-medium text-sm transition-all hover:bg-black/5 dark:hover:bg-white/5">
           <WorkflowIcon className="size-4" />
           <p className="font-medium text-sm">
-            {workflowId ? state.workflowName : "New Workflow"}
+            {workflowId ? (
+              state.workflowName
+            ) : (
+              <>
+                <span className="sm:hidden">New</span>
+                <span className="hidden sm:inline">New Workflow</span>
+              </>
+            )}
           </p>
           <ChevronDown className="size-3 opacity-50" />
         </DropdownMenuTrigger>
@@ -1181,9 +1188,15 @@ export const WorkflowToolbar = ({ workflowId }: WorkflowToolbarProps) => {
           state={state}
           workflowId={workflowId}
         />
-        <GitHubStarsButton />
-        <DeployButton />
-        <UserMenu />
+        <div className="flex items-center gap-2">
+          {!workflowId && (
+            <>
+              <GitHubStarsButton />
+              <DeployButton />
+            </>
+          )}
+          <UserMenu />
+        </div>
       </Panel>
 
       <WorkflowDialogsComponent actions={actions} state={state} />