feat(cat-voices): profile app size (#3736)

* feat(cat-voices): svg vector graphics compiler (#3715)

* feat: precompile SVG assets

* feat: Convert images to WebP

* fix(cat-voices): compile svg to binary format (#3728)

* compile svg to binary format

* refactor

* feat(cat-voices): Add precompressed web files and Caddy configuration (#3719)

* feat: Add precompressed web files and Caddy configuration

* fix Caddy config

* fix

* fix

* fix

* refactor

* add 'precompressed' to project dictionary

* Update catalyst_voices/module.cue

Co-authored-by: Dominik Toton <[email protected]>

* refactor Caddy config

---------

Co-authored-by: Dominik Toton <[email protected]>

---------

Co-authored-by: Dominik Toton <[email protected]>

Author: bstolinski

.config/dictionaries/project.dic

@@ -278,6 +278,7 @@ postcss
 Pozhylenkov
 Precache
 Precertificate
+precompressed
 preprod
 proguard
 projectcatalyst

catalyst_voices/Caddyfile

@@ -5,14 +5,20 @@
 http://:8080 {
 	root * /app
 
-	handle /healthz {
-		respond `{"status":"ok"}` 200
-	}
-
-	handle {
-		try_files {path} /index.html
-		file_server
-	}
+    # Compress on-the-fly if not precompressed
+    encode
+
+    handle /healthz {
+        respond `{"status":"ok"}` 200
+    }
+
+    handle {
+        try_files {path} /index.html
+        file_server {
+            # default order br zstd gzip
+            precompressed
+        }
+    }
 
 	header {
 		Cross-Origin-Opener-Policy "same-origin"

catalyst_voices/Earthfile

@@ -128,10 +128,12 @@ build-web:
         --SENTRY_ORG='iohk-j4' \
         --SENTRY_PROJECT='catalyst-voices' \
         --WASM=true
-    
+
     # Version web assets with content-based MD5 hashes for cache busting
     RUN dart run /frontend/scripts/version_web_assets/version_web_assets.dart --build-dir=$WORKDIR/build/web --wasm=true
-    
+
+    DO flutter-ci+COMPRESS_WEB_FILES
+
     SAVE ARTIFACT --keep-ts web
 
 package:

catalyst_voices/apps/voices/lib/common/ext/account_role_ext.dart

@@ -6,9 +6,9 @@ import 'package:flutter/material.dart';
 extension AccountRoleExt on AccountRole {
   SvgGenImage get icon {
     return switch (this) {
-      AccountRole.voter => VoicesAssets.images.roleVoter,
-      AccountRole.drep => VoicesAssets.images.roleDrep,
-      AccountRole.proposer => VoicesAssets.images.roleProposer,
+      AccountRole.voter => VoicesAssets.images.svg.roleVoter,
+      AccountRole.drep => VoicesAssets.images.svg.roleDrep,
+      AccountRole.proposer => VoicesAssets.images.svg.roleProposer,
     };
   }
 

catalyst_voices/apps/voices/lib/pages/registration/pictures/base_profile_picture.dart

@@ -15,7 +15,7 @@ class BaseProfilePicture extends StatelessWidget {
     return TaskPicture(
       child: TaskPictureIconBox(
         type: type,
-        child: VoicesAssets.images.createBaseProfile.buildIcon(
+        child: VoicesAssets.images.svg.createBaseProfile.buildIcon(
           allowSize: false,
         ),
       ),

catalyst_voices/apps/voices/lib/pages/registration/pictures/keychain_picture.dart

@@ -15,7 +15,7 @@ class KeychainPicture extends StatelessWidget {
     return TaskPicture(
       child: TaskPictureIconBox(
         type: type,
-        child: VoicesAssets.images.keychain.buildIcon(allowSize: false),
+        child: VoicesAssets.images.svg.keychain.buildIcon(allowSize: false),
       ),
     );
   }

catalyst_voices/apps/voices/lib/pages/registration/pictures/keychain_with_password_picture.dart

@@ -13,7 +13,7 @@ class KeychainWithPasswordPicture extends StatelessWidget {
         child: Stack(
           alignment: Alignment.center,
           children: [
-            VoicesAssets.images.keychain.buildIcon(allowSize: false),
+            VoicesAssets.images.svg.keychain.buildIcon(allowSize: false),
             Align(
               alignment: const Alignment(0.52, -0.4),
               child: VoicesAssets.icons.lockClosed.buildIcon(),

catalyst_voices/apps/voices/lib/pages/voting/widgets/voting_list/voting_list_ballot.dart

@@ -76,7 +76,7 @@ class _VotingListBallotEmptyState extends StatelessWidget {
     return Align(
       alignment: const Alignment(0, -0.3),
       child: EmptyState(
-        image: VoicesAssets.images.noVotes.buildPicture(),
+        image: VoicesAssets.images.svg.noVotes.buildPicture(),
         title: Text(_buildTitleParts(context).join('\n')),
         constraints: const BoxConstraints(maxWidth: 236),
       ),

catalyst_voices/apps/voices/lib/widgets/common/resizable_box_parent.dart

@@ -103,7 +103,7 @@ class _ResizableBoxState extends State<_ResizableBox> {
                 }
               });
             },
-            child: VoicesAssets.images.dragger.buildIcon(size: 15),
+            child: VoicesAssets.images.svg.dragger.buildIcon(size: 15),
           ),
         ),
       ],

catalyst_voices/apps/voices/lib/widgets/empty_state/specialized/proposals_pagination_empty_state.dart

@@ -33,7 +33,7 @@ class ProposalsPaginationEmptyState extends StatelessWidget {
               ? Text(context.l10n.tryDifferentSearch)
               : Text(context.l10n.discoverySpaceEmptyProposals),
           image: VoicesImagesScheme(
-            image: VoicesAssets.images.noProposalForeground.buildPicture(),
+            image: VoicesAssets.images.svg.noProposalForeground.buildPicture(),
             background: Container(
               height: 180,
               decoration: BoxDecoration(