docs link added. welcome page link added. see #684

_locales/en/messages.json

@@ -931,6 +931,22 @@
     "message": "Click here, it only takes a minute!",
     "description": ""
   },
+  "prefs_doc_title": {
+    "message": "Documentation",
+    "description": ""
+  },
+  "prefs_doc_setup_guide": {
+    "message": "Setup Guides",
+    "description": ""
+  },
+  "prefs_doc_custom_prompt_tutorial": {
+    "message": "Custom Prompt Tutorial",
+    "description": ""
+  },
+  "prefs_doc_open_welcome": {
+    "message": "Open the Welcome Page",
+    "description": ""
+  },
   "prefs_OpenAIComp_ForceModel": {
     "message": "Manually insert model",
     "description": ""

options/mzta-options.css

@@ -131,7 +131,7 @@ div#miczTranslate{
     border-radius: 4px;
 }
 
-#mzta_top_msg div{
+#mzta_top_msg > td > div{
     color: #212529;
     font-style: italic;
     background-color: #e0e0e0;
@@ -154,6 +154,40 @@ div#miczTranslate{
     border:0 !important;
 }
 
+#mzta_top_msg > td:first-child{
+    position: relative;
+}
+
+#mzta_top_msg > td:first-child > div{
+    position: absolute;
+    inset: 2px;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+#mzta_doc_block{
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    align-items: center;
+}
+
+.doc_links{
+    display: flex;
+    gap: 12px;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+.doc_welcome{
+    border-top: 1px solid rgba(0,0,0,0.15);
+    padding-top: 6px;
+    width: 100%;
+    text-align: center;
+}
+
 .btn_small{
     font-size: 0.8em;
 }
@@ -219,7 +253,7 @@ label:has(input[type="checkbox"]) {
         filter: invert(1);
     }
 
-    #mzta_top_msg div{
+    #mzta_top_msg > td > div{
         color:#EEEEEE;
         background-color: #313131;
     }
@@ -227,11 +261,15 @@ label:has(input[type="checkbox"]) {
     #mzta_top_msg div a{
         color: #00ADB5;
     }
-    
+
     #mzta_top_msg div a:hover{
         color: #FF5722;
     }
 
+    .doc_welcome{
+        border-top-color: rgba(255,255,255,0.15);
+    }
+
     #no_sparks td{
         background: #3b514f;
     }

options/mzta-options.html

@@ -10,7 +10,24 @@
     <div id="miczStatusPage" class="conntype_chatgpt_web"><a href="https://micz.it/thunderbird-addon-thunderai/status/">__MSG_prefs_status_page__</a></div>
     <table id="miczPrefs">
       <tr id="mzta_top_msg">
-        <td colspan="2"><div>__MSG_prefs_SurveyLinkText__<br><a href="https://forms.gle/1qK2wcbuhaRzhwyt9">__MSG_prefs_SurveyLinkText2__</a></div></td>
+        <td>
+          <div>
+            __MSG_prefs_SurveyLinkText__<br>
+            <a href="https://forms.gle/1qK2wcbuhaRzhwyt9">__MSG_prefs_SurveyLinkText2__</a>
+          </div>
+        </td>
+        <td>
+          <div id="mzta_doc_block">
+            <span class="doc_title">__MSG_prefs_doc_title__</span>
+            <div class="doc_links">
+              <a href="https://micz.it/thunderbird-addon-thunderai/guides/">__MSG_prefs_doc_setup_guide__</a>
+              <a href="https://micz.it/thunderbird-addon-thunderai/tutorial/">__MSG_prefs_doc_custom_prompt_tutorial__</a>
+            </div>
+            <div class="doc_welcome">
+              <a href="#" id="btn_welcome">__MSG_prefs_doc_open_welcome__</a>
+            </div>
+          </div>
+        </td>
       </tr>
       <tr id="thstats">
         <td colspan="2">

options/mzta-options.js

@@ -359,6 +359,10 @@ document.addEventListener('DOMContentLoaded', async () => {
 
   document.getElementById('reset_max_prompt_length').addEventListener('click', resetMaxPromptLength);
 
+  document.getElementById('btn_welcome').addEventListener('click', async () => {
+      await browser.tabs.create({ url: "../pages/onboarding/onboarding.html" });
+  });
+
   browser.runtime.getPlatformInfo().then(info => {
     taLog.log("OS: " + info.os);
     if ((info.os === "linux")&&(prefs_opt.chatgpt_win_height!=0)&&(prefs_opt.chatgpt_win_width!=0)){