checkpoint

Author: tannerlinsley

package.json

@@ -87,6 +87,7 @@
     "shiki": "^1.4.0",
     "tailwind-merge": "^1.14.0",
     "three": "^0.182.0",
+    "troika-three-text": "^0.52.4",
     "unified": "^11.0.5",
     "unist-util-visit": "^5.0.0",
     "uploadthing": "^7.7.4",

pnpm-lock.yaml

@@ -53,7 +53,7 @@ export function AuthenticatedUserMenu({
           </Link>
         </DropdownItem>
         <DropdownItem asChild>
-          <Link to="/showcase/mine" className="flex items-center gap-2">
+          <Link to="/account/submissions" className="flex items-center gap-2">
             <Sparkles className="w-4 h-4" />
             <span>My Showcases</span>
           </Link>

src/components/AuthenticatedUserMenu.tsx

@@ -308,7 +308,7 @@ export function Navbar({ children }: { children: React.ReactNode }) {
     },
   })
 
-  const linkClasses = `flex items-center justify-between group px-2 py-1 rounded-lg hover:bg-gray-500/10 font-black`
+  const linkClasses = `flex items-center justify-between gap-2 group px-2 py-1 rounded-lg hover:bg-gray-500/10 font-black`
 
   const items = (
     <div className="md:flex gap-2 [&>*]:flex-1 lg:block">
@@ -344,7 +344,13 @@ export function Navbar({ children }: { children: React.ReactNode }) {
             <div key={i}>
               {library.to?.startsWith('http') ? (
                 <a href={library.to} className={linkClasses}>
-                  <span className={library.textStyle}>{name}</span>
+                  <span
+                    className={twMerge(
+                      'w-3 h-3 rounded-sm border border-black/20 dark:border-white/20',
+                      library.bgStyle,
+                    )}
+                  />
+                  {name}
                 </a>
               ) : (
                 <Collapsible defaultOpen={isActive}>
@@ -357,12 +363,18 @@ export function Navbar({ children }: { children: React.ReactNode }) {
                           isActive ? 'bg-gray-500/10 dark:bg-gray-500/30' : '',
                         )}
                       >
+                        <span
+                          className={twMerge(
+                            'w-3 h-3 rounded-sm border border-black/20 dark:border-white/20',
+                            library.bgStyle,
+                          )}
+                        />
                         <span
                           style={{
                             viewTransitionName: `library-name-${library.id}`,
                           }}
                           className={twMerge(
-                            library.textStyle,
+                            'flex-1 text-left',
                             isActive ? 'font-bold' : '',
                           )}
                         >

src/components/MyShowcases.tsx

@@ -1,6 +1,6 @@
 import { Link } from '@tanstack/react-router'
 import { twMerge } from 'tailwind-merge'
-import { ExternalLink, ThumbsUp, ThumbsDown } from 'lucide-react'
+import { ExternalLink, ThumbsUp, ThumbsDown, Code } from 'lucide-react'
 import { libraries, type LibraryId } from '~/libraries'
 import type { Showcase } from '~/db/types'
 
@@ -71,17 +71,31 @@ export function ShowcaseCard({
         </div>
       </Link>
 
-      {/* External link button - separate from card link */}
-      <a
-        href={showcase.url}
-        target="_blank"
-        rel="noopener noreferrer"
-        onClick={(e) => e.stopPropagation()}
-        className="absolute top-3 right-3 p-2 rounded-full bg-white/90 dark:bg-gray-800/90 shadow-sm hover:bg-white dark:hover:bg-gray-700 transition-colors"
-        title="Visit site"
-      >
-        <ExternalLink className="w-4 h-4 text-gray-600 dark:text-gray-300" />
-      </a>
+      {/* Action buttons - separate from card link */}
+      <div className="absolute top-3 right-3 flex gap-2">
+        {showcase.sourceUrl && (
+          <a
+            href={showcase.sourceUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            onClick={(e) => e.stopPropagation()}
+            className="p-2 rounded-full bg-white/90 dark:bg-gray-800/90 shadow-sm hover:bg-white dark:hover:bg-gray-700 transition-colors"
+            title="View source code"
+          >
+            <Code className="w-4 h-4 text-gray-600 dark:text-gray-300" />
+          </a>
+        )}
+        <a
+          href={showcase.url}
+          target="_blank"
+          rel="noopener noreferrer"
+          onClick={(e) => e.stopPropagation()}
+          className="p-2 rounded-full bg-white/90 dark:bg-gray-800/90 shadow-sm hover:bg-white dark:hover:bg-gray-700 transition-colors"
+          title="Visit site"
+        >
+          <ExternalLink className="w-4 h-4 text-gray-600 dark:text-gray-300" />
+        </a>
+      </div>
 
       {/* Footer with libraries and voting */}
       <div className="px-4 pb-4 mt-auto">

src/components/Navbar.tsx

@@ -7,6 +7,7 @@ import {
   ThumbsUp,
   ThumbsDown,
   Sparkles,
+  Code,
 } from 'lucide-react'
 import { Button } from './Button'
 import { twMerge } from 'tailwind-merge'
@@ -258,16 +259,30 @@ export function ShowcaseDetail({ showcaseId }: ShowcaseDetailProps) {
               </p>
             </div>
           </div>
-          <Button
-            as="a"
-            href={showcase.url}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="px-4 py-2 text-sm bg-gray-900 dark:bg-white text-white dark:text-gray-900 border-gray-900 dark:border-white hover:bg-gray-700 dark:hover:bg-gray-200 shrink-0"
-          >
-            Visit Site
-            <ExternalLink className="w-4 h-4" />
-          </Button>
+          <div className="flex gap-2 shrink-0">
+            {showcase.sourceUrl && (
+              <Button
+                as="a"
+                href={showcase.sourceUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="px-4 py-2 text-sm"
+              >
+                View Source
+                <Code className="w-4 h-4" />
+              </Button>
+            )}
+            <Button
+              as="a"
+              href={showcase.url}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="px-4 py-2 text-sm bg-gray-900 dark:bg-white text-white dark:text-gray-900 border-gray-900 dark:border-white hover:bg-gray-700 dark:hover:bg-gray-200"
+            >
+              Visit Site
+              <ExternalLink className="w-4 h-4" />
+            </Button>
+          </div>
         </div>
 
         {/* Description */}