From 07bba7ef25083758d5e2d81cc0e99504239a2f56 Mon Sep 17 00:00:00 2001
From: Pouria Delfanazari <pdelfan@gmail.com>
Date: Wed, 24 Sep 2025 13:03:46 -0700
Subject: [PATCH] feat: profile header redesign

---
 .../profileHeader/ProfileHeader.tsx           | 28 +++++++++----------
 src/webapp/lib/utils/text.ts                  |  7 +++++
 2 files changed, 21 insertions(+), 14 deletions(-)
 create mode 100644 src/webapp/lib/utils/text.ts

diff --git a/src/webapp/features/profile/components/profileHeader/ProfileHeader.tsx b/src/webapp/features/profile/components/profileHeader/ProfileHeader.tsx
index a9e4e5a1..807e1243 100644
--- a/src/webapp/features/profile/components/profileHeader/ProfileHeader.tsx
+++ b/src/webapp/features/profile/components/profileHeader/ProfileHeader.tsx
@@ -8,10 +8,10 @@ import {
   Text,
   Title,
   Button,
-  ActionIcon,
 } from '@mantine/core';
 import { FaBluesky } from 'react-icons/fa6';
 import ProfileTabs from '../profileTabs/ProfileTabs';
+import { truncateText } from '@/lib/utils/text';
 
 interface Props {
   handle: string;
@@ -28,38 +28,38 @@ export default async function ProfileHeader(props: Props) {
 
   return (
     <Container p={'xs'} size={'xl'}>
-      <Stack>
-        <Group justify="space-between">
-          <Group>
+      <Stack gap={'xl'}>
+        <Group justify="space-between" align="end">
+          <Group gap={'lg'} align="end">
             <Avatar
               src={data.avatarUrl}
               alt={`${data.name}'s avatar`}
-              size={'xl'}
+              size={180}
               radius={'lg'}
             />
             <Stack gap={'sm'}>
-              <Group>
-                <Title order={1} fz={'h4'}>
+              <Stack gap={0}>
+                <Title order={1} fz={'h2'}>
                   {data.name}
                 </Title>
-                <Text c="blue" fw={600} fz={'h4'}>
-                  {data.handle}
+                <Text c="blue" fw={600} fz={'xl'}>
+                  @{data.handle}
                 </Text>
-              </Group>
+              </Stack>
               {data.description && <Text>{data.description}</Text>}
             </Stack>
           </Group>
-          <ActionIcon
+          <Button
             component="a"
             href={`https://bsky.app/profile/${data.handle}`}
             target="_blank"
-            size={'lg'}
             radius={'xl'}
             bg="gray.2"
             c={'gray'}
+            leftSection={<FaBluesky />}
           >
-            <FaBluesky />
-          </ActionIcon>
+            {truncateText(data.handle, 14)}
+          </Button>
         </Group>
         <ProfileTabs handle={data.handle} />
       </Stack>
diff --git a/src/webapp/lib/utils/text.ts b/src/webapp/lib/utils/text.ts
new file mode 100644
index 00000000..ed717ee8
--- /dev/null
+++ b/src/webapp/lib/utils/text.ts
@@ -0,0 +1,7 @@
+export const truncateText = (text: string, maxLength: number = 100) => {
+  if (typeof maxLength !== 'number' || text.length <= maxLength) {
+    return text;
+  }
+
+  return text.slice(0, maxLength) + '...';
+};
-- 
2.51.2