dashboard responsive

lib/core/helpers/responsive_layout.helper.dart

@@ -4,7 +4,7 @@ enum DeviceType { mobile, tab, desktop }
 
 class ResponsiveLayoutHelper {
   static const int mobileMaxWidth = 375;
-  static const int tabletMaxWidth = 600;
+  static const int tabletMaxWidth = 720;
   static const int desktopMaxWidth = 1024;
 
   static DeviceType getDeviceType(BuildContext context) {

lib/features/dashboard/pages/desktop/dashboard_desktop.dart

@@ -1,11 +1,10 @@
-import 'package:cookethflow/core/theme/colors.dart';
+
 import 'package:cookethflow/features/dashboard/providers/dashboard_provider.dart';
 import 'package:cookethflow/features/dashboard/widgets/dashboard_drawer.dart';
 import 'package:cookethflow/features/dashboard/widgets/project_card.dart';
 import 'package:cookethflow/features/dashboard/widgets/start_project.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_screenutil/flutter_screenutil.dart';
-import 'package:phosphor_flutter/phosphor_flutter.dart';
 import 'package:provider/provider.dart';
 import 'package:cookethflow/core/helpers/responsive_layout.helper.dart' as rh;
 
@@ -29,7 +28,7 @@ class DashboardDesktop extends StatelessWidget {
                         provider.isDrawerOpen
                             ? constraints.maxHeight
                             : 0.185.sh,
-                    width: deviceType == rh.DeviceType.desktop ? 400.w : 600.w,
+                    width: deviceType == rh.DeviceType.desktop ? 0.24.sw : deviceType == rh.DeviceType.tab ? 0.257.sw : 600.w,
                     child: const DashboardDrawer(),
                   ),
 
@@ -49,7 +48,7 @@ class DashboardDesktop extends StatelessWidget {
                           const SizedBox(height: 32),
                           Expanded(
                             // NEW: Conditionally build the main content area
-                            child: _buildMainContent(provider),
+                            child: _buildMainContent(provider,context),
                           ),
                         ],
                       ),
@@ -63,7 +62,7 @@ class DashboardDesktop extends StatelessWidget {
   }
 
   // NEW: Helper widget to build content based on the selected tab
-  Widget _buildMainContent(DashboardProvider provider) {
+  Widget _buildMainContent(DashboardProvider provider,BuildContext context) {
     switch (provider.tabIndex) {
       case 2: // Trash Tab
         return Center(
@@ -108,7 +107,7 @@ class DashboardDesktop extends StatelessWidget {
             ),
           );
         }
-
+        rh.DeviceType deviceType = rh.ResponsiveLayoutHelper.getDeviceType(context);
         return GridView.builder(
           shrinkWrap: true,
           itemCount: displayedWorkspaces.length,
@@ -117,7 +116,7 @@ class DashboardDesktop extends StatelessWidget {
                 crossAxisCount: 3,
                 crossAxisSpacing: 20.w,
                 mainAxisSpacing: 20.h,
-                childAspectRatio: 4.5 / 3,
+                childAspectRatio: deviceType == rh.DeviceType.desktop ? 4.0/3 :  3.3/ 3,
               ),
           itemBuilder: (context, index) {
             final workspace = displayedWorkspaces[index];

lib/features/dashboard/pages/mobile/dashboard_mobile.dart

@@ -1,14 +1,152 @@
+import 'package:cookethflow/features/dashboard/pages/mobile/drawer_mobile.dart';
 import 'package:cookethflow/features/dashboard/providers/dashboard_provider.dart';
 import 'package:cookethflow/features/dashboard/widgets/dashboard_drawer.dart';
+import 'package:cookethflow/features/dashboard/widgets/project_card.dart';
+import 'package:cookethflow/features/dashboard/widgets/start_project.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_screenutil/flutter_screenutil.dart';
 import 'package:provider/provider.dart';
 
-class DashboardMobile extends StatelessWidget {
+import 'package:cookethflow/core/helpers/responsive_layout.helper.dart' as rh;
+
+class DashboardMobile extends StatefulWidget {
   const DashboardMobile({super.key});
 
+  @override
+  State<DashboardMobile> createState() => _DashboardMobileState();
+}
+
+class _DashboardMobileState extends State<DashboardMobile> {
+  bool is_Visible = false;
   @override
   Widget build(BuildContext context) {
-    return Consumer<DashboardProvider>(builder: (context, provider, child) => 
-    Scaffold(drawer: DashboardDrawer(),appBar: AppBar(),body: Container(),),);
+    rh.DeviceType deviceType = rh.ResponsiveLayoutHelper.getDeviceType(context);
+    return Consumer<DashboardProvider>(
+      builder: (context, provider, child) {
+        return LayoutBuilder(
+          builder: (context, constraints) {
+            return Container(
+              padding: EdgeInsets.only(left: 20,right: 16),
+              child: Stack(
+                children: [
+                  Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    Row(
+                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                      children: [
+                        Container(
+                          padding: EdgeInsets.all(10),
+                          decoration: BoxDecoration(
+                            border: Border.all(color: Colors.black),
+                            borderRadius: BorderRadius.circular(8),
+                          ),
+                          child: InkWell(
+                            onTap: () {
+                              setState(() {
+                                is_Visible = !is_Visible;
+                              });
+                            },
+                            child: Icon(Icons.menu, size: 30),
+                          ),
+                        ),
+                        const StartProject(),
+                      ],
+                    ),
+                    const SizedBox(height: 34),
+                            Expanded(
+                              // NEW: Conditionally build the main content area
+                              child: _buildMainContent(provider),
+                            ),
+                  ],
+                ),
+                 Visibility(
+                      visible: is_Visible,
+                      child: Positioned(
+                        top: 90.h,
+                        left: 8.w,
+                        child: AnimatedContainer(
+                          curve: Curves.easeInOut,
+                          duration: const Duration(milliseconds: 500),
+                          height: provider.isDrawerOpen ? 0.8.sh : 0.185.sh,
+                          width:
+                              deviceType == rh.DeviceType.desktop ? 400.w : 0.70.sw,
+                          child: const DashboardDrawerMob(),
+                        ),
+                      ),
+                    ),
+                ]
+              ),
+            );
+          },
+        );
+      },
+    );
+  }
+
+
+    // NEW: Helper widget to build content based on the selected tab
+  Widget _buildMainContent(DashboardProvider provider) {
+    switch (provider.tabIndex) {
+      case 2: // Trash Tab
+        return Center(
+          child: Text(
+            'Feature Coming Soon',
+            style: TextStyle(
+              fontFamily: 'Fredrik',
+              fontSize: 45.sp,
+              fontWeight: FontWeight.w600,
+              color: Colors.grey[600],
+            ),
+          ),
+        );
+      case 3: // About Us Tab
+        return SingleChildScrollView(
+          padding: EdgeInsets.symmetric(horizontal: 40.w, vertical: 20.h),
+          child: Text(
+            "Cooketh Flow is an open-source, powerful visual thinking tool designed for teams and individuals to brainstorm, sketch, and organize ideas effortlessly. Whether you're mapping out ideas, designing user flows, or organizing tasks, Cooketh Flow provides an intuitive drag-and-drop interface that makes building and refining workflows effortless.\n\nWith features like customizable nodes and cloud sync with Supabase, Cooketh Flow is built to streamline complex processes and enhance productivity. Developed with Flutter for cross-platform support, it offers a fast, responsive, and visually engaging experience.\n\nAs an open-source project, Cooketh Flow is community-driven and extensible, inviting developers and creators to contribute, innovate, and shape the future of workflow automation.",
+            textAlign: TextAlign.justify,
+            style: TextStyle(
+              fontFamily: 'Fredrik',
+              fontSize: 40.sp,
+              height: 1.6,
+              color: Colors.black.withOpacity(0.75),
+            ),
+          ),
+        );
+      default: // All and Starred Tabs
+        final displayedWorkspaces = provider.displayedWorkspaces;
+
+        // Show a message if the "Starred" tab is empty
+        if (displayedWorkspaces.isEmpty && provider.tabIndex == 1) {
+           return Center(
+            child: Text(
+              'No starred workspaces yet!',
+              style: TextStyle(
+                fontFamily: 'Fredrik',
+                fontSize: 45.sp,
+                fontWeight: FontWeight.w600,
+                color: Colors.grey[600],
+              ),
+            ),
+          );
+        }
+
+        return GridView.builder(
+          shrinkWrap: true,
+          itemCount: displayedWorkspaces.length,
+          gridDelegate:
+              SliverGridDelegateWithFixedCrossAxisCount(
+                crossAxisCount: 1,
+                crossAxisSpacing: 20.w,
+                mainAxisSpacing: 20.h,
+                childAspectRatio: 1.8,
+              ),
+          itemBuilder: (context, index) {
+            final workspace = displayedWorkspaces[index];
+            return ProjectCard(workspaceId: workspace.id);
+          },
+        );
+    }
   }
-}
+}