bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'fork' into frontend-rw

Browse source 
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak 2024-07-02 19:03:11 +02:00
commit d01c3a1eea
4 changed files with 42 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/list.tsx
View file

@ -133,4 +133,4 @@ const ListItem: React.FC<IListItem> = ({ className, label, hint, children, to, h
);
};
export { List as default, ListItem };
export { List as default, type IListItem, ListItem };

8
src/components/radio.tsx
View file

@ -1,6 +1,6 @@
import React from 'react';
import List, { ListItem } from './list';
import List, { type IListItem, ListItem } from './list';
interface IRadioGroup {
onChange: React.ChangeEventHandler;
@ -15,7 +15,7 @@ const RadioGroup = ({ onChange, children }: IRadioGroup) => {
return <List>{childrenWithProps}</List>;
};
interface IRadioItem {
interface IRadioItem extends IListItem {
label: React.ReactNode;
hint?: React.ReactNode;
value: string;
@ -23,8 +23,8 @@ interface IRadioItem {
onChange?: React.ChangeEventHandler;
}
const RadioItem: React.FC<IRadioItem> = ({ label, hint, checked = false, onChange, value }) => (
<ListItem label={label} hint={hint}>
const RadioItem: React.FC<IRadioItem> = ({ label, hint, checked = false, onChange, value, ...props }) => (
<ListItem label={label} hint={hint} {...props}>
<input
type='radio'
checked={checked}

4
src/features/directory/components/account-card.tsx
View file

@ -50,12 +50,12 @@ const AccountCard: React.FC<IAccountCard> = ({ id }) => {
<HoverRefWrapper key={account.id} accountId={account.id} inline>
<Link to={`/@${account.acct}`} title={account.acct}>
<Avatar src={account.avatar} className='!absolute bottom-0 left-3 translate-y-1/2 bg-white ring-2 ring-white dark:bg-primary-900 dark:ring-primary-900' size={42} />
<Avatar src={account.avatar} className='!absolute bottom-0 left-3 translate-y-1/2 bg-white ring-2 ring-white dark:bg-primary-900 dark:ring-primary-900' size={64} />
</Link>
</HoverRefWrapper>
</div>
<Stack space={4} className='p-3 pt-8'>
<Stack space={4} className='p-3 pt-10'>
<Account
account={account}
withAvatar={false}

65
src/features/directory/index.tsx
View file

@ -5,7 +5,8 @@ import { useLocation } from 'react-router-dom';
import { fetchDirectory, expandDirectory } from 'soapbox/actions/directory';
import LoadMore from 'soapbox/components/load-more';
import { Column, RadioButton, Stack, Text } from 'soapbox/components/ui';
import { RadioGroup, RadioItem } from 'soapbox/components/radio';
import { CardTitle, Column, Stack } from 'soapbox/components/ui';
import { useAppDispatch, useAppSelector, useFeatures, useInstance } from 'soapbox/hooks';
import AccountCard from './components/account-card';
@ -51,37 +52,41 @@ const Directory = () => {
return (
<Column label={intl.formatMessage(messages.title)}>
<Stack space={4}>
<div className='grid grid-cols-2 gap-2'>
<div>
<Text weight='medium'>
<FormattedMessage id='directory.display_filter' defaultMessage='Display filter' />
</Text>
<fieldset className='mt-3'>
<legend className='sr-only'>
<FormattedMessage id='directory.display_filter' defaultMessage='Display filter' />
</legend>
<div className='space-y-2'>
<RadioButton name='order' value='active' label={intl.formatMessage(messages.recentlyActive)} checked={order === 'active'} onChange={handleChangeOrder} />
<RadioButton name='order' value='new' label={intl.formatMessage(messages.newArrivals)} checked={order === 'new'} onChange={handleChangeOrder} />
</div>
</fieldset>
</div>
<div className='grid grid-cols-1 gap-2 md:grid-cols-2'>
<Stack space={2}>
<CardTitle title={<FormattedMessage id='directory.display_filter' defaultMessage='Display filter' />} />
<RadioGroup onChange={handleChangeOrder}>
<RadioItem
label={intl.formatMessage(messages.recentlyActive)}
checked={order === 'active'}
value='active'
/>
<RadioItem
label={intl.formatMessage(messages.newArrivals)}
checked={order === 'new'}
value='new'
/>
</RadioGroup>
</Stack>
{features.federating && (
<div>
<Text weight='medium'>
<FormattedMessage id='directory.fediverse_filter' defaultMessage='Fediverse filter' />
</Text>
<fieldset className='mt-3'>
<legend className='sr-only'>
<FormattedMessage id='directory.fediverse_filter' defaultMessage='Fediverse filter' />
</legend>
<div className='space-y-2'>
<RadioButton name='local' value='1' label={intl.formatMessage(messages.local, { domain: instance.title })} checked={local} onChange={handleChangeLocal} />
<RadioButton name='local' value='0' label={intl.formatMessage(messages.federated)} checked={!local} onChange={handleChangeLocal} />
</div>
</fieldset>
</div>
<Stack space={2}>
<CardTitle title={<FormattedMessage id='directory.fediverse_filter' defaultMessage='Fediverse filter' />} />
<RadioGroup onChange={handleChangeLocal}>
<RadioItem
label={intl.formatMessage(messages.local, { domain: instance.title })}
checked={local}
value='1'
/>
<RadioItem
label={intl.formatMessage(messages.federated)}
checked={!local}
value='0'
/>
</RadioGroup>
</Stack>
)}
</div>