DevTools.astro

<div class="clippy-dev-tools" tabindex={-1} aria-hidden="true">
  <a href="/">Back to home</a>
  <utrecht-button id="clear-localstorage" type="button">Clear localStorage</utrecht-button>
  <div class="clippy-dev-tools__toggle">
    <label>
      <input type="checkbox" id="search-reload-toggle" />
      Search with page reload
    </label>
  </div>
  <details class="clippy-dev-tools__details" hidden>
    <summary>cookies</summary>
    <pre id="localstorage-content" class="clippy-dev-tools__content"></pre>
  </details>
</div>

<style>
  .clippy-dev-tools {
    align-items: center;
    background-color: var(--utrecht-alert-warning-background-color);
    border: 1px solid var(--utrecht-alert-warning-border-color);
    border-radius: var(--utrecht-alert-border-radius);
    display: flex;
    gap: var(--basis-space-column-md);
    inset-block-start: 0;
    inset-inline-start: 50%;
    margin-block: var(--basis-space-block-md);
    margin-inline: var(--basis-space-block-md);
    padding-block: var(--basis-space-block-md);
    padding-inline: var(--basis-space-inline-lg);
    position: fixed;
    transform: translateX(-50%);
    z-index: 9999;
  }

  @media (width <= 768px) {
    .clippy-dev-tools {
      display: none;
    }
  }

  .clippy-dev-tools a,
  .clippy-dev-tools button {
    font-family: var(--basis-text-font-family-default);
    font-size: var(--basis-text-font-size-sm);
    line-height: var(--basis-text-line-height-sm);
    padding-block: var(--basis-space-inline-sm);
    padding-inline: var(--basis-space-inline-md);
  }

  .clippy-dev-tools button {
    background-color: var(--utrecht-button-secondary-action-background-color);
    border: 1px solid var(--utrecht-button-secondary-action-border-color);
    border-radius: var(--utrecht-button-border-radius);
    color: var(--utrecht-button-secondary-action-color);
    cursor: pointer;
    font-weight: var(--basis-text-font-weight-regular);
  }

  .clippy-dev-tools__details {
    font-size: var(--basis-text-font-size-sm);
  }

  .clippy-dev-tools__details[hidden] {
    display: none;
  }

  .clippy-dev-tools__details summary {
    cursor: pointer;
    font-weight: var(--basis-text-font-weight-medium);
    padding-block: var(--basis-space-inline-sm) 0;
    padding-inline: 0;
  }

  .clippy-dev-tools__content {
    background-color: var(--utrecht-document-background-color, #fff);
    border: 1px solid var(--utrecht-color-grey-40, #ccc);
    border-radius: var(--utrecht-alert-border-radius);
    font-size: var(--basis-text-font-size-xs);
    margin-block-start: var(--basis-space-block-sm);
    max-block-size: 200px;
    overflow-block: auto;
    overflow-wrap: break-word;
    padding-block: var(--basis-space-block-sm);
    padding-inline: var(--basis-space-inline-sm);
    white-space: pre-wrap;
  }

  .clippy-dev-tools__toggle {
    align-items: center;
    display: flex;
    font-family: var(--basis-text-font-family-default);
    font-size: var(--basis-text-font-size-sm);
    gap: var(--basis-space-inline-sm);
  }

  .clippy-dev-tools__toggle label {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: 0.5rem;
  }
</style>

<script>
  const STORAGE_KEY = 'cookie-consent-preferences';

  // Function to read and display localStorage content
  function updateLocalStorageDisplay() {
    const detailsElement = document.querySelector('.clippy-dev-tools__details');
    const contentElement = document.getElementById('localstorage-content');

    if (!detailsElement || !contentElement) return;

    try {
      const storedData = localStorage.getItem(STORAGE_KEY);
      if (storedData) {
        // Show details if there's data
        detailsElement.removeAttribute('hidden');

        // Try to parse and pretty-print JSON
        try {
          const parsed = JSON.parse(storedData);
          contentElement.textContent = JSON.stringify(parsed, null, 2);
        } catch {
          // If not valid JSON, just show the raw value
          contentElement.textContent = storedData;
        }
      } else {
        // Hide details if there's no data
        detailsElement.setAttribute('hidden', '');
      }
    } catch (error) {
      const errorMessage = error instanceof Error ? error.message : String(error);
      contentElement.textContent = `Fout bij lezen van localStorage: ${errorMessage}`;
    }
  }

  // Update display on page load
  updateLocalStorageDisplay();

  // Update display when details is opened
  const detailsElement = document.querySelector('.clippy-dev-tools__details') as HTMLDetailsElement | null;
  if (detailsElement) {
    detailsElement.addEventListener('toggle', () => {
      if (detailsElement?.open) {
        updateLocalStorageDisplay();
      }
    });
  }

  // Clear localStorage button
  const clearButton = document.getElementById('clear-localstorage');
  if (clearButton) {
    clearButton.addEventListener('click', () => {
      try {
        localStorage.removeItem(STORAGE_KEY);
        localStorage.removeItem('clippy-search-use-reload');
        window.location.reload();
      } catch (error) {
        console.error('Fout bij verwijderen van localStorage:', error);
      }
    });
  }

  // Search reload toggle
  const RELOAD_KEY = 'clippy-search-use-reload';
  const reloadToggle = document.getElementById('search-reload-toggle') as HTMLInputElement | null;

  if (reloadToggle) {
    // Initialize from localStorage
    const useReload = localStorage.getItem(RELOAD_KEY) === 'true';
    reloadToggle.checked = useReload;

    reloadToggle.addEventListener('change', () => {
      localStorage.setItem(RELOAD_KEY, String(reloadToggle.checked));
    });
  }
</script>