redesign for settings page

frontend/pweb/lib/pages/roles/widgets/actions.dart

@@ -0,0 +1,28 @@
+import 'package:flutter/material.dart';
+
+
+class RolesActions extends StatelessWidget {
+  final bool canCreate;
+  final VoidCallback onCreateRole;
+  final String createLabel;
+
+  const RolesActions({
+    super.key,
+    required this.canCreate,
+    required this.onCreateRole,
+    required this.createLabel,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    if (!canCreate) return const SizedBox.shrink();
+    return Align(
+      alignment: Alignment.centerLeft,
+      child: ElevatedButton.icon(
+        onPressed: onCreateRole,
+        icon: const Icon(Icons.add),
+        label: Text(createLabel),
+      ),
+    );
+  }
+}

frontend/pweb/lib/pages/roles/widgets/empty_state.dart

@@ -0,0 +1,25 @@
+import 'package:flutter/material.dart';
+
+
+class RolesEmptyState extends StatelessWidget {
+  final String label;
+
+  const RolesEmptyState({
+    super.key,
+    required this.label,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    return Center(
+      child: Padding(
+        padding: const EdgeInsets.symmetric(vertical: 32),
+        child: Text(
+          label,
+          style: theme.textTheme.bodyMedium,
+        ),
+      ),
+    );
+  }
+}

frontend/pweb/lib/pages/roles/widgets/header.dart

@@ -0,0 +1,55 @@
+import 'package:flutter/material.dart';
+
+import 'package:pweb/generated/i18n/app_localizations.dart';
+
+
+class RolesHeader extends StatelessWidget {
+  final String title;
+  final String subtitle;
+  final VoidCallback? onBack;
+
+  const RolesHeader({
+    super.key,
+    required this.title,
+    required this.subtitle,
+    this.onBack,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    final loc = AppLocalizations.of(context)!;
+    return Row(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        if (onBack != null) ...[
+          IconButton(
+            icon: const Icon(Icons.arrow_back),
+            onPressed: onBack,
+            tooltip: loc.back,
+            color: theme.colorScheme.primary,
+          ),
+          const SizedBox(width: 8),
+        ],
+        Expanded(
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Text(
+                title,
+                style: theme.textTheme.headlineSmall?.copyWith(fontWeight: FontWeight.w600),
+              ),
+              const SizedBox(height: 6),
+              Text(
+                subtitle,
+                style: theme.textTheme.bodyMedium?.copyWith(
+                  color: theme.colorScheme.onSurfaceVariant,
+                ),
+              ),
+            ],
+          ),
+        ),
+      ],
+    );
+  }
+}

frontend/pweb/lib/pages/roles/widgets/list.dart

@@ -0,0 +1,58 @@
+import 'package:flutter/material.dart';
+
+import 'package:pshared/models/permissions/descriptions/role.dart';
+
+import 'package:pweb/models/state/visibility.dart';
+import 'package:pweb/pages/roles/widgets/empty_state.dart';
+import 'package:pweb/pages/roles/widgets/role_card.dart';
+
+
+class RolesList extends StatelessWidget {
+  final List<RoleDescription> roles;
+  final VisibilityState Function(RoleDescription role) canCopy;
+  final VisibilityState Function(RoleDescription role) canDelete;
+  final VisibilityState Function(RoleDescription role) canManagePolicies;
+  final String emptyLabel;
+  final int Function(RoleDescription role) policiesCount;
+  final ValueChanged<RoleDescription> onCopy;
+  final ValueChanged<RoleDescription> onDelete;
+  final ValueChanged<RoleDescription> onManagePolicies;
+
+  const RolesList({
+    super.key,
+    required this.roles,
+    required this.canCopy,
+    required this.canDelete,
+    required this.canManagePolicies,
+    required this.emptyLabel,
+    required this.policiesCount,
+    required this.onCopy,
+    required this.onDelete,
+    required this.onManagePolicies,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    if (roles.isEmpty) {
+      return RolesEmptyState(label: emptyLabel);
+    }
+
+    return Column(
+      children: roles.map((role) {
+        return Padding(
+          padding: const EdgeInsets.only(bottom: 12),
+          child: RoleCard(
+            role: role,
+            policyCount: policiesCount(role),
+            canManagePolicies: canManagePolicies(role),
+            canCopy: canCopy(role),
+            canDelete: canDelete(role),
+            onCopy: () => onCopy(role),
+            onDelete: () => onDelete(role),
+            onManagePolicies: () => onManagePolicies(role),
+          ),
+        );
+      }).toList(),
+    );
+  }
+}

frontend/pweb/lib/pages/roles/widgets/role_card.dart

@@ -0,0 +1,108 @@
+import 'package:flutter/material.dart';
+
+import 'package:pshared/models/permissions/descriptions/role.dart';
+
+import 'package:pweb/models/state/visibility.dart';
+import 'package:pweb/generated/i18n/app_localizations.dart';
+
+
+class RoleCard extends StatelessWidget {
+  final RoleDescription role;
+  final int policyCount;
+  final VisibilityState canManagePolicies;
+  final VisibilityState canCopy;
+  final VisibilityState canDelete;
+  final VoidCallback onCopy;
+  final VoidCallback onDelete;
+  final VoidCallback onManagePolicies;
+
+  const RoleCard({
+    super.key,
+    required this.role,
+    required this.policyCount,
+    required this.canManagePolicies,
+    required this.canCopy,
+    required this.canDelete,
+    required this.onCopy,
+    required this.onDelete,
+    required this.onManagePolicies,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final loc = AppLocalizations.of(context)!;
+    final theme = Theme.of(context);
+
+    return Card(
+      elevation: 0,
+      color: theme.colorScheme.surfaceContainerHighest.withAlpha(40),
+      child: Padding(
+        padding: const EdgeInsets.all(16),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Row(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                const Icon(Icons.security_outlined),
+                const SizedBox(width: 12),
+                Expanded(
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      Text(
+                        role.name,
+                        style: theme.textTheme.titleMedium?.copyWith(fontWeight: FontWeight.w600),
+                      ),
+                      if ((role.description ?? '').isNotEmpty) ...[
+                        const SizedBox(height: 4),
+                        Text(
+                          role.description!,
+                          style: theme.textTheme.bodyMedium,
+                        ),
+                      ],
+                      const SizedBox(height: 6),
+                      Text(
+                        loc.rolesPoliciesCount(policyCount),
+                        style: theme.textTheme.bodySmall?.copyWith(
+                          color: theme.colorScheme.onSurfaceVariant,
+                        ),
+                      ),
+                    ],
+                  ),
+                ),
+              ],
+            ),
+            const SizedBox(height: 12),
+            Wrap(
+              spacing: 12,
+              children: [
+                if (canManagePolicies == VisibilityState.visible)
+                  TextButton.icon(
+                    onPressed: onManagePolicies,
+                    icon: const Icon(Icons.tune, size: 18),
+                    label: Text(loc.rolesPoliciesAction),
+                  ),
+                if (canCopy == VisibilityState.visible)
+                  TextButton.icon(
+                    onPressed: onCopy,
+                    icon: const Icon(Icons.copy_outlined, size: 18),
+                    label: Text(loc.rolesCopyAction),
+                  ),
+                if (canDelete == VisibilityState.visible)
+                  TextButton.icon(
+                    onPressed: onDelete,
+                    icon: Icon(Icons.delete_outline, size: 18, color: theme.colorScheme.error),
+                    label: Text(loc.delete),
+                    style: TextButton.styleFrom(
+                      foregroundColor: theme.colorScheme.error,
+                    ),
+                  ),
+              ],
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}