heaven/vojo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style(settings): flatten the permissions page into Dawn sections and swap the peek checkmarks for icons

Browse source
This commit is contained in:
heaven 2026-06-04 12:26:30 +03:00
parent fa17029a45
commit e06ab508f9
2 changed files with 105 additions and 135 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

180
src/app/features/common-settings/permissions/PermissionGroups.tsx
View file

@ -4,9 +4,8 @@ import { Badge, Box, Button, Chip, config, Icon, Icons, Menu, Spinner, Text } fr
import { useTranslation } from 'react-i18next';
import produce from 'immer';
import type { StateEvents } from 'matrix-js-sdk';
import { SequenceCard } from '../../../components/sequence-card';
import { SequenceCardStyle } from '../styles.css';
import { SettingTile } from '../../../components/setting-tile';
import { SettingsSection } from '../../settings/SettingsSection';
import {
applyPermissionPower,
getPermissionPower,
@ -120,53 +119,43 @@ export function PermissionGroups({
const powerChanges = value !== power;
return (
<Box direction="Column" gap="100">
<Text size="L400">{t('RoomSettings.users')}</Text>
<SequenceCard
variant="SurfaceVariant"
className={SequenceCardStyle}
direction="Column"
gap="400"
>
<SettingTile
title={t('RoomSettings.default_power')}
description={t('RoomSettings.default_power_desc')}
after={
<PowerSwitcher
powerLevelTags={powerLevelTags}
value={value}
onChange={(v) => handleChangePermission(USER_DEFAULT_LOCATION, v, power)}
>
{(handleOpen, opened) => (
<Chip
variant={powerChanges ? 'Success' : 'Secondary'}
outlined={powerChanges}
fill="Soft"
radii="Pill"
aria-selected={opened}
disabled={!canEdit || applyingChanges}
after={
powerChanges && (
<Badge size="200" variant="Success" fill="Solid" radii="Pill" />
)
}
before={
canEdit && (
<Icon size="50" src={opened ? Icons.ChevronTop : Icons.ChevronBottom} />
)
}
onClick={handleOpen}
>
<Text size="B300" truncate>
{tag.name}
</Text>
</Chip>
)}
</PowerSwitcher>
}
/>
</SequenceCard>
</Box>
<SettingsSection label={t('RoomSettings.users')}>
<SettingTile
title={t('RoomSettings.default_power')}
description={t('RoomSettings.default_power_desc')}
after={
<PowerSwitcher
powerLevelTags={powerLevelTags}
value={value}
onChange={(v) => handleChangePermission(USER_DEFAULT_LOCATION, v, power)}
>
{(handleOpen, opened) => (
<Chip
variant={powerChanges ? 'Success' : 'Secondary'}
outlined={powerChanges}
fill="Soft"
radii="Pill"
aria-selected={opened}
disabled={!canEdit || applyingChanges}
after={
powerChanges && <Badge size="200" variant="Success" fill="Solid" radii="Pill" />
}
before={
canEdit && (
<Icon size="50" src={opened ? Icons.ChevronTop : Icons.ChevronBottom} />
)
}
onClick={handleOpen}
>
<Text size="B300" truncate>
{tag.name}
</Text>
</Chip>
)}
</PowerSwitcher>
}
/>
</SettingsSection>
);
};
@ -174,8 +163,7 @@ export function PermissionGroups({
<>
{renderUserGroup()}
{permissionGroups.map((group, groupIndex) => (
<Box key={groupIndex} direction="Column" gap="100">
<Text size="L400">{group.name}</Text>
<SettingsSection key={groupIndex} label={group.name}>
{group.items.map((item, itemIndex) => {
const power = getPermissionPower(powerLevels, item.location);
const powerUpdate = permissionUpdate.get(item.location);
@ -185,60 +173,48 @@ export function PermissionGroups({
const powerChanges = value !== power;
return (
<SequenceCard
<SettingTile
key={itemIndex}
variant="SurfaceVariant"
className={SequenceCardStyle}
direction="Column"
gap="400"
>
<SettingTile
title={item.name}
description={item.description}
after={
<PowerSwitcher
powerLevelTags={powerLevelTags}
value={value}
onChange={(v) => handleChangePermission(item.location, v, power)}
>
{(handleOpen, opened) => (
<Chip
variant={powerChanges ? 'Success' : 'Secondary'}
outlined={powerChanges}
fill="Soft"
radii="Pill"
aria-selected={opened}
disabled={!canEdit || applyingChanges}
after={
powerChanges && (
<Badge size="200" variant="Success" fill="Solid" radii="Pill" />
)
}
before={
canEdit && (
<Icon
size="50"
src={opened ? Icons.ChevronTop : Icons.ChevronBottom}
/>
)
}
onClick={handleOpen}
>
<Text size="B300" truncate>
{tag.name}
</Text>
{value < maxPower && (
<Text size="T200">{t('RoomSettings.and_above')}</Text>
)}
</Chip>
)}
</PowerSwitcher>
}
/>
</SequenceCard>
title={item.name}
description={item.description}
after={
<PowerSwitcher
powerLevelTags={powerLevelTags}
value={value}
onChange={(v) => handleChangePermission(item.location, v, power)}
>
{(handleOpen, opened) => (
<Chip
variant={powerChanges ? 'Success' : 'Secondary'}
outlined={powerChanges}
fill="Soft"
radii="Pill"
aria-selected={opened}
disabled={!canEdit || applyingChanges}
after={
powerChanges && (
<Badge size="200" variant="Success" fill="Solid" radii="Pill" />
)
}
before={
canEdit && (
<Icon size="50" src={opened ? Icons.ChevronTop : Icons.ChevronBottom} />
)
}
onClick={handleOpen}
>
<Text size="B300" truncate>
{tag.name}
</Text>
{value < maxPower && <Text size="T200">{t('RoomSettings.and_above')}</Text>}
</Chip>
)}
</PowerSwitcher>
}
/>
);
})}
</Box>
</SettingsSection>
))}
{hasChanges && (

60
src/app/features/common-settings/permissions/Powers.tsx
View file

@ -14,11 +14,12 @@ import {
toRem,
config,
color,
Icon,
Icons,
} from 'folds';
import { SequenceCard } from '../../../components/sequence-card';
import { SequenceCardStyle } from '../styles.css';
import { getPowers, usePowerLevelTags } from '../../../hooks/usePowerLevelTags';
import { SettingTile } from '../../../components/setting-tile';
import { SettingsSection } from '../../settings/SettingsSection';
import { getPermissionPower, IPowerLevels } from '../../../hooks/usePowerLevels';
import { useRoom } from '../../../hooks/useRoom';
import { PowerColorBadge, PowerIcon } from '../../../components/power';
@ -77,15 +78,20 @@ function PeekPermissions({ powerLevels, power, permissionGroups, children }: Pee
const hasPower = requiredPower <= power;
return (
<Text
key={itemIndex}
size="T200"
style={{
color: hasPower ? undefined : color.Critical.Main,
}}
>
{hasPower ? '✅' : '❌'} {item.name}
</Text>
<Box key={itemIndex} alignItems="Center" gap="200">
<Icon
size="50"
src={hasPower ? Icons.Check : Icons.Cross}
style={{
color: hasPower ? color.Success.Main : color.Surface.OnContainer,
opacity: hasPower ? 1 : 0.4,
flexShrink: 0,
}}
/>
<Text size="T200" style={{ opacity: hasPower ? 1 : 0.6 }}>
{item.name}
</Text>
</Box>
);
})}
</div>
@ -120,19 +126,12 @@ export function Powers({ powerLevels, permissionGroups, onEdit }: PowersProps) {
creatorsTag.icon && getPowerTagIconSrc(mx, useAuthentication, creatorsTag.icon);
return (
<Box direction="Column" gap="100">
<Box direction="Column" gap="700">
{creators.size > 0 && (
<SequenceCard
variant="SurfaceVariant"
className={SequenceCardStyle}
direction="Column"
gap="400"
<SettingsSection
label={t('RoomSettings.founders')}
footnote={t('RoomSettings.founders_desc')}
>
<SettingTile
title={t('RoomSettings.founders')}
description={t('RoomSettings.founders_desc')}
/>
<SettingTile>
<Box gap="200" wrap="Wrap">
<Chip
@ -148,17 +147,13 @@ export function Powers({ powerLevels, permissionGroups, onEdit }: PowersProps) {
</Chip>
</Box>
</SettingTile>
</SequenceCard>
</SettingsSection>
)}
<SequenceCard
variant="SurfaceVariant"
className={SequenceCardStyle}
direction="Column"
gap="400"
<SettingsSection
label={t('RoomSettings.power_levels')}
footnote={t('RoomSettings.power_levels_desc')}
>
<SettingTile
title={t('RoomSettings.power_levels')}
description={t('RoomSettings.power_levels_desc')}
after={
onEdit && (
<Box gap="200">
@ -175,8 +170,7 @@ export function Powers({ powerLevels, permissionGroups, onEdit }: PowersProps) {
</Box>
)
}
/>
<SettingTile>
>
<Box gap="200" wrap="Wrap">
{getPowers(powerLevelTags).map((power) => {
const tag = powerLevelTags[power];
@ -208,7 +202,7 @@ export function Powers({ powerLevels, permissionGroups, onEdit }: PowersProps) {
})}
</Box>
</SettingTile>
</SequenceCard>
</SettingsSection>
</Box>
);
}