Alpha flag for file storage settings (#6044)

## Summary
- Added "Alpha" badge to the File Storage & Sharing nav item in the
settings sidebar
- Added "Alpha" badge to the File Storage & Sharing page title
- Removed the old inline "(Alpha)" text from the Enable Group Signing
label
- Restructured all toggle cards so the switch is anchored to the right
of each row
- Tightened spacing between cards for a more compact layout
- Extended `ConfigNavItem` interface with optional `badge` and
`badgeColor` fields for reuse elsewhere
<img width="1696" height="1057" alt="image"
src="https://github.com/user-attachments/assets/77ac8276-ed65-4cae-8470-65de8f56dd74"
/>
This commit is contained in:
ConnorYoh
2026-04-01 17:18:48 +01:00
committed by GitHub
parent 74153b6deb
commit 801cc8a5f4
4 changed files with 112 additions and 85 deletions
@@ -1,5 +1,5 @@
import React, { useMemo, useState, useEffect, useCallback, useRef } from 'react';
import { Modal, Text, ActionIcon, Tooltip, Group } from '@mantine/core';
import { Badge, Modal, Text, ActionIcon, Tooltip, Group } from '@mantine/core';
import { useNavigate, useLocation } from 'react-router-dom';
import LocalIcon from '@app/components/shared/LocalIcon';
import { useConfigNavSections } from '@app/components/shared/config/configNavSections';
@@ -186,6 +186,11 @@ const AppConfigModalInner: React.FC<AppConfigModalProps> = ({ opened, onClose })
<Text size="sm" fw={500} style={{ color }}>
{item.label}
</Text>
{item.badge && (
<Badge size="xs" variant="light" color={item.badgeColor ?? 'orange'} style={{ flexShrink: 0 }}>
{item.badge}
</Badge>
)}
{showPlanWarning && (
<LocalIcon
icon="warning-rounded"
@@ -11,6 +11,8 @@ export interface ConfigNavItem {
component: React.ReactNode;
disabled?: boolean;
disabledTooltip?: string;
badge?: string;
badgeColor?: string;
}
export interface ConfigNavSection {