smaller bundles

Author: tannerlinsley

package.json

@@ -78,14 +78,15 @@
     "remark-parse": "^11.0.0",
     "remark-rehype": "^11.1.2",
     "remove-markdown": "^0.5.0",
+    "resend": "^6.6.0",
     "shiki": "^1.4.0",
     "tailwind-merge": "^1.14.0",
     "unified": "^11.0.5",
     "unist-util-visit": "^5.0.0",
     "uploadthing": "^7.7.4",
+    "valibot": "^1.2.0",
     "vite-bundle-analyzer": "^1.2.1",
     "vite-tsconfig-paths": "^5.0.1",
-    "zod": "^4.0.17",
     "zustand": "^4.5.2"
   },
   "devDependencies": {
@@ -108,6 +109,7 @@
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.35",
     "prettier": "^3.7.4",
+    "source-map-explorer": "^2.5.3",
     "tailwindcss": "^4.1.11",
     "tsx": "^4.21.0",
     "typescript": "^5.6.3",

pnpm-lock.yaml

@@ -0,0 +1,71 @@
+import * as React from 'react'
+import { Link } from '@tanstack/react-router'
+import { ChevronDown, Settings, Lock, LogOut } from 'lucide-react'
+import { Avatar } from '~/components/Avatar'
+import {
+  Dropdown,
+  DropdownTrigger,
+  DropdownContent,
+  DropdownItem,
+  DropdownSeparator,
+} from '~/components/Dropdown'
+
+interface AuthenticatedUserMenuProps {
+  user: {
+    image?: string | null
+    oauthImage?: string | null
+    name?: string | null
+    email?: string | null
+  } | null
+  canAdmin: boolean
+  onSignOut: () => void
+}
+
+export function AuthenticatedUserMenu({
+  user,
+  canAdmin,
+  onSignOut,
+}: AuthenticatedUserMenuProps) {
+  return (
+    <Dropdown>
+      <DropdownTrigger>
+        <div className="flex items-center gap-1 cursor-pointer h-[26px]">
+          <Avatar
+            image={user?.image}
+            oauthImage={user?.oauthImage}
+            name={user?.name}
+            email={user?.email}
+            size="xs"
+            className="w-[26px] h-[26px]"
+          />
+          <ChevronDown className="w-3 h-3 opacity-50" />
+        </div>
+      </DropdownTrigger>
+      <DropdownContent align="end">
+        <div className="px-2 py-1.5 text-xs text-gray-500 dark:text-gray-400">
+          {user?.email}
+        </div>
+        <DropdownSeparator />
+        <DropdownItem asChild>
+          <Link to="/account" className="flex items-center gap-2">
+            <Settings className="w-4 h-4" />
+            <span>Account</span>
+          </Link>
+        </DropdownItem>
+        {canAdmin && (
+          <DropdownItem asChild>
+            <Link to="/admin" className="flex items-center gap-2">
+              <Lock className="w-4 h-4" />
+              <span>Admin</span>
+            </Link>
+          </DropdownItem>
+        )}
+        <DropdownSeparator />
+        <DropdownItem onSelect={onSignOut}>
+          <LogOut className="w-4 h-4" />
+          <span>Sign out</span>
+        </DropdownItem>
+      </DropdownContent>
+    </Dropdown>
+  )
+}

src/components/AuthenticatedUserMenu.tsx

@@ -1,4 +1,4 @@
-import { format, formatDistanceToNow } from 'date-fns'
+import { format, formatDistanceToNow } from '~/utils/dates'
 import { Markdown } from '~/components/Markdown'
 import { libraries } from '~/libraries'
 import { partners } from '~/utils/partners'

src/components/FeedEntry.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { format, formatDistanceToNow } from 'date-fns'
+import { format, formatDistanceToNow } from '~/utils/dates'
 import { Markdown } from '~/components/Markdown'
 import { Card } from '~/components/Card'
 import { libraries } from '~/libraries'

src/components/FeedEntryTimeline.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import { useQuery, keepPreviousData } from '@tanstack/react-query'
 import { listFeedEntriesQueryOptions } from '~/queries/feed'
 import { Link } from '@tanstack/react-router'
-import { formatDistanceToNow } from 'date-fns'
+import { formatDistanceToNow } from '~/utils/dates'
 import { libraries } from '~/libraries'
 
 const DISPLAY_DURATION = 7000 // 7 seconds in milliseconds

src/components/FeedTicker.tsx

@@ -166,7 +166,7 @@ export function FeedbackModerationList({
                 >
                   <TableCell className="font-mono text-xs">
                     <Link
-                      to="/admin/feedback_/$id"
+                      to="/admin/feedback/$id"
                       params={{ id: feedback.id }}
                       className="hover:text-blue-600 dark:hover:text-blue-400"
                       onClick={(e) => e.stopPropagation()}
@@ -176,7 +176,7 @@ export function FeedbackModerationList({
                   </TableCell>
                   <TableCell>
                     <Link
-                      to="/admin/feedback_/$id"
+                      to="/admin/feedback/$id"
                       params={{ id: feedback.id }}
                       className="flex items-center gap-2 hover:opacity-80"
                       onClick={(e) => e.stopPropagation()}