#app main {
    /* 30 + (sidebar width / 2) */
    padding-left: 230px;
}

.searchform {
    margin: 0px auto;
    max-width: 920px;
}

.item {
    margin: 15px;
}

window.addEventListener('DOMContentLoaded', () => {
  const SIDEBAR_ID = 'lh-left-sidebar';
  if (document.getElementById(SIDEBAR_ID)) return; // prevent duplicates

  // create sidebar
  const bar = document.createElement('div');
  bar.id = SIDEBAR_ID;
  Object.assign(bar.style, {
    position: 'fixed',
    top: '0',
    left: '0',
    width: '400px',
    height: '100vh',
    background: '#fff',
    borderRight: '1px solid rgba(0,0,0,0.1)',
    zIndex: '9999',
    boxSizing: 'border-box'
  });

  // iframe inside
  const frame = document.createElement('iframe');
  frame.src = 'https://memos.leohamel.com';
  frame.title = 'Leo Hamel';
  frame.style.width = '100%';
  frame.style.height = '100%';
  frame.style.border = '0';

  bar.appendChild(frame);
  document.body.appendChild(bar);

  // shift #main over
  const main = document.querySelector('#main');
  if (main) {
    const currentPx = parseFloat(getComputedStyle(main).marginLeft) || 0;
    main.style.marginLeft = (currentPx + 200) + 'px';
  } else {
    const bodyCurrent = parseFloat(getComputedStyle(document.body).marginLeft) || 0;
    document.body.style.marginLeft = (bodyCurrent + 200) + 'px';
  }
});

(async () => {

  if (document.querySelectorAll('#sortable').length <= 0) return;

  const requiredIds = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 13];

  // Find all section elements inside #sortable with data-id
  const sections = document.querySelectorAll('#sortable section[data-id]');
  const existingIds = Array.from(sections).map(sec => Number(sec.dataset.id));

  // Find the missing ones
  const missingIds = requiredIds.filter(id => !existingIds.includes(id));

  if (missingIds.length > 0) {
    console.log(`Missing IDs detected: ${missingIds.join(', ')}. Summoning fetch magic...`);
    for (const id of missingIds) {
      try {
        await fetch(`https://robin.leohamel.com/items/pintoggle/${id}`);
      } catch (err) {
        console.error(`Fetch failed for ID ${id}:`, err);
      }
    }
    console.log('Reloading the page...');
    location.reload();
  } else {
    console.log('🎉 Success! All sections are present.');
  }
})();