Enhancing Airtable with Custom Features: A Practical Guide

// ==UserScript==
// @name         Airtable Interface Collapse Sections (Including Linked Records - Fixed)
// @namespace    https://automaticnation.com
// @version      2.1
// @description  Adds a collapse button to Airtable Interface sections, including linked record views (Updated Structure)
// @author       Automatic Nation
// @match        https://airtable.com/*
// @grant        GM_addStyle
// ==/UserScript==

(function () {
    'use strict';

    // Add CSS styles for the collapse button
    GM_addStyle(`
        .collapse-btn {
            position: absolute;
            top: 8px;
            right: 12px;
            background: none;
            border: none;
            cursor: pointer;
            font-size: 18px;
            color: #555;
            z-index: 1000;
        }
        .collapse-btn:hover {
            color: #000;
        }
    `);

    function addCollapseButtons() {
        document.querySelectorAll('[data-testid="section-element"]').forEach(section => {
            // Check if the button already exists
            if (section.querySelector('.collapse-btn')) return;

            // Identify collapsible content
            let standardContent = section.querySelector('.flex.mt2-and-half.owl-gapx2-and-half');
            let linkedRecordsContent = section.querySelector('[data-testid="levels-scroll-element"]');

            // Prioritize collapsing linked record content if found, otherwise collapse standard content
            let content = linkedRecordsContent || standardContent;
            if (!content) return;

            // Create the collapse button
            let button = document.createElement('button');
            button.innerHTML = '▲'; // Default to expanded
            button.className = 'collapse-btn';

            // Toggle collapse/expand
            button.addEventListener('click', () => {
                let isHidden = content.style.display === 'none';
                content.style.display = isHidden ? 'flex' : 'none'; // Keep layout intact if needed
                button.innerHTML = isHidden ? '▲' : '▼';
            });

            // Ensure section has relative positioning
            section.style.position = 'relative';

            // Append button to section (top-right)
            section.appendChild(button);
        });
    }

    // Run when page loads
    setInterval(addCollapseButtons, 2000); // Keep checking for new sections

})();

// ==UserScript==
// @name         Airtable Interface Section Color Picker
// @namespace    https://automaticnation.com
// @version      1.0
// @description  Adds a color picker to each section in Airtable Interfaces, allowing customization of background colors.
// @author       Automatic Nation
// @match        https://airtable.com/*
// @grant        GM_addStyle
// ==/UserScript==

(function() {
    'use strict';

    // Add CSS styles for the color picker button
    GM_addStyle(`
        .color-picker-btn {
            position: absolute;
            top: 8px;
            right: 40px;
            background: white;
            border: 1px solid #ccc;
            border-radius: 4px;
            cursor: pointer;
            width: 20px;
            height: 20px;
            padding: 0;
        }
        .color-picker-btn:hover {
            border-color: black;
        }
        .color-picker {
            position: absolute;
            top: 30px;
            right: 40px;
            display: none;
            border: 1px solid #ccc;
            background: white;
            padding: 5px;
            border-radius: 4px;
            z-index: 1001;
        }
    `);

    function addColorPickers() {
        document.querySelectorAll('[data-testid="section-element"]').forEach(section => {
            // Check if the button already exists
            if (section.querySelector('.color-picker-btn')) return;

            // Generate a unique ID for this section
            let sectionId = section.getAttribute('data-testid') + '-' + [...section.innerText].map(c => c.charCodeAt(0)).join('');

            // Load saved color (if any)
            let savedColor = localStorage.getItem(`sectionColor-${sectionId}`);
            if (savedColor) {
                section.style.backgroundColor = savedColor;
            }

            // Create the color picker button
            let button = document.createElement('button');
            button.className = 'color-picker-btn';
            button.innerText = '✎';

            // Create the color input
            let colorInput = document.createElement('input');
            colorInput.type = 'color';
            colorInput.className = 'color-picker';
            colorInput.style.position = 'absolute';
            colorInput.style.display = 'none';

            // Show color picker when clicking the button
            button.addEventListener('click', () => {
                colorInput.click();
            });

            // Change section background color when selecting a color
            colorInput.addEventListener('input', (event) => {
                let color = event.target.value;
                section.style.backgroundColor = color;
                localStorage.setItem(`sectionColor-${sectionId}`, color); // Save color selection
            });

            // Ensure section has relative positioning for correct placement
            section.style.position = 'relative';

            // Append button and input to section
            section.appendChild(button);
            section.appendChild(colorInput);
        });
    }

    // Run when page loads
    setInterval(addColorPickers, 2000); // Keep checking for new sections

})();