nicolium: style cleanup

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

packages/nicolium/src/features/ui/components/profile-stats.tsx

@@ -1,6 +1,6 @@
 import { Link } from '@tanstack/react-router';
 import React from 'react';
-import { FormattedMessage, useIntl } from 'react-intl';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import Text from '@/components/ui/text';
 import { useSettings } from '@/stores/settings';
@@ -8,6 +8,22 @@ import { shortNumberFormat } from '@/utils/numbers';
 
 import type { Account } from 'pl-api';
 
+const messages = defineMessages({
+  statusesCount: {
+    id: 'account.statuses_count',
+    defaultMessage: '{count, plural, one {# status} other {# statuses}}',
+  },
+  followersCount: {
+    id: 'account.followers_count',
+    defaultMessage: '{count, plural, one {# follower} other {# followers}}',
+  },
+  followingCount: { id: 'account.following_count', defaultMessage: '{count} following' },
+  subscribersCount: {
+    id: 'account.subscribers_count',
+    defaultMessage: '{count, plural, one {# subscriber} other {# subscribers}}',
+  },
+});
+
 interface IProfileStats {
   account:
     | Pick<
@@ -30,7 +46,10 @@ const ProfileStats: React.FC<IProfileStats> = ({ account, onClickHandler }) => {
   return (
     <div className='flex flex-wrap items-center gap-x-3'>
       {!demetricator && (
-        <div className='flex items-center gap-1'>
+        <div
+          className='flex items-center gap-1'
+          title={intl.formatMessage(messages.statusesCount, { count: account.statuses_count })}
+        >
           <Text theme='primary' weight='bold' size='sm'>
             {shortNumberFormat(account.statuses_count)}
           </Text>
@@ -47,7 +66,10 @@ const ProfileStats: React.FC<IProfileStats> = ({ account, onClickHandler }) => {
         title={intl.formatNumber(account.followers_count)}
         className='hover:underline'
       >
-        <div className='flex items-center gap-1'>
+        <div
+          className='flex items-center gap-1'
+          title={intl.formatMessage(messages.followersCount, { count: account.followers_count })}
+        >
           {!demetricator && (
             <Text theme='primary' weight='bold' size='sm'>
               {shortNumberFormat(account.followers_count)}
@@ -66,7 +88,10 @@ const ProfileStats: React.FC<IProfileStats> = ({ account, onClickHandler }) => {
         title={intl.formatNumber(account.following_count)}
         className='hover:underline'
       >
-        <div className='flex items-center gap-1'>
+        <div
+          className='flex items-center gap-1'
+          title={intl.formatMessage(messages.followingCount, { count: account.following_count })}
+        >
           {!demetricator && (
             <Text theme='primary' weight='bold' size='sm'>
               {shortNumberFormat(account.following_count)}
@@ -86,7 +111,12 @@ const ProfileStats: React.FC<IProfileStats> = ({ account, onClickHandler }) => {
           title={intl.formatNumber(account.subscribers_count)}
           className='hover:underline'
         >
-          <div className='flex items-center gap-1'>
+          <div
+            className='flex items-center gap-1'
+            title={intl.formatMessage(messages.subscribersCount, {
+              count: account.subscribers_count,
+            })}
+          >
             {!demetricator && (
               <Text theme='primary' weight='bold' size='sm'>
                 {shortNumberFormat(account.subscribers_count)}

packages/nicolium/src/locales/en.json

@@ -30,6 +30,8 @@
   "account.follow": "Follow",
   "account.followers": "Followers",
   "account.followers.empty": "No one follows this user yet.",
+  "account.followers_count": "{count, plural, one {# follower} other {# followers}}",
+  "account.following_count": "{count} following",
   "account.follows": "Following",
   "account.follows.empty": "This user doesn't follow anyone yet.",
   "account.follows_you": "Follows you",
@@ -70,12 +72,14 @@
   "account.share": "Share @{name}'s profile",
   "account.show_reblogs": "Show reposts from @{name}",
   "account.statuses": "Statuses",
+  "account.statuses_count": "{count, plural, one {# status} other {# statuses}}",
   "account.subscribe": "Subscribe to notifications from @{name}",
   "account.subscribe.failure": "An error occurred trying to subscribe to this account.",
   "account.subscribe.success": "You have subscribed to this account.",
   "account.subscribers": "Subscribers",
   "account.subscribers.empty": "No one subscribes to this user yet.",
   "account.subscribers.include_expired": "Include expired subscriptions",
+  "account.subscribers_count": "{count, plural, one {# subscriber} other {# subscribers}}",
   "account.timezone": "Timezone: {timezone}",
   "account.timezone.equal": "(same as you)",
   "account.unblock": "Unblock @{name}",

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

@@ -2,19 +2,21 @@
 @use 'variables';
 
 .⁂-layout__main--home {
-  .dark.black & > :not([hidden]) ~ :not([hidden]) {
-    border-color: rgb(var(--color-gray-800));
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+
+  .dark.black & {
+    gap: 0;
+
+    & > :not([hidden]) ~ :not([hidden]) {
+      border-color: rgb(var(--color-gray-800));
+    }
   }
 
   .dark & > :not([hidden]) ~ :not([hidden]) {
     border-color: rgb(var(--color-primary-800));
   }
-
-  @media (min-width: variables.$breakpoint-sm) {
-    & > :not([hidden]) ~ :not([hidden]) {
-      margin-top: 1rem;
-    }
-  }
 }
 
 .⁂-compose-block {