updated ui

Gerome-Elassaad · Gerome-Elassaad · commit f274250eaef0 · 2025-07-09T19:39:09.000+10:00
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+  "recommendations": ["21st.21st-extension"]
+}
diff --git a/app/globals.css b/app/globals.css
@@ -66,4 +66,8 @@
   body {
     @apply bg-background text-foreground;
   }
+  .dark body {
+    background-color: #111111;
+    background-image: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(0, 174, 239, 0.3), rgba(255, 255, 255, 0));
+  }
 }
diff --git a/app/page.tsx b/app/page.tsx
@@ -25,6 +25,7 @@ import { usePostHog } from 'posthog-js/react'
 import { SetStateAction, useCallback, useEffect, useState } from 'react'
 import { useLocalStorage } from 'usehooks-ts'
 import { useEnhancedChat } from '@/hooks/use-enhanced-chat'
+import { HeroPillSecond } from '@/components/announcement'
 
 export default function Home() {
   const supabase = createBrowserClient()
@@ -369,6 +370,10 @@ export default function Home() {
             onUndo={handleUndo}
           />
           
+          <div className="flex justify-center mb-4">
+            <HeroPillSecond />
+          </div>
+
           {isLoadingProject ? (
             <div className="flex items-center justify-center h-32">
               <div className="text-muted-foreground">Loading project...</div>
diff --git a/app/settings/profile/page.tsx b/app/settings/profile/page.tsx
@@ -22,7 +22,6 @@ import {
   getUserPreferences, 
   updateUserProfile, 
   updateUserPreferences,
-  UserProfile,
   UserPreferences
 } from '@/lib/user-settings'
 
diff --git a/components/announcement.tsx b/components/announcement.tsx
@@ -0,0 +1,30 @@
+'use client'
+
+import { HeroPill } from "@/components/ui/hero-pill"
+import { StarBorder } from "@/components/ui/star-border"
+
+export function HeroPillFirst() {
+  return (
+    <StarBorder color="hsl(var(--chart-1))">
+      <HeroPill 
+      href="https://waitlist.codinit.dev"
+      announcement="📣 Join The Launch Day Waitlist!"
+      isExternal
+      className="bg-slate-900/20 ring-1 ring-border [&_div]:bg-slate-100 [&_div]:text-slate-900 [&_p]:text-slate-900 [&_svg_path]:fill-slate-900 dark:[&_div]:bg-slate-900 dark:[&_div]:text-slate-100 dark:[&_p]:text-slate-100 dark:[&_svg_path]:fill-white"
+      />
+    </StarBorder>
+  )
+}
+
+export function HeroPillSecond() {
+  return (
+    <StarBorder color="hsl(var(--chart-1))">
+      <HeroPill 
+        href="https://waitlist.codinit.dev"
+        announcement="📣 Join The Launch Day Waitlist!"
+        isExternal
+        className="bg-slate-900/20 ring-1 ring-border [&_div]:bg-slate-100 [&_div]:text-slate-900 [&_p]:text-slate-900 [&_svg_path]:fill-slate-900 dark:[&_div]:bg-slate-900 dark:[&_div]:text-slate-100 dark:[&_p]:text-slate-100 dark:[&_svg_path]:fill-white"
+      />
+    </StarBorder>
+  )
+}
diff --git a/components/chat-input.tsx b/components/chat-input.tsx
@@ -160,7 +160,7 @@ export function ChatInput({
     <form
       onSubmit={handleSubmit}
       onKeyDown={onEnter}
-      className="mb-2 mt-auto flex flex-col bg-background"
+      className="mb-2 mt-auto flex flex-col bg-transparent"
       onDragEnter={isMultiModal ? handleDrag : undefined}
       onDragLeave={isMultiModal ? handleDrag : undefined}
       onDragOver={isMultiModal ? handleDrag : undefined}
diff --git a/components/navbar.tsx b/components/navbar.tsx
@@ -22,6 +22,7 @@ import { Session } from '@supabase/supabase-js'
 import { ArrowRight, LogOut, Trash, Undo, Settings, Menu } from 'lucide-react'
 import Link from 'next/link'
 import Icon from './logo2'
+import { HeroPillSecond } from './announcement'
 
 export function NavBar({
   session,
@@ -43,7 +44,7 @@ export function NavBar({
   canUndo: boolean
 }) {
   return (
-    <nav className="w-full flex bg-background py-4">
+    <nav className="w-full flex bg-transparent py-4">
       <div className="flex flex-1 items-center">
         <Link href="/" className="flex items-center gap-2" target="_blank">
           <Logo width={120} height={120} />
@@ -151,4 +152,4 @@ export function NavBar({
       </div>
     </nav>
   )
-}
+}
diff --git a/components/sidebar.tsx b/components/sidebar.tsx
@@ -241,11 +241,13 @@ export const Sidebar: React.FC<SidebarProps> = ({
           <Button
             variant="ghost"
             size="icon"
-            onClick={onSelectAccount}
+            asChild
             className="h-8 w-8 text-muted-foreground hover:text-foreground transition-colors"
-            aria-label="Select Account"
+            aria-label="Join Waitlist"
           >
-            <User className="h-5 w-5" />
+            <a href="https://waitlist.codinit.dev" target="_blank" rel="noopener noreferrer">
+              <User className="h-5 w-5" />
+            </a>
           </Button>
           <Button
             variant="ghost"
diff --git a/components/twenty-first-toolbar.tsx b/components/twenty-first-toolbar.tsx
@@ -0,0 +1,8 @@
+"use client"
+
+import { TwentyFirstToolbar } from "@21st-extension/toolbar-next"
+import { ReactPlugin } from "@21st-extension/react"
+
+export function TwentyFirstToolbarWrapper() {
+  return <TwentyFirstToolbar config={{ plugins: [ReactPlugin] }} />
+}
diff --git a/components/ui/hero-pill.tsx b/components/ui/hero-pill.tsx
@@ -0,0 +1,56 @@
+import { motion } from "framer-motion"
+import { cn } from "@/lib/utils"
+
+interface HeroPillProps {
+  href: string
+  announcement?: string
+  className?: string
+  isExternal?: boolean
+}
+
+export function HeroPill({ 
+  href, 
+  announcement = "📣 Announcement",
+  className,
+  isExternal = false,
+}: HeroPillProps) {
+  return (
+    <motion.a
+      href={href}
+      target={isExternal ? "_blank" : undefined}
+      className={cn(
+        "flex w-auto items-center space-x-2 rounded-full",
+        "bg-primary/20 ring-1 ring-accent",
+        "px-2 py-1 whitespace-pre",
+        className
+      )}
+      initial={{ opacity: 0, y: -20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.8, ease: "easeOut" }}
+    >
+      <div className={cn(
+        "w-fit rounded-full bg-accent px-2 py-0.5",
+        "text-xs font-medium text-primary sm:text-sm",
+        "text-center"
+      )}>
+        {announcement}
+      </div>
+      <p className="text-xs font-medium text-primary sm:text-sm">
+      </p>
+      <svg
+        width="12"
+        height="12"
+        className="ml-1"
+        viewBox="0 0 12 12"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M8.78141 5.33312L5.20541 1.75712L6.14808 0.814453L11.3334 5.99979L6.14808 11.1851L5.20541 10.2425L8.78141 6.66645H0.666748V5.33312H8.78141Z"
+          fill="currentColor"
+          className="text-primary"
+        />
+      </svg>
+    </motion.a>
+  )
+}
diff --git a/components/ui/star-border.tsx b/components/ui/star-border.tsx
@@ -0,0 +1,56 @@
+import { cn } from "@/lib/utils"
+import { ElementType, ComponentPropsWithoutRef } from "react"
+
+interface StarBorderProps<T extends ElementType> {
+  as?: T
+  color?: string
+  speed?: string
+  className?: string
+  children: React.ReactNode
+}
+
+export function StarBorder<T extends ElementType = "div">({
+  as,
+  className,
+  color,
+  speed = "6s",
+  children,
+  ...props
+}: StarBorderProps<T> & Omit<ComponentPropsWithoutRef<T>, keyof StarBorderProps<T>>) {
+  const Component = as || "div"
+  const defaultColor = color || "hsl(var(--foreground))"
+
+  return (
+    <Component 
+      className={cn(
+        "relative inline-block p-[1px] overflow-hidden rounded-full",
+        className
+      )} 
+      {...props}
+    >
+      <div
+        className={cn(
+          "absolute w-[300%] h-[50%] bottom-[-11px] right-[-250%] rounded-full animate-star-movement-bottom z-0",
+          "opacity-20 dark:opacity-70" 
+        )}
+        style={{
+          background: `radial-gradient(circle, ${defaultColor}, transparent 10%)`,
+          animationDuration: speed,
+        }}
+      />
+      <div
+        className={cn(
+          "absolute w-[300%] h-[50%] top-[-10px] left-[-250%] rounded-full animate-star-movement-top z-0",
+          "opacity-20 dark:opacity-70"
+        )}
+        style={{
+          background: `radial-gradient(circle, ${defaultColor}, transparent 10%)`,
+          animationDuration: speed,
+        }}
+      />
+      <div className="relative z-10">
+        {children}
+      </div>
+    </Component>
+  )
+}
diff --git a/memory-bank/consolidated_learnings.md b/memory-bank/consolidated_learnings.md
@@ -0,0 +1,9 @@
+## Tailwind CSS - Theming
+**Pattern: Theme-Aware Styling**
+- For styles that need to adapt to different themes (e.g., light/dark mode), prefer using theme-configured utility classes (e.g., `bg-background`, `text-foreground`, `ring-border`) over hardcoding colors with `dark:` prefixes.
+- *Rationale:* This approach leverages the central theme configuration, making the styling more maintainable and ensuring consistency across the application. It avoids scattering theme-specific logic throughout individual components.
+
+## Component Styling
+**Best Practice: Consistent Styling for Component Instances**
+- When updating the style of a reusable component, ensure that the changes are applied consistently across all its instances, even if they have minor variations in their existing styles.
+- *Rationale:* This maintains visual uniformity and predictable behavior for the component throughout the application.
diff --git a/memory-bank/raw_reflection_log.md b/memory-bank/raw_reflection_log.md
@@ -0,0 +1,17 @@
+---
+Date: 2025-07-09
+TaskRef: "Add theme-aware borders to announcement badges"
+
+Learnings:
+- To create theme-aware borders in a Tailwind CSS project, it's effective to use the `ring-1 ring-border` classes. The `ring-border` utility applies a color that is defined in the theme configuration, allowing it to adapt automatically to light and dark modes.
+- When a component has multiple instances with slightly different styling, ensure that style updates are applied consistently across all relevant instances to maintain a uniform look and feel. In this case, one `HeroPill` had custom colors while the other used defaults, but both needed the theme-aware border.
+
+Difficulties:
+- The initial file path for `components/ui/hero-pill` was incorrect in the prompt (`components/ui/hero-pill"`), leading to a file read error. I corrected the path to `components/ui/hero-pill.tsx` based on the file list and successfully read the component.
+
+Successes:
+- Correctly identified that using a theme-based utility class (`ring-border`) was the right approach instead of adding more complex, hardcoded `dark:` variant styles. This leads to a cleaner and more maintainable implementation.
+
+Improvements_Identified_For_Consolidation:
+- General pattern: For theme-aware styling in Tailwind CSS, prefer using theme-configured variables (like `border`, `primary`, `accent`) over hardcoding colors with `dark:` prefixes where possible.
+---
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
diff --git a/tailwind.config.ts b/tailwind.config.ts

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+{`
	`2`	`+ "recommendations": ["21st.21st-extension"]`
	`3`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -66,4 +66,8 @@`
`66`	`66`	`body {`
`67`	`67`	`@apply bg-background text-foreground;`
`68`	`68`	`}`
	`69`	`+ .dark body {`
	`70`	`+ background-color: #111111;`
	`71`	`+ background-image: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(0, 174, 239, 0.3), rgba(255, 255, 255, 0));`
	`72`	`+ }`
`69`	`73`	`}`