Connect your app to the company database

<script>
(function(){
  var APP    = 'my-app';        /* <-- CHANGE THIS: short, unique, lowercase */
  var PREFIX = null;            /* optional: only share keys starting with these, e.g. ['myapp:'] */

  var DOOR='https://mera.shapeshifter.me', TABLE='app_state', ROW=APP+':shared',
      HY='ss_hy_'+APP, SKIP=/(theme|:view$|_view$|active_user|token|secret)/i;
  function shared(k){
    if(SKIP.test(k)) return false;
    return PREFIX ? PREFIX.some(function(p){return k.indexOf(p)===0}) : true;
  }
  var _set=localStorage.setItem.bind(localStorage), _rem=localStorage.removeItem.bind(localStorage), t=null, pip=null;

  function paint(state, detail){
    if(!pip){
      var host=document.querySelector('aside.sidebar')||document.getElementById('sidebar');
      pip=document.createElement('div'); pip.id='ss-sync-pip';
      pip.style.cssText='margin-top:auto;padding:10px 12px;font:11.5px/1.45 system-ui;border-top:1px solid rgba(255,255,255,.08);color:#8ea6bd;display:flex;align-items:center;gap:7px';
      if(host){ host.style.display='flex'; host.style.flexDirection='column'; host.appendChild(pip); }
      else { pip.style.cssText+=';position:fixed;left:12px;bottom:10px;z-index:9998;background:rgba(12,18,24,.9);border-radius:12px'; document.body.appendChild(pip); }
    }
    var c={ok:'#5ad19b',sync:'#e5c76b',err:'#f08a72'}[state]||'#7b8b9a';
    var label={ok:'Synced',sync:'Saving…',err:'Not saving'}[state]||'Local only';
    pip.innerHTML='<span style="width:8px;height:8px;border-radius:50%;background:'+c+';flex:none"></span>'+
      '<span><b style="color:#cfe0ee;font-weight:600">'+label+'</b>'+(detail?'<br><span style="color:#7b8b9a">'+detail+'</span>':'')+'</span>';
  }
  function push(){
    paint('sync');
    var payload={};
    for(var i=0;i<localStorage.length;i++){ var k=localStorage.key(i);
      if(shared(k)){ try{ payload[k]=localStorage.getItem(k); }catch(e){} } }
    fetch(DOOR+'/pm-write/upsert',{method:'POST',credentials:'include',
      headers:{'Content-Type':'application/json'},
      body:JSON.stringify({table:TABLE,rows:[{id:ROW,data:payload}]})})
      .then(function(r){ paint(r&&r.ok?'ok':'err', r&&r.ok?'saved '+new Date().toLocaleTimeString([], {hour:'numeric',minute:'2-digit'}):'server refused the save'); })
      .catch(function(){ paint('err','no connection — kept on this device'); });
  }
  localStorage.setItem=function(k,v){ _set(k,v); if(shared(k)){ clearTimeout(t); t=setTimeout(push,900);} };
  localStorage.removeItem=function(k){ _rem(k); if(shared(k)){ clearTimeout(t); t=setTimeout(push,900);} };

  if(!sessionStorage.getItem(HY)){
    sessionStorage.setItem(HY,'1');
    fetch(DOOR+'/data/'+TABLE+'?id=eq.'+encodeURIComponent(ROW)+'&select=data',{credentials:'include'})
      .then(function(r){ return r.ok?r.json():[] })
      .then(function(rows){
        var d=(rows&&rows[0]&&rows[0].data)||{}, changed=false;
        Object.keys(d).forEach(function(k){ if(d[k]!=null && d[k]!==localStorage.getItem(k)){ _set(k,d[k]); changed=true; } });
        paint('ok','loaded from company database');
        if(changed) location.reload(); else push();
      }).catch(function(){ paint('err','could not reach the company database'); });
  } else { paint('ok'); }

  function gate(){
    fetch(DOOR+'/data/products?select=id&limit=1',{credentials:'include'}).then(function(r){
      if(r.ok) return;
      var d=document.createElement('div');
      d.style.cssText='position:fixed;inset:0;z-index:2147483647;background:#0b0f14;color:#e6edf3;display:flex;align-items:center;justify-content:center;font:15px system-ui';
      d.innerHTML='<div style="max-width:440px;padding:32px;text-align:center"><div style="font-size:20px;font-weight:600;margin-bottom:10px">One-time sign-in needed</div><div style="color:#9aa7b4;margin-bottom:22px">This app loads live company data. Your browser needs a session with the company data service — one click, once per browser.</div><button id="ssgo" style="padding:11px 22px;border-radius:8px;border:0;background:#2f81f7;color:#fff;font-weight:600;cursor:pointer">Connect &amp; open app</button></div>';
      document.body.appendChild(d);
      d.querySelector('#ssgo').onclick=function(){ window.open(DOOR+'/','ss-connect');
        var n=0,iv=setInterval(function(){ n++; fetch(DOOR+'/data/products?select=id&limit=1',{credentials:'include'})
          .then(function(r2){ if(r2.ok){ clearInterval(iv); location.reload(); } else if(n>150) clearInterval(iv); }); },2000); };
    }).catch(function(){});
  }
  if(document.readyState==='loading') document.addEventListener('DOMContentLoaded',gate); else gate();
})();
</script>