Zen Haven Main Discussion

[12th-devs]

@Darsh-A, @ferrocyante, @JustAdumbPrsn, I want to make this real, any help is appreciated I am going to add you all as collaborators while I found out the best way to fix the tab issues.

[12th-devs]

@greeeen-dev you are probably busy but you are more then welcome to contribute as well.

[greeeen-dev]

idk how to use userchrome js sorry

[12th-devs]

It is not very hard just read this if you would like too.

https://github.com/MrOtherGuy/fx-autoconfig

[12th-devs]

@logicsec I am also adding you to this.

[ferrocyante]

add slowlife i think he is js master he developed zen media player

[logicsec]

Hello!

I am going to push a PR here shortly for the fixes I did yesterday. Can you add me as authorized to push commits on the repo?

[ferrocyante]

@Anoms12 slowlife asked for to do list he will see accordingly what help he can do

[12th-devs]

@ferrocyante

• Full download history with a native file viewer: Darsh-A

• Fluent workspace integration allowing for advanced tab control, maybe instead of the reset button we make it a copy link button: ???

• Tab history support that allows for easy navigation; including a search button: Anoms12

• A ‘special’ feature that makes Haven stand out: ???

• More native UI: Anoms12

[12th-devs]

That was done quickly, I want to do more but need more time to think

[12th-devs]

@logicsec it says you are pending an invite, can you expect it?

[12th-devs]

Full download history: Darsh-A
Search downloads
Native file view of standard formats
Easy copy method to use downloads where needed
Fluent workspace integration allowing for advanced tab control: ???
Copy link button when you hover over the tab icon
Workspace creation form in Zen Haven
Tab history support that allows for easy navigation: Anoms12
Search for history
Group by domain
Easy way to delete history
Native password manager
Use Firefox backend, give Zen feeling
Bookmark integration
A ‘special’ feature that makes Haven stand out: ???
More native UI: Anoms12
Zen-like animations: logic

[Darsh-A]

2025-04-10.22-35-08.mp4

Progress on Downloads:

• Will remove the file section if theres no file downloads, would look nice with just images
  Or tbh just remove the section for which theres no elements (Files/Images/Docs) or maybe not idk? But will remove files if they are not there.

• Need to add functionality:

1. Search
2. Preview for Images and Docs
3. Icon for Files
4. Click to open Files

• Clean up the ui

1. Change the arrow icon
2. Add pretty pretty colors

[Darsh-A]

Had to ditch the Download.mjs route cause that only works for on session Downloads and not download History.
Tbh to figure out how to get download history took about 3-4 hours.
Anyways Will also add a compact mode which will just be a boring aah list sorted by date

[12th-devs]

Looks great, sorry it took so long, thank you!

[12th-devs]

Should we have the navigator-toolbox be fixed to a specific width or keep the zen sidebar width?

[12th-devs]

That would be perfect, I will work on that and commit it when I fix the page content not bleeding

[ferrocyante]

btw @Anoms12 we have created a private thread regarding this project on discord server if you are on discord then we would add you tell us your discord id so that you can keep in check with progress and contact in urgency

[12th-devs]

@ferrocyante I am not, please reach me here, I apologize for the inconvenience. Here is what I have so far:

Also, how should we handle toolbar overflow? and what should we have it open to, workspace, history, or downloads?

[ferrocyante]

now i am thinking haven navigator toolbar should be of fixed width and as small as arc has it idk but unnecessary large width for buttons feels odd

[12th-devs]

@ferrocyante your choice, it's an easy change so just play around with it

[Darsh-A]

Can anyone work on a Notes tab, Similar to Arc?
And maybe have support to link to Onenote, Google Tasks, or anything else thats popular

[12th-devs]

I will take a swing at it tomorrow, any specifics in mind?

[Darsh-A]

For now this would work.
Later on

• Groups for them (manual only)
• Creating a note through selected text anywhere in the browser for quick note creation
• Sync them with popular Note taking platforms (google tasks and all)

[12th-devs]

If you want to make changes to the downloads UI that I committed earlier, please go ahead. I am going to sleep.

[12th-devs]

@Darsh-A @logicsec, do any of you know how to make a new about: page? I need one for the notes app

[12th-devs]

@mauro-balades Sorry for the ping, but do you know how I can do this? I am currently stuck.

[mr-cheffy]

A bit complicated, you can't with just JS

[12th-devs]

@Darsh-A how much longer on that PR?

[Darsh-A]

got busy with some stuff will take a look tmr

[12th-devs]

@Darsh-A Ok, if you have time I would appreciate it if you just throw your code into a branch or fork, or just here. I am trying to decide the best for this project right now.

[12th-devs]

@ferrocyante can I get your tab folder color autoconfig & CSS please? I love my advanced tab groups and all, but I come from Arc on Windows and miss the folders.

[12th-devs]

@Darsh-A @ferrocyante I GOT TAB FOLDERS TO WORK WITH AUTOCONFIG!!!! (They still have lots of issues, but nesting works properly, with modified advanced tab groups.)

Recording.2025-04-19.070753.mp4

[ferrocyante]

@ferrocyante what was your problem you were having?

umm sorry i replied for wrong message i meant u were asking for tab grps css that i gave given
@Anoms12

[ferrocyante]

@ferrocyante what was your problem you were having?

dw about that soon actual tab grps will be implemented so dont need to do much hassle

[12th-devs]

Ok, well how can I help you further @ferrocyante ?

[Darsh-A]

WOAHHH fireeee
alot happened since i went away lmfao

[12th-devs]

@Darsh-A here you go. It is buggy.

// Tab Folders implementation for Firefox
class TabFolders {
    constructor() {
        console.log('TabFolders: Initializing...');
        this.init();
    }

    init() {
        try {
            console.log('TabFolders: Starting initialization');
            this.#initContextMenu();
            this.#addFolderStyles();
            this.#initEventListeners();
            console.log('TabFolders: Initialization completed successfully');
        } catch (error) {
            console.error('TabFolders initialization failed:', error);
        }
    }

    #addFolderStyles() {
        try {
            console.log('TabFolders: Adding folder styles');
            const styleSheet = document.createElement('style');
            styleSheet.id = 'tabfolders-styles';
            styleSheet.textContent = `
                /* Indentation for nested folders */
                tab-group[nested-level] {
                    margin-left: var(--nested-indent, 10px) !important;
                }
            `;
            document.head.appendChild(styleSheet);
            console.log('TabFolders: Folder styles added successfully');
        } catch (error) {
            console.error('TabFolders: Failed to add folder styles:', error);
        }
    }

    #initContextMenu() {
        try {
            console.log('TabFolders: Initializing context menu');
            const tabContextMenu = document.getElementById('tabContextMenu');
            if (tabContextMenu) {
                const menuItem = window.MozXULElement.parseXULToFragment(`
                    <menuitem id="tab-folder-context-new" 
                             label="New Folder"/>
                `);
                tabContextMenu.appendChild(menuItem);
                console.log('TabFolders: Context menu item added successfully');
                document.getElementById('tab-folder-context-new')
                    .addEventListener('command', () => this.#onNewFolder());
            } else {
                console.warn('TabFolders: tabContextMenu element not found');
            }
        } catch (error) {
            console.error('Context menu initialization failed:', error);
        }
    }

    #initEventListeners() {
        console.log('TabFolders: Setting up event listeners');
        const events = [
            ['TabGrouped', this.#onTabGrouped],
            ['TabUngrouped', this.#onTabUngrouped],
            ['TabGroupRemoved', this.#onTabGroupRemoved],
            ['TabGroupCreate', this.#onTabGroupCreate],
            ['TabPinned', this.#onTabPinned],
            ['TabUnpinned', this.#onTabUnpinned]
        ];

        for (const [event, handler] of events) {
            console.log(`TabFolders: Adding listener for ${event}`);
            window.addEventListener(event, handler.bind(this));
        }

        window.addEventListener('unload', () => {
            console.log('TabFolders: Cleaning up on window unload');
            this.cleanup();
        });
    }

    #onTabGrouped(event) {
        const tab = event.target;
        const group = tab?.group;
        
        // Early return if no group or tab
        if (!tab || !group) return;

        // Set pinned state and update folder
        if (group.hasAttribute('folder-group')) {
            group.pinned = tab.pinned;
            this.#updateFolderState(group);
        }
    }

    #onTabUngrouped(event) {
        const tab = event.target;
        const group = event.detail;
        
        // Early return if no group
        if (!group?.hasAttribute('folder-group')) return;

        this.#updateFolderState(group);
    }

    #onTabGroupCreate(event) {
        const group = event.target;
        
        // Early return if no group or not pinned
        if (!group?.pinned) return;
        
        group.setAttribute("folder-group", "true");
        this.#updateFolderState(group);
    }

    #onTabGroupRemoved(event) {
        const group = event.target;
        if (group.hasAttribute("folder-group")) {
          Array.from(group.querySelectorAll("tab")).forEach(tab => {
            tab.removeAttribute("folder-tab");
          });
        }
    }

    #onTabPinned(event) {
        const tab = event.target;
        const group = tab.group;
        if (group && group.hasAttribute("folder-group")) {
          group.pinned = true;
        }
    }

    #onTabUnpinned(event) {
        const tab = event.target;
        const group = tab.group;
        if (group && group.hasAttribute("folder-group")) {
          group.pinned = false;
        }
    }

    #onNewFolder() {
        console.log('TabFolders: Creating new folder');
        try {
            // Get all tabs and identify selected ones
            const allTabs = Array.from(gBrowser.tabs);
            
            // Get both multiselected tabs and the currently selected tab
            const multiselectedTabs = allTabs.filter(tab => tab.multiselected);
            const selectedTab = gBrowser.selectedTab;
            
            // If we have multiselected tabs, use those. Otherwise, use just the selected tab
            const selectedTabs = multiselectedTabs.length > 0 ? multiselectedTabs : [selectedTab];
            
            const tabs = selectedTabs.filter(tab => tab && tab.parentNode);

            if (!tabs.length) {
                console.warn('TabFolders: No valid tabs selected for new folder');
                return;
            }

            // Create a new tab group element
            const group = document.createXULElement('tab-group');
            group.setAttribute('folder-group', 'true');

            // Check for parent folder
            const parentGroup = tabs[0].closest('tab-group[folder-group="true"]');
            
            // Handle folder insertion
            if (parentGroup) {
                const parentLevel = parseInt(parentGroup.getAttribute('nested-level') || '0');
                group.setAttribute('nested-level', parentLevel + 1);
                parentGroup.appendChild(group);
            } else {
                const insertPoint = gBrowser.verticalPinnedTabsContainer?.querySelector(".vertical-pinned-tabs-container-separator");
                if (insertPoint) {
                    insertPoint.parentNode.insertBefore(group, insertPoint);
                } else {
                    gBrowser.verticalPinnedTabsContainer?.appendChild(group) || 
                    gBrowser.tabContainer.appendChild(group);
                }
            }
            
            // Move tabs into group
            for (const tab of tabs) {
                group.appendChild(tab);
            }

        } catch (error) {
            console.error('Failed to create folder:', error);
        }
    }

    #safeUngroupNestedFolder(group) {
        if (!group?.hasAttribute('folder-group')) return;
        
        const tabs = Array.from(group.querySelectorAll('tab'));
        if (!tabs.length) return;
        
        // Find direct parent group if any
        const parentGroup = group.closest('tab-group[folder-group="true"]:not(#' + group.id + ')');
        
        // Move tabs one by one to maintain DOM integrity
        tabs.forEach((tab, index) => {
            if (parentGroup) {
                // Use browser's move method for nested groups
                gBrowser.moveTabTo(tab, parentGroup.lastChild?._tPos + 1 || parentGroup._tPos);
                parentGroup.appendChild(tab);
            } else {
                // Let browser handle ungroup operation
                gBrowser.ungroupTab(tab);
            }
        });
        
        // Remove empty group after all tabs are moved
        if (!group.querySelector('tab')) {
            group.remove();
        }
    }

    #updateFolderState(group) {
        if (!group || !group.hasAttribute("folder-group")) return;

        const tabs = group.querySelectorAll("tab");
        if (tabs.length === 0) {
          group.remove();
        }
    }

    cleanup() {
        console.log('TabFolders: Starting cleanup');
        const events = [
            'TabGrouped', 'TabUngrouped', 'TabGroupRemoved', 'TabGroupCreate',
            'TabPinned', 'TabUnpinned'
        ];

        events.forEach(event => {
            window.removeEventListener(event, this[`#on${event}`]?.bind(this));
        });

        document.getElementById('tabfolders-styles')?.remove();
        document.getElementById('tab-folder-context-new')?.remove();
    }
}

// Initialize when window loads
window.addEventListener('load', () => {
    console.log('TabFolders: Window load event received');
    try {
        window.TabFolders = new TabFolders();
    } catch (error) {
        console.error('TabFolders initialization failed:', error);
    }
});

[12th-devs]

@ferrocyante who is Nicolas Knight on discord? Do you think you can try and get me the live folders JavaScript from the CSS channel?

(@logicsec btw if it is you, may I please have the code?)

[ferrocyante]

@ferrocyante who is Nicolas Knight on discord? Do you think you can try and get me the live folders JavaScript from the CSS channel?

(@logicsec btw if it is you, may I please have the code?)

yep he is @logicsec ,

@Anoms12

[12th-devs]

@Darsh-A @ferrocyante, you all working on anything cool right now? I am looking for ideas for some more simple things to learn from.

[Darsh-A]

@ferrocyante @JustAdumbPrsn @Clstialdev, you all should check this out! Best userChrome script I have seen ever! https://github.com/CosmoCreeper/Sine, this is what Zen Mods could have been!

woaaa why is this not more famous?
ill add my tab sorter here, was wondering about what would be a good way to auto update js scripts

also are they planning to make it native?

[ferrocyante]

@ferrocyante @JustAdumbPrsn @Clstialdev, you all should check this out! Best userChrome script I have seen ever! CosmoCreeper/Sine, this is what Zen Mods could have been!

is this js mods? which we can share? lol

[ferrocyante]

@Anoms12 can we also add functionality of add js mods directly to sine or like something we can do

[mr-cheffy]

is this js mods? which we can share? lol

Security is going to be hell on this one

[12th-devs]

@ferrocyante I have been speaking with the dev, in the future he may add it.

[12th-devs]

@ferrocyante

[12th-devs]

@ferrocyante do you have an updated tab sort clear script for twilight? (I daily drive twilight... 😅) Also, anything with the downloads script?

[12th-devs]

@ferrocyante nah, you're good! Thanks though

[12th-devs]

@ferrocyante it was working great (tysm for the Mistral AI, I didn't know it was free, or so fast!) But it seems to be looping for some reason... Edit, I think it is because all of the tabs are grouped which I thought was a bug but I can now see that is a feature as nither button would have a purpose. So sorry

Browser is executing custom scripts via autoconfig boot.sys.mjs:5:9
Browser is executing custom scripts via autoconfig boot.sys.mjs:5:9
Error: @ boot.sys.mjs:362
    init chrome://userchromejs/content/boot.sys.mjs:393
    UserChrome_js chrome://userchromejs/content/boot.sys.mjs:341
    <anonymous> chrome://userchromejs/content/boot.sys.mjs:594
    <anonymous> config.js:9
Caused by: TypeError: (intermediate value).setup is not a function
    init chrome://userscripts/content/boot.sys.mjs:362
    UserChrome_js chrome://userscripts/content/boot.sys.mjs:341
    <anonymous> chrome://userscripts/content/boot.sys.mjs:594
    init chrome://userchromejs/content/boot.sys.mjs:387
    UserChrome_js chrome://userchromejs/content/boot.sys.mjs:341
    <anonymous> chrome://userchromejs/content/boot.sys.mjs:594
    <anonymous> config.js:9
boot.sys.mjs:393:23
1747766834744	addons.xpi	WARN	Checking C:\Program Files\Zen Twilight\distribution\extensions for addons
1747766835090	addons.webextension.{a4c4eda4-fb84-4a84-b4a1-f7c1cbf2a1ad}	WARN	Loading extension '{a4c4eda4-fb84-4a84-b4a1-f7c1cbf2a1ad}': Reading manifest: Warning processing browser_specific_settings.gecko_android.id: An unexpected property was found in the WebExtension manifest.
1747766835090	addons.webextension.{a4c4eda4-fb84-4a84-b4a1-f7c1cbf2a1ad}	WARN	Loading extension '{a4c4eda4-fb84-4a84-b4a1-f7c1cbf2a1ad}': Reading manifest: Warning processing $schema: An unexpected property was found in the WebExtension manifest.
unreachable code after return statement tabs.js:294:7
[ZenThemesImporter]: Zen Themes imported ZenThemesImporter.mjs:85:15
1747766835195	[email protected]	WARN	Loading extension '[email protected]': Reading manifest: Warning processing key: An unexpected property was found in the WebExtension manifest.
1747766835198	addons.webextension.{00000f2a-7cde-4f20-83ed-434fcb420d71}	WARN	Loading extension '{00000f2a-7cde-4f20-83ed-434fcb420d71}': Reading manifest: Warning processing update_url: An unexpected property was found in the WebExtension manifest.
[2025-05-20T18:47:15.381Z] Download Preview AI: Required Downloads API methods found downloads.uc.js:83:15
Download Preview Ollama AI Script: Execution finished, initialization scheduled/complete. downloads.uc.js:1413:11
[ZenHaven] Script loaded zenhaven.uc.js:10:11
[ZenHaven] Waiting for browser startup zenhaven.uc.js:1961:13
unreachable code after return statement UrlbarMuxerUnifiedComplete.sys.mjs:799:7
[2025-05-20T18:47:15.564Z] Download Preview AI: Downloads list creation successful downloads.uc.js:83:15
Zen CKS: Initialized ZenKeyboardShortcuts.mjs:1023:15
Sine is active! sine.uc.mjs:16:9
ZenThemeModifier: init browser layout ZenStartup.mjs:14:17
[2025-05-20T18:47:15.620Z] Download Preview AI: Starting initialization downloads.uc.js:83:15
[2025-05-20T18:47:15.620Z] Download Preview AI: Downloads API verified downloads.uc.js:83:15
[2025-05-20T18:47:15.620Z] Download Preview AI: Verifying Ollama connection... downloads.uc.js:83:15
INIT: Sort Tabs Script (v4.7.2) loading... tab-sort-clear.uc.js:2183:13
[ZenHaven] Browser startup detected zenhaven.uc.js:1964:17
[ZenHaven] Setting up UI... zenhaven.uc.js:28:13
[ZenHaven] Haven attribute not present zenhaven.uc.js:37:15
[ZenHaven] Setting up toolbox observer zenhaven.uc.js:1810:13
[ZenHaven] Toolbox observer active zenhaven.uc.js:1886:13
[ZenHaven] Toggle button added to sidebar bottom buttons zenhaven.uc.js:1951:13
Attempt to set a remote URL https://img1.wsimg.com/isteam/ip/static/pwa-app/logo-default.png/:/rs=w:180,h:180,m as a tab icon without a loading principal. tabbrowser.js:1096:17
[ZenThemesImporter]: Loading enabled Zen themes: Trackpad Animation, Revitalized devtools, Bleeding Corners Fix, Pimp your PiP, Advanced Tab Groups, Only Reset On Hover, Only Close On Hover, Floating Status Bar, Better CtrlTab Panel. ZenThemesImporter.mjs:198:13
[ZenThemesImporter]: Sheet successfully registered ZenThemesImporter.mjs:146:15
INIT: Required elements found after 2 checks. Initializing... tab-sort-clear.uc.js:2208:17
SORT BTN: Styles injected. tab-sort-clear.uc.js:520:13
SORT BTN INIT: Command 'cmd_zenSortTabs' added. tab-sort-clear.uc.js:1786:17
SORT BTN INIT: Command 'cmd_zenClearTabs' added. tab-sort-clear.uc.js:1802:17
SORT BTN INIT: Sort command listener added. tab-sort-clear.uc.js:1907:17
SORT BTN INIT: Clear command listener added. tab-sort-clear.uc.js:1935:17
SORT BTN DBG: ensureSortButtonExists called for separator: 
<html:div class="vertical-pinned-tabs-container-separator">
tab-sort-clear.uc.js:1638:13
SORT BTN DBG: Attempting to add SVG/Buttons... tab-sort-clear.uc.js:1647:15
SORT BTN DBG: SVG does not exist, creating... tab-sort-clear.uc.js:1650:17
SORT BTN DBG: SVG element created: 
<svg class="separator-line-svg" viewBox="0 0 100 2" preserveAspectRatio="none">
tab-sort-clear.uc.js:1656:17
SORT BTN DBG: Single path element created and appended: #separator-path tab-sort-clear.uc.js:1668:17
SORT BTN DBG: SVG with single path inserted into separator. tab-sort-clear.uc.js:1673:17
SORT BTN DBG: Tidy button does not exist, creating... tab-sort-clear.uc.js:1683:17
SORT BTN DBG: Tidy button node created: 
<toolbarbutton id="sort-button" class="sort-button-with-icon hidden-button" command="cmd_zenSortTabs" tooltiptext="Sort Tabs into Groups by Topic (AI)">
tab-sort-clear.uc.js:1702:17
SORT BTN DBG: Tidy button appended to separator. tab-sort-clear.uc.js:1704:17
SORT BTN DBG: Clear button does not exist, creating... tab-sort-clear.uc.js:1712:17
SORT BTN DBG: Clear button node created: 
<toolbarbutton id="clear-button" class="clear-button-with-icon hidden-button" command="cmd_zenClearTabs" tooltiptext="Close All Ungrouped Tabs (Except Selected)">
tab-sort-clear.uc.js:1728:17
SORT BTN DBG: Clear button appended to separator. tab-sort-clear.uc.js:1733:17
SORT BTN DBG: Finished adding SVG/Buttons successfully. tab-sort-clear.uc.js:1739:15
SORT BTN DBG: ensureSortButtonExists called for separator: 
<html:div class="vertical-pinned-tabs-container-separator">
tab-sort-clear.uc.js:1638:13
SORT BTN DBG: Attempting to add SVG/Buttons... tab-sort-clear.uc.js:1647:15
SORT BTN DBG: SVG does not exist, creating... tab-sort-clear.uc.js:1650:17
SORT BTN DBG: SVG element created: 
<svg class="separator-line-svg" viewBox="0 0 100 2" preserveAspectRatio="none">
tab-sort-clear.uc.js:1656:17
SORT BTN DBG: Single path element created and appended: #separator-path tab-sort-clear.uc.js:1668:17
SORT BTN DBG: SVG with single path inserted into separator. tab-sort-clear.uc.js:1673:17
SORT BTN DBG: Tidy button does not exist, creating... tab-sort-clear.uc.js:1683:17
SORT BTN DBG: Tidy button node created: 
<toolbarbutton id="sort-button" class="sort-button-with-icon hidden-button" command="cmd_zenSortTabs" tooltiptext="Sort Tabs into Groups by Topic (AI)">
tab-sort-clear.uc.js:1702:17
SORT BTN DBG: Tidy button appended to separator. tab-sort-clear.uc.js:1704:17
SORT BTN DBG: Clear button does not exist, creating... tab-sort-clear.uc.js:1712:17
SORT BTN DBG: Clear button node created: 
<toolbarbutton id="clear-button" class="clear-button-with-icon hidden-button" command="cmd_zenClearTabs" tooltiptext="Close All Ungrouped Tabs (Except Selected)">
tab-sort-clear.uc.js:1728:17
SORT BTN DBG: Clear button appended to separator. tab-sort-clear.uc.js:1733:17
SORT BTN DBG: Finished adding SVG/Buttons successfully. tab-sort-clear.uc.js:1739:15
SORT BTN DBG: ensureSortButtonExists called for separator: 
<html:div class="vertical-pinned-tabs-container-separator">
tab-sort-clear.uc.js:1638:13
SORT BTN DBG: Attempting to add SVG/Buttons... tab-sort-clear.uc.js:1647:15
SORT BTN DBG: SVG does not exist, creating... tab-sort-clear.uc.js:1650:17
SORT BTN DBG: SVG element created: 
<svg class="separator-line-svg" viewBox="0 0 100 2" preserveAspectRatio="none">
tab-sort-clear.uc.js:1656:17
SORT BTN DBG: Single path element created and appended: #separator-path tab-sort-clear.uc.js:1668:17
SORT BTN DBG: SVG with single path inserted into separator. tab-sort-clear.uc.js:1673:17
SORT BTN DBG: Tidy button does not exist, creating... tab-sort-clear.uc.js:1683:17
SORT BTN DBG: Tidy button node created: 
<toolbarbutton id="sort-button" class="sort-button-with-icon hidden-button" command="cmd_zenSortTabs" tooltiptext="Sort Tabs into Groups by Topic (AI)">
tab-sort-clear.uc.js:1702:17
SORT BTN DBG: Tidy button appended to separator. tab-sort-clear.uc.js:1704:17
SORT BTN DBG: Clear button does not exist, creating... tab-sort-clear.uc.js:1712:17
SORT BTN DBG: Clear button node created: 
<toolbarbutton id="clear-button" class="clear-button-with-icon hidden-button" command="cmd_zenClearTabs" tooltiptext="Close All Ungrouped Tabs (Except Selected)">
tab-sort-clear.uc.js:1728:17
SORT BTN DBG: Clear button appended to separator. tab-sort-clear.uc.js:1733:17
SORT BTN DBG: Finished adding SVG/Buttons successfully. tab-sort-clear.uc.js:1739:15
SORT BTN DBG: ensureSortButtonExists called for separator: 
<html:div class="vertical-pinned-tabs-container-separator">
tab-sort-clear.uc.js:1638:13
SORT BTN DBG: Attempting to add SVG/Buttons... tab-sort-clear.uc.js:1647:15
SORT BTN DBG: SVG does not exist, creating... tab-sort-clear.uc.js:1650:17
SORT BTN DBG: SVG element created: 
<svg class="separator-line-svg" viewBox="0 0 100 2" preserveAspectRatio="none">
tab-sort-clear.uc.js:1656:17
SORT BTN DBG: Single path element created and appended: #separator-path tab-sort-clear.uc.js:1668:17
SORT BTN DBG: SVG with single path inserted into separator. tab-sort-clear.uc.js:1673:17
SORT BTN DBG: Tidy button does not exist, creating... tab-sort-clear.uc.js:1683:17
SORT BTN DBG: Tidy button node created: 
<toolbarbutton id="sort-button" class="sort-button-with-icon hidden-button" command="cmd_zenSortTabs" tooltiptext="Sort Tabs into Groups by Topic (AI)">
tab-sort-clear.uc.js:1702:17
SORT BTN DBG: Tidy button appended to separator. tab-sort-clear.uc.js:1704:17
SORT BTN DBG: Clear button does not exist, creating... tab-sort-clear.uc.js:1712:17
SORT BTN DBG: Clear button node created: 
<toolbarbutton id="clear-button" class="clear-button-with-icon hidden-button" command="cmd_zenClearTabs" tooltiptext="Close All Ungrouped Tabs (Except Selected)">
tab-sort-clear.uc.js:1728:17
SORT BTN DBG: Clear button appended to separator. tab-sort-clear.uc.js:1733:17
SORT BTN DBG: Finished adding SVG/Buttons successfully. tab-sort-clear.uc.js:1739:15
SORT BTN DBG: ensureSortButtonExists called for separator: 
<html:div class="vertical-pinned-tabs-container-separator">
tab-sort-clear.uc.js:1638:13
SORT BTN DBG: Attempting to add SVG/Buttons... tab-sort-clear.uc.js:1647:15
SORT BTN DBG: SVG does not exist, creating... tab-sort-clear.uc.js:1650:17
SORT BTN DBG: SVG element created: 
<svg class="separator-line-svg" viewBox="0 0 100 2" preserveAspectRatio="none">
tab-sort-clear.uc.js:1656:17
SORT BTN DBG: Single path element created and appended: #separator-path tab-sort-clear.uc.js:1668:17
SORT BTN DBG: SVG with single path inserted into separator. tab-sort-clear.uc.js:1673:17
SORT BTN DBG: Tidy button does not exist, creating... tab-sort-clear.uc.js:1683:17
SORT BTN DBG: Tidy button node created: 
<toolbarbutton id="sort-button" class="sort-button-with-icon hidden-button" command="cmd_zenSortTabs" tooltiptext="Sort Tabs into Groups by Topic (AI)">
tab-sort-clear.uc.js:1702:17
SORT BTN DBG: Tidy button appended to separator. tab-sort-clear.uc.js:1704:17
SORT BTN DBG: Clear button does not exist, creating... tab-sort-clear.uc.js:1712:17
SORT BTN DBG: Clear button node created: 
<toolbarbutton id="clear-button" class="clear-button-with-icon hidden-button" command="cmd_zenClearTabs" tooltiptext="Close All Ungrouped Tabs (Except Selected)">
tab-sort-clear.uc.js:1728:17
SORT BTN DBG: Clear button appended to separator. tab-sort-clear.uc.js:1733:17
SORT BTN DBG: Finished adding SVG/Buttons successfully. tab-sort-clear.uc.js:1739:15
BTN VIS: updateButtonsVisibilityState called. tab-sort-clear.uc.js:2057:13
BTN VIS: Current Workspace ID: f0271f14-8109-4767-ba25-c60bb008eeab tab-sort-clear.uc.js:1991:13
BTN VIS: Found 0 ungrouped tabs (0 non-selected), hasGroupedTabs: true tab-sort-clear.uc.js:2045:13
BTN VIS: Updating visibility - 5 separators, 0 ungrouped tabs, 0 non-selected, hasGroupedTabs: true tab-sort-clear.uc.js:2064:13
BTN VIS: updateButtonsVisibilityState called. tab-sort-clear.uc.js:2057:13
BTN VIS: Current Workspace ID: f0271f14-8109-4767-ba25-c60bb008eeab tab-sort-clear.uc.js:1991:13
BTN VIS: Found 0 ungrouped tabs (0 non-selected), hasGroupedTabs: true tab-sort-clear.uc.js:2045:13
BTN VIS: Updating visibility - 5 separators, 0 ungrouped tabs, 0 non-selected, hasGroupedTabs: true tab-sort-clear.uc.js:2064:13
SORT BTN: gZenWorkspaces hooks applied. tab-sort-clear.uc.js:1985:13
BTN VIS: updateButtonsVisibilityState called. tab-sort-clear.uc.js:2057:13
BTN VIS: Current Workspace ID: f0271f14-8109-4767-ba25-c60bb008eeab tab-sort-clear.uc.js:1991:13
BTN VIS: Found 0 ungrouped tabs (0 non-selected), hasGroupedTabs: true tab-sort-clear.uc.js:2045:13
BTN VIS: Updating visibility - 5 separators, 0 ungrouped tabs, 0 non-selected, hasGroupedTabs: true tab-sort-clear.uc.js:2064:13
BTN VIS: Added all tab event listeners for visibility updates. tab-sort-clear.uc.js:2158:15
INIT: Sort Button setup and hooks complete. tab-sort-clear.uc.js:2221:21
Content process 33156 isn't responsive while sending "DevToolsProcessParent:addOrSetSessionDataEntry" request. DevTools will ignore this process for now. DevToolsProcessParent.sys.mjs:320:17
Content process 33156 is responsive again. DevTools resumes operations against it. DevToolsProcessParent.sys.mjs:330:21
BTN VIS: updateButtonsVisibilityState called. tab-sort-clear.uc.js:2057:13
BTN VIS: Current Workspace ID: f0271f14-8109-4767-ba25-c60bb008eeab tab-sort-clear.uc.js:1991:13
BTN VIS: Found 0 ungrouped tabs (0 non-selected), hasGroupedTabs: true tab-sort-clear.uc.js:2045:13
BTN VIS: Updating visibility - 5 separators, 0 ungrouped tabs, 0 non-selected, hasGroupedTabs: true tab-sort-clear.uc.js:2064:13
BTN VIS: updateButtonsVisibilityState called. tab-sort-clear.uc.js:2057:13
BTN VIS: Current Workspace ID: f0271f14-8109-4767-ba25-c60bb008eeab tab-sort-clear.uc.js:1991:13
BTN VIS: Found 0 ungrouped tabs (0 non-selected), hasGroupedTabs: true tab-sort-clear.uc.js:2045:13
BTN VIS: Updating visibility - 5 separators, 0 ungrouped tabs, 0 non-selected, hasGroupedTabs: true tab-sort-clear.uc.js:2064:13
BTN VIS: updateButtonsVisibilityState called. tab-sort-clear.uc.js:2057:13
BTN VIS: Current Workspace ID: f0271f14-8109-4767-ba25-c60bb008eeab tab-sort-clear.uc.js:1991:13
BTN VIS: Found 0 ungrouped tabs (0 non-selected), hasGroupedTabs: true tab-sort-clear.uc.js:2045:13
BTN VIS: Updating visibility - 5 separators, 0 ungrouped tabs, 0 non-selected, hasGroupedTabs: true tab-sort-clear.uc.js:2064:13
BTN VIS: updateButtonsVisibilityState called. tab-sort-clear.uc.js:2057:13
BTN VIS: Current Workspace ID: f0271f14-8109-4767-ba25-c60bb008eeab tab-sort-clear.uc.js:1991:13
BTN VIS: Found 0 ungrouped tabs (0 non-selected), hasGroupedTabs: true tab-sort-clear.uc.js:2045:13
BTN VIS: Updating visibility - 5 separators, 0 ungrouped tabs, 0 non-selected, hasGroupedTabs: true tab-sort-clear.uc.js:2064:13
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://o324374.ingest.us.sentry.io/api/4508757406253057/envelope/?sentry_version=7&sentry_key=ce11cf3b680074fe9fc0221f827caf64&sentry_client=sentry.javascript.react%2F8.54.0. (Reason: CORS request did not succeed). Status code: (null).
BTN VIS: updateButtonsVisibilityState called. tab-sort-clear.uc.js:2057:13
BTN VIS: Current Workspace ID: f0271f14-8109-4767-ba25-c60bb008eeab tab-sort-clear.uc.js:1991:13
BTN VIS: Found 0 ungrouped tabs (0 non-selected), hasGroupedTabs: true tab-sort-clear.uc.js:2045:13
BTN VIS: Updating visibility - 5 separators, 0 ungrouped tabs, 0 non-selected, hasGroupedTabs: true tab-sort-clear.uc.js:2064:13
BTN VIS: updateButtonsVisibilityState called. tab-sort-clear.uc.js:2057:13
BTN VIS: Current Workspace ID: f0271f14-8109-4767-ba25-c60bb008eeab tab-sort-clear.uc.js:1991:13
BTN VIS: Found 0 ungrouped tabs (0 non-selected), hasGroupedTabs: true tab-sort-clear.uc.js:2045:13
BTN VIS: Updating visibility - 5 separators, 0 ungrouped tabs, 0 non-selected, hasGroupedTabs: true tab-sort-clear.uc.js:2064:13
BTN VIS: updateButtonsVisibilityState called. tab-sort-clear.uc.js:2057:13
BTN VIS: Current Workspace ID: f0271f14-8109-4767-ba25-c60bb008eeab tab-sort-clear.uc.js:1991:13
BTN VIS: Found 0 ungrouped tabs (0 non-selected), hasGroupedTabs: true tab-sort-clear.uc.js:2045:13
BTN VIS: Updating visibility - 5 separators, 0 ungrouped tabs, 0 non-selected, hasGroupedTabs: true tab-sort-clear.uc.js:2064:13
BTN VIS: updateButtonsVisibilityState called. tab-sort-clear.uc.js:2057:13
BTN VIS: Current Workspace ID: f0271f14-8109-4767-ba25-c60bb008eeab tab-sort-clear.uc.js:1991:13
BTN VIS: Found 0 ungrouped tabs (0 non-selected), hasGroupedTabs: true tab-sort-clear.uc.js:2045:13
BTN VIS: Updating visibility - 5 separators, 0 ungrouped tabs, 0 non-selected, hasGroupedTabs: true tab-sort-clear.uc.js:2064:13
BTN VIS: updateButtonsVisibilityState called. tab-sort-clear.uc.js:2057:13
BTN VIS: Current Workspace ID: f0271f14-8109-4767-ba25-c60bb008eeab tab-sort-clear.uc.js:1991:13
BTN VIS: Found 0 ungrouped tabs (0 non-selected), hasGroupedTabs: true tab-sort-clear.uc.js:2045:13
BTN VIS: Updating visibility - 5 separators, 0 ungrouped tabs, 0 non-selected, hasGroupedTabs: true tab-sort-clear.uc.js:2064:13
BTN VIS: updateButtonsVisibilityState called. tab-sort-clear.uc.js:2057:13
BTN VIS: Current Workspace ID: f0271f14-8109-4767-ba25-c60bb008eeab tab-sort-clear.uc.js:1991:13
BTN VIS: Found 0 ungrouped tabs (0 non-selected), hasGroupedTabs: true tab-sort-clear.uc.js:2045:13
BTN VIS: Updating visibility - 5 separators, 0 ungrouped tabs, 0 non-selected, hasGroupedTabs: true tab-sort-clear.uc.js:2064:13
BTN VIS: updateButtonsVisibilityState called. tab-sort-clear.uc.js:2057:13
BTN VIS: Current Workspace ID: f0271f14-8109-4767-ba25-c60bb008eeab tab-sort-clear.uc.js:1991:13
BTN VIS: Found 0 ungrouped tabs (0 non-selected), hasGroupedTabs: true tab-sort-clear.uc.js:2045:13
BTN VIS: Updating visibility - 5 separators, 0 ungrouped tabs, 0 non-selected, hasGroupedTabs: true tab-sort-clear.uc.js:2064:13
BTN VIS: updateButtonsVisibilityState called. tab-sort-clear.uc.js:2057:13
BTN VIS: Current Workspace ID: f0271f14-8109-4767-ba25-c60bb008eeab tab-sort-clear.uc.js:1991:13
BTN VIS: Found 0 ungrouped tabs (0 non-selected), hasGroupedTabs: true tab-sort-clear.uc.js:2045:13
BTN VIS: Updating visibility - 5 separators, 0 ungrouped tabs, 0 non-selected, hasGroupedTabs: true tab-sort-clear.uc.js:2064:13
BTN VIS: updateButtonsVisibilityState called. tab-sort-clear.uc.js:2057:13
BTN VIS: Current Workspace ID: f0271f14-8109-4767-ba25-c60bb008eeab tab-sort-clear.uc.js:1991:13
BTN VIS: Found 0 ungrouped tabs (0 non-selected), hasGroupedTabs: true tab-sort-clear.uc.js:2045:13
BTN VIS: Updating visibility - 5 separators, 0 ungrouped tabs, 0 non-selected, hasGroupedTabs: true tab-sort-clear.uc.js:2064:13
BTN VIS: updateButtonsVisibilityState called. tab-sort-clear.uc.js:2057:13
BTN VIS: Current Workspace ID: f0271f14-8109-4767-ba25-c60bb008eeab tab-sort-clear.uc.js:1991:13
BTN VIS: Found 0 ungrouped tabs (0 non-selected), hasGroupedTabs: true tab-sort-clear.uc.js:2045:13
BTN VIS: Updating visibility - 5 separators, 0 ungrouped tabs, 0 non-selected, hasGroupedTabs: true tab-sort-clear.uc.js:2064:13

[12th-devs]

Also, is there a way to disable pre-grouping? Most of my tabs have the same roots for the url, so I don't really want it, instead I want it sorting with just the AI.

[Darsh-A]

yes i plan to add that since i now realise gemini is fast enough for that. i will try to work on that today or tmr

[Darsh-A]

@Anoms12 created a dev branch with a config for ai only
Potentially i have improved the logic a bit too. im testing it right now will merge if everything seems fine

[Darsh-A]

are we still open to working on this btw?

[Darsh-A]

oh building things into the url bar seems like a bad option apparently. learnt that through the quick search script.
a seperate command bar would be better tbh

[Darsh-A]

also my friends asked me for tree style tabs. tho not that but i want to work on something similar.
If u have used obsidian its kinda like its graph view but for tabs. should be quite interesting

[12th-devs]

@Darsh-A I'm familiar with the concept, never really used it besides 2 minutes on side berry. Wouldn't we need to use storage for that though?

Also, @ferrocyante any luck?

[Darsh-A]

i havent looked into how side berry works. In what way does it need storage?

[12th-devs]

@Darsh-A, can we store the tab it came from so we nest it correctly on reboot, unless that's already stored?

[12th-devs]

@Darsh-A are you free at the moment? If not when will you be? I would like to finish haven so we can put it onto sine for V2

// ==UserScript==
// @name        Custom Toolbox UI (Safe Mode)
// @description Only injects UI when #navigator-toolbox has [haven]
// @include     main
// ==/UserScript==

(function () {
  const { document } = window;
  let toolboxObserver; // Declare at top level
  console.log("[ZenHaven] Script loaded");

  function getGradientCSS(theme) {
    if (!theme || theme.type !== "gradient" || !theme.gradientColors?.length)
      return "transparent";

    const angle = Math.round(theme.rotation || 0);
    const stops = theme.gradientColors
      .map(({ c }) => {
        const [r, g, b] = c;
        return `rgb(${r}, ${g}, ${b})`;
      })
      .join(", ");

    return `linear-gradient(${angle}deg, ${stops})`;
  }

  function setupCustomUI() {
    console.log("[ZenHaven] Setting up UI...");
    const toolbox = document.getElementById("navigator-toolbox");
    if (!toolbox) {
      console.log("[ZenHaven] Toolbox not found!");
      return;
    }

    // Only activate if [haven] attribute is present
    if (!toolbox.hasAttribute("haven")) {
      console.log("[ZenHaven] Haven attribute not present");
      return;
    }

    console.log("[ZenHaven] Haven attribute found, proceeding with UI setup");

    // Hide all children except the toolbox itself
    Array.from(toolbox.children).forEach((child) => {
      child.style.display = "none";
    });

    // Check if custom toolbar already exists
    if (document.getElementById("custom-toolbar")) {
      console.log("[ZenHaven] Custom toolbar already exists");
      return;
    }

    // Create container for new UI elements
    const customContainer = document.createElement("div");
    customContainer.id = "custom-toolbar";
    toolbox.appendChild(customContainer);

    // Create top div with header icon and text
    const topDiv = document.createElement("div");
    topDiv.id = "toolbar-header";

    // Add header icon
    const headerIcon = document.createElement("span");
    headerIcon.className = "header-icon";
    headerIcon.innerHTML = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path fill-rule="evenodd" clip-rule="evenodd" d="M8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15ZM8 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14Z" fill="currentColor"/>
    </svg>`;

    // For header icon
    headerIcon.className = "toolbarbutton-1";

    const headerText = document.createElement("span");
    headerText.className = "header-text";
    headerText.textContent = "Haven";

    topDiv.appendChild(headerIcon);
    topDiv.appendChild(headerText);
    customContainer.appendChild(topDiv);

    // Create middle container for function buttons
    const functionsContainer = document.createElement("div");
    functionsContainer.id = "functions-container";
    customContainer.appendChild(functionsContainer);

    // Define button configs with labels and SVG placeholders
    const buttonConfigs = [
      {
        id: "haven-downloads-button",
        label: "Downloads",
        command: "downloads",
        svgContent: `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8 2ZM1 8C1 4.13401 4.13401 1 8 1C11.866 1 15 4.13401 15 8C15 11.866 11.866 15 8 15C4.13401 15 1 11.866 1 8ZM8 4V8.5L11 10L10.5 11L7 9.25V4H8Z" fill="currentColor"/>
        </svg>`,
      },
      {
        id: "haven-workspaces-button",
        label: "Workspaces",
        command: "workspaces",
        svgContent: `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M3 2H13V14H3V2ZM2 2C2 1.44772 2.44772 1 3 1H13C13.5523 1 14 1.44772 14 2V14C14 14.5523 13.5523 15 13 15H3C2.44772 15 0.96814 14.5523 0.96814 14V2ZM4 4H12V5H4V4ZM4 7H12V8H4V7ZM12 10H4V11H12V10Z" fill="currentColor"/>
        </svg>`,
      },
      {
        id: "haven-history-button",
        label: "History",
        command: "history",
        svgContent: `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M1 1.06567H14.9613V4.0144H1L1 1.06567ZM0 1.06567C0 0.513389 0.447715 0.0656738 1 0.0656738H14.9613C15.5136 0.0656738 15.9613 0.513389 15.9613 1.06567V4.0144C15.9613 4.55603 15.5307 4.99708 14.9932 5.01391V5.02686V13C14.9932 14.6569 13.65 16 11.9932 16H3.96814C2.31129 16 0.96814 14.6569 0.96814 13V5.02686V5.01391C0.430599 4.99708 0 4.55603 0 4.0144V1.06567ZM13.9932 5.02686H1.96814V13C1.96814 14.1046 2.86357 15 3.96814 15H11.9932C13.0977 15 13.9932 14.1046 13.9932 13V5.02686ZM9.95154 8.07495H6.01318V7.07495H9.95154V8.07495Z" fill="currentColor"/>
        </svg>`,
      },
      {
        id: "haven-notes-button",
        label: "Notes",
        command: "notes",
        svgContent: `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M3 2C2.44772 2 2 2.44772 2 3V13C2 13.5523 2.44772 14 3 14H13C13.5523 14 14 13.5523 14 13V5.41421C14 5.149 13.8946 4.89464 13.7071 4.70711L11.2929 2.29289C11.1054 2.10536 10.851 2 10.5858 2H3ZM3 3H10V5.5C10 5.77614 10.2239 6 10.5 6H13V13H3V3ZM11 3.70711L12.2929 5H11V3.70711Z" fill="currentColor"/>
        </svg>`,
      },
    ];

    // Modify the button creation code
    buttonConfigs.forEach((config) => {
      const customDiv = document.createElement("div");
      customDiv.className = "custom-button";
      customDiv.setAttribute("id", config.id);

      // Create icon span
      const iconSpan = document.createElement("span");
      iconSpan.className = "icon";
      iconSpan.innerHTML = config.svgContent;

      // Create label span
      const labelSpan = document.createElement("span");
      labelSpan.className = "label";
      labelSpan.textContent = config.label;

      customDiv.appendChild(iconSpan);
      customDiv.appendChild(labelSpan);

      // Add click handler for haven container attributes
      customDiv.addEventListener("click", (event) => {
        const havenContainer = document.getElementById("zen-haven-container");
        if (havenContainer) {
          const currentAttr = `haven-${config.command}`;
          const hasCurrentAttr = havenContainer.hasAttribute(currentAttr);

          // Remove active state from all buttons
          document.querySelectorAll(".custom-button").forEach((btn) => {
            btn.classList.remove("active");
          });

          // If clicking same button and container is visible, hide it
          if (hasCurrentAttr && havenContainer.style.display !== "none") {
            havenContainer.style.display = "none";
            havenContainer.removeAttribute(currentAttr);
            return;
          }

          // Add active state to clicked button
          customDiv.classList.add("active");

          // Remove all existing content first
          while (havenContainer.firstChild) {
            havenContainer.removeChild(havenContainer.firstChild);
          }

          // Remove all haven- attributes
          const attrs = havenContainer.getAttributeNames();
          attrs.forEach((attr) => {
            if (attr.startsWith("haven-")) {
              havenContainer.removeAttribute(attr);
            }
          });

          // Set new attribute for current view and ensure visibility
          havenContainer.setAttribute(currentAttr, "");
          havenContainer.style.display = "flex";
        }

        // Trigger original button click
        const originalButton = document.getElementById(
          config.command + "-button"
        );
        if (originalButton) {
          originalButton.click();
          event.stopPropagation(); // Prevent double triggers
        }
      });

      // Add click animation class
      customDiv.addEventListener("mousedown", () => {
        customDiv.classList.add("clicked");
      });
      customDiv.addEventListener("mouseup", () => {
        customDiv.classList.remove("clicked");
      });
      customDiv.addEventListener("mouseleave", () => {
        customDiv.classList.remove("clicked");
      });

      functionsContainer.appendChild(customDiv);
    });

    // Handle bottom buttons
    const sidebarBottomButtons = document.getElementById(
      "zen-sidebar-bottom-buttons"
    );
    const workspacesButton = sidebarBottomButtons?.querySelector(
      "#zen-workspaces-button"
    );

    if (sidebarBottomButtons && workspacesButton) {
      // Count workspaces and store in variable
      const workspaceCount = workspacesButton.children.length;
      console.log(`[ZenHaven] Found ${workspaceCount} workspaces`);

      // Move the original buttons to our container
      customContainer.appendChild(sidebarBottomButtons);

      // Hide workspace button
      workspacesButton.style.display = "none";

      // Add CSS to style the bottom buttons
      const customStyles = document.createElement("style");
      customStyles.textContent = `
            #zen-sidebar-bottom-buttons {
                display: flex !important;
                justify-content: space-between;
                height: min-content;
                width: 100%;
            }

            #zen-sidebar-bottom-buttons > * {
                margin: 0 5px;
                -moz-context-properties: fill, fill-opacity !important;
            }

            #zen-sidebar-bottom-buttons toolbarbutton {
                -moz-appearance: none !important;
            }
        `;
      document.head.appendChild(customStyles);
    }

    // Create sidebar container
    const sidebarSplitter = document.getElementById("zen-sidebar-splitter");
    if (sidebarSplitter) {
      const sidebarContainer = document.createElement("div");
      sidebarContainer.id = "zen-haven-container";
      sidebarContainer.style.cssText = `
            height: 100%;
            width: 60vw;
            position: relative;
            display: none;
            flex-direction: column;
        `;

      // Find the tabbox and inject before it
      const tabbox = document.getElementById("tabbrowser-tabbox");
      if (tabbox) {
        // Insert before the tabbox
        tabbox.parentNode.insertBefore(sidebarContainer, tabbox);
        console.log(
          "[ZenHaven] Sidebar container added before tabbrowser-tabbox"
        );
      } else {
        // Fallback to original placement after splitter
        sidebarSplitter.parentNode.insertBefore(
          sidebarContainer,
          sidebarSplitter.nextSibling
        );
        console.log(
          "[ZenHaven] Tabbox not found, sidebar container added after splitter"
        );
      }

      // Create workspace observer
      const workspaceObserver = new MutationObserver((mutations) => {
        mutations.forEach((mutation) => {
          if (
            mutation.type === "attributes" &&
            mutation.attributeName === "haven-workspaces"
          ) {
            console.log("[ZenHaven] Workspace observer triggered");

            // Toggle behavior - if workspaces are already shown, hide them
            const existingWorkspaces =
              sidebarContainer.querySelectorAll(".haven-workspace");
            if (existingWorkspaces.length > 0) {
              existingWorkspaces.forEach((ws) => ws.remove());
              sidebarContainer.removeAttribute("haven-workspaces");
              return;
            }

            // Add styles for workspace button
            const workspaceStyles = document.createElement("style");
            workspaceStyles.textContent = `
              .haven-workspace-add-button {
                position: sticky !important;
                right: 20px !important;
                height: 40px !important;
                border-radius: 80px !important;
                margin-right: 20px !important;
                padding-inline: 12px !important;
                display: flex;
                align-items: center;
                justify-content: center;
                background: var(--toolbar-bgcolor);
                border-radius: 6px;
                cursor: pointer;
                transition: background 0.2s;
                z-index: 100;
              }
            `;
            document.head.appendChild(workspaceStyles);

            // Create new workspace divs if attribute is present
            if (sidebarContainer.hasAttribute("haven-workspaces")) {
              const workspacesButton = document.getElementById(
                "zen-workspaces-button"
              );
              if (workspacesButton) {
                console.log(
                  "[ZenHaven] Found workspace button:",
                  workspacesButton
                );

                // Get all workspace elements directly
                const workspaceElements = Array.from(workspacesButton.children);
                console.log(
                  "[ZenHaven] Workspace elements:",
                  workspaceElements
                );

                // Create workspaces first
                workspaceElements.forEach((workspace) => {
                  // Create base workspace div
                  const workspaceDiv = document.createElement("div");
                  workspaceDiv.className = "haven-workspace";

                  // Get the workspace object using the UUID from the element
                  const uuid = workspace.getAttribute("zen-workspace-id");
                  ZenWorkspacesStorage.getWorkspaces().then((allWorkspaces) => {
                    const data = allWorkspaces.find((ws) => ws.uuid === uuid);
                    if (
                      data?.theme?.type === "gradient" &&
                      data.theme.gradientColors?.length
                    ) {
                      workspaceDiv.style.background = getGradientCSS(
                        data.theme
                      );
                      workspaceDiv.style.opacity = data.theme.opacity ?? 1;
                    } else {
                      // Fallback: use a solid neutral background
                      workspaceDiv.style.background =
                        "var(--zen-colors-border)";
                      workspaceDiv.style.opacity = 1;
                    }
                  });

                  // Create content container
                  const contentDiv = document.createElement("div");
                  contentDiv.className = "haven-workspace-content";

                  // Find workspace sections using the workspace's own ID
                  const sections = document.querySelectorAll(
                    `.zen-workspace-tabs-section[zen-workspace-id="${workspace.getAttribute(
                      "zen-workspace-id"
                    )}"]`
                  );

                  sections.forEach((section) => {
                    const root = section.shadowRoot || section;

                    // Create wrapper with same class
                    const sectionWrapper = document.createElement("div");
                    sectionWrapper.className = "haven-workspace-section";

                    // Instead of copying section styles, only copy children styles
                    Array.from(section.children).forEach((child) => {
                      const clone = child.cloneNode(true);
                      const computedStyle = window.getComputedStyle(child);
                      const cssText = Array.from(computedStyle).reduce(
                        (str, property) => {
                          return `${str}${property}:${computedStyle.getPropertyValue(
                            property
                          )};`;
                        },
                        ""
                      );
                      clone.style.cssText = cssText;
                      sectionWrapper.appendChild(clone);
                    });

                    contentDiv.appendChild(sectionWrapper);
                  });

                  // Assemble workspace
                  workspaceDiv.appendChild(contentDiv);
                  sidebarContainer.appendChild(workspaceDiv);
                });

                // Now create and append the add button after all workspaces
                const addWorkspaceButton = document.createElement("div");
                addWorkspaceButton.className = "haven-workspace-add-button";
                addWorkspaceButton.innerHTML = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M8 3V13M3 8H13" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                </svg>`;
                addWorkspaceButton.addEventListener("click", (event) => {
                  try {
                    // Get the workspaces button which contains the panel UI
                    const workspacesButton = document.getElementById(
                      "zen-workspaces-button"
                    );
                    if (!workspacesButton) {
                      console.error("[ZenHaven] Workspaces button not found");
                      return;
                    }

                    // Trigger the native workspace creation UI
                    const evt = new CustomEvent("workspace-create", {
                      bubbles: true,
                      cancelable: true,
                    });
                    workspacesButton.dispatchEvent(evt);
                  } catch (error) {
                    console.error(
                      "[ZenHaven] Error opening workspace dialog:",
                      error
                    );
                  }
                });
                sidebarContainer.appendChild(addWorkspaceButton);
              }
            }
          }

          if (
            mutation.type === "attributes" &&
            mutation.attributeName === "haven-downloads"
          ) {
            const sidebarContainer = document.getElementById(
              "zen-haven-container"
            ); // Assuming sidebarContainer is defined elsewhere, added for context

            // --- Clear existing ---
            const existingDownloadsContent = sidebarContainer.querySelector(
              ".haven-downloads-view"
            );
            if (existingDownloadsContent) {
              existingDownloadsContent.remove();
            }
            const existingDownloadsStyles = document.getElementById(
              "haven-downloads-styles"
            );
            if (existingDownloadsStyles) {
              existingDownloadsStyles.remove();
            }

            if (sidebarContainer.hasAttribute("haven-downloads")) {
              const downloadsViewContainer = document.createElement("div");
              downloadsViewContainer.className = "haven-downloads-view";

              // --- Search Bar ---
              const searchBar = document.createElement("div");
              searchBar.className = "haven-downloads-searchbar";
              const searchInput = document.createElement("input");
              searchInput.type = "text";
              searchInput.placeholder = "Search download history...";
              searchBar.appendChild(searchInput);
              downloadsViewContainer.appendChild(searchBar);

              // --- List Area ---
              const downloadsListArea = document.createElement("div");
              downloadsListArea.className = "haven-downloads-list-area";
              downloadsListArea.textContent = "Loading download history...";
              downloadsListArea.style.color = "var(--toolbar-color, white)"; // Use theme variable
              downloadsViewContainer.appendChild(downloadsListArea);

              // --- Append container ---
              sidebarContainer.appendChild(downloadsViewContainer);

              // --- Execute Direct SQL Query and Build UI ---
              let dbConnection = null,
                statement = null,
                downloadItems = [];

              try {
                const { PlacesUtils } = ChromeUtils.importESModule(
                  "resource://gre/modules/PlacesUtils.sys.mjs"
                );
                dbConnection = PlacesUtils.history.DBConnection;

                let attrStmt = dbConnection.createStatement(
                  "SELECT id FROM moz_anno_attributes WHERE name = 'downloads/destinationFileURI'"
                );
                let downloadAttrId = null;
                if (attrStmt.executeStep()) {
                  downloadAttrId = attrStmt.getInt64(0);
                }
                attrStmt.finalize();

                if (!downloadAttrId) {
                  throw new Error(
                    "'downloads/destinationFileURI' attribute ID not found."
                  );
                }

                const sql = `
                  SELECT p.url, p.title, h.visit_date, a.content AS fileUri
                  FROM moz_places p
                  JOIN moz_annos a ON p.id = a.place_id
                  JOIN moz_historyvisits h ON p.id = h.place_id
                  WHERE a.anno_attribute_id = :attr_id
                  GROUP BY p.id
                  ORDER BY h.visit_date DESC
                `;
                statement = dbConnection.createStatement(sql);
                statement.params.attr_id = downloadAttrId;

                while (statement.executeStep()) {
                  let url = statement.getUTF8String(0);
                  let title = statement.getUTF8String(1);
                  let visit_date_micros = statement.getInt64(2);
                  let fileUri = statement.getUTF8String(3);

                  if (fileUri && fileUri.startsWith("file:///")) {
                    downloadItems.push({
                      filename:
                        title || url?.split("/").pop() || "Unknown Filename",
                      timestamp: visit_date_micros / 1000,
                      url: url,
                      fileUri: fileUri,
                    });
                  }
                }

                // --- UI Building ---
                downloadsListArea.textContent = ""; // Clear "Loading..."

                if (downloadItems.length === 0) {
                  downloadsListArea.textContent =
                    "No downloads found in history.";
                  downloadsListArea.style.border =
                    "1px dashed var(--error-color, red)"; // Use theme variable if possible
                  downloadsListArea.style.color = "var(--error-color, red)";
                } else {
                  downloadsListArea.style.border = "none";

                  const downloadsByDate = downloadItems.reduce(
                    (acc, download) => {
                      const date = new Date(download.timestamp);
                      const dateString = date.toISOString().split("T")[0];
                      if (!acc[dateString]) {
                        acc[dateString] = [];
                      }
                      acc[dateString].push(download);
                      return acc;
                    },
                    {}
                  );

                  function getDownloadCategory(filename) {
                    const name = filename || "";
                    const extension = name.includes(".")
                      ? name.split(".").pop().toLowerCase()
                      : "";
                    const mediaExtensions = [
                      "jpg",
                      "jpeg",
                      "png",
                      "gif",
                      "bmp",
                      "webp",
                      "svg",
                      "avif",
                      "jxl",
                      "mp4",
                      "webm",
                      "mov",
                      "avi",
                      "mkv",
                      "flv",
                      "mp3",
                      "wav",
                      "ogg",
                      "aac",
                      "flac",
                      "m4a",
                      "opus",
                    ];
                    const docExtensions = [
                      "pdf",
                      "epub",
                      "mobi",
                      "doc",
                      "docx",
                      "ppt",
                      "pptx",
                      "xls",
                      "xlsx",
                      "odt",
                      "ods",
                      "odp",
                      "txt",
                      "log",
                      "csv",
                      "json",
                      "xml",
                      "md",
                    ];
                    const fileExtensions = [
                      "zip",
                      "rar",
                      "7z",
                      "tar",
                      "gz",
                      "bz2",
                      "iso",
                      "img",
                      "exe",
                      "msi",
                      "dmg",
                      "pkg",
                      "deb",
                      "rpm",
                    ];

                    if (mediaExtensions.includes(extension)) return "media";
                    if (docExtensions.includes(extension)) return "documents";
                    if (fileExtensions.includes(extension)) return "files";
                    return "files"; // Default to files
                  }

                  function escapeForHTMLAttr(str) {
                    if (!str) return "";
                    return str
                      .toString()
                      .replace(/&/g, "&amp;")
                      .replace(/</g, "&lt;")
                      .replace(/>/g, "&gt;")
                      .replace(/"/g, "&quot;")
                      .replace(/'/g, "&#39;");
                  }

                  const sortedDates = Object.keys(downloadsByDate).sort(
                    (a, b) => b.localeCompare(a)
                  );

                  sortedDates.forEach((dateString, dateIndex) => {
                    const downloadsForDate = downloadsByDate[dateString].sort(
                      (a, b) => b.timestamp - a.timestamp
                    );

                    const dateSection = document.createElement("div");
                    dateSection.className = "haven-downloads-date-section";
                    const dateHeader = document.createElement("div");
                    dateHeader.className = "haven-downloads-date-header";
                    const dateObj = new Date(dateString + "T00:00:00");
                    const formattedDate = dateObj.toLocaleDateString(
                      undefined,
                      { year: "numeric", month: "long", day: "numeric" }
                    );
                    dateHeader.innerHTML = `<span class="date-toggle">▼</span><span class="date-text">${formattedDate}</span>`;
                    dateSection.appendChild(dateHeader);

                    const dateContent = document.createElement("div");
                    dateContent.className = "haven-downloads-date-content";
                    dateSection.appendChild(dateContent);

                    const filesColumn = document.createElement("div");
                    filesColumn.className =
                      "haven-downloads-column files-column";
                    filesColumn.innerHTML =
                      '<div class="column-title">Files</div>';
                    const filesList = document.createElement("div");
                    filesList.className = "files-list";
                    filesColumn.appendChild(filesList);

                    const rightColumn = document.createElement("div");
                    rightColumn.className =
                      "haven-downloads-column right-column";

                    const mediaColumn = document.createElement("div");
                    mediaColumn.className =
                      "haven-downloads-subcolumn media-column";
                    mediaColumn.innerHTML =
                      '<div class="column-title">Media</div>';
                    const mediaGrid = document.createElement("div");
                    mediaGrid.className = "media-grid";
                    mediaColumn.appendChild(mediaGrid);

                    const documentsColumn = document.createElement("div");
                    documentsColumn.className =
                      "haven-downloads-subcolumn documents-column";
                    documentsColumn.innerHTML =
                      '<div class="column-title">Documents</div>';
                    const documentsGrid = document.createElement("div");
                    documentsGrid.className = "documents-grid";
                    documentsColumn.appendChild(documentsGrid);

                    rightColumn.appendChild(mediaColumn);
                    rightColumn.appendChild(documentsColumn);

                    const separator = document.createElement("div");
                    separator.className = "column-separator";

                    dateContent.appendChild(filesColumn);
                    dateContent.appendChild(separator);
                    dateContent.appendChild(rightColumn);

                    let itemsAdded = false;
                    downloadsForDate.forEach((download) => {
                      const category = getDownloadCategory(download.filename);
                      try {
                        const safeFilenameForAttr = escapeForHTMLAttr(
                          download.filename
                        );
                        const safeSourceUrlForAttr = escapeForHTMLAttr(
                          download.url
                        );
                        const safeFileUriForAttr = escapeForHTMLAttr(
                          download.fileUri
                        );
                        const titleAttr = `${safeFilenameForAttr}\nSource: ${safeSourceUrlForAttr}\nFile: ${safeFileUriForAttr}`;
                        const displayFilename =
                          download.filename || "Unknown Filename";

                        let targetElement;
                        let itemElement;

                        // Create click handler
                        const handleItemClick = (event) => {
                          event.preventDefault();
                          try {
                            // Convert file URI to path with proper handling for Windows
                            let filePath = download.fileUri.replace(
                              "file:///",
                              ""
                            );
                            filePath = decodeURIComponent(filePath);

                            // Convert forward slashes to backslashes for Windows
                            filePath = filePath.replace(/\//g, "\\");

                            // Create an nsIFile instance
                            let file = Cc[
                              "@mozilla.org/file/local;1"
                            ].createInstance(Ci.nsIFile);

                            // Handle Windows drive letters properly
                            if (filePath.match(/^[A-Za-z]:\\/)) {
                              file.initWithPath(filePath);
                            } else {
                              file.initWithPath(`C:\\${filePath}`); // Add drive letter if missing
                            }

                            if (file.exists()) {
                              try {
                                file.launch();
                              } catch (launchError) {
                                console.error(
                                  "[ZenHaven] Error launching file:",
                                  launchError
                                );
                                alert(
                                  `Error opening file: ${download.filename}`
                                );
                              }
                            } else {
                              console.error(
                                `[ZenHaven] File not found: ${filePath}`
                              );
                              alert(`File not found: ${download.filename}`);
                            }
                          } catch (err) {
                            console.error(
                              "[ZenHaven] Error opening file:",
                              err
                            );
                            alert(`Error accessing file: ${download.filename}`);
                          }
                        };

                        if (category === "files") {
                          itemElement = document.createElement("div");
                          itemElement.className = "haven-download-file-item";
                          itemElement.innerHTML = `<div class="file-icon"></div><div class="file-details"><div class="file-name" title="${titleAttr}">${displayFilename}</div><div class="file-status">Complete</div></div>`;
                          itemElement.addEventListener(
                            "click",
                            handleItemClick
                          );
                          targetElement = filesList;
                        } else if (category === "media") {
                          itemElement = document.createElement("div");
                          itemElement.className = "haven-download-media-item";
                          itemElement.title = titleAttr;
                          itemElement.addEventListener(
                            "click",
                            handleItemClick
                          );
                          targetElement = mediaGrid;
                        } else if (category === "documents") {
                          itemElement = document.createElement("div");
                          itemElement.className =
                            "haven-download-document-item";
                          itemElement.title = titleAttr;
                          itemElement.addEventListener(
                            "click",
                            handleItemClick
                          );
                          targetElement = documentsGrid;
                        }

                        if (itemElement && targetElement) {
                          targetElement.appendChild(itemElement);
                          itemsAdded = true;
                        }
                      } catch (itemError) {
                        // Optionally log the error to a more persistent store or UI element if needed
                        const errorItem = document.createElement("div");
                        errorItem.textContent = `Error processing: ${
                          download.filename || "Unknown"
                        }`;
                        errorItem.style.color = "var(--error-color, red)";
                        errorItem.style.fontSize = "0.8em";
                        if (category === "files")
                          filesList.appendChild(errorItem);
                        else if (category === "media")
                          mediaGrid.appendChild(errorItem);
                        else if (category === "documents")
                          documentsGrid.appendChild(errorItem);
                      }
                    });

                    if (itemsAdded) {
                      dateHeader.addEventListener("click", () => {
                        const isExpanded = dateContent.style.display !== "none";
                        dateContent.style.display = isExpanded ? "none" : "";
                        dateHeader.querySelector(".date-toggle").textContent =
                          isExpanded ? "▶" : "▼";
                      });
                      downloadsListArea.appendChild(dateSection);
                      if (dateIndex < sortedDates.length - 1) {
                        const horizontalSeparator =
                          document.createElement("div");
                        horizontalSeparator.className = "date-separator";
                        downloadsListArea.appendChild(horizontalSeparator);
                      }
                    }
                  });
                }
              } catch (err) {
                // Report error more gracefully if possible
                downloadsListArea.textContent =
                  "Error loading download history.";
                downloadsListArea.style.border =
                  "1px dashed var(--error-color, red)";
                downloadsListArea.style.color = "var(--error-color, red)";
              } finally {
                if (statement) {
                  statement.finalize();
                }
              }

              // --- CSS Styles ---
              const downloadsStyles = document.createElement("style");
              downloadsStyles.id = "haven-downloads-styles";
              downloadsStyles.textContent = `
              #zen-haven-container[haven-downloads] {
                  flex-direction: column !important;
                  overflow: hidden;
                  width: 100%;
                  height: 100%;
                  padding: 0;
                  box-sizing: border-box;
              }

              .haven-downloads-view {
                  display: flex;
                  flex-direction: column;
                  height: 90vh;
                  width: 100%;
                  padding: 20px 32px 20px 40px;
                  box-sizing: border-box;
                  color: var(--toolbar-color, white);
              }

              .haven-downloads-searchbar {
                  width: 100%;
                  max-width: 500px;
                  height: 50px;
                  background-color: var(--zen-toolbar-field-background, #4B4B4B);
                  border-radius: 25px;
                  margin-bottom: 30px;
                  display: flex;
                  align-items: center;
                  padding: 0 15px;
                  box-sizing: border-box;
                  flex-shrink: 0;
              }

              .haven-downloads-searchbar input {
                  flex-grow: 1;
                  background: transparent;
                  border: none;
                  outline: none;
                  color: var(--toolbar-color, white);
                  font-size: 16px;
              }

              .haven-downloads-searchbar input::placeholder {
                  color: var(--toolbar-color, white);
                  opacity: 0.7;
              }

              .haven-downloads-list-area {
                  flex-grow: 1;
                  overflow-y: auto;
                  padding-right: 10px; /* space for scrollbar */
              }

              .haven-downloads-list-area::-webkit-scrollbar {
                  width: 8px;
              }

              .haven-downloads-list-area::-webkit-scrollbar-track {
                  background: var(--zen-sidebar-background, #2F2F2F);
                  border-radius: 4px;
              }

              .haven-downloads-list-area::-webkit-scrollbar-thumb {
                  background-color: var(--zen-tabs-border-color, #727272);
                  border-radius: 4px;
                  border: 2px solid var(--zen-sidebar-background, #2F2F2F);
              }

              /* For Firefox */
              .haven-downloads-list-area {
                  scrollbar-width: thin;
                  scrollbar-color: var(--zen-tabs-border-color, #727272) var(--zen-sidebar-background, #2F2F2F);
              }

              .haven-downloads-date-section {
                  margin-bottom: 15px;
              }

              .haven-downloads-date-header {
                  display: flex;
                  align-items: center;
                  cursor: pointer;
                  margin-bottom: 20px;
                  padding: 5px 0;
              }

              .haven-downloads-date-header .date-toggle {
                  font-size: 1.2em;
                  margin-right: 15px;
                  color: var(--toolbar-color, white);
                  width: 20px;
                  text-align: center;
                  user-select: none;
                  transition: transform 0.2s ease-in-out;
              }

              .haven-downloads-date-header .date-toggle:not(▼) {
                  transform: rotate(-90deg); /* Nicer toggle */
              }

              .haven-downloads-date-header .date-text {
                  font-size: 1.8em;
                  font-weight: 400;
                  font-family: 'Inter', sans-serif;
                  color: var(--toolbar-color, white);
              }

              .haven-downloads-date-content {
                  display: flex;
                  gap: 25px;
                  padding-left: 35px;
                  overflow: hidden; /* Needed for smooth toggle */
                  transition: all 0.3s ease-out;
              }

              .haven-downloads-date-content[style*="display: none"] {
                  max-height: 0;
                  padding-top: 0;
                  padding-bottom: 0;
                  max-height: 0;
                  padding-top: 0;
                  padding-bottom: 0;
                  margin-bottom: 0;
                  opacity: 0; /* Smooth collapse */
              }

              .haven-downloads-column {
                  display: flex;
                  flex-direction: column;
                  gap: 15px;
              }

              .files-column {
                  flex: 1;
                  min-width: 300px;
              }

              .right-column {
                  flex: 1.5;
                  min-width: 400px;
                  display: flex;
                  flex-direction: column;
                  gap: 30px;
              }

              .column-separator {
                  width: 2px;
                  background-color: var(--zen-tabs-border-color, #727272);
                  align-self: stretch;
                  flex-shrink: 0;
              }

              .haven-downloads-subcolumn {
                  display: flex;
                  flex-direction: column;
                  gap: 15px;
              }

              .column-title {
                  font-size: 1.5em;
                  font-weight: 400;
                  font-family: 'Inter', sans-serif;
                  color: var(--toolbar-color, white);
                  margin-bottom: 5px;
                  flex-shrink: 0;
              }

              .files-list {
                  display: flex;
                  flex-direction: column;
                  gap: 15px;
              }

              .haven-download-file-item {
                  display: flex;
                  align-items: center;
                  gap: 15px;
                  background-color: var(--zen-toolbar-field-background, #4B4B4B);
                  padding: 10px 12px;
                  border-radius: 4px;
                  min-height: 60px;
                  cursor: pointer;
                  transition: background-color 0.2s ease;
              }

              .haven-download-file-item:hover {
                  background-color: var(--zen-toolbar-field-background-hover, #5a5a5a);
              }

              .file-icon {
                  width: 40px;
                  height: 40px;
                  background-color: var(--zen-second-level-background, #424242);
                  border-radius: 3px;
                  flex-shrink: 0; /* Add generic file icon? */
              }

              .file-details {
                  flex-grow: 1;
                  display: flex;
                  flex-direction: column;
                  gap: 5px;
                  overflow: hidden;
              }

              .file-name {
                  font-size: 1em;
                  font-weight: 500;
                  color: var(--toolbar-color, white);
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
              }

              .file-status {
                  font-size: 0.85em;
                  color: var(--toolbar-color, white);
                  opacity: 0.8;
              }

              .media-grid {
                  display: grid;
                  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
                  gap: 15px;
              }

              .haven-download-media-item {
                  width: 100%;
                  aspect-ratio: 1 / 1;
                  background-color: var(--zen-toolbar-field-background, #4B4B4B);
                  border-radius: 4px;
                  cursor: pointer;
                  background-size: cover;
                  background-position: center;
                  transition: transform 0.2s ease, box-shadow 0.2s ease;
              }

              .haven-download-media-item:hover {
                  transform: scale(1.05);
                  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
              }

              .documents-grid {
                  display: grid;
                  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
                  gap: 20px;
              }

              .haven-download-document-item {
                  width: 100%;
                  aspect-ratio: 4 / 5;
                  background-color: var(--zen-toolbar-field-background, #4B4B4B);
                  border-radius: 4px;
                  cursor: pointer;
                  display: flex;
                  align-items: center;
                  justify-content: center; /* Add generic doc icon? */
                  transition: background-color 0.2s ease;
              }

              .haven-download-document-item:hover {
                  background-color: var(--zen-toolbar-field-background-hover, #5a5a5a);
              }

              .date-separator {
                  height: 2px;
                  background-color: var(--zen-tabs-border-color, #727272);
                  margin: 30px 0;
                  flex-shrink: 0;
              }
              `;
              document.head.appendChild(downloadsStyles);
            }
          }

          if (
            mutation.type === "attributes" &&
            mutation.attributeName === "haven-history"
          ) {
            console.log("[ZenHaven] History observer triggered");

            const existingHistory =
              sidebarContainer.querySelectorAll(".haven-history");
            existingHistory.forEach((el) => el.remove());

            if (sidebarContainer.hasAttribute("haven-history")) {
              const historyContainer = document.createElement("div");
              historyContainer.className = "haven-history";
              sidebarContainer.appendChild(historyContainer);

              const { PlacesUtils } = ChromeUtils.importESModule(
                "resource://gre/modules/PlacesUtils.sys.mjs"
              );
              const SESSION_TIMEOUT_MINUTES = 30;

              const startDate = new Date();
              startDate.setDate(startDate.getDate() - 7);

              const query = PlacesUtils.history.getNewQuery();
              query.beginTimeReference = query.TIME_RELATIVE_EPOCH;
              query.beginTime = startDate.getTime() * 1000;
              query.endTime = Date.now() * 1000;
              query.endTimeReference = query.TIME_RELATIVE_EPOCH;

              const options = PlacesUtils.history.getNewQueryOptions();
              options.sortingMode = options.SORT_BY_DATE_DESCENDING;
              options.resultType = options.RESULTS_AS_VISIT;
              options.includeHidden = false;

              const result = PlacesUtils.history.executeQuery(query, options);
              const root = result.root;
              root.containerOpen = true;

              const visitsByDate = new Map();

              for (let i = 0; i < root.childCount; i++) {
                const node = root.getChild(i);
                const visitTime = new Date(node.time / 1000);
                const dayKey = visitTime.toLocaleDateString(undefined, {
                  weekday: "long",
                  month: "short",
                  day: "numeric",
                  year: "numeric",
                });

                if (!visitsByDate.has(dayKey)) visitsByDate.set(dayKey, []);
                visitsByDate.get(dayKey).push({ node, time: visitTime });
              }

              root.containerOpen = false;

              visitsByDate.forEach((visits, dayKey, index) => {
                const daySection = createCollapsible(
                  "📅 " + dayKey,
                  false,
                  "day-section"
                );
                historyContainer.appendChild(daySection.wrapper);

                // Group by session within the day
                const sessions = [];
                let currentSession = [];
                let lastTime = null;

                visits.forEach(({ node, time }) => {
                  if (lastTime) {
                    const gap = (lastTime - time) / (1000 * 60);
                    if (gap > SESSION_TIMEOUT_MINUTES) {
                      if (currentSession.length > 0) {
                        sessions.push(currentSession);
                        currentSession = [];
                      }
                    }
                  }
                  currentSession.push({ node, time });
                  lastTime = time;
                });

                if (currentSession.length > 0) sessions.push(currentSession);

                sessions.forEach((session, idx) => {
                  const sessionStart = session[session.length - 1].time;
                  const sessionEnd = session[0].time;

                  const timeRange = `${sessionStart.toLocaleTimeString([], {
                    hour: "2-digit",
                    minute: "2-digit",
                  })} – ${sessionEnd.toLocaleTimeString([], {
                    hour: "2-digit",
                    minute: "2-digit",
                  })}`;
                  const sessionTitle = `🕓 Session ${idx + 1} • ${timeRange}`;

                  const sessionSection = createCollapsible(
                    sessionTitle,
                    false,
                    "session-section"
                  );
                  daySection.content.appendChild(sessionSection.wrapper);

                  session.forEach(({ node }) => {
                    const item = createHistoryItem(node);
                    sessionSection.content.appendChild(item);
                  });
                });
              });

              function createCollapsible(
                title,
                expanded = false,
                className = ""
              ) {
                const wrapper = document.createElement("div");
                wrapper.className = className;

                const header = document.createElement("div");
                header.className = "collapsible-header";
                header.innerHTML = `
                  <span class="section-toggle">${expanded ? "▼" : "▶"}</span>
                  <span class="section-title">${title}</span>
                `;

                const content = document.createElement("div");
                content.className = "collapsible-content";
                content.style.display = expanded ? "block" : "none";

                header.addEventListener("click", () => {
                  const isOpen = content.style.display === "block";
                  content.style.display = isOpen ? "none" : "block";
                  header.querySelector(".section-toggle").textContent = isOpen
                    ? "▶"
                    : "▼";
                });

                wrapper.appendChild(header);
                wrapper.appendChild(content);
                return { wrapper, content };
              }

              function createHistoryItem(node) {
                const item = document.createElement("div");
                item.className = "haven-history-item";

                const favicon = document.createElement("img");
                favicon.className = "history-icon";
                favicon.src =
                  "https://www.google.com/s2/favicons?sz=32&domain_url=" +
                  encodeURIComponent(node.uri);

                const content = document.createElement("div");
                content.className = "history-item-content";

                const title = document.createElement("div");
                title.className = "history-title";
                title.textContent = node.title || node.uri;

                const time = document.createElement("div");
                time.className = "history-time";
                time.textContent = new Date(
                  node.time / 1000
                ).toLocaleTimeString();

                content.appendChild(title);
                content.appendChild(time);

                item.appendChild(favicon);
                item.appendChild(content);

                item.addEventListener("click", () => {
                  gBrowser.selectedTab = gBrowser.addTab(node.uri, {
                    triggeringPrincipal:
                      Services.scriptSecurityManager.getSystemPrincipal(),
                  });
                });

                return item;
              }

              const style = document.createElement("style");
              style.textContent = `
                .haven-history {
                  padding: 16px;
                  height: 90vh;
                  width: 50vw;
                  overflow-y: auto;
                  background: var(--zen-background);
                }
          
                .day-section, .session-section {
                  margin-bottom: 12px;
                }
          
                .collapsible-header {
                  background: var(--zen-themed-toolbar-bg);
                  border-radius: 6px;
                  padding: 12px;
                  display: flex;
                  align-items: center;
                  gap: 8px;
                  cursor: pointer;
                }
          
                .collapsible-header:hover {
                  background: var(--toolbarbutton-hover-background);
                }
          
                .section-toggle {
                  font-family: monospace;
                  font-size: 12px;
                  width: 16px;
                  text-align: center;
                  font-family: monospace;
                  font-size: 12px;
                  width: 16px;
                  text-align: center;
                  color: var(--toolbar-color);
                }
          
                .section-title {
                  font-weight: 600;
                  color: var(--toolbar-color);
                }
          
                .collapsible-content {
                  padding: 8px 12px;
                  display: flex;
                  flex-direction: column;
                  gap: 8px;
                }
          
                .haven-history-item {
                  display: flex;
                  align-items: center;
                  gap: 12px;
                  padding: 8px;
                  border-radius: 4px;
                  transition: background-color 0.2s;
                  cursor: pointer;
                }
          
                .haven-history-item:hover {
                  background-color: var(--toolbarbutton-hover-background);
                }
          
                .history-icon {
                  width: 32px;
                  height: 32px;
                  border-radius: 50%;
                  background: var(--zen-colors-border);
                }
          
                .history-item-content {
                  display: flex;
                  flex-direction: column;
                  gap: 2px;
                }
          
                .history-title {
                  font-weight: 500;
                  color: var(--toolbar-color);
                }
          
                .history-time {
                  font-size: 0.85em;
                  color: var(--toolbar-color);
                  opacity: 0.75;
                }
              `;
              document.head.appendChild(style);
            }
          }

          if (
            mutation.type === "attributes" &&
            mutation.attributeName === "haven-notes"
          ) {
            const sidebarContainer = document.getElementById(
              "zen-haven-container"
            );

            if (sidebarContainer.hasAttribute("haven-notes")) {
              // Only create new content if it doesn't exist
              if (!sidebarContainer.querySelector("#haven-notes-view")) {
                const notesViewContainer = document.createElement("div");
                notesViewContainer.id = "haven-notes-view";

                // Create header section with search and add button
                const headerSection = document.createElement("div");
                headerSection.id = "haven-notes-header";

                // Add button
                const addButton = document.createElement("button");
                addButton.id = "haven-notes-add-button";
                addButton.innerHTML = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M12 4V20M4 12H20" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                </svg>`;
                addButton.title = "Create new note";

                // Search bar
                const searchBar = document.createElement("input");
                searchBar.type = "text";
                searchBar.id = "haven-notes-search";
                searchBar.placeholder = "Search notes...";

                headerSection.appendChild(addButton);
                headerSection.appendChild(searchBar);
                notesViewContainer.appendChild(headerSection);

                // Notes grid container
                const notesGrid = document.createElement("div");
                notesGrid.id = "haven-notes-grid";

                // Create default note template
                const createNoteCard = () => {
                  const noteCard = document.createElement("div");
                  noteCard.className = "haven-note-card"; // Keep as class since multiple cards
                  noteCard.innerHTML = `
                    <svg class="note-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path fill-rule="evenodd" clip-rule="evenodd" d="M4 4C4 2.89543 4.89543 2 6 2H14.1716C14.702 2 15.2107 2.21071 15.5858 2.58579L19.4142 6.41421C19.7893 6.78929 20 7.29799 20 7.82843V20C20 21.1046 19.1046 22 18 22H6C4.89543 22 4 21.1046 4 20V4ZM6 4H14V8C14 8.55228 14.4477 9 15 9H19V20H6V4ZM16 4.41421L18.5858 7H16V4.41421Z" fill="currentColor"/>
                    </svg>
                    <h1>Untitled</h1>
                    <p>Click to add page content</p>
                  `;
                  return noteCard;
                };

                addButton.addEventListener("click", () => {
                  const newNote = createNoteCard();
                  notesGrid.appendChild(newNote);
                });

                notesGrid.appendChild(createNoteCard());
                notesViewContainer.appendChild(notesGrid);
                sidebarContainer.appendChild(notesViewContainer);

                const notesStyles = document.createElement("style");
                notesStyles.id = "haven-notes-styles";
                notesStyles.textContent = `
                  #zen-haven-container[haven-notes] {
                    flex-direction: column !important;
                    overflow: hidden;
                    width: 100%;
                    height: 100%;
                    padding: 0;
                    box-sizing: border-box;
                  }
            
                  #haven-notes-view {
                    width: 100% !important;
                    height: 90vh;
                    display: flex;
                    flex-direction: column;
                    gap: 20px;
                    background: var(--zen-background);
                    overflow-y: auto !important;  /* Enable vertical scrolling */
                    scrollbar-width: thin;
                    scrollbar-color: var(--zen-tabs-border-color) var(--zen-sidebar-background);
                  }
            
                  #haven-notes-header {
                    position: sticky !important;  /* Keep header visible when scrolling */
                    top: 0 !important;
                    z-index: 10 !important;
                    background: var(--zen-background);
                    padding: 20px !important;
                    border-bottom: 1px solid var(--zen-tabs-border-color);
                  }
            
                  #haven-notes-add-button {
                    width: 40px;
                    height: 40px;
                    border: none;
                    border-radius: 8px;
                    background: var(--zen-toolbar-field-background);
                    color: var(--toolbar-color);
                    cursor: pointer;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    transition: background 0.2s;
                  }
            
                  #haven-notes-add-button:hover {
                    background: var(--toolbarbutton-hover-background);
                  }
            
                  #haven-notes-search {
                    flex: 1;
                    height: 40px;
                    border: none;
                    border-radius: 20px;
                    background: var(--zen-toolbar-field-background);
                    color: var(--toolbar-color);
                    padding: 0 16px;
                    font-size: 14px;
                  }
            
                  #haven-notes-search::placeholder {
                    color: var(--toolbar-color);
                    opacity: 0.7;
                  }
            
                  #haven-notes-grid {
                    flex: 1;
                    display: grid;
                    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
                    gap: 16px;
                    padding: 16px;
                    overflow-y: visible; /* Allow grid to scroll within parent */
                  }
            
                  /* Scrollbar styling */
                  #haven-notes-view::-webkit-scrollbar {
                    width: 8px;
                  }
            
                  #haven-notes-view::-webkit-scrollbar-track {
                    background: var(--zen-sidebar-background);
                    border-radius: 4px;
                  }
            
                  #haven-notes-view::-webkit-scrollbar-thumb {
                    background-color: var(--zen-tabs-border-color);
                    border-radius: 4px;
                    border: 2px solid var(--zen-sidebar-background);
                  }
            
                  .haven-note-card {
                    width: 150px;
                    height: 150px;
                    background: var(--zen-toolbar-field-background);
                    border-radius: 8px;
                    padding: 16px;
                    cursor: pointer;
                    transition: transform 0.2s, background 0.2s;
                    display: flex;
                    flex-direction: column;
                    gap: 8px;
                  }
            
                  .haven-note-card:hover {
                    background: var(--toolbarbutton-hover-background);
                    transform: translateY(-2px);
                  }
            
                  .haven-note-card .note-icon {
                    color: var(--toolbar-color);
                    opacity: 0.8;
                  }
            
                  .haven-note-card h1 {
                    margin: 0;
                    font-size: 16px;
                    font-weight: 500;
                    color: var(--toolbar-color);
                  }
            
                  .haven-note-card p {
                    margin: 0;
                    font-size: 12px;
                    color: var(--toolbar-color);
                    opacity: 0.7;
                  }
                `;
                document.head.appendChild(notesStyles);
              }
            } else {
              // Clear content when attribute is removed
              while (sidebarContainer.firstChild) {
                sidebarContainer.removeChild(sidebarContainer.firstChild);
              }
            }
          }
        });
      });

      workspaceObserver.observe(sidebarContainer, { attributes: true });

      // Add styles for workspaces
      const workspaceStyles = document.createElement("style");
      workspaceStyles.textContent = `
        :root:has(#navigator-toolbox[haven]) {
          #zen-haven-container {
            display: flex !important;
            flex-direction: row !important;
            align-items: center;
            overflow-x: scroll;
            overflow-y: hidden;
            box-shadow:
              inset 10px 0 20px rgba(0, 0, 0, 0.5),
              inset 0 0 20px rgba(0, 0, 0, 0.5),
              inset 0 0 20px rgba(0, 0, 0, 0.5);
          }
        }

        /* Move workspace section styles outside the nesting */
        .haven-workspace {
          opacity: 100% !important;
          height: 85% !important;
          min-width: 150px;
          width: 100% !important;
          background-color: var(--zen-primary-color);
          margin-left: 30px;
          margin-right: 30px;
          border-radius: 8px;
          border: 2px solid var(--zen-colors-border);
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 10px !important;
        }

        .haven-workspace .tab-reset-pin-button {
          display: none;
        }

        .haven-workspace .tab-icon-image {
          margin-right: 10px;
        }

        .haven-workspace-header {
          margin: 2px !important;
        }

        .workspace-icon {
          font-size: 16px;
        }

        .workspace-title {
          font-size: 16px !important;
          margin-right: 10px !important;
        }

        .haven-workspace-content {
          margin: 0 !important;
          padding: 10px !important;
          display: flex !important;
          flex-direction: column !important;
          align-items: flex-start !important;
          height: 100% !important;
          width: 100% !important;
          overflow: hidden !important;
        }

        .haven-workspace-section {
          display: flex !important;
          position: relative !important;
          height: fit-content !important;
          width: 100% !important;
          flex-direction: column !important;
          margin: 0 !important;
          margin-top: 2px !important;
          margin-bottom: 2px !important;
          padding-inline: 2px !important;
          transform: translateX(0) !important;
        }
      `;
      document.head.appendChild(workspaceStyles);
    } else {
      console.log("[ZenHaven] Sidebar splitter not found!");
    }

    // Update the CSS
    const customStyles = document.createElement("style");
    customStyles.textContent += `
      :root:has(#navigator-toolbox[haven]) {
        #custom-toolbar {
          width: 15vw;
          height: 100%;
          display: flex;
          flex-direction: column;
        }

        #toolbar-header {
          font-size: 20px;
          display: flex !important;
          align-items: center;
          margin-top: 5px;
          margin-left: 5px;
          margin-right: 50px;
          height: 24px;
        }

        #toolbar-header .header-icon {
          display: flex;
          width: 24px;
          height: 24px;
          align-items: center;
          justify-content: center;
          margin-right: 5px;
        }

        #toolbar-header .header-icon svg {
          width: 20px !important;
          height: 20px !important;
        }

        #functions-container {
          height: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
        }

        .custom-button {
          display: flex;
          flex-direction: column;
          width: 100px;
          height: 100px;
          margin-top: auto;
          margin-bottom: auto;
          align-items: center;
          justify-content: center;
        }

        .custom-button .icon svg {
          height: 24px !important;
        }

        .custom-button .label {
          display: block;
          margin-top: 8px;
          text-align: center;
        }

        .custom-button,
        .toolbarbutton-1 {
          transition: transform 0.1s ease-in-out, background-color 0.2s ease;
          cursor: pointer;
          padding: 8px;
          border-radius: 8px;
          position: relative;
        }

        .custom-button:hover,
        .toolbarbutton-1:hover {
          background-color: var(--toolbarbutton-hover-background);
          transform: translateY(-1px);
        } 

        .custom-button.clicked {
          transform: translateY(1px);
          background-color: var(--toolbarbutton-active-background);
        } 

        .custom-button.active {
          background-color: var(--toolbarbutton-active-background);
          transform: translateY(1px);
        }
      }
    `;
    document.head.appendChild(customStyles);

    console.log("[ZenHaven] UI setup complete");
  }

  // Create an observer for the [haven] attribute
  function createToolboxObserver() {
    console.log("[ZenHaven] Setting up toolbox observer");
    const toolbox = document.getElementById("navigator-toolbox");
    if (!toolbox) return;

    const toolboxObserver = new MutationObserver((mutations) => {
      mutations.forEach((mutation) => {
        if (
          mutation.type === "attributes" &&
          mutation.attributeName === "haven"
        ) {
          console.log("[ZenHaven] Haven attribute changed");

          if (toolbox.hasAttribute("haven")) {
            // Haven mode activated
            setupCustomUI();
          } else {
            // Haven mode deactivated - restore original UI
            console.log("[ZenHaven] Restoring original UI");

            // Restore bottom buttons after media controls toolbar
            const bottomButtons = document.getElementById(
              "zen-sidebar-bottom-buttons"
            );
            const mediaToolbar = document.getElementById(
              "zen-media-controls-toolbar"
            );

            if (bottomButtons && mediaToolbar) {
              // Insert after media toolbar
              mediaToolbar.parentNode.insertBefore(
                bottomButtons,
                mediaToolbar.nextSibling
              );

              // Show workspaces button again
              const workspacesButton = bottomButtons.querySelector(
                "#zen-workspaces-button"
              );
              if (workspacesButton) {
                workspacesButton.style.display = "";
              }
              console.log(
                "[ZenHaven] Bottom buttons restored after media controls"
              );
            } else {
              console.log(
                "[ZenHaven] Could not find media controls toolbar or bottom buttons"
              );
            }

            // Show all original children
            Array.from(toolbox.children).forEach((child) => {
              if (child.id !== "custom-toolbar") {
                child.style.display = "";
              }
            });

            // Remove custom elements
            const customToolbar = document.getElementById("custom-toolbar");
            const havenContainer = document.getElementById(
              "zen-haven-container"
            );

            if (customToolbar) {
              customToolbar.remove();
            }

            if (havenContainer) {
              havenContainer.remove();
            }
          }
        }
      });
    });

    toolboxObserver.observe(toolbox, { attributes: true });
    console.log("[ZenHaven] Toolbox observer active");
  }

  // After document ready, create and inject the haven toggle button
  // Modify the createHavenToggle function to insert after new tab button
  function createHavenToggle() {
    const sidebarBottomButtons = document.getElementById(
      "zen-sidebar-bottom-buttons"
    );
    if (!sidebarBottomButtons) {
      console.log("[ZenHaven] Bottom buttons container not found");
      return;
    }

    // Create the button with correct XUL structure
    const toolbarButton = document.createXULElement("toolbarbutton");
    toolbarButton.setAttribute(
      "xmlns",
      "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
    );
    toolbarButton.className =
      "toolbarbutton-1 chromeclass-toolbar-additional subviewbutton-nav";
    toolbarButton.id = "haven-toggle-button";
    toolbarButton.setAttribute("delegatesanchor", "true");
    toolbarButton.setAttribute("removable", "true");
    toolbarButton.setAttribute("overflows", "true");
    toolbarButton.setAttribute("label", "Toggle Haven");
    toolbarButton.setAttribute("tooltiptext", "Toggle Haven Mode");

    // Add icon
    const iconSVG = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M2 3C2 2.44772 2.44772 2 3 2H13C13.5523 2 14 2.44772 14 3V13C14 13.5523 13.5523 14 13 14H3C2.44772 14 2 13.5523 2 13V3ZM3 3H13V13H3V3ZM5 5H11V6H5V5ZM11 7H5V8H11V7ZM5 9H11V10H5V9Z" fill="currentColor"/>
    </svg>`;

    const image = document.createXULElement("image");
    image.className = "toolbarbutton-icon";
    image.style.listStyleImage = `url("data:image/svg+xml;charset=utf-8,${encodeURIComponent(
      iconSVG
    )}")`;
    image.setAttribute("label", "Toggle Haven");

    const label = document.createXULElement("label");
    label.className = "toolbarbutton-text";
    label.setAttribute("crop", "end");
    label.setAttribute("flex", "1");
    label.setAttribute("value", "Toggle Haven");

    // Add click handler
    toolbarButton.addEventListener("click", () => {
      const toolbox = document.getElementById("navigator-toolbox");
      if (toolbox) {
        if (toolbox.hasAttribute("haven")) {
          toolbox.removeAttribute("haven");
        } else {
          toolbox.setAttribute("haven", "");
        }
      }
    });

    // Assemble the button
    toolbarButton.appendChild(image);
    toolbarButton.appendChild(label);

    // Add to sidebar bottom buttons
    sidebarBottomButtons.appendChild(toolbarButton);
    console.log("[ZenHaven] Toggle button added to sidebar bottom buttons");
  }

  // Wait for startup before injecting UI
  if (gBrowserInit.delayedStartupFinished) {
    console.log("[ZenHaven] Browser already started");
    setupCustomUI();
    createToolboxObserver();
    createHavenToggle();
  } else {
    console.log("[ZenHaven] Waiting for browser startup");
    let observer = new MutationObserver(() => {
      if (gBrowserInit.delayedStartupFinished) {
        console.log("[ZenHaven] Browser startup detected");
        observer.disconnect();
        setupCustomUI();
        createToolboxObserver();
        createHavenToggle();
      }
    });
    observer.observe(document, { childList: true, subtree: true });
  }
})();

[12th-devs]

Also, I know its a big ask, but could you make it compadible with the main brach? If not I will have AI do it.

[Darsh-A]

ye i havent changed anything outside the if block for downloads so should be straight forward to merge.
oh yea ill make it transparent. my browser isnt transparent so crossed my mind totally.
will do all the other changes as well ^^

[12th-devs]

@Darsh-A, when can I expect these?

[Darsh-A]

hopefully today

[Darsh-A]

@Anoms12 Merged the code to main.
The open site and close haven functionality is remaining

[JustAdumbPrsn]

hii, yall have any good ideas which could be implimented using css?

[Darsh-A]

@Anoms12

The border shadow is from the main branch (i had removed it in my version)
i will work on ui more but will keep it simple since people will theme it anyways

[12th-devs]

@ferrocyante sounds good! Appreciate all the help n contributions!

@Anoms12 i got the way to get blur working on media player even on translucent background by adding a psuedo background i think i can make it work on download tidy notification toast

Are you using sudo elements for an advanced background with more than just a blur? If not why don't you use background-blur?

[12th-devs]

@Darsh-A it looks good, how does the recent and history work? Per session and all time, or some other method?

[Darsh-A]

@Darsh-A it looks good, how does the recent and history work? Per session and all time, or some other method?

@Anoms12 last 7 days is recent. per session would be too less downloads to show i think

[12th-devs]

@Darsh-A it looks good, how does the recent and history work? Per session and all time, or some other method?

@Anoms12 last 7 days is recent. per session would be too less downloads to show i think

That sounds good

[12th-devs]

@CosmoCreeper making Haven contributions 👀

While your at it, care to make the toolbar button (like save state and right click) work and give it a better icon?

[12th-devs]

@ferrocyante try that. @Zylaah it doesn't have to fit, you could js use the toolbar width vqr, and give it some padding-right, make it look like it fits. Using absolute positioning, I think that's how arc does it too

[12th-devs]

@JustAdumbPrsn try this script that Zylaah sent

[ferrocyante]

@ferrocyante try that. @Zylaah it doesn't have to fit, you could js use the toolbar width vqr, and give it some padding-right, make it look like it fits. Using absolute positioning, I think that's how arc does it too

i have js for that to get var of sidebar width @Anoms12 @Zylaah

[ferrocyante]

https://gist.github.com/ferrocyante/4200d345377bcf4b5b7679334365866a @Anoms12 @Zylaah

[ferrocyante]

you try this --zen-sidebar-width is the var you can use it to bound the the width of tidy download toast

[JustAdumbPrsn]

i have been ignoring zen haven for a while now, let me try it :))

[12th-devs]

@JustAdumbPrsn haven is not what we were js talking about, but it's cool too!

[JustAdumbPrsn]

oh could you catch me up on what you guys are cooking?

[ferrocyante]

Recording.2025-05-24.233353.1.mp4

[CosmoCreeper]

@Anoms12, @Darsh-A is correct. The gemini usage for the sort button they have created works well and is not only a much more universal login and easier to setup, but it has better rate limits. There are also multiple models so it is highly versatile. I would recommend using Gemini in the long run.

[12th-devs]

@CosmoCreeper I agree with you all, I just need to wait a bit before I get a Gemini API key, once I do I will switch over to Gemini. For the moment Mistral is fast enough (it also had multiple models)

[12th-devs]

Ps, y'all are watching the commits RN on tab folders, right? It's like cinema rn, I'm so excited!

[ferrocyante]

Ps, y'all are watching the commits RN on tab folders, right? It's like cinema rn, I'm so excited!

@Anoms12 are they going release today?

[12th-devs]

@ferrocyante idk but I rly rly hope so😭 I'm wayyyy to attached to this browser

[Darsh-A]

@Anoms12 Have a look at Google Keeps btw. Their Notetaking is the ebst reference i could find for Haven.
Maybe you can also add a sync feature for it later on

[12th-devs]

@Darsh-A that I will do

[ferrocyante]

@Anoms12 btw i wanted to create a workspace animation like in which web area slides ans switches like in mac os i tried making it with css but it had gpu increased hikes and lagg isuues can we try thru js ?

Recording_2025-03-26_211952.mp4

i know its relatively easy project but i will be busy due to studies in upcoming days but i will keep eye on happenings and whenever i will get free time i will try to help

[12th-devs]

@CosmoCreeper no no no (I made one yesterday) I just would want this animation to be a preference first, I mentioned CSS because I understand it better than js so I was gonna see what I could do.

[CosmoCreeper]

@Anoms12 okay. Was just making sure because I know you can.

[12th-devs]

@CosmoCreeper sounds good. I am going to work on haven today, any features you want me to get out? (Not workspaces, I don't understand them at all)

[CosmoCreeper]

@Anoms12 nah I dont really know.

[12th-devs]

@CosmoCreeper I'll just get on it then, and go till it's good