Chad/fix editor outline (#14)

chad-syntax · web-flow · commit 4a2520788c9c · 2025-07-26T13:48:51.000-04:00
* fix editor outline styling

* add link to discord in footer and redirect for agentsmith.dev/discord

* re-order footer links

* fix posthog inclusion maybe

* turns out we are using 15.3.2 so we can use posthog in our instrumentation.ts

* add posthog identify, adjust isEnv logic

* add posthog reset to logout
diff --git a/next.config.ts b/next.config.ts
@@ -67,6 +67,15 @@ const nextConfig: NextConfig = {
       },
     ];
   },
+  async redirects() {
+    return [
+      {
+        source: '/discord',
+        destination: 'https://discord.gg/FbdSJZCK2h',
+        permanent: false,
+      },
+    ];
+  },
   async headers() {
     const cspHeader = [
       `default-src ${self}`,
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -70,7 +70,7 @@
     "nunjucks": "^3.2.4",
     "octokit": "^4.1.2",
     "pino": "^9.7.0",
-    "posthog-js": "^1.215.1",
+    "posthog-js": "^1.258.2",
     "prettier": "^3.3.3",
     "prismjs": "^1.29.0",
     "react": "19.0.0",
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -3,8 +3,8 @@ import { IBM_Plex_Mono } from 'next/font/google';
 import { ThemeProvider } from 'next-themes';
 import { GoogleAnalytics } from '@next/third-parties/google';
 import { Toaster } from '@/components/ui/sonner';
-import { PostHogProvider } from '@/providers/posthog';
 import { isDev, isProd } from '@/utils/is-env';
+import { PostHogIdentify } from './posthog-identify';
 
 const defaultUrl =
   isProd && process.env.NEXT_PUBLIC_SITE_URL
@@ -40,20 +40,19 @@ export default function RootLayout(props: RootLayoutProps) {
           <script src="https://unpkg.com/react-scan/dist/auto.global.js" />
         </head>
       )}
-      <PostHogProvider>
-        <GoogleAnalytics gaId="G-PZG86YG9ZZ" />
-        <body className="bg-background text-foreground">
-          <ThemeProvider
-            attribute="class"
-            defaultTheme="system"
-            enableSystem
-            disableTransitionOnChange
-          >
-            <Toaster expand visibleToasts={9} />
-            {children}
-          </ThemeProvider>
-        </body>
-      </PostHogProvider>
+      <PostHogIdentify />
+      <GoogleAnalytics gaId="G-PZG86YG9ZZ" />
+      <body className="bg-background text-foreground">
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
+        >
+          <Toaster expand visibleToasts={9} />
+          {children}
+        </ThemeProvider>
+      </body>
     </html>
   );
 }
diff --git a/src/app/posthog-identify.tsx b/src/app/posthog-identify.tsx
@@ -0,0 +1,28 @@
+'use client';
+
+import { useEffect } from 'react';
+import posthog from 'posthog-js';
+import { createClient } from '@/lib/supabase/client';
+
+export const PostHogIdentify = () => {
+  useEffect(() => {
+    const initIdentify = async () => {
+      const { data } = await createClient().auth.getSession();
+
+      const githubIdentity = data.session?.user.identities?.find(
+        (identity) => identity.provider === 'github',
+      );
+
+      if (data.session) {
+        posthog.identify(data.session.user.id, {
+          email: data.session.user.email,
+          name: data.session.user.user_metadata.name,
+          github_username: githubIdentity?.identity_data?.user_name,
+        });
+      }
+    };
+
+    initIdentify();
+  }, []);
+  return null;
+};
diff --git a/src/components/brevo-email-subscribe/brevo-email-subscribe.tsx b/src/components/brevo-email-subscribe/brevo-email-subscribe.tsx
@@ -9,10 +9,10 @@ import './brevo-email-subscribe.css';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Checkbox } from '@/components/ui/checkbox';
-import { Alert, AlertDescription } from '@/components/ui/alert';
+import { Alert } from '@/components/ui/alert';
 import { Button } from '@/components/ui/button';
 import { CheckCircle2, AlertCircle, Loader2 } from 'lucide-react';
-import { usePostHog } from 'posthog-js/react';
+import posthog from 'posthog-js';
 
 declare global {
   interface Window {
@@ -52,8 +52,6 @@ type BrevoEmailSubscribeProps = {
 };
 
 export const BrevoEmailSubscribe = (props: BrevoEmailSubscribeProps) => {
-  const posthog = usePostHog();
-
   const { form, trackingLocation } = props;
   const formSubmitUrl = BrevoForms[form];
 
diff --git a/src/components/editors/json-editor.tsx b/src/components/editors/json-editor.tsx
@@ -36,6 +36,7 @@ export const JsonEditor = <T extends object>(props: JsonEditorProps<T>) => {
 
   const [jsonText, setJsonText] = useState<string>(JSON.stringify(value, null, 2));
   const [jsonError, setJsonError] = useState<string | null>(null);
+  const [isFocused, setIsFocused] = useState(false);
 
   const handleJsonChange = (text: string) => {
     setJsonText(text);
@@ -56,6 +57,7 @@ export const JsonEditor = <T extends object>(props: JsonEditorProps<T>) => {
           'rounded-md border bg-background',
           jsonError && 'border-destructive',
           innerClassName,
+          isFocused && 'border-ring ring-ring/50 ring-[1px]',
         )}
       >
         <Editor
@@ -65,11 +67,14 @@ export const JsonEditor = <T extends object>(props: JsonEditorProps<T>) => {
           disabled={readOnly}
           padding={16}
           placeholder={placeholder}
+          onFocus={() => setIsFocused(true)}
+          onBlur={() => setIsFocused(false)}
           style={{
             fontSize: 14,
             minHeight,
           }}
           className="w-full"
+          textareaClassName="outline-none"
         />
       </div>
       {jsonError && (
diff --git a/src/components/editors/markdown-editor.tsx b/src/components/editors/markdown-editor.tsx
@@ -6,6 +6,7 @@ import 'prismjs/components/prism-markdown';
 import 'prismjs/themes/prism.css';
 import { cn } from '@/utils/shadcn';
 import './json-editor.css';
+import { useState } from 'react';
 
 type MarkdownEditorProps = {
   value: string;
@@ -28,16 +29,26 @@ export const MarkdownEditor = (props: MarkdownEditorProps) => {
     innerClassName,
   } = props;
 
+  const [isFocused, setIsFocused] = useState(false);
+
   return (
     <div className={cn('space-y-2', className)}>
-      <div className={cn('rounded-md border bg-background', innerClassName)}>
+      <div
+        className={cn(
+          'rounded-md border bg-background',
+          isFocused && 'border-ring ring-ring/50 ring-[1px]',
+          innerClassName,
+        )}
+      >
         <Editor
           value={value}
           onValueChange={readOnly ? () => {} : onChange}
           highlight={(code) => highlight(code, languages.markdown, 'markdown')}
           disabled={readOnly}
           padding={16}
           placeholder={placeholder}
+          onFocus={() => setIsFocused(true)}
+          onBlur={() => setIsFocused(false)}
           style={{
             fontSize: 14,
             minHeight,
diff --git a/src/components/editors/prompt-editor.tsx b/src/components/editors/prompt-editor.tsx
@@ -63,6 +63,7 @@ export const PromptContentEditor = (props: PromptContentEditorProps) => {
   const timeoutRef = useRef<NodeJS.Timeout | null>(null);
   const detectedVariablesRef = useRef<ParsedVariable[]>([]);
   const detectedIncludesRef = useRef<ParsedInclude[]>([]);
+  const [isFocused, setIsFocused] = useState(false);
 
   // Effect to detect variables when content changes
   useEffect(() => {
@@ -94,18 +95,22 @@ export const PromptContentEditor = (props: PromptContentEditorProps) => {
           'rounded-md border bg-background',
           templateError && 'border-destructive',
           readOnly && 'opacity-70',
+          isFocused && 'border-ring ring-ring/50 ring-[1px]',
         )}
       >
         <Editor
           value={content}
           onValueChange={readOnly ? () => {} : onContentChange}
           highlight={(code) => highlight(code, languages.django, 'django')}
+          onFocus={() => setIsFocused(true)}
+          onBlur={() => setIsFocused(false)}
           padding={16}
           disabled={readOnly}
           style={{
             minHeight,
           }}
           className="w-full"
+          textareaClassName="outline-none"
         />
       </div>
 
diff --git a/src/components/marketing/faq.tsx b/src/components/marketing/faq.tsx
@@ -6,7 +6,7 @@ import {
   AccordionItem,
   AccordionTrigger,
 } from '@/components/ui/accordion';
-import { usePostHog } from 'posthog-js/react';
+import posthog from 'posthog-js';
 
 const faqData = [
   {
@@ -60,8 +60,6 @@ const faqData = [
 ];
 
 export const FAQSection = () => {
-  const posthog = usePostHog();
-
   const handleAccordionTriggerClick = (faqItem: (typeof faqData)[number]) => {
     posthog.capture('faq_accordion_trigger_clicked', {
       value: faqItem.value,
diff --git a/src/components/marketing/footer.tsx b/src/components/marketing/footer.tsx
@@ -34,6 +34,15 @@ const footerData: FooterColumn[] = [
         label: 'NPM',
         external: true,
       },
+      {
+        href: routes.emails.support,
+        label: 'Support',
+      },
+      {
+        href: routes.external.discord,
+        label: 'Discord',
+        external: true,
+      },
       {
         href: '/llms.txt',
         label: 'llms.txt',
@@ -42,10 +51,6 @@ const footerData: FooterColumn[] = [
         href: '/sitemap.xml',
         label: 'Sitemap',
       },
-      {
-        href: routes.emails.support,
-        label: 'Support',
-      },
     ],
   },
   {
diff --git a/src/components/marketing/header.tsx b/src/components/marketing/header.tsx
@@ -4,14 +4,12 @@ import Link from 'next/link';
 import { ThemeSwitcher } from '@/components/theme-switcher';
 import { Button } from '@/components/ui/button';
 import { routes } from '@/utils/routes';
-import { usePostHog } from 'posthog-js/react';
+import posthog from 'posthog-js';
 import { useEffect, useState } from 'react';
 import { cn } from '@/utils/shadcn';
 import { useIsLoggedIn } from '@/hooks/use-is-logged-in';
 
 export const Header = () => {
-  const posthog = usePostHog();
-
   const [scrolledDown, setScrolledDown] = useState(false);
   const { isLoggedIn, isLoading } = useIsLoggedIn();
 
diff --git a/src/components/marketing/hero.tsx b/src/components/marketing/hero.tsx
@@ -1,8 +1,6 @@
 'use client';
 
-import { BrevoEmailSubscribe } from '@/components/brevo-email-subscribe/brevo-email-subscribe';
 import { Button } from '../ui/button';
-import { usePostHog } from 'posthog-js/react';
 import Vivus from 'vivus';
 import { useEffect, useRef } from 'react';
 import FWord from '@/assets/f-word.svg';
@@ -12,20 +10,9 @@ import { routes } from '@/utils/routes';
 import Link from 'next/link';
 
 export const HeroSection = () => {
-  const posthog = usePostHog();
   const vivusRef = useRef<HTMLDivElement | null>(null);
   const mountedRef = useRef(false);
 
-  const handleAccessClick = () => {
-    posthog.capture('hero_early_access_cta_clicked');
-    const $button = document.getElementById('join-alpha-club');
-    if ($button) {
-      setTimeout(() => {
-        $button.focus();
-      }, 1);
-    }
-  };
-
   useEffect(() => {
     if (mountedRef.current) return;
     mountedRef.current = true;
diff --git a/src/components/marketing/pricing.tsx b/src/components/marketing/pricing.tsx
@@ -5,11 +5,11 @@ import { Card, CardContent, CardFooter, CardHeader } from '@/components/ui/card'
 import { CheckCircle2 } from 'lucide-react';
 import Link from 'next/link';
 import { routes } from '@/utils/routes';
-import { usePostHog } from 'posthog-js/react';
 import { pricingPlans, PricingPlan } from '@/constants/pricing';
 import { productSchema } from '@/constants/structured-json';
 import { useState } from 'react';
 import { Switch } from '../ui/switch';
+import posthog from 'posthog-js';
 
 type PricingCardProps = {
   card: PricingPlan;
@@ -18,7 +18,6 @@ type PricingCardProps = {
 
 const PricingCardItem = (props: PricingCardProps) => {
   const { card, billingCycle } = props;
-  const posthog = usePostHog();
 
   const handleCtaClick = () => {
     posthog.capture('pricing_card_cta_clicked', {
diff --git a/src/components/sign-out-button.tsx b/src/components/sign-out-button.tsx
@@ -6,6 +6,7 @@ import { useRouter } from 'next/navigation';
 import { routes } from '@/utils/routes';
 import { useState } from 'react';
 import { Loader2 } from 'lucide-react';
+import posthog from 'posthog-js';
 
 export const SignOutButton = () => {
   const router = useRouter();
@@ -15,6 +16,7 @@ export const SignOutButton = () => {
     setLoading(true);
     const supabase = createClient();
     await supabase.auth.signOut();
+    posthog.reset();
     router.push(routes.auth.signIn);
   };
 
diff --git a/src/components/variables-sidebar.tsx b/src/components/variables-sidebar.tsx
diff --git a/src/instrumentation-client.ts b/src/instrumentation-client.ts
diff --git a/src/page-components/EditPromptVersionPage.tsx b/src/page-components/EditPromptVersionPage.tsx
diff --git a/src/providers/posthog.tsx b/src/providers/posthog.tsx
diff --git a/src/utils/is-env.ts b/src/utils/is-env.ts
diff --git a/src/utils/routes.ts b/src/utils/routes.ts
