From f81c8468a7b13cd816dbb3a2f3035a5e0af7d527 Mon Sep 17 00:00:00 2001
From: Ian <ian.dunkelberg@outlook.com>
Date: Mon, 4 Dec 2023 17:56:51 -0800
Subject: [PATCH] emergency end of day commit

---
 frontend/components/ConvoPlaceholder.vue      | 32 ++++++---
 frontend/components/SendBox/SendBox.vue       |  2 +-
 frontend/components/ThreadList/ThreadList.vue | 67 +++++++++++++------
 .../ThreadPreview/ThreadPreview.vue           | 21 +-----
 .../WebTextingContainer.vue                   | 26 +++----
 .../components/conversation/Conversation.vue  | 19 +++---
 .../new-thread-modal/NewThreadModal.vue       | 26 +++++++
 frontend/routes/index.ts                      |  8 +++
 newthread.php                                 |  6 ++
 9 files changed, 135 insertions(+), 72 deletions(-)
 create mode 100644 frontend/components/new-thread-modal/NewThreadModal.vue
 create mode 100644 newthread.php

diff --git a/frontend/components/ConvoPlaceholder.vue b/frontend/components/ConvoPlaceholder.vue
index 162215b..2325c10 100644
--- a/frontend/components/ConvoPlaceholder.vue
+++ b/frontend/components/ConvoPlaceholder.vue
@@ -1,29 +1,41 @@
 <script lang="js">
-export default{
-    name:'ConvoPlaceholder',
+import SendBox from './SendBox/SendBox.vue';
+export default {
+    name: 'ConvoPlaceholder',
+    components: { SendBox },
+        data() {
+            return {
+                number: '',
+            }
+        }
 }
 
 </script>
 <template>
-    <div id="CONVERSATION_PLACEHOLDER" >
-        
+    <div id="CONVERSATION_PLACEHOLDER">
+        <span class='modal-message'>Enter Number:
+            <input type="text" v-model="number" id="new-thread-number" placeholder="(206) 555-1212" />
+        </span>
+        <p> I am in hell and this is my punishment for incredible hubris (btw your input value is: {{ number }}).
+        </p>
+        <SendBox/>
     </div>
 </template>
 
 <style>
-#CONVERSATION_PLACEHOLDER{
+#CONVERSATION_PLACEHOLDER {
     grid-column-start: 2;
-grid-column-end: 2;
-height: 83vh;
+    grid-column-end: 2;
+    height: 83vh;
 }
 
-#conversation{
+#conversation {
     grid-column-start: 2;
     grid-column-end: 2;
 }
 
-@media screen and (width <=700px){
- /*   #conversation{ 
+@media screen and (width <=700px) {
+    /*   #conversation{ 
         display: none;
     }
 */
diff --git a/frontend/components/SendBox/SendBox.vue b/frontend/components/SendBox/SendBox.vue
index 019d461..0837ed2 100644
--- a/frontend/components/SendBox/SendBox.vue
+++ b/frontend/components/SendBox/SendBox.vue
@@ -258,7 +258,7 @@ export default {
             </div>
         </div>
         <div class="sendbox">
-            <textarea maxlength="160" class="textentry" autofocus="true" @keypress="keypress" v-model.trim="enteredText"
+            <textarea maxlength="160" rows="3" class="textentry" autofocus="true" @keypress="keypress" v-model.trim="enteredText"
                 ref="textbox" v-on:paste="onPaste"></textarea>
             <label for="attachment-upload" class="btn btn-attach"><span class="fas fa-paperclip fa-fw"></span></label>
             <input type="file" id="attachment-upload" style="display: none;" v-on:change="onAttach" multiple />
diff --git a/frontend/components/ThreadList/ThreadList.vue b/frontend/components/ThreadList/ThreadList.vue
index 0c24a60..e5dd4a3 100644
--- a/frontend/components/ThreadList/ThreadList.vue
+++ b/frontend/components/ThreadList/ThreadList.vue
@@ -43,30 +43,42 @@ export default {
     get the user extension this is handled in threadlist.php
 */
 
-/* add contact type stuff
-<form method='get' action="thread.php" onsubmit="clean_number()">
-<input type="hidden" name="extension_uuid" value="<?php echo $extension['extension_uuid']; ?>" />
-<div id='modal-new-thread' class='modal-window'>
-    <div>
-        <span title="" class='modal-close' onclick="modal_close(); ">&times</span>
-        <span class='modal-title'>New Message</span>
-        <span class='modal-message'>Enter Number: <input type="text" name="number" id="new-thread-number" placeholder="(206) 555-1212" /></span>
-        <span class='modal-actions'>
-            <button type='button' alt='Cancel' title='Cancel' onclick='modal_close();' class='btn btn-default' ><span class='fas fa-times fa-fw'></span><span class='button-label never pad'>Cancel</span></button>
-            <button type='submit' name='action' value='Ok' id='btn_ok' alt='ok' title='ok' onclick='modal_close();' class='btn btn-default' style='float: right; margin-left: 15px' ><span class='fas fa-check fa-fw'></span><span class='button-label never pad'>Start</span></button>
-        </span>
-    </div>
-</div>
-<input type='hidden' name='key_uuid' id='key_uuid'/>
-</form>
-*/
+
+
 </script>
 <template>
+
     <div class="threadlist_container active" id="THREADLIST" v-bind:class="selectedConvo ? 'hide-if-small': 'no-convo-selected'">
-        <div class='table'>
+
+            <div class="threadlist-header">Conversations
+                <router-link :to="'/createthread.php'" class="thread-link" >New contact</router-link>
+            </div>
+
+        <div class='threadlist-table'>
+            
             <div class="preview_list_container">
                 <ThreadPreview  v-for="preview in threadPreviews" :key="preview.toString()"
                     v-bind="preview" :activeThread="this.activeThread" />
+                    <div class="tr_replace inactiveThread" last_message="[object Object]"><div class="td_preview inactiveThread"><a href="/app/webtexting/thread.php?extension_uuid=fe91be7c-ecb2-4661-9d3a-bcf27099221b&amp;number=12063801161" class="thread-link"><div class="thread-preview-container inactiveThread"><span class="thread-name inactiveThread">12063801161</span><span class="timestamp inactiveThread" data-timestamp="2023-11-29 22:45:09.679273">5 days ago</span><span class="thread-last-message inactiveThread">MMS message</span></div></a></div></div>
+                    <div class="tr_replace inactiveThread" last_message="[object Object]"><div class="td_preview inactiveThread"><a href="/app/webtexting/thread.php?extension_uuid=fe91be7c-ecb2-4661-9d3a-bcf27099221b&amp;number=12063801161" class="thread-link"><div class="thread-preview-container inactiveThread"><span class="thread-name inactiveThread">12063801161</span><span class="timestamp inactiveThread" data-timestamp="2023-11-29 22:45:09.679273">5 days ago</span><span class="thread-last-message inactiveThread">MMS message</span></div></a></div></div>
+                    <div class="tr_replace inactiveThread" last_message="[object Object]"><div class="td_preview inactiveThread"><a href="/app/webtexting/thread.php?extension_uuid=fe91be7c-ecb2-4661-9d3a-bcf27099221b&amp;number=12063801161" class="thread-link"><div class="thread-preview-container inactiveThread"><span class="thread-name inactiveThread">12063801161</span><span class="timestamp inactiveThread" data-timestamp="2023-11-29 22:45:09.679273">5 days ago</span><span class="thread-last-message inactiveThread">MMS message</span></div></a></div></div>
+                    <div class="tr_replace inactiveThread" last_message="[object Object]"><div class="td_preview inactiveThread"><a href="/app/webtexting/thread.php?extension_uuid=fe91be7c-ecb2-4661-9d3a-bcf27099221b&amp;number=12063801161" class="thread-link"><div class="thread-preview-container inactiveThread"><span class="thread-name inactiveThread">12063801161</span><span class="timestamp inactiveThread" data-timestamp="2023-11-29 22:45:09.679273">5 days ago</span><span class="thread-last-message inactiveThread">MMS message</span></div></a></div></div>
+                    <div class="tr_replace inactiveThread" last_message="[object Object]"><div class="td_preview inactiveThread"><a href="/app/webtexting/thread.php?extension_uuid=fe91be7c-ecb2-4661-9d3a-bcf27099221b&amp;number=12063801161" class="thread-link"><div class="thread-preview-container inactiveThread"><span class="thread-name inactiveThread">12063801161</span><span class="timestamp inactiveThread" data-timestamp="2023-11-29 22:45:09.679273">5 days ago</span><span class="thread-last-message inactiveThread">MMS message</span></div></a></div></div>
+                    <div class="tr_replace inactiveThread" last_message="[object Object]"><div class="td_preview inactiveThread"><a href="/app/webtexting/thread.php?extension_uuid=fe91be7c-ecb2-4661-9d3a-bcf27099221b&amp;number=12063801161" class="thread-link"><div class="thread-preview-container inactiveThread"><span class="thread-name inactiveThread">12063801161</span><span class="timestamp inactiveThread" data-timestamp="2023-11-29 22:45:09.679273">5 days ago</span><span class="thread-last-message inactiveThread">MMS message</span></div></a></div></div>
+                    <div class="tr_replace inactiveThread" last_message="[object Object]"><div class="td_preview inactiveThread"><a href="/app/webtexting/thread.php?extension_uuid=fe91be7c-ecb2-4661-9d3a-bcf27099221b&amp;number=12063801161" class="thread-link"><div class="thread-preview-container inactiveThread"><span class="thread-name inactiveThread">12063801161</span><span class="timestamp inactiveThread" data-timestamp="2023-11-29 22:45:09.679273">5 days ago</span><span class="thread-last-message inactiveThread">MMS message</span></div></a></div></div>
+                    <div class="tr_replace inactiveThread" last_message="[object Object]"><div class="td_preview inactiveThread"><a href="/app/webtexting/thread.php?extension_uuid=fe91be7c-ecb2-4661-9d3a-bcf27099221b&amp;number=12063801161" class="thread-link"><div class="thread-preview-container inactiveThread"><span class="thread-name inactiveThread">12063801161</span><span class="timestamp inactiveThread" data-timestamp="2023-11-29 22:45:09.679273">5 days ago</span><span class="thread-last-message inactiveThread">MMS message</span></div></a></div></div>
+                    <div class="tr_replace inactiveThread" last_message="[object Object]"><div class="td_preview inactiveThread"><a href="/app/webtexting/thread.php?extension_uuid=fe91be7c-ecb2-4661-9d3a-bcf27099221b&amp;number=12063801161" class="thread-link"><div class="thread-preview-container inactiveThread"><span class="thread-name inactiveThread">12063801161</span><span class="timestamp inactiveThread" data-timestamp="2023-11-29 22:45:09.679273">5 days ago</span><span class="thread-last-message inactiveThread">MMS message</span></div></a></div></div>
+                    <div class="tr_replace inactiveThread" last_message="[object Object]"><div class="td_preview inactiveThread"><a href="/app/webtexting/thread.php?extension_uuid=fe91be7c-ecb2-4661-9d3a-bcf27099221b&amp;number=12063801161" class="thread-link"><div class="thread-preview-container inactiveThread"><span class="thread-name inactiveThread">12063801161</span><span class="timestamp inactiveThread" data-timestamp="2023-11-29 22:45:09.679273">5 days ago</span><span class="thread-last-message inactiveThread">MMS message</span></div></a></div></div>
+                    <div class="tr_replace inactiveThread" last_message="[object Object]"><div class="td_preview inactiveThread"><a href="/app/webtexting/thread.php?extension_uuid=fe91be7c-ecb2-4661-9d3a-bcf27099221b&amp;number=12063801161" class="thread-link"><div class="thread-preview-container inactiveThread"><span class="thread-name inactiveThread">12063801161</span><span class="timestamp inactiveThread" data-timestamp="2023-11-29 22:45:09.679273">5 days ago</span><span class="thread-last-message inactiveThread">MMS message</span></div></a></div></div>
+                    <div class="tr_replace inactiveThread" last_message="[object Object]"><div class="td_preview inactiveThread"><a href="/app/webtexting/thread.php?extension_uuid=fe91be7c-ecb2-4661-9d3a-bcf27099221b&amp;number=12063801161" class="thread-link"><div class="thread-preview-container inactiveThread"><span class="thread-name inactiveThread">12063801161</span><span class="timestamp inactiveThread" data-timestamp="2023-11-29 22:45:09.679273">5 days ago</span><span class="thread-last-message inactiveThread">MMS message</span></div></a></div></div>
+                    <div class="tr_replace inactiveThread" last_message="[object Object]"><div class="td_preview inactiveThread"><a href="/app/webtexting/thread.php?extension_uuid=fe91be7c-ecb2-4661-9d3a-bcf27099221b&amp;number=12063801161" class="thread-link"><div class="thread-preview-container inactiveThread"><span class="thread-name inactiveThread">12063801161</span><span class="timestamp inactiveThread" data-timestamp="2023-11-29 22:45:09.679273">5 days ago</span><span class="thread-last-message inactiveThread">MMS message</span></div></a></div></div>
+                    <div class="tr_replace inactiveThread" last_message="[object Object]"><div class="td_preview inactiveThread"><a href="/app/webtexting/thread.php?extension_uuid=fe91be7c-ecb2-4661-9d3a-bcf27099221b&amp;number=12063801161" class="thread-link"><div class="thread-preview-container inactiveThread"><span class="thread-name inactiveThread">12063801161</span><span class="timestamp inactiveThread" data-timestamp="2023-11-29 22:45:09.679273">5 days ago</span><span class="thread-last-message inactiveThread">MMS message</span></div></a></div></div>
+                    <div class="tr_replace inactiveThread" last_message="[object Object]"><div class="td_preview inactiveThread"><a href="/app/webtexting/thread.php?extension_uuid=fe91be7c-ecb2-4661-9d3a-bcf27099221b&amp;number=12063801161" class="thread-link"><div class="thread-preview-container inactiveThread"><span class="thread-name inactiveThread">12063801161</span><span class="timestamp inactiveThread" data-timestamp="2023-11-29 22:45:09.679273">5 days ago</span><span class="thread-last-message inactiveThread">MMS message</span></div></a></div></div>
+                    <div class="tr_replace inactiveThread" last_message="[object Object]"><div class="td_preview inactiveThread"><a href="/app/webtexting/thread.php?extension_uuid=fe91be7c-ecb2-4661-9d3a-bcf27099221b&amp;number=12063801161" class="thread-link"><div class="thread-preview-container inactiveThread"><span class="thread-name inactiveThread">12063801161</span><span class="timestamp inactiveThread" data-timestamp="2023-11-29 22:45:09.679273">5 days ago</span><span class="thread-last-message inactiveThread">MMS message</span></div></a></div></div>
+                    <div class="tr_replace inactiveThread" last_message="[object Object]"><div class="td_preview inactiveThread"><a href="/app/webtexting/thread.php?extension_uuid=fe91be7c-ecb2-4661-9d3a-bcf27099221b&amp;number=12063801161" class="thread-link"><div class="thread-preview-container inactiveThread"><span class="thread-name inactiveThread">12063801161</span><span class="timestamp inactiveThread" data-timestamp="2023-11-29 22:45:09.679273">5 days ago</span><span class="thread-last-message inactiveThread">MMS message</span></div></a></div></div>
+                    <div class="tr_replace inactiveThread" last_message="[object Object]"><div class="td_preview inactiveThread"><a href="/app/webtexting/thread.php?extension_uuid=fe91be7c-ecb2-4661-9d3a-bcf27099221b&amp;number=12063801161" class="thread-link"><div class="thread-preview-container inactiveThread"><span class="thread-name inactiveThread">12063801161</span><span class="timestamp inactiveThread" data-timestamp="2023-11-29 22:45:09.679273">5 days ago</span><span class="thread-last-message inactiveThread">MMS message</span></div></a></div></div>
+                    <div class="tr_replace inactiveThread" last_message="[object Object]"><div class="td_preview inactiveThread"><a href="/app/webtexting/thread.php?extension_uuid=fe91be7c-ecb2-4661-9d3a-bcf27099221b&amp;number=12063801161" class="thread-link"><div class="thread-preview-container inactiveThread"><span class="thread-name inactiveThread">12063801161</span><span class="timestamp inactiveThread" data-timestamp="2023-11-29 22:45:09.679273">5 days ago</span><span class="thread-last-message inactiveThread">MMS message</span></div></a></div></div>
+                    <div class="tr_replace inactiveThread" last_message="[object Object]"><div class="td_preview inactiveThread"><a href="/app/webtexting/thread.php?extension_uuid=fe91be7c-ecb2-4661-9d3a-bcf27099221b&amp;number=12063801161" class="thread-link"><div class="thread-preview-container inactiveThread"><span class="thread-name inactiveThread">12063801161</span><span class="timestamp inactiveThread" data-timestamp="2023-11-29 22:45:09.679273">5 days ago</span><span class="thread-last-message inactiveThread">MMS message</span></div></a></div></div>
             </div>
         </div>
     </div>
@@ -84,7 +96,7 @@ export default {
 
 
 .threadlist_container {
-    height: 80vh;
+    height: 100%;
     grid-column-start: 1;
     grid-column-end: 1;
     padding-right: 0.25rem;
@@ -94,15 +106,26 @@ export default {
 .hide-if-small{
 }
 
+.threadlist-header{
+    box-shadow: 0 4px 4px -2px white;
+    margin: 0 auto 3px auto;
+    padding: 1em;
+    background-color: #5f9fd3;
+    color: #fff;
+    border-top-left-radius: 0.5em;
+    border-top-right-radius: 0.5em;
+    font-weight: bold;
+    border: solid #5f9fd3 2px;
+}
 
-
-.table {
+.threadlist-table {
     /*border-spacing: 1em; */
     direction: rtl;
-    overflow-y: scroll;
+    overflow-y: auto;
     height: 80vh;
     width: 100%;
     table-layout: fixed;
+    
 }
 
 
diff --git a/frontend/components/ThreadPreview/ThreadPreview.vue b/frontend/components/ThreadPreview/ThreadPreview.vue
index 61c55a9..4306e9d 100644
--- a/frontend/components/ThreadPreview/ThreadPreview.vue
+++ b/frontend/components/ThreadPreview/ThreadPreview.vue
@@ -167,18 +167,6 @@ export default {
     color: white;
 }
 
-/*
-.timestamp.activeThread:hover {
-    color:gray;
-}
-.thread-name.activeThread:hover{
-    color:gray;
-}
-
-.thread-last-message.activeThread:hover {
-    color: gray;
-}*/
-
 .tr_replace:hover {
     background-color: #aaaaaa;
 }
@@ -187,8 +175,6 @@ export default {
 .thread-preview-container {
     border-radius: 1em;
     padding: 0.5625em;
-    /* margin-bottom: 0.5em;
-    min-height: calc(50px + 1em); */
     display: grid;
     grid-template-rows: auto;
     grid-template-columns: 0 auto auto;
@@ -235,17 +221,14 @@ export default {
 }
 
 .tr_replace.activeThread {
-    background-color: #5f9fd3;
+    background-color: #3178B1;
 }
 
 .tr_replace.activeThread:hover {
     background-color: #aaaaaa;
 }
 
-.tr_replace:first-child {
-    border-top-left-radius: 0.5rem;
-    border-top-right-radius: 0.5rem;
-}
+
 
 .tr_replace:last-child {
     border-bottom-left-radius: 0.5rem;
diff --git a/frontend/components/WebTextingContainer/WebTextingContainer.vue b/frontend/components/WebTextingContainer/WebTextingContainer.vue
index 7a09254..4d98753 100644
--- a/frontend/components/WebTextingContainer/WebTextingContainer.vue
+++ b/frontend/components/WebTextingContainer/WebTextingContainer.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
 import Conversation from '../conversation/Conversation.vue';
-import ThreadList from '../ThreadList/ThreadList.vue'
+import ThreadList from '../ThreadList/ThreadList.vue';
 import ConvoPlaceholder from '../ConvoPlaceholder.vue';
 import { RouterView } from 'vue-router';
 import { emitter } from '../../lib/global';
@@ -59,7 +59,7 @@ The blank space should notify the user that they can select a thread to display
 
 
         <div id="WEB_TEXT_ROOT">
-            <link type="text/css" href="../../../js/style.css">
+            
             <RouterView name="leftSide" :ownNumber="this.$props.ownNumber" :threads="this.$props.threads"
                 :threadPreviews="this.$props.threadPreviews" 
                 :selectedConvo="this.conversationSelected"/>
@@ -75,6 +75,7 @@ The blank space should notify the user that they can select a thread to display
                     :selectedConvo="this.conversationSelected" 
                     v-bind="calculateDisplayName" />
             </suspense>
+            <link type="text/css" href="../../../js/style.css">
         </div>
     </RouterView>
 </template>
@@ -84,22 +85,17 @@ The blank space should notify the user that they can select a thread to display
     width: 10px;
     height:10px;
     padding-top:3px;
-    border-radius: 3px;
-}
-
-::-webkit-scrollbar-track {
-    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.4); 
-    border-radius: 6px;
     background-color: white;
-    margin-top: 5px;
 }
 
+
+
 ::-webkit-scrollbar-thumb {
     border-radius: 6px;
-    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9); 
-    background-color: lightgray;
+    -webkit-box-shadow: inset 0 0 6px rgba(255,255,255,0.5); 
+    background-color: #BB6025;
 }
-@media screen and (width<700px){
+@media screen and (width<=700px){
     #main_content{
         margin-top:48px;
         border-radius:0;
@@ -109,6 +105,12 @@ The blank space should notify the user that they can select a thread to display
         height:93vh;
     }
 } 
+@media screen and (width<=575px){
+    .navbar-toggler{
+        background-color: #3178B1;
+    }
+
+}
 
 
 </style>
\ No newline at end of file
diff --git a/frontend/components/conversation/Conversation.vue b/frontend/components/conversation/Conversation.vue
index 727b6bf..22cd387 100644
--- a/frontend/components/conversation/Conversation.vue
+++ b/frontend/components/conversation/Conversation.vue
@@ -391,9 +391,7 @@ export default {
 .messages {
     height: 80vh;
     margin: 0 auto;
-    border-left: solid #5f9fd3 2px;
-    border-right: solid #5f9fd3 2px;
-    border-bottom: solid #5f9fd3 2px;
+
     border-bottom-left-radius: 0.5em;
     border-bottom-right-radius: 0.5em;
     padding-left: 0.5em;
@@ -405,14 +403,12 @@ export default {
 }
 
 .thread-header {
-    box-shadow: 0 4px 2px -2px gray;
-    margin: 0 auto;
+    box-shadow: 0 4px 4px -2px white;
+    margin: 0 auto 3px auto;
     padding: 1em;
     background-color: #5f9fd3;
     color: #fff;
-    border-top-left-radius: 0.5em;
-    border-top-right-radius: 0.5em;
-    border-bottom: solid grey 2px;
+
     font-weight: bold;
 }
 
@@ -467,6 +463,13 @@ table {
     width: 100%;
     table-layout: fixed;
 }
+.thread-container{
+    border: solid  #5f9fd3 2px;
+    border-bottom-left-radius: 0.5em;
+    border-bottom-right-radius: 0.5em;
+    border-top-left-radius: 0.5em;
+    border-top-right-radius: 0.5em;
+}
 
 @media screen and (width >700px) {
     .back-link {
diff --git a/frontend/components/new-thread-modal/NewThreadModal.vue b/frontend/components/new-thread-modal/NewThreadModal.vue
new file mode 100644
index 0000000..3ec9bc5
--- /dev/null
+++ b/frontend/components/new-thread-modal/NewThreadModal.vue
@@ -0,0 +1,26 @@
+<script lang="ts">
+
+import { MessageData, emitter, state } from '../../lib/global';
+import moment from 'moment';
+</script>
+
+<template>
+    <form method='get' action="newthread.php" onsubmit="clean_number()">
+        <input type="hidden" name="extension_uuid" value="<?php echo $extension['extension_uuid']; ?>" />
+        <div id='new-thread-modal' class='modal-window'>
+            <div>
+                <span title="" class='modal-close' onclick="modal_close(); ">&times</span>
+                <span class='modal-title'>New Message</span>
+                <span class='modal-message'>Enter Number: <input type="text" name="number" id="new-thread-number" placeholder="(206) 555-1212" /></span>
+                <span class='modal-actions'>
+                    <button type='button' alt='Cancel' title='Cancel' onclick='modal_close();' class='btn btn-default' ><span class='fas fa-times fa-fw'></span><span class='button-label never pad'>Cancel</span></button>
+                    <button type='submit' name='action' value='Ok' id='btn_ok' alt='ok' title='ok' onclick='modal_close();' class='btn btn-default' style='float: right; margin-left: 15px' ><span class='fas fa-check fa-fw'></span><span class='button-label never pad'>Start</span></button>
+                </span>
+            </div>
+        </div>
+        <input type='hidden' name='key_uuid' id='key_uuid'/>
+        </form>
+</template>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/frontend/routes/index.ts b/frontend/routes/index.ts
index 3288d5a..b056baa 100644
--- a/frontend/routes/index.ts
+++ b/frontend/routes/index.ts
@@ -26,6 +26,14 @@ export const router = createRouter({
                     rightSide: ConversationVue
                 }
             },
+            {
+                path:'/createthread.php',
+                components:{
+                    leftSide: ThreadList,
+                    rightSide: ConvoPlaceholderVue,
+                }
+                    
+            },
             
         ]
         }
diff --git a/newthread.php b/newthread.php
new file mode 100644
index 0000000..7150198
--- /dev/null
+++ b/newthread.php
@@ -0,0 +1,6 @@
+<?php 
+        //$sql = "INSERT INTO webtexting_threads (domain_uuid, remote_number, local_number, last_message) VALUES (:domain_uuid, :from, :to, NOW())";
+
+$url = $_SERVER["HTTP_ORIGIN"]."/app/webtexting/thread.php?extension_uuid=".$_GET["extension_uuid"]."&number=".$_GET["number"];
+header("Location: ".$url); 
+?>
\ No newline at end of file