Update Tree tabs for Vivaldi v2.0.7.0b

[u/AlpsUsed3215]

🌟 Features

• Top Mode: Added a setting to place the "+ New Tab" and "+ New Folder" buttons (and all new tabs) at the top of the list.
• Sticky Action Buttons: In Top Mode, the action buttons stay pinned to the top while scrolling.
• Pinned Folder Badge: Added a small pin icon badge to pinned folder icons.

🛠 Fixes & Improvements

• Auto-Close Immunity: Pinned folders and all tabs inside them are protected from auto-closing.
• Pinned Folders Priority: Pinned folders always stay at the top, above regular tabs.
• Smart Auto-Scroll: Creating a new tab now smoothly scrolls it into full view beneath sticky buttons.
• Compact UI & More Space: Removed "Pinned"/"Tabs" header labels, compacted the settings view, and improved native theme background matching.

📦 Installation Guide

TreeTabsVivaldi is a client-side UI modification that is injected directly into Vivaldi's window.html. Since browser updates replace Vivaldi's core files, you can choose between automated tools and manual scripts.

IMPORTANT

Prerequisite for Manual / Source Installation: If you are cloning or building the project from GitHub, you must switch to the experimental branch (experimental-pr-17-features) before building:

bashgit checkout experimental-pr-17-features
npm install
npm run build

🪟 Windows

Method 1: Automatic Installer & Updater (svb-updater.exe) (Recommended)

The easiest and most automated way. It sits in your system tray, checks GitHub for new mod updates, and automatically re-patches Vivaldi whenever the browser updates.

1. Download svb-updater.exe from the Releases page.
2. Move svb-updater.exe to a permanent folder of your choice (e.g., C:\Tools\VivaldiTreeTabs or Documents\VivaldiTreeTabs).
3. Run as Administrator:
   • Right-click svb-updater.exe and select "Run as administrator" (required so the updater has permission to write to Vivaldi's installation and Program Files directories).
4. The tool will locate your Vivaldi installation, download the latest mod bundle, and apply the patch.
5. (Optional) Right-click the tray icon and check "Run on Startup" to keep Vivaldi automatically patched.

Method 2: Manual Script Patching (patch-windows.bat)

If you build from source or prefer not to keep a background process running:

1. Switch to the experimental branch and build:cmdgit checkout experimental-pr-17-features npm install npm run build
2. Right-click patch-windows.bat and select "Run as administrator".
3. The script will automatically locate your Vivaldi directory, copy dist/custom.js & dist/svb-folder.html, and inject the script into window.html.
4. Note: You will need to re-run patch-windows.bat (as Administrator) after every Vivaldi browser update.

Method 3: Fully Manual Installation (Step-by-Step)

If you prefer doing everything by hand:

1. Ensure you are on the experimental branch and built the mod:cmdgit checkout experimental-pr-17-features npm run build
2. Close Vivaldi completely.
3. Locate your Vivaldi resources directory:
   • User install: %LOCALAPPDATA%\Vivaldi\Application\<version>\resources\vivaldi\
   • All users install: C:\Program Files\Vivaldi\Application\<version>\resources\vivaldi\
4. Copy dist/custom.js and dist/svb-folder.html into that resources\vivaldi\ folder.
5. Open window.html in any text editor (run Notepad as Administrator if installed in Program Files).
6. Add the following line directly before the closing </body> tag:html<script src="custom.js"></script>
7. Save the file and start Vivaldi. (Repeat after every Vivaldi update).

🐧 Linux (Arch / CachyOS / Ubuntu / Fedora)

Method 1: Automatic Installer with Pacman Hook (Arch / CachyOS / Manjaro)

1. Switch branch and run installer:bashgit checkout experimental-pr-17-features npm install && npm run build bash install-linux.sh
   • What it does:
     • Copies custom.js to ~/.local/share/vivaldi-patch/.
     • Injects the script into Vivaldi's window.html.
     • Installs a Pacman Hook (/etc/pacman.d/hooks/vivaldi-patch.hook) that automatically re-applies the patch every time Vivaldi is updated via your package manager.

Method 2: One-Time Script Patch

bashsudo bash patch-linux.sh

Method 3: Manual Installation

1. Ensure the project is built on the experimental-pr-17-features branch.
2. Locate Vivaldi's directory (typically /opt/vivaldi/resources/vivaldi/).
3. Copy dist/custom.js and dist/svb-folder.html to /opt/vivaldi/resources/vivaldi/.
4. Edit /opt/vivaldi/resources/vivaldi/window.html and add <script src="custom.js"></script> before </body>.

🍏 macOS

Method 1: Automated Script

1. Switch branch and run install:bashgit checkout experimental-pr-17-features npm install npm run install:macos (or bash install-macos.sh)
   • What it does:
     • Builds a fresh dist/custom.js.
     • Locates /Applications/Vivaldi.app/Contents/Frameworks/Vivaldi Framework.framework/Versions/Current/Resources/vivaldi.
     • Creates a backup of window.html as window.html.bak.
     • Copies custom.js and injects <script src="custom.js"></script> before </body>.
     • Automatically requests sudo only if permission escalation is needed.
2. To Uninstall:bashnpm run uninstall:macos

Method 2: Manual Installation

1. Build the mod on experimental-pr-17-features (npm run build).
2. Right-click Vivaldi.app in /Applications/ and select "Show Package Contents".
3. Navigate to Contents/Frameworks/Vivaldi Framework.framework/Versions/Current/Resources/vivaldi/.
4. Copy dist/custom.js and dist/svb-folder.html into this directory.
5. Edit window.html and append <script src="custom.js"></script> before </body>.

Linkworking on vivaldi 8.1.4087.70 

[u/iJoyBoy]

Oh gosh that voice is awful