nicolium: limit usage of hstack/stack

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
2026-03-09 22:14:52 +01:00
parent 890664fcf9
commit dfa010f7ee
17 changed files with 38 additions and 62 deletions
--- a/packages/nicolium/src/components/accounts/avatar-stack.tsx
+++ b/packages/nicolium/src/components/accounts/avatar-stack.tsx
@@ -2,7 +2,6 @@ import clsx from 'clsx';
 import React from 'react';

 import Avatar from '@/components/ui/avatar';
-import HStack from '@/components/ui/hstack';
 import { useAccounts } from '@/queries/accounts/use-accounts';

 interface IAvatarStack {
@@ -14,7 +13,7 @@ const AvatarStack: React.FC<IAvatarStack> = ({ accountIds, limit = 3 }) => {
  const { data: accounts } = useAccounts(accountIds.slice(0, limit));

  return (
-    <HStack className='relative' aria-hidden>
+    <div className='relative flex' aria-hidden>
      {accounts.map((account, i) => (
        <div
          className={clsx('relative', { '-ml-3': i !== 0 })}
@@ -31,7 +30,7 @@ const AvatarStack: React.FC<IAvatarStack> = ({ accountIds, limit = 3 }) => {
          />
        </div>
      ))}
-    </HStack>
+    </div>
  );
 };

--- a/packages/nicolium/src/components/accounts/scrobble.tsx
+++ b/packages/nicolium/src/components/accounts/scrobble.tsx
@@ -2,7 +2,6 @@ import clsx from 'clsx';
 import React, { useMemo, useRef } from 'react';
 import { FormattedMessage } from 'react-intl';

-import HStack from '@/components/ui/hstack';
 import Icon from '@/components/ui/icon';
 import Text from '@/components/ui/text';

@@ -41,7 +40,7 @@ const Scrobble: React.FC<IScrobble> = ({ scrobble }) => {
  if (!isRecent) return null;

  return (
-    <HStack alignItems='center' space={0.5}>
+    <div className='flex items-center gap-0.5'>
      <Icon
        src={require('@phosphor-icons/core/regular/music-notes-simple.svg')}
        className='size-4 text-gray-800 dark:text-gray-200'
@@ -78,7 +77,7 @@ const Scrobble: React.FC<IScrobble> = ({ scrobble }) => {
          />
        </Text>
      </div>
-    </HStack>
+    </div>
  );
 };

--- a/packages/nicolium/src/components/authorize-reject-buttons.tsx
+++ b/packages/nicolium/src/components/authorize-reject-buttons.tsx
@@ -2,7 +2,6 @@ import clsx from 'clsx';
 import React, { useEffect, useRef, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';

-import HStack from '@/components/ui/hstack';
 import IconButton from '@/components/ui/icon-button';
 import Text from '@/components/ui/text';

@@ -127,7 +126,7 @@ const AuthorizeRejectButtons: React.FC<IAuthorizeRejectButtons> = ({
      );
    default:
      return (
-        <HStack space={3} alignItems='center'>
+        <div className='flex items-center gap-3'>
          <AuthorizeRejectButton
            theme='danger'
            icon={require('@phosphor-icons/core/regular/x.svg')}
@@ -146,7 +145,7 @@ const AuthorizeRejectButtons: React.FC<IAuthorizeRejectButtons> = ({
            style={renderStyle('authorizing')}
            title={intl.formatMessage(messages.authorize)}
          />
-        </HStack>
+        </div>
      );
  }
 };
--- a/packages/nicolium/src/components/statuses/hashtags-bar.tsx
+++ b/packages/nicolium/src/components/statuses/hashtags-bar.tsx
@@ -3,7 +3,6 @@ import { Link } from '@tanstack/react-router';
 import React, { useCallback, useState } from 'react';
 import { FormattedMessage } from 'react-intl';

-import HStack from '../ui/hstack';
 import Text from '../ui/text';

 // Fit on a single line on desktop
@@ -28,7 +27,7 @@ const HashtagsBar: React.FC<IHashtagsBar> = ({ hashtags }) => {
  const revealedHashtags = expanded ? hashtags : hashtags.slice(0, VISIBLE_HASHTAGS);

  return (
-    <HStack space={2} wrap>
+    <div className='flex flex-wrap gap-2'>
      {revealedHashtags.map((hashtag) => (
        <Link
          key={hashtag}
@@ -56,7 +55,7 @@ const HashtagsBar: React.FC<IHashtagsBar> = ({ hashtags }) => {
          </Text>
        </button>
      )}
-    </HStack>
+    </div>
  );
 };

--- a/packages/nicolium/src/pages/dashboard/reports.tsx
+++ b/packages/nicolium/src/pages/dashboard/reports.tsx
@@ -4,7 +4,6 @@ import { defineMessages, FormattedList, FormattedMessage, useIntl } from 'react-

 import ScrollableList from '@/components/scrollable-list';
 import Column from '@/components/ui/column';
-import HStack from '@/components/ui/hstack';
 import IconButton from '@/components/ui/icon-button';
 import Text from '@/components/ui/text';
 import Report from '@/features/admin/components/report';
@@ -46,11 +45,7 @@ const Reports: React.FC = () => {
  return (
    <Column label={intl.formatMessage(messages.heading)}>
      {(accountId ?? targetAccountId) && (
-        <HStack
-          className='border-b border-solid border-gray-200 p-2 pb-4 dark:border-gray-800'
-          alignItems='center'
-          space={2}
-        >
+        <div className='flex items-center gap-2 border-b border-solid border-gray-200 p-2 pb-4 dark:border-gray-800'>
          <IconButton
            iconClassName='h-5 w-5'
            src={require('@phosphor-icons/core/regular/x.svg')}
@@ -91,7 +86,7 @@ const Reports: React.FC = () => {
              }}
            />
          </Text>
-        </HStack>
+        </div>
      )}
      <ScrollableList
        scrollKey='adminReports'
--- a/packages/nicolium/src/pages/dashboard/rules.tsx
+++ b/packages/nicolium/src/pages/dashboard/rules.tsx
@@ -4,7 +4,6 @@ import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import ScrollableList from '@/components/scrollable-list';
 import Button from '@/components/ui/button';
 import Column from '@/components/ui/column';
-import HStack from '@/components/ui/hstack';
 import Stack from '@/components/ui/stack';
 import Text from '@/components/ui/text';
 import { useRules } from '@/queries/admin/use-rules';
@@ -67,14 +66,14 @@ const Rule: React.FC<IRule> = ({ rule }) => {
            {rule.priority}
          </Text>
        )}
-        <HStack justifyContent='end' space={2}>
+        <div className='flex justify-end gap-2'>
          <Button theme='primary' onClick={handleEditRule(rule)}>
            <FormattedMessage id='admin.rules.edit' defaultMessage='Edit' />
          </Button>
          <Button theme='primary' onClick={handleDeleteRule(rule.id)}>
            <FormattedMessage id='admin.rules.delete' defaultMessage='Delete' />
          </Button>
-        </HStack>
+        </div>
      </Stack>
    </div>
  );
--- a/packages/nicolium/src/pages/developers/service-worker-info.tsx
+++ b/packages/nicolium/src/pages/developers/service-worker-info.tsx
@@ -5,7 +5,6 @@ import List, { ListItem } from '@/components/list';
 import Button from '@/components/ui/button';
 import Column from '@/components/ui/column';
 import FormActions from '@/components/ui/form-actions';
-import HStack from '@/components/ui/hstack';
 import Icon from '@/components/ui/icon';
 import Indicator from '@/components/ui/indicator';
 import Stack from '@/components/ui/stack';
@@ -88,12 +87,12 @@ const ServiceWorkerInfo: React.FC = () => {
      <Stack space={4}>
        <List>
          <ListItem label={intl.formatMessage(messages.status)}>
-            <HStack alignItems='center' space={2}>
+            <div className='flex items-center gap-2'>
              <Indicator state={getState()} />
              <Text size='md' theme='muted'>
                {getMessage()}
              </Text>
-            </HStack>
+            </div>
          </ListItem>

          {url && (
--- a/packages/nicolium/src/pages/fun/circle.tsx
+++ b/packages/nicolium/src/pages/fun/circle.tsx
@@ -249,7 +249,7 @@ const CirclePage: React.FC = () => {
            <Stack space={2}>
              {users?.map((user) => (
                <Link key={user.id} to='/@{$username}' params={{ username: user.acct }}>
-                  <HStack space={2} alignItems='center'>
+                  <div className='flex items-center gap-2'>
                    <Avatar
                      size={20}
                      src={user.avatar!}
@@ -259,7 +259,7 @@ const CirclePage: React.FC = () => {
                    <Text size='sm' weight='semibold' truncate>
                      {user.acct}
                    </Text>
-                  </HStack>
+                  </div>
                </Link>
              ))}
            </Stack>
--- a/packages/nicolium/src/pages/search/search.tsx
+++ b/packages/nicolium/src/pages/search/search.tsx
@@ -6,7 +6,6 @@ import { defineMessages, useIntl, FormattedMessage } from 'react-intl';

 import SearchColumn from '@/columns/search';
 import Column from '@/components/ui/column';
-import HStack from '@/components/ui/hstack';
 import IconButton from '@/components/ui/icon-button';
 import Input from '@/components/ui/input';
 import SvgIcon from '@/components/ui/svg-icon';
@@ -193,11 +192,7 @@ const SearchResults = () => {
  return (
    <>
      {accountId ? (
-        <HStack
-          className='border-b border-solid border-gray-200 p-2 pb-4 dark:border-gray-800'
-          alignItems='center'
-          space={2}
-        >
+        <div className='flex items-center gap-2 border-b border-solid border-gray-200 p-2 pb-4 dark:border-gray-800'>
          <IconButton
            className='text-gray-400 hover:text-gray-600'
            iconClassName='h-5 w-5'
@@ -212,7 +207,7 @@ const SearchResults = () => {
              values={{ acct: <strong className='break-words'>{account?.acct}</strong> }}
            />
          </Text>
-        </HStack>
+        </div>
      ) : (
        renderFilterBar()
      )}
--- a/packages/nicolium/src/pages/settings/backups.tsx
+++ b/packages/nicolium/src/pages/settings/backups.tsx
@@ -5,7 +5,6 @@ import Button from '@/components/ui/button';
 import Card from '@/components/ui/card';
 import Column from '@/components/ui/column';
 import FormActions from '@/components/ui/form-actions';
-import HStack from '@/components/ui/hstack';
 import Spinner from '@/components/ui/spinner';
 import Stack from '@/components/ui/stack';
 import Text from '@/components/ui/text';
@@ -51,7 +50,7 @@ const Backup: React.FC<IBackup> = ({ backup }) => {
            />
          </Text>
        </Stack>
-        <HStack justifyContent='end'>
+        <div className='flex justify-end'>
          {backup.processed ? (
            <a href={backup.url} target='_blank'>
              {button}
@@ -59,7 +58,7 @@ const Backup: React.FC<IBackup> = ({ backup }) => {
          ) : (
            button
          )}
-        </HStack>
+        </div>
      </Stack>
    </div>
  );
--- a/packages/nicolium/src/pages/settings/edit-filter.tsx
+++ b/packages/nicolium/src/pages/settings/edit-filter.tsx
@@ -9,7 +9,6 @@ import Column from '@/components/ui/column';
 import Form from '@/components/ui/form';
 import FormActions from '@/components/ui/form-actions';
 import FormGroup from '@/components/ui/form-group';
-import HStack from '@/components/ui/hstack';
 import Input from '@/components/ui/input';
 import Select from '@/components/ui/select';
 import Stack from '@/components/ui/stack';
@@ -64,7 +63,7 @@ const FilterField: StreamfieldComponent<IFilterField> = ({ value, onChange }) =>
    };

  return (
-    <HStack space={2} grow>
+    <div className='flex flex-grow gap-2'>
      <Input
        type='text'
        outerClassName='w-2/5 grow'
@@ -72,14 +71,14 @@ const FilterField: StreamfieldComponent<IFilterField> = ({ value, onChange }) =>
        onChange={handleChange('keyword')}
        placeholder={intl.formatMessage(messages.keyword)}
      />
-      <HStack alignItems='center' space={2}>
+      <div className='flex items-center gap-2'>
        <Toggle checked={value.whole_word} onChange={handleChange('whole_word')} />

        <Text tag='span' theme='muted'>
          <FormattedMessage id='column.filters.whole_word' defaultMessage='Whole word' />
        </Text>
-      </HStack>
-    </HStack>
+      </div>
+    </div>
  );
 };

--- a/packages/nicolium/src/pages/settings/edit-profile.tsx
+++ b/packages/nicolium/src/pages/settings/edit-profile.tsx
@@ -12,7 +12,6 @@ import Column from '@/components/ui/column';
 import Form from '@/components/ui/form';
 import FormActions from '@/components/ui/form-actions';
 import FormGroup from '@/components/ui/form-group';
-import HStack from '@/components/ui/hstack';
 import Input from '@/components/ui/input';
 import Streamfield from '@/components/ui/streamfield';
 import Textarea from '@/components/ui/textarea';
@@ -230,7 +229,7 @@ const ProfileField: StreamfieldComponent<AccountCredentialsField> = ({
    };

  return (
-    <HStack space={2} grow>
+    <div className='flex flex-grow gap-2'>
      <Input
        type='text'
        outerClassName='w-2/5 grow'
@@ -265,7 +264,7 @@ const ProfileField: StreamfieldComponent<AccountCredentialsField> = ({
          if (field) field.draggable = true;
        }}
      />
-    </HStack>
+    </div>
  );
 };

--- a/packages/nicolium/src/pages/status-lists/events.tsx
+++ b/packages/nicolium/src/pages/status-lists/events.tsx
@@ -7,7 +7,6 @@ import EventPreview from '@/components/statuses/event-preview';
 import Button from '@/components/ui/button';
 import Card, { CardBody, CardHeader, CardTitle } from '@/components/ui/card';
 import Column from '@/components/ui/column';
-import HStack from '@/components/ui/hstack';
 import Icon from '@/components/ui/icon';
 import PlaceholderEventPreview from '@/features/placeholder/components/placeholder-event-preview';
 import { useStatus } from '@/queries/statuses/use-status';
@@ -109,14 +108,14 @@ const EventsPage = () => {

  return (
    <Column label={intl.formatMessage(messages.title)}>
-      <HStack className='mb-2' space={2} justifyContent='between'>
+      <div className='mb-2 flex justify-between gap-2'>
        <CardTitle
          title={<FormattedMessage id='events.recent_events' defaultMessage='Recent events' />}
        />
        <Button className='ml-auto xl:hidden' theme='primary' size='sm' to='/events/new'>
          <FormattedMessage id='events.create_event' defaultMessage='Create event' />
        </Button>
-      </HStack>
+      </div>
      <CardBody className='mb-2'>
        <EventCarousel
          statusIds={recentEvents}
--- a/packages/nicolium/src/pages/status-lists/interaction-requests.tsx
+++ b/packages/nicolium/src/pages/status-lists/interaction-requests.tsx
@@ -11,7 +11,6 @@ import ScrollableList from '@/components/scrollable-list';
 import StatusContent from '@/components/statuses/status-content';
 import Button from '@/components/ui/button';
 import Column from '@/components/ui/column';
-import HStack from '@/components/ui/hstack';
 import Stack from '@/components/ui/stack';
 import Text from '@/components/ui/text';
 import AccountContainer from '@/containers/account-container';
@@ -188,7 +187,7 @@ const InteractionRequest: React.FC<IInteractionRequest> = ({
  });

  const actions = (
-    <HStack space={2}>
+    <div className='flex gap-2'>
      <Button
        theme='secondary'
        size='sm'
@@ -205,7 +204,7 @@ const InteractionRequest: React.FC<IInteractionRequest> = ({
          handleReject();
        }}
      />
-    </HStack>
+    </div>
  );

  const handleMoveUp = () => {
@@ -230,7 +229,7 @@ const InteractionRequest: React.FC<IInteractionRequest> = ({
      <div className='focusable p-4'>
        <Stack space={2}>
          <div>
-            <HStack alignItems='center' space={3}>
+            <div className='flex items-center gap-3'>
              <div className='flex justify-end' style={{ flexBasis: avatarSize }}>
                <Icon
                  src={icons[interactionRequest.type]}
@@ -256,7 +255,7 @@ const InteractionRequest: React.FC<IInteractionRequest> = ({
                  </Text>
                </div>
              )}
-            </HStack>
+            </div>
          </div>

          {interactionRequest.status_id && (
--- a/packages/nicolium/src/pages/timelines/landing-timeline.tsx
+++ b/packages/nicolium/src/pages/timelines/landing-timeline.tsx
@@ -7,7 +7,6 @@ import Markup from '@/components/markup';
 import { ParsedContent } from '@/components/statuses/parsed-content';
 import Button from '@/components/ui/button';
 import Column from '@/components/ui/column';
-import HStack from '@/components/ui/hstack';
 import Stack from '@/components/ui/stack';
 import { useInstance } from '@/hooks/use-instance';
 import { useRegistrationStatus } from '@/hooks/use-registration-status';
@@ -64,7 +63,7 @@ const LandingTimelinePage = () => {
        <SiteBanner />
      </div>

-      <HStack className='mb-4 lg:hidden' justifyContent='end' space={4}>
+      <div className='mb-4 flex justify-end gap-4 lg:hidden'>
        <Button theme='tertiary' to='/login'>
          <FormattedMessage id='account.login' defaultMessage='Log in' />
        </Button>
@@ -73,7 +72,7 @@ const LandingTimelinePage = () => {
            <FormattedMessage id='account.register' defaultMessage='Sign up' />
          </Button>
        )}
-      </HStack>
+      </div>

      {timelineEnabled && !isError ? (
        <PublicTimelineColumn
--- a/packages/nicolium/src/pages/timelines/remote-timeline.tsx
+++ b/packages/nicolium/src/pages/timelines/remote-timeline.tsx
@@ -4,7 +4,6 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';

 import { PublicTimelineColumn } from '@/columns/timeline';
 import Column from '@/components/ui/column';
-import HStack from '@/components/ui/hstack';
 import IconButton from '@/components/ui/icon-button';
 import Text from '@/components/ui/text';
 import PinnedHostsPicker from '@/features/remote-timeline/components/pinned-hosts-picker';
@@ -35,7 +34,7 @@ const RemoteTimelinePage: React.FC = () => {
      {instance && <PinnedHostsPicker host={instance} />}

      {!pinned && (
-        <HStack className='mb-4 px-2' space={2}>
+        <div className='mb-4 flex gap-2 px-2'>
          <IconButton
            className='text-gray-400 hover:text-gray-600'
            iconClassName='h-5 w-5'
@@ -50,7 +49,7 @@ const RemoteTimelinePage: React.FC = () => {
              values={{ instance }}
            />
          </Text>
-        </HStack>
+        </div>
      )}

      <PublicTimelineColumn
--- a/packages/nicolium/src/pages/utils/landing.tsx
+++ b/packages/nicolium/src/pages/utils/landing.tsx
@@ -4,7 +4,6 @@ import { FormattedMessage } from 'react-intl';
 import Button from '@/components/ui/button';
 import Card, { CardTitle } from '@/components/ui/card';
 import Column from '@/components/ui/column';
-import HStack from '@/components/ui/hstack';
 import Stack from '@/components/ui/stack';
 import Text from '@/components/ui/text';
 import LinkFooter from '@/features/ui/components/link-footer';
@@ -25,14 +24,14 @@ const LandingPage = () => (
            defaultMessage='Nicolium is a feature-rich Fediverse web client.'
          />
        </Text>
-        <HStack justifyContent='end' space={4}>
+        <div className='flex justify-end gap-4'>
          <Button href={sourceCode.url}>
            <FormattedMessage id='landing.source_code' defaultMessage='Source code' />
          </Button>
          <Button to='/login/external' theme='primary'>
            <FormattedMessage id='landing.sign_in' defaultMessage='Sign in' />
          </Button>
-        </HStack>
+        </div>
        <Card variant='rounded'>
          <CardTitle
            title={