Merge pull request #1749 from generalaction/feat/v1-beta-entry-point

Core: In app hint to discover v1 beta

Author: arnestrickmann

src/renderer/components/ChangelogModal.tsx

@@ -4,7 +4,7 @@ import { MarkdownRenderer } from '@/components/ui/markdown-renderer';
 import { DialogContent } from '@/components/ui/dialog';
 import { formatChangelogPublishedAt } from '@/lib/changelogDate';
 import { EMDASH_CHANGELOG_URL, type ChangelogEntry } from '@shared/changelog';
-import { EMDASH_WEBSITE_URL } from '@shared/urls';
+import { getEmdashV1BetaUrl } from '@shared/urls';
 import { ArrowRight, ExternalLink } from 'lucide-react';
 
 interface ChangelogModalProps {
@@ -76,6 +76,7 @@ function ChangelogModal({ entry }: ChangelogModalProps): JSX.Element {
   const publishedAt = formatChangelogPublishedAt(entry.publishedAt);
   const content = stripLeadingReleaseHeadings(entry.content, entry);
   const { main, footer } = splitContentFooter(content);
+  const betaUrl = getEmdashV1BetaUrl('changelog-modal');
 
   return (
     <DialogContent className="max-w-2xl gap-0 overflow-hidden p-0 focus:outline-none">
@@ -93,7 +94,7 @@ function ChangelogModal({ entry }: ChangelogModalProps): JSX.Element {
         <div className="px-6 py-5">
           <button
             type="button"
-            onClick={() => window.electronAPI.openExternal(EMDASH_WEBSITE_URL)}
+            onClick={() => window.electronAPI.openExternal(betaUrl)}
             className="flex w-full items-center justify-between gap-3 rounded-xl border border-border/70 bg-muted/35 px-4 py-3 text-left transition-colors hover:bg-accent/40"
           >
             <div className="min-w-0">

src/renderer/components/ProjectMainView.tsx

@@ -793,9 +793,11 @@ const ProjectMainView: React.FC<ProjectMainViewProps> = ({
           <div className="mx-auto w-full max-w-6xl">
             {/* Header */}
             <div className="px-10">
-              <header className="flex items-center justify-between">
-                <h1 className="text-2xl font-semibold tracking-tight">{project.name}</h1>
-                <div className="flex items-center gap-2">
+              <header className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+                <div className="min-w-0">
+                  <h1 className="text-2xl font-semibold tracking-tight">{project.name}</h1>
+                </div>
+                <div className="flex flex-wrap items-center gap-2 sm:justify-end">
                   <BaseBranchControls
                     baseBranch={baseBranch}
                     branchOptions={branchOptions}

src/renderer/components/automations/AutomationsView.tsx

@@ -110,8 +110,8 @@ const AutomationsView: React.FC = () => {
             <div>
               <h1 className="flex items-center gap-2 text-lg font-semibold">
                 Automations
-                <span className="rounded bg-zinc-500/15 px-1.5 py-0.5 text-[9px] font-medium uppercase leading-none tracking-wide text-zinc-600 dark:bg-zinc-400/15 dark:text-zinc-400">
-                  Beta
+                <span className="rounded bg-zinc-500/15 px-1.5 py-0.5 text-[9px] font-medium leading-none tracking-wide text-zinc-600 dark:bg-zinc-400/15 dark:text-zinc-400">
+                  beta
                 </span>
               </h1>
               <p className="mt-1 text-xs text-muted-foreground">

src/renderer/components/sidebar/ChangelogNotificationCard.tsx

@@ -3,7 +3,7 @@ import { formatChangelogPublishedAt } from '@/lib/changelogDate';
 import { cn } from '@/lib/utils';
 import { motion } from 'framer-motion';
 import type { ChangelogEntry } from '@shared/changelog';
-import { EMDASH_WEBSITE_URL } from '@shared/urls';
+import { getEmdashV1BetaUrl } from '@shared/urls';
 import { ArrowRight, ExternalLink, X } from 'lucide-react';
 import { useEmdashAccount } from '@/contexts/EmdashAccountProvider';
 import { Button } from '@/components/ui/button';
@@ -25,6 +25,7 @@ export function ChangelogNotificationCard({
 }: ChangelogNotificationCardProps) {
   const publishedAt = formatChangelogPublishedAt(entry.publishedAt);
   const { hasAccount } = useEmdashAccount();
+  const betaUrl = getEmdashV1BetaUrl('changelog-notification-card');
 
   return (
     <motion.div
@@ -79,12 +80,12 @@ export function ChangelogNotificationCard({
           type="button"
           onClick={(event) => {
             event.stopPropagation();
-            window.electronAPI.openExternal(EMDASH_WEBSITE_URL);
+            window.electronAPI.openExternal(betaUrl);
           }}
           className="flex w-full items-center justify-between gap-3 rounded-lg border border-border/70 bg-muted/35 px-3 py-2 text-left transition-colors hover:bg-accent/40"
         >
           <div className="min-w-0">
-            <p className="text-xs font-semibold text-foreground">Test the v1 Beta</p>
+            <p className="text-xs font-semibold text-foreground">Test the v1 beta</p>
             <p className="mt-0.5 flex items-center gap-1 text-[11px] text-muted-foreground">
               <span>emdash.sh</span>
               <ExternalLink className="h-3 w-3" />

src/renderer/components/sidebar/LeftSidebar.tsx

@@ -420,8 +420,8 @@ export const LeftSidebar: React.FC<LeftSidebarProps> = ({
                   >
                     <Timer className="h-5 w-5 text-muted-foreground sm:h-4 sm:w-4" />
                     <span className="text-sm font-medium">Automations</span>
-                    <span className="rounded bg-zinc-500/15 px-1.5 py-0.5 text-[9px] font-medium uppercase leading-none tracking-wide text-zinc-600 dark:bg-zinc-400/15 dark:text-zinc-400">
-                      Beta
+                    <span className="rounded bg-zinc-500/15 px-1.5 py-0.5 text-[9px] font-medium leading-none tracking-wide text-zinc-600 dark:bg-zinc-400/15 dark:text-zinc-400">
+                      beta
                     </span>
                   </Button>
                 </SidebarMenuButton>

src/renderer/components/titlebar/Titlebar.tsx

@@ -7,11 +7,13 @@ import {
   Settings as SettingsIcon,
   KanbanSquare,
   Code2,
+  ArrowUpRight,
 } from 'lucide-react';
 import { ShortcutHint } from '../ui/shortcut-hint';
 import SidebarLeftToggleButton from './SidebarLeftToggleButton';
 import SidebarRightToggleButton from './SidebarRightToggleButton';
 import { Button } from '../ui/button';
+import { Badge } from '../ui/badge';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../ui/tooltip';
 import OpenInMenu from './OpenInMenu';
 import FeedbackModal from '../FeedbackModal';
@@ -24,6 +26,7 @@ import { useProjectManagementContext } from '../../contexts/ProjectManagementPro
 import { useTaskManagementContext } from '../../contexts/TaskManagementContext';
 import { useGithubContext } from '../../contexts/GithubContextProvider';
 import { useAppSettings } from '@/contexts/AppSettingsProvider';
+import { getEmdashV1BetaUrl } from '@shared/urls';
 
 const isMacOS = typeof navigator !== 'undefined' && /Mac|iPod|iPhone|iPad/.test(navigator.platform);
 
@@ -131,6 +134,7 @@ const Titlebar: React.FC<TitlebarProps> = ({
   const [isHeaderHovered, setIsHeaderHovered] = useState(false);
   const feedbackButtonRef = useRef<HTMLButtonElement | null>(null);
   const headerRef = useRef<HTMLElement | null>(null);
+  const betaUrl = getEmdashV1BetaUrl('titlebar-badge');
 
   const handleOpenFeedback = useCallback(async () => {
     void import('../../lib/telemetryClient').then(({ captureTelemetry }) => {
@@ -219,11 +223,29 @@ const Titlebar: React.FC<TitlebarProps> = ({
           </div>
         )}
         <div
-          className="pointer-events-auto flex flex-shrink-0 items-center [-webkit-app-region:no-drag]"
+          className="pointer-events-auto flex flex-shrink-0 items-center gap-2 [-webkit-app-region:no-drag]"
           style={{
             paddingLeft: isMacOS ? 'env(titlebar-area-x, 80px)' : '0.5rem',
           }}
         >
+          <Badge
+            asChild
+            variant="outline"
+            className="border-emerald-700/18 hover:border-emerald-600/28 h-7 rounded-md bg-gradient-to-r from-emerald-950 via-emerald-900 to-teal-900 px-2.5 text-[11px] font-semibold text-emerald-50 shadow-sm shadow-emerald-950/20 transition-colors hover:from-emerald-900 hover:via-emerald-800 hover:to-teal-800 hover:text-white dark:border-emerald-500/30 dark:from-emerald-950 dark:via-emerald-900 dark:to-teal-900 dark:text-emerald-50 dark:hover:border-emerald-400/40 dark:hover:from-emerald-900 dark:hover:via-emerald-800 dark:hover:to-teal-800"
+          >
+            <a
+              href={betaUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              onClick={(event) => {
+                event.preventDefault();
+                void window.electronAPI.openExternal(betaUrl);
+              }}
+            >
+              Try v1 beta now
+              <ArrowUpRight className="size-3.5" data-icon="inline-end" />
+            </a>
+          </Badge>
           {showResourceMonitor ? <PerformanceChip /> : null}
         </div>
         {/* Center: project/task context (grows to fill) */}

src/renderer/components/ui/badge.tsx

@@ -1,19 +1,27 @@
-import React from 'react';
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
 import { cn } from '@/lib/utils';
 
-type Props = React.HTMLAttributes<HTMLSpanElement> & {
+type Props = React.HTMLAttributes<HTMLElement> & {
   variant?: 'default' | 'secondary' | 'outline';
+  asChild?: boolean;
 };
 
-export const Badge: React.FC<Props> = ({ className, variant = 'secondary', ...props }) => {
+export const Badge: React.FC<Props> = ({
+  className,
+  variant = 'secondary',
+  asChild = false,
+  ...props
+}) => {
+  const Comp = asChild ? Slot : 'span';
   const base = 'inline-flex items-center gap-1.5 rounded-md px-2 py-0.5 text-xs font-medium';
   const styles =
     variant === 'outline'
       ? 'border border-border/70 bg-background text-foreground'
       : variant === 'default'
         ? 'bg-foreground text-background'
         : 'border border-border/70 bg-muted/40 text-foreground';
-  return <span className={cn(base, styles, className)} {...props} />;
+  return <Comp className={cn(base, styles, className)} {...props} />;
 };
 
 export default Badge;

src/shared/urls.ts

@@ -1,4 +1,34 @@
 export const EMDASH_RELEASES_URL = 'https://github.com/generalaction/emdash/releases';
 export const EMDASH_WEBSITE_URL = 'https://www.emdash.sh/';
+export const EMDASH_DOWNLOAD_URL = 'https://www.emdash.sh/download';
+
+type UTMOptions = {
+  source?: string;
+  medium?: string;
+  campaign: string;
+  content?: string;
+  term?: string;
+};
+
+export function withUtmParams(url: string, utm: UTMOptions): string {
+  const trackedUrl = new URL(url);
+  trackedUrl.searchParams.set('utm_campaign', utm.campaign);
+
+  if (utm.source) trackedUrl.searchParams.set('utm_source', utm.source);
+  if (utm.medium) trackedUrl.searchParams.set('utm_medium', utm.medium);
+  if (utm.content) trackedUrl.searchParams.set('utm_content', utm.content);
+  if (utm.term) trackedUrl.searchParams.set('utm_term', utm.term);
+
+  return trackedUrl.toString();
+}
+
+export function getEmdashV1BetaUrl(utmContent?: string): string {
+  return withUtmParams(EMDASH_DOWNLOAD_URL, {
+    source: 'emdash-app',
+    medium: 'in-app',
+    campaign: 'v0-banner-link',
+    content: utmContent,
+  });
+}
 
 export const EMDASH_DOCS_URL = 'https://emdash.sh/docs';

src/test/renderer/Badge.test.tsx

@@ -0,0 +1,18 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { Badge } from '@/components/ui/badge';
+
+describe('Badge', () => {
+  it('renders links via asChild', () => {
+    render(
+      <Badge asChild>
+        <a href="https://www.emdash.sh/">Try v1 beta now</a>
+      </Badge>
+    );
+
+    const link = screen.getByRole('link', { name: 'Try v1 beta now' });
+    expect(link).toBeInTheDocument();
+    expect(link).toHaveAttribute('href', 'https://www.emdash.sh/');
+    expect(link).toHaveClass('inline-flex');
+  });
+});

src/test/shared/urls.test.ts

@@ -0,0 +1,23 @@
+import { describe, expect, it } from 'vitest';
+import { EMDASH_DOWNLOAD_URL, getEmdashV1BetaUrl, withUtmParams } from '../../shared/urls';
+
+describe('shared urls', () => {
+  it('builds tracked beta download urls with app attribution params', () => {
+    const url = new URL(getEmdashV1BetaUrl('project-header-badge'));
+
+    expect(url.origin + url.pathname).toBe(EMDASH_DOWNLOAD_URL);
+    expect(url.searchParams.get('utm_source')).toBe('emdash-app');
+    expect(url.searchParams.get('utm_medium')).toBe('in-app');
+    expect(url.searchParams.get('utm_campaign')).toBe('v0-banner-link');
+    expect(url.searchParams.get('utm_content')).toBe('project-header-badge');
+  });
+
+  it('preserves existing query params when appending UTMs', () => {
+    const url = new URL(
+      withUtmParams('https://www.emdash.sh/download?foo=bar', { campaign: 'test-campaign' })
+    );
+
+    expect(url.searchParams.get('foo')).toBe('bar');
+    expect(url.searchParams.get('utm_campaign')).toBe('test-campaign');
+  });
+});