From 7849b882ec4aedc7c541cf221c055a454f596b63 Mon Sep 17 00:00:00 2001
From: David Arroyo <29355377+davidarroyo1234@users.noreply.github.com>
Date: Sun, 4 Aug 2024 18:07:34 +0200
Subject: [PATCH] Feature/custom settings and refactor (#179)

* First component move

* Second refactor

* More refactor

* Third component move

* Move  header to component

* Initial menu design

* Fix design

* Click logic

* Pending set form value and save

* Working functionality
---
 public/index.html                        |    2 +-
 src/components/NotSearching.tsx          |   11 +
 src/components/Searching.tsx             |  277 +++++
 src/components/SettingMenu.tsx           |  113 ++
 src/components/{toast.tsx => Toast.tsx}  |    0
 src/components/Toolbar.tsx               |  178 +++
 src/components/Unfollowing.tsx           |   81 ++
 src/components/icons/SettingIcon.tsx     |   50 +
 src/components/icons/UserUncheckIcon.tsx |    2 +-
 src/constants/constants.ts               |    9 +
 src/main.tsx                             | 1295 +++++++---------------
 src/model/scanning-filter.ts             |    6 +
 src/model/scanning-tab.ts                |    1 +
 src/model/searching-props.ts             |    0
 src/model/state.ts                       |   29 +
 src/model/timings.ts                     |    6 +
 src/model/unfollow-filter.ts             |    4 +
 src/model/unfollow-log-entry.ts          |    6 +
 src/model/user.ts                        |    8 +-
 src/styles/_helpers.scss                 |  244 ++--
 src/utils.ts                             |   39 -
 src/utils/utils.ts                       |  133 +++
 22 files changed, 1462 insertions(+), 1032 deletions(-)
 create mode 100644 src/components/NotSearching.tsx
 create mode 100644 src/components/Searching.tsx
 create mode 100644 src/components/SettingMenu.tsx
 rename src/components/{toast.tsx => Toast.tsx} (100%)
 create mode 100644 src/components/Toolbar.tsx
 create mode 100644 src/components/Unfollowing.tsx
 create mode 100644 src/components/icons/SettingIcon.tsx
 create mode 100644 src/constants/constants.ts
 create mode 100644 src/model/scanning-filter.ts
 create mode 100644 src/model/scanning-tab.ts
 create mode 100644 src/model/searching-props.ts
 create mode 100644 src/model/state.ts
 create mode 100644 src/model/timings.ts
 create mode 100644 src/model/unfollow-filter.ts
 create mode 100644 src/model/unfollow-log-entry.ts
 delete mode 100644 src/utils.ts
 create mode 100644 src/utils/utils.ts

diff --git a/public/index.html b/public/index.html
index c7b0de9..7d62a1a 100644
--- a/public/index.html
+++ b/public/index.html
@@ -257,7 +257,7 @@
 <script>
 
   const scriptLabel = document.getElementById("code");
-  const instagramScript = "(()=>{\"use strict\";var e={99:(e,t,n)=>{n.d(t,{Z:()=>i});var r=n(81),o=n.n(r),l=n(645),a=n.n(l)()(o());a.push([e.id,\".main-layout,html .iu .app-header-content,html .iu{width:100%;max-width:1300px;margin:0 auto}.with-app-header,html .iu .results-container,html .iu .unfollow-log-container,html .iu .app-sidebar{padding-top:4rem !important}.flex,html .iu .tabs-container,html .iu .results-container .result-item,html .iu .app-sidebar,html .iu .app-header-content,html .iu .app-header{display:flex}.flex.align-center,html .iu .align-center.tabs-container,html .iu .results-container .result-item,html .iu .align-center.app-sidebar,html .iu .app-header-content,html .iu .align-center.app-header{align-items:center}.flex.justify-center,html .iu .justify-center.tabs-container,html .iu .results-container .justify-center.result-item,html .iu .justify-center.app-sidebar,html .iu .justify-center.app-header-content,html .iu .justify-center.app-header{justify-content:center}.flex.column,html .iu .column.tabs-container,html .iu .results-container .column.result-item,html .iu .app-sidebar,html .iu .column.app-header-content,html .iu .column.app-header{flex-direction:column}.grow,html .iu .tabs-container .tab,html .iu .results-container,html .iu .unfollow-log-container{flex:1}.w-100{width:100%}.p-small,html .iu .tabs-container .tab,html .iu .results-container .result-item .private-indicator{padding:.5rem}.p-medium,.controls,html .iu .badge,html .iu button.unfollow,html .iu .unfollow-log-container,html .iu .results-container .result-item,html .iu .results-container .alphabet-character,html .iu .app-sidebar{padding:1rem}.p-large,html .iu .tabs-container{padding:1.5rem}.p-xlarge{padding:2rem}.p-clear,html .iu button{padding:0}.m-small{margin:.5rem}.m-medium,html .iu .results-container .alphabet-character{margin:1rem}.m-large{margin:1.5rem}.m-xlarge{margin:2rem}.m-clear{margin:0}.fs-small{font-size:.5rem}.fs-medium,html .iu button.copy-list{font-size:1rem}.fs-large,.controls,html .iu button.unfollow,html .iu .app-sidebar{font-size:1.5rem}.fs-xlarge,html .iu .tabs-container .tab,html .iu .results-container .alphabet-character{font-size:2rem}.clr-inherit,html .iu button.unfollow{color:inherit}.clr-red{color:#ac2626}.clr-green{color:#56d756}.clr-cyan{color:aqua}.d-none,html .iu .results-container .result-item .avatar-container .avatar-icon-overlay-container{display:none}.t-center,html .iu .tabs-container .tab{text-align:center}.pos-relative,html .iu .results-container .result-item .avatar-container{position:relative}*{box-sizing:border-box}html{background-color:#111 !important}html body{margin:0;background-color:#111 !important}html .iu{font-family:system-ui}html .iu .overlay{color:#fff}html .iu .app-header{position:fixed;top:0;left:0;right:0;height:4rem;background-color:#222;z-index:1}html .iu .app-header-content{padding:0 1rem;justify-content:space-between}html .iu .app-header .logo{font-size:1.75rem;letter-spacing:2px;font-weight:lighter;cursor:pointer}html .iu .app-header .search-bar{color:#fff;border-radius:8px;padding:.5rem;font-weight:bold;font-family:inherit;background-color:rgba(0,0,0,0);border:1px solid #444}html .iu .app-sidebar{position:sticky;top:0;overflow:auto;height:100vh;min-width:300px;border-inline-end:1px solid #333}html .iu label{cursor:pointer}html .iu input[type=checkbox]{height:1.1rem;width:1.1rem}html .iu a{color:inherit;text-decoration-color:rgba(0,0,0,0);transition:text-decoration-color .1s;cursor:pointer}html .iu a:hover{text-decoration-color:inherit}html .iu button{background:none;border:none;cursor:pointer}html .iu button.copy-list{color:#fff}html .iu button.run-scan{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);font-size:2em;color:#fff;border:1px solid #fff;height:160px;width:160px;border-radius:50%}html .iu button.unfollow{margin-bottom:1.5rem;background-color:#ac2626 !important}html .iu .progressbar{width:100%;height:8px;position:absolute}html .iu .results-container .alphabet-character{border-bottom:1px solid #222}html .iu .results-container .result-item{border-radius:3px;cursor:pointer}html .iu .results-container .result-item .avatar-container:hover .avatar{filter:brightness(0.25) blur(3px)}html .iu .results-container .result-item .avatar-container:hover .avatar-icon-overlay-container{display:inline-block}html .iu .results-container .result-item .avatar-container .avatar{width:75px;border-radius:50%}html .iu .results-container .result-item .avatar-container .avatar-icon-overlay-container{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}html .iu .results-container .result-item .verified-badge{background-color:#49adf4;border-radius:50%;padding:.2rem .3rem;font-size:.45em;height:fit-content;transform:translateY(-15px)}html .iu .results-container .result-item .private-indicator{border:2px solid #51bb42;border-radius:25px;color:#51bb42;font-weight:500}html .iu .tabs-container .tab{color:gray;border-radius:8px;cursor:pointer}html .iu .tabs-container .tab-active{color:inherit;background-color:#222}html .iu .badge,html .iu button.unfollow{background:#222;border-radius:15px}.toast{position:fixed;display:flex;opacity:1;justify-content:space-between;align-items:start;width:100%;max-width:360px;padding:.8em;gap:.5em;bottom:1rem;right:1rem;color:#000;background-color:#fff;font-size:1.25em;border-radius:6px;z-index:2;box-shadow:0 0 10px 0 rgba(0,0,0,.2);animation:slide-out .5s ease-in-out}.toast>.toast__message{display:flex;margin:0}.toast>.toast__close-button{background:none;border:none;color:inherit;cursor:pointer;font-size:1em}.toast .show{animation:slide-in .5s ease-in-out;display:flex;opacity:1}.toast.success{background-color:#51bb42;color:#fff}.toast.error{background-color:#f4511e;color:#fff}.toast.info{background-color:#2196f3;color:#fff}.toast.warning{background-color:#fdd835;color:#000}.controls{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;padding:0}.controls .button-control{background-color:#222;border-radius:8px;padding:.5rem 1rem;color:#fff;cursor:pointer}.controls .button-pause{width:100%}\",\"\"]);const i=a},645:e=>{e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var n=\"\",r=void 0!==t[5];return t[4]&&(n+=\"@supports (\".concat(t[4],\") {\")),t[2]&&(n+=\"@media \".concat(t[2],\" {\")),r&&(n+=\"@layer\".concat(t[5].length>0?\" \".concat(t[5]):\"\",\" {\")),n+=e(t),r&&(n+=\"}\"),t[2]&&(n+=\"}\"),t[4]&&(n+=\"}\"),n})).join(\"\")},t.i=function(e,n,r,o,l){\"string\"==typeof e&&(e=[[null,e,void 0]]);var a={};if(r)for(var i=0;i<this.length;i++){var u=this[i][0];null!=u&&(a[u]=!0)}for(var c=0;c<e.length;c++){var s=[].concat(e[c]);r&&a[s[0]]||(void 0!==l&&(void 0===s[5]||(s[1]=\"@layer\".concat(s[5].length>0?\" \".concat(s[5]):\"\",\" {\").concat(s[1],\"}\")),s[5]=l),n&&(s[2]?(s[1]=\"@media \".concat(s[2],\" {\").concat(s[1],\"}\"),s[2]=n):s[2]=n),o&&(s[4]?(s[1]=\"@supports (\".concat(s[4],\") {\").concat(s[1],\"}\"),s[4]=o):s[4]=\"\".concat(o)),t.push(s))}},t}},81:e=>{e.exports=function(e){return e[1]}},776:(e,t,n)=>{n.r(t),n.d(t,{Children:()=>Ue,Component:()=>y,Fragment:()=>g,PureComponent:()=>Ne,StrictMode:()=>mt,Suspense:()=>De,SuspenseList:()=>Ae,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:()=>it,cloneElement:()=>ft,createContext:()=>z,createElement:()=>m,createFactory:()=>ct,createPortal:()=>ze,createRef:()=>b,default:()=>kt,findDOMNode:()=>dt,flushSync:()=>ht,forwardRef:()=>Re,hydrate:()=>Ke,isValidElement:()=>st,lazy:()=>je,memo:()=>Ce,render:()=>Je,startTransition:()=>vt,unmountComponentAtNode:()=>_t,unstable_batchedUpdates:()=>pt,useCallback:()=>se,useContext:()=>fe,useDebugValue:()=>_e,useDeferredValue:()=>bt,useEffect:()=>le,useErrorBoundary:()=>de,useId:()=>pe,useImperativeHandle:()=>ue,useInsertionEffect:()=>yt,useLayoutEffect:()=>ae,useMemo:()=>ce,useReducer:()=>oe,useRef:()=>ie,useState:()=>re,useSyncExternalStore:()=>wt,useTransition:()=>gt,version:()=>ut});var r,o,l,a,i,u,c,s,f={},_=[],d=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i;function p(e,t){for(var n in t)e[n]=t[n];return e}function h(e){var t=e.parentNode;t&&t.removeChild(e)}function m(e,t,n){var o,l,a,i={};for(a in t)\"key\"==a?o=t[a]:\"ref\"==a?l=t[a]:i[a]=t[a];if(arguments.length>2&&(i.children=arguments.length>3?r.call(arguments,2):n),\"function\"==typeof e&&null!=e.defaultProps)for(a in e.defaultProps)void 0===i[a]&&(i[a]=e.defaultProps[a]);return v(e,i,o,l,null)}function v(e,t,n,r,a){var i={type:e,props:t,key:n,ref:r,__k:null,__:null,__b:0,__e:null,__d:void 0,__c:null,__h:null,constructor:void 0,__v:null==a?++l:a};return null==a&&null!=o.vnode&&o.vnode(i),i}function b(){return{current:null}}function g(e){return e.children}function y(e,t){this.props=e,this.context=t}function w(e,t){if(null==t)return e.__?w(e.__,e.__.__k.indexOf(e)+1):null;for(var n;t<e.__k.length;t++)if(null!=(n=e.__k[t])&&null!=n.__e)return n.__e;return\"function\"==typeof e.type?w(e):null}function k(e){var t,n;if(null!=(e=e.__)&&null!=e.__c){for(e.__e=e.__c.base=null,t=0;t<e.__k.length;t++)if(null!=(n=e.__k[t])&&null!=n.__e){e.__e=e.__c.base=n.__e;break}return k(e)}}function E(e){(!e.__d&&(e.__d=!0)&&a.push(e)&&!x.__r++||i!==o.debounceRendering)&&((i=o.debounceRendering)||u)(x)}function x(){var e,t,n,r,o,l,i,u;for(a.sort(c);e=a.shift();)e.__d&&(t=a.length,r=void 0,o=void 0,i=(l=(n=e).__v).__e,(u=n.__P)&&(r=[],(o=p({},l)).__v=l.__v+1,L(u,l,o,n.__n,void 0!==u.ownerSVGElement,null!=l.__h?[i]:null,r,null==i?w(l):i,l.__h),F(r,l),l.__e!=i&&k(l)),a.length>t&&a.sort(c));x.__r=0}function N(e,t,n,r,o,l,a,i,u,c){var s,d,p,h,m,b,y,k=r&&r.__k||_,E=k.length;for(n.__k=[],s=0;s<t.length;s++)if(null!=(h=n.__k[s]=null==(h=t[s])||\"boolean\"==typeof h||\"function\"==typeof h?null:\"string\"==typeof h||\"number\"==typeof h||\"bigint\"==typeof h?v(null,h,null,null,h):Array.isArray(h)?v(g,{children:h},null,null,null):h.__b>0?v(h.type,h.props,h.key,h.ref?h.ref:null,h.__v):h)){if(h.__=n,h.__b=n.__b+1,null===(p=k[s])||p&&h.key==p.key&&h.type===p.type)k[s]=void 0;else for(d=0;d<E;d++){if((p=k[d])&&h.key==p.key&&h.type===p.type){k[d]=void 0;break}p=null}L(e,h,p=p||f,o,l,a,i,u,c),m=h.__e,(d=h.ref)&&p.ref!=d&&(y||(y=[]),p.ref&&y.push(p.ref,null,h),y.push(d,h.__c||m,h)),null!=m?(null==b&&(b=m),\"function\"==typeof h.type&&h.__k===p.__k?h.__d=u=C(h,u,e):u=T(e,h,p,k,m,u),\"function\"==typeof n.type&&(n.__d=u)):u&&p.__e==u&&u.parentNode!=e&&(u=w(p))}for(n.__e=b,s=E;s--;)null!=k[s]&&(\"function\"==typeof n.type&&null!=k[s].__e&&k[s].__e==n.__d&&(n.__d=R(r).nextSibling),j(k[s],k[s]));if(y)for(s=0;s<y.length;s++)H(y[s],y[++s],y[++s])}function C(e,t,n){for(var r,o=e.__k,l=0;o&&l<o.length;l++)(r=o[l])&&(r.__=e,t=\"function\"==typeof r.type?C(r,t,n):T(n,r,r,o,r.__e,t));return t}function S(e,t){return t=t||[],null==e||\"boolean\"==typeof e||(Array.isArray(e)?e.some((function(e){S(e,t)})):t.push(e)),t}function T(e,t,n,r,o,l){var a,i,u;if(void 0!==t.__d)a=t.__d,t.__d=void 0;else if(null==n||o!=l||null==o.parentNode)e:if(null==l||l.parentNode!==e)e.appendChild(o),a=null;else{for(i=l,u=0;(i=i.nextSibling)&&u<r.length;u+=1)if(i==o)break e;e.insertBefore(o,l),a=l}return void 0!==a?a:o.nextSibling}function R(e){var t,n,r;if(null==e.type||\"string\"==typeof e.type)return e.__e;if(e.__k)for(t=e.__k.length-1;t>=0;t--)if((n=e.__k[t])&&(r=R(n)))return r;return null}function P(e,t,n){\"-\"===t[0]?e.setProperty(t,null==n?\"\":n):e[t]=null==n?\"\":\"number\"!=typeof n||d.test(t)?n:n+\"px\"}function U(e,t,n,r,o){var l;e:if(\"style\"===t)if(\"string\"==typeof n)e.style.cssText=n;else{if(\"string\"==typeof r&&(e.style.cssText=r=\"\"),r)for(t in r)n&&t in n||P(e.style,t,\"\");if(n)for(t in n)r&&n[t]===r[t]||P(e.style,t,n[t])}else if(\"o\"===t[0]&&\"n\"===t[1])l=t!==(t=t.replace(/Capture$/,\"\")),t=t.toLowerCase()in e?t.toLowerCase().slice(2):t.slice(2),e.l||(e.l={}),e.l[t+l]=n,n?r||e.addEventListener(t,l?M:O,l):e.removeEventListener(t,l?M:O,l);else if(\"dangerouslySetInnerHTML\"!==t){if(o)t=t.replace(/xlink(H|:h)/,\"h\").replace(/sName$/,\"s\");else if(\"width\"!==t&&\"height\"!==t&&\"href\"!==t&&\"list\"!==t&&\"form\"!==t&&\"tabIndex\"!==t&&\"download\"!==t&&t in e)try{e[t]=null==n?\"\":n;break e}catch(e){}\"function\"==typeof n||(null==n||!1===n&&\"-\"!==t[4]?e.removeAttribute(t):e.setAttribute(t,n))}}function O(e){return this.l[e.type+!1](o.event?o.event(e):e)}function M(e){return this.l[e.type+!0](o.event?o.event(e):e)}function L(e,t,n,r,l,a,i,u,c){var s,f,_,d,h,m,v,b,w,k,E,x,C,S,T,R=t.type;if(void 0!==t.constructor)return null;null!=n.__h&&(c=n.__h,u=t.__e=n.__e,t.__h=null,a=[u]),(s=o.__b)&&s(t);try{e:if(\"function\"==typeof R){if(b=t.props,w=(s=R.contextType)&&r[s.__c],k=s?w?w.props.value:s.__:r,n.__c?v=(f=t.__c=n.__c).__=f.__E:(\"prototype\"in R&&R.prototype.render?t.__c=f=new R(b,k):(t.__c=f=new y(b,k),f.constructor=R,f.render=A),w&&w.sub(f),f.props=b,f.state||(f.state={}),f.context=k,f.__n=r,_=f.__d=!0,f.__h=[],f._sb=[]),null==f.__s&&(f.__s=f.state),null!=R.getDerivedStateFromProps&&(f.__s==f.state&&(f.__s=p({},f.__s)),p(f.__s,R.getDerivedStateFromProps(b,f.__s))),d=f.props,h=f.state,f.__v=t,_)null==R.getDerivedStateFromProps&&null!=f.componentWillMount&&f.componentWillMount(),null!=f.componentDidMount&&f.__h.push(f.componentDidMount);else{if(null==R.getDerivedStateFromProps&&b!==d&&null!=f.componentWillReceiveProps&&f.componentWillReceiveProps(b,k),!f.__e&&null!=f.shouldComponentUpdate&&!1===f.shouldComponentUpdate(b,f.__s,k)||t.__v===n.__v){for(t.__v!==n.__v&&(f.props=b,f.state=f.__s,f.__d=!1),f.__e=!1,t.__e=n.__e,t.__k=n.__k,t.__k.forEach((function(e){e&&(e.__=t)})),E=0;E<f._sb.length;E++)f.__h.push(f._sb[E]);f._sb=[],f.__h.length&&i.push(f);break e}null!=f.componentWillUpdate&&f.componentWillUpdate(b,f.__s,k),null!=f.componentDidUpdate&&f.__h.push((function(){f.componentDidUpdate(d,h,m)}))}if(f.context=k,f.props=b,f.__P=e,x=o.__r,C=0,\"prototype\"in R&&R.prototype.render){for(f.state=f.__s,f.__d=!1,x&&x(t),s=f.render(f.props,f.state,f.context),S=0;S<f._sb.length;S++)f.__h.push(f._sb[S]);f._sb=[]}else do{f.__d=!1,x&&x(t),s=f.render(f.props,f.state,f.context),f.state=f.__s}while(f.__d&&++C<25);f.state=f.__s,null!=f.getChildContext&&(r=p(p({},r),f.getChildContext())),_||null==f.getSnapshotBeforeUpdate||(m=f.getSnapshotBeforeUpdate(d,h)),T=null!=s&&s.type===g&&null==s.key?s.props.children:s,N(e,Array.isArray(T)?T:[T],t,n,r,l,a,i,u,c),f.base=t.__e,t.__h=null,f.__h.length&&i.push(f),v&&(f.__E=f.__=null),f.__e=!1}else null==a&&t.__v===n.__v?(t.__k=n.__k,t.__e=n.__e):t.__e=D(n.__e,t,n,r,l,a,i,c);(s=o.diffed)&&s(t)}catch(e){t.__v=null,(c||null!=a)&&(t.__e=u,t.__h=!!c,a[a.indexOf(u)]=null),o.__e(e,t,n)}}function F(e,t){o.__c&&o.__c(t,e),e.some((function(t){try{e=t.__h,t.__h=[],e.some((function(e){e.call(t)}))}catch(e){o.__e(e,t.__v)}}))}function D(e,t,n,o,l,a,i,u){var c,s,_,d=n.props,p=t.props,m=t.type,v=0;if(\"svg\"===m&&(l=!0),null!=a)for(;v<a.length;v++)if((c=a[v])&&\"setAttribute\"in c==!!m&&(m?c.localName===m:3===c.nodeType)){e=c,a[v]=null;break}if(null==e){if(null===m)return document.createTextNode(p);e=l?document.createElementNS(\"http://www.w3.org/2000/svg\",m):document.createElement(m,p.is&&p),a=null,u=!1}if(null===m)d===p||u&&e.data===p||(e.data=p);else{if(a=a&&r.call(e.childNodes),s=(d=n.props||f).dangerouslySetInnerHTML,_=p.dangerouslySetInnerHTML,!u){if(null!=a)for(d={},v=0;v<e.attributes.length;v++)d[e.attributes[v].name]=e.attributes[v].value;(_||s)&&(_&&(s&&_.__html==s.__html||_.__html===e.innerHTML)||(e.innerHTML=_&&_.__html||\"\"))}if(function(e,t,n,r,o){var l;for(l in n)\"children\"===l||\"key\"===l||l in t||U(e,l,null,n[l],r);for(l in t)o&&\"function\"!=typeof t[l]||\"children\"===l||\"key\"===l||\"value\"===l||\"checked\"===l||n[l]===t[l]||U(e,l,t[l],n[l],r)}(e,p,d,l,u),_)t.__k=[];else if(v=t.props.children,N(e,Array.isArray(v)?v:[v],t,n,o,l&&\"foreignObject\"!==m,a,i,a?a[0]:n.__k&&w(n,0),u),null!=a)for(v=a.length;v--;)null!=a[v]&&h(a[v]);u||(\"value\"in p&&void 0!==(v=p.value)&&(v!==e.value||\"progress\"===m&&!v||\"option\"===m&&v!==d.value)&&U(e,\"value\",v,d.value,!1),\"checked\"in p&&void 0!==(v=p.checked)&&v!==e.checked&&U(e,\"checked\",v,d.checked,!1))}return e}function H(e,t,n){try{\"function\"==typeof e?e(t):e.current=t}catch(e){o.__e(e,n)}}function j(e,t,n){var r,l;if(o.unmount&&o.unmount(e),(r=e.ref)&&(r.current&&r.current!==e.__e||H(r,null,t)),null!=(r=e.__c)){if(r.componentWillUnmount)try{r.componentWillUnmount()}catch(e){o.__e(e,t)}r.base=r.__P=null,e.__c=void 0}if(r=e.__k)for(l=0;l<r.length;l++)r[l]&&j(r[l],t,n||\"function\"!=typeof e.type);n||null==e.__e||h(e.__e),e.__=e.__e=e.__d=void 0}function A(e,t,n){return this.constructor(e,n)}function I(e,t,n){var l,a,i;o.__&&o.__(e,t),a=(l=\"function\"==typeof n)?null:n&&n.__k||t.__k,i=[],L(t,e=(!l&&n||t).__k=m(g,null,[e]),a||f,f,void 0!==t.ownerSVGElement,!l&&n?[n]:a?null:t.firstChild?r.call(t.childNodes):null,i,!l&&n?n:a?a.__e:t.firstChild,l),F(i,e)}function V(e,t){I(e,t,V)}function W(e,t,n){var o,l,a,i=p({},e.props);for(a in t)\"key\"==a?o=t[a]:\"ref\"==a?l=t[a]:i[a]=t[a];return arguments.length>2&&(i.children=arguments.length>3?r.call(arguments,2):n),v(e.type,i,o||e.key,l||e.ref,null)}function z(e,t){var n={__c:t=\"__cC\"+s++,__:e,Consumer:function(e,t){return e.children(t)},Provider:function(e){var n,r;return this.getChildContext||(n=[],(r={})[t]=this,this.getChildContext=function(){return r},this.shouldComponentUpdate=function(e){this.props.value!==e.value&&n.some((function(e){e.__e=!0,E(e)}))},this.sub=function(e){n.push(e);var t=e.componentWillUnmount;e.componentWillUnmount=function(){n.splice(n.indexOf(e),1),t&&t.call(e)}}),e.children}};return n.Provider.__=n.Consumer.contextType=n}r=_.slice,o={__e:function(e,t,n,r){for(var o,l,a;t=t.__;)if((o=t.__c)&&!o.__)try{if((l=o.constructor)&&null!=l.getDerivedStateFromError&&(o.setState(l.getDerivedStateFromError(e)),a=o.__d),null!=o.componentDidCatch&&(o.componentDidCatch(e,r||{}),a=o.__d),a)return o.__E=o}catch(t){e=t}throw e}},l=0,y.prototype.setState=function(e,t){var n;n=null!=this.__s&&this.__s!==this.state?this.__s:this.__s=p({},this.state),\"function\"==typeof e&&(e=e(p({},n),this.props)),e&&p(n,e),null!=e&&this.__v&&(t&&this._sb.push(t),E(this))},y.prototype.forceUpdate=function(e){this.__v&&(this.__e=!0,e&&this.__h.push(e),E(this))},y.prototype.render=g,a=[],u=\"function\"==typeof Promise?Promise.prototype.then.bind(Promise.resolve()):setTimeout,c=function(e,t){return e.__v.__b-t.__v.__b},x.__r=0,s=0;var B,q,G,$,Z=0,Y=[],J=[],K=o.__b,Q=o.__r,X=o.diffed,ee=o.__c,te=o.unmount;function ne(e,t){o.__h&&o.__h(q,e,Z||t),Z=0;var n=q.__H||(q.__H={__:[],__h:[]});return e>=n.__.length&&n.__.push({__V:J}),n.__[e]}function re(e){return Z=1,oe(we,e)}function oe(e,t,n){var r=ne(B++,2);if(r.t=e,!r.__c&&(r.__=[n?n(t):we(void 0,t),function(e){var t=r.__N?r.__N[0]:r.__[0],n=r.t(t,e);t!==n&&(r.__N=[n,r.__[1]],r.__c.setState({}))}],r.__c=q,!q.u)){var o=function(e,t,n){if(!r.__c.__H)return!0;var o=r.__c.__H.__.filter((function(e){return e.__c}));if(o.every((function(e){return!e.__N})))return!l||l.call(this,e,t,n);var a=!1;return o.forEach((function(e){if(e.__N){var t=e.__[0];e.__=e.__N,e.__N=void 0,t!==e.__[0]&&(a=!0)}})),!(!a&&r.__c.props===e)&&(!l||l.call(this,e,t,n))};q.u=!0;var l=q.shouldComponentUpdate,a=q.componentWillUpdate;q.componentWillUpdate=function(e,t,n){if(this.__e){var r=l;l=void 0,o(e,t,n),l=r}a&&a.call(this,e,t,n)},q.shouldComponentUpdate=o}return r.__N||r.__}function le(e,t){var n=ne(B++,3);!o.__s&&ye(n.__H,t)&&(n.__=e,n.i=t,q.__H.__h.push(n))}function ae(e,t){var n=ne(B++,4);!o.__s&&ye(n.__H,t)&&(n.__=e,n.i=t,q.__h.push(n))}function ie(e){return Z=5,ce((function(){return{current:e}}),[])}function ue(e,t,n){Z=6,ae((function(){return\"function\"==typeof e?(e(t()),function(){return e(null)}):e?(e.current=t(),function(){return e.current=null}):void 0}),null==n?n:n.concat(e))}function ce(e,t){var n=ne(B++,7);return ye(n.__H,t)?(n.__V=e(),n.i=t,n.__h=e,n.__V):n.__}function se(e,t){return Z=8,ce((function(){return e}),t)}function fe(e){var t=q.context[e.__c],n=ne(B++,9);return n.c=e,t?(null==n.__&&(n.__=!0,t.sub(q)),t.props.value):e.__}function _e(e,t){o.useDebugValue&&o.useDebugValue(t?t(e):e)}function de(e){var t=ne(B++,10),n=re();return t.__=e,q.componentDidCatch||(q.componentDidCatch=function(e,r){t.__&&t.__(e,r),n[1](e)}),[n[0],function(){n[1](void 0)}]}function pe(){var e=ne(B++,11);if(!e.__){for(var t=q.__v;null!==t&&!t.__m&&null!==t.__;)t=t.__;var n=t.__m||(t.__m=[0,0]);e.__=\"P\"+n[0]+\"-\"+n[1]++}return e.__}function he(){for(var e;e=Y.shift();)if(e.__P&&e.__H)try{e.__H.__h.forEach(be),e.__H.__h.forEach(ge),e.__H.__h=[]}catch(t){e.__H.__h=[],o.__e(t,e.__v)}}o.__b=function(e){q=null,K&&K(e)},o.__r=function(e){Q&&Q(e),B=0;var t=(q=e.__c).__H;t&&(G===q?(t.__h=[],q.__h=[],t.__.forEach((function(e){e.__N&&(e.__=e.__N),e.__V=J,e.__N=e.i=void 0}))):(t.__h.forEach(be),t.__h.forEach(ge),t.__h=[])),G=q},o.diffed=function(e){X&&X(e);var t=e.__c;t&&t.__H&&(t.__H.__h.length&&(1!==Y.push(t)&&$===o.requestAnimationFrame||(($=o.requestAnimationFrame)||ve)(he)),t.__H.__.forEach((function(e){e.i&&(e.__H=e.i),e.__V!==J&&(e.__=e.__V),e.i=void 0,e.__V=J}))),G=q=null},o.__c=function(e,t){t.some((function(e){try{e.__h.forEach(be),e.__h=e.__h.filter((function(e){return!e.__||ge(e)}))}catch(n){t.some((function(e){e.__h&&(e.__h=[])})),t=[],o.__e(n,e.__v)}})),ee&&ee(e,t)},o.unmount=function(e){te&&te(e);var t,n=e.__c;n&&n.__H&&(n.__H.__.forEach((function(e){try{be(e)}catch(e){t=e}})),n.__H=void 0,t&&o.__e(t,n.__v))};var me=\"function\"==typeof requestAnimationFrame;function ve(e){var t,n=function(){clearTimeout(r),me&&cancelAnimationFrame(t),setTimeout(e)},r=setTimeout(n,100);me&&(t=requestAnimationFrame(n))}function be(e){var t=q,n=e.__c;\"function\"==typeof n&&(e.__c=void 0,n()),q=t}function ge(e){var t=q;e.__c=e.__(),q=t}function ye(e,t){return!e||e.length!==t.length||t.some((function(t,n){return t!==e[n]}))}function we(e,t){return\"function\"==typeof t?t(e):t}function ke(e,t){for(var n in t)e[n]=t[n];return e}function Ee(e,t){for(var n in e)if(\"__source\"!==n&&!(n in t))return!0;for(var r in t)if(\"__source\"!==r&&e[r]!==t[r])return!0;return!1}function xe(e,t){return e===t&&(0!==e||1/e==1/t)||e!=e&&t!=t}function Ne(e){this.props=e}function Ce(e,t){function n(e){var n=this.props.ref,r=n==e.ref;return!r&&n&&(n.call?n(null):n.current=null),t?!t(this.props,e)||!r:Ee(this.props,e)}function r(t){return this.shouldComponentUpdate=n,m(e,t)}return r.displayName=\"Memo(\"+(e.displayName||e.name)+\")\",r.prototype.isReactComponent=!0,r.__f=!0,r}(Ne.prototype=new y).isPureReactComponent=!0,Ne.prototype.shouldComponentUpdate=function(e,t){return Ee(this.props,e)||Ee(this.state,t)};var Se=o.__b;o.__b=function(e){e.type&&e.type.__f&&e.ref&&(e.props.ref=e.ref,e.ref=null),Se&&Se(e)};var Te=\"undefined\"!=typeof Symbol&&Symbol.for&&Symbol.for(\"react.forward_ref\")||3911;function Re(e){function t(t){var n=ke({},t);return delete n.ref,e(n,t.ref||null)}return t.$$typeof=Te,t.render=t,t.prototype.isReactComponent=t.__f=!0,t.displayName=\"ForwardRef(\"+(e.displayName||e.name)+\")\",t}var Pe=function(e,t){return null==e?null:S(S(e).map(t))},Ue={map:Pe,forEach:Pe,count:function(e){return e?S(e).length:0},only:function(e){var t=S(e);if(1!==t.length)throw\"Children.only\";return t[0]},toArray:S},Oe=o.__e;o.__e=function(e,t,n,r){if(e.then)for(var o,l=t;l=l.__;)if((o=l.__c)&&o.__c)return null==t.__e&&(t.__e=n.__e,t.__k=n.__k),o.__c(e,t);Oe(e,t,n,r)};var Me=o.unmount;function Le(e,t,n){return e&&(e.__c&&e.__c.__H&&(e.__c.__H.__.forEach((function(e){\"function\"==typeof e.__c&&e.__c()})),e.__c.__H=null),null!=(e=ke({},e)).__c&&(e.__c.__P===n&&(e.__c.__P=t),e.__c=null),e.__k=e.__k&&e.__k.map((function(e){return Le(e,t,n)}))),e}function Fe(e,t,n){return e&&(e.__v=null,e.__k=e.__k&&e.__k.map((function(e){return Fe(e,t,n)})),e.__c&&e.__c.__P===t&&(e.__e&&n.insertBefore(e.__e,e.__d),e.__c.__e=!0,e.__c.__P=n)),e}function De(){this.__u=0,this.t=null,this.__b=null}function He(e){var t=e.__.__c;return t&&t.__a&&t.__a(e)}function je(e){var t,n,r;function o(o){if(t||(t=e()).then((function(e){n=e.default||e}),(function(e){r=e})),r)throw r;if(!n)throw t;return m(n,o)}return o.displayName=\"Lazy\",o.__f=!0,o}function Ae(){this.u=null,this.o=null}o.unmount=function(e){var t=e.__c;t&&t.__R&&t.__R(),t&&!0===e.__h&&(e.type=null),Me&&Me(e)},(De.prototype=new y).__c=function(e,t){var n=t.__c,r=this;null==r.t&&(r.t=[]),r.t.push(n);var o=He(r.__v),l=!1,a=function(){l||(l=!0,n.__R=null,o?o(i):i())};n.__R=a;var i=function(){if(!--r.__u){if(r.state.__a){var e=r.state.__a;r.__v.__k[0]=Fe(e,e.__c.__P,e.__c.__O)}var t;for(r.setState({__a:r.__b=null});t=r.t.pop();)t.forceUpdate()}},u=!0===t.__h;r.__u++||u||r.setState({__a:r.__b=r.__v.__k[0]}),e.then(a,a)},De.prototype.componentWillUnmount=function(){this.t=[]},De.prototype.render=function(e,t){if(this.__b){if(this.__v.__k){var n=document.createElement(\"div\"),r=this.__v.__k[0].__c;this.__v.__k[0]=Le(this.__b,n,r.__O=r.__P)}this.__b=null}var o=t.__a&&m(g,null,e.fallback);return o&&(o.__h=null),[m(g,null,t.__a?null:e.children),o]};var Ie=function(e,t,n){if(++n[1]===n[0]&&e.o.delete(t),e.props.revealOrder&&(\"t\"!==e.props.revealOrder[0]||!e.o.size))for(n=e.u;n;){for(;n.length>3;)n.pop()();if(n[1]<n[0])break;e.u=n=n[2]}};function Ve(e){return this.getChildContext=function(){return e.context},e.children}function We(e){var t=this,n=e.i;t.componentWillUnmount=function(){I(null,t.l),t.l=null,t.i=null},t.i&&t.i!==n&&t.componentWillUnmount(),e.__v?(t.l||(t.i=n,t.l={nodeType:1,parentNode:n,childNodes:[],appendChild:function(e){this.childNodes.push(e),t.i.appendChild(e)},insertBefore:function(e,n){this.childNodes.push(e),t.i.appendChild(e)},removeChild:function(e){this.childNodes.splice(this.childNodes.indexOf(e)>>>1,1),t.i.removeChild(e)}}),I(m(Ve,{context:t.context},e.__v),t.l)):t.l&&t.componentWillUnmount()}function ze(e,t){var n=m(We,{__v:e,i:t});return n.containerInfo=t,n}(Ae.prototype=new y).__a=function(e){var t=this,n=He(t.__v),r=t.o.get(e);return r[0]++,function(o){var l=function(){t.props.revealOrder?(r.push(o),Ie(t,e,r)):o()};n?n(l):l()}},Ae.prototype.render=function(e){this.u=null,this.o=new Map;var t=S(e.children);e.revealOrder&&\"b\"===e.revealOrder[0]&&t.reverse();for(var n=t.length;n--;)this.o.set(t[n],this.u=[1,0,this.u]);return e.children},Ae.prototype.componentDidUpdate=Ae.prototype.componentDidMount=function(){var e=this;this.o.forEach((function(t,n){Ie(e,n,t)}))};var Be=\"undefined\"!=typeof Symbol&&Symbol.for&&Symbol.for(\"react.element\")||60103,qe=/^(?:accent|alignment|arabic|baseline|cap|clip(?!PathU)|color|dominant|fill|flood|font|glyph(?!R)|horiz|image|letter|lighting|marker(?!H|W|U)|overline|paint|pointer|shape|stop|strikethrough|stroke|text(?!L)|transform|underline|unicode|units|v|vector|vert|word|writing|x(?!C))[A-Z]/,Ge=/^on(Ani|Tra|Tou|BeforeInp|Compo)/,$e=/[A-Z0-9]/g,Ze=\"undefined\"!=typeof document,Ye=function(e){return(\"undefined\"!=typeof Symbol&&\"symbol\"==typeof Symbol()?/fil|che|rad/:/fil|che|ra/).test(e)};function Je(e,t,n){return null==t.__k&&(t.textContent=\"\"),I(e,t),\"function\"==typeof n&&n(),e?e.__c:null}function Ke(e,t,n){return V(e,t),\"function\"==typeof n&&n(),e?e.__c:null}y.prototype.isReactComponent={},[\"componentWillMount\",\"componentWillReceiveProps\",\"componentWillUpdate\"].forEach((function(e){Object.defineProperty(y.prototype,e,{configurable:!0,get:function(){return this[\"UNSAFE_\"+e]},set:function(t){Object.defineProperty(this,e,{configurable:!0,writable:!0,value:t})}})}));var Qe=o.event;function Xe(){}function et(){return this.cancelBubble}function tt(){return this.defaultPrevented}o.event=function(e){return Qe&&(e=Qe(e)),e.persist=Xe,e.isPropagationStopped=et,e.isDefaultPrevented=tt,e.nativeEvent=e};var nt,rt={enumerable:!1,configurable:!0,get:function(){return this.class}},ot=o.vnode;o.vnode=function(e){\"string\"==typeof e.type&&function(e){var t=e.props,n=e.type,r={};for(var o in t){var l=t[o];if(!(\"value\"===o&&\"defaultValue\"in t&&null==l||Ze&&\"children\"===o&&\"noscript\"===n||\"class\"===o||\"className\"===o)){var a=o.toLowerCase();\"defaultValue\"===o&&\"value\"in t&&null==t.value?o=\"value\":\"download\"===o&&!0===l?l=\"\":\"ondoubleclick\"===a?o=\"ondblclick\":\"onchange\"!==a||\"input\"!==n&&\"textarea\"!==n||Ye(t.type)?\"onfocus\"===a?o=\"onfocusin\":\"onblur\"===a?o=\"onfocusout\":Ge.test(o)?o=a:-1===n.indexOf(\"-\")&&qe.test(o)?o=o.replace($e,\"-$&\").toLowerCase():null===l&&(l=void 0):a=o=\"oninput\",\"oninput\"===a&&r[o=a]&&(o=\"oninputCapture\"),r[o]=l}}\"select\"==n&&r.multiple&&Array.isArray(r.value)&&(r.value=S(t.children).forEach((function(e){e.props.selected=-1!=r.value.indexOf(e.props.value)}))),\"select\"==n&&null!=r.defaultValue&&(r.value=S(t.children).forEach((function(e){e.props.selected=r.multiple?-1!=r.defaultValue.indexOf(e.props.value):r.defaultValue==e.props.value}))),t.class&&!t.className?(r.class=t.class,Object.defineProperty(r,\"className\",rt)):(t.className&&!t.class||t.class&&t.className)&&(r.class=r.className=t.className),e.props=r}(e),e.$$typeof=Be,ot&&ot(e)};var lt=o.__r;o.__r=function(e){lt&&lt(e),nt=e.__c};var at=o.diffed;o.diffed=function(e){at&&at(e);var t=e.props,n=e.__e;null!=n&&\"textarea\"===e.type&&\"value\"in t&&t.value!==n.value&&(n.value=null==t.value?\"\":t.value),nt=null};var it={ReactCurrentDispatcher:{current:{readContext:function(e){return nt.__n[e.__c].props.value}}}},ut=\"17.0.2\";function ct(e){return m.bind(null,e)}function st(e){return!!e&&e.$$typeof===Be}function ft(e){return st(e)?W.apply(null,arguments):e}function _t(e){return!!e.__k&&(I(null,e),!0)}function dt(e){return e&&(e.base||1===e.nodeType&&e)||null}var pt=function(e,t){return e(t)},ht=function(e,t){return e(t)},mt=g;function vt(e){e()}function bt(e){return e}function gt(){return[!1,vt]}var yt=ae;function wt(e,t){var n=t(),r=re({h:{__:n,v:t}}),o=r[0].h,l=r[1];return ae((function(){o.__=n,o.v=t,xe(o.__,t())||l({h:o})}),[e,n,t]),le((function(){return xe(o.__,o.v())||l({h:o}),e((function(){xe(o.__,o.v())||l({h:o})}))}),[e]),n}var kt={useState:re,useId:pe,useReducer:oe,useEffect:le,useLayoutEffect:ae,useInsertionEffect:ae,useTransition:gt,useDeferredValue:bt,useSyncExternalStore:wt,startTransition:vt,useRef:ie,useImperativeHandle:ue,useMemo:ce,useCallback:se,useContext:fe,useDebugValue:_e,version:\"17.0.2\",Children:Ue,render:Je,hydrate:Ke,unmountComponentAtNode:_t,createPortal:ze,createElement:m,createContext:z,createFactory:ct,cloneElement:ft,createRef:b,Fragment:g,isValidElement:st,findDOMNode:dt,Component:y,PureComponent:Ne,memo:Ce,forwardRef:Re,flushSync:ht,unstable_batchedUpdates:pt,StrictMode:g,Suspense:De,SuspenseList:Ae,lazy:je,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:it}},273:(e,t,n)=>{n.r(t),n.d(t,{default:()=>v});var r=n(379),o=n.n(r),l=n(795),a=n.n(l),i=n(569),u=n.n(i),c=n(565),s=n.n(c),f=n(216),_=n.n(f),d=n(589),p=n.n(d),h=n(99),m={};m.styleTagTransform=p(),m.setAttributes=s(),m.insert=u().bind(null,\"head\"),m.domAPI=a(),m.insertStyleElement=_(),o()(h.Z,m);const v=h.Z&&h.Z.locals?h.Z.locals:void 0},379:e=>{var t=[];function n(e){for(var n=-1,r=0;r<t.length;r++)if(t[r].identifier===e){n=r;break}return n}function r(e,r){for(var l={},a=[],i=0;i<e.length;i++){var u=e[i],c=r.base?u[0]+r.base:u[0],s=l[c]||0,f=\"\".concat(c,\" \").concat(s);l[c]=s+1;var _=n(f),d={css:u[1],media:u[2],sourceMap:u[3],supports:u[4],layer:u[5]};if(-1!==_)t[_].references++,t[_].updater(d);else{var p=o(d,r);r.byIndex=i,t.splice(i,0,{identifier:f,updater:p,references:1})}a.push(f)}return a}function o(e,t){var n=t.domAPI(t);return n.update(e),function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap&&t.supports===e.supports&&t.layer===e.layer)return;n.update(e=t)}else n.remove()}}e.exports=function(e,o){var l=r(e=e||[],o=o||{});return function(e){e=e||[];for(var a=0;a<l.length;a++){var i=n(l[a]);t[i].references--}for(var u=r(e,o),c=0;c<l.length;c++){var s=n(l[c]);0===t[s].references&&(t[s].updater(),t.splice(s,1))}l=u}}},569:e=>{var t={};e.exports=function(e,n){var r=function(e){if(void 0===t[e]){var n=document.querySelector(e);if(window.HTMLIFrameElement&&n instanceof window.HTMLIFrameElement)try{n=n.contentDocument.head}catch(e){n=null}t[e]=n}return t[e]}(e);if(!r)throw new Error(\"Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.\");r.appendChild(n)}},216:e=>{e.exports=function(e){var t=document.createElement(\"style\");return e.setAttributes(t,e.attributes),e.insert(t,e.options),t}},565:(e,t,n)=>{e.exports=function(e){var t=n.nc;t&&e.setAttribute(\"nonce\",t)}},795:e=>{e.exports=function(e){if(\"undefined\"==typeof document)return{update:function(){},remove:function(){}};var t=e.insertStyleElement(e);return{update:function(n){!function(e,t,n){var r=\"\";n.supports&&(r+=\"@supports (\".concat(n.supports,\") {\")),n.media&&(r+=\"@media \".concat(n.media,\" {\"));var o=void 0!==n.layer;o&&(r+=\"@layer\".concat(n.layer.length>0?\" \".concat(n.layer):\"\",\" {\")),r+=n.css,o&&(r+=\"}\"),n.media&&(r+=\"}\"),n.supports&&(r+=\"}\");var l=n.sourceMap;l&&\"undefined\"!=typeof btoa&&(r+=\"\\n/*# sourceMappingURL=data:application/json;base64,\".concat(btoa(unescape(encodeURIComponent(JSON.stringify(l)))),\" */\")),t.styleTagTransform(r,e,t.options)}(t,e,n)},remove:function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(t)}}}},589:e=>{e.exports=function(e,t){if(t.styleSheet)t.styleSheet.cssText=e;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(e))}}},629:function(e,t,n){var r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,\"__esModule\",{value:!0}),t.UserCheckIcon=void 0;var o=r(n(776));t.UserCheckIcon=function(){return o.default.createElement(\"svg\",{width:\"35\",height:\"35\",viewBox:\"0 0 24 24\",fill:\"none\",stroke:\"currentColor\",strokeWidth:\"2\",strokeLinecap:\"round\",strokeLinejoin:\"round\"},o.default.createElement(\"path\",{d:\"M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2\"}),o.default.createElement(\"circle\",{cx:\"8.5\",cy:\"7\",r:\"4\"}),o.default.createElement(\"polyline\",{points:\"17 11 19 13 23 9\"}))}},460:function(e,t,n){var r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,\"__esModule\",{value:!0}),t.UserUncheckIcon=void 0;var o=r(n(776));t.UserUncheckIcon=function(){return o.default.createElement(\"svg\",{width:\"35\",height:\"35\",viewBox:\"0 0 24 24\",fill:\"none\",stroke:\"currentColor\",strokeWidth:\"2\",strokeLinecap:\"round\",strokeLinejoin:\"round\"},o.default.createElement(\"path\",{d:\"M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2\"}),o.default.createElement(\"circle\",{cx:\"8.5\",cy:\"7\",r:\"4\"}),o.default.createElement(\"line\",{x1:\"18\",y1:\"8\",x2:\"23\",y2:\"13\"}),o.default.createElement(\"line\",{x1:\"23\",y1:\"8\",x2:\"18\",y2:\"13\"}))}},36:function(e,t,n){var r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,\"__esModule\",{value:!0}),t.Toast=void 0;var o=r(n(776));t.Toast=function(e){var t=e.show,n=void 0!==t&&t,r=e.style,l=void 0===r?\"info\":r,a=e.message,i=e.onClose;return o.default.createElement(\"div\",{className:\"toast \".concat(n?\"show\":\"\",\" \").concat(l),role:\"alert\"},o.default.createElement(\"p\",{className:\"toast__message\"},a),o.default.createElement(\"button\",{className:\"toast__close-button\",onClick:i,title:\"close\"},\"×\"))}},299:function(e,t,n){var r=this&&this.__assign||function(){return r=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var o in t=arguments[n])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e},r.apply(this,arguments)},o=this&&this.__createBinding||(Object.create?function(e,t,n,r){void 0===r&&(r=n);var o=Object.getOwnPropertyDescriptor(t,n);o&&!(\"get\"in o?!t.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(e,r,o)}:function(e,t,n,r){void 0===r&&(r=n),e[r]=t[n]}),l=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,\"default\",{enumerable:!0,value:t})}:function(e,t){e.default=t}),a=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)\"default\"!==n&&Object.prototype.hasOwnProperty.call(e,n)&&o(t,e,n);return l(t,e),t},i=this&&this.__awaiter||function(e,t,n,r){return new(n||(n=Promise))((function(o,l){function a(e){try{u(r.next(e))}catch(e){l(e)}}function i(e){try{u(r.throw(e))}catch(e){l(e)}}function u(e){var t;e.done?o(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(a,i)}u((r=r.apply(e,t||[])).next())}))},u=this&&this.__generator||function(e,t){var n,r,o,l,a={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return l={next:i(0),throw:i(1),return:i(2)},\"function\"==typeof Symbol&&(l[Symbol.iterator]=function(){return this}),l;function i(i){return function(u){return function(i){if(n)throw new TypeError(\"Generator is already executing.\");for(;l&&(l=0,i[0]&&(a=0)),a;)try{if(n=1,r&&(o=2&i[0]?r.return:i[0]?r.throw||((o=r.return)&&o.call(r),0):r.next)&&!(o=o.call(r,i[1])).done)return o;switch(r=0,o&&(i=[2&i[0],o.value]),i[0]){case 0:case 1:o=i;break;case 4:return a.label++,{value:i[1],done:!1};case 5:a.label++,r=i[1],i=[0];continue;case 7:i=a.ops.pop(),a.trys.pop();continue;default:if(!((o=(o=a.trys).length>0&&o[o.length-1])||6!==i[0]&&2!==i[0])){a=0;continue}if(3===i[0]&&(!o||i[1]>o[0]&&i[1]<o[3])){a.label=i[1];break}if(6===i[0]&&a.label<o[1]){a.label=o[1],o=i;break}if(o&&a.label<o[2]){a.label=o[2],a.ops.push(i);break}o[2]&&a.ops.pop(),a.trys.pop();continue}i=t.call(e,a)}catch(e){i=[6,e],r=0}finally{n=o=0}if(5&i[0])throw i[1];return{value:i[0]?i[1]:void 0,done:!0}}([i,u])}}},c=this&&this.__spreadArray||function(e,t,n){if(n||2===arguments.length)for(var r,o=0,l=t.length;o<l;o++)!r&&o in t||(r||(r=Array.prototype.slice.call(t,0,o)),r[o]=t[o]);return e.concat(r||Array.prototype.slice.call(t))};Object.defineProperty(t,\"__esModule\",{value:!0});var s=a(n(776)),f=n(776);n(273);var _=n(593),d=n(36),p=n(629),h=n(460),m=\"iu_whitelisted-results\";function v(e){var t=Math.ceil(e.length/50);return t<1?1:t}function b(e,t){return c([],e,!0).sort((function(e,t){return e.username>t.username?1:-1})).splice(50*(t-1),50)}function g(e,t,n,r,o){for(var l=[],a=function(e){var a=void 0!==t.find((function(t){return t.id===e.id}));switch(n){case\"non_whitelisted\":if(a)return\"continue\";break;case\"whitelisted\":if(!a)return\"continue\";break;default:(0,_.assertUnreachable)(n)}if(!o.showPrivate&&e.is_private)return\"continue\";if(!o.showVerified&&e.is_verified)return\"continue\";if(!o.showFollowers&&e.follows_viewer)return\"continue\";if(!o.showNonFollowers&&!e.follows_viewer)return\"continue\";var i=e.username.toLowerCase().includes(r.toLowerCase())||e.full_name.toLowerCase().includes(r.toLowerCase());if(\"\"!==r&&!i)return\"continue\";l.push(e)},i=0,u=e;i<u.length;i++)a(u[i]);return l}var y=!1;function w(){y=!y}\"www.instagram.com\"!==location.hostname?alert(\"Can be used only on Instagram routes\"):(document.title=\"InstagramUnfollowers\",document.body.innerHTML=\"\",(0,f.render)(s.default.createElement((function(){var e,t=this,n=(0,s.useState)({status:\"initial\"}),o=n[0],l=n[1],a=(0,s.useState)({show:!1}),f=a[0],k=a[1];switch(o.status){case\"initial\":e=!1;break;case\"scanning\":case\"unfollowing\":e=o.percentage<100;break;default:(0,_.assertUnreachable)(o)}var E,x=function(e){var t;\"scanning\"===o.status&&(o.selectedResults.length>0&&!confirm(\"Changing filter options will clear selected users\")?l(r({},o)):l(r(r({},o),{selectedResults:[],filter:r(r({},o.filter),(t={},t[e.currentTarget.name]=e.currentTarget.checked,t))})))},N=function(e){var t;\"unfollowing\"===o.status&&l(r(r({},o),{filter:r(r({},o.filter),(t={},t[e.currentTarget.name]=e.currentTarget.checked,t))}))};switch((0,s.useEffect)((function(){var t=function(t){if(e)return(t=t||window.event)&&(t.returnValue=\"Changes you made may not be saved.\"),\"Changes you made may not be saved.\"};return window.addEventListener(\"beforeunload\",t),function(){return window.removeEventListener(\"beforeunload\",t)}}),[e,o]),(0,s.useEffect)((function(){i(t,void 0,void 0,(function(){var e,t,n,a,i,s,f,d;return u(this,(function(u){switch(u.label){case 0:if(\"scanning\"!==o.status)return[2];e=c([],o.results,!0),t=0,n=(0,_.urlGenerator)(),a=!0,i=0,s=-1,u.label=1;case 1:if(!a)return[3,12];f=void 0,u.label=2;case 2:return u.trys.push([2,4,,5]),[4,fetch(n).then((function(e){return e.json()}))];case 3:return f=u.sent().data.user.edge_follow,[3,5];case 4:return d=u.sent(),console.error(d),[3,1];case 5:-1===s&&(s=f.count),a=f.page_info.has_next_page,n=(0,_.urlGenerator)(f.page_info.end_cursor),i+=f.edges.length,f.edges.forEach((function(t){return e.push(t.node)})),l((function(t){return\"scanning\"!==t.status?t:r(r({},t),{percentage:Math.floor(i/s*100),results:e})})),u.label=6;case 6:return y?[4,(0,_.sleep)(1e3)]:[3,8];case 7:return u.sent(),console.info(\"Scan paused\"),[3,6];case 8:return[4,(0,_.sleep)(Math.floor(400*Math.random())+1e3)];case 9:return u.sent(),++t>6?(t=0,k({show:!0,text:\"Sleeping 10 secs to prevent getting temp blocked\"}),[4,(0,_.sleep)(1e4)]):[3,11];case 10:u.sent(),u.label=11;case 11:return k({show:!1}),[3,1];case 12:return k({show:!0,text:\"Scanning completed!\"}),[2]}}))}))}),[o.status]),(0,s.useEffect)((function(){i(t,void 0,void 0,(function(){var e,t,n,a,i,s;return u(this,(function(f){switch(f.label){case 0:if(\"unfollowing\"!==o.status)return[2];if(null===(e=(0,_.getCookie)(\"csrftoken\")))throw new Error(\"csrftoken cookie is null\");t=0,n=function(n){var a,i;return u(this,(function(u){switch(u.label){case 0:t+=1,a=Math.floor(t/o.selectedResults.length*100),u.label=1;case 1:return u.trys.push([1,3,,4]),[4,fetch((0,_.unfollowUserUrlGenerator)(n.id),{headers:{\"content-type\":\"application/x-www-form-urlencoded\",\"x-csrftoken\":e},method:\"POST\",mode:\"cors\",credentials:\"include\"})];case 2:return u.sent(),l((function(e){return\"unfollowing\"!==e.status?e:r(r({},e),{percentage:a,unfollowLog:c(c([],e.unfollowLog,!0),[{user:n,unfollowedSuccessfully:!0}],!1)})})),[3,4];case 3:return i=u.sent(),console.error(i),l((function(e){return\"unfollowing\"!==e.status?e:r(r({},e),{percentage:a,unfollowLog:c(c([],e.unfollowLog,!0),[{user:n,unfollowedSuccessfully:!1}],!1)})})),[3,4];case 4:return n===o.selectedResults[o.selectedResults.length-1]?[2,\"break\"]:[4,(0,_.sleep)(Math.floor(2e3*Math.random())+4e3)];case 5:return u.sent(),t%5!=0?[3,7]:(k({show:!0,text:\"Sleeping 5 minutes to prevent getting temp blocked\"}),[4,(0,_.sleep)(3e5)]);case 6:u.sent(),u.label=7;case 7:return k({show:!1}),[2]}}))},a=0,i=o.selectedResults,f.label=1;case 1:return a<i.length?(s=i[a],[5,n(s)]):[3,4];case 2:if(\"break\"===f.sent())return[3,4];f.label=3;case 3:return a++,[3,1];case 4:return[2]}}))}))}),[o.status]),o.status){case\"initial\":E=s.default.createElement(\"button\",{className:\"run-scan\",onClick:function(){return i(t,void 0,void 0,(function(){var e,t;return u(this,(function(n){return\"initial\"!==o.status||(e=localStorage.getItem(m),t=null===e?[]:JSON.parse(e),l({status:\"scanning\",page:1,searchTerm:\"\",currentTab:\"non_whitelisted\",percentage:0,results:[],selectedResults:[],whitelistedResults:t,filter:{showNonFollowers:!0,showFollowers:!1,showVerified:!0,showPrivate:!0}})),[2]}))}))}},\"RUN\");break;case\"scanning\":var C=g(o.results,o.whitelistedResults,o.currentTab,o.searchTerm,o.filter),S=\"\";E=s.default.createElement(\"section\",{className:\"flex\"},s.default.createElement(\"aside\",{className:\"app-sidebar\"},s.default.createElement(\"menu\",{className:\"flex column m-clear p-clear\"},s.default.createElement(\"p\",null,\"Filter\"),s.default.createElement(\"label\",{className:\"badge m-small\"},s.default.createElement(\"input\",{type:\"checkbox\",name:\"showNonFollowers\",checked:o.filter.showNonFollowers,onChange:x}),\" Non-Followers\"),s.default.createElement(\"label\",{className:\"badge m-small\"},s.default.createElement(\"input\",{type:\"checkbox\",name:\"showFollowers\",checked:o.filter.showFollowers,onChange:x}),\" Followers\"),s.default.createElement(\"label\",{className:\"badge m-small\"},s.default.createElement(\"input\",{type:\"checkbox\",name:\"showVerified\",checked:o.filter.showVerified,onChange:x}),\" Verified\"),s.default.createElement(\"label\",{className:\"badge m-small\"},s.default.createElement(\"input\",{type:\"checkbox\",name:\"showPrivate\",checked:o.filter.showPrivate,onChange:x}),\" Private\")),s.default.createElement(\"div\",{className:\"grow\"},s.default.createElement(\"p\",null,\"Displayed: \",C.length),s.default.createElement(\"p\",null,\"Total: \",o.results.length)),s.default.createElement(\"div\",{className:\"controls\"},s.default.createElement(\"button\",{className:\"button-control button-pause\",onClick:w},y?\"Resume\":\"Pause\")),s.default.createElement(\"div\",{className:\"grow t-center\"},s.default.createElement(\"p\",null,\"Pages\"),s.default.createElement(\"a\",{onClick:function(){o.page-1>0&&l(r(r({},o),{page:o.page-1}))},className:\"p-medium\"},\"❮\"),s.default.createElement(\"span\",null,o.page,\" / \",v(C)),s.default.createElement(\"a\",{onClick:function(){o.page<v(C)&&l(r(r({},o),{page:o.page+1}))},className:\"p-medium\"},\"❯\")),s.default.createElement(\"button\",{className:\"unfollow\",onClick:function(){confirm(\"Are you sure?\")&&l((function(e){return\"scanning\"!==e.status?e:0===e.selectedResults.length?(alert(\"Must select at least a single user to unfollow\"),e):r(r({},e),{status:\"unfollowing\",percentage:0,unfollowLog:[],filter:{showSucceeded:!0,showFailed:!0}})}))}},\"UNFOLLOW (\",o.selectedResults.length,\")\")),s.default.createElement(\"article\",{className:\"results-container\"},s.default.createElement(\"nav\",{className:\"tabs-container\"},s.default.createElement(\"div\",{className:\"tab \".concat(\"non_whitelisted\"===o.currentTab?\"tab-active\":\"\"),onClick:function(){\"non_whitelisted\"!==o.currentTab&&l(r(r({},o),{currentTab:\"non_whitelisted\",selectedResults:[]}))}},\"Non-Whitelisted\"),s.default.createElement(\"div\",{className:\"tab \".concat(\"whitelisted\"===o.currentTab?\"tab-active\":\"\"),onClick:function(){\"whitelisted\"!==o.currentTab&&l(r(r({},o),{currentTab:\"whitelisted\",selectedResults:[]}))}},\"Whitelisted\")),b(C,o.page).map((function(e){var t=e.username.substring(0,1).toUpperCase();return s.default.createElement(s.default.Fragment,null,t!==S&&function(e){return S=e,s.default.createElement(\"div\",{className:\"alphabet-character\"},S)}(t),s.default.createElement(\"label\",{className:\"result-item\"},s.default.createElement(\"div\",{className:\"flex grow align-center\"},s.default.createElement(\"div\",{className:\"avatar-container\",onClick:function(t){t.preventDefault(),t.stopPropagation();var n=[];switch(o.currentTab){case\"non_whitelisted\":n=c(c([],o.whitelistedResults,!0),[e],!1);break;case\"whitelisted\":n=o.whitelistedResults.filter((function(t){return t.id!==e.id}));break;default:(0,_.assertUnreachable)(o.currentTab)}localStorage.setItem(m,JSON.stringify(n)),l(r(r({},o),{whitelistedResults:n}))}},s.default.createElement(\"img\",{className:\"avatar\",alt:e.username,src:e.profile_pic_url}),s.default.createElement(\"span\",{className:\"avatar-icon-overlay-container\"},\"non_whitelisted\"===o.currentTab?s.default.createElement(p.UserCheckIcon,null):s.default.createElement(h.UserUncheckIcon,null))),s.default.createElement(\"div\",{className:\"flex column m-medium\"},s.default.createElement(\"a\",{className:\"fs-xlarge\",target:\"_blank\",href:\"/\".concat(e.username),rel:\"noreferrer\"},e.username),s.default.createElement(\"span\",{className:\"fs-medium\"},e.full_name)),e.is_verified&&s.default.createElement(\"div\",{className:\"verified-badge\"},\"✔\"),e.is_private&&s.default.createElement(\"div\",{className:\"flex justify-center w-100\"},s.default.createElement(\"span\",{className:\"private-indicator\"},\"Private\"))),s.default.createElement(\"input\",{className:\"account-checkbox\",type:\"checkbox\",checked:-1!==o.selectedResults.indexOf(e),onChange:function(t){return function(e,t){\"scanning\"===o.status&&l(r(r({},o),e?{selectedResults:c(c([],o.selectedResults,!0),[t],!1)}:{selectedResults:o.selectedResults.filter((function(e){return e.id!==t.id}))}))}(t.currentTarget.checked,e)}})))}))));break;case\"unfollowing\":E=s.default.createElement(\"section\",{className:\"flex\"},s.default.createElement(\"aside\",{className:\"app-sidebar\"},s.default.createElement(\"menu\",{className:\"flex column grow m-clear p-clear\"},s.default.createElement(\"p\",null,\"Filter\"),s.default.createElement(\"label\",{className:\"badge m-small\"},s.default.createElement(\"input\",{type:\"checkbox\",name:\"showSucceeded\",checked:o.filter.showSucceeded,onChange:N}),\" Succeeded\"),s.default.createElement(\"label\",{className:\"badge m-small\"},s.default.createElement(\"input\",{type:\"checkbox\",name:\"showFailed\",checked:o.filter.showFailed,onChange:N}),\" Failed\"))),s.default.createElement(\"article\",{className:\"unfollow-log-container\"},o.unfollowLog.length===o.selectedResults.length&&s.default.createElement(s.default.Fragment,null,s.default.createElement(\"hr\",null),s.default.createElement(\"div\",{className:\"fs-large p-medium clr-green\"},\"All DONE!\"),s.default.createElement(\"hr\",null)),function(e,t,n){for(var r=[],o=0,l=e;o<l.length;o++){var a=l[o];if((n.showSucceeded||!a.unfollowedSuccessfully)&&(n.showFailed||a.unfollowedSuccessfully)){var i=a.user.username.toLowerCase().includes(t.toLowerCase());(\"\"===t||i)&&r.push(a)}}return r}(o.unfollowLog,o.searchTerm,o.filter).map((function(e,t){return e.unfollowedSuccessfully?s.default.createElement(\"div\",{className:\"p-medium\",key:e.user.id},\"Unfollowed\",s.default.createElement(\"a\",{className:\"clr-inherit\",target:\"_blank\",href:\"../\".concat(e.user.username),rel:\"noreferrer\"},\" \",e.user.username),s.default.createElement(\"span\",{className:\"clr-cyan\"},\"  [\",t+1,\"/\",o.selectedResults.length,\"]\")):s.default.createElement(\"div\",{className:\"p-medium clr-red\",key:e.user.id},\"Failed to unfollow \",e.user.username,\" [\",t+1,\"/\",o.selectedResults.length,\"]\")}))));break;default:(0,_.assertUnreachable)(o)}return s.default.createElement(\"main\",{id:\"main\",role:\"main\",className:\"iu\"},s.default.createElement(\"section\",{className:\"overlay\"},s.default.createElement(\"header\",{className:\"app-header\"},e&&s.default.createElement(\"progress\",{className:\"progressbar\",value:\"initial\"!==o.status?o.percentage:0,max:\"100\"}),s.default.createElement(\"div\",{className:\"app-header-content\"},s.default.createElement(\"div\",{className:\"logo\",onClick:function(){if(!e)switch(o.status){case\"initial\":confirm(\"Go back to Instagram?\")&&location.reload();break;case\"scanning\":case\"unfollowing\":l({status:\"initial\"})}}},\"InstagramUnfollowers\"),s.default.createElement(\"button\",{className:\"copy-list\",onClick:function(){switch(o.status){case\"scanning\":return function(e){return i(this,void 0,void 0,(function(){var t,n;return u(this,(function(r){switch(r.label){case 0:return t=c([],e,!0).sort((function(e,t){return e.username>t.username?1:-1})),n=\"\",t.forEach((function(e){n+=e.username+\"\\n\"})),[4,navigator.clipboard.writeText(n)];case 1:return r.sent(),alert(\"List copied to clipboard!\"),[2]}}))}))}(g(o.results,o.whitelistedResults,o.currentTab,o.searchTerm,o.filter));case\"initial\":case\"unfollowing\":return;default:(0,_.assertUnreachable)(o)}},disabled:\"initial\"===o.status},\"COPY LIST\"),s.default.createElement(\"input\",{type:\"text\",className:\"search-bar\",placeholder:\"Search...\",disabled:\"initial\"===o.status,value:\"initial\"===o.status?\"\":o.searchTerm,onChange:function(e){switch(o.status){case\"initial\":return;case\"scanning\":case\"unfollowing\":return l(r(r({},o),{searchTerm:e.currentTarget.value}));default:(0,_.assertUnreachable)(o)}}}),\"scanning\"===o.status&&s.default.createElement(\"input\",{title:\"Select all on this page\",type:\"checkbox\",disabled:o.percentage<100&&!y,checked:o.selectedResults.length===g(o.results,o.whitelistedResults,o.currentTab,o.searchTerm,o.filter).length,className:\"toggle-all-checkbox\",onClick:function(e){\"scanning\"===o.status&&(e.currentTarget.checked?l(r(r({},o),{selectedResults:b(g(o.results,o.whitelistedResults,o.currentTab,o.searchTerm,o.filter),o.page)})):l(r(r({},o),{selectedResults:[]})))}}),\"scanning\"===o.status&&s.default.createElement(\"input\",{title:\"Select all\",type:\"checkbox\",disabled:o.percentage<100&&!y,checked:o.selectedResults.length===g(o.results,o.whitelistedResults,o.currentTab,o.searchTerm,o.filter).length,className:\"toggle-all-checkbox\",onClick:function(e){\"scanning\"===o.status&&(e.currentTarget.checked?l(r(r({},o),{selectedResults:g(o.results,o.whitelistedResults,o.currentTab,o.searchTerm,o.filter)})):l(r(r({},o),{selectedResults:[]})))}}))),E,f.show&&s.default.createElement(d.Toast,{show:f.show,message:f.text,onClose:function(){return k({show:!1})}})))}),null),document.body))},593:(e,t)=>{function n(e){var t=\"; \".concat(document.cookie).split(\"; \".concat(e,\"=\"));return 2!==t.length?null:t.pop().split(\";\").shift()}Object.defineProperty(t,\"__esModule\",{value:!0}),t.unfollowUserUrlGenerator=t.urlGenerator=t.getCookie=t.sleep=t.assertUnreachable=void 0,t.assertUnreachable=function(e){throw new Error(\"Statement should be unreachable\")},t.sleep=function(e){return new Promise((function(t){setTimeout(t,e)}))},t.getCookie=n,t.urlGenerator=function(e){var t=n(\"ds_user_id\");return void 0===e?'https://www.instagram.com/graphql/query/?query_hash=3dec7e2c57367ef3da3d987d89f9dbc8&variables={\"id\":\"'.concat(t,'\",\"include_reel\":\"true\",\"fetch_mutual\":\"false\",\"first\":\"24\"}'):'https://www.instagram.com/graphql/query/?query_hash=3dec7e2c57367ef3da3d987d89f9dbc8&variables={\"id\":\"'.concat(t,'\",\"include_reel\":\"true\",\"fetch_mutual\":\"false\",\"first\":\"24\",\"after\":\"').concat(e,'\"}')},t.unfollowUserUrlGenerator=function(e){return\"https://www.instagram.com/web/friendships/\".concat(e,\"/unfollow/\")}}},t={};function n(r){var o=t[r];if(void 0!==o)return o.exports;var l=t[r]={id:r,exports:{}};return e[r].call(l.exports,l,l.exports,n),l.exports}n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.r=e=>{\"undefined\"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:\"Module\"}),Object.defineProperty(e,\"__esModule\",{value:!0})},n.nc=void 0,n(299)})();";//__END_OF_SCRIPT__
+  const instagramScript = "(()=>{\"use strict\";var e={99:(e,t,n)=>{n.d(t,{Z:()=>i});var r=n(81),a=n.n(r),l=n(645),o=n.n(l)()(a());o.push([e.id,\".main-layout,html .iu .app-header-content,html .iu{width:100%;max-width:1300px;margin:0 auto}.with-app-header,html .iu .results-container,html .iu .unfollow-log-container,html .iu .app-sidebar{padding-top:4rem !important}.flex,html .iu .tabs-container,html .iu .results-container .result-item,html .iu .app-sidebar,html .iu .app-header-content,html .iu .app-header{display:flex}.flex.align-center,html .iu .align-center.tabs-container,html .iu .results-container .result-item,html .iu .align-center.app-sidebar,html .iu .app-header-content,html .iu .align-center.app-header{align-items:center}.flex.justify-center,html .iu .justify-center.tabs-container,html .iu .results-container .justify-center.result-item,html .iu .justify-center.app-sidebar,html .iu .justify-center.app-header-content,html .iu .justify-center.app-header{justify-content:center}.flex.column,html .iu .column.tabs-container,html .iu .results-container .column.result-item,html .iu .app-sidebar,html .iu .column.app-header-content,html .iu .column.app-header{flex-direction:column}.grow,html .iu .tabs-container .tab,html .iu .results-container,html .iu .unfollow-log-container{flex:1}.w-100{width:100%}.p-small,html .iu .tabs-container .tab,html .iu .results-container .result-item .private-indicator{padding:.5rem}.p-medium,.controls,html .iu .badge,html .iu button.unfollow,html .iu .unfollow-log-container,html .iu .results-container .result-item,html .iu .results-container .alphabet-character,html .iu .app-sidebar{padding:1rem}.p-large,html .iu .tabs-container{padding:1.5rem}.p-xlarge{padding:2rem}.p-clear,html .iu button{padding:0}.m-small{margin:.5rem}.m-medium,html .iu .results-container .alphabet-character{margin:1rem}.m-large{margin:1.5rem}.m-xlarge{margin:2rem}.m-clear{margin:0}.fs-small{font-size:.5rem}.fs-medium,html .iu button.copy-list{font-size:1rem}.fs-large,.controls,html .iu button.unfollow,html .iu .app-sidebar{font-size:1.5rem}.fs-xlarge,html .iu .tabs-container .tab,html .iu .results-container .alphabet-character{font-size:2rem}.clr-inherit,html .iu button.unfollow{color:inherit}.clr-red{color:#ac2626}.clr-green{color:#56d756}.clr-cyan{color:aqua}.d-none,html .iu .results-container .result-item .avatar-container .avatar-icon-overlay-container{display:none}.t-center,html .iu .tabs-container .tab{text-align:center}.pos-relative,html .iu .results-container .result-item .avatar-container{position:relative}.setting-menu{position:absolute;top:4rem;left:50%;transform:translateX(-50%);width:750px;height:290px;background:#313131;border:1px solid #ccc;padding:1rem;z-index:100;display:flex;flex-direction:column}.setting-menu h3{text-align:center}.setting-menu .btn-container{display:flex;justify-content:center;gap:10px;position:absolute;bottom:10px;left:37%}.minimun-width{min-width:350px}.margin-between-input-and-label{margin-left:10px}.btn{border:1px solid #ccc !important;border-radius:5px !important;padding:5px 10px !important;cursor:pointer !important;color:#fff !important;background-color:gray !important;width:65px !important;height:30px !important}.btn:hover{background-color:#313131 !important}.backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.66);z-index:100}.row{display:flex;flex-wrap:wrap;margin:0 -5px}.setting-menu label,h3{font-weight:bold;color:#fff}.setting-menu input{width:60px;margin-left:10px}.warning{color:#ff0}.warning b{color:red}*{box-sizing:border-box}html{background-color:#111 !important}html body{margin:0;background-color:#111 !important}html .iu{font-family:system-ui}html .iu .overlay{color:#fff}html .iu .app-header{position:fixed;top:0;left:0;right:0;height:4rem;background-color:#222;z-index:1}html .iu .app-header-content{padding:0 1rem;justify-content:space-between}html .iu .app-header .logo{font-size:1.75rem;letter-spacing:2px;font-weight:lighter;cursor:pointer}html .iu .app-header .search-bar{color:#fff;border-radius:8px;padding:.5rem;font-weight:bold;font-family:inherit;background-color:rgba(0,0,0,0);border:1px solid #444}html .iu .app-sidebar{position:sticky;top:0;overflow:auto;height:100vh;min-width:300px;border-inline-end:1px solid #333}html .iu label{cursor:pointer}html .iu input[type=checkbox]{height:1.1rem;width:1.1rem}html .iu a{color:inherit;text-decoration-color:rgba(0,0,0,0);transition:text-decoration-color .1s;cursor:pointer}html .iu a:hover{text-decoration-color:inherit}html .iu button{background:none;border:none;cursor:pointer}html .iu button.copy-list{color:#fff}html .iu button.run-scan{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);font-size:2em;color:#fff;border:1px solid #fff;height:160px;width:160px;border-radius:50%}html .iu button.unfollow{margin-bottom:1.5rem;background-color:#ac2626 !important}html .iu .progressbar{width:100%;height:8px;position:absolute}html .iu .results-container .alphabet-character{border-bottom:1px solid #222}html .iu .results-container .result-item{border-radius:3px;cursor:pointer}html .iu .results-container .result-item .avatar-container:hover .avatar{filter:brightness(0.25) blur(3px)}html .iu .results-container .result-item .avatar-container:hover .avatar-icon-overlay-container{display:inline-block}html .iu .results-container .result-item .avatar-container .avatar{width:75px;border-radius:50%}html .iu .results-container .result-item .avatar-container .avatar-icon-overlay-container{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}html .iu .results-container .result-item .verified-badge{background-color:#49adf4;border-radius:50%;padding:.2rem .3rem;font-size:.45em;height:fit-content;transform:translateY(-15px)}html .iu .results-container .result-item .private-indicator{border:2px solid #51bb42;border-radius:25px;color:#51bb42;font-weight:500}html .iu .tabs-container .tab{color:gray;border-radius:8px;cursor:pointer}html .iu .tabs-container .tab-active{color:inherit;background-color:#222}html .iu .badge,html .iu button.unfollow{background:#222;border-radius:15px}.toast{position:fixed;display:flex;opacity:1;justify-content:space-between;align-items:start;width:100%;max-width:360px;padding:.8em;gap:.5em;bottom:1rem;right:1rem;color:#000;background-color:#fff;font-size:1.25em;border-radius:6px;z-index:2;box-shadow:0 0 10px 0 rgba(0,0,0,.2);animation:slide-out .5s ease-in-out}.toast>.toast__message{display:flex;margin:0}.toast>.toast__close-button{background:none;border:none;color:inherit;cursor:pointer;font-size:1em}.toast .show{animation:slide-in .5s ease-in-out;display:flex;opacity:1}.toast.success{background-color:#51bb42;color:#fff}.toast.error{background-color:#f4511e;color:#fff}.toast.info{background-color:#2196f3;color:#fff}.toast.warning{background-color:#fdd835;color:#000}.controls{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;padding:0}.controls .button-control{background-color:#222;border-radius:8px;padding:.5rem 1rem;color:#fff;cursor:pointer}.controls .button-pause{width:100%}\",\"\"]);const i=o},645:e=>{e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var n=\"\",r=void 0!==t[5];return t[4]&&(n+=\"@supports (\".concat(t[4],\") {\")),t[2]&&(n+=\"@media \".concat(t[2],\" {\")),r&&(n+=\"@layer\".concat(t[5].length>0?\" \".concat(t[5]):\"\",\" {\")),n+=e(t),r&&(n+=\"}\"),t[2]&&(n+=\"}\"),t[4]&&(n+=\"}\"),n})).join(\"\")},t.i=function(e,n,r,a,l){\"string\"==typeof e&&(e=[[null,e,void 0]]);var o={};if(r)for(var i=0;i<this.length;i++){var u=this[i][0];null!=u&&(o[u]=!0)}for(var c=0;c<e.length;c++){var s=[].concat(e[c]);r&&o[s[0]]||(void 0!==l&&(void 0===s[5]||(s[1]=\"@layer\".concat(s[5].length>0?\" \".concat(s[5]):\"\",\" {\").concat(s[1],\"}\")),s[5]=l),n&&(s[2]?(s[1]=\"@media \".concat(s[2],\" {\").concat(s[1],\"}\"),s[2]=n):s[2]=n),a&&(s[4]?(s[1]=\"@supports (\".concat(s[4],\") {\").concat(s[1],\"}\"),s[4]=a):s[4]=\"\".concat(a)),t.push(s))}},t}},81:e=>{e.exports=function(e){return e[1]}},776:(e,t,n)=>{n.r(t),n.d(t,{Children:()=>Fe,Component:()=>y,Fragment:()=>b,PureComponent:()=>Se,StrictMode:()=>mt,Suspense:()=>Me,SuspenseList:()=>We,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:()=>it,cloneElement:()=>ft,createContext:()=>B,createElement:()=>m,createFactory:()=>ct,createPortal:()=>Be,createRef:()=>g,default:()=>Et,findDOMNode:()=>dt,flushSync:()=>ht,forwardRef:()=>Ue,hydrate:()=>Je,isValidElement:()=>st,lazy:()=>De,memo:()=>Ce,render:()=>Ke,startTransition:()=>vt,unmountComponentAtNode:()=>_t,unstable_batchedUpdates:()=>pt,useCallback:()=>se,useContext:()=>fe,useDebugValue:()=>_e,useDeferredValue:()=>gt,useEffect:()=>le,useErrorBoundary:()=>de,useId:()=>pe,useImperativeHandle:()=>ue,useInsertionEffect:()=>yt,useLayoutEffect:()=>oe,useMemo:()=>ce,useReducer:()=>ae,useRef:()=>ie,useState:()=>re,useSyncExternalStore:()=>wt,useTransition:()=>bt,version:()=>ut});var r,a,l,o,i,u,c,s,f={},_=[],d=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i;function p(e,t){for(var n in t)e[n]=t[n];return e}function h(e){var t=e.parentNode;t&&t.removeChild(e)}function m(e,t,n){var a,l,o,i={};for(o in t)\"key\"==o?a=t[o]:\"ref\"==o?l=t[o]:i[o]=t[o];if(arguments.length>2&&(i.children=arguments.length>3?r.call(arguments,2):n),\"function\"==typeof e&&null!=e.defaultProps)for(o in e.defaultProps)void 0===i[o]&&(i[o]=e.defaultProps[o]);return v(e,i,a,l,null)}function v(e,t,n,r,o){var i={type:e,props:t,key:n,ref:r,__k:null,__:null,__b:0,__e:null,__d:void 0,__c:null,__h:null,constructor:void 0,__v:null==o?++l:o};return null==o&&null!=a.vnode&&a.vnode(i),i}function g(){return{current:null}}function b(e){return e.children}function y(e,t){this.props=e,this.context=t}function w(e,t){if(null==t)return e.__?w(e.__,e.__.__k.indexOf(e)+1):null;for(var n;t<e.__k.length;t++)if(null!=(n=e.__k[t])&&null!=n.__e)return n.__e;return\"function\"==typeof e.type?w(e):null}function E(e){var t,n;if(null!=(e=e.__)&&null!=e.__c){for(e.__e=e.__c.base=null,t=0;t<e.__k.length;t++)if(null!=(n=e.__k[t])&&null!=n.__e){e.__e=e.__c.base=n.__e;break}return E(e)}}function k(e){(!e.__d&&(e.__d=!0)&&o.push(e)&&!x.__r++||i!==a.debounceRendering)&&((i=a.debounceRendering)||u)(x)}function x(){var e,t,n,r,a,l,i,u;for(o.sort(c);e=o.shift();)e.__d&&(t=o.length,r=void 0,a=void 0,i=(l=(n=e).__v).__e,(u=n.__P)&&(r=[],(a=p({},l)).__v=l.__v+1,R(u,l,a,n.__n,void 0!==u.ownerSVGElement,null!=l.__h?[i]:null,r,null==i?w(l):i,l.__h),L(r,l),l.__e!=i&&E(l)),o.length>t&&o.sort(c));x.__r=0}function S(e,t,n,r,a,l,o,i,u,c){var s,d,p,h,m,g,y,E=r&&r.__k||_,k=E.length;for(n.__k=[],s=0;s<t.length;s++)if(null!=(h=n.__k[s]=null==(h=t[s])||\"boolean\"==typeof h||\"function\"==typeof h?null:\"string\"==typeof h||\"number\"==typeof h||\"bigint\"==typeof h?v(null,h,null,null,h):Array.isArray(h)?v(b,{children:h},null,null,null):h.__b>0?v(h.type,h.props,h.key,h.ref?h.ref:null,h.__v):h)){if(h.__=n,h.__b=n.__b+1,null===(p=E[s])||p&&h.key==p.key&&h.type===p.type)E[s]=void 0;else for(d=0;d<k;d++){if((p=E[d])&&h.key==p.key&&h.type===p.type){E[d]=void 0;break}p=null}R(e,h,p=p||f,a,l,o,i,u,c),m=h.__e,(d=h.ref)&&p.ref!=d&&(y||(y=[]),p.ref&&y.push(p.ref,null,h),y.push(d,h.__c||m,h)),null!=m?(null==g&&(g=m),\"function\"==typeof h.type&&h.__k===p.__k?h.__d=u=C(h,u,e):u=N(e,h,p,E,m,u),\"function\"==typeof n.type&&(n.__d=u)):u&&p.__e==u&&u.parentNode!=e&&(u=w(p))}for(n.__e=g,s=k;s--;)null!=E[s]&&(\"function\"==typeof n.type&&null!=E[s].__e&&E[s].__e==n.__d&&(n.__d=U(r).nextSibling),D(E[s],E[s]));if(y)for(s=0;s<y.length;s++)I(y[s],y[++s],y[++s])}function C(e,t,n){for(var r,a=e.__k,l=0;a&&l<a.length;l++)(r=a[l])&&(r.__=e,t=\"function\"==typeof r.type?C(r,t,n):N(n,r,r,a,r.__e,t));return t}function T(e,t){return t=t||[],null==e||\"boolean\"==typeof e||(Array.isArray(e)?e.some((function(e){T(e,t)})):t.push(e)),t}function N(e,t,n,r,a,l){var o,i,u;if(void 0!==t.__d)o=t.__d,t.__d=void 0;else if(null==n||a!=l||null==a.parentNode)e:if(null==l||l.parentNode!==e)e.appendChild(a),o=null;else{for(i=l,u=0;(i=i.nextSibling)&&u<r.length;u+=1)if(i==a)break e;e.insertBefore(a,l),o=l}return void 0!==o?o:a.nextSibling}function U(e){var t,n,r;if(null==e.type||\"string\"==typeof e.type)return e.__e;if(e.__k)for(t=e.__k.length-1;t>=0;t--)if((n=e.__k[t])&&(r=U(n)))return r;return null}function O(e,t,n){\"-\"===t[0]?e.setProperty(t,null==n?\"\":n):e[t]=null==n?\"\":\"number\"!=typeof n||d.test(t)?n:n+\"px\"}function F(e,t,n,r,a){var l;e:if(\"style\"===t)if(\"string\"==typeof n)e.style.cssText=n;else{if(\"string\"==typeof r&&(e.style.cssText=r=\"\"),r)for(t in r)n&&t in n||O(e.style,t,\"\");if(n)for(t in n)r&&n[t]===r[t]||O(e.style,t,n[t])}else if(\"o\"===t[0]&&\"n\"===t[1])l=t!==(t=t.replace(/Capture$/,\"\")),t=t.toLowerCase()in e?t.toLowerCase().slice(2):t.slice(2),e.l||(e.l={}),e.l[t+l]=n,n?r||e.addEventListener(t,l?A:P,l):e.removeEventListener(t,l?A:P,l);else if(\"dangerouslySetInnerHTML\"!==t){if(a)t=t.replace(/xlink(H|:h)/,\"h\").replace(/sName$/,\"s\");else if(\"width\"!==t&&\"height\"!==t&&\"href\"!==t&&\"list\"!==t&&\"form\"!==t&&\"tabIndex\"!==t&&\"download\"!==t&&t in e)try{e[t]=null==n?\"\":n;break e}catch(e){}\"function\"==typeof n||(null==n||!1===n&&\"-\"!==t[4]?e.removeAttribute(t):e.setAttribute(t,n))}}function P(e){return this.l[e.type+!1](a.event?a.event(e):e)}function A(e){return this.l[e.type+!0](a.event?a.event(e):e)}function R(e,t,n,r,l,o,i,u,c){var s,f,_,d,h,m,v,g,w,E,k,x,C,T,N,U=t.type;if(void 0!==t.constructor)return null;null!=n.__h&&(c=n.__h,u=t.__e=n.__e,t.__h=null,o=[u]),(s=a.__b)&&s(t);try{e:if(\"function\"==typeof U){if(g=t.props,w=(s=U.contextType)&&r[s.__c],E=s?w?w.props.value:s.__:r,n.__c?v=(f=t.__c=n.__c).__=f.__E:(\"prototype\"in U&&U.prototype.render?t.__c=f=new U(g,E):(t.__c=f=new y(g,E),f.constructor=U,f.render=W),w&&w.sub(f),f.props=g,f.state||(f.state={}),f.context=E,f.__n=r,_=f.__d=!0,f.__h=[],f._sb=[]),null==f.__s&&(f.__s=f.state),null!=U.getDerivedStateFromProps&&(f.__s==f.state&&(f.__s=p({},f.__s)),p(f.__s,U.getDerivedStateFromProps(g,f.__s))),d=f.props,h=f.state,f.__v=t,_)null==U.getDerivedStateFromProps&&null!=f.componentWillMount&&f.componentWillMount(),null!=f.componentDidMount&&f.__h.push(f.componentDidMount);else{if(null==U.getDerivedStateFromProps&&g!==d&&null!=f.componentWillReceiveProps&&f.componentWillReceiveProps(g,E),!f.__e&&null!=f.shouldComponentUpdate&&!1===f.shouldComponentUpdate(g,f.__s,E)||t.__v===n.__v){for(t.__v!==n.__v&&(f.props=g,f.state=f.__s,f.__d=!1),f.__e=!1,t.__e=n.__e,t.__k=n.__k,t.__k.forEach((function(e){e&&(e.__=t)})),k=0;k<f._sb.length;k++)f.__h.push(f._sb[k]);f._sb=[],f.__h.length&&i.push(f);break e}null!=f.componentWillUpdate&&f.componentWillUpdate(g,f.__s,E),null!=f.componentDidUpdate&&f.__h.push((function(){f.componentDidUpdate(d,h,m)}))}if(f.context=E,f.props=g,f.__P=e,x=a.__r,C=0,\"prototype\"in U&&U.prototype.render){for(f.state=f.__s,f.__d=!1,x&&x(t),s=f.render(f.props,f.state,f.context),T=0;T<f._sb.length;T++)f.__h.push(f._sb[T]);f._sb=[]}else do{f.__d=!1,x&&x(t),s=f.render(f.props,f.state,f.context),f.state=f.__s}while(f.__d&&++C<25);f.state=f.__s,null!=f.getChildContext&&(r=p(p({},r),f.getChildContext())),_||null==f.getSnapshotBeforeUpdate||(m=f.getSnapshotBeforeUpdate(d,h)),N=null!=s&&s.type===b&&null==s.key?s.props.children:s,S(e,Array.isArray(N)?N:[N],t,n,r,l,o,i,u,c),f.base=t.__e,t.__h=null,f.__h.length&&i.push(f),v&&(f.__E=f.__=null),f.__e=!1}else null==o&&t.__v===n.__v?(t.__k=n.__k,t.__e=n.__e):t.__e=M(n.__e,t,n,r,l,o,i,c);(s=a.diffed)&&s(t)}catch(e){t.__v=null,(c||null!=o)&&(t.__e=u,t.__h=!!c,o[o.indexOf(u)]=null),a.__e(e,t,n)}}function L(e,t){a.__c&&a.__c(t,e),e.some((function(t){try{e=t.__h,t.__h=[],e.some((function(e){e.call(t)}))}catch(e){a.__e(e,t.__v)}}))}function M(e,t,n,a,l,o,i,u){var c,s,_,d=n.props,p=t.props,m=t.type,v=0;if(\"svg\"===m&&(l=!0),null!=o)for(;v<o.length;v++)if((c=o[v])&&\"setAttribute\"in c==!!m&&(m?c.localName===m:3===c.nodeType)){e=c,o[v]=null;break}if(null==e){if(null===m)return document.createTextNode(p);e=l?document.createElementNS(\"http://www.w3.org/2000/svg\",m):document.createElement(m,p.is&&p),o=null,u=!1}if(null===m)d===p||u&&e.data===p||(e.data=p);else{if(o=o&&r.call(e.childNodes),s=(d=n.props||f).dangerouslySetInnerHTML,_=p.dangerouslySetInnerHTML,!u){if(null!=o)for(d={},v=0;v<e.attributes.length;v++)d[e.attributes[v].name]=e.attributes[v].value;(_||s)&&(_&&(s&&_.__html==s.__html||_.__html===e.innerHTML)||(e.innerHTML=_&&_.__html||\"\"))}if(function(e,t,n,r,a){var l;for(l in n)\"children\"===l||\"key\"===l||l in t||F(e,l,null,n[l],r);for(l in t)a&&\"function\"!=typeof t[l]||\"children\"===l||\"key\"===l||\"value\"===l||\"checked\"===l||n[l]===t[l]||F(e,l,t[l],n[l],r)}(e,p,d,l,u),_)t.__k=[];else if(v=t.props.children,S(e,Array.isArray(v)?v:[v],t,n,a,l&&\"foreignObject\"!==m,o,i,o?o[0]:n.__k&&w(n,0),u),null!=o)for(v=o.length;v--;)null!=o[v]&&h(o[v]);u||(\"value\"in p&&void 0!==(v=p.value)&&(v!==e.value||\"progress\"===m&&!v||\"option\"===m&&v!==d.value)&&F(e,\"value\",v,d.value,!1),\"checked\"in p&&void 0!==(v=p.checked)&&v!==e.checked&&F(e,\"checked\",v,d.checked,!1))}return e}function I(e,t,n){try{\"function\"==typeof e?e(t):e.current=t}catch(e){a.__e(e,n)}}function D(e,t,n){var r,l;if(a.unmount&&a.unmount(e),(r=e.ref)&&(r.current&&r.current!==e.__e||I(r,null,t)),null!=(r=e.__c)){if(r.componentWillUnmount)try{r.componentWillUnmount()}catch(e){a.__e(e,t)}r.base=r.__P=null,e.__c=void 0}if(r=e.__k)for(l=0;l<r.length;l++)r[l]&&D(r[l],t,n||\"function\"!=typeof e.type);n||null==e.__e||h(e.__e),e.__=e.__e=e.__d=void 0}function W(e,t,n){return this.constructor(e,n)}function j(e,t,n){var l,o,i;a.__&&a.__(e,t),o=(l=\"function\"==typeof n)?null:n&&n.__k||t.__k,i=[],R(t,e=(!l&&n||t).__k=m(b,null,[e]),o||f,f,void 0!==t.ownerSVGElement,!l&&n?[n]:o?null:t.firstChild?r.call(t.childNodes):null,i,!l&&n?n:o?o.__e:t.firstChild,l),L(i,e)}function H(e,t){j(e,t,H)}function V(e,t,n){var a,l,o,i=p({},e.props);for(o in t)\"key\"==o?a=t[o]:\"ref\"==o?l=t[o]:i[o]=t[o];return arguments.length>2&&(i.children=arguments.length>3?r.call(arguments,2):n),v(e.type,i,a||e.key,l||e.ref,null)}function B(e,t){var n={__c:t=\"__cC\"+s++,__:e,Consumer:function(e,t){return e.children(t)},Provider:function(e){var n,r;return this.getChildContext||(n=[],(r={})[t]=this,this.getChildContext=function(){return r},this.shouldComponentUpdate=function(e){this.props.value!==e.value&&n.some((function(e){e.__e=!0,k(e)}))},this.sub=function(e){n.push(e);var t=e.componentWillUnmount;e.componentWillUnmount=function(){n.splice(n.indexOf(e),1),t&&t.call(e)}}),e.children}};return n.Provider.__=n.Consumer.contextType=n}r=_.slice,a={__e:function(e,t,n,r){for(var a,l,o;t=t.__;)if((a=t.__c)&&!a.__)try{if((l=a.constructor)&&null!=l.getDerivedStateFromError&&(a.setState(l.getDerivedStateFromError(e)),o=a.__d),null!=a.componentDidCatch&&(a.componentDidCatch(e,r||{}),o=a.__d),o)return a.__E=a}catch(t){e=t}throw e}},l=0,y.prototype.setState=function(e,t){var n;n=null!=this.__s&&this.__s!==this.state?this.__s:this.__s=p({},this.state),\"function\"==typeof e&&(e=e(p({},n),this.props)),e&&p(n,e),null!=e&&this.__v&&(t&&this._sb.push(t),k(this))},y.prototype.forceUpdate=function(e){this.__v&&(this.__e=!0,e&&this.__h.push(e),k(this))},y.prototype.render=b,o=[],u=\"function\"==typeof Promise?Promise.prototype.then.bind(Promise.resolve()):setTimeout,c=function(e,t){return e.__v.__b-t.__v.__b},x.__r=0,s=0;var G,z,Y,q,$=0,Z=[],K=[],J=a.__b,X=a.__r,Q=a.diffed,ee=a.__c,te=a.unmount;function ne(e,t){a.__h&&a.__h(z,e,$||t),$=0;var n=z.__H||(z.__H={__:[],__h:[]});return e>=n.__.length&&n.__.push({__V:K}),n.__[e]}function re(e){return $=1,ae(we,e)}function ae(e,t,n){var r=ne(G++,2);if(r.t=e,!r.__c&&(r.__=[n?n(t):we(void 0,t),function(e){var t=r.__N?r.__N[0]:r.__[0],n=r.t(t,e);t!==n&&(r.__N=[n,r.__[1]],r.__c.setState({}))}],r.__c=z,!z.u)){var a=function(e,t,n){if(!r.__c.__H)return!0;var a=r.__c.__H.__.filter((function(e){return e.__c}));if(a.every((function(e){return!e.__N})))return!l||l.call(this,e,t,n);var o=!1;return a.forEach((function(e){if(e.__N){var t=e.__[0];e.__=e.__N,e.__N=void 0,t!==e.__[0]&&(o=!0)}})),!(!o&&r.__c.props===e)&&(!l||l.call(this,e,t,n))};z.u=!0;var l=z.shouldComponentUpdate,o=z.componentWillUpdate;z.componentWillUpdate=function(e,t,n){if(this.__e){var r=l;l=void 0,a(e,t,n),l=r}o&&o.call(this,e,t,n)},z.shouldComponentUpdate=a}return r.__N||r.__}function le(e,t){var n=ne(G++,3);!a.__s&&ye(n.__H,t)&&(n.__=e,n.i=t,z.__H.__h.push(n))}function oe(e,t){var n=ne(G++,4);!a.__s&&ye(n.__H,t)&&(n.__=e,n.i=t,z.__h.push(n))}function ie(e){return $=5,ce((function(){return{current:e}}),[])}function ue(e,t,n){$=6,oe((function(){return\"function\"==typeof e?(e(t()),function(){return e(null)}):e?(e.current=t(),function(){return e.current=null}):void 0}),null==n?n:n.concat(e))}function ce(e,t){var n=ne(G++,7);return ye(n.__H,t)?(n.__V=e(),n.i=t,n.__h=e,n.__V):n.__}function se(e,t){return $=8,ce((function(){return e}),t)}function fe(e){var t=z.context[e.__c],n=ne(G++,9);return n.c=e,t?(null==n.__&&(n.__=!0,t.sub(z)),t.props.value):e.__}function _e(e,t){a.useDebugValue&&a.useDebugValue(t?t(e):e)}function de(e){var t=ne(G++,10),n=re();return t.__=e,z.componentDidCatch||(z.componentDidCatch=function(e,r){t.__&&t.__(e,r),n[1](e)}),[n[0],function(){n[1](void 0)}]}function pe(){var e=ne(G++,11);if(!e.__){for(var t=z.__v;null!==t&&!t.__m&&null!==t.__;)t=t.__;var n=t.__m||(t.__m=[0,0]);e.__=\"P\"+n[0]+\"-\"+n[1]++}return e.__}function he(){for(var e;e=Z.shift();)if(e.__P&&e.__H)try{e.__H.__h.forEach(ge),e.__H.__h.forEach(be),e.__H.__h=[]}catch(t){e.__H.__h=[],a.__e(t,e.__v)}}a.__b=function(e){z=null,J&&J(e)},a.__r=function(e){X&&X(e),G=0;var t=(z=e.__c).__H;t&&(Y===z?(t.__h=[],z.__h=[],t.__.forEach((function(e){e.__N&&(e.__=e.__N),e.__V=K,e.__N=e.i=void 0}))):(t.__h.forEach(ge),t.__h.forEach(be),t.__h=[])),Y=z},a.diffed=function(e){Q&&Q(e);var t=e.__c;t&&t.__H&&(t.__H.__h.length&&(1!==Z.push(t)&&q===a.requestAnimationFrame||((q=a.requestAnimationFrame)||ve)(he)),t.__H.__.forEach((function(e){e.i&&(e.__H=e.i),e.__V!==K&&(e.__=e.__V),e.i=void 0,e.__V=K}))),Y=z=null},a.__c=function(e,t){t.some((function(e){try{e.__h.forEach(ge),e.__h=e.__h.filter((function(e){return!e.__||be(e)}))}catch(n){t.some((function(e){e.__h&&(e.__h=[])})),t=[],a.__e(n,e.__v)}})),ee&&ee(e,t)},a.unmount=function(e){te&&te(e);var t,n=e.__c;n&&n.__H&&(n.__H.__.forEach((function(e){try{ge(e)}catch(e){t=e}})),n.__H=void 0,t&&a.__e(t,n.__v))};var me=\"function\"==typeof requestAnimationFrame;function ve(e){var t,n=function(){clearTimeout(r),me&&cancelAnimationFrame(t),setTimeout(e)},r=setTimeout(n,100);me&&(t=requestAnimationFrame(n))}function ge(e){var t=z,n=e.__c;\"function\"==typeof n&&(e.__c=void 0,n()),z=t}function be(e){var t=z;e.__c=e.__(),z=t}function ye(e,t){return!e||e.length!==t.length||t.some((function(t,n){return t!==e[n]}))}function we(e,t){return\"function\"==typeof t?t(e):t}function Ee(e,t){for(var n in t)e[n]=t[n];return e}function ke(e,t){for(var n in e)if(\"__source\"!==n&&!(n in t))return!0;for(var r in t)if(\"__source\"!==r&&e[r]!==t[r])return!0;return!1}function xe(e,t){return e===t&&(0!==e||1/e==1/t)||e!=e&&t!=t}function Se(e){this.props=e}function Ce(e,t){function n(e){var n=this.props.ref,r=n==e.ref;return!r&&n&&(n.call?n(null):n.current=null),t?!t(this.props,e)||!r:ke(this.props,e)}function r(t){return this.shouldComponentUpdate=n,m(e,t)}return r.displayName=\"Memo(\"+(e.displayName||e.name)+\")\",r.prototype.isReactComponent=!0,r.__f=!0,r}(Se.prototype=new y).isPureReactComponent=!0,Se.prototype.shouldComponentUpdate=function(e,t){return ke(this.props,e)||ke(this.state,t)};var Te=a.__b;a.__b=function(e){e.type&&e.type.__f&&e.ref&&(e.props.ref=e.ref,e.ref=null),Te&&Te(e)};var Ne=\"undefined\"!=typeof Symbol&&Symbol.for&&Symbol.for(\"react.forward_ref\")||3911;function Ue(e){function t(t){var n=Ee({},t);return delete n.ref,e(n,t.ref||null)}return t.$$typeof=Ne,t.render=t,t.prototype.isReactComponent=t.__f=!0,t.displayName=\"ForwardRef(\"+(e.displayName||e.name)+\")\",t}var Oe=function(e,t){return null==e?null:T(T(e).map(t))},Fe={map:Oe,forEach:Oe,count:function(e){return e?T(e).length:0},only:function(e){var t=T(e);if(1!==t.length)throw\"Children.only\";return t[0]},toArray:T},Pe=a.__e;a.__e=function(e,t,n,r){if(e.then)for(var a,l=t;l=l.__;)if((a=l.__c)&&a.__c)return null==t.__e&&(t.__e=n.__e,t.__k=n.__k),a.__c(e,t);Pe(e,t,n,r)};var Ae=a.unmount;function Re(e,t,n){return e&&(e.__c&&e.__c.__H&&(e.__c.__H.__.forEach((function(e){\"function\"==typeof e.__c&&e.__c()})),e.__c.__H=null),null!=(e=Ee({},e)).__c&&(e.__c.__P===n&&(e.__c.__P=t),e.__c=null),e.__k=e.__k&&e.__k.map((function(e){return Re(e,t,n)}))),e}function Le(e,t,n){return e&&(e.__v=null,e.__k=e.__k&&e.__k.map((function(e){return Le(e,t,n)})),e.__c&&e.__c.__P===t&&(e.__e&&n.insertBefore(e.__e,e.__d),e.__c.__e=!0,e.__c.__P=n)),e}function Me(){this.__u=0,this.t=null,this.__b=null}function Ie(e){var t=e.__.__c;return t&&t.__a&&t.__a(e)}function De(e){var t,n,r;function a(a){if(t||(t=e()).then((function(e){n=e.default||e}),(function(e){r=e})),r)throw r;if(!n)throw t;return m(n,a)}return a.displayName=\"Lazy\",a.__f=!0,a}function We(){this.u=null,this.o=null}a.unmount=function(e){var t=e.__c;t&&t.__R&&t.__R(),t&&!0===e.__h&&(e.type=null),Ae&&Ae(e)},(Me.prototype=new y).__c=function(e,t){var n=t.__c,r=this;null==r.t&&(r.t=[]),r.t.push(n);var a=Ie(r.__v),l=!1,o=function(){l||(l=!0,n.__R=null,a?a(i):i())};n.__R=o;var i=function(){if(!--r.__u){if(r.state.__a){var e=r.state.__a;r.__v.__k[0]=Le(e,e.__c.__P,e.__c.__O)}var t;for(r.setState({__a:r.__b=null});t=r.t.pop();)t.forceUpdate()}},u=!0===t.__h;r.__u++||u||r.setState({__a:r.__b=r.__v.__k[0]}),e.then(o,o)},Me.prototype.componentWillUnmount=function(){this.t=[]},Me.prototype.render=function(e,t){if(this.__b){if(this.__v.__k){var n=document.createElement(\"div\"),r=this.__v.__k[0].__c;this.__v.__k[0]=Re(this.__b,n,r.__O=r.__P)}this.__b=null}var a=t.__a&&m(b,null,e.fallback);return a&&(a.__h=null),[m(b,null,t.__a?null:e.children),a]};var je=function(e,t,n){if(++n[1]===n[0]&&e.o.delete(t),e.props.revealOrder&&(\"t\"!==e.props.revealOrder[0]||!e.o.size))for(n=e.u;n;){for(;n.length>3;)n.pop()();if(n[1]<n[0])break;e.u=n=n[2]}};function He(e){return this.getChildContext=function(){return e.context},e.children}function Ve(e){var t=this,n=e.i;t.componentWillUnmount=function(){j(null,t.l),t.l=null,t.i=null},t.i&&t.i!==n&&t.componentWillUnmount(),e.__v?(t.l||(t.i=n,t.l={nodeType:1,parentNode:n,childNodes:[],appendChild:function(e){this.childNodes.push(e),t.i.appendChild(e)},insertBefore:function(e,n){this.childNodes.push(e),t.i.appendChild(e)},removeChild:function(e){this.childNodes.splice(this.childNodes.indexOf(e)>>>1,1),t.i.removeChild(e)}}),j(m(He,{context:t.context},e.__v),t.l)):t.l&&t.componentWillUnmount()}function Be(e,t){var n=m(Ve,{__v:e,i:t});return n.containerInfo=t,n}(We.prototype=new y).__a=function(e){var t=this,n=Ie(t.__v),r=t.o.get(e);return r[0]++,function(a){var l=function(){t.props.revealOrder?(r.push(a),je(t,e,r)):a()};n?n(l):l()}},We.prototype.render=function(e){this.u=null,this.o=new Map;var t=T(e.children);e.revealOrder&&\"b\"===e.revealOrder[0]&&t.reverse();for(var n=t.length;n--;)this.o.set(t[n],this.u=[1,0,this.u]);return e.children},We.prototype.componentDidUpdate=We.prototype.componentDidMount=function(){var e=this;this.o.forEach((function(t,n){je(e,n,t)}))};var Ge=\"undefined\"!=typeof Symbol&&Symbol.for&&Symbol.for(\"react.element\")||60103,ze=/^(?:accent|alignment|arabic|baseline|cap|clip(?!PathU)|color|dominant|fill|flood|font|glyph(?!R)|horiz|image|letter|lighting|marker(?!H|W|U)|overline|paint|pointer|shape|stop|strikethrough|stroke|text(?!L)|transform|underline|unicode|units|v|vector|vert|word|writing|x(?!C))[A-Z]/,Ye=/^on(Ani|Tra|Tou|BeforeInp|Compo)/,qe=/[A-Z0-9]/g,$e=\"undefined\"!=typeof document,Ze=function(e){return(\"undefined\"!=typeof Symbol&&\"symbol\"==typeof Symbol()?/fil|che|rad/:/fil|che|ra/).test(e)};function Ke(e,t,n){return null==t.__k&&(t.textContent=\"\"),j(e,t),\"function\"==typeof n&&n(),e?e.__c:null}function Je(e,t,n){return H(e,t),\"function\"==typeof n&&n(),e?e.__c:null}y.prototype.isReactComponent={},[\"componentWillMount\",\"componentWillReceiveProps\",\"componentWillUpdate\"].forEach((function(e){Object.defineProperty(y.prototype,e,{configurable:!0,get:function(){return this[\"UNSAFE_\"+e]},set:function(t){Object.defineProperty(this,e,{configurable:!0,writable:!0,value:t})}})}));var Xe=a.event;function Qe(){}function et(){return this.cancelBubble}function tt(){return this.defaultPrevented}a.event=function(e){return Xe&&(e=Xe(e)),e.persist=Qe,e.isPropagationStopped=et,e.isDefaultPrevented=tt,e.nativeEvent=e};var nt,rt={enumerable:!1,configurable:!0,get:function(){return this.class}},at=a.vnode;a.vnode=function(e){\"string\"==typeof e.type&&function(e){var t=e.props,n=e.type,r={};for(var a in t){var l=t[a];if(!(\"value\"===a&&\"defaultValue\"in t&&null==l||$e&&\"children\"===a&&\"noscript\"===n||\"class\"===a||\"className\"===a)){var o=a.toLowerCase();\"defaultValue\"===a&&\"value\"in t&&null==t.value?a=\"value\":\"download\"===a&&!0===l?l=\"\":\"ondoubleclick\"===o?a=\"ondblclick\":\"onchange\"!==o||\"input\"!==n&&\"textarea\"!==n||Ze(t.type)?\"onfocus\"===o?a=\"onfocusin\":\"onblur\"===o?a=\"onfocusout\":Ye.test(a)?a=o:-1===n.indexOf(\"-\")&&ze.test(a)?a=a.replace(qe,\"-$&\").toLowerCase():null===l&&(l=void 0):o=a=\"oninput\",\"oninput\"===o&&r[a=o]&&(a=\"oninputCapture\"),r[a]=l}}\"select\"==n&&r.multiple&&Array.isArray(r.value)&&(r.value=T(t.children).forEach((function(e){e.props.selected=-1!=r.value.indexOf(e.props.value)}))),\"select\"==n&&null!=r.defaultValue&&(r.value=T(t.children).forEach((function(e){e.props.selected=r.multiple?-1!=r.defaultValue.indexOf(e.props.value):r.defaultValue==e.props.value}))),t.class&&!t.className?(r.class=t.class,Object.defineProperty(r,\"className\",rt)):(t.className&&!t.class||t.class&&t.className)&&(r.class=r.className=t.className),e.props=r}(e),e.$$typeof=Ge,at&&at(e)};var lt=a.__r;a.__r=function(e){lt&&lt(e),nt=e.__c};var ot=a.diffed;a.diffed=function(e){ot&&ot(e);var t=e.props,n=e.__e;null!=n&&\"textarea\"===e.type&&\"value\"in t&&t.value!==n.value&&(n.value=null==t.value?\"\":t.value),nt=null};var it={ReactCurrentDispatcher:{current:{readContext:function(e){return nt.__n[e.__c].props.value}}}},ut=\"17.0.2\";function ct(e){return m.bind(null,e)}function st(e){return!!e&&e.$$typeof===Ge}function ft(e){return st(e)?V.apply(null,arguments):e}function _t(e){return!!e.__k&&(j(null,e),!0)}function dt(e){return e&&(e.base||1===e.nodeType&&e)||null}var pt=function(e,t){return e(t)},ht=function(e,t){return e(t)},mt=b;function vt(e){e()}function gt(e){return e}function bt(){return[!1,vt]}var yt=oe;function wt(e,t){var n=t(),r=re({h:{__:n,v:t}}),a=r[0].h,l=r[1];return oe((function(){a.__=n,a.v=t,xe(a.__,t())||l({h:a})}),[e,n,t]),le((function(){return xe(a.__,a.v())||l({h:a}),e((function(){xe(a.__,a.v())||l({h:a})}))}),[e]),n}var Et={useState:re,useId:pe,useReducer:ae,useEffect:le,useLayoutEffect:oe,useInsertionEffect:oe,useTransition:bt,useDeferredValue:gt,useSyncExternalStore:wt,startTransition:vt,useRef:ie,useImperativeHandle:ue,useMemo:ce,useCallback:se,useContext:fe,useDebugValue:_e,version:\"17.0.2\",Children:Fe,render:Ke,hydrate:Je,unmountComponentAtNode:_t,createPortal:Be,createElement:m,createContext:B,createFactory:ct,cloneElement:ft,createRef:g,Fragment:b,isValidElement:st,findDOMNode:dt,Component:y,PureComponent:Se,memo:Ce,forwardRef:Ue,flushSync:ht,unstable_batchedUpdates:pt,StrictMode:b,Suspense:Me,SuspenseList:We,lazy:De,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:it}},273:(e,t,n)=>{n.r(t),n.d(t,{default:()=>v});var r=n(379),a=n.n(r),l=n(795),o=n.n(l),i=n(569),u=n.n(i),c=n(565),s=n.n(c),f=n(216),_=n.n(f),d=n(589),p=n.n(d),h=n(99),m={};m.styleTagTransform=p(),m.setAttributes=s(),m.insert=u().bind(null,\"head\"),m.domAPI=o(),m.insertStyleElement=_(),a()(h.Z,m);const v=h.Z&&h.Z.locals?h.Z.locals:void 0},379:e=>{var t=[];function n(e){for(var n=-1,r=0;r<t.length;r++)if(t[r].identifier===e){n=r;break}return n}function r(e,r){for(var l={},o=[],i=0;i<e.length;i++){var u=e[i],c=r.base?u[0]+r.base:u[0],s=l[c]||0,f=\"\".concat(c,\" \").concat(s);l[c]=s+1;var _=n(f),d={css:u[1],media:u[2],sourceMap:u[3],supports:u[4],layer:u[5]};if(-1!==_)t[_].references++,t[_].updater(d);else{var p=a(d,r);r.byIndex=i,t.splice(i,0,{identifier:f,updater:p,references:1})}o.push(f)}return o}function a(e,t){var n=t.domAPI(t);return n.update(e),function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap&&t.supports===e.supports&&t.layer===e.layer)return;n.update(e=t)}else n.remove()}}e.exports=function(e,a){var l=r(e=e||[],a=a||{});return function(e){e=e||[];for(var o=0;o<l.length;o++){var i=n(l[o]);t[i].references--}for(var u=r(e,a),c=0;c<l.length;c++){var s=n(l[c]);0===t[s].references&&(t[s].updater(),t.splice(s,1))}l=u}}},569:e=>{var t={};e.exports=function(e,n){var r=function(e){if(void 0===t[e]){var n=document.querySelector(e);if(window.HTMLIFrameElement&&n instanceof window.HTMLIFrameElement)try{n=n.contentDocument.head}catch(e){n=null}t[e]=n}return t[e]}(e);if(!r)throw new Error(\"Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.\");r.appendChild(n)}},216:e=>{e.exports=function(e){var t=document.createElement(\"style\");return e.setAttributes(t,e.attributes),e.insert(t,e.options),t}},565:(e,t,n)=>{e.exports=function(e){var t=n.nc;t&&e.setAttribute(\"nonce\",t)}},795:e=>{e.exports=function(e){if(\"undefined\"==typeof document)return{update:function(){},remove:function(){}};var t=e.insertStyleElement(e);return{update:function(n){!function(e,t,n){var r=\"\";n.supports&&(r+=\"@supports (\".concat(n.supports,\") {\")),n.media&&(r+=\"@media \".concat(n.media,\" {\"));var a=void 0!==n.layer;a&&(r+=\"@layer\".concat(n.layer.length>0?\" \".concat(n.layer):\"\",\" {\")),r+=n.css,a&&(r+=\"}\"),n.media&&(r+=\"}\"),n.supports&&(r+=\"}\");var l=n.sourceMap;l&&\"undefined\"!=typeof btoa&&(r+=\"\\n/*# sourceMappingURL=data:application/json;base64,\".concat(btoa(unescape(encodeURIComponent(JSON.stringify(l)))),\" */\")),t.styleTagTransform(r,e,t.options)}(t,e,n)},remove:function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(t)}}}},589:e=>{e.exports=function(e,t){if(t.styleSheet)t.styleSheet.cssText=e;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(e))}}},8:function(e,t,n){var r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,\"__esModule\",{value:!0}),t.NotSearching=void 0;var a=r(n(776));t.NotSearching=function(e){var t=e.onScan;return a.default.createElement(\"button\",{className:\"run-scan\",onClick:t},\"RUN\")}},578:function(e,t,n){var r=this&&this.__assign||function(){return r=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var a in t=arguments[n])Object.prototype.hasOwnProperty.call(t,a)&&(e[a]=t[a]);return e},r.apply(this,arguments)},a=this&&this.__spreadArray||function(e,t,n){if(n||2===arguments.length)for(var r,a=0,l=t.length;a<l;a++)!r&&a in t||(r||(r=Array.prototype.slice.call(t,0,a)),r[a]=t[a]);return e.concat(r||Array.prototype.slice.call(t))},l=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,\"__esModule\",{value:!0}),t.Searching=void 0;var o=l(n(776)),i=n(974);t.Searching=function(e){var t=e.state,n=e.setState,l=e.scanningPaused,u=e.pauseScan,c=e.handleScanFilter,s=e.toggleUser,f=e.UserCheckIcon,_=e.UserUncheckIcon;if(\"scanning\"!==t.status)return null;var d=(0,i.getUsersForDisplay)(t.results,t.whitelistedResults,t.currentTab,t.searchTerm,t.filter),p=\"\";return o.default.createElement(\"section\",{className:\"flex\"},o.default.createElement(\"aside\",{className:\"app-sidebar\"},o.default.createElement(\"menu\",{className:\"flex column m-clear p-clear\"},o.default.createElement(\"p\",null,\"Filter\"),o.default.createElement(\"label\",{className:\"badge m-small\"},o.default.createElement(\"input\",{type:\"checkbox\",name:\"showNonFollowers\",checked:t.filter.showNonFollowers,onChange:c}),\" Non-Followers\"),o.default.createElement(\"label\",{className:\"badge m-small\"},o.default.createElement(\"input\",{type:\"checkbox\",name:\"showFollowers\",checked:t.filter.showFollowers,onChange:c}),\" Followers\"),o.default.createElement(\"label\",{className:\"badge m-small\"},o.default.createElement(\"input\",{type:\"checkbox\",name:\"showVerified\",checked:t.filter.showVerified,onChange:c}),\" Verified\"),o.default.createElement(\"label\",{className:\"badge m-small\"},o.default.createElement(\"input\",{type:\"checkbox\",name:\"showPrivate\",checked:t.filter.showPrivate,onChange:c}),\" Private\")),o.default.createElement(\"div\",{className:\"grow\"},o.default.createElement(\"p\",null,\"Displayed: \",d.length),o.default.createElement(\"p\",null,\"Total: \",t.results.length)),o.default.createElement(\"div\",{className:\"controls\"},o.default.createElement(\"button\",{className:\"button-control button-pause\",onClick:u},l?\"Resume\":\"Pause\")),o.default.createElement(\"div\",{className:\"grow t-center\"},o.default.createElement(\"p\",null,\"Pages\"),o.default.createElement(\"a\",{onClick:function(){t.page-1>0&&n(r(r({},t),{page:t.page-1}))},className:\"p-medium\"},\"❮\"),o.default.createElement(\"span\",null,t.page,\" / \",(0,i.getMaxPage)(d)),o.default.createElement(\"a\",{onClick:function(){t.page<(0,i.getMaxPage)(d)&&n(r(r({},t),{page:t.page+1}))},className:\"p-medium\"},\"❯\")),o.default.createElement(\"button\",{className:\"unfollow\",onClick:function(){confirm(\"Are you sure?\")&&n((function(e){return\"scanning\"!==e.status?e:0===e.selectedResults.length?(alert(\"Must select at least a single user to unfollow\"),e):r(r({},e),{status:\"unfollowing\",percentage:0,unfollowLog:[],filter:{showSucceeded:!0,showFailed:!0}})}))}},\"UNFOLLOW (\",t.selectedResults.length,\")\")),o.default.createElement(\"article\",{className:\"results-container\"},o.default.createElement(\"nav\",{className:\"tabs-container\"},o.default.createElement(\"div\",{className:\"tab \".concat(\"non_whitelisted\"===t.currentTab?\"tab-active\":\"\"),onClick:function(){\"non_whitelisted\"!==t.currentTab&&n(r(r({},t),{currentTab:\"non_whitelisted\",selectedResults:[]}))}},\"Non-Whitelisted\"),o.default.createElement(\"div\",{className:\"tab \".concat(\"whitelisted\"===t.currentTab?\"tab-active\":\"\"),onClick:function(){\"whitelisted\"!==t.currentTab&&n(r(r({},t),{currentTab:\"whitelisted\",selectedResults:[]}))}},\"Whitelisted\")),(0,i.getCurrentPageUnfollowers)(d,t.page).map((function(e){var l=e.username.substring(0,1).toUpperCase();return o.default.createElement(o.default.Fragment,null,l!==p&&function(e){return p=e,o.default.createElement(\"div\",{className:\"alphabet-character\"},p)}(l),o.default.createElement(\"label\",{className:\"result-item\"},o.default.createElement(\"div\",{className:\"flex grow align-center\"},o.default.createElement(\"div\",{className:\"avatar-container\",onClick:function(l){l.preventDefault(),l.stopPropagation();var o=[];switch(t.currentTab){case\"non_whitelisted\":o=a(a([],t.whitelistedResults,!0),[e],!1);break;case\"whitelisted\":o=t.whitelistedResults.filter((function(t){return t.id!==e.id}));break;default:(0,i.assertUnreachable)(t.currentTab)}localStorage.setItem(\"WHITELISTED_RESULTS_STORAGE_KEY\",JSON.stringify(o)),n(r(r({},t),{whitelistedResults:o}))}},o.default.createElement(\"img\",{className:\"avatar\",alt:e.username,src:e.profile_pic_url}),o.default.createElement(\"span\",{className:\"avatar-icon-overlay-container\"},\"non_whitelisted\"===t.currentTab?o.default.createElement(f,null):o.default.createElement(_,null))),o.default.createElement(\"div\",{className:\"flex column m-medium\"},o.default.createElement(\"a\",{className:\"fs-xlarge\",target:\"_blank\",href:\"/\".concat(e.username),rel:\"noreferrer\"},e.username),o.default.createElement(\"span\",{className:\"fs-medium\"},e.full_name)),e.is_verified&&o.default.createElement(\"div\",{className:\"verified-badge\"},\"✔\"),e.is_private&&o.default.createElement(\"div\",{className:\"flex justify-center w-100\"},o.default.createElement(\"span\",{className:\"private-indicator\"},\"Private\"))),o.default.createElement(\"input\",{className:\"account-checkbox\",type:\"checkbox\",checked:-1!==t.selectedResults.indexOf(e),onChange:function(t){return s(t.currentTarget.checked,e)}})))}))))}},392:function(e,t,n){var r=this&&this.__createBinding||(Object.create?function(e,t,n,r){void 0===r&&(r=n);var a=Object.getOwnPropertyDescriptor(t,n);a&&!(\"get\"in a?!t.__esModule:a.writable||a.configurable)||(a={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(e,r,a)}:function(e,t,n,r){void 0===r&&(r=n),e[r]=t[n]}),a=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,\"default\",{enumerable:!0,value:t})}:function(e,t){e.default=t}),l=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)\"default\"!==n&&Object.prototype.hasOwnProperty.call(e,n)&&r(t,e,n);return a(t,e),t};Object.defineProperty(t,\"__esModule\",{value:!0}),t.SettingMenu=void 0;var o=l(n(776));t.SettingMenu=function(e){var t=e.setSettingState,n=e.currentTimings,r=e.setTimings,a=(0,o.useState)(n.timeBetweenSearchCycles),l=a[0],i=a[1],u=(0,o.useState)(n.timeToWaitAfterFiveSearchCycles),c=u[0],s=u[1],f=(0,o.useState)(n.timeBetweenUnfollows),_=f[0],d=f[1],p=(0,o.useState)(n.timeToWaitAfterFiveUnfollows),h=p[0],m=p[1],v=function(e,t){var n;t(Number(null===(n=null==e?void 0:e.target)||void 0===n?void 0:n.value))};return o.default.createElement(\"form\",{onSubmit:function(e){e.preventDefault(),r({timeBetweenSearchCycles:l,timeToWaitAfterFiveSearchCycles:c,timeBetweenUnfollows:_,timeToWaitAfterFiveUnfollows:h}),t(!1)}},o.default.createElement(\"div\",{className:\"backdrop\"},o.default.createElement(\"div\",{className:\"setting-menu\"},o.default.createElement(\"div\",null,o.default.createElement(\"h3\",null,\"Settings\")),o.default.createElement(\"div\",{className:\"row\"},o.default.createElement(\"label\",{className:\"minimun-width\"},\"Default time between search cycles\"),o.default.createElement(\"input\",{type:\"number\",id:\"searchCycles\",name:\"searchCycles\",min:1e3,max:999999,value:l,onChange:function(e){return v(e,i)}}),o.default.createElement(\"label\",{className:\"margin-between-input-and-label\"},\"(ms)\")),o.default.createElement(\"div\",{className:\"row\"},o.default.createElement(\"label\",{className:\"minimun-width\"},\"Default time to wait after five search cycles\"),o.default.createElement(\"input\",{type:\"number\",id:\"fiveSearchCycles\",name:\"fiveSearchCycles\",min:1e4,max:999999,value:c,onChange:function(e){return v(e,s)}}),o.default.createElement(\"label\",{className:\"margin-between-input-and-label\"},\"(ms)\")),o.default.createElement(\"div\",{className:\"row\"},o.default.createElement(\"label\",{className:\"minimun-width\"},\"Default time between unfollows\"),o.default.createElement(\"input\",{type:\"number\",id:\"timeBetweenUnfollow\",name:\"timeBetweenUnfollow\",min:2500,max:999999,value:_,onChange:function(e){return v(e,d)}}),o.default.createElement(\"label\",{className:\"margin-between-input-and-label\"},\"(ms)\")),o.default.createElement(\"div\",{className:\"row\"},o.default.createElement(\"label\",{className:\"minimun-width\"},\"Default time to wait after five unfollows\"),o.default.createElement(\"input\",{type:\"number\",id:\"timeAfterFiveUnfollows\",name:\"timeAfterFiveUnfollows\",min:3e4,max:999999,value:h,onChange:function(e){return v(e,m)}}),o.default.createElement(\"label\",{className:\"margin-between-input-and-label\"},\"(ms)\")),o.default.createElement(\"div\",null,o.default.createElement(\"h3\",{className:\"warning\"},o.default.createElement(\"b\",null,\"WARNING:\"),\" Modifying these settings can lead to your account being banned.\"),o.default.createElement(\"h3\",{className:\"warning\"},\"USE IT AT YOUR OWN RISK!!!!\")),o.default.createElement(\"div\",{className:\"btn-container\"},o.default.createElement(\"button\",{className:\"btn\",type:\"button\",onClick:function(){return t(!1)}},\"Cancel\"),o.default.createElement(\"button\",{className:\"btn\",type:\"submit\"},\"Save\")))))}},926:function(e,t,n){var r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,\"__esModule\",{value:!0}),t.Toast=void 0;var a=r(n(776));t.Toast=function(e){var t=e.show,n=void 0!==t&&t,r=e.style,l=void 0===r?\"info\":r,o=e.message,i=e.onClose;return a.default.createElement(\"div\",{className:\"toast \".concat(n?\"show\":\"\",\" \").concat(l),role:\"alert\"},a.default.createElement(\"p\",{className:\"toast__message\"},o),a.default.createElement(\"button\",{className:\"toast__close-button\",onClick:i,title:\"close\"},\"×\"))}},885:function(e,t,n){var r=this&&this.__assign||function(){return r=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var a in t=arguments[n])Object.prototype.hasOwnProperty.call(t,a)&&(e[a]=t[a]);return e},r.apply(this,arguments)},a=this&&this.__createBinding||(Object.create?function(e,t,n,r){void 0===r&&(r=n);var a=Object.getOwnPropertyDescriptor(t,n);a&&!(\"get\"in a?!t.__esModule:a.writable||a.configurable)||(a={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(e,r,a)}:function(e,t,n,r){void 0===r&&(r=n),e[r]=t[n]}),l=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,\"default\",{enumerable:!0,value:t})}:function(e,t){e.default=t}),o=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)\"default\"!==n&&Object.prototype.hasOwnProperty.call(e,n)&&a(t,e,n);return l(t,e),t};Object.defineProperty(t,\"__esModule\",{value:!0}),t.Toolbar=void 0;var i=o(n(776)),u=n(974),c=n(392),s=n(935);t.Toolbar=function(e){var t=e.isActiveProcess,n=e.state,a=e.setState,l=e.scanningPaused,o=e.toggleAllUsers,f=e.toggleCurrentePageUsers,_=e.currentTimings,d=e.setTimings,p=(0,i.useState)(!1),h=p[0],m=p[1];return i.default.createElement(\"header\",{className:\"app-header\"},t&&i.default.createElement(\"progress\",{className:\"progressbar\",value:\"initial\"!==n.status?n.percentage:0,max:\"100\"}),i.default.createElement(\"div\",{className:\"app-header-content\"},i.default.createElement(\"div\",{className:\"logo\",onClick:function(){if(!t)switch(n.status){case\"initial\":confirm(\"Go back to Instagram?\")&&location.reload();break;case\"scanning\":case\"unfollowing\":a({status:\"initial\"})}}},\"InstagramUnfollowers\"),i.default.createElement(\"button\",{className:\"copy-list\",onClick:function(){switch(n.status){case\"scanning\":return(0,u.copyListToClipboard)((0,u.getUsersForDisplay)(n.results,n.whitelistedResults,n.currentTab,n.searchTerm,n.filter));case\"initial\":case\"unfollowing\":return;default:(0,u.assertUnreachable)(n)}},disabled:\"initial\"===n.status},\"COPY LIST\"),\"initial\"===n.status&&i.default.createElement(s.SettingIcon,{onClickLogo:function(){m(!0)}}),i.default.createElement(\"input\",{type:\"text\",className:\"search-bar\",placeholder:\"Search...\",disabled:\"initial\"===n.status,value:\"initial\"===n.status?\"\":n.searchTerm,onChange:function(e){switch(n.status){case\"initial\":return;case\"scanning\":case\"unfollowing\":return a(r(r({},n),{searchTerm:e.currentTarget.value}));default:(0,u.assertUnreachable)(n)}}}),\"scanning\"===n.status&&i.default.createElement(\"input\",{title:\"Select all on this page\",type:\"checkbox\",disabled:n.percentage<100&&!l,checked:n.selectedResults.length===(0,u.getUsersForDisplay)(n.results,n.whitelistedResults,n.currentTab,n.searchTerm,n.filter).length,className:\"toggle-all-checkbox\",onClick:f}),\"scanning\"===n.status&&i.default.createElement(\"input\",{title:\"Select all\",type:\"checkbox\",disabled:n.percentage<100&&!l,checked:n.selectedResults.length===(0,u.getUsersForDisplay)(n.results,n.whitelistedResults,n.currentTab,n.searchTerm,n.filter).length,className:\"toggle-all-checkbox\",onClick:o})),h&&i.default.createElement(c.SettingMenu,{setSettingState:m,currentTimings:_,setTimings:d}))}},982:function(e,t,n){var r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,\"__esModule\",{value:!0}),t.Unfollowing=void 0;var a=r(n(776)),l=n(974);t.Unfollowing=function(e){var t=e.state,n=e.handleUnfollowFilter;return\"unfollowing\"!==t.status?null:a.default.createElement(\"section\",{className:\"flex\"},a.default.createElement(\"aside\",{className:\"app-sidebar\"},a.default.createElement(\"menu\",{className:\"flex column grow m-clear p-clear\"},a.default.createElement(\"p\",null,\"Filter\"),a.default.createElement(\"label\",{className:\"badge m-small\"},a.default.createElement(\"input\",{type:\"checkbox\",name:\"showSucceeded\",checked:t.filter.showSucceeded,onChange:n}),\" Succeeded\"),a.default.createElement(\"label\",{className:\"badge m-small\"},a.default.createElement(\"input\",{type:\"checkbox\",name:\"showFailed\",checked:t.filter.showFailed,onChange:n}),\" Failed\"))),a.default.createElement(\"article\",{className:\"unfollow-log-container\"},t.unfollowLog.length===t.selectedResults.length&&a.default.createElement(a.default.Fragment,null,a.default.createElement(\"hr\",null),a.default.createElement(\"div\",{className:\"fs-large p-medium clr-green\"},\"All DONE!\"),a.default.createElement(\"hr\",null)),(0,l.getUnfollowLogForDisplay)(t.unfollowLog,t.searchTerm,t.filter).map((function(e,n){return e.unfollowedSuccessfully?a.default.createElement(\"div\",{className:\"p-medium\",key:e.user.id},\"Unfollowed\",a.default.createElement(\"a\",{className:\"clr-inherit\",target:\"_blank\",href:\"../\".concat(e.user.username),rel:\"noreferrer\"},\" \",e.user.username),a.default.createElement(\"span\",{className:\"clr-cyan\"},\"  [\",n+1,\"/\",t.selectedResults.length,\"]\")):a.default.createElement(\"div\",{className:\"p-medium clr-red\",key:e.user.id},\"Failed to unfollow \",e.user.username,\" [\",n+1,\"/\",t.selectedResults.length,\"]\")}))))}},935:function(e,t,n){var r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,\"__esModule\",{value:!0}),t.SettingIcon=void 0;var a=r(n(776));t.SettingIcon=function(e){var t=e.onClickLogo;return a.default.createElement(\"svg\",{style:{cursor:\"pointer\"},fill:\"#FFFF00\",height:\"35px\",width:\"35px\",viewBox:\"0 0 54 54\",onClick:t},a.default.createElement(\"g\",null,a.default.createElement(\"path\",{d:\"M51.22,21h-5.052c-0.812,0-1.481-0.447-1.792-1.197s-0.153-1.54,0.42-2.114l3.572-3.571\\n      c0.525-0.525,0.814-1.224,0.814-1.966c0-0.743-0.289-1.441-0.814-1.967l-4.553-4.553c-1.05-1.05-2.881-1.052-3.933,0l-3.571,3.571\\n      c-0.574,0.573-1.366,0.733-2.114,0.421C33.447,9.313,33,8.644,33,7.832V2.78C33,1.247,31.753,0,30.22,0H23.78\\n      C22.247,0,21,1.247,21,2.78v5.052c0,0.812-0.447,1.481-1.197,1.792c-0.748,0.313-1.54,0.152-2.114-0.421l-3.571-3.571\\n      c-1.052-1.052-2.883-1.05-3.933,0l-4.553,4.553c-0.525,0.525-0.814,1.224-0.814,1.967c0,0.742,0.289,1.44,0.814,1.966l3.572,3.571\\n      c0.573,0.574,0.73,1.364,0.42,2.114S8.644,21,7.832,21H2.78C1.247,21,0,22.247,0,23.78v6.439C0,31.753,1.247,33,2.78,33h5.052\\n      c0.812,0,1.481,0.447,1.792,1.197s0.153,1.54-0.42,2.114l-3.572,3.571c-0.525,0.525-0.814,1.224-0.814,1.966\\n      c0,0.743,0.289,1.441,0.814,1.967l4.553,4.553c1.051,1.051,2.881,1.053,3.933,0l3.571-3.572c0.574-0.573,1.363-0.731,2.114-0.42\\n      c0.75,0.311,1.197,0.98,1.197,1.792v5.052c0,1.533,1.247,2.78,2.78,2.78h6.439c1.533,0,2.78-1.247,2.78-2.78v-5.052\\n      c0-0.812,0.447-1.481,1.197-1.792c0.751-0.312,1.54-0.153,2.114,0.42l3.571,3.572c1.052,1.052,2.883,1.05,3.933,0l4.553-4.553\\n      c0.525-0.525,0.814-1.224,0.814-1.967c0-0.742-0.289-1.44-0.814-1.966l-3.572-3.571c-0.573-0.574-0.73-1.364-0.42-2.114\\n      S45.356,33,46.168,33h5.052c1.533,0,2.78-1.247,2.78-2.78V23.78C54,22.247,52.753,21,51.22,21z M52,30.22\\n      C52,30.65,51.65,31,51.22,31h-5.052c-1.624,0-3.019,0.932-3.64,2.432c-0.622,1.5-0.295,3.146,0.854,4.294l3.572,3.571\\n      c0.305,0.305,0.305,0.8,0,1.104l-4.553,4.553c-0.304,0.304-0.799,0.306-1.104,0l-3.571-3.572c-1.149-1.149-2.794-1.474-4.294-0.854\\n      c-1.5,0.621-2.432,2.016-2.432,3.64v5.052C31,51.65,30.65,52,30.22,52H23.78C23.35,52,23,51.65,23,51.22v-5.052\\n      c0-1.624-0.932-3.019-2.432-3.64c-0.503-0.209-1.021-0.311-1.533-0.311c-1.014,0-1.997,0.4-2.761,1.164l-3.571,3.572\\n      c-0.306,0.306-0.801,0.304-1.104,0l-4.553-4.553c-0.305-0.305-0.305-0.8,0-1.104l3.572-3.571c1.148-1.148,1.476-2.794,0.854-4.294\\n      C10.851,31.932,9.456,31,7.832,31H2.78C2.35,31,2,30.65,2,30.22V23.78C2,23.35,2.35,23,2.78,23h5.052\\n      c1.624,0,3.019-0.932,3.64-2.432c0.622-1.5,0.295-3.146-0.854-4.294l-3.572-3.571c-0.305-0.305-0.305-0.8,0-1.104l4.553-4.553\\n      c0.304-0.305,0.799-0.305,1.104,0l3.571,3.571c1.147,1.147,2.792,1.476,4.294,0.854C22.068,10.851,23,9.456,23,7.832V2.78\\n      C23,2.35,23.35,2,23.78,2h6.439C30.65,2,31,2.35,31,2.78v5.052c0,1.624,0.932,3.019,2.432,3.64\\n      c1.502,0.622,3.146,0.294,4.294-0.854l3.571-3.571c0.306-0.305,0.801-0.305,1.104,0l4.553,4.553c0.305,0.305,0.305,0.8,0,1.104\\n      l-3.572,3.571c-1.148,1.148-1.476,2.794-0.854,4.294c0.621,1.5,2.016,2.432,3.64,2.432h5.052C51.65,23,52,23.35,52,23.78V30.22z\"}),a.default.createElement(\"path\",{d:\"M27,18c-4.963,0-9,4.037-9,9s4.037,9,9,9s9-4.037,9-9S31.963,18,27,18z M27,34c-3.859,0-7-3.141-7-7s3.141-7,7-7\\n      s7,3.141,7,7S30.859,34,27,34z\"})))}},629:function(e,t,n){var r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,\"__esModule\",{value:!0}),t.UserCheckIcon=void 0;var a=r(n(776));t.UserCheckIcon=function(){return a.default.createElement(\"svg\",{width:\"35\",height:\"35\",viewBox:\"0 0 24 24\",fill:\"none\",stroke:\"currentColor\",strokeWidth:\"2\",strokeLinecap:\"round\",strokeLinejoin:\"round\"},a.default.createElement(\"path\",{d:\"M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2\"}),a.default.createElement(\"circle\",{cx:\"8.5\",cy:\"7\",r:\"4\"}),a.default.createElement(\"polyline\",{points:\"17 11 19 13 23 9\"}))}},460:function(e,t,n){var r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,\"__esModule\",{value:!0}),t.UserUncheckIcon=void 0;var a=r(n(776));t.UserUncheckIcon=function(){return a.default.createElement(\"svg\",{width:\"35\",height:\"35\",viewBox:\"0 0 24 24\",fill:\"#FFFFFF\",stroke:\"currentColor\",strokeWidth:\"2\",strokeLinecap:\"round\",strokeLinejoin:\"round\"},a.default.createElement(\"path\",{d:\"M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2\"}),a.default.createElement(\"circle\",{cx:\"8.5\",cy:\"7\",r:\"4\"}),a.default.createElement(\"line\",{x1:\"18\",y1:\"8\",x2:\"23\",y2:\"13\"}),a.default.createElement(\"line\",{x1:\"23\",y1:\"8\",x2:\"18\",y2:\"13\"}))}},78:(e,t)=>{Object.defineProperty(t,\"__esModule\",{value:!0}),t.DEFAULT_TIME_TO_WAIT_AFTER_FIVE_UNFOLLOWS=t.DEFAULT_TIME_BETWEEN_UNFOLLOWS=t.DEFAULT_TIME_TO_WAIT_AFTER_FIVE_SEARCH_CYCLES=t.DEFAULT_TIME_BETWEEN_SEARCH_CYCLES=t.WHITELISTED_RESULTS_STORAGE_KEY=t.UNFOLLOWERS_PER_PAGE=t.INSTAGRAM_HOSTNAME=void 0,t.INSTAGRAM_HOSTNAME=\"www.instagram.com\",t.UNFOLLOWERS_PER_PAGE=50,t.WHITELISTED_RESULTS_STORAGE_KEY=\"iu_whitelisted-results\",t.DEFAULT_TIME_BETWEEN_SEARCH_CYCLES=1e3,t.DEFAULT_TIME_TO_WAIT_AFTER_FIVE_SEARCH_CYCLES=1e4,t.DEFAULT_TIME_BETWEEN_UNFOLLOWS=4e3,t.DEFAULT_TIME_TO_WAIT_AFTER_FIVE_UNFOLLOWS=3e4},299:function(e,t,n){var r=this&&this.__assign||function(){return r=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var a in t=arguments[n])Object.prototype.hasOwnProperty.call(t,a)&&(e[a]=t[a]);return e},r.apply(this,arguments)},a=this&&this.__createBinding||(Object.create?function(e,t,n,r){void 0===r&&(r=n);var a=Object.getOwnPropertyDescriptor(t,n);a&&!(\"get\"in a?!t.__esModule:a.writable||a.configurable)||(a={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(e,r,a)}:function(e,t,n,r){void 0===r&&(r=n),e[r]=t[n]}),l=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,\"default\",{enumerable:!0,value:t})}:function(e,t){e.default=t}),o=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)\"default\"!==n&&Object.prototype.hasOwnProperty.call(e,n)&&a(t,e,n);return l(t,e),t},i=this&&this.__awaiter||function(e,t,n,r){return new(n||(n=Promise))((function(a,l){function o(e){try{u(r.next(e))}catch(e){l(e)}}function i(e){try{u(r.throw(e))}catch(e){l(e)}}function u(e){var t;e.done?a(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(o,i)}u((r=r.apply(e,t||[])).next())}))},u=this&&this.__generator||function(e,t){var n,r,a,l,o={label:0,sent:function(){if(1&a[0])throw a[1];return a[1]},trys:[],ops:[]};return l={next:i(0),throw:i(1),return:i(2)},\"function\"==typeof Symbol&&(l[Symbol.iterator]=function(){return this}),l;function i(i){return function(u){return function(i){if(n)throw new TypeError(\"Generator is already executing.\");for(;l&&(l=0,i[0]&&(o=0)),o;)try{if(n=1,r&&(a=2&i[0]?r.return:i[0]?r.throw||((a=r.return)&&a.call(r),0):r.next)&&!(a=a.call(r,i[1])).done)return a;switch(r=0,a&&(i=[2&i[0],a.value]),i[0]){case 0:case 1:a=i;break;case 4:return o.label++,{value:i[1],done:!1};case 5:o.label++,r=i[1],i=[0];continue;case 7:i=o.ops.pop(),o.trys.pop();continue;default:if(!((a=(a=o.trys).length>0&&a[a.length-1])||6!==i[0]&&2!==i[0])){o=0;continue}if(3===i[0]&&(!a||i[1]>a[0]&&i[1]<a[3])){o.label=i[1];break}if(6===i[0]&&o.label<a[1]){o.label=a[1],a=i;break}if(a&&o.label<a[2]){o.label=a[2],o.ops.push(i);break}a[2]&&o.ops.pop(),o.trys.pop();continue}i=t.call(e,o)}catch(e){i=[6,e],r=0}finally{n=a=0}if(5&i[0])throw i[1];return{value:i[0]?i[1]:void 0,done:!0}}([i,u])}}},c=this&&this.__spreadArray||function(e,t,n){if(n||2===arguments.length)for(var r,a=0,l=t.length;a<l;a++)!r&&a in t||(r||(r=Array.prototype.slice.call(t,0,a)),r[a]=t[a]);return e.concat(r||Array.prototype.slice.call(t))};Object.defineProperty(t,\"__esModule\",{value:!0});var s=o(n(776)),f=n(776);n(273);var _=n(926),d=n(629),p=n(460),h=n(78),m=n(974),v=n(8),g=n(578),b=n(885),y=n(982),w=!1;function E(){w=!w}location.hostname!==h.INSTAGRAM_HOSTNAME?alert(\"Can be used only on Instagram routes\"):(document.title=\"InstagramUnfollowers\",document.body.innerHTML=\"\",(0,f.render)(s.default.createElement((function(){var e,t,n=this,a=(0,s.useState)({status:\"initial\"}),l=a[0],o=a[1],f=(0,s.useState)({show:!1}),k=f[0],x=f[1],S=(0,s.useState)({timeBetweenSearchCycles:h.DEFAULT_TIME_BETWEEN_SEARCH_CYCLES,timeToWaitAfterFiveSearchCycles:h.DEFAULT_TIME_TO_WAIT_AFTER_FIVE_SEARCH_CYCLES,timeBetweenUnfollows:h.DEFAULT_TIME_BETWEEN_UNFOLLOWS,timeToWaitAfterFiveUnfollows:h.DEFAULT_TIME_TO_WAIT_AFTER_FIVE_UNFOLLOWS}),C=S[0],T=S[1];switch(l.status){case\"initial\":e=!1;break;case\"scanning\":case\"unfollowing\":e=l.percentage<100;break;default:(0,m.assertUnreachable)(l)}switch((0,s.useEffect)((function(){var t=function(t){if(e)return(t=t||window.event)&&(t.returnValue=\"Changes you made may not be saved.\"),\"Changes you made may not be saved.\"};return window.addEventListener(\"beforeunload\",t),function(){return window.removeEventListener(\"beforeunload\",t)}}),[e,l]),(0,s.useEffect)((function(){i(n,void 0,void 0,(function(){var e,t,n,a,i,s,f,_;return u(this,(function(u){switch(u.label){case 0:if(\"scanning\"!==l.status)return[2];e=c([],l.results,!0),t=0,n=(0,m.urlGenerator)(),a=!0,i=0,s=-1,u.label=1;case 1:if(!a)return[3,12];f=void 0,u.label=2;case 2:return u.trys.push([2,4,,5]),[4,fetch(n).then((function(e){return e.json()}))];case 3:return f=u.sent().data.user.edge_follow,[3,5];case 4:return _=u.sent(),console.error(_),[3,1];case 5:-1===s&&(s=f.count),a=f.page_info.has_next_page,n=(0,m.urlGenerator)(f.page_info.end_cursor),i+=f.edges.length,f.edges.forEach((function(t){return e.push(t.node)})),o((function(t){return\"scanning\"!==t.status?t:r(r({},t),{percentage:Math.floor(i/s*100),results:e})})),u.label=6;case 6:return w?[4,(0,m.sleep)(1e3)]:[3,8];case 7:return u.sent(),console.info(\"Scan paused\"),[3,6];case 8:return[4,(0,m.sleep)(Math.floor(Math.random()*(C.timeBetweenSearchCycles-.7*C.timeBetweenSearchCycles))+C.timeBetweenSearchCycles)];case 9:return u.sent(),++t>6?(t=0,x({show:!0,text:\"Sleeping 10 secs to prevent getting temp blocked\"}),[4,(0,m.sleep)(C.timeToWaitAfterFiveSearchCycles)]):[3,11];case 10:u.sent(),u.label=11;case 11:return x({show:!1}),[3,1];case 12:return x({show:!0,text:\"Scanning completed!\"}),[2]}}))}))}),[l.status]),(0,s.useEffect)((function(){i(n,void 0,void 0,(function(){var e,t,n,a,i,s;return u(this,(function(f){switch(f.label){case 0:if(\"unfollowing\"!==l.status)return[2];if(null===(e=(0,m.getCookie)(\"csrftoken\")))throw new Error(\"csrftoken cookie is null\");t=0,n=function(n){var a,i;return u(this,(function(u){switch(u.label){case 0:t+=1,a=Math.floor(t/l.selectedResults.length*100),u.label=1;case 1:return u.trys.push([1,3,,4]),[4,fetch((0,m.unfollowUserUrlGenerator)(n.id),{headers:{\"content-type\":\"application/x-www-form-urlencoded\",\"x-csrftoken\":e},method:\"POST\",mode:\"cors\",credentials:\"include\"})];case 2:return u.sent(),o((function(e){return\"unfollowing\"!==e.status?e:r(r({},e),{percentage:a,unfollowLog:c(c([],e.unfollowLog,!0),[{user:n,unfollowedSuccessfully:!0}],!1)})})),[3,4];case 3:return i=u.sent(),console.error(i),o((function(e){return\"unfollowing\"!==e.status?e:r(r({},e),{percentage:a,unfollowLog:c(c([],e.unfollowLog,!0),[{user:n,unfollowedSuccessfully:!1}],!1)})})),[3,4];case 4:return n===l.selectedResults[l.selectedResults.length-1]?[2,\"break\"]:[4,(0,m.sleep)(Math.floor(Math.random()*(1.2*C.timeBetweenUnfollows-C.timeBetweenUnfollows))+C.timeBetweenUnfollows)];case 5:return u.sent(),t%5!=0?[3,7]:(x({show:!0,text:\"Sleeping 5 minutes to prevent getting temp blocked\"}),[4,(0,m.sleep)(C.timeToWaitAfterFiveUnfollows)]);case 6:u.sent(),u.label=7;case 7:return x({show:!1}),[2]}}))},a=0,i=l.selectedResults,f.label=1;case 1:return a<i.length?(s=i[a],[5,n(s)]):[3,4];case 2:if(\"break\"===f.sent())return[3,4];f.label=3;case 3:return a++,[3,1];case 4:return[2]}}))}))}),[l.status]),l.status){case\"initial\":t=s.default.createElement(v.NotSearching,{onScan:function(){return i(n,void 0,void 0,(function(){var e,t;return u(this,(function(n){return\"initial\"!==l.status||(e=localStorage.getItem(h.WHITELISTED_RESULTS_STORAGE_KEY),t=null===e?[]:JSON.parse(e),o({status:\"scanning\",page:1,searchTerm:\"\",currentTab:\"non_whitelisted\",percentage:0,results:[],selectedResults:[],whitelistedResults:t,filter:{showNonFollowers:!0,showFollowers:!1,showVerified:!0,showPrivate:!0}})),[2]}))}))}});break;case\"scanning\":t=s.default.createElement(g.Searching,{state:l,handleScanFilter:function(e){var t;\"scanning\"===l.status&&(l.selectedResults.length>0&&!confirm(\"Changing filter options will clear selected users\")?o(r({},l)):o(r(r({},l),{selectedResults:[],filter:r(r({},l.filter),(t={},t[e.currentTarget.name]=e.currentTarget.checked,t))})))},toggleUser:function(e,t){\"scanning\"===l.status&&o(r(r({},l),e?{selectedResults:c(c([],l.selectedResults,!0),[t],!1)}:{selectedResults:l.selectedResults.filter((function(e){return e.id!==t.id}))}))},pauseScan:E,setState:o,scanningPaused:w,UserCheckIcon:d.UserCheckIcon,UserUncheckIcon:p.UserUncheckIcon});break;case\"unfollowing\":t=s.default.createElement(y.Unfollowing,{state:l,handleUnfollowFilter:function(e){var t;\"unfollowing\"===l.status&&o(r(r({},l),{filter:r(r({},l.filter),(t={},t[e.currentTarget.name]=e.currentTarget.checked,t))}))}});break;default:(0,m.assertUnreachable)(l)}return s.default.createElement(\"main\",{id:\"main\",role:\"main\",className:\"iu\"},s.default.createElement(\"section\",{className:\"overlay\"},s.default.createElement(b.Toolbar,{state:l,setState:o,scanningPaused:w,isActiveProcess:e,toggleAllUsers:function(e){\"scanning\"===l.status&&(e.currentTarget.checked?o(r(r({},l),{selectedResults:(0,m.getUsersForDisplay)(l.results,l.whitelistedResults,l.currentTab,l.searchTerm,l.filter)})):o(r(r({},l),{selectedResults:[]})))},toggleCurrentePageUsers:function(e){\"scanning\"===l.status&&(e.currentTarget.checked?o(r(r({},l),{selectedResults:(0,m.getCurrentPageUnfollowers)((0,m.getUsersForDisplay)(l.results,l.whitelistedResults,l.currentTab,l.searchTerm,l.filter),l.page)})):o(r(r({},l),{selectedResults:[]})))},setTimings:T,currentTimings:C}),t,k.show&&s.default.createElement(_.Toast,{show:k.show,message:k.text,onClose:function(){return x({show:!1})}})))}),null),document.body))},974:function(e,t,n){var r=this&&this.__awaiter||function(e,t,n,r){return new(n||(n=Promise))((function(a,l){function o(e){try{u(r.next(e))}catch(e){l(e)}}function i(e){try{u(r.throw(e))}catch(e){l(e)}}function u(e){var t;e.done?a(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(o,i)}u((r=r.apply(e,t||[])).next())}))},a=this&&this.__generator||function(e,t){var n,r,a,l,o={label:0,sent:function(){if(1&a[0])throw a[1];return a[1]},trys:[],ops:[]};return l={next:i(0),throw:i(1),return:i(2)},\"function\"==typeof Symbol&&(l[Symbol.iterator]=function(){return this}),l;function i(i){return function(u){return function(i){if(n)throw new TypeError(\"Generator is already executing.\");for(;l&&(l=0,i[0]&&(o=0)),o;)try{if(n=1,r&&(a=2&i[0]?r.return:i[0]?r.throw||((a=r.return)&&a.call(r),0):r.next)&&!(a=a.call(r,i[1])).done)return a;switch(r=0,a&&(i=[2&i[0],a.value]),i[0]){case 0:case 1:a=i;break;case 4:return o.label++,{value:i[1],done:!1};case 5:o.label++,r=i[1],i=[0];continue;case 7:i=o.ops.pop(),o.trys.pop();continue;default:if(!((a=(a=o.trys).length>0&&a[a.length-1])||6!==i[0]&&2!==i[0])){o=0;continue}if(3===i[0]&&(!a||i[1]>a[0]&&i[1]<a[3])){o.label=i[1];break}if(6===i[0]&&o.label<a[1]){o.label=a[1],a=i;break}if(a&&o.label<a[2]){o.label=a[2],o.ops.push(i);break}a[2]&&o.ops.pop(),o.trys.pop();continue}i=t.call(e,o)}catch(e){i=[6,e],r=0}finally{n=a=0}if(5&i[0])throw i[1];return{value:i[0]?i[1]:void 0,done:!0}}([i,u])}}},l=this&&this.__spreadArray||function(e,t,n){if(n||2===arguments.length)for(var r,a=0,l=t.length;a<l;a++)!r&&a in t||(r||(r=Array.prototype.slice.call(t,0,a)),r[a]=t[a]);return e.concat(r||Array.prototype.slice.call(t))};Object.defineProperty(t,\"__esModule\",{value:!0}),t.unfollowUserUrlGenerator=t.urlGenerator=t.getCookie=t.sleep=t.assertUnreachable=t.getUnfollowLogForDisplay=t.getUsersForDisplay=t.getCurrentPageUnfollowers=t.getMaxPage=t.copyListToClipboard=void 0;var o=n(78);function i(e){throw new Error(\"Statement should be unreachable\")}function u(e){var t=\"; \".concat(document.cookie).split(\"; \".concat(e,\"=\"));return 2!==t.length?null:t.pop().split(\";\").shift()}t.copyListToClipboard=function(e){return r(this,void 0,void 0,(function(){var t,n;return a(this,(function(r){switch(r.label){case 0:return t=l([],e,!0).sort((function(e,t){return e.username>t.username?1:-1})),n=\"\",t.forEach((function(e){n+=e.username+\"\\n\"})),[4,navigator.clipboard.writeText(n)];case 1:return r.sent(),alert(\"List copied to clipboard!\"),[2]}}))}))},t.getMaxPage=function(e){var t=Math.ceil(e.length/o.UNFOLLOWERS_PER_PAGE);return t<1?1:t},t.getCurrentPageUnfollowers=function(e,t){return l([],e,!0).sort((function(e,t){return e.username>t.username?1:-1})).splice(o.UNFOLLOWERS_PER_PAGE*(t-1),o.UNFOLLOWERS_PER_PAGE)},t.getUsersForDisplay=function(e,t,n,r,a){for(var l=[],o=function(e){var o=void 0!==t.find((function(t){return t.id===e.id}));switch(n){case\"non_whitelisted\":if(o)return\"continue\";break;case\"whitelisted\":if(!o)return\"continue\";break;default:i()}if(!a.showPrivate&&e.is_private)return\"continue\";if(!a.showVerified&&e.is_verified)return\"continue\";if(!a.showFollowers&&e.follows_viewer)return\"continue\";if(!a.showNonFollowers&&!e.follows_viewer)return\"continue\";var u=e.username.toLowerCase().includes(r.toLowerCase())||e.full_name.toLowerCase().includes(r.toLowerCase());if(\"\"!==r&&!u)return\"continue\";l.push(e)},u=0,c=e;u<c.length;u++)o(c[u]);return l},t.getUnfollowLogForDisplay=function(e,t,n){for(var r=[],a=0,l=e;a<l.length;a++){var o=l[a];if((n.showSucceeded||!o.unfollowedSuccessfully)&&(n.showFailed||o.unfollowedSuccessfully)){var i=o.user.username.toLowerCase().includes(t.toLowerCase());(\"\"===t||i)&&r.push(o)}}return r},t.assertUnreachable=i,t.sleep=function(e){return new Promise((function(t){setTimeout(t,e)}))},t.getCookie=u,t.urlGenerator=function(e){var t=u(\"ds_user_id\");return void 0===e?'https://www.instagram.com/graphql/query/?query_hash=3dec7e2c57367ef3da3d987d89f9dbc8&variables={\"id\":\"'.concat(t,'\",\"include_reel\":\"true\",\"fetch_mutual\":\"false\",\"first\":\"24\"}'):'https://www.instagram.com/graphql/query/?query_hash=3dec7e2c57367ef3da3d987d89f9dbc8&variables={\"id\":\"'.concat(t,'\",\"include_reel\":\"true\",\"fetch_mutual\":\"false\",\"first\":\"24\",\"after\":\"').concat(e,'\"}')},t.unfollowUserUrlGenerator=function(e){return\"https://www.instagram.com/web/friendships/\".concat(e,\"/unfollow/\")}}},t={};function n(r){var a=t[r];if(void 0!==a)return a.exports;var l=t[r]={id:r,exports:{}};return e[r].call(l.exports,l,l.exports,n),l.exports}n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.r=e=>{\"undefined\"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:\"Module\"}),Object.defineProperty(e,\"__esModule\",{value:!0})},n.nc=void 0,n(299)})();";//__END_OF_SCRIPT__
   scriptLabel.innerText = instagramScript;
 
   async function copyToClipboard() {
diff --git a/src/components/NotSearching.tsx b/src/components/NotSearching.tsx
new file mode 100644
index 0000000..8236fff
--- /dev/null
+++ b/src/components/NotSearching.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+interface NotSearchingProps {
+  onScan?: () => void;
+}
+
+export const NotSearching = ({onScan}: NotSearchingProps) => (
+  <button className='run-scan' onClick={onScan}>
+    RUN
+  </button>
+);
diff --git a/src/components/Searching.tsx b/src/components/Searching.tsx
new file mode 100644
index 0000000..2e53c21
--- /dev/null
+++ b/src/components/Searching.tsx
@@ -0,0 +1,277 @@
+import React from "react";
+import { assertUnreachable, getCurrentPageUnfollowers, getMaxPage, getUsersForDisplay } from "../utils/utils";
+import { State } from "../model/state";
+import { UserNode } from "../model/user";
+
+export interface SearchingProps {
+  state: State;
+  setState: (state: State) => void;
+  scanningPaused: boolean;
+  pauseScan: () => void;
+  handleScanFilter: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  toggleUser: (checked: boolean, user: UserNode) => void;
+  UserCheckIcon: React.FC;
+  UserUncheckIcon: React.FC;
+}
+
+export const Searching = ({
+                            state,
+                            setState,
+                            scanningPaused,
+                            pauseScan,
+                            handleScanFilter,
+                            toggleUser,
+                            UserCheckIcon,
+                            UserUncheckIcon,
+                          }: SearchingProps) => {
+  if (state.status !== "scanning") {
+    return null;
+  }
+
+  const usersForDisplay = getUsersForDisplay(
+    state.results,
+    state.whitelistedResults,
+    state.currentTab,
+    state.searchTerm,
+    state.filter,
+  );
+  let currentLetter = "";
+
+  const onNewLetter = (firstLetter: string) => {
+    currentLetter = firstLetter;
+    return <div className="alphabet-character">{currentLetter}</div>;
+  };
+
+  return (
+    <section className="flex">
+      <aside className="app-sidebar">
+        <menu className="flex column m-clear p-clear">
+          <p>Filter</p>
+          <label className="badge m-small">
+            <input
+              type="checkbox"
+              name="showNonFollowers"
+              checked={state.filter.showNonFollowers}
+              onChange={handleScanFilter}
+            />
+            &nbsp;Non-Followers
+          </label>
+          <label className="badge m-small">
+            <input
+              type="checkbox"
+              name="showFollowers"
+              checked={state.filter.showFollowers}
+              onChange={handleScanFilter}
+            />
+            &nbsp;Followers
+          </label>
+          <label className="badge m-small">
+            <input
+              type="checkbox"
+              name="showVerified"
+              checked={state.filter.showVerified}
+              onChange={handleScanFilter}
+            />
+            &nbsp;Verified
+          </label>
+          <label className="badge m-small">
+            <input
+              type="checkbox"
+              name="showPrivate"
+              checked={state.filter.showPrivate}
+              onChange={handleScanFilter}
+            />
+            &nbsp;Private
+          </label>
+        </menu>
+        <div className="grow">
+          <p>Displayed: {usersForDisplay.length}</p>
+          <p>Total: {state.results.length}</p>
+        </div>
+        {/* Scan controls */}
+        <div className="controls">
+          <button
+            className="button-control button-pause"
+            onClick={pauseScan}
+          >
+            {scanningPaused ? "Resume" : "Pause"}
+          </button>
+        </div>
+        <div className="grow t-center">
+          <p>Pages</p>
+          <a
+            onClick={() => {
+              if (state.page - 1 > 0) {
+                setState({
+                  ...state,
+                  page: state.page - 1,
+                });
+              }
+            }}
+            className="p-medium"
+          >
+            ❮
+          </a>
+          <span>
+            {state.page}&nbsp;/&nbsp;{getMaxPage(usersForDisplay)}
+          </span>
+          <a
+            onClick={() => {
+              if (state.page < getMaxPage(usersForDisplay)) {
+                setState({
+                  ...state,
+                  page: state.page + 1,
+                });
+              }
+            }}
+            className="p-medium"
+          >
+            ❯
+          </a>
+        </div>
+        <button
+          className="unfollow"
+          onClick={() => {
+            if (!confirm("Are you sure?")) {
+              return;
+            }
+            //TODO TEMP until types are properly fixed
+            // @ts-ignore
+            setState(prevState => {
+              if (prevState.status !== "scanning") {
+                return prevState;
+              }
+              if (prevState.selectedResults.length === 0) {
+                alert("Must select at least a single user to unfollow");
+                return prevState;
+              }
+              const newState: State = {
+                ...prevState,
+                status: "unfollowing",
+                percentage: 0,
+                unfollowLog: [],
+                filter: {
+                  showSucceeded: true,
+                  showFailed: true,
+                },
+              };
+              return newState;
+            });
+          }}
+        >
+          UNFOLLOW ({state.selectedResults.length})
+        </button>
+      </aside>
+      <article className="results-container">
+        <nav className="tabs-container">
+          <div
+            className={`tab ${state.currentTab === "non_whitelisted" ? "tab-active" : ""}`}
+            onClick={() => {
+              if (state.currentTab === "non_whitelisted") {
+                return;
+              }
+              setState({
+                ...state,
+                currentTab: "non_whitelisted",
+                selectedResults: [],
+              });
+            }}
+          >
+            Non-Whitelisted
+          </div>
+          <div
+            className={`tab ${state.currentTab === "whitelisted" ? "tab-active" : ""}`}
+            onClick={() => {
+              if (state.currentTab === "whitelisted") {
+                return;
+              }
+              setState({
+                ...state,
+                currentTab: "whitelisted",
+                selectedResults: [],
+              });
+            }}
+          >
+            Whitelisted
+          </div>
+        </nav>
+        {getCurrentPageUnfollowers(usersForDisplay, state.page).map(user => {
+          const firstLetter = user.username.substring(0, 1).toUpperCase();
+          return (
+            <>
+              {firstLetter !== currentLetter && onNewLetter(firstLetter)}
+              <label className="result-item">
+                <div className="flex grow align-center">
+                  <div
+                    className="avatar-container"
+                    onClick={e => {
+                      // Prevent selecting result when trying to add to whitelist.
+                      e.preventDefault();
+                      e.stopPropagation();
+                      let whitelistedResults: readonly UserNode[] = [];
+                      switch (state.currentTab) {
+                        case "non_whitelisted":
+                          whitelistedResults = [...state.whitelistedResults, user];
+                          break;
+
+                        case "whitelisted":
+                          whitelistedResults = state.whitelistedResults.filter(
+                            result => result.id !== user.id,
+                          );
+                          break;
+
+                        default:
+                          assertUnreachable(state.currentTab);
+                      }
+                      localStorage.setItem(
+                        "WHITELISTED_RESULTS_STORAGE_KEY",
+                        JSON.stringify(whitelistedResults),
+                      );
+                      setState({ ...state, whitelistedResults });
+                    }}
+                  >
+                    <img
+                      className="avatar"
+                      alt={user.username}
+                      src={user.profile_pic_url}
+                    />
+                    <span className="avatar-icon-overlay-container">
+                      {state.currentTab === "non_whitelisted" ? (
+                        <UserCheckIcon />
+                      ) : (
+                        <UserUncheckIcon />
+                      )}
+                    </span>
+                  </div>
+                  <div className="flex column m-medium">
+                    <a
+                      className="fs-xlarge"
+                      target="_blank"
+                      href={`/${user.username}`}
+                      rel="noreferrer"
+                    >
+                      {user.username}
+                    </a>
+                    <span className="fs-medium">{user.full_name}</span>
+                  </div>
+                  {user.is_verified && <div className="verified-badge">✔</div>}
+                  {user.is_private && (
+                    <div className="flex justify-center w-100">
+                      <span className="private-indicator">Private</span>
+                    </div>
+                  )}
+                </div>
+                <input
+                  className="account-checkbox"
+                  type="checkbox"
+                  checked={state.selectedResults.indexOf(user) !== -1}
+                  onChange={e => toggleUser(e.currentTarget.checked, user)}
+                />
+              </label>
+            </>
+          );
+        })}
+      </article>
+    </section>
+  );
+};
diff --git a/src/components/SettingMenu.tsx b/src/components/SettingMenu.tsx
new file mode 100644
index 0000000..ca50ea1
--- /dev/null
+++ b/src/components/SettingMenu.tsx
@@ -0,0 +1,113 @@
+import React, { useState } from "react";
+import { Timings } from "../model/timings";
+
+interface SettingMenuProps {
+  setSettingState: (state: boolean) => void;
+  currentTimings: Timings;
+  setTimings: (timings: Timings) => void;
+}
+
+export const SettingMenu = ({
+                              setSettingState,
+                              currentTimings,
+                              setTimings,
+                            }: SettingMenuProps) => {
+  const [timeBetweenSearchCycles, setTimeBetweenSearchCycles] = useState(currentTimings.timeBetweenSearchCycles);
+  const [timeToWaitAfterFiveSearchCycles, setTimeToWaitAfterFiveSearchCycles] = useState(currentTimings.timeToWaitAfterFiveSearchCycles);
+  const [timeBetweenUnfollows, setTimeBetweenUnfollows] = useState(currentTimings.timeBetweenUnfollows);
+  const [timeToWaitAfterFiveUnfollows, setTimeToWaitAfterFiveUnfollows] = useState(currentTimings.timeToWaitAfterFiveUnfollows);
+
+  const handleSave = (event: any) => {
+    event.preventDefault();
+    setTimings({
+      timeBetweenSearchCycles,
+      timeToWaitAfterFiveSearchCycles,
+      timeBetweenUnfollows,
+      timeToWaitAfterFiveUnfollows,
+    });
+    setSettingState(false);
+  };
+
+  // @ts-ignore
+  const handleInputChange = (event: any, setter: (value: number) => void) => {
+
+    const value = Number(event?.target?.value);
+    setter(value);
+  };
+
+  return (
+    <form onSubmit={handleSave}>
+      <div className="backdrop">
+        <div className="setting-menu">
+          <div>
+            <h3>Settings</h3>
+          </div>
+
+          <div className="row">
+            <label className="minimun-width">Default time between search cycles</label>
+            <input
+              type="number"
+              id="searchCycles"
+              name="searchCycles"
+              min={1000}
+              max={999999}
+              value={timeBetweenSearchCycles}
+              onChange={(e) => handleInputChange(e, setTimeBetweenSearchCycles)}
+            />
+            <label className="margin-between-input-and-label">(ms)</label>
+          </div>
+
+          <div className="row">
+            <label className="minimun-width">Default time to wait after five search cycles</label>
+            <input
+              type="number"
+              id="fiveSearchCycles"
+              name="fiveSearchCycles"
+              min={10000}
+              max={999999}
+              value={timeToWaitAfterFiveSearchCycles}
+              onChange={(e) => handleInputChange(e, setTimeToWaitAfterFiveSearchCycles)}
+            />
+            <label className="margin-between-input-and-label">(ms)</label>
+          </div>
+
+          <div className="row">
+            <label className="minimun-width">Default time between unfollows</label>
+            <input
+              type="number"
+              id="timeBetweenUnfollow"
+              name="timeBetweenUnfollow"
+              min={2500}
+              max={999999}
+              value={timeBetweenUnfollows}
+              onChange={(e) => handleInputChange(e, setTimeBetweenUnfollows)}
+            />
+            <label className="margin-between-input-and-label">(ms)</label>
+          </div>
+
+          <div className="row">
+            <label className="minimun-width">Default time to wait after five unfollows</label>
+            <input
+              type="number"
+              id="timeAfterFiveUnfollows"
+              name="timeAfterFiveUnfollows"
+              min={30000}
+              max={999999}
+              value={timeToWaitAfterFiveUnfollows}
+              onChange={(e) => handleInputChange(e, setTimeToWaitAfterFiveUnfollows)}
+            />
+            <label className="margin-between-input-and-label">(ms)</label>
+          </div>
+          <div>
+            <h3 className="warning"><b>WARNING:</b> Modifying these settings can lead to your account being banned.</h3>
+            <h3 className="warning">USE IT AT YOUR OWN RISK!!!!</h3>
+          </div>
+          <div className="btn-container">
+            <button className="btn" type="button" onClick={() => setSettingState(false)}>Cancel</button>
+            <button className="btn" type="submit">Save</button>
+          </div>
+        </div>
+      </div>
+    </form>
+  );
+};
diff --git a/src/components/toast.tsx b/src/components/Toast.tsx
similarity index 100%
rename from src/components/toast.tsx
rename to src/components/Toast.tsx
diff --git a/src/components/Toolbar.tsx b/src/components/Toolbar.tsx
new file mode 100644
index 0000000..de80c4a
--- /dev/null
+++ b/src/components/Toolbar.tsx
@@ -0,0 +1,178 @@
+import React, { ChangeEvent, useState } from "react";
+import { State } from "../model/state";
+import { assertUnreachable, copyListToClipboard, getUsersForDisplay } from "../utils/utils";
+import { SettingMenu } from "./SettingMenu";
+import { SettingIcon } from "./icons/SettingIcon";
+import { Timings } from "../model/timings";
+
+interface ToolBarProps {
+  isActiveProcess: boolean;
+  state: State;
+  setState: (state: State) => void;
+  scanningPaused: boolean;
+  toggleAllUsers: (e: ChangeEvent<HTMLInputElement>) => void;
+  toggleCurrentePageUsers: (e: ChangeEvent<HTMLInputElement>) => void;
+  currentTimings: Timings;
+  setTimings: (timings: Timings) => void;
+}
+
+export const Toolbar = ({
+                          isActiveProcess,
+                          state,
+                          setState,
+                          scanningPaused,
+                          toggleAllUsers,
+                          toggleCurrentePageUsers,
+                          currentTimings,
+                          setTimings,
+                        }: ToolBarProps) => {
+
+  const [setingMenu, setSettingMenu] = useState(false);
+
+  return (
+    <header className="app-header">
+      {isActiveProcess && (
+        <progress
+          className="progressbar"
+          value={state.status !== "initial" ? state.percentage : 0}
+          max="100"
+        />
+      )}
+      <div className="app-header-content">
+        <div
+          className="logo"
+          onClick={() => {
+            if (isActiveProcess) {
+              // Avoid resetting state while active process.
+              return;
+            }
+            switch (state.status) {
+              case "initial":
+                if (confirm("Go back to Instagram?")) {
+                  location.reload();
+                }
+                break;
+
+              case "scanning":
+              case "unfollowing":
+                setState({
+                  status: "initial",
+                });
+            }
+          }}
+        >
+          InstagramUnfollowers
+        </div>
+        <button
+          className="copy-list"
+          onClick={() => {
+            switch (state.status) {
+              case "scanning":
+                return copyListToClipboard(
+                  getUsersForDisplay(
+                    state.results,
+                    state.whitelistedResults,
+                    state.currentTab,
+                    state.searchTerm,
+                    state.filter,
+                  ),
+                );
+              case "initial":
+              case "unfollowing":
+                return;
+              default:
+                assertUnreachable(state);
+            }
+          }}
+          disabled={state.status === "initial"}
+        >
+          COPY LIST
+        </button>
+        {
+          state.status === "initial" && <SettingIcon onClickLogo={() => {setSettingMenu(true);}} />
+        }
+        <input
+          type="text"
+          className="search-bar"
+          placeholder="Search..."
+          disabled={state.status === "initial"}
+          value={state.status === "initial" ? "" : state.searchTerm}
+          onChange={e => {
+            switch (state.status) {
+              case "initial":
+                return;
+              case "scanning":
+                return setState({
+                  ...state,
+                  searchTerm: e.currentTarget.value,
+                });
+              case "unfollowing":
+                return setState({
+                  ...state,
+                  searchTerm: e.currentTarget.value,
+                });
+              default:
+                assertUnreachable(state);
+            }
+          }}
+        />
+        {state.status === "scanning" && (
+          <input
+            title="Select all on this page"
+            type="checkbox"
+            // Avoid allowing to select all before scan completed to avoid confusion
+            // regarding what exactly is selected while scanning in progress.
+            disabled={
+              // if paused, allow to select all even if scan is not completed.
+              state.percentage < 100 && !scanningPaused
+            }
+            checked={
+              state.selectedResults.length ===
+              getUsersForDisplay(
+                state.results,
+                state.whitelistedResults,
+                state.currentTab,
+                state.searchTerm,
+                state.filter,
+              ).length
+            }
+            className="toggle-all-checkbox"
+            onClick={toggleCurrentePageUsers}
+          />
+        )}
+        {state.status === "scanning" && (
+          <input
+            title="Select all"
+            type="checkbox"
+            // Avoid allowing to select all before scan completed to avoid confusion
+            // regarding what exactly is selected while scanning in progress.
+            disabled={
+              // if paused, allow to select all even if scan is not completed.
+              state.percentage < 100 && !scanningPaused
+            }
+            checked={
+              state.selectedResults.length ===
+              getUsersForDisplay(
+                state.results,
+                state.whitelistedResults,
+                state.currentTab,
+                state.searchTerm,
+                state.filter,
+              ).length
+            }
+            className="toggle-all-checkbox"
+            onClick={toggleAllUsers}
+          />
+        )}
+      </div>
+      {(setingMenu) &&
+        <SettingMenu
+          setSettingState={setSettingMenu}
+          currentTimings={currentTimings}
+          setTimings={setTimings}
+        ></SettingMenu>
+      }
+
+    </header>
+  );
+};
diff --git a/src/components/Unfollowing.tsx b/src/components/Unfollowing.tsx
new file mode 100644
index 0000000..dbb6130
--- /dev/null
+++ b/src/components/Unfollowing.tsx
@@ -0,0 +1,81 @@
+import React from "react";
+import { getUnfollowLogForDisplay } from "../utils/utils";
+import { State } from "../model/state";
+
+interface UnfollowingProps {
+  state: State;
+  handleUnfollowFilter: (e: React.ChangeEvent<HTMLInputElement>) => void;
+
+}
+
+export const Unfollowing = (
+  {
+    state,
+    handleUnfollowFilter,
+  }: UnfollowingProps) => {
+
+  if (state.status !== "unfollowing") {
+    return null;
+  }
+
+  return (
+    <section className="flex">
+      <aside className="app-sidebar">
+        <menu className="flex column grow m-clear p-clear">
+          <p>Filter</p>
+          <label className="badge m-small">
+            <input
+              type="checkbox"
+              name="showSucceeded"
+              checked={state.filter.showSucceeded}
+              onChange={handleUnfollowFilter}
+            />
+            &nbsp;Succeeded
+          </label>
+          <label className="badge m-small">
+            <input
+              type="checkbox"
+              name="showFailed"
+              checked={state.filter.showFailed}
+              onChange={handleUnfollowFilter}
+            />
+            &nbsp;Failed
+          </label>
+        </menu>
+      </aside>
+      <article className="unfollow-log-container">
+        {state.unfollowLog.length === state.selectedResults.length && (
+          <>
+            <hr />
+            <div className="fs-large p-medium clr-green">All DONE!</div>
+            <hr />
+          </>
+        )}
+        {getUnfollowLogForDisplay(state.unfollowLog, state.searchTerm, state.filter).map(
+          (entry, index) =>
+            entry.unfollowedSuccessfully ? (
+              <div className="p-medium" key={entry.user.id}>
+                Unfollowed
+                <a
+                  className="clr-inherit"
+                  target="_blank"
+                  href={`../${entry.user.username}`}
+                  rel="noreferrer"
+                >
+                  &nbsp;{entry.user.username}
+                </a>
+                <span className="clr-cyan">
+                                            &nbsp; [{index + 1}/{state.selectedResults.length}]
+                                        </span>
+              </div>
+            ) : (
+              <div className="p-medium clr-red" key={entry.user.id}>
+                Failed to unfollow {entry.user.username} [{index + 1}/
+                {state.selectedResults.length}]
+              </div>
+            ),
+        )}
+      </article>
+    </section>
+  );
+};
diff --git a/src/components/icons/SettingIcon.tsx b/src/components/icons/SettingIcon.tsx
new file mode 100644
index 0000000..4a7e156
--- /dev/null
+++ b/src/components/icons/SettingIcon.tsx
@@ -0,0 +1,50 @@
+import React from "react";
+
+interface SettingIconProps {
+  onClickLogo: (func: any) => void;
+}
+
+export const SettingIcon = (
+  {
+    onClickLogo,
+  }: SettingIconProps,
+) => {
+  return (
+    <svg
+      style={{ cursor: "pointer" }}
+      fill="#FFFF00"
+      height="35px"
+      width="35px"
+      viewBox="0 0 54 54"
+      onClick={onClickLogo}
+    >
+      <g>
+        <path d="M51.22,21h-5.052c-0.812,0-1.481-0.447-1.792-1.197s-0.153-1.54,0.42-2.114l3.572-3.571
+      c0.525-0.525,0.814-1.224,0.814-1.966c0-0.743-0.289-1.441-0.814-1.967l-4.553-4.553c-1.05-1.05-2.881-1.052-3.933,0l-3.571,3.571
+      c-0.574,0.573-1.366,0.733-2.114,0.421C33.447,9.313,33,8.644,33,7.832V2.78C33,1.247,31.753,0,30.22,0H23.78
+      C22.247,0,21,1.247,21,2.78v5.052c0,0.812-0.447,1.481-1.197,1.792c-0.748,0.313-1.54,0.152-2.114-0.421l-3.571-3.571
+      c-1.052-1.052-2.883-1.05-3.933,0l-4.553,4.553c-0.525,0.525-0.814,1.224-0.814,1.967c0,0.742,0.289,1.44,0.814,1.966l3.572,3.571
+      c0.573,0.574,0.73,1.364,0.42,2.114S8.644,21,7.832,21H2.78C1.247,21,0,22.247,0,23.78v6.439C0,31.753,1.247,33,2.78,33h5.052
+      c0.812,0,1.481,0.447,1.792,1.197s0.153,1.54-0.42,2.114l-3.572,3.571c-0.525,0.525-0.814,1.224-0.814,1.966
+      c0,0.743,0.289,1.441,0.814,1.967l4.553,4.553c1.051,1.051,2.881,1.053,3.933,0l3.571-3.572c0.574-0.573,1.363-0.731,2.114-0.42
+      c0.75,0.311,1.197,0.98,1.197,1.792v5.052c0,1.533,1.247,2.78,2.78,2.78h6.439c1.533,0,2.78-1.247,2.78-2.78v-5.052
+      c0-0.812,0.447-1.481,1.197-1.792c0.751-0.312,1.54-0.153,2.114,0.42l3.571,3.572c1.052,1.052,2.883,1.05,3.933,0l4.553-4.553
+      c0.525-0.525,0.814-1.224,0.814-1.967c0-0.742-0.289-1.44-0.814-1.966l-3.572-3.571c-0.573-0.574-0.73-1.364-0.42-2.114
+      S45.356,33,46.168,33h5.052c1.533,0,2.78-1.247,2.78-2.78V23.78C54,22.247,52.753,21,51.22,21z M52,30.22
+      C52,30.65,51.65,31,51.22,31h-5.052c-1.624,0-3.019,0.932-3.64,2.432c-0.622,1.5-0.295,3.146,0.854,4.294l3.572,3.571
+      c0.305,0.305,0.305,0.8,0,1.104l-4.553,4.553c-0.304,0.304-0.799,0.306-1.104,0l-3.571-3.572c-1.149-1.149-2.794-1.474-4.294-0.854
+      c-1.5,0.621-2.432,2.016-2.432,3.64v5.052C31,51.65,30.65,52,30.22,52H23.78C23.35,52,23,51.65,23,51.22v-5.052
+      c0-1.624-0.932-3.019-2.432-3.64c-0.503-0.209-1.021-0.311-1.533-0.311c-1.014,0-1.997,0.4-2.761,1.164l-3.571,3.572
+      c-0.306,0.306-0.801,0.304-1.104,0l-4.553-4.553c-0.305-0.305-0.305-0.8,0-1.104l3.572-3.571c1.148-1.148,1.476-2.794,0.854-4.294
+      C10.851,31.932,9.456,31,7.832,31H2.78C2.35,31,2,30.65,2,30.22V23.78C2,23.35,2.35,23,2.78,23h5.052
+      c1.624,0,3.019-0.932,3.64-2.432c0.622-1.5,0.295-3.146-0.854-4.294l-3.572-3.571c-0.305-0.305-0.305-0.8,0-1.104l4.553-4.553
+      c0.304-0.305,0.799-0.305,1.104,0l3.571,3.571c1.147,1.147,2.792,1.476,4.294,0.854C22.068,10.851,23,9.456,23,7.832V2.78
+      C23,2.35,23.35,2,23.78,2h6.439C30.65,2,31,2.35,31,2.78v5.052c0,1.624,0.932,3.019,2.432,3.64
+      c1.502,0.622,3.146,0.294,4.294-0.854l3.571-3.571c0.306-0.305,0.801-0.305,1.104,0l4.553,4.553c0.305,0.305,0.305,0.8,0,1.104
+      l-3.572,3.571c-1.148,1.148-1.476,2.794-0.854,4.294c0.621,1.5,2.016,2.432,3.64,2.432h5.052C51.65,23,52,23.35,52,23.78V30.22z" />
+        <path d="M27,18c-4.963,0-9,4.037-9,9s4.037,9,9,9s9-4.037,9-9S31.963,18,27,18z M27,34c-3.859,0-7-3.141-7-7s3.141-7,7-7
+      s7,3.141,7,7S30.859,34,27,34z" />
+      </g>
+    </svg>
+  );
+};
diff --git a/src/components/icons/UserUncheckIcon.tsx b/src/components/icons/UserUncheckIcon.tsx
index 7fcc334..992de56 100644
--- a/src/components/icons/UserUncheckIcon.tsx
+++ b/src/components/icons/UserUncheckIcon.tsx
@@ -5,7 +5,7 @@ export const UserUncheckIcon = () => (
         width='35'
         height='35'
         viewBox='0 0 24 24'
-        fill='none'
+        fill='#FFFFFF'
         stroke='currentColor'
         strokeWidth='2'
         strokeLinecap='round'
diff --git a/src/constants/constants.ts b/src/constants/constants.ts
new file mode 100644
index 0000000..05d17f4
--- /dev/null
+++ b/src/constants/constants.ts
@@ -0,0 +1,9 @@
+export const INSTAGRAM_HOSTNAME = 'www.instagram.com';
+export const UNFOLLOWERS_PER_PAGE = 50;
+export const WHITELISTED_RESULTS_STORAGE_KEY = 'iu_whitelisted-results';
+
+//TIMINGS CONSTANTS
+export const DEFAULT_TIME_BETWEEN_SEARCH_CYCLES = 1000;
+export const DEFAULT_TIME_TO_WAIT_AFTER_FIVE_SEARCH_CYCLES = 10000;
+export const DEFAULT_TIME_BETWEEN_UNFOLLOWS = 4000;
+export const DEFAULT_TIME_TO_WAIT_AFTER_FIVE_UNFOLLOWS = 30000;
diff --git a/src/main.tsx b/src/main.tsx
index 395e027..169679b 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,945 +1,424 @@
-import React, { useEffect, useState, ChangeEvent } from 'react';
-import { render } from 'react-dom';
-import './styles.scss';
-
-import { Node, User } from './model/user';
-import { urlGenerator, assertUnreachable, getCookie, sleep, unfollowUserUrlGenerator } from './utils';
-import { Toast } from './components/toast';
-import { UserCheckIcon } from './components/icons/UserCheckIcon';
-import { UserUncheckIcon } from './components/icons/UserUncheckIcon';
-
-const INSTAGRAM_HOSTNAME = 'www.instagram.com';
-const UNFOLLOWERS_PER_PAGE = 50;
-const WHITELISTED_RESULTS_STORAGE_KEY = 'iu_whitelisted-results';
-
-async function copyListToClipboard(nonFollowersList: readonly Node[]): Promise<void> {
-    const sortedList = [...nonFollowersList].sort((a, b) => (a.username > b.username ? 1 : -1));
-
-    let output = '';
-    sortedList.forEach(user => {
-        output += user.username + '\n';
-    });
-
-    await navigator.clipboard.writeText(output);
-    alert('List copied to clipboard!');
-}
-
-function getMaxPage(nonFollowersList: readonly Node[]): number {
-    const pageCalc = Math.ceil(nonFollowersList.length / UNFOLLOWERS_PER_PAGE);
-    return pageCalc < 1 ? 1 : pageCalc;
-}
-
-function getCurrentPageUnfollowers(nonFollowersList: readonly Node[], currentPage: number): readonly Node[] {
-    const sortedList = [...nonFollowersList].sort((a, b) => (a.username > b.username ? 1 : -1));
-    return sortedList.splice(UNFOLLOWERS_PER_PAGE * (currentPage - 1), UNFOLLOWERS_PER_PAGE);
-}
-
-function getUsersForDisplay(
-    results: readonly Node[],
-    whitelistedResults: readonly Node[],
-    currentTab: ScanningTab,
-    searchTerm: string,
-    filter: ScanningFilter,
-): readonly Node[] {
-    const users: Node[] = [];
-    for (const result of results) {
-        const isWhitelisted = whitelistedResults.find(user => user.id === result.id) !== undefined;
-        switch (currentTab) {
-            case 'non_whitelisted':
-                if (isWhitelisted) {
-                    continue;
-                }
-                break;
-            case 'whitelisted':
-                if (!isWhitelisted) {
-                    continue;
-                }
-                break;
-            default:
-                assertUnreachable(currentTab);
-        }
-        if (!filter.showPrivate && result.is_private) {
-            continue;
-        }
-        if (!filter.showVerified && result.is_verified) {
-            continue;
-        }
-        if (!filter.showFollowers && result.follows_viewer) {
-            continue;
-        }
-        if (!filter.showNonFollowers && !result.follows_viewer) {
-            continue;
-        }
-        const userMatchesSearchTerm =
-            result.username.toLowerCase().includes(searchTerm.toLowerCase()) ||
-            result.full_name.toLowerCase().includes(searchTerm.toLowerCase());
-        if (searchTerm !== '' && !userMatchesSearchTerm) {
-            continue;
-        }
-        users.push(result);
-    }
-    return users;
-}
-
-function getUnfollowLogForDisplay(log: readonly UnfollowLogEntry[], searchTerm: string, filter: UnfollowFilter) {
-    const entries: UnfollowLogEntry[] = [];
-    for (const entry of log) {
-        if (!filter.showSucceeded && entry.unfollowedSuccessfully) {
-            continue;
-        }
-        if (!filter.showFailed && !entry.unfollowedSuccessfully) {
-            continue;
-        }
-        const userMatchesSearchTerm = entry.user.username.toLowerCase().includes(searchTerm.toLowerCase());
-        if (searchTerm !== '' && !userMatchesSearchTerm) {
-            continue;
-        }
-        entries.push(entry);
-    }
-    return entries;
-}
+import React, { ChangeEvent, useEffect, useState } from "react";
+import { render } from "react-dom";
+import "./styles.scss";
+
+import { User, UserNode } from "./model/user";
+import { Toast } from "./components/Toast";
+import { UserCheckIcon } from "./components/icons/UserCheckIcon";
+import { UserUncheckIcon } from "./components/icons/UserUncheckIcon";
+import { DEFAULT_TIME_BETWEEN_SEARCH_CYCLES,
+  DEFAULT_TIME_BETWEEN_UNFOLLOWS,
+  DEFAULT_TIME_TO_WAIT_AFTER_FIVE_SEARCH_CYCLES,
+  DEFAULT_TIME_TO_WAIT_AFTER_FIVE_UNFOLLOWS, INSTAGRAM_HOSTNAME, WHITELISTED_RESULTS_STORAGE_KEY } from "./constants/constants";
+import {
+  assertUnreachable,
+  getCookie,
+  getCurrentPageUnfollowers,
+  getUsersForDisplay, sleep, unfollowUserUrlGenerator, urlGenerator,
+} from "./utils/utils";
+import { NotSearching } from "./components/NotSearching";
+import { State } from "./model/state";
+import { Searching } from "./components/Searching";
+import { Toolbar } from "./components/Toolbar";
+import { Unfollowing } from "./components/Unfollowing";
+import { Timings } from "./model/timings";
 
 // pause
 let scanningPaused = false;
-function pauseScan() {
-    scanningPaused = !scanningPaused;
-}
-
-type ScanningTab = 'non_whitelisted' | 'whitelisted';
 
-interface ScanningFilter {
-    readonly showNonFollowers: boolean;
-    readonly showFollowers: boolean;
-    readonly showVerified: boolean;
-    readonly showPrivate: boolean;
+function pauseScan() {
+  scanningPaused = !scanningPaused;
 }
 
-interface UnfollowFilter {
-    readonly showSucceeded: boolean;
-    readonly showFailed: boolean;
-}
 
-interface UnfollowLogEntry {
-    readonly user: Node;
-    readonly unfollowedSuccessfully: boolean;
-}
-
-type State =
-    | {
-        readonly status: 'initial';
+function App() {
+  const [state, setState] = useState<State>({
+    status: "initial",
+  });
+
+  const [toast, setToast] = useState<{ readonly show: false } | { readonly show: true; readonly text: string }>({
+    show: false,
+  });
+
+  //TODO FOR NEXT UPDATE SAVE THIS IN STORAGE
+  const [timings, setTimings] = useState<Timings>(
+    {
+      timeBetweenSearchCycles: DEFAULT_TIME_BETWEEN_SEARCH_CYCLES,
+      timeToWaitAfterFiveSearchCycles: DEFAULT_TIME_TO_WAIT_AFTER_FIVE_SEARCH_CYCLES,
+      timeBetweenUnfollows: DEFAULT_TIME_BETWEEN_UNFOLLOWS,
+      timeToWaitAfterFiveUnfollows: DEFAULT_TIME_TO_WAIT_AFTER_FIVE_UNFOLLOWS,
     }
-    | {
-        readonly status: 'scanning';
-        readonly page: number;
-        readonly currentTab: ScanningTab;
-        readonly searchTerm: string;
-        readonly percentage: number;
-        readonly results: readonly Node[];
-        readonly whitelistedResults: readonly Node[];
-        readonly selectedResults: readonly Node[];
-        readonly filter: ScanningFilter;
+  );
+
+
+  let isActiveProcess: boolean;
+  switch (state.status) {
+    case "initial":
+      isActiveProcess = false;
+      break;
+    case "scanning":
+    case "unfollowing":
+      isActiveProcess = state.percentage < 100;
+      break;
+    default:
+      assertUnreachable(state);
+  }
+
+  const onScan = async () => {
+    if (state.status !== "initial") {
+      return;
     }
-    | {
-        readonly status: 'unfollowing';
-        readonly searchTerm: string;
-        readonly percentage: number;
-        readonly selectedResults: readonly Node[];
-        readonly unfollowLog: readonly UnfollowLogEntry[];
-        readonly filter: UnfollowFilter;
-    };
+    const whitelistedResultsFromStorage: string | null = localStorage.getItem(WHITELISTED_RESULTS_STORAGE_KEY);
+    const whitelistedResults: readonly UserNode[] =
+      whitelistedResultsFromStorage === null ? [] : JSON.parse(whitelistedResultsFromStorage);
+    setState({
+      status: "scanning",
+      page: 1,
+      searchTerm: "",
+      currentTab: "non_whitelisted",
+      percentage: 0,
+      results: [],
+      selectedResults: [],
+      whitelistedResults,
+      filter: {
+        showNonFollowers: true,
+        showFollowers: false,
+        showVerified: true,
+        showPrivate: true,
+      },
+    });
+  };
 
-function App() {
-    const [state, setState] = useState<State>({
-        status: 'initial',
+  const handleScanFilter = (e: ChangeEvent<HTMLInputElement>) => {
+    if (state.status !== "scanning") {
+      return;
+    }
+    if (state.selectedResults.length > 0) {
+      if (!confirm("Changing filter options will clear selected users")) {
+        // Force re-render. Bit of a hack but had an issue where the checkbox state was still
+        // changing in the UI even even when not confirming. So updating the state fixes this
+        // by synchronizing the checkboxes with the filter statuses in the state.
+        setState({ ...state });
+        return;
+      }
+    }
+    setState({
+      ...state,
+      // Make sure to clear selected results when changing filter options. This is to avoid having
+      // users selected in the unfollow queue but not visible in the UI, which would be confusing.
+      selectedResults: [],
+      filter: {
+        ...state.filter,
+        [e.currentTarget.name]: e.currentTarget.checked,
+      },
     });
-    const [toast, setToast] = useState<{ readonly show: false } | { readonly show: true; readonly text: string }>({
-        show: false,
+  };
+
+  const handleUnfollowFilter = (e: ChangeEvent<HTMLInputElement>) => {
+    if (state.status !== "unfollowing") {
+      return;
+    }
+    setState({
+      ...state,
+      filter: {
+        ...state.filter,
+        [e.currentTarget.name]: e.currentTarget.checked,
+      },
     });
+  };
 
-    let isActiveProcess: boolean;
-    switch (state.status) {
-        case 'initial':
-            isActiveProcess = false;
-            break;
-        case 'scanning':
-        case 'unfollowing':
-            isActiveProcess = state.percentage < 100;
-            break;
-        default:
-            assertUnreachable(state);
+  const toggleUser = (newStatus: boolean, user: UserNode) => {
+    if (state.status !== "scanning") {
+      return;
     }
+    if (newStatus) {
+      setState({
+        ...state,
+        selectedResults: [...state.selectedResults, user],
+      });
+    } else {
+      setState({
+        ...state,
+        selectedResults: state.selectedResults.filter(result => result.id !== user.id),
+      });
+    }
+  };
 
-    const onScan = async () => {
-        if (state.status !== 'initial') {
-            return;
-        }
-        const whitelistedResultsFromStorage: string | null = localStorage.getItem(WHITELISTED_RESULTS_STORAGE_KEY);
-        const whitelistedResults: readonly Node[] =
-            whitelistedResultsFromStorage === null ? [] : JSON.parse(whitelistedResultsFromStorage);
-        setState({
-            status: 'scanning',
-            page: 1,
-            searchTerm: '',
-            currentTab: 'non_whitelisted',
-            percentage: 0,
-            results: [],
-            selectedResults: [],
-            whitelistedResults,
-            filter: {
-                showNonFollowers: true,
-                showFollowers: false,
-                showVerified: true,
-                showPrivate: true,
-            },
-        });
-    };
+  const toggleAllUsers = (e: ChangeEvent<HTMLInputElement>) => {
+    if (state.status !== "scanning") {
+      return;
+    }
+    if (e.currentTarget.checked) {
+      setState({
+        ...state,
+        selectedResults: getUsersForDisplay(
+          state.results,
+          state.whitelistedResults,
+          state.currentTab,
+          state.searchTerm,
+          state.filter,
+        ),
+      });
+    } else {
+      setState({
+        ...state,
+        selectedResults: [],
+      });
+    }
+  };
 
-    const handleScanFilter = (e: ChangeEvent<HTMLInputElement>) => {
-        if (state.status !== 'scanning') {
-            return;
-        }
-        if (state.selectedResults.length > 0) {
-            if (!confirm('Changing filter options will clear selected users')) {
-                // Force re-render. Bit of a hack but had an issue where the checkbox state was still
-                // changing in the UI even even when not confirming. So updating the state fixes this
-                // by synchronizing the checkboxes with the filter statuses in the state.
-                setState({ ...state });
-                return;
-            }
-        }
-        setState({
-            ...state,
-            // Make sure to clear selected results when changing filter options. This is to avoid having
-            // users selected in the unfollow queue but not visible in the UI, which would be confusing.
-            selectedResults: [],
-            filter: {
-                ...state.filter,
-                [e.currentTarget.name]: e.currentTarget.checked,
-            },
-        });
+  // it will work the same as toggleAllUsers, but it will select everyone on the current page.
+  const toggleCurrentePageUsers = (e: ChangeEvent<HTMLInputElement>) => {
+    if (state.status !== "scanning") {
+      return;
+    }
+    if (e.currentTarget.checked) {
+      setState({
+        ...state,
+        selectedResults: getCurrentPageUnfollowers(
+          getUsersForDisplay(
+            state.results,
+            state.whitelistedResults,
+            state.currentTab,
+            state.searchTerm,
+            state.filter,
+          ),
+          state.page,
+        ),
+      });
+    } else {
+      setState({
+        ...state,
+        selectedResults: [],
+      });
+    }
+  };
+
+  useEffect(() => {
+    const onBeforeUnload = (e: BeforeUnloadEvent) => {
+      // Prompt user if he tries to leave while in the middle of a process (searching / unfollowing / etc..)
+      // This is especially good for avoiding accidental tab closing which would result in a frustrating experience.
+      if (!isActiveProcess) {
+        return;
+      }
+
+      // `e` Might be undefined in older browsers, so silence linter for this one.
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+      e = e || window.event;
+
+      // `e` Might be undefined in older browsers, so silence linter for this one.
+      // For IE and Firefox prior to version 4
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+      if (e) {
+        e.returnValue = "Changes you made may not be saved.";
+      }
+
+      // For Safari
+      return "Changes you made may not be saved.";
     };
-
-    const handleUnfollowFilter = (e: ChangeEvent<HTMLInputElement>) => {
-        if (state.status !== 'unfollowing') {
-            return;
+    window.addEventListener("beforeunload", onBeforeUnload);
+    return () => window.removeEventListener("beforeunload", onBeforeUnload);
+  }, [isActiveProcess, state]);
+
+  useEffect(() => {
+    const scan = async () => {
+      if (state.status !== "scanning") {
+        return;
+      }
+      const results = [...state.results];
+      let scrollCycle = 0;
+      let url = urlGenerator();
+      let hasNext = true;
+      let currentFollowedUsersCount = 0;
+      let totalFollowedUsersCount = -1;
+
+      while (hasNext) {
+        let receivedData: User;
+        try {
+          receivedData = (await fetch(url).then(res => res.json())).data.user.edge_follow;
+        } catch (e) {
+          console.error(e);
+          continue;
         }
-        setState({
-            ...state,
-            filter: {
-                ...state.filter,
-                [e.currentTarget.name]: e.currentTarget.checked,
-            },
-        });
-    };
 
-    const toggleUser = (newStatus: boolean, user: Node) => {
-        if (state.status !== 'scanning') {
-            return;
-        }
-        if (newStatus) {
-            setState({
-                ...state,
-                selectedResults: [...state.selectedResults, user],
-            });
-        } else {
-            setState({
-                ...state,
-                selectedResults: state.selectedResults.filter(result => result.id !== user.id),
-            });
+        if (totalFollowedUsersCount === -1) {
+          totalFollowedUsersCount = receivedData.count;
         }
-    };
 
-    const toggleAllUsers = (e: ChangeEvent<HTMLInputElement>) => {
-        if (state.status !== 'scanning') {
-            return;
-        }
-        if (e.currentTarget.checked) {
-            setState({
-                ...state,
-                selectedResults: getUsersForDisplay(
-                    state.results,
-                    state.whitelistedResults,
-                    state.currentTab,
-                    state.searchTerm,
-                    state.filter,
-                ),
-            });
-        } else {
-            setState({
-                ...state,
-                selectedResults: [],
-            });
-        }
-    };
+        hasNext = receivedData.page_info.has_next_page;
+        url = urlGenerator(receivedData.page_info.end_cursor);
+        currentFollowedUsersCount += receivedData.edges.length;
+        receivedData.edges.forEach(x => results.push(x.node));
+
+        setState(prevState => {
+          if (prevState.status !== "scanning") {
+            return prevState;
+          }
+          const newState: State = {
+            ...prevState,
+            percentage: Math.floor((currentFollowedUsersCount / totalFollowedUsersCount) * 100),
+            results,
+          };
+          return newState;
+        });
 
-    // it will work the same as toggleAllUsers, but it will select everyone on the current page.
-    const toggleCurrentePageUsers = (e: ChangeEvent<HTMLInputElement>) => {
-        if (state.status !== 'scanning') {
-            return;
+        // Pause scanning if user requested so.
+        while (scanningPaused) {
+          await sleep(1000);
+          console.info("Scan paused");
         }
-        if (e.currentTarget.checked) {
-            setState({
-                ...state,
-                selectedResults: getCurrentPageUnfollowers(
-                    getUsersForDisplay(
-                        state.results,
-                        state.whitelistedResults,
-                        state.currentTab,
-                        state.searchTerm,
-                        state.filter,
-                    ),
-                    state.page,
-                ),
-            });
-        } else {
-            setState({
-                ...state,
-                selectedResults: [],
-            });
+
+        await sleep(Math.floor(Math.random() * (timings.timeBetweenSearchCycles - timings.timeBetweenSearchCycles * 0.7)) + timings.timeBetweenSearchCycles);
+        scrollCycle++;
+        if (scrollCycle > 6) {
+          scrollCycle = 0;
+          setToast({ show: true, text: "Sleeping 10 secs to prevent getting temp blocked" });
+          await sleep(timings.timeToWaitAfterFiveSearchCycles);
         }
+        setToast({ show: false });
+      }
+      setToast({ show: true, text: "Scanning completed!" });
     };
-
-    useEffect(() => {
-        const onBeforeUnload = (e: BeforeUnloadEvent) => {
-            // Prompt user if he tries to leave while in the middle of a process (searching / unfollowing / etc..)
-            // This is especially good for avoiding accidental tab closing which would result in a frustrating experience.
-            if (!isActiveProcess) {
-                return;
-            }
-
-            // `e` Might be undefined in older browsers, so silence linter for this one.
-            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-            e = e || window.event;
-
-            // `e` Might be undefined in older browsers, so silence linter for this one.
-            // For IE and Firefox prior to version 4
-            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-            if (e) {
-                e.returnValue = 'Changes you made may not be saved.';
-            }
-
-            // For Safari
-            return 'Changes you made may not be saved.';
-        };
-        window.addEventListener('beforeunload', onBeforeUnload);
-        return () => window.removeEventListener('beforeunload', onBeforeUnload);
-    }, [isActiveProcess, state]);
-
-    useEffect(() => {
-        const scan = async () => {
-            if (state.status !== 'scanning') {
-                return;
-            }
-            const results = [...state.results];
-            let scrollCycle = 0;
-            let url = urlGenerator();
-            let hasNext = true;
-            let currentFollowedUsersCount = 0;
-            let totalFollowedUsersCount = -1;
-
-            while (hasNext) {
-                let receivedData: User;
-                try {
-                    receivedData = (await fetch(url).then(res => res.json())).data.user.edge_follow;
-                } catch (e) {
-                    console.error(e);
-                    continue;
-                }
-
-                if (totalFollowedUsersCount === -1) {
-                    totalFollowedUsersCount = receivedData.count;
-                }
-
-                hasNext = receivedData.page_info.has_next_page;
-                url = urlGenerator(receivedData.page_info.end_cursor);
-                currentFollowedUsersCount += receivedData.edges.length;
-                receivedData.edges.forEach(x => results.push(x.node));
-
-                setState(prevState => {
-                    if (prevState.status !== 'scanning') {
-                        return prevState;
-                    }
-                    const newState: State = {
-                        ...prevState,
-                        percentage: Math.floor((currentFollowedUsersCount / totalFollowedUsersCount) * 100),
-                        results,
-                    };
-                    return newState;
-                });
-
-                // Pause scanning if user requested so.
-                while (scanningPaused) {
-                    await sleep(1000);
-                    console.info('Scan paused');
-                }
-
-                await sleep(Math.floor(Math.random() * (1000 - 600)) + 1000);
-                scrollCycle++;
-                if (scrollCycle > 6) {
-                    scrollCycle = 0;
-                    setToast({ show: true, text: 'Sleeping 10 secs to prevent getting temp blocked' });
-                    await sleep(10000);
-                }
-                setToast({ show: false });
-            }
-            setToast({ show: true, text: 'Scanning completed!' });
-        };
-        scan();
-        // Dependency array not entirely legit, but works this way. TODO: Find a way to fix.
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [state.status]);
-
-    useEffect(() => {
-        const unfollow = async () => {
-            if (state.status !== 'unfollowing') {
-                return;
-            }
-
-            const csrftoken = getCookie('csrftoken');
-            if (csrftoken === null) {
-                throw new Error('csrftoken cookie is null');
+    scan();
+    // Dependency array not entirely legit, but works this way. TODO: Find a way to fix.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [state.status]);
+
+  useEffect(() => {
+    const unfollow = async () => {
+      if (state.status !== "unfollowing") {
+        return;
+      }
+
+      const csrftoken = getCookie("csrftoken");
+      if (csrftoken === null) {
+        throw new Error("csrftoken cookie is null");
+      }
+
+      let counter = 0;
+      for (const user of state.selectedResults) {
+        counter += 1;
+        const percentage = Math.floor((counter / state.selectedResults.length) * 100);
+        try {
+          await fetch(unfollowUserUrlGenerator(user.id), {
+            headers: {
+              "content-type": "application/x-www-form-urlencoded",
+              "x-csrftoken": csrftoken,
+            },
+            method: "POST",
+            mode: "cors",
+            credentials: "include",
+          });
+          setState(prevState => {
+            if (prevState.status !== "unfollowing") {
+              return prevState;
             }
-
-            let counter = 0;
-            for (const user of state.selectedResults) {
-                counter += 1;
-                const percentage = Math.floor((counter / state.selectedResults.length) * 100);
-                try {
-                    await fetch(unfollowUserUrlGenerator(user.id), {
-                        headers: {
-                            'content-type': 'application/x-www-form-urlencoded',
-                            'x-csrftoken': csrftoken,
-                        },
-                        method: 'POST',
-                        mode: 'cors',
-                        credentials: 'include',
-                    });
-                    setState(prevState => {
-                        if (prevState.status !== 'unfollowing') {
-                            return prevState;
-                        }
-                        return {
-                            ...prevState,
-                            percentage,
-                            unfollowLog: [
-                                ...prevState.unfollowLog,
-                                {
-                                    user,
-                                    unfollowedSuccessfully: true,
-                                },
-                            ],
-                        };
-                    });
-                } catch (e) {
-                    console.error(e);
-                    setState(prevState => {
-                        if (prevState.status !== 'unfollowing') {
-                            return prevState;
-                        }
-                        return {
-                            ...prevState,
-                            percentage,
-                            unfollowLog: [
-                                ...prevState.unfollowLog,
-                                {
-                                    user,
-                                    unfollowedSuccessfully: false,
-                                },
-                            ],
-                        };
-                    });
-                }
-                // If unfollowing the last user in the list, no reason to wait.
-                if (user === state.selectedResults[state.selectedResults.length - 1]) {
-                    break;
-                }
-                await sleep(Math.floor(Math.random() * (6000 - 4000)) + 4000);
-
-                if (counter % 5 === 0) {
-                    setToast({ show: true, text: 'Sleeping 5 minutes to prevent getting temp blocked' });
-                    await sleep(300000);
-                }
-                setToast({ show: false });
+            return {
+              ...prevState,
+              percentage,
+              unfollowLog: [
+                ...prevState.unfollowLog,
+                {
+                  user,
+                  unfollowedSuccessfully: true,
+                },
+              ],
+            };
+          });
+        } catch (e) {
+          console.error(e);
+          setState(prevState => {
+            if (prevState.status !== "unfollowing") {
+              return prevState;
             }
-        };
-        unfollow();
-        // Dependency array not entirely legit, but works this way. TODO: Find a way to fix.
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [state.status]);
-
-    let markup: React.JSX.Element;
-    switch (state.status) {
-        case 'initial':
-            markup = (
-                <button className='run-scan' onClick={onScan}>
-                    RUN
-                </button>
-            );
-            break;
-
-        case 'scanning': {
-            const usersForDisplay = getUsersForDisplay(
-                state.results,
-                state.whitelistedResults,
-                state.currentTab,
-                state.searchTerm,
-                state.filter,
-            );
-            let currentLetter = '';
-            const onNewLetter = (firstLetter: string) => {
-                currentLetter = firstLetter;
-                return <div className='alphabet-character'>{currentLetter}</div>;
+            return {
+              ...prevState,
+              percentage,
+              unfollowLog: [
+                ...prevState.unfollowLog,
+                {
+                  user,
+                  unfollowedSuccessfully: false,
+                },
+              ],
             };
-            markup = (
-                <section className='flex'>
-                    <aside className='app-sidebar'>
-                        <menu className='flex column m-clear p-clear'>
-                            <p>Filter</p>
-                            <label className='badge m-small'>
-                                <input
-                                    type='checkbox'
-                                    name='showNonFollowers'
-                                    checked={state.filter.showNonFollowers}
-                                    onChange={handleScanFilter}
-                                />
-                                &nbsp;Non-Followers
-                            </label>
-                            <label className='badge m-small'>
-                                <input
-                                    type='checkbox'
-                                    name='showFollowers'
-                                    checked={state.filter.showFollowers}
-                                    onChange={handleScanFilter}
-                                />
-                                &nbsp;Followers
-                            </label>
-                            <label className='badge m-small'>
-                                <input
-                                    type='checkbox'
-                                    name='showVerified'
-                                    checked={state.filter.showVerified}
-                                    onChange={handleScanFilter}
-                                />
-                                &nbsp;Verified
-                            </label>
-                            <label className='badge m-small'>
-                                <input
-                                    type='checkbox'
-                                    name='showPrivate'
-                                    checked={state.filter.showPrivate}
-                                    onChange={handleScanFilter}
-                                />
-                                &nbsp;Private
-                            </label>
-                        </menu>
-                        <div className='grow'>
-                            <p>Displayed: {usersForDisplay.length}</p>
-                            <p>Total: {state.results.length}</p>
-                        </div>
-                        {/* Scan controls */}
-                        <div className='controls'>
-                            <button
-                                className='button-control button-pause'
-                                onClick={pauseScan}>
-                                    {scanningPaused ? 'Resume' : 'Pause'}
-                            </button>
-                        </div>
-                        <div className='grow t-center'>
-                            <p>Pages</p>
-                            <a
-                                onClick={() => {
-                                    if (state.page - 1 > 0) {
-                                        setState({
-                                            ...state,
-                                            page: state.page - 1,
-                                        });
-                                    }
-                                }}
-                                className='p-medium'
-                            >
-                                ❮
-                            </a>
-                            <span>
-                                {state.page}
-                                &nbsp;/&nbsp;
-                                {getMaxPage(usersForDisplay)}
-                            </span>
-                            <a
-                                onClick={() => {
-                                    if (state.page < getMaxPage(usersForDisplay)) {
-                                        setState({
-                                            ...state,
-                                            page: state.page + 1,
-                                        });
-                                    }
-                                }}
-                                className='p-medium'
-                            >
-                                ❯
-                            </a>
-                        </div>
-                        <button
-                            className='unfollow'
-                            onClick={() => {
-                                if (!confirm('Are you sure?')) {
-                                    return;
-                                }
-                                setState(prevState => {
-                                    if (prevState.status !== 'scanning') {
-                                        return prevState;
-                                    }
-                                    if (prevState.selectedResults.length === 0) {
-                                        alert('Must select at least a single user to unfollow');
-                                        return prevState;
-                                    }
-                                    const newState: State = {
-                                        ...prevState,
-                                        status: 'unfollowing',
-                                        percentage: 0,
-                                        unfollowLog: [],
-                                        filter: {
-                                            showSucceeded: true,
-                                            showFailed: true,
-                                        },
-                                    };
-                                    return newState;
-                                });
-                            }}
-                        >
-                            UNFOLLOW ({state.selectedResults.length})
-                        </button>
-                    </aside>
-                    <article className='results-container'>
-                        <nav className='tabs-container'>
-                            <div
-                                className={`tab ${state.currentTab === 'non_whitelisted' ? 'tab-active' : ''}`}
-                                onClick={() => {
-                                    if (state.currentTab === 'non_whitelisted') {
-                                        return;
-                                    }
-                                    setState({
-                                        ...state,
-                                        currentTab: 'non_whitelisted',
-                                        selectedResults: [],
-                                    });
-                                }}
-                            >
-                                Non-Whitelisted
-                            </div>
-                            <div
-                                className={`tab ${state.currentTab === 'whitelisted' ? 'tab-active' : ''}`}
-                                onClick={() => {
-                                    if (state.currentTab === 'whitelisted') {
-                                        return;
-                                    }
-                                    setState({
-                                        ...state,
-                                        currentTab: 'whitelisted',
-                                        selectedResults: [],
-                                    });
-                                }}
-                            >
-                                Whitelisted
-                            </div>
-                        </nav>
-                        {getCurrentPageUnfollowers(usersForDisplay, state.page).map(user => {
-                            const firstLetter = user.username.substring(0, 1).toUpperCase();
-                            return (
-                                <>
-                                    {firstLetter !== currentLetter && onNewLetter(firstLetter)}
-                                    <label className='result-item'>
-                                        <div className='flex grow align-center'>
-                                            <div
-                                                className='avatar-container'
-                                                onClick={e => {
-                                                    // Prevent selecting result when trying to add to whitelist.
-                                                    e.preventDefault();
-                                                    e.stopPropagation();
-                                                    let whitelistedResults: readonly Node[] = [];
-                                                    switch (state.currentTab) {
-                                                        case 'non_whitelisted':
-                                                            whitelistedResults = [...state.whitelistedResults, user];
-                                                            break;
-
-                                                        case 'whitelisted':
-                                                            whitelistedResults = state.whitelistedResults.filter(
-                                                                result => result.id !== user.id,
-                                                            );
-                                                            break;
-
-                                                        default:
-                                                            assertUnreachable(state.currentTab);
-                                                    }
-                                                    localStorage.setItem(
-                                                        WHITELISTED_RESULTS_STORAGE_KEY,
-                                                        JSON.stringify(whitelistedResults),
-                                                    );
-                                                    setState({ ...state, whitelistedResults });
-                                                }}
-                                            >
-                                                <img
-                                                    className='avatar'
-                                                    alt={user.username}
-                                                    src={user.profile_pic_url}
-                                                />
-                                                <span className='avatar-icon-overlay-container'>
-                                                    {state.currentTab === 'non_whitelisted' ? (
-                                                        <UserCheckIcon />
-                                                    ) : (
-                                                        <UserUncheckIcon />
-                                                    )}
-                                                </span>
-                                            </div>
-                                            <div className='flex column m-medium'>
-                                                <a
-                                                    className='fs-xlarge'
-                                                    target='_blank'
-                                                    href={`/${user.username}`}
-                                                    rel='noreferrer'
-                                                >
-                                                    {user.username}
-                                                </a>
-                                                <span className='fs-medium'>{user.full_name}</span>
-                                            </div>
-                                            {user.is_verified && <div className='verified-badge'>✔</div>}
-                                            {user.is_private && (
-                                                <div className='flex justify-center w-100'>
-                                                    <span className='private-indicator'>Private</span>
-                                                </div>
-                                            )}
-                                        </div>
-                                        <input
-                                            className='account-checkbox'
-                                            type='checkbox'
-                                            checked={state.selectedResults.indexOf(user) !== -1}
-                                            onChange={e => toggleUser(e.currentTarget.checked, user)}
-                                        />
-                                    </label>
-                                </>
-                            );
-                        })}
-                    </article>
-                </section>
-            );
-            break;
+          });
+        }
+        // If unfollowing the last user in the list, no reason to wait.
+        if (user === state.selectedResults[state.selectedResults.length - 1]) {
+          break;
         }
+        await sleep(Math.floor(Math.random() * (timings.timeBetweenUnfollows * 1.2 - timings.timeBetweenUnfollows)) + timings.timeBetweenUnfollows);
 
-        case 'unfollowing':
-            markup = (
-                <section className='flex'>
-                    <aside className='app-sidebar'>
-                        <menu className='flex column grow m-clear p-clear'>
-                            <p>Filter</p>
-                            <label className='badge m-small'>
-                                <input
-                                    type='checkbox'
-                                    name='showSucceeded'
-                                    checked={state.filter.showSucceeded}
-                                    onChange={handleUnfollowFilter}
-                                />
-                                &nbsp;Succeeded
-                            </label>
-                            <label className='badge m-small'>
-                                <input
-                                    type='checkbox'
-                                    name='showFailed'
-                                    checked={state.filter.showFailed}
-                                    onChange={handleUnfollowFilter}
-                                />
-                                &nbsp;Failed
-                            </label>
-                        </menu>
-                    </aside>
-                    <article className='unfollow-log-container'>
-                        {state.unfollowLog.length === state.selectedResults.length && (
-                            <>
-                                <hr />
-                                <div className='fs-large p-medium clr-green'>All DONE!</div>
-                                <hr />
-                            </>
-                        )}
-                        {getUnfollowLogForDisplay(state.unfollowLog, state.searchTerm, state.filter).map(
-                            (entry, index) =>
-                                entry.unfollowedSuccessfully ? (
-                                    <div className='p-medium' key={entry.user.id}>
-                                        Unfollowed
-                                        <a
-                                            className='clr-inherit'
-                                            target='_blank'
-                                            href={`../${entry.user.username}`}
-                                            rel='noreferrer'
-                                        >
-                                            &nbsp;{entry.user.username}
-                                        </a>
-                                        <span className='clr-cyan'>
-                                            &nbsp; [{index + 1}/{state.selectedResults.length}]
-                                        </span>
-                                    </div>
-                                ) : (
-                                    <div className='p-medium clr-red' key={entry.user.id}>
-                                        Failed to unfollow {entry.user.username} [{index + 1}/
-                                        {state.selectedResults.length}]
-                                    </div>
-                                ),
-                        )}
-                    </article>
-                </section>
-            );
-            break;
-
-        default:
-            assertUnreachable(state);
+        if (counter % 5 === 0) {
+          setToast({ show: true, text: "Sleeping 5 minutes to prevent getting temp blocked" });
+          await sleep(timings.timeToWaitAfterFiveUnfollows);
+        }
+        setToast({ show: false });
+      }
+    };
+    unfollow();
+    // Dependency array not entirely legit, but works this way. TODO: Find a way to fix.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [state.status]);
+
+  let markup: React.JSX.Element;
+  switch (state.status) {
+    case "initial":
+      markup = <NotSearching onScan={onScan}></NotSearching>;
+      break;
+
+    case "scanning": {
+      markup = <Searching
+        state={state}
+        handleScanFilter={handleScanFilter}
+        toggleUser={toggleUser}
+        pauseScan={pauseScan}
+        setState={setState}
+        scanningPaused={scanningPaused}
+        UserCheckIcon={UserCheckIcon}
+        UserUncheckIcon={UserUncheckIcon}
+      ></Searching>;
+      break;
     }
 
-    return (
-        <main id='main' role='main' className='iu'>
-            <section className='overlay'>
-                <header className='app-header'>
-                    {isActiveProcess && (
-                        <progress
-                            className='progressbar'
-                            value={state.status !== 'initial' ? state.percentage : 0}
-                            max='100'
-                        />
-                    )}
-                    <div className='app-header-content'>
-                        <div
-                            className='logo'
-                            onClick={() => {
-                                if (isActiveProcess) {
-                                    // Avoid resetting state while active process.
-                                    return;
-                                }
-                                switch (state.status) {
-                                    case 'initial':
-                                        if (confirm('Go back to Instagram?')) {
-                                            location.reload();
-                                        }
-                                        break;
-
-                                    case 'scanning':
-                                    case 'unfollowing':
-                                        setState({
-                                            status: 'initial',
-                                        });
-                                }
-                            }}
-                        >
-                            InstagramUnfollowers
-                        </div>
-                        <button
-                            className='copy-list'
-                            onClick={() => {
-                                switch (state.status) {
-                                    case 'scanning':
-                                        return copyListToClipboard(
-                                            getUsersForDisplay(
-                                                state.results,
-                                                state.whitelistedResults,
-                                                state.currentTab,
-                                                state.searchTerm,
-                                                state.filter,
-                                            ),
-                                        );
-                                    case 'initial':
-                                    case 'unfollowing':
-                                        return;
-                                    default:
-                                        assertUnreachable(state);
-                                }
-                            }}
-                            disabled={state.status === 'initial'}
-                        >
-                            COPY LIST
-                        </button>
-                        <input
-                            type='text'
-                            className='search-bar'
-                            placeholder='Search...'
-                            disabled={state.status === 'initial'}
-                            value={state.status === 'initial' ? '' : state.searchTerm}
-                            onChange={e => {
-                                switch (state.status) {
-                                    case 'initial':
-                                        return;
-                                    case 'scanning':
-                                        return setState({
-                                            ...state,
-                                            searchTerm: e.currentTarget.value,
-                                        });
-                                    case 'unfollowing':
-                                        return setState({
-                                            ...state,
-                                            searchTerm: e.currentTarget.value,
-                                        });
-                                    default:
-                                        assertUnreachable(state);
-                                }
-                            }}
-                        />
-                        {state.status === 'scanning' && (
-                            <input
-                                title='Select all on this page'
-                                type='checkbox'
-                                // Avoid allowing to select all before scan completed to avoid confusion
-                                // regarding what exactly is selected while scanning in progress.
-                                disabled={
-                                    // if paused, allow to select all even if scan is not completed.
-                                  state.percentage < 100 && !scanningPaused
-                                }
-                                checked={
-                                    state.selectedResults.length ===
-                                    getUsersForDisplay(
-                                        state.results,
-                                        state.whitelistedResults,
-                                        state.currentTab,
-                                        state.searchTerm,
-                                        state.filter,
-                                    ).length
-                                }
-                                className='toggle-all-checkbox'
-                                onClick={toggleCurrentePageUsers}
-                            />
-                        )}
-                        {state.status === 'scanning' && (
-                            <input
-                                title='Select all'
-                                type='checkbox'
-                                // Avoid allowing to select all before scan completed to avoid confusion
-                                // regarding what exactly is selected while scanning in progress.
-                                disabled={
-                                    // if paused, allow to select all even if scan is not completed.
-                                  state.percentage < 100 && !scanningPaused
-                                }
-                                checked={
-                                    state.selectedResults.length ===
-                                    getUsersForDisplay(
-                                        state.results,
-                                        state.whitelistedResults,
-                                        state.currentTab,
-                                        state.searchTerm,
-                                        state.filter,
-                                    ).length
-                                }
-                                className='toggle-all-checkbox'
-                                onClick={toggleAllUsers}
-                            />
-                        )}
-                    </div>
-                </header>
-
-                {markup}
-
-                {toast.show && <Toast show={toast.show} message={toast.text} onClose={() => setToast({ show: false })} />}
-            </section>
-        </main>
-    );
+    case "unfollowing":
+      markup = <Unfollowing
+        state={state}
+        handleUnfollowFilter={handleUnfollowFilter}
+      ></Unfollowing>;
+      break;
+
+    default:
+      assertUnreachable(state);
+  }
+
+  return (
+    <main id="main" role="main" className="iu">
+      <section className="overlay">
+        <Toolbar
+          state={state}
+          setState={setState}
+          scanningPaused={scanningPaused}
+          isActiveProcess={isActiveProcess}
+          toggleAllUsers={toggleAllUsers}
+          toggleCurrentePageUsers={toggleCurrentePageUsers}
+          setTimings={setTimings}
+          currentTimings={timings}
+        ></Toolbar>
+
+        {markup}
+
+        {toast.show && <Toast show={toast.show} message={toast.text} onClose={() => setToast({ show: false })} />}
+      </section>
+    </main>
+  );
 }
 
 if (location.hostname !== INSTAGRAM_HOSTNAME) {
-    alert('Can be used only on Instagram routes');
+  alert("Can be used only on Instagram routes");
 } else {
-    document.title = 'InstagramUnfollowers';
-    document.body.innerHTML = '';
-    render(<App />, document.body);
+  document.title = "InstagramUnfollowers";
+  document.body.innerHTML = "";
+  render(<App />, document.body);
 }
diff --git a/src/model/scanning-filter.ts b/src/model/scanning-filter.ts
new file mode 100644
index 0000000..2e694b7
--- /dev/null
+++ b/src/model/scanning-filter.ts
@@ -0,0 +1,6 @@
+export interface ScanningFilter {
+  readonly showNonFollowers: boolean;
+  readonly showFollowers: boolean;
+  readonly showVerified: boolean;
+  readonly showPrivate: boolean;
+}
diff --git a/src/model/scanning-tab.ts b/src/model/scanning-tab.ts
new file mode 100644
index 0000000..c11ac78
--- /dev/null
+++ b/src/model/scanning-tab.ts
@@ -0,0 +1 @@
+export type ScanningTab = "non_whitelisted" | "whitelisted";
diff --git a/src/model/searching-props.ts b/src/model/searching-props.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/model/state.ts b/src/model/state.ts
new file mode 100644
index 0000000..a53500b
--- /dev/null
+++ b/src/model/state.ts
@@ -0,0 +1,29 @@
+import { UserNode } from "./user";
+import { ScanningTab } from "./scanning-tab";
+import { ScanningFilter } from "./scanning-filter";
+import { UnfollowLogEntry } from "./unfollow-log-entry";
+import { UnfollowFilter } from "./unfollow-filter";
+
+type ScanningState = {
+  readonly status: 'scanning';
+  readonly page: number;
+  readonly currentTab: ScanningTab;
+  readonly searchTerm: string;
+  readonly percentage: number;
+  readonly results: readonly UserNode[];
+  readonly whitelistedResults: readonly UserNode[];
+  readonly selectedResults: readonly UserNode[];
+  readonly filter: ScanningFilter;
+};
+
+type UnfollowingState = {
+  readonly status: 'unfollowing';
+  readonly searchTerm: string;
+  readonly percentage: number;
+  readonly selectedResults: readonly UserNode[];
+  readonly unfollowLog: readonly UnfollowLogEntry[];
+  readonly filter: UnfollowFilter;
+};
+
+//TODO THIS TYPE OF MULTIPLE STATE NEEDS TO BE SEPARETED IN DIFFERENT FILES ASAP (Global state,unfollowing state, scanning state etc...)
+export type State = { readonly status: 'initial' } | ScanningState | UnfollowingState;
diff --git a/src/model/timings.ts b/src/model/timings.ts
new file mode 100644
index 0000000..bce6cd8
--- /dev/null
+++ b/src/model/timings.ts
@@ -0,0 +1,6 @@
+export interface Timings {
+  timeBetweenSearchCycles: number;
+  timeToWaitAfterFiveSearchCycles: number;
+  timeBetweenUnfollows: number;
+  timeToWaitAfterFiveUnfollows: number;
+}
diff --git a/src/model/unfollow-filter.ts b/src/model/unfollow-filter.ts
new file mode 100644
index 0000000..3e3ae1e
--- /dev/null
+++ b/src/model/unfollow-filter.ts
@@ -0,0 +1,4 @@
+export interface UnfollowFilter {
+  readonly showSucceeded: boolean;
+  readonly showFailed: boolean;
+}
diff --git a/src/model/unfollow-log-entry.ts b/src/model/unfollow-log-entry.ts
new file mode 100644
index 0000000..17fdf5f
--- /dev/null
+++ b/src/model/unfollow-log-entry.ts
@@ -0,0 +1,6 @@
+import { UserNode } from "./user";
+
+export interface UnfollowLogEntry {
+  readonly user: UserNode;
+  readonly unfollowedSuccessfully: boolean;
+}
diff --git a/src/model/user.ts b/src/model/user.ts
index 7469493..2ec913c 100644
--- a/src/model/user.ts
+++ b/src/model/user.ts
@@ -1,14 +1,14 @@
 export interface User {
     readonly count: number;
     readonly page_info: PageInfo;
-    readonly edges: Edge[];
+    readonly edges: UserEdge[];
 }
 
-export interface Edge {
-    readonly node: Node;
+export interface UserEdge {
+    readonly node: UserNode;
 }
 
-export interface Node {
+export interface UserNode {
     readonly id: string;
     readonly username: string;
     readonly full_name: string;
diff --git a/src/styles/_helpers.scss b/src/styles/_helpers.scss
index 905f49c..35d917d 100644
--- a/src/styles/_helpers.scss
+++ b/src/styles/_helpers.scss
@@ -1,141 +1,227 @@
 // Layout
 .main-layout {
-    width: 100%;
-    max-width: 1300px;
-    margin: 0 auto;
+  width: 100%;
+  max-width: 1300px;
+  margin: 0 auto;
 }
 
 .with-app-header {
-    padding-top: 4rem !important;
+  padding-top: 4rem !important;
 }
 
 // Flex
 .flex {
-    display: flex;
+  display: flex;
 
-    &.align-center {
-        align-items: center;
-    }
+  &.align-center {
+    align-items: center;
+  }
 
-    &.justify-center {
-        justify-content: center;
-    }
+  &.justify-center {
+    justify-content: center;
+  }
 
-    &.column {
-        flex-direction: column;
-    }
+  &.column {
+    flex-direction: column;
+  }
 }
 
 .grow {
-    flex: 1;
+  flex: 1;
 }
 
 // Width
 .w {
-    &-100 {
-        width: 100%;
-    }
+  &-100 {
+    width: 100%;
+  }
 }
 
 // Padding
 .p {
-    &-small {
-        padding: $size-small;
-    }
+  &-small {
+    padding: $size-small;
+  }
 
-    &-medium {
-        padding: $size-medium;
-    }
+  &-medium {
+    padding: $size-medium;
+  }
 
-    &-large {
-        padding: $size-large;
-    }
+  &-large {
+    padding: $size-large;
+  }
 
-    &-xlarge {
-        padding: $size-xlarge;
-    }
+  &-xlarge {
+    padding: $size-xlarge;
+  }
 
-    &-clear {
-        padding: 0;
-    }
+  &-clear {
+    padding: 0;
+  }
 }
 
 // Margin
 .m {
-    &-small {
-        margin: $size-small;
-    }
+  &-small {
+    margin: $size-small;
+  }
 
-    &-medium {
-        margin: $size-medium;
-    }
+  &-medium {
+    margin: $size-medium;
+  }
 
-    &-large {
-        margin: $size-large;
-    }
+  &-large {
+    margin: $size-large;
+  }
 
-    &-xlarge {
-        margin: $size-xlarge;
-    }
+  &-xlarge {
+    margin: $size-xlarge;
+  }
 
-    &-clear {
-        margin: 0;
-    }
+  &-clear {
+    margin: 0;
+  }
 }
 
 // font-Size
 .fs {
-    &-small {
-        font-size: $size-small;
-    }
+  &-small {
+    font-size: $size-small;
+  }
 
-    &-medium {
-        font-size: $size-medium;
-    }
+  &-medium {
+    font-size: $size-medium;
+  }
 
-    &-large {
-        font-size: $size-large;
-    }
+  &-large {
+    font-size: $size-large;
+  }
 
-    &-xlarge {
-        font-size: $size-xlarge;
-    }
+  &-xlarge {
+    font-size: $size-xlarge;
+  }
 }
 
 // Colors
 .clr {
-    &-inherit {
-        color: inherit;
-    }
+  &-inherit {
+    color: inherit;
+  }
 
-    &-red {
-        color: $clr-red;
-    }
+  &-red {
+    color: $clr-red;
+  }
 
-    &-green {
-        color: $clr-green;
-    }
+  &-green {
+    color: $clr-green;
+  }
 
-    &-cyan {
-        color: $clr-cyan;
-    }
+  &-cyan {
+    color: $clr-cyan;
+  }
 }
 
 // Display
 .d {
-    &-none {
-        display: none;
-    }
+  &-none {
+    display: none;
+  }
 }
 
 // Text
 .t {
-    &-center {
-        text-align: center;
-    }
+  &-center {
+    text-align: center;
+  }
 }
 
 // Position
 .pos-relative {
-    position: relative;
+  position: relative;
+}
+
+.setting-menu {
+  position: absolute;
+  top: 4rem;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 750px;
+  height: 290px;
+  background: #313131;
+  border: 1px solid #ccc;
+  padding: 1rem;
+  z-index: 100;
+  display: flex;
+  flex-direction: column;
+}
+
+.setting-menu h3 {
+  text-align: center;
+}
+
+.setting-menu .btn-container {
+  display: flex;
+  justify-content: center;
+  gap: 10px;
+  position: absolute;
+  bottom: 10px;
+  left: 37%;
+}
+
+.minimun-width {
+  min-width: 350px;
+}
+
+.margin-between-input-and-label{
+  margin-left: 10px;
+}
+.btn  {
+  border: 1px solid #ccc !important;
+  border-radius: 5px !important;
+  padding: 5px 10px !important;
+  cursor: pointer !important;
+  color: white !important;
+  background-color: gray !important;
+  width: 65px !important;
+  height: 30px !important;
+}
+
+.btn:hover {
+  background-color: #313131 !important;
+}
+
+.backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.66);
+  z-index: 100;
+}
+
+.row {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0 -5px;
+}
+
+.setting-menu label, h3 {
+  font-weight: bold;
+  color: #ffffff;
 }
+
+.setting-menu input {
+  width: 60px;
+  margin-left: 10px;
+}
+
+.warning{
+  color: yellow;
+  b {
+    color: red;
+  }
+}
+
+
+
diff --git a/src/utils.ts b/src/utils.ts
deleted file mode 100644
index a0fcd6f..0000000
--- a/src/utils.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * When writing a switch-case with a finite number of cases, use this function in the
- * `default` clause of switch-case statements for exhaustive checking. This will make
- * TS complain until ALL cases are handled. For example, if we have a switch-case
- * in-which we evaluate every possible status of a component's state, if we add this
- * to the default clause and then add a new status to the state type, TS will complain
- * and force us to handle it as well, thus avoiding forgetting it.
- */
-export function assertUnreachable(_value: never): never {
-    throw new Error('Statement should be unreachable');
-}
-
-export function sleep(ms: number): Promise<any> {
-    return new Promise(resolve => {
-        setTimeout(resolve, ms);
-    });
-}
-
-export function getCookie(name: string): string | null {
-    const value = `; ${document.cookie}`;
-    const parts = value.split(`; ${name}=`);
-    if (parts.length !== 2) {
-        return null;
-    }
-    return parts.pop()!.split(';').shift()!;
-}
-
-export function urlGenerator(nextCode?: string): string {
-    const ds_user_id = getCookie('ds_user_id');
-    if (nextCode === undefined) {
-        // First url
-        return `https://www.instagram.com/graphql/query/?query_hash=3dec7e2c57367ef3da3d987d89f9dbc8&variables={"id":"${ds_user_id}","include_reel":"true","fetch_mutual":"false","first":"24"}`;
-    }
-    return `https://www.instagram.com/graphql/query/?query_hash=3dec7e2c57367ef3da3d987d89f9dbc8&variables={"id":"${ds_user_id}","include_reel":"true","fetch_mutual":"false","first":"24","after":"${nextCode}"}`;
-}
-
-export function unfollowUserUrlGenerator(idToUnfollow: string): string {
-    return `https://www.instagram.com/web/friendships/${idToUnfollow}/unfollow/`;
-}
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
new file mode 100644
index 0000000..c8f2537
--- /dev/null
+++ b/src/utils/utils.ts
@@ -0,0 +1,133 @@
+import { UserNode } from "../model/user";
+import { UNFOLLOWERS_PER_PAGE } from "../constants/constants";
+import { ScanningTab } from "../model/scanning-tab";
+import { ScanningFilter } from "../model/scanning-filter";
+import { UnfollowLogEntry } from "../model/unfollow-log-entry";
+import { UnfollowFilter } from "../model/unfollow-filter";
+
+export async function copyListToClipboard(nonFollowersList: readonly UserNode[]): Promise<void> {
+  const sortedList = [...nonFollowersList].sort((a, b) => (a.username > b.username ? 1 : -1));
+
+  let output = '';
+  sortedList.forEach(user => {
+    output += user.username + '\n';
+  });
+
+  await navigator.clipboard.writeText(output);
+  alert('List copied to clipboard!');
+}
+
+export function getMaxPage(nonFollowersList: readonly UserNode[]): number {
+  const pageCalc = Math.ceil(nonFollowersList.length / UNFOLLOWERS_PER_PAGE);
+  return pageCalc < 1 ? 1 : pageCalc;
+}
+
+export function getCurrentPageUnfollowers(nonFollowersList: readonly UserNode[], currentPage: number): readonly UserNode[] {
+  const sortedList = [...nonFollowersList].sort((a, b) => (a.username > b.username ? 1 : -1));
+  return sortedList.splice(UNFOLLOWERS_PER_PAGE * (currentPage - 1), UNFOLLOWERS_PER_PAGE);
+}
+
+export function getUsersForDisplay(
+  results: readonly UserNode[],
+  whitelistedResults: readonly UserNode[],
+  currentTab: ScanningTab,
+  searchTerm: string,
+  filter: ScanningFilter,
+): readonly UserNode[] {
+  const users: UserNode[] = [];
+  for (const result of results) {
+    const isWhitelisted = whitelistedResults.find(user => user.id === result.id) !== undefined;
+    switch (currentTab) {
+      case "non_whitelisted":
+        if (isWhitelisted) {
+          continue;
+        }
+        break;
+      case "whitelisted":
+        if (!isWhitelisted) {
+          continue;
+        }
+        break;
+      default:
+        assertUnreachable(currentTab);
+    }
+    if (!filter.showPrivate && result.is_private) {
+      continue;
+    }
+    if (!filter.showVerified && result.is_verified) {
+      continue;
+    }
+    if (!filter.showFollowers && result.follows_viewer) {
+      continue;
+    }
+    if (!filter.showNonFollowers && !result.follows_viewer) {
+      continue;
+    }
+    const userMatchesSearchTerm =
+      result.username.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      result.full_name.toLowerCase().includes(searchTerm.toLowerCase());
+    if (searchTerm !== "" && !userMatchesSearchTerm) {
+      continue;
+    }
+    users.push(result);
+  }
+  return users;
+}
+
+export function getUnfollowLogForDisplay(log: readonly UnfollowLogEntry[], searchTerm: string, filter: UnfollowFilter) {
+  const entries: UnfollowLogEntry[] = [];
+  for (const entry of log) {
+    if (!filter.showSucceeded && entry.unfollowedSuccessfully) {
+      continue;
+    }
+    if (!filter.showFailed && !entry.unfollowedSuccessfully) {
+      continue;
+    }
+    const userMatchesSearchTerm = entry.user.username.toLowerCase().includes(searchTerm.toLowerCase());
+    if (searchTerm !== "" && !userMatchesSearchTerm) {
+      continue;
+    }
+    entries.push(entry);
+  }
+  return entries;
+}
+
+/**
+ * When writing a switch-case with a finite number of cases, use this function in the
+ * `default` clause of switch-case statements for exhaustive checking. This will make
+ * TS complain until ALL cases are handled. For example, if we have a switch-case
+ * in-which we evaluate every possible status of a component's state, if we add this
+ * to the default clause and then add a new status to the state type, TS will complain
+ * and force us to handle it as well, thus avoiding forgetting it.
+ */
+export function assertUnreachable(_value: never): never {
+  throw new Error('Statement should be unreachable');
+}
+
+export function sleep(ms: number): Promise<any> {
+  return new Promise(resolve => {
+    setTimeout(resolve, ms);
+  });
+}
+
+export function getCookie(name: string): string | null {
+  const value = `; ${document.cookie}`;
+  const parts = value.split(`; ${name}=`);
+  if (parts.length !== 2) {
+    return null;
+  }
+  return parts.pop()!.split(';').shift()!;
+}
+
+export function urlGenerator(nextCode?: string): string {
+  const ds_user_id = getCookie('ds_user_id');
+  if (nextCode === undefined) {
+    // First url
+    return `https://www.instagram.com/graphql/query/?query_hash=3dec7e2c57367ef3da3d987d89f9dbc8&variables={"id":"${ds_user_id}","include_reel":"true","fetch_mutual":"false","first":"24"}`;
+  }
+  return `https://www.instagram.com/graphql/query/?query_hash=3dec7e2c57367ef3da3d987d89f9dbc8&variables={"id":"${ds_user_id}","include_reel":"true","fetch_mutual":"false","first":"24","after":"${nextCode}"}`;
+}
+
+export function unfollowUserUrlGenerator(idToUnfollow: string): string {
+  return `https://www.instagram.com/web/friendships/${idToUnfollow}/unfollow/`;
+}