Show services in Server Storage screen

lib/ui/components/storage_list_items/server_storage_list_item.dart

@@ -15,6 +15,55 @@ class ServerStorageListItem extends StatelessWidget {
   final bool showIcon;
   final bool dense;
 
+  @override
+  Widget build(final BuildContext context) => ConsumptionListItem(
+        title: 'providers.storage.disk_usage'.tr(
+          args: [
+            volume.sizeUsed.toString(),
+          ],
+        ),
+        subtitle: 'providers.storage.disk_total'.tr(
+          args: [
+            volume.sizeTotal.toString(),
+            volume.displayName,
+          ],
+        ),
+        dense: dense,
+        color: volume.root
+            ? Theme.of(context).colorScheme.primary
+            : Theme.of(context).colorScheme.secondary,
+        backgroundColor: Theme.of(context).colorScheme.surfaceVariant,
+        percentage: volume.percentage,
+        icon: Icon(
+          Icons.storage_outlined,
+          size: 24,
+          color: Theme.of(context).colorScheme.onBackground,
+        ),
+      );
+}
+
+class ConsumptionListItem extends StatelessWidget {
+  const ConsumptionListItem({
+    required this.title,
+    required this.color,
+    required this.backgroundColor,
+    required this.percentage,
+    this.subtitle,
+    this.rightSideText,
+    this.icon,
+    this.dense = false,
+    final super.key,
+  });
+
+  final String title;
+  final String? subtitle;
+  final String? rightSideText;
+  final Color color;
+  final Color backgroundColor;
+  final double percentage;
+  final Widget? icon;
+  final bool dense;
+
   @override
   Widget build(final BuildContext context) {
     final TextStyle? titleStyle = dense
@@ -26,45 +75,46 @@ class ServerStorageListItem extends StatelessWidget {
         : Theme.of(context).textTheme.bodyMedium;
 
     return Row(
+      crossAxisAlignment: CrossAxisAlignment.center,
       children: [
-        if (showIcon)
+        if (icon != null) icon!,
-          Icon(
+        if (icon != null) const SizedBox(width: 16),
-            Icons.storage_outlined,
-            size: 24,
-            color: Theme.of(context).colorScheme.onBackground,
-          ),
-        if (showIcon) const SizedBox(width: 16),
         Expanded(
           child: Column(
             crossAxisAlignment: CrossAxisAlignment.start,
             children: [
-              Text(
+              Row(
-                'providers.storage.disk_usage'.tr(
+                mainAxisAlignment: rightSideText != null
-                  args: [
+                    ? MainAxisAlignment.spaceBetween
-                    volume.sizeUsed.toString(),
+                    : MainAxisAlignment.start,
-                  ],
+                children: [
-                ),
+                  Text(
-                style: titleStyle,
+                    title,
+                    style: titleStyle,
+                    textAlign: TextAlign.start,
+                  ),
+                  if (rightSideText != null)
+                    Text(
+                      rightSideText!,
+                      style: Theme.of(context).textTheme.bodyMedium,
+                      textAlign: TextAlign.end,
+                    ),
+                ],
               ),
               const SizedBox(height: 4),
               BrandLinearIndicator(
-                value: volume.percentage,
+                value: percentage,
-                color: volume.root
+                color: color,
-                    ? Theme.of(context).colorScheme.primary
+                backgroundColor: backgroundColor,
-                    : Theme.of(context).colorScheme.secondary,
+                height: dense ? 8.0 : 14.0,
-                backgroundColor: Theme.of(context).colorScheme.surfaceVariant,
-                height: 14.0,
               ),
               const SizedBox(height: 4),
-              Text(
+              if (subtitle != null)
-                'providers.storage.disk_total'.tr(
+                Text(
-                  args: [
+                  subtitle!,
-                    volume.sizeTotal.toString(),
+                  style: subtitleStyle,
-                    volume.displayName,
+                  textAlign: TextAlign.start,
-                  ],
                 ),
-                style: subtitleStyle,
-              ),
             ],
           ),
         ),

lib/ui/components/storage_list_items/service_migration_list_item.dart

@@ -20,13 +20,47 @@ class ServiceMigrationListItem extends StatelessWidget {
   @override
   Widget build(final BuildContext context) => Column(
         children: [
-          _headerRow(context),
+          ServiceConsumptionTitle(service: service),
           const SizedBox(height: 16),
           ..._radioRows(context),
         ],
       );
 
-  Widget _headerRow(final BuildContext context) => SizedBox(
+  List<Widget> _radioRows(final BuildContext context) {
+    final List<Widget> volumeRows = [];
+
+    for (final DiskVolume volume in diskStatus.diskVolumes) {
+      volumeRows.add(
+        RadioListTile(
+          title: Text(
+            volume.displayName,
+          ),
+          contentPadding: EdgeInsets.zero,
+          activeColor: Theme.of(context).colorScheme.secondary,
+          dense: true,
+          value: volume.name,
+          groupValue: selectedVolume,
+          onChanged: (final value) {
+            onChange(value, service.id);
+          },
+        ),
+      );
+    }
+
+    return volumeRows;
+  }
+}
+
+class ServiceConsumptionTitle extends StatelessWidget {
+  const ServiceConsumptionTitle({
+    required this.service,
+    final super.key,
+  });
+
+  final Service service;
+
+  @override
+  Widget build(final BuildContext context) => SizedBox(
         height: 24,
         child: Padding(
           padding: const EdgeInsets.symmetric(horizontal: 8),
@@ -63,28 +97,4 @@ class ServiceMigrationListItem extends StatelessWidget {
           ),
         ),
       );
-
-  List<Widget> _radioRows(final BuildContext context) {
-    final List<Widget> volumeRows = [];
-
-    for (final DiskVolume volume in diskStatus.diskVolumes) {
-      volumeRows.add(
-        RadioListTile(
-          title: Text(
-            volume.displayName,
-          ),
-          contentPadding: EdgeInsets.zero,
-          activeColor: Theme.of(context).colorScheme.secondary,
-          dense: true,
-          value: volume.name,
-          groupValue: selectedVolume,
-          onChanged: (final value) {
-            onChange(value, service.id);
-          },
-        ),
-      );
-    }
-
-    return volumeRows;
-  }
 }

lib/ui/pages/server_storage/server_storage.dart

@@ -1,6 +1,9 @@
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_svg/svg.dart';
 import 'package:selfprivacy/logic/cubit/server_installation/server_installation_cubit.dart';
+import 'package:selfprivacy/logic/cubit/services/services_cubit.dart';
+import 'package:selfprivacy/logic/models/service.dart';
 import 'package:selfprivacy/ui/components/brand_button/outlined_button.dart';
 import 'package:selfprivacy/ui/components/brand_hero_screen/brand_hero_screen.dart';
 import 'package:selfprivacy/logic/models/disk_status.dart';
@@ -23,6 +26,9 @@ class _ServerStoragePageState extends State<ServerStoragePage> {
     final bool isReady = context.watch<ServerInstallationCubit>().state
         is ServerInstallationFinished;
 
+    final List<Service> services =
+        context.watch<ServicesCubit>().state.services;
+
     if (!isReady) {
       return BrandHeroScreen(
         hasBackButton: true,
@@ -39,10 +45,17 @@ class _ServerStoragePageState extends State<ServerStoragePage> {
         ...widget.diskStatus.diskVolumes
             .map(
               (final volume) => Column(
+                mainAxisSize: MainAxisSize.min,
                 children: [
                   ServerStorageSection(
                     volume: volume,
                     diskStatus: widget.diskStatus,
+                    services: services
+                        .where(
+                          (final service) =>
+                              service.storageUsage.volume == volume.name,
+                        )
+                        .toList(),
                   ),
                   const SizedBox(height: 16),
                   const Divider(),
@@ -61,18 +74,30 @@ class ServerStorageSection extends StatelessWidget {
   const ServerStorageSection({
     required this.volume,
     required this.diskStatus,
+    required this.services,
     final super.key,
   });
 
   final DiskVolume volume;
   final DiskStatus diskStatus;
+  final List<Service> services;
 
   @override
   Widget build(final BuildContext context) => Column(
+        mainAxisSize: MainAxisSize.min,
         children: [
           ServerStorageListItem(
             volume: volume,
           ),
+          const SizedBox(height: 16),
+          ...services
+              .map(
+                (final service) => ServerConsumptionListTile(
+                  service: service,
+                  volume: volume,
+                ),
+              )
+              .toList(),
           if (volume.isResizable) ...[
             const SizedBox(height: 16),
             BrandOutlinedButton(
@@ -90,3 +115,35 @@ class ServerStorageSection extends StatelessWidget {
         ],
       );
 }
+
+class ServerConsumptionListTile extends StatelessWidget {
+  const ServerConsumptionListTile({
+    required this.service,
+    required this.volume,
+    final super.key,
+  });
+
+  final Service service;
+  final DiskVolume volume;
+
+  @override
+  Widget build(final BuildContext context) => Padding(
+        padding: const EdgeInsets.symmetric(vertical: 8),
+        child: ConsumptionListItem(
+          title: service.displayName,
+          icon: SvgPicture.string(
+            service.svgIcon,
+            width: 24.0,
+            height: 24.0,
+            color: Theme.of(context).colorScheme.onBackground,
+          ),
+          rightSideText: service.storageUsage.used.toString(),
+          percentage: service.storageUsage.used.byte / volume.sizeTotal.byte,
+          color: volume.root
+              ? Theme.of(context).colorScheme.primary
+              : Theme.of(context).colorScheme.secondary,
+          backgroundColor: Theme.of(context).colorScheme.surfaceVariant,
+          dense: true,
+        ),
+      );
+}