feat: "New dashboard UI". (#3)

* feat: "New dashboard UI".

* fix: some improvenents

* fix: fix inconsistencies and light theme.

* fix: save patched and installed apps on prefs, improve installer log, improve dashboard with real data (wip)

Co-authored-by: Aunali321 <aunvakil.aa@gmail.com>

* feat: move chips to a separate widget.

Co-authored-by: Alberto Ponces <ponces26@gmail.com>

lib/ui/widgets/application_item.dart

@@ -1,57 +1,114 @@
+import 'dart:typed_data';
 import 'package:flutter/material.dart';
 import 'package:flutter_i18n/flutter_i18n.dart';
-import 'package:flutter_svg/flutter_svg.dart';
 import 'package:google_fonts/google_fonts.dart';
 import 'package:revanced_manager/constants.dart';
+import 'package:revanced_manager/theme.dart';
 import 'package:revanced_manager/ui/widgets/patch_text_button.dart';
+import 'package:expandable/expandable.dart';
+import 'package:timeago/timeago.dart';
 
 class ApplicationItem extends StatelessWidget {
-  final String asset;
+  final Uint8List icon;
   final String name;
-  final String releaseDate;
+  final DateTime patchDate;
+  final String? changelog;
+  final bool isUpdatableApp;
   final Function()? onPressed;
 
   const ApplicationItem({
     Key? key,
-    required this.asset,
+    required this.icon,
     required this.name,
-    required this.releaseDate,
+    required this.patchDate,
+    this.changelog = '',
+    required this.isUpdatableApp,
     required this.onPressed,
   }) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
-    final isSVG = asset.endsWith('.svg');
-    return ListTile(
-      horizontalTitleGap: 12.0,
-      leading: isSVG
-          ? SvgPicture.asset(
-              asset,
-              height: 26,
-              width: 26,
-            )
-          : Image.asset(
-              asset,
-              height: 39,
-              width: 39,
+    return ExpandablePanel(
+      theme: const ExpandableThemeData(
+        hasIcon: false,
+        animationDuration: Duration(milliseconds: 450),
+      ),
+      header: Container(
+        height: 60,
+        decoration: BoxDecoration(
+          borderRadius: const BorderRadius.all(
+            Radius.circular(16),
+          ),
+          color: Theme.of(context).colorScheme.primary,
+        ),
+        padding: const EdgeInsets.symmetric(horizontal: 10.0, vertical: 12.0),
+        child: Row(
+          children: [
+            SizedBox(
+              width: 60,
+              child: Image.memory(
+                icon,
+                height: 39,
+                width: 39,
+              ),
             ),
-      title: Text(
-        name,
-        style: GoogleFonts.roboto(
-          color: Theme.of(context).colorScheme.secondary,
-          fontWeight: FontWeight.w600,
+            const SizedBox(width: 4),
+            SizedBox(
+              width: MediaQuery.of(context).size.width - 250,
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  Text(
+                    name,
+                    style: GoogleFonts.roboto(
+                      color: Theme.of(context).colorScheme.secondary,
+                      fontWeight: FontWeight.w600,
+                    ),
+                  ),
+                  Text(
+                    format(patchDate),
+                    style: robotoTextStyle.copyWith(
+                      color: Theme.of(context).colorScheme.tertiary,
+                    ),
+                  ),
+                ],
+              ),
+            ),
+            const Spacer(),
+            isUpdatableApp
+                ? Padding(
+                    padding: const EdgeInsets.symmetric(horizontal: 8.0),
+                    child: PatchTextButton(
+                      text: 'applicationItem.patchButton',
+                      onPressed: onPressed,
+                      borderColor: isDark
+                          ? const Color(0xff4D5054)
+                          : const Color.fromRGBO(119, 146, 168, 1),
+                    ),
+                  )
+                : const SizedBox(),
+          ],
         ),
       ),
-      subtitle: Text(
-        releaseDate,
-        style: robotoTextStyle,
-      ),
-      trailing: PatchTextButton(
-        text: FlutterI18n.translate(
-          context,
-          'applicationItem.patchButton',
+      collapsed: const Text(""),
+      expanded: Padding(
+        padding: const EdgeInsets.symmetric(vertical: 8.0, horizontal: 16.0),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            I18nText(
+              'applicationItem.changelogLabel',
+              child: Text(
+                '',
+                style: robotoTextStyle.copyWith(fontWeight: FontWeight.w700),
+              ),
+            ),
+            Text(
+              changelog!,
+              style: robotoTextStyle,
+            ),
+          ],
         ),
-        onPressed: onPressed,
       ),
     );
   }

lib/ui/widgets/available_updates_card.dart

@@ -1,94 +1,36 @@
 import 'package:flutter/material.dart';
-import 'package:flutter_i18n/flutter_i18n.dart';
-import 'package:google_fonts/google_fonts.dart';
+import 'package:revanced_manager/app/app.locator.dart';
+import 'package:revanced_manager/models/patched_application.dart';
+import 'package:revanced_manager/ui/views/home/home_viewmodel.dart';
 import 'package:revanced_manager/ui/widgets/application_item.dart';
-import 'package:revanced_manager/ui/widgets/patch_text_button.dart';
 
 class AvailableUpdatesCard extends StatelessWidget {
-  final Color? color;
   const AvailableUpdatesCard({
     Key? key,
-    this.color = const Color(0xff1B222B),
   }) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
-    return Container(
-      decoration: BoxDecoration(
-        borderRadius: BorderRadius.circular(12),
-        color: color,
-      ),
-      padding: const EdgeInsets.symmetric(vertical: 18, horizontal: 12),
-      child: Column(
-        crossAxisAlignment: CrossAxisAlignment.start,
-        mainAxisAlignment: MainAxisAlignment.start,
-        children: [
-          Padding(
-            padding: const EdgeInsets.symmetric(horizontal: 12.0),
-            child: Row(
-              mainAxisAlignment: MainAxisAlignment.spaceBetween,
-              children: [
-                I18nText(
-                  'availableUpdatesCard.widgetTitle',
-                  child: Text(
-                    '',
-                    style: GoogleFonts.inter(
-                      fontSize: 16,
-                      color: Theme.of(context).colorScheme.secondary,
-                      fontWeight: FontWeight.w500,
-                    ),
-                  ),
-                ),
-                PatchTextButton(
-                  text: FlutterI18n.translate(
-                    context,
-                    'availableUpdatesCard.patchButton',
-                  ),
-                  onPressed: () => {},
-                  backgroundColor: Theme.of(context).colorScheme.secondary,
-                ),
-              ],
-            ),
-          ),
-          ApplicationItem(
-            asset: 'assets/images/revanced.svg',
-            name: 'ReVanced',
-            releaseDate: '2 days ago',
-            onPressed: () => {},
-          ),
-          ApplicationItem(
-            asset: 'assets/images/reddit.png',
-            name: 'ReReddit',
-            releaseDate: 'Released 1 month ago',
-            onPressed: () => {},
-          ),
-          const SizedBox(height: 4),
-          I18nText(
-            'availableUpdatesCard.changelogLabel',
-            child: Text(
-              '',
-              style: GoogleFonts.roboto(
-                color: Theme.of(context).colorScheme.tertiary,
-                fontWeight: FontWeight.w700,
-              ),
-            ),
-          ),
-          const SizedBox(height: 4),
-          Text(
-            'fix: we made the player even worse (you love)',
-            style: GoogleFonts.roboto(
-              color: Theme.of(context).colorScheme.tertiary,
-            ),
-          ),
-          const SizedBox(height: 4),
-          Text(
-            'chore: guhhughghu',
-            style: GoogleFonts.roboto(
-              color: Theme.of(context).colorScheme.tertiary,
-            ),
-          ),
-        ],
-      ),
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      mainAxisAlignment: MainAxisAlignment.start,
+      children: [
+        FutureBuilder<List<PatchedApplication>>(
+          future: locator<HomeViewModel>().getPatchedApps(true),
+          builder: (context, snapshot) =>
+              snapshot.hasData && snapshot.data!.length > 1
+                  ? ListView.builder(
+                      itemBuilder: (context, index) => ApplicationItem(
+                        icon: snapshot.data![index].icon,
+                        name: snapshot.data![index].name,
+                        patchDate: snapshot.data![index].patchDate,
+                        isUpdatableApp: true,
+                        onPressed: () => {},
+                      ),
+                    )
+                  : Container(),
+        ),
+      ],
     );
   }
 }

lib/ui/widgets/dashboard_raw_chip.dart

@@ -0,0 +1,51 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_i18n/flutter_i18n.dart';
+import 'package:google_fonts/google_fonts.dart';
+import 'package:revanced_manager/theme.dart';
+
+class DashboardChip extends StatelessWidget {
+  final String label;
+  final bool isSelected;
+  final Function(bool)? onSelected;
+  const DashboardChip({
+    Key? key,
+    required this.label,
+    required this.isSelected,
+    this.onSelected,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return RawChip(
+      showCheckmark: false,
+      label: I18nText(label),
+      selected: isSelected,
+      labelStyle: GoogleFonts.inter(
+        color: isSelected
+            ? isDark
+                ? const Color(0xff95C0FE)
+                : Theme.of(context).colorScheme.secondary
+            : isDark
+                ? Colors.grey
+                : Colors.grey[700],
+        fontWeight: FontWeight.w500,
+      ),
+      backgroundColor: Colors.transparent,
+      selectedColor: const Color.fromRGBO(118, 155, 209, 0.42),
+      shape: RoundedRectangleBorder(
+        borderRadius: BorderRadius.circular(10),
+        side: BorderSide(
+          width: 1,
+          color: isDark
+              ? isSelected
+                  ? const Color.fromRGBO(118, 155, 209, 0.42)
+                  : Colors.grey
+              : isSelected
+                  ? const Color.fromRGBO(118, 155, 209, 0.42)
+                  : Colors.grey,
+        ),
+      ),
+      onSelected: onSelected,
+    );
+  }
+}

lib/ui/widgets/installed_apps_card.dart

@@ -1,70 +1,36 @@
 import 'package:flutter/material.dart';
-import 'package:flutter_i18n/flutter_i18n.dart';
-import 'package:google_fonts/google_fonts.dart';
+import 'package:revanced_manager/app/app.locator.dart';
+import 'package:revanced_manager/models/patched_application.dart';
+import 'package:revanced_manager/ui/views/home/home_viewmodel.dart';
 import 'package:revanced_manager/ui/widgets/application_item.dart';
 
 class InstalledAppsCard extends StatelessWidget {
-  final Color? color;
   const InstalledAppsCard({
     Key? key,
-    this.color = const Color(0xff1B222B),
   }) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
-    return Container(
-      decoration: BoxDecoration(
-        borderRadius: BorderRadius.circular(12),
-        color: color,
-      ),
-      padding: const EdgeInsets.symmetric(vertical: 18, horizontal: 20),
-      child: Column(
-        crossAxisAlignment: CrossAxisAlignment.start,
-        mainAxisAlignment: MainAxisAlignment.start,
-        children: [
-          I18nText(
-            'installedAppsCard.widgetTitle',
-            child: Text(
-              '',
-              style: GoogleFonts.inter(
-                fontSize: 16,
-                color: Theme.of(context).colorScheme.secondary,
-                fontWeight: FontWeight.w500,
-              ),
-            ),
-          ),
-          ApplicationItem(
-            asset: 'assets/images/revanced.svg',
-            name: 'ReVanced',
-            releaseDate: '2 days ago',
-            onPressed: () => {},
-          ),
-          I18nText(
-            'installedAppsCard.changelogLabel',
-            child: Text(
-              '',
-              style: GoogleFonts.roboto(
-                color: Theme.of(context).colorScheme.tertiary,
-                fontWeight: FontWeight.w700,
-              ),
-            ),
-          ),
-          const SizedBox(height: 4),
-          Text(
-            'fix: we made the player even worse (you love)',
-            style: GoogleFonts.roboto(
-              color: Theme.of(context).colorScheme.tertiary,
-            ),
-          ),
-          const SizedBox(height: 4),
-          Text(
-            'chore: guhhughghu',
-            style: GoogleFonts.roboto(
-              color: Theme.of(context).colorScheme.tertiary,
-            ),
-          ),
-        ],
-      ),
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      mainAxisAlignment: MainAxisAlignment.start,
+      children: [
+        FutureBuilder<List<PatchedApplication>>(
+          future: locator<HomeViewModel>().getPatchedApps(false),
+          builder: (context, snapshot) =>
+              snapshot.hasData && snapshot.data!.length > 1
+                  ? ListView.builder(
+                      itemBuilder: (context, index) => ApplicationItem(
+                        icon: snapshot.data![index].icon,
+                        name: snapshot.data![index].name,
+                        patchDate: snapshot.data![index].patchDate,
+                        isUpdatableApp: false,
+                        onPressed: () => {},
+                      ),
+                    )
+                  : Container(),
+        ),
+      ],
     );
   }
 }

lib/ui/widgets/latest_commit_card.dart

@@ -89,6 +89,7 @@ class _LatestCommitCardState extends State<LatestCommitCard> {
             ),
             onPressed: () => {},
             backgroundColor: Theme.of(context).colorScheme.secondary,
+            borderColor: Theme.of(context).colorScheme.secondary,
           ),
         ],
       ),

lib/ui/widgets/patch_text_button.dart

@@ -1,5 +1,7 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_i18n/flutter_i18n.dart';
 import 'package:revanced_manager/constants.dart';
+import 'package:revanced_manager/theme.dart';
 
 class PatchTextButton extends StatelessWidget {
   final String text;
@@ -19,21 +21,30 @@ class PatchTextButton extends StatelessWidget {
     return TextButton(
       onPressed: onPressed,
       style: Theme.of(context).textButtonTheme.style?.copyWith(
-            backgroundColor: MaterialStateProperty.all<Color?>(backgroundColor),
-            side: MaterialStateProperty.all<BorderSide>(
-              BorderSide(
-                color: borderColor,
-                width: 1,
-              ),
+          backgroundColor: MaterialStateProperty.all<Color?>(backgroundColor),
+          side: MaterialStateProperty.all<BorderSide>(
+            BorderSide(
+              color: borderColor,
+              width: 1,
             ),
           ),
-      child: Text(
-        text,
-        style: interTextStyle.copyWith(
-            color: backgroundColor == Colors.transparent
-                ? const Color.fromRGBO(119, 146, 186, 1)
-                : Colors.white),
-      ),
+          padding: MaterialStateProperty.all<EdgeInsetsGeometry>(
+            const EdgeInsets.symmetric(
+              horizontal: 16,
+              vertical: 4,
+            ),
+          )),
+      child: I18nText(text,
+          child: Text(
+            '',
+            style: interTextStyle.copyWith(
+              color: backgroundColor == Colors.transparent
+                  ? const Color.fromRGBO(119, 146, 186, 1)
+                  : isDark
+                      ? Colors.black
+                      : Colors.white,
+            ),
+          )),
     );
   }
 }