add social links support

src/app/(home)/players/[id]/user.tsx

@@ -1,11 +1,5 @@
 'use client'
 
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu'
 import {
   Tooltip,
   TooltipContent,
@@ -32,6 +26,7 @@ import {
 } from '@/components/ui/select'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import { cn } from '@/lib/utils'
+import { auth } from '@/server/auth'
 import { RANKED_CHANNEL, VANILLA_CHANNEL } from '@/shared/constants'
 import { api } from '@/trpc/react'
 import {
@@ -40,15 +35,16 @@ import {
   BarChart3,
   ChevronDown,
   ChevronUp,
-  EllipsisVertical,
   Filter,
   IceCreamCone,
   ShieldHalf,
   Star,
   Trophy,
+  Twitch,
   UserIcon,
+  Youtube,
 } from 'lucide-react'
-import { ExternalIcon } from 'next/dist/client/components/react-dev-overlay/ui/icons/external'
+import { useSession } from 'next-auth/react'
 import Link from 'next/link'
 import { useParams } from 'next/navigation'
 import { isNonNullish } from 'remeda'
@@ -206,20 +202,6 @@ export function UserInfo() {
                     </TooltipContent>
                   </Tooltip>
                 </TooltipProvider>
-                {/*<DropdownMenu>*/}
-                {/*  <DropdownMenuTrigger asChild>*/}
-                {/*    <Button variant={'ghost'} size={'iconSm'}>*/}
-                {/*      <EllipsisVertical className={'size-4'} />*/}
-                {/*    </Button>*/}
-                {/*  </DropdownMenuTrigger>*/}
-                {/*  <DropdownMenuContent>*/}
-                {/*    <DropdownMenuItem asChild>*/}
-                {/*      <Link href={`/stream-card/${id}`} target={'_blank'}>*/}
-                {/*        Stream widget <ExternalIcon />*/}
-                {/*      </Link>*/}
-                {/*    </DropdownMenuItem>*/}
-                {/*  </DropdownMenuContent>*/}
-                {/*</DropdownMenu>*/}
               </div>
 
               <p className='pt-2 text-gray-500 text-sm dark:text-zinc-400'>
@@ -258,6 +240,38 @@ export function UserInfo() {
                     </span>
                   </Badge>
                 )}
+                {discord_user.twitch_url && (
+                  <Badge
+                    variant='outline'
+                    className='border-gray-200 bg-gray-50 dark:border-zinc-700 dark:bg-zinc-800'
+                  >
+                    <Twitch className='mr-1 h-3 w-3 text-purple-500' />
+                    <a
+                      href={discord_user.twitch_url}
+                      target='_blank'
+                      rel='noopener noreferrer'
+                      className='text-gray-700 hover:underline dark:text-zinc-300'
+                    >
+                      Twitch
+                    </a>
+                  </Badge>
+                )}
+                {discord_user.youtube_url && (
+                  <Badge
+                    variant='outline'
+                    className='border-gray-200 bg-gray-50 dark:border-zinc-700 dark:bg-zinc-800'
+                  >
+                    <Youtube className='mr-1 h-3 w-3 text-red-500' />
+                    <a
+                      href={discord_user.youtube_url}
+                      target='_blank'
+                      rel='noopener noreferrer'
+                      className='text-gray-700 hover:underline dark:text-zinc-300'
+                    >
+                      YouTube
+                    </a>
+                  </Badge>
+                )}
               </div>
             </div>
             <div

src/app/(home)/profile/settings/page-client.tsx

@@ -0,0 +1,116 @@
+'use client'
+
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { api } from '@/trpc/react'
+import { SiTwitch, SiYoutube } from '@icons-pack/react-simple-icons'
+import { ExternalLink } from 'lucide-react'
+import Link from 'next/link'
+import { useState } from 'react'
+import { toast } from 'sonner'
+
+export function ProfileSettingsPageClient({
+  userId,
+}: { userId: string | null }) {
+  const [socialLinks] = api.profile.getSocialLinks.useSuspenseQuery()
+  const [twitchUrl, setTwitchUrl] = useState<string | null>(
+    socialLinks.twitch_url
+  )
+  const [youtubeUrl, setYoutubeUrl] = useState<string | null>(
+    socialLinks.youtube_url
+  )
+
+  const { mutate: updateSocialLinks, isPending } =
+    api.profile.updateSocialLinks.useMutation({
+      onSuccess: () => {
+        toast.success('Social links updated successfully')
+      },
+    })
+
+  const handleSave = () => {
+    updateSocialLinks({
+      twitch_url: twitchUrl,
+      youtube_url: youtubeUrl,
+    })
+  }
+
+  return (
+    <div className='mx-auto flex w-[calc(100%-1rem)] max-w-fd-container flex-1 flex-col py-8'>
+      <div className='mb-6'>
+        <h1 className='font-bold text-3xl text-gray-900 dark:text-white'>
+          Profile Settings
+        </h1>
+        <p className='mt-2 text-gray-500 dark:text-zinc-400'>
+          Manage your profile settings and social links
+        </p>
+      </div>
+
+      <div className='space-y-6'>
+        <div className='rounded-lg border bg-white p-6 dark:bg-zinc-800/20'>
+          <h2 className='mb-4 font-semibold text-xl'>Stream Widget</h2>
+          <p className='mb-4 text-gray-500 dark:text-zinc-400'>
+            Use this widget to display your stats on your stream
+          </p>
+          {userId && (
+            <Link
+              href={`/stream-card/${userId}`}
+              target='_blank'
+              className='inline-flex items-center gap-2 text-violet-600 hover:text-violet-700 dark:text-violet-400 dark:hover:text-violet-300'
+            >
+              Open Stream Widget <ExternalLink className='h-4 w-4' />
+            </Link>
+          )}
+        </div>
+
+        <form
+          onSubmit={(e) => {
+            e.preventDefault()
+            handleSave()
+          }}
+          className='rounded-lg border bg-white p-6 dark:bg-zinc-800/20'
+        >
+          <h2 className='mb-4 font-semibold text-xl'>Social Links</h2>
+          <div className='space-y-4'>
+            <div>
+              <Label className='mb-2' htmlFor={'ttv-url'}>
+                Twitch URL
+              </Label>
+              <div className='flex items-center gap-2'>
+                <SiTwitch className='h-5 w-5 text-purple-500' />
+                <Input
+                  id={'ttv-url'}
+                  type='url'
+                  value={twitchUrl || ''}
+                  onChange={(e) => setTwitchUrl(e.target.value || null)}
+                  placeholder='https://twitch.tv/yourusername'
+                />
+              </div>
+            </div>
+            <div>
+              <Label className='mb-2' htmlFor={'yt-url'}>
+                YouTube URL
+              </Label>
+              <div className='flex items-center gap-2'>
+                <SiYoutube className='h-5 w-5 text-red-500' />
+                <Input
+                  id={'yt-url'}
+                  type='url'
+                  value={youtubeUrl || ''}
+                  onChange={(e) => setYoutubeUrl(e.target.value || null)}
+                  placeholder='https://youtube.com/c/yourchannel'
+                  className='w-full rounded-md border border-gray-300 p-2 dark:border-zinc-700 dark:bg-zinc-900'
+                />
+              </div>
+            </div>
+          </div>
+          <div className='mt-6 flex justify-end gap-2'>
+            <Button disabled={isPending} type={'submit'}>
+              {isPending ? 'Saving...' : 'Save Changes'}
+            </Button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}