feat: Implemented zoom level customization

Also completed the following tasks:
  - Fixed some issues and refactored the title and toolbar
  - Added more tests

lib/application/view/application.dart

@@ -15,6 +15,7 @@ class Application extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return MaterialApp(
+      theme: AppTheme.light,
       home: const DesignPage(),
       debugShowCheckedModeBanner: false,
       onGenerateTitle: (context) => context.l10n.appName,
@@ -23,38 +24,69 @@ class Application extends StatelessWidget {
         AppLocalizations.delegate,
         GlobalMaterialLocalizations.delegate,
       ],
-      theme: ThemeData(
-        primarySwatch: Colors.blue,
-        primaryColor: Colors.white,
-        brightness: Brightness.light,
-        textTheme: GoogleFonts.ptSansTextTheme(),
-        scaffoldBackgroundColor: const Color(0XFFE4E4E4),
-        tabBarTheme: TabBarTheme(
-          labelStyle: GoogleFonts.ptSans(),
-          indicatorSize: TabBarIndicatorSize.label,
-          unselectedLabelStyle: GoogleFonts.ptSans(),
-          unselectedLabelColor: const Color(0XFF919191),
-          labelPadding: const EdgeInsets.symmetric(horizontal: 10),
-          indicator: const UnderlineTabIndicator(
-            borderSide: BorderSide(
-              color: Color(0XFF616161),
-              width: 2.5,
-            ),
+    );
+  }
+}
+
+/// Contains the app theme data.
+class AppTheme {
+  /// A default light theme of the app.
+  static ThemeData get light {
+    const inputBorder = UnderlineInputBorder(
+      borderSide: BorderSide(color: Colors.grey),
+    );
+    return ThemeData(
+      primarySwatch: Colors.blue,
+      primaryColor: Colors.white,
+      brightness: Brightness.light,
+      textTheme: GoogleFonts.ptSansTextTheme(),
+      scaffoldBackgroundColor: const Color(0XFFE4E4E4),
+      tabBarTheme: TabBarTheme(
+        labelStyle: GoogleFonts.ptSans(),
+        indicatorSize: TabBarIndicatorSize.label,
+        unselectedLabelStyle: GoogleFonts.ptSans(),
+        unselectedLabelColor: const Color(0XFF919191),
+        labelPadding: const EdgeInsets.symmetric(horizontal: 10),
+        indicator: const UnderlineTabIndicator(
+          borderSide: BorderSide(
+            color: Color(0XFF616161),
+            width: 2.5,
           ),
         ),
-        tooltipTheme: TooltipThemeData(
-          verticalOffset: 16,
-          waitDuration: const Duration(milliseconds: 1000),
-          textStyle: const TextStyle(
-            fontSize: 11,
-            color: Color(0xFF616161),
-            fontWeight: FontWeight.w400,
-          ),
-          decoration: BoxDecoration(
-            color: const Color(0XFFE4E4E4),
-            borderRadius: BorderRadius.circular(2),
-            border: Border.all(color: Colors.grey.shade400, width: .7),
-          ),
+      ),
+      popupMenuTheme: PopupMenuThemeData(
+        elevation: 1,
+        color: const Color(0XFFEDEDED),
+        textStyle: GoogleFonts.ptSans(
+          color: Colors.grey.shade800,
+          fontSize: 12,
+        ),
+        shape: RoundedRectangleBorder(
+          borderRadius: BorderRadius.circular(8),
+          side: BorderSide(color: Colors.grey.shade400, width: .5),
+        ),
+      ),
+      inputDecorationTheme: const InputDecorationTheme(
+        suffixIconColor: Colors.grey,
+        focusedBorder: inputBorder,
+        border: inputBorder,
+        isDense: true,
+      ),
+      textSelectionTheme: const TextSelectionThemeData(
+        cursorColor: Colors.black,
+      ),
+      tooltipTheme: TooltipThemeData(
+        verticalOffset: 16,
+        waitDuration: const Duration(milliseconds: 1000),
+        textStyle: const TextStyle(
+          fontSize: 11,
+          color: Color(0xFF616161),
+          fontWeight: FontWeight.w400,
+        ),
+        decoration: BoxDecoration(
+          color: const Color(0XFFE4E4E4),
+          borderRadius: BorderRadius.circular(2),
+          border: Border.all(color: Colors.grey.shade400, width: .7),
         ),
       ),
     );

lib/design/view/design_page.dart

@@ -3,10 +3,9 @@ import 'package:flutter_bloc/flutter_bloc.dart';
 
 import '../../board/board.dart';
 import '../../inspector/inspector.dart';
+import '../../titlebar/titlebar.dart';
 import '../../toolbar/toolbar.dart';
 
-part 'design_view.dart';
-
 /// {@template design_page}
 /// The main page that contains all design widgets.
 /// {@endtemplate}
@@ -22,3 +21,31 @@ class DesignPage extends StatelessWidget {
     );
   }
 }
+
+class _DesignView extends StatelessWidget {
+  const _DesignView({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: Column(
+        children: [
+          const TitleBar(),
+          Expanded(
+            child: Padding(
+              padding: const EdgeInsets.only(top: 2),
+              child: Row(
+                children: const [
+                  Toolbar(),
+                  DesignPanelContainer(),
+                  Expanded(child: DesignBoard()),
+                  PropertyInspector(),
+                ],
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/helpers/helpers.dart

@@ -1 +1,2 @@
 export 'platform/platform.dart';
+export 'widgets/widgets.dart';

lib/helpers/platform/platform_is.dart

@@ -1,3 +1,4 @@
+// coverage:ignore-file
 // ignore_for_file: public_member_api_docs
 
 import 'universal_platform_web.dart'

lib/helpers/platform/universal_platform_vm.dart

@@ -1,3 +1,4 @@
+// coverage:ignore-file
 // ignore_for_file: public_member_api_docs
 
 import 'dart:io';

lib/helpers/platform/universal_platform_web.dart

@@ -1,5 +1,5 @@
+// coverage:ignore-file
 // ignore_for_file: public_member_api_docs
-
 // ignore: avoid_web_libraries_in_flutter
 import 'dart:html' as html;
 

lib/helpers/widgets/child_wrapper.dart

@@ -0,0 +1,27 @@
+import 'package:flutter/material.dart';
+
+/// {@template child_wrapper}
+/// Wraps a [child] widget when a given [shouldWrap] condition is true.
+/// Otherwise, it will return the child widget itself.
+/// {@endtemplate}
+class ChildWrapper extends StatelessWidget {
+  /// A child widget that will wrapped if [shouldWrap] is true.
+  final Widget child;
+
+  /// Defines whether the [child] widget should be wrapped with [wrap].
+  final bool shouldWrap;
+
+  /// A callback that will wrap a [child] widget when [shouldWrap] is true;
+  final Widget Function(Widget child) wrap;
+
+  /// {@macro child_wrapper}
+  const ChildWrapper({
+    Key? key,
+    required this.wrap,
+    required this.child,
+    required this.shouldWrap,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) => shouldWrap ? wrap(child) : child;
+}

lib/helpers/widgets/widgets.dart

@@ -0,0 +1 @@
+export 'child_wrapper.dart';

lib/l10n/arb/app_en.arb

@@ -12,5 +12,37 @@
         "type": "String"
       }
     }
+  },
+  "boardViewTypeLabel": "{name, select, design {Design} prototype {Prototype}}",
+  "@boardViewTypeLabel": {
+    "description": "Shown on the title bar tabs",
+    "placeholders": {
+      "name": {
+        "type": "String"
+      }
+    }
+  },
+  "formattedZoomLevel": "{level}",
+  "@formattedZoomLevel": {
+    "description": "Shown on title bar as a zoom level in percentage",
+    "placeholders": {
+      "level": {
+        "format": "percentPattern",
+        "type": "num"
+      }
+    }
+  },
+  "formattedDecimalZoomLevel": "{level}",
+  "@formattedDecimalZoomLevel": {
+    "description": "Shown on title bar as a zoom level in percentage",
+    "placeholders": {
+      "level": {
+        "format": "decimalPercentPattern",
+        "optionalParameters": {
+          "decimalDigits": 1
+        },
+        "type": "num"
+      }
+    }
   }
 }

lib/titlebar/titlebar.dart

@@ -0,0 +1 @@
+export 'widgets/widgets.dart';

lib/titlebar/widgets/titlebar.dart

@@ -0,0 +1,84 @@
+import 'package:flutter/material.dart';
+
+import '../../helpers/helpers.dart';
+import '../../l10n/l10n.dart';
+import '../titlebar.dart';
+
+const _kTitleBarHeight = 38.0;
+
+/// {@template title_bar}
+/// Shows a window title bar.
+///
+/// It is a replacement of the native title bar widget on desktop. And will be
+/// shown as an app bar on web.
+/// {@endtemplate}
+class TitleBar extends StatelessWidget {
+  /// {@macro title_bar}
+  const TitleBar({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    final isMacosDesktop = !pIsWeb && pIsMacOS;
+    return Container(
+      width: double.infinity,
+      height: _kTitleBarHeight,
+      color: const Color(0XFFF7F7F7),
+      child: Padding(
+        padding: EdgeInsets.only(left: isMacosDesktop ? 70 : 8, right: 8),
+        child: Row(
+          children: const [
+            Expanded(child: _TitleBarLeading()),
+            _AppTitle(),
+            Expanded(child: _TitleBarAction()),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class _AppTitle extends StatelessWidget {
+  const _AppTitle({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    final l10n = context.l10n;
+    return Center(
+      child: Text(
+        l10n.appName,
+        style: const TextStyle(color: Color(0xFF616161)),
+      ),
+    );
+  }
+}
+
+class _TitleBarAction extends StatelessWidget {
+  const _TitleBarAction({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.end,
+      children: const [
+        ZoomLevelInputField(),
+      ],
+    );
+  }
+}
+
+class _TitleBarLeading extends StatelessWidget {
+  const _TitleBarLeading({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      children: const [
+        Padding(
+          padding: EdgeInsets.only(left: 12, right: 8),
+          child: Icon(Icons.home_rounded, size: 20),
+        ),
+        TitleBarTab(),
+      ],
+    );
+  }
+}

lib/titlebar/widgets/titlebar_tab_bar.dart

@@ -0,0 +1,34 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+
+import '../../l10n/l10n.dart';
+import '../../toolbar/toolbar.dart';
+
+/// {@template}
+/// A tab bar shown to select the [BoardViewType].
+/// {@endtemplate}
+class TitleBarTab extends StatelessWidget {
+  /// {@macro toolbar_tab}
+  const TitleBarTab({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    final l10n = context.l10n;
+    void onTabSelected(int value) {
+      final viewType = BoardViewType.values.elementAt(value);
+      final event = ToolbarEvent.boardViewTypeSelected(viewType);
+      context.read<ToolbarBloc>().add(event);
+    }
+
+    return DefaultTabController(
+      length: 2,
+      child: TabBar(
+        isScrollable: true,
+        onTap: onTabSelected,
+        tabs: BoardViewType.values
+            .map((type) => Tab(text: l10n.boardViewTypeLabel(type.name)))
+            .toList(),
+      ),
+    );
+  }
+}

lib/titlebar/widgets/widgets.dart

@@ -0,0 +1,3 @@
+export 'titlebar.dart';
+export 'titlebar_tab_bar.dart';
+export 'zoom_level_input_field.dart';