☰

Archive.org Enhancer

UI/UX tweaks for archive.org — dark mode, compact layout, sticky header, better downloads, cleaner search, sidebar toggle, and more.

// ==UserScript==
// @name         Archive.org Enhancer
// @namespace    http://tampermonkey.net/
// @version      3.0
// @description  UI/UX tweaks for archive.org — dark mode, compact layout, sticky header, better downloads, cleaner search, sidebar toggle, and more.
// @author       Eliminater74
// @license      MIT
// @match        https://archive.org/*
// @grant        GM_addStyle
// ==/UserScript==

(function () {
  'use strict';

  const settings = {
    darkMode: localStorage.getItem('archive_darkMode') === 'true',
    compactMode: localStorage.getItem('archive_compactMode') === 'true',
    stickyHeader: localStorage.getItem('archive_stickyHeader') === 'true',
    autoExpandDownloads: localStorage.getItem('archive_autoExpandDownloads') === 'true',
    navShortcuts: localStorage.getItem('archive_navShortcuts') === 'true',
    hideSidebar: localStorage.getItem('archive_hideSidebar') === 'true',
  };

  const saveSetting = (key, value) => {
    settings[key] = value;
    localStorage.setItem(`archive_${key}`, value);
    applySettings();
    updateMenuUI();
  };

  const toggleSetting = (key) => saveSetting(key, !settings[key]);

  const applySettings = () => {
    document.body.classList.toggle('dark-mode-enhancer', settings.darkMode);
    document.body.classList.toggle('compact-layout-enhancer', settings.compactMode);
    document.body.classList.toggle('sticky-header-enhancer', settings.stickyHeader);
    document.body.classList.toggle('hide-sidebar-enhancer', settings.hideSidebar);

    if (settings.autoExpandDownloads) expandDownloadSection();
    injectScrollButtons();
  };

  const expandDownloadSection = () => {
    const showAll = document.querySelector('.format-group-toggle');
    if (showAll && showAll.innerText.includes('Show All')) {
      showAll.click();
    }
  };

  const injectScrollButtons = () => {
    let container = document.getElementById('scrollToButtons');

    if (container) {
      container.style.display = settings.navShortcuts ? 'block' : 'none';
      return;
    }

    if (!settings.navShortcuts) return;

    container = document.createElement('div');
    container.id = 'scrollToButtons';
    container.innerHTML = `
      <button id="scrollToFilesBtn" title="Scroll to Files">📁 Files</button>
      <button id="scrollToReviewsBtn" title="Scroll to Reviews">📝 Reviews</button>
    `;
    document.body.appendChild(container);

    document.getElementById('scrollToFilesBtn').onclick = () => {
      const files = document.querySelector('.download-options, #descript, [id*=file], [id*=download]');
      if (files) files.scrollIntoView({ behavior: 'smooth' });
      else alert('Files section not found on this page.');
    };

    document.getElementById('scrollToReviewsBtn').onclick = () => {
      const reviews = document.querySelector('#reviews, .reviews, [id*=review]');
      if (reviews) reviews.scrollIntoView({ behavior: 'smooth' });
      else alert('Reviews section not found on this page.');
    };
  };

  // --- UI Panel ---
  const gear = document.createElement('div');
  gear.innerHTML = '⚙️';
  gear.title = 'Archive Enhancer Settings';
  gear.id = 'archiveEnhancerGear';
  gear.addEventListener('click', () => {
    const menu = document.getElementById('archiveEnhancerMenu');
    menu.style.display = menu.style.display === 'block' ? 'none' : 'block';
  });
  document.body.appendChild(gear);

  const menu = document.createElement('div');
  menu.id = 'archiveEnhancerMenu';
  menu.innerHTML = `
    <label><input type="checkbox" id="darkModeToggle"> Dark Mode</label><br>
    <label><input type="checkbox" id="compactModeToggle"> Compact Layout</label><br>
    <label><input type="checkbox" id="stickyHeaderToggle"> Sticky Header</label><br>
    <label><input type="checkbox" id="autoExpandToggle"> Auto Expand Downloads</label><br>
    <label><input type="checkbox" id="navShortcutsToggle"> Scroll Buttons</label><br>
    <label><input type="checkbox" id="hideSidebarToggle"> Hide Sidebar</label>
  `;
  document.body.appendChild(menu);

  const updateMenuUI = () => {
    document.getElementById('darkModeToggle').checked = settings.darkMode;
    document.getElementById('compactModeToggle').checked = settings.compactMode;
    document.getElementById('stickyHeaderToggle').checked = settings.stickyHeader;
    document.getElementById('autoExpandToggle').checked = settings.autoExpandDownloads;
    document.getElementById('navShortcutsToggle').checked = settings.navShortcuts;
    document.getElementById('hideSidebarToggle').checked = settings.hideSidebar;
  };

  // Event Listeners
  document.getElementById('darkModeToggle').addEventListener('change', () => toggleSetting('darkMode'));
  document.getElementById('compactModeToggle').addEventListener('change', () => toggleSetting('compactMode'));
  document.getElementById('stickyHeaderToggle').addEventListener('change', () => toggleSetting('stickyHeader'));
  document.getElementById('autoExpandToggle').addEventListener('change', () => toggleSetting('autoExpandDownloads'));
  document.getElementById('navShortcutsToggle').addEventListener('change', () => toggleSetting('navShortcuts'));
  document.getElementById('hideSidebarToggle').addEventListener('change', () => toggleSetting('hideSidebar'));

  applySettings();
  updateMenuUI();

  // --- Styles ---
  GM_addStyle(`
    #archiveEnhancerGear {
      position: fixed;
      bottom: 20px;
      right: 20px;
      background: #444;
      color: white;
      font-size: 18px;
      padding: 10px;
      border-radius: 50%;
      cursor: pointer;
      z-index: 10000;
      box-shadow: 0 0 5px black;
    }
    #archiveEnhancerMenu {
      display: none;
      position: fixed;
      bottom: 70px;
      right: 20px;
      background: #222;
      color: white;
      padding: 12px;
      border-radius: 10px;
      z-index: 10000;
      box-shadow: 0 0 10px black;
      font-size: 14px;
    }
    #archiveEnhancerMenu label {
      display: block;
      margin-bottom: 6px;
    }
    #scrollToButtons {
      position: fixed;
      bottom: 20px;
      left: 20px;
      z-index: 9999;
    }
    #scrollToButtons button {
      margin-right: 8px;
      background: #333;
      color: white;
      border: none;
      padding: 6px 10px;
      border-radius: 6px;
      cursor: pointer;
    }
    .dark-mode-enhancer {
      background: #121212 !important;
      color: #e0e0e0 !important;
    }
    .dark-mode-enhancer a {
      color: #80d8ff !important;
    }
    .compact-layout-enhancer * {
      font-size: 14px !important;
      line-height: 1.4 !important;
    }
    .sticky-header-enhancer header,
    .sticky-header-enhancer .site-header {
      position: sticky !important;
      top: 0 !important;
      z-index: 9999 !important;
      background-color: #222 !important;
    }
    .hide-sidebar-enhancer #nav,
    .hide-sidebar-enhancer .nav-menu {
      display: none !important;
    }
    /* Cleaner search */
    .results .C234,
    .results .C {
      padding: 6px !important;
      line-height: 1.4;
    }
  `);
})();