Neopets QuickSave Pro

Save, organize, and track your favorite Neopets pages with ease. Create custom categories, manage daily visits, and set smart NST→local reminders — all in one streamlined dashboard.
安裝腳本 ?
發表問題、評論、或檢舉該腳本。
換行
// ==UserScript==
// @name         Neopets QuickSave Pro
// @namespace    http://tampermonkey.net/
// @version      1.0.0
// @description  Save, organize, and track your favorite Neopets pages with ease. Create custom categories, manage daily visits, and set smart NST→local reminders — all in one streamlined dashboard.
// @author       [email protected]
// @match        *://*.neopets.com/*
// @license      Thezuki10
// @grant        none
// ==/UserScript==

(function() {
'use strict';

// Prevent multiple loads and execution in frames
if (window.self !== window.top) {
  // We're in an iframe/frame, don't load
  return;
}

if (window.__neopetsQuickSaveLoaded) {
  // Already loaded, don't load again
  return;
}
window.__neopetsQuickSaveLoaded = true;

// Add error logging for OUR script only
window.addEventListener('error', function(e) {
  // Ignore errors from Neopets
  if (e.message && (e.message.includes('designMode') || e.message.includes('dataset'))) {
    return;
  }

  // Only alert if error is from our script
  if (e.filename && e.filename.includes('tampermonkey')) {
    console.error('QuickSave Script error:', e.error);
    alert('QuickSave Script error: ' + e.message);
  }
}, true);

try {
  // Test localStorage
  localStorage.setItem('test', 'test');
  localStorage.removeItem('test');
  console.log('localStorage is working');
} catch(e) {
  alert('localStorage is blocked or unavailable: ' + e.message);
}
  // ============================================================================
  // CONSTANTS MODULE
  // ============================================================================
  const Constants = {
    STORAGE_KEY: "neopetsQuickPagesV4.0",
    STATE_KEY: "neopetsQuickPagesPanelOpen",
    EXPANDED_KEY: "neopetsQuickPagesLastExpandedCatV4",
    PANEL_ID: 'neopetsQuickSavePanel_v4_3',
    STYLE_ID: 'neopetsQuickSaveStyle_v4_3',
    DAYS: ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'],
    MAX_REMINDERS_PER_LINK: 3
  };

  // ============================================================================
  // DATA STORAGE MODULE
  // Input: none (reads from localStorage)
  // Output: { [categoryName: string]: CategoryData }
  // ============================================================================
  const DataStorage = {
    /**
     * Get all data from storage
     * @returns {Object} - Map of category names to CategoryData objects
     */
    getData() {
      const raw = JSON.parse(localStorage.getItem(Constants.STORAGE_KEY) || "{}");
      return DataNormalizer.normalize(raw);
    },

    /**
     * Save data to storage
     * @param {Object} data - Map of category names to CategoryData objects
     * @returns {void}
     */
    setData(data) {
      localStorage.setItem(Constants.STORAGE_KEY, JSON.stringify(data));
    },

    /**
     * Get panel open state
     * @returns {boolean}
     */
    getPanelState() {
      return localStorage.getItem(Constants.STATE_KEY) === "true";
    },

    /**
     * Set panel open state
     * @param {boolean} isOpen
     * @returns {void}
     */
    setPanelState(isOpen) {
      localStorage.setItem(Constants.STATE_KEY, String(isOpen));
    },

    /**
     * Get last expanded category
     * @returns {string|null}
     */
    getExpandedCategory() {
      return localStorage.getItem(Constants.EXPANDED_KEY);
    },

    /**
     * Set last expanded category
     * @param {string|null} categoryName
     * @returns {void}
     */
    setExpandedCategory(categoryName) {
      if (categoryName) {
        localStorage.setItem(Constants.EXPANDED_KEY, categoryName);
      } else {
        localStorage.removeItem(Constants.EXPANDED_KEY);
      }
    },

  };

  // ============================================================================
  // DATA NORMALIZER MODULE
  // Input: raw storage data
  // Output: normalized data structure
  // ============================================================================
  const DataNormalizer = {
    /**
     * Normalize raw storage data
     * @param {Object} raw - Raw data from storage
     * @returns {Object} - Normalized data structure
     */
normalize(raw) {
      const normalized = {};
      for (let cat in raw) {
        if (!raw[cat] || !Array.isArray(raw[cat].items)) continue;
        normalized[cat] = {
          bgColor: raw[cat].bgColor || 'lightgray',
          textColor: raw[cat].textColor || 'black',
          showSavedLinks: raw[cat].showSavedLinks !== false,
          showVisitedToday: raw[cat].showVisitedToday !== false,
          showLastVisit: raw[cat].showLastVisit !== false,
showTrackedURL: raw[cat].showTrackedURL !== false,
          items: raw[cat].items.map(item => this.normalizeItem(item))
        };
      }
      return normalized;
    },

    /**
     * Normalize a single item
     * @param {Object} item - Raw item data
     * @returns {Object} - Normalized item
     */
    normalizeItem(item) {
      return {
        url: item.url || '',
        name: item.name || '',
        track: !!item.track,
        lastSeen: item.lastSeen || '',
        note: typeof item.note === 'string' ? item.note : '',
        reminders: this.normalizeReminders(item)
      };
    },

    /**
     * Normalize reminders for an item
     * @param {Object} item - Item with potential reminder data
     * @returns {Array} - Array of normalized reminder objects
     */
    normalizeReminders(item) {
      if (!Array.isArray(item.reminders)) {
        return this.migrateOldReminders(item);
      }
      return item.reminders.slice(0, Constants.MAX_REMINDERS_PER_LINK).map(r => ({
        label: typeof r.label === 'string' ? r.label : (r.name || 'Reminder'),
        days: Array.isArray(r.days) ? r.days : (Array.isArray(r.reminderDays) ? r.reminderDays : []),
        time: typeof r.time === 'string' ? r.time : (typeof r.reminderTime === 'string' ? r.reminderTime : ''),
        repeat: typeof r.repeat === 'boolean' ? r.repeat : (typeof r.repeatReminder === 'boolean' ? r.repeatReminder : true)
      }));
    },

    /**
     * Migrate old reminder format to new format
     * @param {Object} item - Item with old reminder format
     * @returns {Array} - Array of reminder objects
     */
    migrateOldReminders(item) {
      if (Array.isArray(item.reminderDays) || typeof item.reminderTime === 'string') {
        const days = Array.isArray(item.reminderDays) ? item.reminderDays : [];
        const time = typeof item.reminderTime === 'string' ? item.reminderTime : '';
        const repeat = typeof item.repeatReminder === 'boolean' ? item.repeatReminder : true;
        if (time) {
          return [{
            label: 'Reminder',
            days: days,
            time: time,
            repeat: repeat
          }];
        }
      }
      return [];
    }
  };

  // ============================================================================
  // DATE/TIME UTILITIES MODULE
  // Input: various date/time strings and objects
  // Output: formatted strings, comparisons
  // ============================================================================
  const DateTimeUtils = {
    /**
     * Get today's date in Pacific timezone
     * @returns {string} - Date in YYYY-MM-DD format
     */
    getTodayPacific() {
      return new Date().toLocaleDateString('en-CA', { timeZone: 'America/Los_Angeles' });
    },

    /**
     * Check if a date is today in Pacific timezone
     * @param {string} lastSeen - ISO date string
     * @returns {boolean}
     */
    isVisitedToday(lastSeen) {
      if (!lastSeen) return false;
      try {
        const pacificDate = new Date(lastSeen).toLocaleDateString('en-CA', { timeZone: 'America/Los_Angeles' });
        return pacificDate === this.getTodayPacific();
      } catch (e) {
        return false;
      }
    },

    /**
     * Get current time in Pacific timezone
     * @returns {Object} - { day: string, date: string, time: string }
     */
    getPacificNow() {
      const now = new Date();
      const pstNow = new Date(now.toLocaleString('en-US', { timeZone: 'America/Los_Angeles' }));
      return {
        day: Constants.DAYS[pstNow.getDay()],
        date: pstNow.toLocaleDateString('en-CA', { timeZone: 'America/Los_Angeles' }),
        time: pstNow.toTimeString().slice(0, 5)
      };
    },

    /**
     * Get local timezone abbreviation
     * @returns {string}
     */
    getLocalTimezoneAbbr() {
      try {
        const date = new Date();
        const formatter = new Intl.DateTimeFormat('en-US', { timeZoneName: 'short' });
        const parts = formatter.formatToParts(date);
        const tzPart = parts.find(p => p.type === 'timeZoneName');
        return tzPart ? tzPart.value : '';
      } catch (e) {
        return '';
      }
    },

    /**
     * Convert 24-hour time to 12-hour format
     * @param {string} timeStr - Time in HH:MM format
     * @returns {string} - Time in 12-hour format with AM/PM
     */
    formatTime12Hour(timeStr) {
      if (!timeStr) return '';
      const [hhStr, mmStr] = timeStr.split(':');
      let hh = parseInt(hhStr || '0', 10);
      const mm = mmStr || '00';
      const ampm = hh >= 12 ? 'PM' : 'AM';
      let displayH = hh % 12;
      if (displayH === 0) displayH = 12;
      return `${displayH}:${mm} ${ampm}`;
    },

    /**
     * Convert PST time to local time with timezone
     * @param {string} timeStr - Time in HH:MM format (PST)
     * @returns {string} - Formatted local time with timezone
     */
    convertPSTToLocal(timeStr) {
      if (!timeStr) return '';
      try {
        const nowLocal = new Date();
        const localMinutesNow = nowLocal.getHours() * 60 + nowLocal.getMinutes();
        const pstFormatter = new Intl.DateTimeFormat('en-GB', { hour12: false, hour: '2-digit', minute: '2-digit', timeZone: 'America/Los_Angeles' });
        const pstFormatted = pstFormatter.format(new Date());
        const [pstHStr, pstMStr] = pstFormatted.split(':');
        const pstMinutesNow = parseInt(pstHStr, 10) * 60 + parseInt(pstMStr, 10);
        let diff = localMinutesNow - pstMinutesNow;
        if (diff > 720) diff -= 1440;
        if (diff < -720) diff += 1440;
        const [remHStr, remMStr] = timeStr.split(':');
        const remMinutes = (parseInt(remHStr || '0', 10) * 60) + parseInt(remMStr || '0', 10);
        let localMinutes = remMinutes + diff;
        localMinutes = ((localMinutes % 1440) + 1440) % 1440;
        const localH = Math.floor(localMinutes / 60);
        const localM = localMinutes % 60;
        const localDate = new Date(); localDate.setHours(localH, localM, 0, 0); const localTimeStr = localDate.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', hour12: true }); const tzAbbr = this.getLocalTimezoneAbbr(); return tzAbbr ? `${localTimeStr} ${tzAbbr}` : localTimeStr;
      } catch (e) {
        return timeStr;
      }
    }
  };

  // ============================================================================
  // URL UTILITIES MODULE
  // Input: URLs as strings
  // Output: normalized URLs, comparisons
  // ============================================================================
  const URLUtils = {
    /**
     * Get base URL without query parameters
     * @param {string} url - Full URL
     * @returns {string} - Base URL
     */
    getBaseURL(url) {
      return (url || "").split('?')[0];
    },

    /**
     * Check if current page matches saved URL
     * @param {string} savedUrl - Saved URL
     * @param {string} currentUrl - Current page URL
     * @returns {boolean}
     */
    matchesCurrentPage(savedUrl, currentUrl) {
      const savedBase = this.getBaseURL(savedUrl);
      return savedBase && currentUrl.startsWith(savedBase);
    }
  };

  // ============================================================================
  // CATEGORY OPERATIONS MODULE
  // Input: data object, category name, category properties
  // Output: modified data object
  // ============================================================================
  const CategoryOps = {
    /**
     * Create or update a category
     * @param {Object} data - Full data object
     * @param {string} name - Category name
     * @param {Object} props - { bgColor, textColor }
     * @returns {Object} - Modified data object
     */

upsertCategory(data, name, props = {}) {
      if (!data[name]) {
        data[name] = {
          bgColor: props.bgColor || 'lightgray',
          textColor: props.textColor || 'black',
          showSavedLinks: props.showSavedLinks !== false,
          showVisitedToday: props.showVisitedToday !== false,
          showLastVisit: props.showLastVisit !== false,
showTrackedURL: props.showTrackedURL !== false,
          items: []
        };
      } else {
        if (props.bgColor) data[name].bgColor = props.bgColor;
        if (props.textColor) data[name].textColor = props.textColor;
        if (props.showSavedLinks !== undefined) data[name].showSavedLinks = props.showSavedLinks;
        if (props.showVisitedToday !== undefined) data[name].showVisitedToday = props.showVisitedToday;
        if (props.showLastVisit !== undefined) data[name].showLastVisit = props.showLastVisit;
if (props.showTrackedURL !== undefined) data[name].showTrackedURL = props.showTrackedURL;
      }
      return data;
    },

    /**
     * Rename a category
     * @param {Object} data - Full data object
     * @param {string} oldName - Old category name
     * @param {string} newName - New category name
     * @returns {Object} - Modified data object
     */
    renameCategory(data, oldName, newName) {
      if (oldName === newName || !data[oldName]) return data;
      data[newName] = data[oldName];
      delete data[oldName];
      return data;
    },

    /**
     * Delete a category
     * @param {Object} data - Full data object
     * @param {string} name - Category name
     * @returns {Object} - Modified data object
     */
    deleteCategory(data, name) {
      delete data[name];
      return data;
    },

    /**
     * Get statistics for a category
     * @param {Object} categoryData - Category data object
     * @returns {Object} - { total, visitedToday, pending, lastVisit }
     */
    getCategoryStats(categoryData) {
      let visitedToday = 0;
      let pending = 0;
      let tracked = 0;
      let lastVisit = null;

      categoryData.items.forEach(item => {
        if (item.lastSeen) {
          if (!lastVisit || new Date(item.lastSeen) > new Date(lastVisit)) {
            lastVisit = item.lastSeen;
          }
        }
        if (DateTimeUtils.isVisitedToday(item.lastSeen)) {
          visitedToday++;
        } else if (item.track) {
          pending++;
        }
        if (item.track) {
          tracked++;
        }
      });

      return {
        total: categoryData.items.length,
        visitedToday,
        pending,
        tracked,
        lastVisit
      };
    }
  };

  // ============================================================================
  // ITEM OPERATIONS MODULE
  // Input: data object, category name, item properties
  // Output: modified data object
  // ============================================================================
  const ItemOps = {
    /**
     * Add item to category
     * @param {Object} data - Full data object
     * @param {string} categoryName - Category name
     * @param {Object} item - Item object { url, name, track, note }
     * @returns {Object} - Modified data object
     */
    addItem(data, categoryName, item) {
      if (!data[categoryName]) {
        data = CategoryOps.upsertCategory(data, categoryName);
      }
      const exists = data[categoryName].items.some(it => it.url === item.url);
      if (!exists) {
        data[categoryName].items.push({
          url: item.url || '',
          name: item.name || '',
          track: !!item.track,
          lastSeen: new Date().toISOString(),
          note: item.note || '',
          reminders: []
        });
      }
      // Note: If exists is true, the item is silently not added (already handled in UI)
      return data;
    },

    /**
     * Update an item
     * @param {Object} data - Full data object
     * @param {string} categoryName - Category name
     * @param {string} oldUrl - Original URL (identifier)
     * @param {Object} updates - Updated properties
     * @returns {Object} - Modified data object
     */
    updateItem(data, categoryName, oldUrl, updates) {
      if (!data[categoryName]) return data;
      data[categoryName].items = data[categoryName].items.map(item => {
        if (item.url === oldUrl) {
          return { ...item, ...updates };
        }
        return item;
      });
      return data;
    },

    /**
     * Delete an item
     * @param {Object} data - Full data object
     * @param {string} categoryName - Category name
     * @param {string} url - Item URL
     * @returns {Object} - Modified data object
     */
    deleteItem(data, categoryName, url) {
      if (!data[categoryName]) return data;
      data[categoryName].items = data[categoryName].items.filter(item => item.url !== url);
      return data;
    },

    /**
     * Move item between categories
     * @param {Object} data - Full data object
     * @param {string} fromCategory - Source category
     * @param {string} toCategory - Target category
     * @param {string} url - Item URL
     * @returns {Object} - Modified data object
     */
    moveItem(data, fromCategory, toCategory, url) {
      if (fromCategory === toCategory || !data[fromCategory]) return data;
      const item = data[fromCategory].items.find(it => it.url === url);
      if (!item) return data;

      // Remove from source
      data[fromCategory].items = data[fromCategory].items.filter(it => it.url !== url);

      // Add to target
      if (!data[toCategory]) {
        data = CategoryOps.upsertCategory(data, toCategory);
      }
      const exists = data[toCategory].items.some(it => it.url === url);
      if (!exists) {
        data[toCategory].items.push(item);
      }

      return data;
    },

    /**
     * Reorder items within a category
     * @param {Object} data - Full data object
     * @param {string} categoryName - Category name
     * @param {number} fromIndex - Source index
     * @param {number} toIndex - Target index
     * @returns {Object} - Modified data object
     */
    reorderItems(data, categoryName, fromIndex, toIndex) {
      if (!data[categoryName]) return data;
      const items = data[categoryName].items;
      const [moved] = items.splice(fromIndex, 1);
      items.splice(toIndex, 0, moved);
      return data;
    },

    /**
     * Mark item as visited
     * @param {Object} data - Full data object
     * @param {string} url - Current page URL
     * @returns {Object} - Modified data object
     */
    markVisited(data, url) {
      const currentBase = URLUtils.getBaseURL(url);
      for (let cat in data) {
        data[cat].items = data[cat].items.map(item => {
          if (URLUtils.matchesCurrentPage(item.url, url)) {
            item.lastSeen = new Date().toISOString();
          }
          return item;
        });
      }
      return data;
    },

    /**
     * Count pending items across all categories
     * @param {Object} data - Full data object
     * @returns {number} - Count of pending tracked items
     */
    countPending(data) {
      let total = 0;
      for (let cat in data) {
        data[cat].items.forEach(item => {
          if (item.track && !DateTimeUtils.isVisitedToday(item.lastSeen)) {
            total++;
          }
        });
      }
      return total;
    },
/**
 * Sort items alphabetically and numerically within a category
 * @param {Object} data - Full data object
 * @param {string} categoryName - Category name
 * @returns {Object} - Modified data object
 */
sortItems(data, categoryName) {
  if (!data[categoryName]) return data;

  data[categoryName].items.sort((a, b) => {
    const nameA = (a.name || a.url).toLowerCase();
    const nameB = (b.name || b.url).toLowerCase();
    return nameA.localeCompare(nameB);
  });

  return data;
}
  };

  // ============================================================================
  // REMINDER OPERATIONS MODULE
  // Input: item object, reminder data
  // Output: modified item object, reminder checks
  // ============================================================================
  const ReminderOps = {
    /**
     * Add reminder to item
     * @param {Object} item - Item object
     * @param {Object} reminder - { label, days, time, repeat }
     * @returns {Object} - Modified item
     */
    addReminder(item, reminder) {
      if (!item.reminders) item.reminders = [];
      if (item.reminders.length < Constants.MAX_REMINDERS_PER_LINK) {
        item.reminders.push({
          label: reminder.label || 'Reminder',
          days: reminder.days || [],
          time: reminder.time || '',
          repeat: reminder.repeat !== false
        });
      }
      return item;
    },

    /**
     * Update reminder at index
     * @param {Object} item - Item object
     * @param {number} index - Reminder index
     * @param {Object} updates - Updated reminder properties
     * @returns {Object} - Modified item
     */
    updateReminder(item, index, updates) {
      if (!item.reminders || !item.reminders[index]) return item;
      item.reminders[index] = { ...item.reminders[index], ...updates };
      return item;
    },

    /**
     * Delete reminder at index
     * @param {Object} item - Item object
     * @param {number} index - Reminder index
     * @returns {Object} - Modified item
     */
    deleteReminder(item, index) {
      if (!item.reminders) return item;
      item.reminders.splice(index, 1);
      return item;
    },

    /**
     * Format reminder text for display
     * @param {Object} reminder - Reminder object
     * @returns {string|null} - Formatted text or null
     */
    formatReminderText(reminder) {
      if (!reminder || !reminder.time) return null;
      const timeNST12 = DateTimeUtils.formatTime12Hour(reminder.time);
      const local = DateTimeUtils.convertPSTToLocal(reminder.time);
      return `${timeNST12} NST - ${local}`;
    },

    /**
     * Check if reminder should fire
     * @param {Object} reminder - Reminder object
     * @param {Object} now - { day, date, time } from getPacificNow
     * @returns {boolean}
     */
    shouldFire(reminder, now) {
      if (!reminder.time || !Array.isArray(reminder.days)) return false;
      return reminder.days.includes(now.day) && reminder.time === now.time;
    },

    /**
     * Get unique key for reminder
     * @param {string} url - Item URL
     * @param {Object} reminder - Reminder object
     * @param {string} date - Date string
     * @returns {string}
     */
    getReminderKey(url, reminder, date) {
      return `${url}_${date}_${reminder.time}_${reminder.label}`;
    }
  };

  // ============================================================================
  // IMPORT/EXPORT MODULE
  // Input: data object or file
  // Output: JSON string or parsed data
  // ============================================================================
  const ImportExport = {
    /**
     * Export data as JSON file
     * @param {Object} data - Full data object
     * @returns {void} - Triggers download
     */
    exportToFile(data) {
      const clean = {};
      for (let cat in data) {
        clean[cat] = {
          bgColor: data[cat].bgColor,
          textColor: data[cat].textColor,
          items: data[cat].items.map(it => ({
            url: it.url,
            name: it.name,
            track: it.track,
            lastSeen: it.lastSeen,
            note: it.note || '',
            reminders: (it.reminders || []).map(r => ({
              label: r.label,
              days: r.days || [],
              time: r.time || '',
              repeat: !!r.repeat
            }))
          }))
        };
      }
      const blob = new Blob([JSON.stringify(clean, null, 2)], { type: "application/json" });
      const a = document.createElement("a");
      a.href = URL.createObjectURL(blob);
      a.download = "neopets_pages_backup.json";
      a.click();
      URL.revokeObjectURL(a.href);
    },

    /**
     * Import data from file
     * @param {File} file - JSON file
     * @param {Function} onSuccess - Callback on success
     * @param {Function} onError - Callback on error
     * @returns {void}
     */
    importFromFile(file, onSuccess, onError) {
      const reader = new FileReader();
      reader.onload = (e) => {
        try {
          const parsed = JSON.parse(e.target.result);
          if (typeof parsed !== "object") {
            onError("Invalid file format");
            return;
          }
          onSuccess(parsed);
        } catch (err) {
          onError("Failed to parse file");
        }
      };
      reader.readAsText(file);
    }
  };

  // ============================================================================
  // AUTO VISIT TRACKER
  // Input: none (auto-runs)
  // Output: updates data storage
  // ============================================================================
  const AutoVisitTracker = {
    /**
     * Mark current page as visited if tracked
     * @returns {void}
     */
    track() {
      let data = DataStorage.getData();
      const currentUrl = window.location.href;
      let updated = false;

      for (let cat in data) {
        data[cat].items.forEach(item => {
          if (URLUtils.matchesCurrentPage(item.url, currentUrl)) {
            if (!DateTimeUtils.isVisitedToday(item.lastSeen)) {
              item.lastSeen = new Date().toISOString();
              updated = true;
            }
          }
        });
      }

      if (updated) {
        DataStorage.setData(data);
      }
    }
  };

  // ============================================================================
  // UI COMPONENTS MODULE
  // Input: various data and callbacks
  // Output: DOM elements
  // ============================================================================
  const UIComponents = {
    /**
     * Create modal dialog
     * @param {string} title - Modal title
     * @returns {HTMLElement} - Modal element
     */
createModal(title) {
  const modal = document.createElement("div");
modal.className = 'npq-modal';
  modal.style.cssText = 'position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background-image:url(https://images.neopets.com/ncmall/ui/assets/bg-ncmall-BDtvB-Ef.png);background-repeat:repeat;background-size:288px 446px;image-rendering:pixelated;border:1px solid #333;padding:24px;z-index:10000;min-width:500px;max-width:600px;font-family:"Cafeteria","Arial Bold",sans-serif;font-size:14px;border-radius:8px;box-shadow:4px 4px 12px rgba(0,0,0,0.4);';
  modal.setAttribute('role', 'dialog');
  modal.setAttribute('aria-modal', 'true');
  modal.setAttribute('aria-labelledby', 'modal-title-' + Date.now());

      const header = document.createElement("h3");
      header.id = 'modal-title-' + Date.now();
      header.textContent = title;
      header.style.cssText = 'margin-top:0;font-size:16px;';
      modal.appendChild(header);

      return modal;
    },

    /**
     * Create button element
     * @param {string} text - Button text
     * @param {Function} onClick - Click handler
     * @param {Object} style - Additional styles
     * @returns {HTMLElement}
     */

    createButton(text, onClick, style = {}) {
      const btn = document.createElement('button');
      btn.textContent = text;
      if (onClick) {
        btn.onclick = onClick;
        btn.ontouchend = (e) => {
          e.preventDefault();
          onClick(e);
        };
      }
      Object.assign(btn.style, style);
      return btn;
    },

    /**
     * Create input element
     * @param {string} type - Input type
     * @param {string} value - Initial value
     * @param {string} placeholder - Placeholder text
     * @returns {HTMLElement}
     */
    createInput(type, value = '', placeholder = '') {
      const input = document.createElement('input');
      input.type = type;
      input.value = value;
      input.placeholder = placeholder;
      return input;
    }
  };

  // ============================================================================
  // MAIN UI CONTROLLER
  // Coordinates all UI interactions and data updates
  // ============================================================================
  const UIController = {
    elements: {
      panel: null,
      saveBtn: null,
      seeBtn: null,
      listPanel: null,
      seeAlert: null,
      exportBtn: null,
      importBtn: null
    },

    /**
     * Initialize the UI
     * @returns {void}
     */
    init() {
      if (document.getElementById(Constants.PANEL_ID)) return;

      this.injectStyles();
      this.createPanel();
      this.attachEventHandlers();
      this.restoreState();
    },

    /**
     * Inject CSS styles
     * @returns {void}
     */
    injectStyles() {
      if (document.getElementById(Constants.STYLE_ID)) return;
      const style = document.createElement('style');
      style.id = Constants.STYLE_ID;
style.textContent = `
  .reminder-block { background: #f9f9f9; border: 1px solid #e0e0e0; border-radius: 8px; padding: 8px; margin-top: 3px; font-size: 14px; font-family: "Cafeteria", "Arial Bold", sans-serif; }
  .reminder-line { margin-top: 2px; }
  .reminder-label { font-weight: bold; }
 .inline-reminders-wrapper { margin-top: 8px; border: none; padding: 8px; border-radius: 6px; background: transparent; }
  .tz-icon { display: inline-block; margin-left: 4px; font-size: 14px; color: #666; cursor: help; }
  .note-block { font-size: 14px; border: 1px solid #e0e0e0; border-radius: 8px; padding: 8px; margin-top: 6px; background: #fffdf7; white-space: pre-wrap; font-family: "Cafeteria", "Arial Bold", sans-serif; }

/* Neopets-style buttons - SCOPED TO THIS SCRIPT ONLY */
  #neopetsQuickSavePanel_v4_3 button,
  .npq-modal button {
    background: linear-gradient(to bottom, rgb(246, 226, 80), rgb(235, 178, 51));
    border: 0.8px solid white;
    border-radius: 15px;
    box-shadow: rgb(246,226,80) 0 0 0 1px inset,
                rgb(196,124,25) 0 -3px 2px 3px inset,
                rgb(253,249,220) 0 2px 0 1px inset,
                rgb(0,0,0) 0 0 0 2px;
    color: rgb(0,0,0);
    font-family: "Cafeteria", "Arial Bold", sans-serif;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    padding: 8px 16px;
    min-height: 32px;
    text-align: center;
  }

  #neopetsQuickSavePanel_v4_3 button:hover,
  .npq-modal button:hover {
    background: linear-gradient(to bottom, rgb(250, 230, 90), rgb(240, 185, 60));
  }

  #neopetsQuickSavePanel_v4_3 button:active,
  .npq-modal button:active {
    background: linear-gradient(to bottom, rgb(235, 178, 51), rgb(246, 226, 80));
  }

/* Small icon buttons */
.icon-btn {
  width: 24px;
  height: 24px;
  padding: 0;
  min-height: unset;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
  cursor: pointer;
}

.icon-btn:hover {
  opacity: 0.8;
  background-color: transparent !important;
  background-image: inherit;
  transform: scale(1.1);
}

.icon-btn:active {
  background-color: transparent !important;
  transform: scale(0.95);
}

/* Mobile floating action button */
.npq-fab {
  position: fixed;
  bottom: 20px;
  left: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(to bottom, rgb(246, 226, 80), rgb(235, 178, 51));
  border: 2px solid rgb(0,0,0);
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  cursor: pointer;
  z-index: 9998;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.npq-fab img {
  width: 32px;
  height: 32px;
}

.npq-fab:active {
  transform: scale(0.9);
}

/* Mobile modal overlay */
.npq-mobile-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 9999;
  display: none;
}

.npq-mobile-panel {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  max-height: 90vh;
  background-image: url(https://images.neopets.com/ncmall/ui/assets/bg-ncmall-BDtvB-Ef.png);
  background-repeat: repeat;
  background-size: 288px 446px;
  image-rendering: pixelated;
  border-radius: 16px 16px 0 0;
  padding: 12px;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 10000;
  box-sizing: border-box;
}

/* Mobile media queries */
@media (max-width: 768px) {
  .npq-fab {
    display: flex;
  }

  #neopetsQuickSavePanel_v4_3 {
    display: none !important;
  }

  .npq-modal {
    width: 90% !important;
    min-width: unset !important;
    max-width: unset !important;
    padding: 16px !important;
    font-size: 12px !important;
  }

.npq-mobile-panel {
    text-align: center !important;
  }

  .npq-mobile-panel > div {
    text-align: center !important;
  }

  .npq-mobile-panel button {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  @media (max-width: 768px) {
    .icon-btn {
      display: inline-block !important;
      margin-left: 5px !important;
      margin-right: 5px !important;
    }

    .item-row {
      align-items: center !important;
      flex-wrap: wrap !important;
      gap: 4px !important;
    }

    .item-row > button:first-of-type {
      width: auto !important;
      max-width: none !important;
      flex: 1 !important;
      min-width: 120px !important;
      text-align: center !important;
      margin: 0 auto 8px auto !important;
      display: block !important;
    }

    .item-row > input[type="checkbox"],
    .item-row > .icon-btn {
      display: inline-block !important;
      margin: 0 5px !important;
      vertical-align: middle !important;
    }
  }

  .npq-modal h3 {
    font-size: 14px !important;
  }

#neopetsQuickSavePanel_v4_3 button,
  .npq-modal button,
  .npq-mobile-panel button {
    font-size: 12px !important;
    padding: 6px 10px !important;
    min-height: 28px !important;
    min-width: unset !important;
  }

  .reminder-block {
    font-size: 11px !important;
  }

  .note-block {
    font-size: 11px !important;
  }

input[type="text"],
  input[type="time"],
  input[type="color"],
  select,
  textarea {
    font-size: 14px !important;
  }

  .npq-mobile-panel .npq-mobile-panel > div {
    max-width: 100%;
    overflow: hidden;
  }

.npq-mobile-panel button {
    word-wrap: break-word;
    white-space: normal;
  }
}

`;
      document.head.appendChild(style);
    },

    /**
     * Create main panel
     * @returns {void}
     */
    createPanel() {
      const panel = document.createElement('div');
      panel.id = Constants.PANEL_ID;
      panel.style.cssText = 'position:fixed;top:50%;right:0;transform:translateY(-50%);z-index:9999;background-image:url(https://images.neopets.com/ncmall/ui/assets/bg-ncmall-BDtvB-Ef.png);background-repeat:repeat;background-size:288px 446px;image-rendering:pixelated;border:1px solid #999;padding:10px;border-radius:8px 0 0 8px;font-size:12px;font-family:Arial,serif;box-shadow:2px 2px 5px rgba(0,0,0,0.3);text-align:center;';
     this.elements.saveBtn = UIComponents.createButton('SAVE', () => this.showSaveModal(), {
  margin: '5px',
  cursor: 'pointer',
  minWidth: '100px',
  minHeight: '37px',
  title: 'Save URLs'
});
this.elements.seeBtn = UIComponents.createButton('SEE', () => this.toggleList(), {
  margin: '5px',
  cursor: 'pointer',
  minWidth: '100px',
  minHeight: '37px',
  title: 'Display saved URLs and categories'
});
      // Create container for icon and count
const alertContainer = document.createElement('span');
alertContainer.style.cssText = 'display:inline-flex;align-items:center;margin-left:5px;';

// Warning icon
const warningIcon = document.createElement('img');
warningIcon.src = 'https://images.neopets.com/themes/004_bir_a2e60/events/warning.png';
warningIcon.style.cssText = 'width:16px;height:16px;margin-right:3px;display:none;';
warningIcon.alt = 'Warning';

// Count text (no circle background)
this.elements.seeAlert = document.createElement('span');
this.elements.seeAlert.style.cssText = 'color:red;font-size:12px;font-weight:bold;display:none;';

alertContainer.appendChild(warningIcon);
alertContainer.appendChild(this.elements.seeAlert);
this.elements.seeBtn.appendChild(alertContainer);

// Store reference to icon for show/hide
this.elements.warningIcon = warningIcon;

     this.elements.exportBtn = UIComponents.createButton('EXPORT', () => this.exportData(), { margin: '5px', cursor: 'pointer', minHeight: '32px', padding: '6px 14px', title: 'Export saved URLs and preferences' });
this.elements.importBtn = UIComponents.createButton('IMPORT', () => this.importData(), { margin: '10px', cursor: 'pointer', minHeight: '32px', padding: '6px 14px', title: 'Import saved URLs and preferences' });

      this.elements.listPanel = document.createElement('div');
this.elements.listPanel.style.cssText = 'display:none;max-height:500px;overflow-y:auto;margin-top:10px;background:transparent;border:none;padding:5px;text-align:left;';

      panel.appendChild(this.elements.saveBtn);
      panel.appendChild(this.elements.seeBtn);
      panel.appendChild(this.elements.listPanel);
    document.body.appendChild(panel);

      this.elements.panel = panel;

      // Create mobile floating action button
      const fab = document.createElement('button');
      fab.className = 'npq-fab';
      fab.setAttribute('aria-label', 'Open Quick Save');
      const fabImg = document.createElement('img');
      fabImg.src = 'https://images.neopets.com/themes/h5/basic/images/premiumportal-icon.png';
      fabImg.alt = 'Quick Save';
      fab.appendChild(fabImg);
      fab.onclick = () => this.openMobilePanel();
      document.body.appendChild(fab);
      this.elements.fab = fab;

      // Create mobile overlay and panel
      const overlay = document.createElement('div');
      overlay.className = 'npq-mobile-overlay';
      overlay.onclick = () => this.closeMobilePanel();
      document.body.appendChild(overlay);
      this.elements.mobileOverlay = overlay;

      const mobilePanel = document.createElement('div');
      mobilePanel.className = 'npq-mobile-panel';
      mobilePanel.setAttribute('role', 'dialog');
      mobilePanel.setAttribute('aria-modal', 'true');
      mobilePanel.setAttribute('aria-label', 'Quick Save Panel');
      overlay.appendChild(mobilePanel);
      this.elements.mobilePanel = mobilePanel;
    },

    /**
     * Attach event handlers
     * @returns {void}
     */
attachEventHandlers() {
  document.addEventListener('visibilitychange', () => {
    if (!document.hidden && this.elements.listPanel && this.elements.listPanel.style.display === 'block') {
      this.renderList();
    }
  });

  // Touch event support for better mobile interaction
  document.addEventListener('touchstart', function(e) {
    // Passive listener for scroll performance
  }, { passive: true });
},

    /**
     * Open mobile panel
     * @returns {void}
     */
    openMobilePanel() {
      this.elements.mobileOverlay.style.display = 'block';
      this.elements.mobilePanel.setAttribute('aria-hidden', 'false');
      this.renderMobilePanel();
    },

    /**
     * Close mobile panel
     * @returns {void}
     */
    closeMobilePanel() {
      this.elements.mobileOverlay.style.display = 'none';
      this.elements.mobilePanel.setAttribute('aria-hidden', 'true');
    },

/**
     * Render mobile panel content
     * @returns {void}
     */
    renderMobilePanel() {
      const data = DataStorage.getData();
      this.elements.mobilePanel.innerHTML = '';

// Save button
      const saveBtn = UIComponents.createButton('SAVE', () => {
        this.closeMobilePanel();
        this.showSaveModal();
      }, {
        margin: '5px',
        cursor: 'pointer',
        minWidth: '120px',
        width: '45%',
        maxWidth: '180px',
        minHeight: '32px'
      });

      // See/Close button
      const seeBtn = UIComponents.createButton('CLOSE', () => {
        this.closeMobilePanel();
      }, {
        margin: '5px',
        cursor: 'pointer',
        minWidth: '120px',
        width: '45%',
        maxWidth: '180px',
        minHeight: '32px'
      });

      const btnRow = document.createElement('div');
      btnRow.style.cssText = 'text-align:center;margin-bottom:10px;';
      btnRow.appendChild(saveBtn);
      btnRow.appendChild(seeBtn);
      this.elements.mobilePanel.appendChild(btnRow);

// Categories list
      if (Object.keys(data).length === 0) {
        const emptyContainer = document.createElement('div');
        emptyContainer.style.cssText = 'text-align:center;padding:20px;';

        const emptyMsg = document.createElement('div');
        emptyMsg.textContent = 'No saved pages.';
        emptyMsg.style.cssText = 'font-style:italic;margin-bottom:15px;';
        emptyContainer.appendChild(emptyMsg);

        const importBtn = UIComponents.createButton('Import URLs', () => {
          this.closeMobilePanel();
          this.importData();
        }, {
          margin: '5px auto',
          cursor: 'pointer',
          minHeight: '32px',
          padding: '6px 14px',
          display: 'block',
          width: '90%',
          maxWidth: '250px'
        });
        emptyContainer.appendChild(importBtn);

        this.elements.mobilePanel.appendChild(emptyContainer);
      } else {
        const categoriesContainer = document.createElement('div');
        categoriesContainer.style.cssText = 'margin-bottom:16px;';

        for (let cat in data) {
          const categoryBox = this.renderCategory(cat, data[cat], DataStorage.getExpandedCategory());
          categoriesContainer.appendChild(categoryBox);
        }

        this.elements.mobilePanel.appendChild(categoriesContainer);
      }

// Export/Import buttons at bottom - only show if data exists
      if (Object.keys(data).length > 0) {
        const btnWrapper = document.createElement('div');
        btnWrapper.style.cssText = 'text-align:center;margin-top:10px;padding-top:8px;border-top:1px solid rgba(0,0,0,0.1);';

        const exportBtn = UIComponents.createButton('EXPORT', () => {
          this.exportData();
        }, { margin: '5px', cursor: 'pointer', minHeight: '32px', padding: '6px 14px', minWidth: '120px', width: '45%', maxWidth: '180px' });

        const importBtn = UIComponents.createButton('IMPORT', () => {
          this.importData();
        }, { margin: '10px', cursor: 'pointer', minHeight: '32px', padding: '6px 14px', minWidth: '120px', width: '45%', maxWidth: '180px' });

        btnWrapper.appendChild(exportBtn);
        btnWrapper.appendChild(importBtn);
        this.elements.mobilePanel.appendChild(btnWrapper);
      }

      this.updateAlert();
    },

    /**
     * Restore saved state
     * @returns {void}
     */
    restoreState() {
      if (DataStorage.getPanelState()) {
        this.elements.listPanel.style.display = 'block';
        this.renderList();
      }
      this.updateAlert();
    },

    /**
     * Update alert badge
     * @returns {void}
     */
    updateAlert() {
  const data = DataStorage.getData();
  const pending = ItemOps.countPending(data);
  const hasAlerts = pending > 0;

  this.elements.seeAlert.style.display = hasAlerts ? 'inline-block' : 'none';
  if (this.elements.warningIcon) {
    this.elements.warningIcon.style.display = hasAlerts ? 'inline-block' : 'none';
  }

  if (hasAlerts) {
    this.elements.seeAlert.textContent = `${pending}`;
  }
},

    /**
     * Toggle list panel
     * @returns {void}
     */
    toggleList() {
      const isVisible = this.elements.listPanel.style.display === 'block';
      this.elements.listPanel.style.display = isVisible ? 'none' : 'block';
      DataStorage.setPanelState(!isVisible);
      if (!isVisible) this.renderList();
    },

    /**
     * Show save page modal
     * @returns {void}
     */
    showSaveModal() {
      const data = DataStorage.getData();
      const url = window.location.href;
      const modal = UIComponents.createModal("Save Page");

      const nameInput = UIComponents.createInput('text', document.title || url, 'Link name');
      nameInput.style.cssText = 'width:95%;margin-bottom:10px;';

      const urlInput = UIComponents.createInput('text', url, 'Link URL');
      urlInput.style.cssText = 'width:95%;margin-bottom:10px;';

      const manualLabel = document.createElement("div");
      manualLabel.textContent = "Add a Category:";
      const manualCatInput = UIComponents.createInput('text', '', 'New category');
      manualCatInput.style.cssText = 'width:95%;margin-bottom:10px;';

      const catLabel = document.createElement("div");
      catLabel.textContent = "Or choose an existing category:";
      const categorySelect = document.createElement("select");
      categorySelect.style.cssText = 'width:95%;margin-bottom:10px;';

      const blankOpt = document.createElement("option");
      blankOpt.value = "";
      blankOpt.textContent = "-- Select Category --";
      categorySelect.appendChild(blankOpt);

      for (let cat in data) {
        const opt = document.createElement("option");
        opt.value = cat;
        opt.textContent = cat;
        categorySelect.appendChild(opt);
      }

      const saveBtn = UIComponents.createButton('Save Page', () => {
        const name = nameInput.value.trim();
        const linkUrl = urlInput.value.trim();
        let category = manualCatInput.value.trim() || categorySelect.value;

        if (!category) {
          alert("Category required");
          return;
        }

        let currentData = DataStorage.getData();

        // Check if URL already exists in ANY category
        const existingCategories = [];
        for (let cat in currentData) {
          if (currentData[cat].items && currentData[cat].items.some(item => item.url === linkUrl)) {
            existingCategories.push(cat);
          }
        }

        if (existingCategories.length > 0) {
          if (existingCategories.includes(category)) {
            alert("You have already saved this URL in this category.");
            return;
          } else {
            // Show confirmation dialog for saving in different category
            this.showDuplicateConfirmation(existingCategories, category, linkUrl, name, modal);
            return;
          }
        }

        currentData = ItemOps.addItem(currentData, category, { url: linkUrl, name: name });
        DataStorage.setData(currentData);
        this.updateAlert();
        alert("Saved in: " + category);
        document.body.removeChild(modal);
      }, { marginRight: '10px' });

      const cancelBtn = UIComponents.createButton('Cancel', () => {
        document.body.removeChild(modal);
      });

      modal.appendChild(document.createTextNode("Name:"));
      modal.appendChild(document.createElement("br"));
      modal.appendChild(nameInput);
      modal.appendChild(document.createElement("br"));
      modal.appendChild(document.createTextNode("URL:"));
      modal.appendChild(document.createElement("br"));
      modal.appendChild(urlInput);
      modal.appendChild(document.createElement("br"));
      modal.appendChild(manualLabel);
      modal.appendChild(manualCatInput);
      modal.appendChild(catLabel);
      modal.appendChild(categorySelect);
      modal.appendChild(document.createElement("br"));
      modal.appendChild(saveBtn);
      modal.appendChild(cancelBtn);
      document.body.appendChild(modal);
    },

    /**
     * Export data to file
     * @returns {void}
     */
    exportData() {
      const data = DataStorage.getData();
      ImportExport.exportToFile(data);
    },

/**
     * Show confirmation dialog for duplicate URL in different category
     * @param {Array} existingCategories - Categories that already contain the URL
     * @param {string} targetCategory - Target category to save in
     * @param {string} linkUrl - URL to save
     * @param {string} name - Link name
     * @param {HTMLElement} originalModal - Original save modal to remove
     * @returns {void}
     */
    showDuplicateConfirmation(existingCategories, targetCategory, linkUrl, name, originalModal) {
      const confirmModal = UIComponents.createModal("Duplicate URL");

      const messageDiv = document.createElement('div');
      messageDiv.style.cssText = 'margin-bottom:12px;font-size:14px;line-height:1.6;';
      messageDiv.innerHTML = `<strong>This URL is already saved in:</strong><br>${existingCategories.join(', ')}<br><br>Do you want to save it again in "<strong>${targetCategory}</strong>"?`;

      const btnRow = document.createElement('div');
      btnRow.style.cssText = 'margin-top:16px;text-align:center;';

      const continueBtn = UIComponents.createButton('Save Anyway', () => {
        let currentData = DataStorage.getData();
        currentData = ItemOps.addItem(currentData, targetCategory, { url: linkUrl, name: name });
        DataStorage.setData(currentData);
        this.updateAlert();
        alert("Saved in: " + targetCategory);
        document.body.removeChild(originalModal);
        document.body.removeChild(confirmModal);
        this.renderList();
      }, { marginRight: '10px' });

      const cancelBtn = UIComponents.createButton('Cancel', () => {
        document.body.removeChild(confirmModal);
      });

      btnRow.appendChild(continueBtn);
      btnRow.appendChild(cancelBtn);

      confirmModal.appendChild(messageDiv);
      confirmModal.appendChild(btnRow);
      document.body.appendChild(confirmModal);
    },

    /**
     * Export data to file
     * @returns {void}
     */
    exportData() {
      const data = DataStorage.getData();
      ImportExport.exportToFile(data);
    },

    /**
     * Import data from file
     * @returns {void}
     */
    importData() {
      const input = document.createElement("input");
      input.type = "file";
      input.accept = "application/json";
      input.onchange = () => {
        if (input.files.length > 0) {
          ImportExport.importFromFile(
            input.files[0],
            (parsedData) => {
              DataStorage.setData(parsedData);
              alert("Data imported successfully.");
              this.renderList();
            },
            (error) => {
              alert(error);
            }
          );
        }
      };
      input.click();
    },

    /**
     * Render the list of categories and items
     * @returns {void}
     */
    renderList() {
      const data = DataStorage.getData();
      const lastExpanded = DataStorage.getExpandedCategory();
      this.elements.listPanel.innerHTML = "";

      // Update mobile panel if it's open
      if (this.elements.mobileOverlay && this.elements.mobileOverlay.style.display === 'block') {
        this.renderMobilePanel();
      }

if (Object.keys(data).length === 0) {
        const emptyContainer = document.createElement('div');
        emptyContainer.style.cssText = 'text-align:center;padding:4px;';

        const emptyText = document.createElement('i');
        emptyText.textContent = 'No saved pages.';
        emptyText.style.cssText = 'display:block;margin-bottom:4px;';
        emptyContainer.appendChild(emptyText);

        const importBtn = UIComponents.createButton('Import URLs', () => {
          this.importData();
        }, {
          margin: '5px auto',
          cursor: 'pointer',
          minHeight: '32px',
          padding: '6px 14px',
          display: 'block',
          width: '90%'
        });
        emptyContainer.appendChild(importBtn);

        this.elements.listPanel.appendChild(emptyContainer);
        return;
      }

for (let cat in data) {
        const categoryBox = this.renderCategory(cat, data[cat], lastExpanded);
        this.elements.listPanel.appendChild(categoryBox);
      }

      // Add export/import buttons at bottom

      const btnWrapper = document.createElement("div");
btnWrapper.style.cssText = 'text-align:center;margin-top:10px;padding-top:8px;border-top:none;';
      btnWrapper.appendChild(this.elements.exportBtn);
      btnWrapper.appendChild(this.elements.importBtn);
      this.elements.listPanel.appendChild(btnWrapper);

      this.updateAlert();
    },

    /**
     * Darken a color by a percentage
     * @param {string} color - Color in rgb() or hex format
     * @param {number} percent - Percentage to darken (0-100)
     * @returns {string} - Darkened color in rgb() format
     */
    darkenColor(color, percent) {
      // Parse RGB color
      let r, g, b;

      if (color.startsWith('rgb')) {
        const matches = color.match(/\d+/g);
        if (matches && matches.length >= 3) {
          r = parseInt(matches[0]);
          g = parseInt(matches[1]);
          b = parseInt(matches[2]);
        }
      } else if (color.startsWith('#')) {
        const hex = color.replace('#', '');
        r = parseInt(hex.substr(0, 2), 16);
        g = parseInt(hex.substr(2, 2), 16);
        b = parseInt(hex.substr(4, 2), 16);
      } else {
        return color; // Return original if can't parse
      }

      // Darken
      r = Math.max(0, Math.floor(r * (1 - percent / 100)));
      g = Math.max(0, Math.floor(g * (1 - percent / 100)));
      b = Math.max(0, Math.floor(b * (1 - percent / 100)));

      return `rgb(${r},${g},${b})`;
    },

    /**
     * Render a single category
     * @param {string} catName - Category name
     * @param {Object} categoryData - Category data
     * @param {string|null} lastExpanded - Last expanded category name
     * @returns {HTMLElement}
     */
    renderCategory(catName, categoryData, lastExpanded) {
      const stats = CategoryOps.getCategoryStats(categoryData);

      const box = document.createElement("div");
box.style.cssText = `
  background: linear-gradient(to bottom, ${categoryData.bgColor || 'rgb(246, 226, 80)'}, ${this.darkenColor(categoryData.bgColor || 'rgb(246, 226, 80)', 20)});
  color: ${categoryData.textColor || 'rgb(54,54,54)'};
  padding: 10px 10px 6px 10px;
  margin-bottom: 10px;
  border: 0.8px solid white;
  border-radius: 15px;
  box-shadow: ${categoryData.bgColor || 'rgb(246,226,80)'} 0 0 0 1px inset,
              ${this.darkenColor(categoryData.bgColor || 'rgb(196,124,25)', 30)} 0 -3px 2px 3px inset,
              rgb(253,249,220) 0 2px 0 1px inset,
              rgb(0,0,0) 0 0 0 2px;
`;

      const catTitle = document.createElement("div");
catTitle.style.cssText = 'font-weight:bold;cursor:pointer;margin-bottom:8px;font-family:"Cafeteria","Arial Bold",sans-serif;font-size:18px;';
catTitle.setAttribute('role', 'button');
catTitle.setAttribute('aria-expanded', lastExpanded === catName ? 'true' : 'false');
catTitle.setAttribute('aria-controls', 'category-content-' + catName.replace(/\s+/g, '-'));

catTitle.setAttribute('tabindex', '0');

// Category name
const catNameSpan = document.createElement('span');
catNameSpan.textContent = catName;
catNameSpan.style.cssText = 'display:block;font-size:18px;margin-bottom:8px;word-wrap:break-word;';

catTitle.appendChild(catNameSpan);

// Stats display - vertical layout
const statsDiv = document.createElement('div');
statsDiv.style.cssText = `font-size:14px;color:${categoryData.textColor || 'black'};margin-left:10px;margin-bottom:4px;line-height:1.4;`;

let statsHTML = '';
if (categoryData.showSavedLinks !== false) {
  statsHTML += `Saved Links: ${stats.total}<br>`;
}
if (categoryData.showVisitedToday !== false) {
  statsHTML += `Visited Today: ${stats.visitedToday}<br>`;
}
if (categoryData.showTrackedURL !== false) {
  statsHTML += `Tracked URLs: ${stats.tracked}<br>`;
}

// Count reminders for today
const now = DateTimeUtils.getPacificNow();
let remindersToday = 0;
categoryData.items.forEach(item => {
  if (Array.isArray(item.reminders)) {
    item.reminders.forEach(r => {
      if (ReminderOps.shouldFire(r, now) || (Array.isArray(r.days) && r.days.includes(now.day) && r.time)) {
        remindersToday++;
      }
    });
  }
});

if (remindersToday > 0) {
  statsHTML += `Reminders Today: ${remindersToday}<br>`;
}

statsDiv.innerHTML = statsHTML;
catTitle.appendChild(statsDiv);

if (stats.lastVisit && categoryData.showLastVisit !== false) {
  const lastSeenText = document.createElement("div");
  lastSeenText.style.cssText = `font-size:14px;margin-left:10px;margin-top:2px;margin-bottom:4px;color:${categoryData.textColor || 'black'};font-family:"Cafeteria","Arial Bold",sans-serif;`;
  lastSeenText.textContent = `Last page visit: ${new Date(stats.lastVisit).toLocaleString()}`;
  catTitle.appendChild(lastSeenText);
}

  const editBtn = UIComponents.createButton('Edit', (e) => {
  e.stopPropagation();
  this.showEditCategoryModal(catName, categoryData);
}, {
  fontSize: '14px',
  marginLeft: '5px',
  padding: '4px 12px',
  minHeight: '28px',
  marginTop: '6px',
  marginBottom: '4px',
  title: 'Edit category options'
});
const deleteBtn = UIComponents.createButton('Delete', (e) => {
  e.stopPropagation();
  this.deleteCategory(catName);
}, {
  fontSize: '14px',
  marginLeft: '5px',
  padding: '4px 12px',
  minHeight: '28px',
  marginTop: '6px',
  marginBottom: '4px',
  title: 'Delete whole category and saved URLs'
});
const rankBtn = UIComponents.createButton('Rank', (e) => {
  e.stopPropagation();
  this.rankCategory(catName);
}, {
  fontSize: '14px',
  marginLeft: '5px',
  padding: '4px 12px',
  minHeight: '28px',
  marginTop: '6px',
  marginBottom: '4px',
  title: 'Rank alphabetically the URLs'
});

const upBtn = UIComponents.createButton('⬆', (e) => {
  e.stopPropagation();
  this.moveCategoryUp(catName);
}, {
  fontSize: '14px',
  marginLeft: '5px',
  padding: '4px 12px',
  minHeight: '28px',
  marginTop: '6px',
  marginBottom: '4px',
  title: 'Move category up',
  width: '32px'
});

const downBtn = UIComponents.createButton('⬇', (e) => {
  e.stopPropagation();
  this.moveCategoryDown(catName);
}, {
  fontSize: '14px',
  marginLeft: '5px',
  padding: '4px 12px',
  minHeight: '28px',
  marginTop: '6px',
  marginBottom: '4px',
  title: 'Move category down',
  width: '32px'
});


      catTitle.appendChild(editBtn);
      catTitle.appendChild(deleteBtn);
catTitle.appendChild(rankBtn);
  catTitle.appendChild(upBtn);
      catTitle.appendChild(downBtn);

      const linksDiv = document.createElement("div"); linksDiv.id = 'category-content-' + catName.replace(/\s+/g, '-'); linksDiv.style.cssText = 'display:none;margin-top:5px;';

categoryData.items.forEach((item, idx) => {
  const itemElem = this.renderItem(catName, item, idx, categoryData);
  linksDiv.appendChild(itemElem);
});

catTitle.onclick = (e) => {
        // Don't close mobile panel when clicking category
        e.stopPropagation();
        const isOpen = linksDiv.style.display === 'block';
        linksDiv.style.display = isOpen ? 'none' : 'block';
        catTitle.setAttribute('aria-expanded', isOpen ? 'false' : 'true');
        DataStorage.setExpandedCategory(isOpen ? null : catName);
      };

      // Keyboard support
      catTitle.onkeydown = (e) => {
        if (e.key === 'Enter' || e.key === ' ') {
          e.preventDefault();
          catTitle.onclick();
        }
      };
      if (lastExpanded === catName) {
        linksDiv.style.display = 'block';
      }

      box.appendChild(catTitle);
      box.appendChild(linksDiv);
      return box;
    },

/**
     * Render a single item
     * @param {string} catName - Category name
     * @param {Object} item - Item data
     * @param {number} idx - Item index
     * @param {Object} categoryData - Category data object
     * @returns {HTMLElement}
     */
    renderItem(catName, item, idx, categoryData) {
      const wrapper = document.createElement("div");
      wrapper.style.cssText = 'display:flex;flex-direction:column;margin-bottom:5px;border-bottom:3px dashed #000;padding-bottom:3px;';

      const row = document.createElement("div");
      row.style.cssText = 'display:flex;align-items:center;';
      row.classList.add('item-row');

      const linkNameText = item.name || item.url;
      const linkBtn = UIComponents.createButton(linkNameText, () => { window.location.href = item.url; }, {
        flex: 'none',
        width: '50%',
        maxWidth: '200px',
        textAlign: 'left',
        padding: '6px 12px',
        cursor: 'pointer',
        minHeight: '32px',
        fontSize: '14px',
        overflow: 'hidden',
        whiteSpace: 'normal',
        wordWrap: 'break-word'
      });

      linkBtn.title = item.name || item.url;

      // Add track icon if needed
      if (item.track && !DateTimeUtils.isVisitedToday(item.lastSeen)) {
        const trackIcon = document.createElement('img');
        trackIcon.src = 'https://images.neopets.com/themes/004_bir_a2e60/events/warning.png';
        trackIcon.style.cssText = 'width:16px;height:16px;margin-left:8px;vertical-align:middle;';
        trackIcon.alt = 'Pending';
        linkBtn.appendChild(trackIcon);
      }

      const trackBox = document.createElement("input");
      trackBox.type = "checkbox";
      trackBox.checked = item.track;
      trackBox.title = "Track daily";
      trackBox.style.marginLeft = "5px";
      trackBox.onchange = () => this.toggleTrack(catName, item.url, trackBox.checked);

      const editBtn = document.createElement('button');
      editBtn.className = 'icon-btn';
      editBtn.style.cssText = 'margin-left:5px;width:24px;height:24px;padding:0;min-height:unset;border:none;box-shadow:none;background:transparent url(https://images.neopets.com/themes/020_ppl_3c22d/events/battle_accept.png) center/contain no-repeat;cursor:pointer;';
      editBtn.title = 'Edit link';
      editBtn.setAttribute('aria-label', 'Edit ' + (item.name || item.url));
      editBtn.onclick = () => this.showEditItemModal(catName, item);
      editBtn.ontouchend = (e) => {
        e.preventDefault();
        this.showEditItemModal(catName, item);
      };

      const deleteBtn = document.createElement('button');
      deleteBtn.className = 'icon-btn';
      deleteBtn.style.cssText = 'margin-left:5px;width:24px;height:24px;padding:0;min-height:unset;border:none;box-shadow:none;background:transparent url(https://images.neopets.com/themes/h5/common/images/invalid.png) center/contain no-repeat;cursor:pointer;';
      deleteBtn.title = 'Delete link';
      deleteBtn.setAttribute('aria-label', 'Delete ' + (item.name || item.url));
      deleteBtn.onclick = () => this.deleteItem(catName, item);
      deleteBtn.ontouchend = (e) => {
        e.preventDefault();
        this.deleteItem(catName, item);
      };

      const newTabBtn = document.createElement('button');
      newTabBtn.className = 'icon-btn';
      newTabBtn.style.cssText = 'margin-left:5px;width:24px;height:24px;padding:0;min-height:unset;border:none;box-shadow:none;background:transparent url(https://images.neopets.com/themes/h5/birthday/images/explore-icon.png) center/contain no-repeat;cursor:pointer;';
      newTabBtn.title = 'Open in new tab';
      newTabBtn.setAttribute('aria-label', 'Open ' + (item.name || item.url) + ' in new tab');
      newTabBtn.onclick = () => window.open(item.url, '_blank');
      newTabBtn.ontouchend = (e) => {
        e.preventDefault();
        window.open(item.url, '_blank');
      };

      row.appendChild(linkBtn);
      row.appendChild(trackBox);
      row.appendChild(editBtn);
      row.appendChild(deleteBtn);
      row.appendChild(newTabBtn);

      const visitInfo = this.createVisitInfo(item, categoryData);
      const reminderSection = this.createReminderSection(item);

      // Create notes button and div only if notes exist
      let notesBtn = null;
      let noteDiv = null;

      if (item.note && item.note.trim()) {
        notesBtn = UIComponents.createButton('Notes', null, {
          fontSize: '14px',
          marginLeft: '10px',
          marginTop: '4px',
          display: 'block',
          width: '200px',
          maxWidth: '50%',
          textAlign: 'left',
          padding: '6px 12px'
        });

        noteDiv = document.createElement("div");
        noteDiv.classList.add('note-block');
        noteDiv.style.cssText = 'display:none;margin-left:12px;max-height:100px;overflow-y:auto;';
        noteDiv.textContent = item.note;

        notesBtn.onclick = (e) => {
          e.stopPropagation();
          noteDiv.style.display = noteDiv.style.display === 'none' ? 'block' : 'none';
        };
      }

       wrapper.appendChild(row);

      // Only append reminder section if reminders exist
      if (item.reminders && item.reminders.length > 0) {
        wrapper.appendChild(reminderSection.button);
        wrapper.appendChild(reminderSection.div);
      }

      // Only append notes if they exist
      if (notesBtn && noteDiv) {
        wrapper.appendChild(notesBtn);
        wrapper.appendChild(noteDiv);
      }

      // Visit info goes last
      wrapper.appendChild(visitInfo);

      return wrapper;
    },

    /**
     * Create visit info display
     * @param {Object} item - Item data
     * @returns {HTMLElement}
     */
createVisitInfo(item, categoryData) {
  const visitInfo = document.createElement("div");
  visitInfo.style.cssText = `font-size:17px;margin-left:10px;margin-top:8px;color:${categoryData.textColor || '#444'};font-family:"Cafeteria","Arial Bold",sans-serif;`;

      const labelSpan = document.createElement("span");
      const timeSpan = document.createElement("span");
      timeSpan.style.marginLeft = "6px";

      if (!item.lastSeen) {
        labelSpan.textContent = "You have not visited this page yet.";
        labelSpan.style.fontWeight = "bold";
      } else if (DateTimeUtils.isVisitedToday(item.lastSeen)) {
        labelSpan.textContent = "Visited today at";
        timeSpan.textContent = " " + new Date(item.lastSeen).toLocaleTimeString();
      } else {
        labelSpan.textContent = "Last visited:";
        labelSpan.style.fontWeight = "bold";
        timeSpan.textContent = " " + new Date(item.lastSeen).toLocaleString();
      }

      visitInfo.appendChild(labelSpan);
      visitInfo.appendChild(timeSpan);
      return visitInfo;
    },

/**
     * Format days for reminder display
     * @param {Array} days - Array of day abbreviations
     * @returns {string} - Formatted days string
     */
    formatReminderDays(days) {
      if (!days || days.length === 0) return '';

      const dayOrder = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
      const sortedDays = days.slice().sort((a, b) => dayOrder.indexOf(a) - dayOrder.indexOf(b));

      // Check for consecutive days
      const indices = sortedDays.map(d => dayOrder.indexOf(d));
      let isConsecutive = true;
      for (let i = 1; i < indices.length; i++) {
        if (indices[i] !== indices[i-1] + 1) {
          isConsecutive = false;
          break;
        }
      }

      if (isConsecutive && sortedDays.length > 2) {
        return `${sortedDays[0].toUpperCase()} - ${sortedDays[sortedDays.length - 1].toUpperCase()}`;
      } else {
        return sortedDays.map(d => d.toUpperCase()).join(', ');
      }
    },

    /**
     * Create reminder section
     * @param {Object} item - Item data
     * @returns {Object} - { button, div }
     */
    createReminderSection(item) {
      const totalReminders = (item.reminders || []).length;

const button = UIComponents.createButton(
  totalReminders > 0 ? `Reminders (${totalReminders})` : "Reminders",
  null,
  {
    fontSize: '14px',
    marginLeft: '10px',
    marginTop: '4px',
    display: 'block',
    width: '200px',
    maxWidth: '50%',
    textAlign: 'left',
    padding: '6px 12px'
  }
);
      const div = document.createElement('div');
div.classList.add('reminder-block');
div.style.cssText = 'display:none;margin-left:12px;margin-top:4px;font-size:12px;max-height:100px;overflow-y:auto;';

button.onclick = (e) => {
        e.stopPropagation();
        div.style.display = div.style.display === 'none' ? 'block' : 'none';
        div.innerHTML = '';
        if (!item.reminders || item.reminders.length === 0) {
          div.textContent = 'No reminders set for this page.';
          return;
        }
        item.reminders.forEach(r => {
          const p = document.createElement('div');
          p.classList.add('reminder-line');
          const text = ReminderOps.formatReminderText(r);
          if (text && r.days && r.days.length > 0) {
            const daysText = this.formatReminderDays(r.days);
            p.textContent = `${r.label}: ${text} | ${daysText}`;
          } else if (text) {
            p.textContent = `${r.label}: ${text}`;
          }
          div.appendChild(p);
        });
      };

      return { button, div };
    },

    /**
     * Show edit category modal
     * @param {string} catName - Category name
     * @param {Object} categoryData - Category data
     * @returns {void}
     */
    showEditCategoryModal(catName, categoryData) {
      const modal = UIComponents.createModal("Edit Category");

const nameLabel = document.createElement('div');
nameLabel.textContent = "Change category name:";
nameLabel.style.cssText = 'margin-bottom:4px;font-weight:bold;';

const nameInput = UIComponents.createInput('text', catName);
nameInput.style.cssText = 'width:95%;margin-bottom:10px;padding:4px;';

const bgLabel = document.createElement('div');
bgLabel.textContent = "Choose background color for category";
bgLabel.style.cssText = 'margin-bottom:4px;margin-top:8px;font-weight:bold;';

const bgPicker = UIComponents.createInput('color', categoryData.bgColor || '#d3d3d3');
bgPicker.style.cssText = 'margin-bottom:10px;display:block;';

const txtLabel = document.createElement('div');
txtLabel.textContent = "Choose title color for category";
txtLabel.style.cssText = 'margin-bottom:4px;font-weight:bold;';

const txtPicker = UIComponents.createInput('color', categoryData.textColor || '#000000');
txtPicker.style.cssText = 'display:block;margin-bottom:10px;';

const displayLabel = document.createElement('div');
displayLabel.textContent = "Display Options:";
displayLabel.style.cssText = 'margin-bottom:8px;margin-top:12px;font-weight:bold;';

const showSavedLinksChk = document.createElement('input');
showSavedLinksChk.type = 'checkbox';
showSavedLinksChk.checked = categoryData.showSavedLinks !== false;
const showSavedLinksLbl = document.createElement('label');
showSavedLinksLbl.style.cssText = 'display:block;margin-bottom:6px;';
showSavedLinksLbl.appendChild(showSavedLinksChk);
showSavedLinksLbl.appendChild(document.createTextNode(' Display Saved Links'));

const showVisitedTodayChk = document.createElement('input');
showVisitedTodayChk.type = 'checkbox';
showVisitedTodayChk.checked = categoryData.showVisitedToday !== false;
const showVisitedTodayLbl = document.createElement('label');
showVisitedTodayLbl.style.cssText = 'display:block;margin-bottom:6px;';
showVisitedTodayLbl.appendChild(showVisitedTodayChk);
showVisitedTodayLbl.appendChild(document.createTextNode(' Display Visited Today'));

const showLastVisitChk = document.createElement('input');
showLastVisitChk.type = 'checkbox';
showLastVisitChk.checked = categoryData.showLastVisit !== false;
const showLastVisitLbl = document.createElement('label');
showLastVisitLbl.style.cssText = 'display:block;margin-bottom:10px;';
showLastVisitLbl.appendChild(showLastVisitChk);
showLastVisitLbl.appendChild(document.createTextNode(' Display Overall Last Page Visit'));

const showTrackedURLChk = document.createElement('input');
showTrackedURLChk.type = 'checkbox';
showTrackedURLChk.checked = categoryData.showTrackedURL !== false;
const showTrackedURLLbl = document.createElement('label');
showTrackedURLLbl.style.cssText = 'display:block;margin-bottom:10px;';
showTrackedURLLbl.appendChild(showTrackedURLChk);
showTrackedURLLbl.appendChild(document.createTextNode(' Display Tracked URLs'));

const saveBtn = UIComponents.createButton('Save', () => {
        const newName = nameInput.value.trim() || catName;
        let data = DataStorage.getData();

        data = CategoryOps.upsertCategory(data, newName, {

  bgColor: bgPicker.value,
  textColor: txtPicker.value,
  showSavedLinks: showSavedLinksChk.checked,
  showVisitedToday: showVisitedTodayChk.checked,
  showLastVisit: showLastVisitChk.checked,
  showTrackedURL: showTrackedURLChk.checked
});

        if (newName !== catName) {
          data[newName].items = categoryData.items;
          data = CategoryOps.deleteCategory(data, catName);

          const expanded = DataStorage.getExpandedCategory();
          if (expanded === catName) {
            DataStorage.setExpandedCategory(newName);
          }
        }

        DataStorage.setData(data);
        document.body.removeChild(modal);
        this.renderList();
      });

modal.appendChild(nameLabel);
modal.appendChild(nameInput);
modal.appendChild(bgLabel);
modal.appendChild(bgPicker);
modal.appendChild(txtLabel);
modal.appendChild(txtPicker);
modal.appendChild(displayLabel);
modal.appendChild(showSavedLinksLbl);
modal.appendChild(showVisitedTodayLbl);
modal.appendChild(showLastVisitLbl);
modal.appendChild(showTrackedURLLbl);
modal.appendChild(saveBtn);
document.body.appendChild(modal);

    },

    /**
     * Delete category
     * @param {string} catName - Category name
     * @returns {void}
     */
    deleteCategory(catName) {
      if (!confirm("Delete category '" + catName + "'?")) return;

      let data = DataStorage.getData();
      data = CategoryOps.deleteCategory(data, catName);
      DataStorage.setData(data);

      const expanded = DataStorage.getExpandedCategory();
      if (expanded === catName) {
        DataStorage.setExpandedCategory(null);
      }

      this.renderList();
    },

/**
 * Sort all items in a category alphabetically
 * @param {string} catName - Category name
 * @returns {void}
 */
rankCategory(catName) {
  let data = DataStorage.getData();
  data = ItemOps.sortItems(data, catName);
  DataStorage.setData(data);
  this.renderList();
},

/**
 * Move category up in the list
 * @param {string} catName - Category name
 * @returns {void}
 */
moveCategoryUp(catName) {
  let data = DataStorage.getData();
  const keys = Object.keys(data);
  const currentIndex = keys.indexOf(catName);

  if (currentIndex <= 0) {
    alert("Category is already at the top.");
    return;
  }

  // Swap with previous
  const newData = {};
  keys.forEach((key, idx) => {
    if (idx === currentIndex - 1) {
      newData[catName] = data[catName];
    } else if (idx === currentIndex) {
      newData[keys[currentIndex - 1]] = data[keys[currentIndex - 1]];
    } else {
      newData[key] = data[key];
    }
  });

  DataStorage.setData(newData);
  this.renderList();
},

/**
 * Move category down in the list
 * @param {string} catName - Category name
 * @returns {void}
 */
moveCategoryDown(catName) {
  let data = DataStorage.getData();
  const keys = Object.keys(data);
  const currentIndex = keys.indexOf(catName);

  if (currentIndex >= keys.length - 1) {
    alert("Category is already at the bottom.");
    return;
  }

  // Swap with next
  const newData = {};
  keys.forEach((key, idx) => {
    if (idx === currentIndex) {
      newData[keys[currentIndex + 1]] = data[keys[currentIndex + 1]];
    } else if (idx === currentIndex + 1) {
      newData[catName] = data[catName];
    } else {
      newData[key] = data[key];
    }
  });

  DataStorage.setData(newData);
  this.renderList();
},

    /**
     * Show edit item modal
     * @param {string} catName - Category name
     * @param {Object} item - Item data
     * @returns {void}
     */
    showEditItemModal(catName, item) {
      const data = DataStorage.getData();
      const modal = UIComponents.createModal("Edit Link");

      const nameLabel = document.createElement('div');
      nameLabel.textContent = "Site Name:";
      nameLabel.style.cssText = 'margin-bottom:4px;font-weight:bold;';

const nameInput = UIComponents.createInput('text', item.name);
nameInput.style.cssText = 'width:95%;margin-bottom:10px;padding:4px;';

const urlLabel = document.createElement('div');
urlLabel.textContent = "Site URL:";
urlLabel.style.cssText = 'margin-bottom:4px;font-weight:bold;';

const urlInput = UIComponents.createInput('text', item.url);
urlInput.style.cssText = 'width:95%;margin-bottom:10px;padding:4px;';

      const moveLabel = document.createElement('div');
      moveLabel.textContent = "Move to category:";
      moveLabel.style.marginTop = '6px';

      const moveSelect = document.createElement('select');
      moveSelect.style.cssText = 'width:95%;margin-bottom:8px;';
      for (let c in data) {
        const opt = document.createElement('option');
        opt.value = c;
        opt.textContent = c;
        moveSelect.appendChild(opt);
      }
      moveSelect.value = catName;

      const notesLabel = document.createElement('div');
      notesLabel.textContent = "Notes:";
      notesLabel.style.marginTop = '6px';

      const notesTextarea = document.createElement('textarea');
      notesTextarea.style.cssText = 'width:95%;min-height:60px;margin-bottom:6px;';
      notesTextarea.value = item.note || '';

      const manageRemBtn = UIComponents.createButton('Manage Reminders', null, { marginTop: '0', width: '100%', textAlign: 'left', padding: '8px' });
      const inlineRemContainer = document.createElement('div');
      inlineRemContainer.style.cssText = 'display:none;margin-top:8px;';

      const manager = this.buildRemindersManager(item, () => {
        let currentData = DataStorage.getData();
        DataStorage.setData(currentData);
        this.renderList();
      });
      inlineRemContainer.appendChild(manager);

      manageRemBtn.onclick = () => {
        if (inlineRemContainer.style.display === 'none') {
          inlineRemContainer.style.display = 'block';
          manageRemBtn.textContent = 'Hide Reminders';
        } else {
          inlineRemContainer.style.display = 'none';
          manageRemBtn.textContent = 'Manage Reminders';
        }
      };

      const buttonRow = document.createElement('div');
      buttonRow.style.cssText = 'margin-top:12px;padding-top:8px;';

      const saveBtn = UIComponents.createButton('Save', () => {
        const targetCategory = moveSelect.value || catName;
        const updatedItem = {
          url: urlInput.value.trim(),
          name: nameInput.value.trim(),
          lastSeen: item.lastSeen || '',
          track: item.track || false,
          reminders: (item.reminders || []).slice(0, Constants.MAX_REMINDERS_PER_LINK),
          note: notesTextarea.value || ''
        };

        let currentData = DataStorage.getData();

        if (targetCategory === catName) {
          currentData = ItemOps.updateItem(currentData, catName, item.url, updatedItem);
        } else {
          currentData = ItemOps.deleteItem(currentData, catName, item.url);
          currentData = ItemOps.addItem(currentData, targetCategory, updatedItem);
          currentData[targetCategory].items[currentData[targetCategory].items.length - 1] = updatedItem;

          const expanded = DataStorage.getExpandedCategory();
          if (expanded === catName) {
            DataStorage.setExpandedCategory(targetCategory);
          }
        }

        DataStorage.setData(currentData);
        document.body.removeChild(modal);
        this.renderList();
      }, { marginRight: '8px' });

      const cancelBtn = UIComponents.createButton('Cancel', () => {
        document.body.removeChild(modal);
      });

modal.appendChild(nameLabel);
      modal.appendChild(nameInput);
      modal.appendChild(urlLabel);
      modal.appendChild(urlInput);
      modal.appendChild(moveLabel);
      modal.appendChild(moveSelect);
      modal.appendChild(notesLabel);
      modal.appendChild(notesTextarea);
      modal.appendChild(manageRemBtn);
      modal.appendChild(inlineRemContainer);
      buttonRow.appendChild(saveBtn);
      buttonRow.appendChild(cancelBtn);
      modal.appendChild(buttonRow);
      document.body.appendChild(modal);
    },

    /**
     * Build reminders manager UI
     * @param {Object} item - Item with reminders
     * @param {Function} onSave - Callback when reminders change
     * @returns {HTMLElement}
     */
    buildRemindersManager(item, onSave) {
      const wrapper = document.createElement('div');
      wrapper.classList.add('inline-reminders-wrapper');

      const listArea = document.createElement('div');
      listArea.style.cssText = 'max-height:260px;overflow-y:auto;';

      const rebuild = () => {
        listArea.innerHTML = '';
        (item.reminders || []).forEach((r, idx) => {
          const card = this.createReminderCard(item, r, idx, rebuild, onSave);
          listArea.appendChild(card);
        });

        const canAdd = (item.reminders || []).length < Constants.MAX_REMINDERS_PER_LINK;
        const addWrapper = document.createElement('div');
        addWrapper.style.marginTop = '8px';

        if (canAdd) {
          const addBtn = UIComponents.createButton('Add Reminder', () => {
            item = ReminderOps.addReminder(item, { label: 'Reminder', days: [], time: '', repeat: true });
            rebuild();
            onSave && onSave();
          });
          addWrapper.appendChild(addBtn);
        } else {
          const msg = document.createElement('div');
          msg.textContent = 'Maximum of 3 reminders reached.';
          addWrapper.appendChild(msg);
        }
        listArea.appendChild(addWrapper);
      };

      rebuild();
      wrapper.appendChild(listArea);
      return wrapper;
    },

    /**
     * Create reminder card
     * @param {Object} item - Parent item
     * @param {Object} reminder - Reminder data
     * @param {number} idx - Reminder index
     * @param {Function} rebuild - Rebuild UI callback
     * @param {Function} onSave - Save callback
     * @returns {HTMLElement}
     */
    createReminderCard(item, reminder, idx, rebuild, onSave) {
      const card = document.createElement('div');
      card.style.cssText = 'border:1px solid #eee;padding:8px;margin-bottom:6px;border-radius:6px;background:transparent;';

      const labelInput = UIComponents.createInput('text', reminder.label || '', 'Label (e.g., "Gallery Submit")');
      labelInput.style.cssText = 'width:95%;margin-bottom:6px;';

      const timeInput = UIComponents.createInput('time', reminder.time || '');
      timeInput.style.cssText = 'display:block;margin-bottom:6px;';

      const daysDiv = document.createElement('div');
      daysDiv.style.marginBottom = '6px';
      Constants.DAYS.forEach(d => {
        const lbl = document.createElement('label');
        lbl.style.marginRight = '6px';
        const chk = document.createElement('input');
        chk.type = 'checkbox';
        chk.value = d;
        chk.checked = Array.isArray(reminder.days) && reminder.days.includes(d);
        lbl.appendChild(chk);
        lbl.appendChild(document.createTextNode(d));
        daysDiv.appendChild(lbl);
      });

      const repeatChk = document.createElement('input');
      repeatChk.type = 'checkbox';
      repeatChk.checked = !!reminder.repeat;
      const repeatLabel = document.createElement('label');
      repeatLabel.style.display = 'block';
      repeatLabel.appendChild(repeatChk);
      repeatLabel.appendChild(document.createTextNode(' Repeat weekly'));

      const btnRow = document.createElement('div');
      btnRow.style.marginTop = '6px';

      const saveBtn = UIComponents.createButton('Save', () => {
        const selectedDays = [];
        daysDiv.querySelectorAll('input[type=checkbox]').forEach(chk => {
          if (chk.checked) selectedDays.push(chk.value);
        });

        item = ReminderOps.updateReminder(item, idx, {
          label: labelInput.value.trim() || 'Reminder',
          time: timeInput.value,
          days: selectedDays,
          repeat: repeatChk.checked
        });

        onSave && onSave();
        rebuild();
      });

      const deleteBtn = UIComponents.createButton('Delete', () => {
        if (confirm('Delete this reminder?')) {
          item = ReminderOps.deleteReminder(item, idx);
          onSave && onSave();
          rebuild();
        }
      }, { marginLeft: '8px' });

      btnRow.appendChild(saveBtn);
      btnRow.appendChild(deleteBtn);

      const localPreview = document.createElement('div');
      localPreview.style.cssText = 'margin-top:6px;font-size:12px;color:#555;';
      if (reminder.time) {
        const localTime = DateTimeUtils.convertPSTToLocal(reminder.time);
        localPreview.innerHTML = `Local time: ${localTime}`;
      }

      timeInput.onchange = () => {
        if (timeInput.value) {
          const localTime = DateTimeUtils.convertPSTToLocal(timeInput.value);
          localPreview.innerHTML = `Local time: ${localTime}`;
        } else {
          localPreview.textContent = '';
        }
      };

      card.appendChild(labelInput);
      card.appendChild(timeInput);
      card.appendChild(daysDiv);
      card.appendChild(repeatLabel);
      card.appendChild(localPreview);
      card.appendChild(btnRow);

      return card;
    },

    /**
     * Toggle item tracking
     * @param {string} catName - Category name
     * @param {string} url - Item URL
     * @param {boolean} checked - New track state
     * @returns {void}
     */
    toggleTrack(catName, url, checked) {
      let data = DataStorage.getData();
      data = ItemOps.updateItem(data, catName, url, { track: checked });
      DataStorage.setData(data);
      this.renderList();
    },

    /**
     * Delete item
     * @param {string} catName - Category name
     * @param {Object} item - Item data
     * @returns {void}
     */
    deleteItem(catName, item) {
      if (!confirm("Delete page '" + item.name + "'?")) return;

      let data = DataStorage.getData();
      data = ItemOps.deleteItem(data, catName, item.url);
      DataStorage.setData(data);
      this.renderList();
    }
  };

  // ============================================================================
  // INITIALIZATION AND AUTO-START
  // ============================================================================

  /**
   * Initialize application
   * @returns {void}
   */
  function init() {
    // Auto-mark current page as visited
    AutoVisitTracker.track();

    // Initialize UI
    UIController.init();

    // Setup mutation observer to recreate panel if removed
    const observer = new MutationObserver(() => {
      if (!document.getElementById(Constants.PANEL_ID)) {
        UIController.init();
      }
    });
    observer.observe(document.body, { childList: true, subtree: true });

    // Expose render function for manual calls
    window._neopets_quick_save_renderList = () => {
      UIController.renderList();
    };
  }

  // Start on load - more robust
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', init);
} else {
  // DOM already loaded
  init();
}

// Backup: also try on window load
window.addEventListener('load', function() {
  if (!document.getElementById(Constants.PANEL_ID)) {
    init();
  }
});

})();

// ============================================================================
// MODULE INTERFACE DOCUMENTATION
// ============================================================================
/*

CONSTANTS
---------
- All configuration values (storage keys, IDs, max limits, etc.)

DataStorage
-----------
Input: none (reads localStorage)
Output: Data objects, state values
Methods:
  - getData() → Object
  - setData(data: Object) → void
  - getPanelState() → boolean
  - setPanelState(isOpen: boolean) → void
  - getExpandedCategory() → string|null
  - setExpandedCategory(categoryName: string|null) → void
  - wasReminderShown(key: string) → boolean
  - markReminderShown(key: string) → void

DataNormalizer
--------------
Input: Raw storage data
Output: Normalized data structures
Methods:
  - normalize(raw: Object) → Object
  - normalizeItem(item: Object) → Object
  - normalizeReminders(item: Object) → Array
  - migrateOldReminders(item: Object) → Array

DateTimeUtils
-------------
Input: Date strings, time strings
Output: Formatted dates/times, comparisons
Methods:
  - getTodayPacific() → string (YYYY-MM-DD)
  - isVisitedToday(lastSeen: string) → boolean
  - getPacificNow() → { day: string, date: string, time: string }
  - getLocalTimezoneAbbr() → string
  - formatTime12Hour(timeStr: string) → string
  - convertPSTToLocal(timeStr: string) → string

URLUtils
--------
Input: URL strings
Output: Normalized URLs, comparisons
Methods:
  - getBaseURL(url: string) → string
  - matchesCurrentPage(savedUrl: string, currentUrl: string) → boolean

CategoryOps
-----------
Input: Data object, category properties
Output: Modified data object
Methods:
  - upsertCategory(data: Object, name: string, props: Object) → Object
  - renameCategory(data: Object, oldName: string, newName: string) → Object
  - deleteCategory(data: Object, name: string) → Object
  - getCategoryStats(categoryData: Object) → { total, visitedToday, pending, lastVisit }

ItemOps
-------
Input: Data object, item properties
Output: Modified data object
Methods:
  - addItem(data: Object, categoryName: string, item: Object) → Object
  - updateItem(data: Object, categoryName: string, oldUrl: string, updates: Object) → Object
  - deleteItem(data: Object, categoryName: string, url: string) → Object
  - moveItem(data: Object, fromCategory: string, toCategory: string, url: string) → Object
  - reorderItems(data: Object, categoryName: string, fromIndex: number, toIndex: number) → Object
  - markVisited(data: Object, url: string) → Object
  - countPending(data: Object) → number

ReminderOps
-----------
Input: Item object, reminder data
Output: Modified item, formatted text, checks
Methods:
  - addReminder(item: Object, reminder: Object) → Object
  - updateReminder(item: Object, index: number, updates: Object) → Object
  - deleteReminder(item: Object, index: number) → Object
  - formatReminderText(reminder: Object) → string|null
  - shouldFire(reminder: Object, now: Object) → boolean
  - getReminderKey(url: string, reminder: Object, date: string) → string

ImportExport
------------
Input: Data object or file
Output: Downloads file or parsed data
Methods:
  - exportToFile(data: Object) → void (triggers download)
  - importFromFile(file: File, onSuccess: Function, onError: Function) → void

AutoVisitTracker
----------------
Input: none (reads current URL)
Output: Updates data storage
Methods:
  - track() → void

UIComponents
------------
Input: Various parameters for UI elements
Output: DOM elements
Methods:
  - createModal(title: string) → HTMLElement
  - createButton(text: string, onClick: Function, style: Object) → HTMLElement
  - createInput(type: string, value: string, placeholder: string) → HTMLElement

UIController
------------
Input: User interactions, data changes
Output: DOM updates, data saves
Methods:
  - init() → void
  - injectStyles() → void
  - createPanel() → void
  - attachEventHandlers() → void
  - restoreState() → void
  - updateAlert() → void
  - toggleList() → void
  - showSaveModal() → void
  - exportData() → void
  - importData() → void
  - renderList() → void
  - renderCategory(catName: string, categoryData: Object, lastExpanded: string|null) → HTMLElement
  - renderItem(catName: string, item: Object, idx: number) → HTMLElement
  - createVisitInfo(item: Object) → HTMLElement
  - createReminderSection(item: Object) → { button: HTMLElement, div: HTMLElement }
  - showEditCategoryModal(catName: string, categoryData: Object) → void
  - deleteCategory(catName: string) → void
  - showEditItemModal(catName: string, item: Object) → void
  - buildRemindersManager(item: Object, onSave: Function) → HTMLElement
  - createReminderCard(item: Object, reminder: Object, idx: number, rebuild: Function, onSave: Function) → HTMLElement
  - toggleTrack(catName: string, url: string, checked: boolean) → void
  - deleteItem(catName: string, item: Object) → void

DATA STRUCTURES
---------------

CategoryData:
{
  bgColor: string,
  textColor: string,
  items: Array<ItemData>
}

ItemData:
{
  url: string,
  name: string,
  track: boolean,
  lastSeen: string (ISO date),
  note: string,
  reminders: Array<ReminderData>
}

ReminderData:
{
  label: string,
  days: Array<string>, // ['Sun', 'Mon', ...]
  time: string, // HH:MM format
  repeat: boolean
}

*/