home button, and rough purple numbers

lib/api_service.dart

@@ -5,7 +5,6 @@ import 'dart:ui_web' as ui;
 import 'dart:html' as html;
 import 'augment.dart';
 import 'dart:js' as js;
-// import 'package:flutter_web_plugins/flutter_web_plugins.dart';
 
 class MailAddress {
   final String? name;
@@ -368,6 +367,7 @@ class _EmailViewState extends State<EmailView> {
 
   @override
   Widget build(BuildContext context) {
+    // print(currentContent);
     return Scaffold(
         appBar: AppBar(
           title: Text(widget.name),

lib/augment.dart

@@ -5,31 +5,207 @@ import 'dart:ui_web' as ui;
 import 'dart:html' as html;
 import 'dart:js' as js;
 
-class EmailToolbar extends StatelessWidget {
+class EmailToolbar extends StatefulWidget {
   final VoidCallback onButtonPressed;
 
-  const EmailToolbar({Key? key, required this.onButtonPressed}) : super(key: key);
+  EmailToolbar({Key? key, required this.onButtonPressed}) : super(key: key);
+
+  @override
+  _DynamicClassesAugment createState() => _DynamicClassesAugment();
+}
+
+class _DynamicClassesAugment extends State<EmailToolbar> {
+  String selectedClass = 'Class 1';
+  late final FocusNode _JumpItemfocusNode;
+  late final FocusNode _viewSpecsfocusNode;
+
+  bool _jumpItemHasFocus = false;
+  bool _viewSpecsHasFocus = false;
+
+  @override
+  void initState() {
+    super.initState();
+    _JumpItemfocusNode = FocusNode();
+    _viewSpecsfocusNode = FocusNode();
+
+    _JumpItemfocusNode.addListener(() {
+      setState(() => _jumpItemHasFocus = _JumpItemfocusNode.hasFocus);
+    });
+
+    _viewSpecsfocusNode.addListener(() {
+      setState(() => _viewSpecsHasFocus = _viewSpecsfocusNode.hasFocus);
+    });
+  }
+
+  @override
+  void dispose() {
+    _JumpItemfocusNode.dispose();
+    _viewSpecsfocusNode.dispose();
+    super.dispose();
+  }
 
   @override
   Widget build(BuildContext context) {
-    return Row(
-      children: [
-        ElevatedButton(
-          onPressed: onButtonPressed,
-          child: Text('Home'),
-        ),
-        SizedBox(width: 8),
-        ElevatedButton(
-          onPressed: onButtonPressed,
-          child: Text('Reload'),
-        ),
-        Spacer(),
-        ElevatedButton(
-          onPressed: onButtonPressed,
-          child: Text('Options'),
-        )
-      
-      ],
-    );
+    const animationDuration = Duration(milliseconds: 250);
+
+    return Column(children: [
+      Row(
+        children: [
+          ElevatedButton(
+            onPressed: () => AugmentClasses.handleHome(context),
+            child: Text('Home'),
+          ),
+          SizedBox(width: 8),
+          ElevatedButton(
+            onPressed: AugmentClasses.handleReload,
+            child: Text('Reload'),
+          ),
+          ElevatedButton(
+            onPressed: AugmentClasses.handleImages,
+            child: Text('Images'),
+          ),
+          SizedBox(width: 8),
+          ElevatedButton(
+            onPressed: AugmentClasses.handleOpen,
+            child: Text('Open'),
+          ),
+          // SizedBox(width: 8),
+          ElevatedButton(
+            onPressed: AugmentClasses.handleFind,
+            child: Text('Find'),
+          ),
+          // SizedBox(width: 8),
+          ElevatedButton(
+            onPressed: AugmentClasses.handleStop,
+            child: Text('Stop'),
+          ),
+          Spacer(),
+          PopupMenuButton<String>(
+            onSelected: (String value) {
+              setState(() {
+                selectedClass = value;
+                print(selectedClass);
+              });
+            },
+            itemBuilder: (BuildContext context) => <PopupMenuEntry<String>>[
+              const PopupMenuItem<String>(
+                value: 'Class 1',
+                child: Text('Class 1'),
+              ),
+              const PopupMenuItem<String>(
+                value: 'Class 2',
+                child: Text('Class 2'),
+              ),
+              const PopupMenuItem<String>(
+                value: 'Turbo 3',
+                child: Text('Turbo 3'),
+              ),
+            ],
+            // child: ElevatedButton(
+            // onPressed: () {},
+            child: Text('Options'),
+          ),
+        ],
+      ),
+      if (selectedClass == 'Class 2')
+        Stack(children: [
+          Row(
+            children: [
+              Container(
+                width: 150,
+                height: 30,
+                child: TextField(
+                  decoration: InputDecoration(
+                      labelText: 'Jump Item',
+                      border: OutlineInputBorder(),
+                      suffixIcon: Icon(Icons.search)),
+                ),
+              ),
+              //TODO: Make an animation to make the button a textfield
+              // AnimatedSwitcher(
+              //   duration: animationDuration,
+              //   transitionBuilder: (Widget child, Animation<double> animation) {
+              //     return FadeTransition(opacity: animation, child: child);
+              //   },
+              //   child: _jumpItemHasFocus
+              //       ? Container(
+              //           key: ValueKey('TextField1'),
+              //           width: 150,
+              //           child: TextField(
+              //             focusNode: _JumpItemfocusNode,
+              //             decoration: InputDecoration(
+              //               hintText: 'Enter Text',
+              //               border: OutlineInputBorder(),
+              //             ),
+              //           ),
+
+              //         )
+              //       : Container(
+              //           key: ValueKey('Button1'),
+              //           child: ElevatedButton(
+              //             onPressed: () => _JumpItemfocusNode.requestFocus(),
+              //             child: Text('Jump Item:'),
+              //         ),
+              //       ),
+              // ),
+              SizedBox(width: 8),
+              Container(
+                width: 150,
+                height: 30,
+                child: TextField(
+                  decoration: InputDecoration(
+                      labelText: 'viewSpecs',
+                      border: OutlineInputBorder(),
+                      suffixIcon: Icon(Icons.style_rounded)),
+                ),
+              ),
+              ElevatedButton(
+                onPressed: AugmentClasses.handleImages,
+                child: Text('Filter'),
+              ),
+              SizedBox(width: 8),
+              ElevatedButton(
+                onPressed: AugmentClasses.handleOpen,
+                child: Text('Lookup'),
+              ),
+              // SizedBox(width: 8),
+              ElevatedButton(
+                onPressed: AugmentClasses.handleFind,
+                child: Text('Create Link'),
+              ),
+              ElevatedButton(
+                onPressed: AugmentClasses.handleFind,
+                child: Text('Paste Link'),
+              ),
+            ],
+          )
+        ])
+    ]);
+  }
+}
+
+class AugmentClasses {
+  static void handleHome(BuildContext context) {
+    Navigator.of(context).popUntil((route) => route.isFirst);
+  }
+
+  static void handleReload() {
+    print("Reload button pressed");
+  }
+
+  static void handleImages() {
+    print("Images button pressed");
+  }
+
+  static void handleOpen() {
+    print("Open button pressed");
+  }
+
+  static void handleFind() {
+    print("Find button pressed");
+  }
+
+  static void handleStop() {
+    print("Stop button pressed");
   }
 }

lib/main.dart

@@ -20,6 +20,7 @@ class HyM extends StatelessWidget {
       title: 'HyM',
       home: HomeScreen(),
       routes: {
+        // '/': (context) => HomeScreen(),
         "/email": (context) => EmailPage(),
         "/contacts": (context) => ContactsPage(),
       },