showcase submissions

Author: tannerlinsley

package.json

@@ -44,6 +44,7 @@
     "@tanstack/react-start": "1.141.8",
     "@tanstack/react-table": "^8.21.3",
     "@types/d3": "^7.4.3",
+    "@uploadthing/react": "^7.3.3",
     "@visx/hierarchy": "^2.10.0",
     "@visx/responsive": "^2.10.0",
     "@vitejs/plugin-react": "^4.3.3",
@@ -65,6 +66,7 @@
     "react": "^19.2.0",
     "react-colorful": "^5.6.1",
     "react-dom": "^19.2.0",
+    "react-easy-crop": "^5.5.6",
     "react-instantsearch": "7",
     "rehype-autolink-headings": "^7.1.0",
     "rehype-callouts": "^2.1.2",
@@ -80,6 +82,7 @@
     "tailwind-merge": "^1.14.0",
     "unified": "^11.0.5",
     "unist-util-visit": "^5.0.0",
+    "uploadthing": "^7.7.4",
     "vite-bundle-analyzer": "^1.2.1",
     "vite-tsconfig-paths": "^5.0.1",
     "zod": "^4.0.17",

pnpm-lock.yaml

@@ -106,6 +106,7 @@ export class AuthService implements IAuthService {
       email: user.email,
       name: user.name,
       image: user.image,
+      oauthImage: user.oauthImage,
       displayUsername: user.displayUsername,
       capabilities,
       adsDisabled: user.adsDisabled,

src/auth/auth.server.ts

@@ -60,7 +60,7 @@ export class OAuthService implements IOAuthService {
         const updates: {
           email?: string
           name?: string
-          image?: string
+          oauthImage?: string
           updatedAt?: Date
         } = {}
 
@@ -70,8 +70,9 @@ export class OAuthService implements IOAuthService {
         if (profile.name && user.name !== profile.name) {
           updates.name = profile.name
         }
-        if (profile.image && user.image !== profile.image) {
-          updates.image = profile.image
+        // Always update oauthImage from provider (it may have changed)
+        if (profile.image && user.oauthImage !== profile.image) {
+          updates.oauthImage = profile.image
         }
 
         if (Object.keys(updates).length > 0) {
@@ -101,6 +102,7 @@ export class OAuthService implements IOAuthService {
         const updates: {
           name?: string
           image?: string
+          oauthImage?: string
           updatedAt?: Date
         } = {}
 
@@ -110,6 +112,10 @@ export class OAuthService implements IOAuthService {
         if (profile.image && !existingUser.image) {
           updates.image = profile.image
         }
+        // Always update oauthImage from provider
+        if (profile.image && existingUser.oauthImage !== profile.image) {
+          updates.oauthImage = profile.image
+        }
 
         if (Object.keys(updates).length > 0) {
           updates.updatedAt = new Date()
@@ -124,6 +130,7 @@ export class OAuthService implements IOAuthService {
           email: profile.email,
           name: profile.name,
           image: profile.image,
+          oauthImage: profile.image,
           displayUsername: profile.name,
           capabilities: [],
         })

src/auth/oauth.server.ts

@@ -50,6 +50,7 @@ export class DrizzleUserRepository implements IUserRepository {
     email: string
     name?: string
     image?: string
+    oauthImage?: string
     displayUsername?: string
     capabilities?: Capability[]
   }): Promise<DbUser> {
@@ -59,6 +60,7 @@ export class DrizzleUserRepository implements IUserRepository {
         email: data.email,
         name: data.name,
         image: data.image,
+        oauthImage: data.oauthImage,
         displayUsername: data.displayUsername,
         capabilities: data.capabilities || [],
       })
@@ -76,7 +78,8 @@ export class DrizzleUserRepository implements IUserRepository {
     data: Partial<{
       email: string
       name: string
-      image: string
+      image: string | null
+      oauthImage: string
       displayUsername: string
       capabilities: Capability[]
       adsDisabled: boolean
@@ -111,6 +114,7 @@ export class DrizzleUserRepository implements IUserRepository {
       email: user.email,
       name: user.name,
       image: user.image,
+      oauthImage: user.oauthImage,
       displayUsername: user.displayUsername,
       capabilities: user.capabilities as Capability[],
       adsDisabled: user.adsDisabled,

src/auth/repositories.server.ts

@@ -16,13 +16,15 @@ export type Capability =
   | 'builder'
   | 'feed'
   | 'moderate-feedback'
+  | 'moderate-showcases'
 
 export const VALID_CAPABILITIES: readonly Capability[] = [
   'admin',
   'disableAds',
   'builder',
   'feed',
   'moderate-feedback',
+  'moderate-showcases',
 ] as const
 
 // ============================================================================
@@ -65,6 +67,7 @@ export interface AuthUser {
   email: string
   name: string | null
   image: string | null
+  oauthImage: string | null
   displayUsername: string | null
   capabilities: Capability[]
   adsDisabled: boolean | null
@@ -80,6 +83,7 @@ export interface DbUser {
   email: string
   name: string | null
   image: string | null
+  oauthImage: string | null
   displayUsername: string | null
   capabilities: Capability[]
   adsDisabled: boolean | null
@@ -105,6 +109,7 @@ export interface IUserRepository {
     email: string
     name?: string
     image?: string
+    oauthImage?: string
     displayUsername?: string
     capabilities?: Capability[]
   }): Promise<DbUser>
@@ -113,7 +118,8 @@ export interface IUserRepository {
     data: Partial<{
       email: string
       name: string
-      image: string
+      image: string | null
+      oauthImage: string
       displayUsername: string
       capabilities: Capability[]
       adsDisabled: boolean

src/auth/types.ts

@@ -0,0 +1,86 @@
+import { User } from 'lucide-react'
+import { twMerge } from 'tailwind-merge'
+
+type AvatarSize = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+
+const sizeClasses: Record<AvatarSize, { container: string; text: string }> = {
+  '2xs': { container: 'w-4 h-4', text: 'text-[8px]' },
+  xs: { container: 'w-6 h-6', text: 'text-xs' },
+  sm: { container: 'w-8 h-8', text: 'text-sm' },
+  md: { container: 'w-10 h-10', text: 'text-base' },
+  lg: { container: 'w-14 h-14', text: 'text-lg' },
+  xl: { container: 'w-20 h-20', text: 'text-xl' },
+}
+
+interface AvatarProps {
+  image?: string | null
+  oauthImage?: string | null
+  name?: string | null
+  email?: string | null
+  size?: AvatarSize
+  className?: string
+}
+
+function getInitials(name?: string | null, email?: string | null): string {
+  if (name) {
+    const parts = name.trim().split(/\s+/)
+    if (parts.length >= 2) {
+      return `${parts[0]![0]}${parts[parts.length - 1]![0]}`.toUpperCase()
+    }
+    return name.slice(0, 2).toUpperCase()
+  }
+  if (email) {
+    return email.slice(0, 2).toUpperCase()
+  }
+  return ''
+}
+
+export function Avatar({
+  image,
+  oauthImage,
+  name,
+  email,
+  size = 'md',
+  className = '',
+}: AvatarProps) {
+  const displayImage = image || oauthImage
+  const initials = getInitials(name, email)
+  const { container, text } = sizeClasses[size]
+
+  if (displayImage) {
+    return (
+      <img
+        src={displayImage}
+        alt={name || email || 'User avatar'}
+        className={twMerge(container, 'rounded-full object-cover', className)}
+      />
+    )
+  }
+
+  if (initials) {
+    return (
+      <div
+        className={twMerge(
+          container,
+          text,
+          'rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center font-medium text-gray-600 dark:text-gray-300',
+          className,
+        )}
+      >
+        {initials}
+      </div>
+    )
+  }
+
+  return (
+    <div
+      className={twMerge(
+        container,
+        'rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center text-gray-500 dark:text-gray-400',
+        className,
+      )}
+    >
+      <User className="w-1/2 h-1/2" />
+    </div>
+  )
+}