created an email view for the result of a Sonic query, since the results is in individual Serializable emails, instead of the whole thread

lib/api_service.dart

@@ -101,7 +101,6 @@ class ApiService {
         List<dynamic> messagesJson = json.decode(response.body);
         List<SerializableMessage> messages =
             messagesJson.map((mj) => SerializableMessage.fromJson(mj)).toList();
-
         return messages;
       }
       print(response.statusCode);
@@ -155,8 +154,8 @@ class ApiService {
 
   Future<List<SerializableMessage>> threadsInSerializable(
       String thread_id) async {
-    //actually a number
+    //actually a xyzwtv@gmail.com
-    // grab all of the emails in thread anyways, for the future it'll come in handy
+    // grab all of the emails in thread anyways, for the future it'll come in handy // maybe not
     var url = Uri.http('$ip:$port', 'get_thread_messages', {'id': thread_id});
     try {
       var response = await http.get(url);
@@ -577,7 +576,7 @@ class _EmailViewState extends State<EmailView> {
                 Expanded(
                   child: CollapsableEmails(
                     //change here
-                    thread: widget.messages,
+                    thread: widget.messages,  //this wont work in serializable
                     threadHTML: widget.emailContent,
                     threadIDs: widget.id,
                   ),

lib/email.dart

@@ -31,12 +31,14 @@ class EmailListScreen extends StatelessWidget {
             onTap: () async {
               List<String> emailContent = //  list of the html
                   await getEmailContent(email.messages, folder);
-              List<String> emailIds = email.messages;
+              // print("this is what email.messages look like in email.dart ${email.messages}");
+              // List<String> emailIds = email.messages;
 
               print(email.messages); //email ids of the thread
               Navigator.push(
                 context,
-                MaterialPageRoute(  // could call collapsable and inside collable each calls email view?
+                MaterialPageRoute(
+                  // could call collapsable and inside collable each calls email view?
                   builder: (context) => EmailView(
                     emailContent: emailContent,
                     from: email.from_address,

lib/home_page.dart

@@ -1,3 +1,5 @@
+import 'package:crab_ui/sonicEmailView.dart';
+
 import 'folder_drawer.dart';
 import 'structs.dart';
 import 'package:flutter/widgets.dart';
@@ -131,22 +133,31 @@ class _HomeScreenState extends State<HomeScreen> with TickerProviderStateMixin {
                   trailing: Text(email.date.toString()),
                   onTap: () async {
                     // print('tapped');
-                    String emailContent =
+                    // List<String> emailContent =
+                    //     await apiService.fetchEmailContent([email.id], email.list);
+                      //call the foldable
+                    
+                    List<String> emailContent = //  list of the html
                       await apiService.fetchEmailContent([email.id], email.list);
-                    // print('content below');
+                    // List<String> emailIds = email.messages;
-                    // print(emailContent);
+                    
+                    
                     Navigator.push(
                       context,
                       MaterialPageRoute(
-                        builder: (context) => EmailView(
+                        builder: (context) =>SonicEmailView(
-                          emailContent: emailContent,
+                          email: email,
-                          from: email.from,
+                          emailHTML: emailContent[0])
-                          name: email.name,
+                        // builder: (context) => EmailView(
-                          to: email.to.toString(),
+                        //   emailContent: emailContent,
-                          subject: email.subject,
+                        //   from: email.from,
-                          date: email.date.toString(),
+                        //   name: email.name,
-                          id: email.id.toString(),
+                        //   to: email.to.toString(),
-                        ),
+                        //   subject: email.subject,
+                        //   date: email.date.toString(),
+                        //   id: email.id.toString(),
+                        //   messages: [email.id],
+                        // ),
                       ),
                     );
                   },

lib/sonicEmailView.dart

@@ -0,0 +1,145 @@
+import 'package:crab_ui/augment.dart';
+import 'package:web/web.dart' as web;
+import 'dart:ui_web' as ui;
+import 'dart:js_interop';
+import 'structs.dart';
+import 'package:flutter/material.dart';
+
+class SonicEmailView extends StatefulWidget {
+  SerializableMessage email;
+  String emailHTML;
+
+  SonicEmailView({required this.email, required this.emailHTML});
+
+  @override
+  _SonicEmailViewState createState() => _SonicEmailViewState();
+}
+
+class _SonicEmailViewState extends State<SonicEmailView> {
+  String viewTypeIDs = "";
+  int heightOFViewtype = 0;
+  bool _isLoaded = false;
+
+  void _scrollToNumber(String spanId) {
+    AugmentClasses.handleJump(spanId);
+  }
+
+  @override
+  void initState() {
+    super.initState();
+    _init();
+  }
+
+  Future<void> _init() async {
+    await _registerViewFactory(widget.emailHTML);
+    if (!mounted) return;
+    setState(() {
+      _isLoaded = true;
+    });
+  }
+
+  Future<void> _registerViewFactory(String currentContent) async {
+    // setState(() { //update to do item per item
+    // each item to have itsviewtype ID
+    // is this necessarey here??
+
+    //could just move to collapsable
+
+    // for (var emailHTML in widget.threadHTML) {
+    String viewTypeId = 'email-${DateTime.now().millisecondsSinceEpoch}';
+
+    final ghost = web.document.createElement('div') as web.HTMLDivElement
+      ..style.visibility = 'hidden'
+      ..style.position = 'absolute'
+      ..style.width = '100%'
+      ..style.overflow = 'auto'
+      ..innerHTML = currentContent.toJS;
+    web.document.body?.append(ghost);
+    await Future.delayed(Duration(milliseconds: 10));
+
+    final heightOfEmail = ghost.scrollHeight;
+    ghost.remove();
+
+    final HTMLsnippet = web.document.createElement('div') as web.HTMLDivElement
+      ..id = viewTypeId
+      ..innerHTML = widget
+          .emailHTML.toJS; // temporarily index because it has to do all of them
+    HTMLsnippet.style
+      ..width = '100%'
+      ..height = '${heightOfEmail}px'
+      ..overflow = 'auto'
+      ..scrollBehavior = 'smooth';
+
+    ui.platformViewRegistry.registerViewFactory(
+      viewTypeId,
+      (int viewId) => HTMLsnippet,
+    );
+    this.viewTypeIDs = viewTypeId;
+    this.heightOFViewtype = heightOfEmail;
+    print(viewTypeIDs);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return _isLoaded
+        ? Scaffold(
+            appBar: AppBar(title: Text(widget.email.subject)),
+            body: Stack(
+              children: [
+                Column(
+                  children: [
+                    EmailToolbar(
+                        onButtonPressed: () => {},
+                        onJumpToSpan: _scrollToNumber),
+                    Row(
+                      // title of email
+                      children: [
+                        Text(
+                          widget.email.subject,
+                          style: TextStyle(fontSize: 30),
+                        ),
+                      ],
+                    ),
+                    Row(
+                      children: [
+                        Text(
+                          'from ${widget.email.name}',
+                          style: TextStyle(fontSize: 18),
+                        ),
+                        Text(
+                          '<${widget.email.from}>',
+                          style: TextStyle(fontSize: 18),
+                        ),
+                        Spacer(),
+                        Text(
+                          '${widget.email.date}',
+                          textAlign: TextAlign.right,
+                        )
+                      ],
+                    ),
+                    // TODO: make a case where if one of these is the user's email it just says me :)))))
+                    Row(
+                      children: [
+                        Text(
+                          'to ${widget.email.to.toString()}',
+                          style: TextStyle(fontSize: 15),
+                        )
+                      ],
+                    ),
+                    Expanded(
+                        // child: SizedBox(
+                        // height: heightOFViewtype.toDouble(),
+                        child: HtmlElementView(
+                      key: UniqueKey(), viewType: this.viewTypeIDs,
+                      // ),
+                    ))
+                  ],
+                ),
+              ],
+            ),
+          )
+        : const Center(
+            child: CircularProgressIndicator(),
+          );
+  }
+}