nicolium: some style/layout changes

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>

packages/nicolium/src/columns/timeline.tsx

@@ -541,10 +541,10 @@ const Timeline: React.FC<ITimeline> = ({
           liveRegionMessage={messages.queueLiveRegion}
         />
       </Portal>
-      {featuredStatusIds && featuredStatusIds.length > 3 && entries?.length > 0 && (
-        <SkipPinned onClick={handleSkipPinned} />
-      )}
       <PullToRefresh onRefresh={refetch} isPullable={!isFetching}>
+        {featuredStatusIds && featuredStatusIds.length > 3 && entries?.length > 0 && (
+          <SkipPinned onClick={handleSkipPinned} />
+        )}
         <ScrollableList
           id='status-list'
           key='scrollable-list'

packages/nicolium/src/components/pull-to-refresh.tsx

@@ -63,12 +63,12 @@ const isTreeScrollable = (element: HTMLElement, direction: DIRECTION): boolean =
   return isTreeScrollable(element.parentElement, direction);
 };
 
-interface PullToRefreshProps {
+interface IPullToRefresh {
   isPullable?: boolean;
   onRefresh?: () => Promise<any> | void;
   refreshingContent?: React.JSX.Element | string;
   pullingContent?: React.JSX.Element | string;
-  children: React.JSX.Element;
+  children: React.ReactNode;
   pullDownThreshold?: number;
   maxPullDownDistance?: number;
   resistance?: number;
@@ -76,7 +76,7 @@ interface PullToRefreshProps {
   className?: string;
 }
 
-const PullToRefresh: React.FC<PullToRefreshProps> = ({
+const PullToRefresh: React.FC<IPullToRefresh> = ({
   isPullable = true,
   onRefresh,
   refreshingContent = onRefresh ? <Spinner size={30} withText={false} /> : <></>,

packages/nicolium/src/features/account/components/header.tsx

@@ -109,16 +109,14 @@ const Header: React.FC<IHeader> = ({ account }) => {
 
   if (!account) {
     return (
-      <div className='-mx-4 -mt-4 sm:-mx-6 sm:-mt-6'>
-        <div>
+      <div className='⁂-account-header__container'>
+        <div className='-mx-4 -mt-4 sm:-mx-6 sm:-mt-6'>
           <div className='relative h-32 w-full bg-gray-200 black:rounded-t-none dark:bg-gray-900/50 md:rounded-t-xl lg:h-48' />
         </div>
 
-        <div className='px-4 sm:px-6'>
-          <div className='-mt-12 flex items-end gap-5'>
-            <div className='relative flex'>
-              <div className='size-24 rounded-lg bg-gray-400 ring-4 ring-white dark:ring-gray-800' />
-            </div>
+        <div className='-mt-12 flex items-end gap-5'>
+          <div className='relative flex'>
+            <div className='size-24 rounded-lg bg-gray-400 ring-4 ring-white dark:ring-gray-800' />
           </div>
         </div>
       </div>
@@ -332,12 +330,12 @@ const Header: React.FC<IHeader> = ({ account }) => {
   const info = makeInfo();
 
   return (
-    <div className='-mx-4 -mt-4 sm:-mx-6 sm:-mt-6'>
+    <div className='⁂-account-header__container'>
       {account.moved && typeof account.moved === 'object' && (
         <MovedNote from={account} to={account.moved as AccountEntity} />
       )}
 
-      <div>
+      <div className='-mx-4 -mt-4 sm:-mx-6 sm:-mt-6'>
         <div
           className={clsx(
             'relative isolate flex w-full flex-col justify-center overflow-hidden black:rounded-t-none md:rounded-t-xl',
@@ -354,42 +352,36 @@ const Header: React.FC<IHeader> = ({ account }) => {
         </div>
       </div>
 
-      <div className='px-4 sm:px-6'>
-        <div className='-mt-12 flex items-end gap-5'>
-          <div className='relative flex'>
-            <a href={account.avatar} onClick={handleAvatarClick} target='_blank'>
-              <Avatar
-                src={account.avatar}
-                alt={account.avatar_description}
-                size={96}
-                className='relative size-24 rounded-lg bg-white ring-4 ring-white black:ring-black dark:bg-primary-900 dark:ring-primary-900'
-                isCat={account.is_cat}
-                username={account.username}
-                showAlt
-              />
-            </a>
-            {account.verified && (
-              <div className='absolute -bottom-2 -right-2'>
-                <VerificationBadge className='!size-[24px] rounded-full !p-[2px] ring-2 ring-white black:ring-black dark:ring-primary-900' />
-              </div>
-            )}
-          </div>
-
-          <div className='mt-6 flex w-full justify-end sm:pb-1'>
-            <div className='mt-10 flex flex-wrap justify-end gap-2'>
-              {ownAccount && account.id !== ownAccount.id && (
-                <SubscriptionButton account={account} />
-              )}
-              {renderMessageButton()}
-              {renderShareButton()}
-
-              <AccountMenu account={account} />
-
-              {renderRssButton()}
-
-              <ActionButton account={account} />
+      <div className='-mt-12 flex items-end gap-5'>
+        <div className='relative flex'>
+          <a href={account.avatar} onClick={handleAvatarClick} target='_blank'>
+            <Avatar
+              src={account.avatar}
+              alt={account.avatar_description}
+              size={96}
+              className='relative size-24 rounded-lg bg-white ring-4 ring-white black:ring-black dark:bg-primary-900 dark:ring-primary-900'
+              isCat={account.is_cat}
+              username={account.username}
+              showAlt
+            />
+          </a>
+          {account.verified && (
+            <div className='absolute -bottom-2 -right-2'>
+              <VerificationBadge className='!size-[24px] rounded-full !p-[2px] ring-2 ring-white black:ring-black dark:ring-primary-900' />
             </div>
-          </div>
+          )}
+        </div>
+
+        <div className='mt-6 flex w-full flex-wrap justify-end gap-2 sm:pb-1'>
+          {ownAccount && account.id !== ownAccount.id && <SubscriptionButton account={account} />}
+          {renderMessageButton()}
+          {renderShareButton()}
+
+          <AccountMenu account={account} />
+
+          {renderRssButton()}
+
+          <ActionButton account={account} />
         </div>
       </div>
     </div>

packages/nicolium/src/features/ui/components/panels/profile-info-panel.tsx

@@ -151,7 +151,7 @@ const ProfileInfoPanel: React.FC<IProfileInfoPanel> = ({ account, username }) =>
 
   if (!account) {
     return (
-      <div className='mt-6 min-w-0 flex-1 sm:px-2'>
+      <div className='min-w-0 flex-1 sm:px-2'>
         <div className='flex items-center gap-1'>
           <Text size='sm' theme='muted' direction='ltr' truncate>
             @{username}
@@ -165,7 +165,7 @@ const ProfileInfoPanel: React.FC<IProfileInfoPanel> = ({ account, username }) =>
   const badges = getBadges();
 
   return (
-    <div className='mt-6 min-w-0 flex-1 sm:px-2'>
+    <div className='min-w-0 flex-1 sm:px-2'>
       <div className='flex flex-col gap-2'>
         <div className='flex flex-col'>
           <div className='flex items-center gap-1'>

packages/nicolium/src/layouts/profile-layout.tsx

@@ -96,17 +96,20 @@ const ProfileLayout: React.FC = () => {
     <>
       {account?.local === false && <meta content='noindex, noarchive' name='robots' />}
       <Layout.Main>
-        <Column size='lg' label={account ? `@${acct}` : ''} withHeader={false}>
-          <div className='space-y-4'>
-            <Header key={`profile-header-${account?.id}`} account={account} />
-            <ProfileInfoPanel username={username} account={account} />
+        <Column
+          bodyClassName='⁂-account-layout'
+          size='lg'
+          label={account ? `@${acct}` : ''}
+          withHeader={false}
+        >
+          <Header key={`profile-header-${account?.id}`} account={account} />
+          <ProfileInfoPanel username={username} account={account} />
 
-            {account && showTabs && (
-              <Tabs key={`profile-tabs-${account.id}`} items={tabItems} activeItem={activeItem} />
-            )}
+          {account && showTabs && (
+            <Tabs key={`profile-tabs-${account.id}`} items={tabItems} activeItem={activeItem} />
+          )}
 
-            <Outlet />
-          </div>
+          <Outlet />
         </Column>
       </Layout.Main>
 

packages/nicolium/src/styles/new/accounts.scss

@@ -1,7 +1,9 @@
 @use 'mixins';
 
 .⁂-account-layout {
-  @include mixins.card($size: lg);
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
 }
 
 .⁂-account-card {

packages/nicolium/src/styles/new/timelines.scss

@@ -96,7 +96,7 @@
 
 .⁂-skip-pinned {
   position: absolute;
-  right: 1.5rem;
+  right: 0;
   z-index: 10;
   display: flex;
   width: fit-content;