Copying updates back to active 1.2.5. Added back ability to turn off …

…tab grouping

- Added ability to drag from url bar onto topic in Topic Manager
- Error checking for disallowed actions in Side Panel
- Check for newer synced file before saving

versions/1.2/app/bt.css

@@ -543,7 +543,7 @@ textarea:focus, input[type="text"]:focus {
     position: absolute;
     width: 96%;
     left: 2%;
-    height: 318px;
+    height: 380px;
     top: 200px;
     z-index: 5;
     background-color: #888;

versions/1.2/app/bt.js

@@ -496,7 +496,6 @@ function initializeUI() {
 
     updateStatsRow(configManager.getProp('BTTimestamp'));   // show updated stats w last save time
 }
-
 function reCreateButtonRow() {
     // For some unknown reason very occasionally the buttonRow div gets lost/deleted
     console.log("RECREATING BUTTONROW!!");
@@ -557,11 +556,74 @@ function dragStart(event, ui) {
     $(this).addClass("dragTarget");
     makeRowsDroppable(node);
 }
+
+/* 
+    Set dragover handler for content area. Needed to allow dropping from url bar.
+    NB only want first (of many) firings
+    */
+function contentDragoverHandler(event) {
+    event.preventDefault();
+    if (!contentDragoverHandler.droppableInitialized) {
+        console.log('#content dragover initialized');
+        makeRowsDroppable();
+        contentDragoverHandler.droppableInitialized = true;
+    }
+
+    // Scroll handling. Skip this event if it's too soon since the last scroll
+    const now = Date.now();
+    if (now - contentDragoverHandler.lastScrollTime < 50) return;
+    contentDragoverHandler.lastScrollTime = now;
+
+    const container = document.documentElement;
+    const scrollSpeed = 10; // Adjust scroll speed as needed
+    const scrollThreshold = 100; // Distance from edge to start scrolling
+
+    const mouseY = event.clientY;
+    if (mouseY < (container.scrollTop + scrollThreshold)) {
+        container.scrollTop -= scrollSpeed;        // Scroll up
+    } else if (mouseY > (window.innerHeight - scrollThreshold)) {
+        container.scrollTop += scrollSpeed;        // Scroll down
+    }
+}
+$("#content").on("dragover", contentDragoverHandler);
+
 function makeRowsDroppable(node) {
     // make rows droppable
-    console.log("into makeRowsDroppable");
+
+    // Detect when a tab url is being dragged from the browser into the topic manager. 
+    // Handled differently cos can't use JQuery and drop is a create not a move. 
+    // dragover and dragleave trigger jq's over and out events
+    $("table.treetable tr").on("dragover", function (event) {
+        event.preventDefault(); // Allow drop
+        $(this).data("ui-droppable")._trigger("over", event, { draggable: null });
+    });
+    $("table.treetable tr").on("dragleave", function (event) {
+        $(this).data("ui-droppable")._trigger("out", event, { draggable: null });
+    });
+    // This drop is creating a new node, not moving an existing one, as below.
+    $("table.treetable tr").on("drop", function (event) {
+        event.preventDefault();
+        let dataTransfer = event.originalEvent.dataTransfer;
+        if (!dataTransfer) return;
+        let url = dataTransfer.getData("text/uri-list") || dataTransfer.getData("text/plain");
+
+        if (url) {
+            const dropNode = $($(".dropOver")[0]).parent();
+            const dropNodeId = $(dropNode).attr('data-tt-id');
+            if (dropNode && dropNodeId && AllNodes[dropNodeId]) {
+                console.log("Dropped URL:", url, " under node id:", dropNodeId);
+                // Create new node by simulating a save of the active tab
+                sendMessage({'function': 'saveTabs', 'type': 'Tab', 
+                            'topic': AllNodes[dropNodeId].topicPath, 'url': url, 'from':'btwindow'});
+            }
+        }
+        // We're done. Clean up the display and reset the handler for next time
+        $("table.treetable td").removeClass(["dropOver", "dropOver-pulse"]);
+        $("#content").on("dragover", contentDragoverHandler);
+    });
 
     $("table.treetable tr").droppable({
+        accept: "*", // Accept any draggable
         drop: function(event, ui) {
             // Remove unfold timeout
             const timeout = $(this).data('unfoldTimeout');
@@ -601,6 +663,7 @@ function makeRowsDroppable(node) {
     });
 
     // disable droppable for self and all descendants, can't drop into self!
+    if (!node) return;
     let ids = node.getDescendantIds();
     ids.push(node.id);
     ids.forEach(id => {
@@ -971,6 +1034,7 @@ function tabPositioned(data, highlight = false) {
     const windowId = data.windowId;
     const parentId = AllNodes[nodeId]?.parentId || nodeId;
 
+    if (!node) return;
     node.tabId = tabId;         
     node.windowId = windowId;
     node.tabIndex = tabIndex;

versions/1.2/app/configManager.js

@@ -130,8 +130,8 @@ const configManager = (() => {
         // NB settings change is not visible any more but leaving ability to turn on via console for now
         let groupMode = configManager.getProp('BTGroupingMode');
         if (groupMode) {
-            // const $radio = $('#tabGroupToggle :radio[name=grouping]');
-            // $radio.filter(`[value=${groupMode}]`).prop('checked', true);
+            const $radio = $('#tabGroupToggle :radio[name=grouping]');
+            $radio.filter(`[value=${groupMode}]`).prop('checked', true);
             GroupingMode = groupMode;
 	    }
 
@@ -213,15 +213,13 @@ const configManager = (() => {
             sendMessage({'function': 'localStore', 'data': {'BTManagerHome': newHome}});
         });
 
-        /*
         $('#tabGroupToggle :radio').change(function () {
             const oldVal = GroupingMode;
             const newVal = $(this).val();
             GroupingMode = newVal;
             configManager.setProp('BTGroupingMode', GroupingMode);
             groupingUpdate(oldVal, newVal);
         });
-        */
 
         $('#syncSetting :radio').change(async function () {
             try {

versions/1.2/app/fileManager.js

@@ -74,18 +74,24 @@ async function saveBT(localOnly = false, newContent = true) {
         InitialInstall = false;
     }
 
-    // also save to GDrive or local file if connected and drop an event
-    let event = "local_storage_save";
+    // also check before saving, save to GDrive or local file if connected and drop an event
+    let eventType = "local_storage_save";
+    const warnNewer = await checkBTFileVersion();
+    if ((warnNewer) && 
+        (confirm("The synced version of your BrainTool file has newer data. \n\nClick OK the refresh from it, or Cancel to overwrite with this change."))) {
+            refreshTable(true);
+            return;
+    }
     if (GDriveConnected) {
         await gDriveFileManager.saveBT(BTFileText, newContent);     // if !newContent, don't force re-auth
-        event = "gdrive_save";
+        eventType = "gdrive_save";
     } else if (LocalFileConnected) {
         await localFileManager.saveBT(BTFileText);
-        event = "local_file_save";
+        eventType = "local_file_save";
     }
     updateStatsRow();                            // update num cards etc
     messageManager.removeWarning();              // remove stale warning if any
-    gtag('event', event, {'event_category': 'Save', 'event_label': 'NumNodes', 'value': AllNodes.length});
+    gtag('event', eventType, {'event_category': 'Save', 'event_label': 'NumNodes', 'value': AllNodes.length});
     configManager.incrementStat('BTNumSaves');
 }
 
@@ -128,7 +134,7 @@ function savePendingP() {
 }
 
 async function checkBTFileVersion() {
-    // pass to correct file manager
+    // pass to correct file manager, true if sync file is newer than local
     if (GDriveConnected)
         return await gDriveFileManager.checkBTFileVersion();
     if (LocalFileConnected)

versions/1.2/app/index.html

@@ -126,22 +126,6 @@
           <div class="settingsFootnote">* Applies next time the Topic Manager is opened.</div>
           <hr/>
         </div>
-        <!--
-        <div id="settingsGrouping">
-          <div class="settingsSubtitle">Use Tabgroups?</div>
-          <div id="tabGroupToggle" class="settingsInput">
-            <span>
-              <input type="radio" id="settingsGroupingTG" name="grouping" value="TABGROUP" checked>
-              <label for="settingsGroupingTG">Yes</label>
-            </span>
-            <span>
-              <input type="radio" id="settingsGroupingTab" name="grouping" value="NONE">
-              <label for="settingsGroupingTab">No</label>
-            </span>
-          </div>
-          <hr/>
-        </div>
-      -->
 
         <div id="settingsSync">
           <div class="settingsSubtitle">Sync To:</div>
@@ -280,6 +264,21 @@
           </div>
           <hr/>
       </div>
+
+      <div id="settingsGrouping">
+        <div class="settingsSubtitle">Use Tabgroups?</div>
+        <div id="tabGroupToggle" class="settingsInput">
+          <span>
+            <input type="radio" id="settingsGroupingTG" name="grouping" value="TABGROUP" checked>
+            <label for="settingsGroupingTG">Yes</label>
+          </span>
+          <span>
+            <input type="radio" id="settingsGroupingTab" name="grouping" value="NONE">
+            <label for="settingsGroupingTab">No</label>
+          </span>
+        </div>
+        <hr/>
+      </div>
 
         <div id="settingsSubscription">
           <div class="settingsSubtitle">Supporter Status:</div>

versions/1.2/app/localFileManager.js

@@ -140,6 +140,11 @@ const localFileManager = (() => {
             alert("Sorry, local file saving is not supported on your browser (NB Brave has a config setting to enable.)");
             return null;
         }
+        if (configManager.getProp('BTManagerHome') == 'SIDEPANEL') {
+            alert("Local file saving cannot be initiated from Sidepanel view. \n\nPlease set the Topic Manager Location to Window or Tab to perform this action.");
+            return null;
+        }
+
         alert("Choose where you want to store your BrainTool file");
         const options = {startIn: 'documents', create: true};
         LocalDirectoryHandle = await window.showDirectoryPicker(options);

versions/1.2/app/messageManager.js

@@ -47,6 +47,7 @@ const messageManager = (() => {
         "Welcome to the BrainTool 1.2!<br/>See the <a target='_blank' href='https://braintool.org/support/releaseNotes.html'>release notes</a> for a list of changes.",
         "The Topic Manager can now run inside the browser window in a side panel. See Settings.",
         "Check out the new ToDo and search results filtering! Click the ⭐️ or <img src='resources/filter.svg' style='height:20px;vertical-align:middle'> button in Search.",
+        "You can now drag a tab from the URL bar and drop onto the Topic Manager to add a page to a given topic.",
     ];
     const introSlidesArray = [
         `<p>This window is the <b>Topic Manager</b>.</p><p>It allows you to open and close tabs, tab groups, and browser windows, organize them into nested <b>Topics</b> and find them again when you need them.</p><img class="introImage" src="resources/slide1.png"/>`,

versions/1.2/extension/awesomplete.js

@@ -30,7 +30,7 @@ var _ = function (input, o) {
 
 	configure(this, {
 		minChars: 2,
-		maxItems: 10,
+		maxItems: 15,
 		autoFirst: false,
 		data: _.DATA,
 		filter: _.FILTER_CONTAINS,

versions/1.2/extension/background.js

@@ -116,7 +116,6 @@ async function getBTTabWin(reset = false) {
     if (p.BTTab || p.BTWin) getBTTabWin.cachedValue = [p.BTTab, p.BTWin];
     return getBTTabWin.cachedValue || [0, 0];
 }
-
 function check(msg='') {
     // check for error
     if (chrome.runtime.lastError) {
@@ -907,7 +906,7 @@ async function saveTabs(msg, sender) {
     // Create array of appropriate tab data and send to BT window
 
     const currentTabs = msg.currentWindowId ? await chrome.tabs.query({'active': true, 'windowId': msg.currentWindowId}) : [];
-    const currentTab = currentTabs[0];
+    const currentTab = currentTabs[0]|| {} ;
     const saveType = msg.type;
     const [BTTab, BTWin] = await getBTTabWin();
     const allTabs = await getOpenTabs();                             // array of tabs
@@ -948,6 +947,12 @@ async function saveTabs(msg, sender) {
             tab['topic'] = (topic ? topic+":" : "📝 Scratch:") + sessionName + (tgName ? tgName : winName) + (todo ? ':'+todo : '');
             tabsToSave.push(tab);
         }
+        if (saveType == 'Tab' && t.url == msg.url) {
+            // special case for msg sent from ui in case of tab drag onto tree
+            tab['topic'] = msg.topic
+            tab['title'] = t.title;                               // original or popup-edited tab title
+            tabsToSave.push(tab);
+        }
     });
     // Send save msg to BT.
     if (tabsToSave.length) btSendMessage({'function': 'saveTabs', 'saveType':saveType, 'tabs': tabsToSave, 'note': msg.note, 'close': msg.close});

versions/1.2/extension/manifest.json

@@ -3,7 +3,7 @@
     "name": "__MSG_appName__",
     "description": "__MSG_appDesc__",
     "default_locale": "en",
-    "version": "1.2.4",
+    "version": "1.2.5",
     "permissions": ["tabs", "storage", "tabGroups", "webNavigation", "bookmarks", "sidePanel"],
 
     "background": {

versions/1.2/extension/sidePanel.html

@@ -8,15 +8,16 @@
       padding: 0;
       width: 100%;
       height: 100%;
+      background-color: whitesmoke;
     }
     iframe {
       height: 100%;
-      width: calc(100% - 15px); /* Full width minus the left and right margins */
+      width: calc(100% - 12px); /* Full width minus the left and right margins */
       border: none;
       display: block;
       position: relative;
       margin-left: 10px;
-      margin-right: 5px;
+      margin-right: 2px;
     }
   </style>
   <script src="btContentScript.js"></script>