wip

app/plugins/bookmarks/controllers/api/bookmark_folders.php

@@ -22,13 +22,12 @@ class BookmarkFolders extends ApiController {
     protected static $folders;
 
     public function __construct() {
+        header('Access-Control-Allow-Origin: *');
         parent::__construct();
         self::$folders = new Folders;
     }
 
     public function create() {
-        header('Access-Control-Allow-Origin: *');
-
         $user = self::$authToken->createdBy;
 
         $payload = @file_get_contents('php://input');
@@ -54,7 +53,6 @@ class BookmarkFolders extends ApiController {
     }
 
     public function list( $id = '' ) {
-        header('Access-Control-Allow-Origin: *');
         $user = self::$authToken->createdBy;
         $folders = self::$folders->bySpecificUser( $user );
 

app/plugins/bookmarks/controllers/extensions.php

@@ -1,9 +1,10 @@
 <?php
 /**
- * app/controllers/extensions.php
+ * app/plugins/bookmarks/controllers/extensions.php
  *
  * This is the extensions controller.
  *
+ * @package TP Bookmarks
  * @version 3.0
  * @author  Joey Kimsey <Joey@thetempusproject.com>
  * @link    https://TheTempusProject.com
@@ -15,10 +16,17 @@ use TheTempusProject\Classes\Controller;
 use TheTempusProject\Houdini\Classes\Views;
 use TheTempusProject\Houdini\Classes\Issues;
 use TheTempusProject\TheTempusProject as App;
+use TheTempusProject\Hermes\Functions\Route as Routes;
+use TheTempusProject\Models\Token;
+use TheTempusProject\Houdini\Classes\Components;
+use TheTempusProject\Models\Folders;
+use TheTempusProject\Houdini\Classes\Template;
+use TheTempusProject\Bedrock\Functions\Input;
 
 class Extensions extends Controller {
     public function index() {
         self::$title = 'Browser Extensions';
+        self::$pageDescription = 'Our extensions cover all major browsers with the notable exception of Safari. Chrome, Opera, Brave, Firefox, and Edge are all represented; giving users a simple way to add bookmarks and folders from any page.';
         if ( App::$isLoggedIn ) {
             Issues::add( 'success', 'We also have a simple solution to using the app from your mobile devices <a href="/extensions/mobile">here</a>.' );
         }
@@ -27,39 +35,114 @@ class Extensions extends Controller {
 
     public function mobile() {
         self::$title = 'Mobile Bookmarklet';
+        self::$pageDescription = 'When you find yourself on the go, sometimes an extension isn\'t an option. For those times, we have the mobile bookmarklet to allow you to add bookmarks from your mobile devices.';
+
         if ( ! App::$isLoggedIn ) {
-            return Issues::add( 'error', 'Unfortunately you will need to sign in to generate the bookmarklet unique to your account.' );
+            Issues::add( 'notice', 'Since the bookmarklet is tied directly to your account, you will need to <a href="/home/login">log in</a> to generate the code for your account.' );
+            return Views::view( 'bookmarks.extensions.bookmarkletExplainer' );
         }
+
+        if ( Input::exists('privacy') ) {
+            $privacy = 'const privacy = "' . Input::post('privacy') . '";';
+        } else {
+            $privacy = 'const privacy = prompt("Enter privacy level (e.g., public/private):");';
+        }
+        Components::set( 'BK_JS_PRIVACY', $privacy );
+
+        if ( Input::exists('includeDescription') ) {
+            $description = 'const notes = prompt("Enter a description (optional):");';
+        } else {
+            $description = '';
+        }
+        Components::set( 'BK_JS_NOTES', $description );
+
+        if ( Input::exists('includeColor') ) {
+            $color = 'const color = "'.Input::post('color').'";';
+        } else {
+            $color = '';
+        }
+        Components::set( 'BK_JS_COLOR', $color );
+
+        if ( Input::exists('includeFolder') ) {
+            $folder = 'const folder = "'.Input::post('folder_id').'";';
+        } else {
+            $folder = '';
+        }
+        Components::set( 'BK_JS_FOLDER', $folder );
+
+        $this->setFolderSelect(Input::post('folder'));
+
+        $tokens = new Token;
+        $apiKey = $tokens->findOrCreateUserToken( App::$activeUser->ID, true );
+        $apiUrl = Routes::getAddress() . 'api/bookmarks/create';
+        Components::set( 'BK_API_KEY', $apiKey );
+        Components::set( 'BK_API_URL', $apiUrl );
+
         Views::view( 'bookmarks.extensions.bookmarklet' );
     }
 
     public function chrome() {
         self::$title = 'Chrome Extension';
+        self::$pageDescription = 'Our Chrome extension allows you to quickly add new bookmarks or folders right from your browser\'s toolbar.';
         Views::view( 'bookmarks.extensions.chrome' );
     }
 
     public function firefox() {
         self::$title = 'Firefox Extension';
+        self::$pageDescription = 'Our Firefox extension allows you to quickly add new bookmarks or folders right from your browser\'s toolbar.';
         Views::view( 'bookmarks.extensions.firefox' );
     }
 
     public function opera() {
         self::$title = 'Opera Extension';
+        self::$pageDescription = 'Our Opera extension allows you to quickly add new bookmarks or folders right from your browser\'s toolbar.';
         Views::view( 'bookmarks.extensions.opera' );
     }
 
     public function edge() {
         self::$title = 'Edge Extension';
+        self::$pageDescription = 'Our Edge extension allows you to quickly add new bookmarks or folders right from your browser\'s toolbar.';
         Views::view( 'bookmarks.extensions.edge' );
     }
 
     public function brave() {
         self::$title = 'Brave Extension';
+        self::$pageDescription = 'Our Brave extension allows you to quickly add new bookmarks or folders right from your browser\'s toolbar.';
         Views::view( 'bookmarks.extensions.brave' );
     }
 
     public function safari() {
         self::$title = 'Safari Extension';
+        self::$pageDescription = 'Our Safari extension allows you to quickly add new bookmarks or folders right from your browser\'s toolbar.';
         Views::view( 'bookmarks.extensions.safari' );
     }
+
+    private function setFolderSelect( $folderID = null ) {
+        $folders = new Folders;
+        $options = $folders->simpleByUser();
+        $out = '';
+        $out .= '<select name="folder_id" id="folder_id" class="form-control">';
+        if ( isset( $options[0] ) ) {
+            $assocOptions = [];
+            foreach ( $options as $key => $value ) {
+                $assocOptions[$value] = $value;
+            }
+            $options = $assocOptions;
+        }
+        if ( ! empty( $options ) ) {
+            foreach ( $options as $fieldname => $value ) {
+                if ( $value == $folderID ) {
+                    $selected = ' selected';
+                } else {
+                    $selected = '';
+                }
+                $out .= '<option value="' . $value . '"' . $selected . '>' . $fieldname . '</option>';
+            }
+        } else {
+            $out .= '<option value="0" selected>No Folder</option>';
+        }
+        $out .= '</select>';
+        $folderSelect = Template::parse( $out );
+        Components::set( 'folderSelect', $folderSelect );
+    }
 }

app/plugins/bookmarks/js/bookmarklet.js

@@ -0,0 +1,35 @@
+javascript:(function() {
+    const apiKey = localStorage.getItem('notAnAuthToken');
+    const apiUrl = localStorage.getItem('api_url');
+    const name = prompt("Enter a name for the bookmark:");
+    const notes = prompt("Enter any notes (optional):");
+    const color = prompt("Enter a color (optional):");
+    const privacy = prompt("Enter privacy level (e.g., public/private):");
+    const folder = prompt("Enter a folder (optional):");
+    const url = window.location.href;
+
+    if (!name) {
+        alert("Name is required.");
+        return;
+    }
+
+    fetch(apiUrl, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            'Authorization': `Bearer ${apiKey}`
+        },
+        body: JSON.stringify({ name, url, notes, color, privacy, folder })
+    })
+    .then(response => {
+        if (response.ok) {
+            alert("Bookmark saved successfully!");
+        } else {
+            alert("Failed to save bookmark. Please check your API key.");
+        }
+    })
+    .catch(error => {
+        console.error(error);
+        alert("An unknown error occurred while saving the bookmark.");
+    });
+})();

app/plugins/bookmarks/js/bookmarks.js

@@ -20,12 +20,19 @@ document.addEventListener('DOMContentLoaded', () => {
     toggleVisibility('dashShareButtonSwitch', 'btn-share');
 
     // Retrieve the list of collapsed folderCard IDs from local storage
-    const collapsedFolders = JSON.parse(localStorage.getItem( 'collapsedFolders' )) || [];
+    
+    const onDashboard = document.getElementById("dash_id");
+    let collapsedFolders;
+    if ( onDashboard ) {
+        collapsedFolders = JSON.parse(localStorage.getItem( 'collapsedDashFolders' + onDashboard.value  )) || [];
+    } else {
+        collapsedFolders = JSON.parse(localStorage.getItem( 'collapsedFolders' )) || [];
+    }
 
     // Collapse the elements stored in local storage when the page loads
     collapsedFolders.forEach((folderId) => {
         const collapseElement = document.querySelector(`#Collapse${folderId}`);
-        if (collapseElement) {
+        if ( collapseElement ) {
             collapseElement.classList.remove('show');
         }
     });
@@ -40,19 +47,31 @@ document.addEventListener('DOMContentLoaded', () => {
 
         // Listen for collapse and expand events
         collapseElement.addEventListener('hidden.bs.collapse', () => {
+            let storageName;
             // Add the folderCard ID to local storage when collapsed
             if (!collapsedFolders.includes(folderCardId)) {
                 collapsedFolders.push(folderCardId);
-                localStorage.setItem( 'collapsedFolders' , JSON.stringify(collapsedFolders));
+                if ( onDashboard ) {
+                    storageName = 'collapsedDashFolders' + onDashboard.value;
+                } else {
+                    storageName = 'collapsedFolders';
+                }
+                localStorage.setItem( storageName , JSON.stringify(collapsedFolders));
             }
         });
 
         collapseElement.addEventListener('shown.bs.collapse', () => {
+            let storageName;
             // Remove the folderCard ID from local storage when expanded
             const index = collapsedFolders.indexOf(folderCardId);
             if (index > -1) {
                 collapsedFolders.splice(index, 1);
-                localStorage.setItem( 'collapsedFolders' , JSON.stringify(collapsedFolders));
+                if ( onDashboard ) {
+                    storageName = 'collapsedDashFolders' + onDashboard.value;
+                } else {
+                    storageName = 'collapsedFolders';
+                }
+                localStorage.setItem( storageName , JSON.stringify(collapsedFolders));
             }
         });
     });
@@ -180,10 +199,11 @@ function updateDashLinkOrder() {
 }
 
 function loadDashLinkOrder() {
+    const onDashboard = document.getElementById("dash_id");
     const storedOrder = localStorage.getItem("manageFolderOrder"); // Get the saved order
     const bookmarkSort = document.getElementById("bookmarkSort");
     
-    if (!storedOrder || !bookmarkSort) return; // Exit if no saved order or no container
+    if ( onDashboard || !storedOrder || !bookmarkSort ) return; // Exit if no saved order or no container
   
     const orderArray = storedOrder.split(","); // Convert the saved order into an array
     const bookmarkCards = Array.from(document.querySelectorAll("#bookmarkSort .bookmark-card"));

app/plugins/bookmarks/views/bookmarks/create.html

@@ -21,14 +21,14 @@
 
 
                 <div class="mb-3 row">
-                    <label for="title" class="col-lg-5 col-form-label text-end">Description:</label>
+                    <label for="description" class="col-lg-5 col-form-label text-end">Description:</label>
                     <div class="col-lg-3">
                         <textarea class="form-control" name="description" maxlength="2000" rows="10" cols="50" id="description"></textarea>
                     </div>
                 </div>
                 {folderSelect}
                 <div class="mb-3 row">
-                    <label for="title" class="col-lg-5 col-form-label text-end">Privacy</label>
+                    <label for="privacy" class="col-lg-5 col-form-label text-end">Privacy</label>
                     <div class="col-lg-3">
                         <select id="privacy" name="privacy" class="form-control">
                             <option value="private">Private</option>
@@ -37,7 +37,7 @@
                     </div>
                 </div>
                 <div class="mb-3 row">
-                    <label for="title" class="col-lg-5 col-form-label text-end">Color</label>
+                    <label for="color" class="col-lg-5 col-form-label text-end">Color</label>
                     <div class="col-lg-3" id="colorContainer">
                         {colorSelect}
                     </div>

app/plugins/bookmarks/views/dashboards/view.html

@@ -5,6 +5,7 @@
         <form method="post">
             <fieldset>
                 <input type="hidden" name="token" value="{TOKEN}">
+                <input type="hidden" name="dash_id" id="dash_id" value="{ID}">
                 <input type="hidden" name="link_order" value="{link_order}" id="dashLinkOrder">
                 <div class="row g-3" id="bookmarkSort">
                     {folderPanels}

app/plugins/bookmarks/views/extensions/bookmarklet.html

@@ -8,31 +8,75 @@
                 Since you can't use extensions on mobile, you can log in from your mobile device and visit this page. 
             </p>
             <p>
-                Below is a code snippet that you can copy, then create a new bookmark on your mobile device as you would normally. 
-                Before saving the bookmark, change the name to something simple like "ATB Bookmarker" and paste thiis code as the url.
+                Below is a code snippet that you can copy. Copy the code, then create a new bookmark on your mobile device as you would normally. 
+                Before saving the bookmark, change the name to something simple like "ATB Bookmarker" and paste this code as the url.
             </p>
             <p>
                 Once you have the bookmarklet saved, you can simply go to your mobile bookmarks while on a page and this snippet will grab the info you need and add it to you account.
             </p>
         </div>
+        <div class="context-second-bg p-4 border m-4">
+            <form method="post">
+                <fieldset>
+                    <!-- Privacy -->
+                    <div class="d-flex align-items-center border p-2 rounded mb-3 context-main-bg">
+                        <div class="me-3 fw-bold">Default privacy:</div>
+                        <div class="">
+                            <select id="privacy" name="privacy" class="form-control">
+                                <option value="private">Private</option>
+                                <option value="public">Public</option>
+                            </select>
+                        </div>
+                    </div>
+                    <!-- Description -->
+                    <div class="d-flex align-items-center border p-2 rounded mb-3 context-main-bg">
+                        <div class="me-3 fw-bold">Ask for Description:</div>
+                        <div class="form-check form-switch">
+                            <input class="form-check-input" type="checkbox" id="includeDescription" name="includeDescription"{editModeSwitch_IS_CHECKED}>
+                            <label class="form-check-label" for="includeDescription"></label>
+                        </div>
+                    </div>
+                    <!-- Color -->
+                    <div class="d-flex align-items-center border p-2 rounded mb-3 context-main-bg">
+                        <div class="me-3 fw-bold">Include a default color:</div>
+                        <div class="form-check form-switch">
+                            <input class="form-check-input" type="checkbox" id="includeColor" name="includeColor"{editModeSwitch_IS_CHECKED}>
+                            <label class="form-check-label" for="includeColor"></label>
+                        </div>
+                        <div class="">
+                            {colorSelect}
+                        </div>
+                    </div>
+                    <!-- Folder -->
+                    <div class="d-flex align-items-center border p-2 rounded mb-3 context-main-bg">
+                        <div class="me-3 fw-bold">Include a default folder:</div>
+                        <div class="form-check form-switch">
+                            <input class="form-check-input" type="checkbox" id="includeFolder" name="includeFolder"{editModeSwitch_IS_CHECKED}>
+                            <label class="form-check-label" for="includeFolder"></label>
+                        </div>
+                        <div class="">
+                            {folderSelect}
+                        </div>
+                    </div>
+                </fieldset>
+                <div class="card-footer d-flex justify-content-center align-items-center context-main-bg">
+                    <button type="submit" name="submit" value="submit" class="btn btn-md atb-green-outline my-2">Refresh Code</button>
+                </div>
+            </form>
+        </div>
         
-        <div class="">
+        <div class="context-second-bg p-4">
             <pre lang="javascript">
                 javascript:(function() {
-                    const apiKey = localStorage.getItem('notAnAuthToken');
-                    const apiUrl = localStorage.getItem('api_url');
-                    const name = prompt("Enter a name for the bookmark:");
-                    const notes = prompt("Enter any notes (optional):");
-                    const color = prompt("Enter a color (optional):");
-                    const privacy = prompt("Enter privacy level (e.g., public/private):");
-                    const folder = prompt("Enter a folder (optional):");
+                    const apiKey = "{BK_API_KEY}";
+                    const apiUrl = "{BK_API_URL}";
                     const url = window.location.href;
-                
-                    if (!apiKey) {
-                        alert("You must sign in to obtain an auth token.");
-                        return;
-                    }
-                
+                    const name = prompt("Enter a name for the bookmark:");
+                    {BK_JS_NOTES}
+                    {BK_JS_COLOR}
+                    {BK_JS_PRIVACY}
+                    {BK_JS_FOLDER}
+
                     if (!name) {
                         alert("Name is required.");
                         return;

app/plugins/bookmarks/views/extensions/bookmarkletExplainer.html

@@ -0,0 +1,19 @@
+<div class="col-10 offset-md-1 context-main-bg p-4 my-5">
+    <legend class="text-center">Mobile Bookmarklet</legend>
+    <hr>
+    <div class="col-8 offset-2 ">
+        <div class="h5">
+            <p>
+                You can quickly and easily add bookmarks to your AllTheBookmarks account from any mobile device. 
+                Since you can't use extensions on mobile, you can log in from your mobile device and visit this page.
+            </p>
+            <p>
+                Once logged in, there will be a code snippet that you can copy. Copy the code, then create a new bookmark on your mobile device as you would normally. 
+                Before saving the bookmark, change the name to something simple like "ATB Bookmarker" and paste this code as the url.
+            </p>
+            <p>
+                Once you have the bookmarklet saved, you can simply go to your mobile bookmarks while on a page and this snippet will grab the info you need and add it to you account.
+            </p>
+        </div>
+    </div>
+</div>

app/plugins/bookmarks/views/tutorials/edge/export.html

@@ -0,0 +1,48 @@
+<section class="container my-5">
+    <div class="card shadow-sm">
+        <div class="card-body context-main-bg">
+            <h2 class="card-title text-center mb-4">How to Export bookmarks in Edge</h2>
+            {tutorialCrumbs}
+            <hr>
+            <p class="card-text">
+                Exporting your bookmarks is lightning fast and simple inside of Edge.
+            </p>
+
+            <h5 class="mt-4">Step 1: open the main application menu </h5>
+            <p class="card-text">
+                Simply left-click these three dots on the right side of your main toolbar.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/edge/settings.png" class="img-fluid rounded mb-4" alt="Right-clicking on the extension icon">
+            </div>
+
+            <h5>Step 2: Open the Bookmark Menu</h5>
+            <p class="card-text">
+                In the list, select <strong>Favorites</strong> and another menu should appear.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/edge/favorites.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+
+            <h5>Step 3: Open the Favorites Options</h5>
+            <p class="card-text">
+                In this menu, on the top right click the three dots for a final dropdown.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/edge/bookmark-options.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+
+            <h5>Step 4: Export your bookmarks</h5>
+            <p class="card-text">
+                From this list, select <strong>Export favorites</strong> and you should be taken to the import page.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/edge/export.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+
+            <p class="card-text">
+                Finally, save the <strong>.html</strong> file somewhere easy to access when you use the <a href="/bookmarks/import" class="text-decoration-none atb-green">imports</a> feature.
+            </p>
+        </div>
+    </div>
+</section>

app/plugins/bookmarks/views/tutorials/edge/import.html

@@ -0,0 +1,64 @@
+<section class="container my-5">
+    <div class="card shadow-sm">
+        <div class="card-body context-main-bg">
+            <h2 class="card-title text-center mb-4">How to Import bookmarks in Edge</h2>
+            {tutorialCrumbs}
+            <hr>
+            <p class="card-text">
+                Importing your bookmarks from AllTheBookmarks is lightning fast and simple inside of Edge.
+            </p>
+
+            <h5 class="mt-4">Step 1: open the main application menu </h5>
+            <p class="card-text">
+                Simply left-click these three dots on the right side of your main toolbar.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/edge/settings.png" class="img-fluid rounded mb-4" alt="Right-clicking on the extension icon">
+            </div>
+
+            <h5>Step 2: Open the Bookmark Menu</h5>
+            <p class="card-text">
+                In the list, select <strong>Favorites</strong> and another menu should appear.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/edge/favorites.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+
+            <h5>Step 3: Open the Favorites Options</h5>
+            <p class="card-text">
+                In this menu, on the top right click the three dots for a final dropdown.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/edge/bookmark-options.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+
+            <h5>Step 4: Open the Import Page</h5>
+            <p class="card-text">
+                From this list, select <strong>Import favorites</strong> and you should be taken to the import page.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/edge/import.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+            
+            <h5>Step 5: Open the Importer</h5>
+            <p class="card-text">
+                On this page, under the title <strong>Import from other browsers</strong> click the button labeled <strong>Choose what to import</strong>.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/edge/import-menu.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+
+            <h5>Step 6: Begin Importing</h5>
+            <p class="card-text">
+                Under <strong>Import from</strong> make sure to select <strong>Favorites or bookmarks HTML file</strong>.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/edge/import-select.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+
+            <p class="card-text">
+                Finally, select the <strong>.html</strong> file you saved when using the <a href="/bookmarks/export" class="text-decoration-none atb-green">exports</a> feature.
+            </p>
+        </div>
+    </div>
+</section>

app/plugins/bookmarks/views/tutorials/edge/pin.html

@@ -0,0 +1,36 @@
+<section class="container my-5">
+    <div class="card shadow-sm">
+        <div class="card-body context-main-bg">
+            <h2 class="card-title text-center mb-4">How to pin the extension to your toolbar in Edge</h2>
+            {tutorialCrumbs}
+            <hr>
+            <div class="alert alert-success w-100 text-center" role="alert">
+                If you have not already installed the AllTheBookmarks Edge extension, you can find it in the 
+                <a href="#" class="text-decoration-none text-primary" target="_blank">Microsoft Store</a>.
+            </div>
+            <p class="card-text">
+                Once installed, you can add the extension to your Edge toolbar with just a few easy steps.
+            </p>
+            <h5 class="mt-4">Step 1: Find the extensions icon on your toolbar.</h5>
+            <p class="card-text">
+                It should look like this:
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/edge/extensions-icon.png" class="img-fluid rounded mb-4" alt="Right-clicking on the extension icon">
+            </div>
+            <h5>Step 2: Left click this icon and a list of your currently installed extensions should show.</h5>
+            <p class="card-text">
+                Next to AllTheBookmarks, on the right you should see an eye icon, click this.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/edge/pin.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+            <p class="card-text">
+                Once pinned, you should see the AllTheBookmarks icon on the toolbar.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/edge/pinned.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+        </div>
+    </div>
+</section>

app/plugins/bookmarks/views/tutorials/edge/settings.html

@@ -0,0 +1,37 @@
+<section class="container my-5">
+    <div class="card shadow-sm">
+        <div class="card-body context-main-bg">
+            <h2 class="card-title text-center mb-4">How to Access Extension Settings in Edge</h2>
+            {tutorialCrumbs}
+            <hr>
+            <div class="alert alert-success w-100 text-center" role="alert">
+                If you have not already installed the AllTheBookmarks Edge extension, you can find it in the 
+                <a href="#" class="text-decoration-none text-primary" target="_blank">Microsoft Store</a>.
+            </div>
+            <p class="card-text">
+                With Edge, accessing the extension settings couldn't be easier.
+            </p>
+
+            <h5 class="mt-4">Step 1: Locate the Extension Icon</h5>
+            <p class="card-text">
+                Simply locate the AllTheBookmarks icon on your toolbar and right-click the icon.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/edge/options.png" class="img-fluid rounded mb-4" alt="Right-clicking on the extension icon">
+            </div>
+
+            <h5>Step 2: Open the Options</h5>
+            <p class="card-text">
+                From the dropdown menu that appears, select <strong>Extension Options</strong>. You should be greeted by a settings page very similar to the one below.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/edge/settings-page.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+
+            <p class="card-text">
+                (If you need help pinning the extension to your toolbar for easy access, we have a separate 
+                <a href="/tutorials/edge/pin" class="text-decoration-none atb-green">tutorial</a> for that.)
+            </p>
+        </div>
+    </div>
+</section>

app/plugins/bookmarks/views/tutorials/firefox/export.html

@@ -5,7 +5,7 @@
             {tutorialCrumbs}
             <hr>
             <p class="card-text">
-                Exporting your bookmarks is lightning fast and simple inside of firefox.
+                Exporting your bookmarks is lightning fast and simple inside of Firefox.
             </p>
 
             <h5 class="mt-4">Step 1: open the main application menu </h5>
@@ -32,7 +32,7 @@
                 <img src="/app/plugins/bookmarks/images/firefox/manage-bookmarks.png" class="img-fluid rounded mb-4" alt="Extension settings page">
             </div>
 
-            <h5>Step 3: Open the Import Menu</h5>
+            <h5>Step 4: Open the Export Menu</h5>
             <p class="card-text">
                 On this page, near the top left, you should see a button that says <strong>Import and Backup</strong>. Click this button and another menu should appear.
             </p>

app/plugins/bookmarks/views/tutorials/firefox/pin.html

@@ -20,7 +20,7 @@
             </div>
             <h5>Step 2: Left click this icon and a list of your currently installed extensions should show.</h5>
             <p class="card-text">
-                Next to AllTheBookmarks, on the right you should see a pin icon, click this.
+                Next to AllTheBookmarks, on the right you should see a settings icon, click this then select <strong>Pin to Toolbar</strong>
             </p>
             <div class="text-center">
                 <img src="/app/plugins/bookmarks/images/firefox/pin.png" class="img-fluid rounded mb-4" alt="Extension settings page">

app/plugins/bookmarks/views/tutorials/firefox/settings.html

@@ -9,22 +9,40 @@
                 <a href="/firefox" class="text-decoration-none text-primary" target="_blank">Firefox Store</a>.
             </div>
             <p class="card-text">
-                With Firefox, accessing the extension settings couldn't be easier.
+                With Firefox, accessing the extension settings is a breeze.
             </p>
+
             <h5 class="mt-4">Step 1: Locate the Extension Icon</h5>
             <p class="card-text">
                 Simply locate the AllTheBookmarks icon on your toolbar and right-click the icon.
             </p>
             <div class="text-center">
-                <img src="/app/plugins/bookmarks/images/firefox/options.png" class="img-fluid rounded mb-4" alt="Right-clicking on the extension icon">
+                <img src="/app/plugins/bookmarks/images/firefox/icon.png" class="img-fluid rounded mb-4" alt="Right-clicking on the extension icon">
             </div>
-            <h5>Step 2: Open the Options</h5>
+
+            <h5>Step 2: Open the Add-on manage page</h5>
             <p class="card-text">
-                From the dropdown menu that appears, select <strong>Options</strong>. You should be greeted by a settings page very similar to the one below.
+                From the dropdown menu that appears, select <strong>Manage Extension</strong>.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/firefox/manage.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+
+            <h5>Step 3: Open the extension setting page</h5>
+            <p class="card-text">
+                The extension management page should appear similar to this. In the top right, click these three dots and select <strong>Options</strong>.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/firefox/manage-select.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+            
+            <p class="card-text">
+                You should be greeted by a settings page very similar to the one below.
             </p>
             <div class="text-center">
                 <img src="/app/plugins/bookmarks/images/firefox/settings-page.png" class="img-fluid rounded mb-4" alt="Extension settings page">
             </div>
+
             <p class="card-text">
                 (If you need help pinning the extension to your toolbar for easy access, we have a separate 
                 <a href="/tutorials/firefox/pin" class="text-decoration-none atb-green">tutorial</a> for that.)

app/plugins/bookmarks/views/tutorials/opera/export.html

@@ -0,0 +1,40 @@
+<section class="container my-5">
+    <div class="card shadow-sm">
+        <div class="card-body context-main-bg">
+            <h2 class="card-title text-center mb-4">How to Export bookmarks in Opera</h2>
+            {tutorialCrumbs}
+            <hr>
+            <p class="card-text">
+                Exporting your bookmarks is lightning fast and simple inside of Opera.
+            </p>
+
+            <h5 class="mt-4">Step 1: open the main application menu </h5>
+            <p class="card-text">
+                Simply left-click these three dots in the bottom left of the browser window.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/opera/sidebar.png" class="img-fluid rounded mb-4" alt="Right-clicking on the extension icon">
+            </div>
+
+            <h5>Step 2: Open the Bookmark Menu</h5>
+            <p class="card-text">
+                In the list, click the icon next to <strong>Bookmarks</strong> and another window should open.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/opera/bookmarks.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+
+            <h5>Step 4: Export your bookmarks</h5>
+            <p class="card-text">
+                In the bottom right of the page, click <strong>Import / Export</strong> and select <strong>Export Bookmarks</strong>.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/opera/export.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+
+            <p class="card-text">
+                Finally, save the <strong>.html</strong> file somewhere easy to access when you use the <a href="/bookmarks/import" class="text-decoration-none atb-green">imports</a> feature.
+            </p>
+        </div>
+    </div>
+</section>

app/plugins/bookmarks/views/tutorials/opera/import.html

@@ -0,0 +1,48 @@
+<section class="container my-5">
+    <div class="card shadow-sm">
+        <div class="card-body context-main-bg">
+            <h2 class="card-title text-center mb-4">How to Import bookmarks in Opera</h2>
+            {tutorialCrumbs}
+            <hr>
+            <p class="card-text">
+                Importing your bookmarks from AllTheBookmarks is lightning fast and simple inside of Opera.
+            </p>
+
+            <h5 class="mt-4">Step 1: open the main application menu </h5>
+            <p class="card-text">
+                Simply left-click these three dots in the bottom left of the browser window.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/opera/sidebar.png" class="img-fluid rounded mb-4" alt="Right-clicking on the extension icon">
+            </div>
+
+            <h5>Step 2: Open the Bookmark Menu</h5>
+            <p class="card-text">
+                In the list, click the icon next to <strong>Bookmarks</strong> and another window should open.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/opera/bookmarks.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+
+            <h5>Step 3: Open the Import Page</h5>
+            <p class="card-text">
+                In the bottom right of the page, click <strong>Import / Export</strong> and select <strong>Import Bookmarks</strong> and you should be taken to the import page.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/opera/import.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+
+            <h5>Step 4: Begin Importing</h5>
+            <p class="card-text">
+                In this menu, click the dropdown and make sure to select <strong>Bookmarks HTML file</strong>.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/opera/import-select.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+
+            <p class="card-text">
+                Finally, select the <strong>.html</strong> file you saved when using the <a href="/bookmarks/export" class="text-decoration-none atb-green">exports</a> feature.
+            </p>
+        </div>
+    </div>
+</section>

app/plugins/bookmarks/views/tutorials/opera/pin.html

@@ -0,0 +1,46 @@
+<section class="container my-5">
+    <div class="card shadow-sm">
+        <div class="card-body context-main-bg">
+            <h2 class="card-title text-center mb-4">How to pin the extension to your toolbar in Opera</h2>
+            {tutorialCrumbs}
+            <hr>
+            <div class="alert alert-success w-100 text-center" role="alert">
+                If you have not already installed the AllTheBookmarks Opera extension, you can find it in the 
+                <a href="#" class="text-decoration-none text-primary" target="_blank">Opera Store</a>.
+            </div>
+            <p class="card-text">
+                Once installed, you can add the extension to your Opera toolbar with just a few easy steps.
+            </p>
+            <h5 class="mt-4">Step 1: Find the extensions icon on your toolbar.</h5>
+            <p class="card-text">
+                It should look like this:
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/opera/extensions.png" class="img-fluid rounded mb-4" alt="Right-clicking on the extension icon">
+            </div>
+            
+            <h5 class="mt-4">Step 0: Reveal the extensions toolbar. ( This step may not be required for all users ).</h5>
+            <p class="card-text">
+                If you find that you are having trouble locating the extensions icon, double check that the additional toolbar is expanded.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/opera/toolbar.png" class="img-fluid rounded mb-4" alt="Right-clicking on the extension icon">
+            </div>
+
+            <h5>Step 2: Left click this icon and a list of your currently installed extensions should show.</h5>
+            <p class="card-text">
+                Next to AllTheBookmarks, on the right you should see an eye icon, click this.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/opera/pin.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+
+            <p class="card-text">
+                Once pinned, you should see the AllTheBookmarks icon on the toolbar.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/opera/pinned.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+        </div>
+    </div>
+</section>

app/plugins/bookmarks/views/tutorials/opera/settings.html

@@ -0,0 +1,37 @@
+<section class="container my-5">
+    <div class="card shadow-sm">
+        <div class="card-body context-main-bg">
+            <h2 class="card-title text-center mb-4">How to Access Extension Settings in Opera</h2>
+            {tutorialCrumbs}
+            <hr>
+            <div class="alert alert-success w-100 text-center" role="alert">
+                If you have not already installed the AllTheBookmarks Opera extension, you can find it in the 
+                <a href="#" class="text-decoration-none text-primary" target="_blank">Opera Store</a>.
+            </div>
+            <p class="card-text">
+                With Opera, accessing the extension settings couldn't be easier.
+            </p>
+
+            <h5 class="mt-4">Step 1: Locate the Extension Icon</h5>
+            <p class="card-text">
+                Simply locate the AllTheBookmarks icon on your toolbar and right-click the icon.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/opera/options.png" class="img-fluid rounded mb-4" alt="Right-clicking on the extension icon">
+            </div>
+
+            <h5>Step 2: Open the Options</h5>
+            <p class="card-text">
+                From the dropdown menu that appears, select <strong>Options</strong>. You should be greeted by a settings page very similar to the one below.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/opera/settings-page.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+            
+            <p class="card-text">
+                (If you need help pinning the extension to your toolbar for easy access, we have a separate 
+                <a href="/tutorials/opera/pin" class="text-decoration-none atb-green">tutorial</a> for that.)
+            </p>
+        </div>
+    </div>
+</section>