浏览代码

Feature/onboarding Quick tour (#5247)

* enhance(ui): polish elements of left sidebar

* enhance(ui): active state of nav item from left sidebar

* enhance(ui): active state of nav item from left sidebar

* enhance(ui): WIP quick tour tips

* enhance(ui): WIP quick tour tips

* enhance(ui): WIP quick tour tips

* enhance(ux): add quick tour palette command

* enhance(ui): add step dots for quick tour tips

* enhance(ux): title hints for sidebar link items

* fix(ui): active state for journals from left sidebar

* enhance(ux): support quick tour command when initial app

* fix(ui): position of journal page quick tour tip box

* fix: cljs lint

* fix: remove unused method

* fix(e2e): e2e test for new left sidebar
Charlie 3 年之前
父节点
当前提交
55ccdd5dba

+ 3 - 3
e2e-tests/sidebar.spec.ts

@@ -16,12 +16,12 @@ test('favorite item and recent item test', async ({ page }) => {
   await page.locator("text=Add to Favorites").click()
   // click from another page
   const another_page_name = await createRandomPage(page)
-  expect(await page.innerText(':nth-match(.favorite-item a, 1)')).toBe('◦' + fav_page_name)
+  expect(await page.innerText(':nth-match(.favorite-item a, 1)')).toBe(fav_page_name)
   await page.click(":nth-match(.favorite-item, 1)")
   expect(await page.innerText('.page-title .title')).toBe(fav_page_name)
 
-  expect(await page.innerText(':nth-match(.recent-item a, 1)')).toBe('◦' + fav_page_name)
-  expect(await page.innerText(':nth-match(.recent-item a, 2)')).toBe('◦' + another_page_name)
+  expect(await page.innerText(':nth-match(.recent-item a, 1)')).toBe(fav_page_name)
+  expect(await page.innerText(':nth-match(.recent-item a, 2)')).toBe(another_page_name)
 
   // remove fav
   await page.click('.ui__dropdown-trigger')

+ 4 - 4
resources/css/common.css

@@ -11,8 +11,8 @@
   --ls-border-radius-medium: 8px;
   --ls-headbar-height: 3rem;
   --ls-headbar-inner-top-padding: 0px;
-  --ls-left-sidebar-width: 240px;
-  --ls-left-sidebar-sm-width: 80%;
+  --ls-left-sidebar-width: 246px;
+  --ls-left-sidebar-sm-width: 70%;
   --ls-left-sidebar-nav-btn-size: 38px;
 }
 
@@ -101,8 +101,8 @@ See: https://github.com/logseq/logseq/pull/4652. */
 html[data-theme='light'] {
   --ls-primary-background-color: #ffffff;
   --ls-secondary-background-color: #f7f7f7;
-  --ls-tertiary-background-color: #f1eee8;
-  --ls-quaternary-background-color: #e8e5de;
+  --ls-tertiary-background-color: #eaeaea;
+  --ls-quaternary-background-color: #dcdcdc;
   --ls-table-tr-even-background-color: #f7f7f7;
   --ls-active-primary-color: rgb(0, 105, 182);
   --ls-active-secondary-color: #00477c;

+ 9 - 0
resources/css/shepherd.css

@@ -0,0 +1,9 @@
+.shepherd-button{background:#3288e6;border:0;border-radius:3px;color:hsla(0,0%,100%,.75);cursor:pointer;margin-right:.5rem;padding:.5rem 1.5rem;transition:all .5s ease}.shepherd-button:not(:disabled):hover{background:#196fcc;color:hsla(0,0%,100%,.75)}.shepherd-button.shepherd-button-secondary{background:#f1f2f3;color:rgba(0,0,0,.75)}.shepherd-button.shepherd-button-secondary:not(:disabled):hover{background:#d6d9db;color:rgba(0,0,0,.75)}.shepherd-button:disabled{cursor:not-allowed}
+.shepherd-footer{border-bottom-left-radius:5px;border-bottom-right-radius:5px;display:flex;justify-content:flex-end;padding:0 .75rem .75rem}.shepherd-footer .shepherd-button:last-child{margin-right:0}
+.shepherd-cancel-icon{background:transparent;border:none;color:hsla(0,0%,50%,.75);cursor:pointer;font-size:2em;font-weight:400;margin:0;padding:0;transition:color .5s ease}.shepherd-cancel-icon:hover{color:rgba(0,0,0,.75)}.shepherd-has-title .shepherd-content .shepherd-cancel-icon{color:hsla(0,0%,50%,.75)}.shepherd-has-title .shepherd-content .shepherd-cancel-icon:hover{color:rgba(0,0,0,.75)}
+.shepherd-title{color:rgba(0,0,0,.75);display:flex;flex:1 0 auto;font-size:1rem;font-weight:400;margin:0;padding:0}
+.shepherd-header{align-items:center;border-top-left-radius:5px;border-top-right-radius:5px;display:flex;justify-content:flex-end;line-height:2em;padding:.75rem .75rem 0}.shepherd-has-title .shepherd-content .shepherd-header{background:#e6e6e6;padding:1em}
+.shepherd-text{color:rgba(0,0,0,.75);font-size:1rem;line-height:1.3em;padding:.75em}.shepherd-text p{margin-top:0}.shepherd-text p:last-child{margin-bottom:0}
+.shepherd-content{border-radius:5px;outline:none;padding:0}
+.shepherd-element{background:#fff;border-radius:5px;box-shadow:0 1px 4px rgba(0,0,0,.2);max-width:400px;opacity:0;outline:none;transition:opacity .3s,visibility .3s;visibility:hidden;width:100%;z-index:9999}.shepherd-enabled.shepherd-element{opacity:1;visibility:visible}.shepherd-element[data-popper-reference-hidden]:not(.shepherd-centered){opacity:0;pointer-events:none;visibility:hidden}.shepherd-element,.shepherd-element *,.shepherd-element :after,.shepherd-element :before{box-sizing:border-box}.shepherd-arrow,.shepherd-arrow:before{height:16px;position:absolute;width:16px;z-index:-1}.shepherd-arrow:before{background:#fff;content:"";transform:rotate(45deg)}.shepherd-element[data-popper-placement^=top]>.shepherd-arrow{bottom:-8px}.shepherd-element[data-popper-placement^=bottom]>.shepherd-arrow{top:-8px}.shepherd-element[data-popper-placement^=left]>.shepherd-arrow{right:-8px}.shepherd-element[data-popper-placement^=right]>.shepherd-arrow{left:-8px}.shepherd-element.shepherd-centered>.shepherd-arrow{opacity:0}.shepherd-element.shepherd-has-title[data-popper-placement^=bottom]>.shepherd-arrow:before{background-color:#e6e6e6}.shepherd-target-click-disabled.shepherd-enabled.shepherd-target,.shepherd-target-click-disabled.shepherd-enabled.shepherd-target *{pointer-events:none}
+.shepherd-modal-overlay-container{height:0;left:0;opacity:0;overflow:hidden;pointer-events:none;position:fixed;top:0;transition:all .3s ease-out,height 0ms .3s,opacity .3s 0ms;width:100vw;z-index:9997}.shepherd-modal-overlay-container.shepherd-modal-is-visible{height:100vh;opacity:.5;transition:all .3s ease-out,height 0s 0s,opacity .3s 0s}.shepherd-modal-overlay-container.shepherd-modal-is-visible path{pointer-events:all}

+ 117 - 0
resources/js/shepherd.min.js

@@ -0,0 +1,117 @@
+/*! shepherd.js 9.1.0 */
+
+'use strict';(function(O,pa){"object"===typeof exports&&"undefined"!==typeof module?module.exports=pa():"function"===typeof define&&define.amd?define(pa):(O="undefined"!==typeof globalThis?globalThis:O||self,O.Shepherd=pa())})(this,function(){function O(a,b){return!1!==b.clone&&b.isMergeableObject(a)?da(Array.isArray(a)?[]:{},a,b):a}function pa(a,b,c){return a.concat(b).map(function(d){return O(d,c)})}function Db(a){return Object.getOwnPropertySymbols?Object.getOwnPropertySymbols(a).filter(function(b){return a.propertyIsEnumerable(b)}):
+[]}function Ta(a){return Object.keys(a).concat(Db(a))}function Ua(a,b){try{return b in a}catch(c){return!1}}function Eb(a,b,c){var d={};c.isMergeableObject(a)&&Ta(a).forEach(function(e){d[e]=O(a[e],c)});Ta(b).forEach(function(e){if(!Ua(a,e)||Object.hasOwnProperty.call(a,e)&&Object.propertyIsEnumerable.call(a,e))if(Ua(a,e)&&c.isMergeableObject(b[e])){if(c.customMerge){var f=c.customMerge(e);f="function"===typeof f?f:da}else f=da;d[e]=f(a[e],b[e],c)}else d[e]=O(b[e],c)});return d}function da(a,b,c){c=
+c||{};c.arrayMerge=c.arrayMerge||pa;c.isMergeableObject=c.isMergeableObject||Fb;c.cloneUnlessOtherwiseSpecified=O;var d=Array.isArray(b),e=Array.isArray(a);return d!==e?O(b,c):d?c.arrayMerge(a,b,c):Eb(a,b,c)}function ea(a){return"function"===typeof a}function qa(a){return"string"===typeof a}function Va(a){let b=Object.getOwnPropertyNames(a.constructor.prototype);for(let c=0;c<b.length;c++){let d=b[c],e=a[d];"constructor"!==d&&"function"===typeof e&&(a[d]=e.bind(a))}return a}function Gb(a,b){return c=>
+{if(b.isOpen()){let d=b.el&&c.currentTarget===b.el;(void 0!==a&&c.currentTarget.matches(a)||d)&&b.tour.next()}}}function Hb(a){let {event:b,selector:c}=a.options.advanceOn||{};if(b){let d=Gb(c,a),e;try{e=document.querySelector(c)}catch(f){}if(void 0===c||e)e?(e.addEventListener(b,d),a.on("destroy",()=>e.removeEventListener(b,d))):(document.body.addEventListener(b,d,!0),a.on("destroy",()=>document.body.removeEventListener(b,d,!0)));else return console.error(`No element was found for the selector supplied to advanceOn: ${c}`)}else return console.error("advanceOn was defined, but no event name was passed.")}
+function M(a){return a?(a.nodeName||"").toLowerCase():null}function K(a){return null==a?window:"[object Window]"!==a.toString()?(a=a.ownerDocument)?a.defaultView||window:window:a}function fa(a){var b=K(a).Element;return a instanceof b||a instanceof Element}function F(a){var b=K(a).HTMLElement;return a instanceof b||a instanceof HTMLElement}function Ea(a){if("undefined"===typeof ShadowRoot)return!1;var b=K(a).ShadowRoot;return a instanceof b||a instanceof ShadowRoot}function N(a){return a.split("-")[0]}
+function ha(a,b){void 0===b&&(b=!1);var c=a.getBoundingClientRect(),d=1,e=1;F(a)&&b&&(b=a.offsetHeight,a=a.offsetWidth,0<a&&(d=ia(c.width)/a||1),0<b&&(e=ia(c.height)/b||1));return{width:c.width/d,height:c.height/e,top:c.top/e,right:c.right/d,bottom:c.bottom/e,left:c.left/d,x:c.left/d,y:c.top/e}}function Fa(a){var b=ha(a),c=a.offsetWidth,d=a.offsetHeight;1>=Math.abs(b.width-c)&&(c=b.width);1>=Math.abs(b.height-d)&&(d=b.height);return{x:a.offsetLeft,y:a.offsetTop,width:c,height:d}}function Wa(a,b){var c=
+b.getRootNode&&b.getRootNode();if(a.contains(b))return!0;if(c&&Ea(c)){do{if(b&&a.isSameNode(b))return!0;b=b.parentNode||b.host}while(b)}return!1}function P(a){return K(a).getComputedStyle(a)}function U(a){return((fa(a)?a.ownerDocument:a.document)||window.document).documentElement}function wa(a){return"html"===M(a)?a:a.assignedSlot||a.parentNode||(Ea(a)?a.host:null)||U(a)}function Xa(a){return F(a)&&"fixed"!==P(a).position?a.offsetParent:null}function ra(a){for(var b=K(a),c=Xa(a);c&&0<=["table","td",
+"th"].indexOf(M(c))&&"static"===P(c).position;)c=Xa(c);if(c&&("html"===M(c)||"body"===M(c)&&"static"===P(c).position))return b;if(!c)a:{c=-1!==navigator.userAgent.toLowerCase().indexOf("firefox");if(-1===navigator.userAgent.indexOf("Trident")||!F(a)||"fixed"!==P(a).position)for(a=wa(a),Ea(a)&&(a=a.host);F(a)&&0>["html","body"].indexOf(M(a));){var d=P(a);if("none"!==d.transform||"none"!==d.perspective||"paint"===d.contain||-1!==["transform","perspective"].indexOf(d.willChange)||c&&"filter"===d.willChange||
+c&&d.filter&&"none"!==d.filter){c=a;break a}else a=a.parentNode}c=null}return c||b}function Ga(a){return 0<=["top","bottom"].indexOf(a)?"x":"y"}function Ya(a){return Object.assign({},{top:0,right:0,bottom:0,left:0},a)}function Za(a,b){return b.reduce(function(c,d){c[d]=a;return c},{})}function ja(a){return a.split("-")[1]}function $a(a){var b,c=a.popper,d=a.popperRect,e=a.placement,f=a.variation,g=a.offsets,l=a.position,m=a.gpuAcceleration,k=a.adaptive,p=a.roundOffsets,q=a.isFixed;a=g.x;a=void 0===
+a?0:a;var n=g.y,r=void 0===n?0:n;n="function"===typeof p?p({x:a,y:r}):{x:a,y:r};a=n.x;r=n.y;n=g.hasOwnProperty("x");g=g.hasOwnProperty("y");var x="left",h="top",t=window;if(k){var v=ra(c),A="clientHeight",u="clientWidth";v===K(c)&&(v=U(c),"static"!==P(v).position&&"absolute"===l&&(A="scrollHeight",u="scrollWidth"));if("top"===e||("left"===e||"right"===e)&&"end"===f)h="bottom",r-=(q&&v===t&&t.visualViewport?t.visualViewport.height:v[A])-d.height,r*=m?1:-1;if("left"===e||("top"===e||"bottom"===e)&&
+"end"===f)x="right",a-=(q&&v===t&&t.visualViewport?t.visualViewport.width:v[u])-d.width,a*=m?1:-1}c=Object.assign({position:l},k&&Ib);!0===p?(p=r,d=window.devicePixelRatio||1,a={x:ia(a*d)/d||0,y:ia(p*d)/d||0}):a={x:a,y:r};p=a;a=p.x;r=p.y;if(m){var w;return Object.assign({},c,(w={},w[h]=g?"0":"",w[x]=n?"0":"",w.transform=1>=(t.devicePixelRatio||1)?"translate("+a+"px, "+r+"px)":"translate3d("+a+"px, "+r+"px, 0)",w))}return Object.assign({},c,(b={},b[h]=g?r+"px":"",b[x]=n?a+"px":"",b.transform="",b))}
+function xa(a){return a.replace(/left|right|bottom|top/g,function(b){return Jb[b]})}function ab(a){return a.replace(/start|end/g,function(b){return Kb[b]})}function Ha(a){a=K(a);return{scrollLeft:a.pageXOffset,scrollTop:a.pageYOffset}}function Ia(a){return ha(U(a)).left+Ha(a).scrollLeft}function Ja(a){a=P(a);return/auto|scroll|overlay|hidden/.test(a.overflow+a.overflowY+a.overflowX)}function bb(a){return 0<=["html","body","#document"].indexOf(M(a))?a.ownerDocument.body:F(a)&&Ja(a)?a:bb(wa(a))}function sa(a,
+b){var c;void 0===b&&(b=[]);var d=bb(a);a=d===(null==(c=a.ownerDocument)?void 0:c.body);c=K(d);d=a?[c].concat(c.visualViewport||[],Ja(d)?d:[]):d;b=b.concat(d);return a?b:b.concat(sa(wa(d)))}function Ka(a){return Object.assign({},a,{left:a.x,top:a.y,right:a.x+a.width,bottom:a.y+a.height})}function cb(a,b){if("viewport"===b){b=K(a);var c=U(a);b=b.visualViewport;var d=c.clientWidth;c=c.clientHeight;var e=0,f=0;b&&(d=b.width,c=b.height,/^((?!chrome|android).)*safari/i.test(navigator.userAgent)||(e=b.offsetLeft,
+f=b.offsetTop));a={width:d,height:c,x:e+Ia(a),y:f};a=Ka(a)}else fa(b)?(a=ha(b),a.top+=b.clientTop,a.left+=b.clientLeft,a.bottom=a.top+b.clientHeight,a.right=a.left+b.clientWidth,a.width=b.clientWidth,a.height=b.clientHeight,a.x=a.left,a.y=a.top):(f=U(a),a=U(f),d=Ha(f),b=null==(c=f.ownerDocument)?void 0:c.body,c=L(a.scrollWidth,a.clientWidth,b?b.scrollWidth:0,b?b.clientWidth:0),e=L(a.scrollHeight,a.clientHeight,b?b.scrollHeight:0,b?b.clientHeight:0),f=-d.scrollLeft+Ia(f),d=-d.scrollTop,"rtl"===P(b||
+a).direction&&(f+=L(a.clientWidth,b?b.clientWidth:0)-c),a=Ka({width:c,height:e,x:f,y:d}));return a}function Lb(a){var b=sa(wa(a)),c=0<=["absolute","fixed"].indexOf(P(a).position)&&F(a)?ra(a):a;return fa(c)?b.filter(function(d){return fa(d)&&Wa(d,c)&&"body"!==M(d)}):[]}function Mb(a,b,c){b="clippingParents"===b?Lb(a):[].concat(b);c=[].concat(b,[c]);c=c.reduce(function(d,e){e=cb(a,e);d.top=L(e.top,d.top);d.right=V(e.right,d.right);d.bottom=V(e.bottom,d.bottom);d.left=L(e.left,d.left);return d},cb(a,
+c[0]));c.width=c.right-c.left;c.height=c.bottom-c.top;c.x=c.left;c.y=c.top;return c}function db(a){var b=a.reference,c=a.element,d=(a=a.placement)?N(a):null;a=a?ja(a):null;var e=b.x+b.width/2-c.width/2,f=b.y+b.height/2-c.height/2;switch(d){case "top":e={x:e,y:b.y-c.height};break;case "bottom":e={x:e,y:b.y+b.height};break;case "right":e={x:b.x+b.width,y:f};break;case "left":e={x:b.x-c.width,y:f};break;default:e={x:b.x,y:b.y}}d=d?Ga(d):null;if(null!=d)switch(f="y"===d?"height":"width",a){case "start":e[d]-=
+b[f]/2-c[f]/2;break;case "end":e[d]+=b[f]/2-c[f]/2}return e}function ta(a,b){void 0===b&&(b={});var c=b;b=c.placement;b=void 0===b?a.placement:b;var d=c.boundary,e=void 0===d?"clippingParents":d;d=c.rootBoundary;var f=void 0===d?"viewport":d;d=c.elementContext;d=void 0===d?"popper":d;var g=c.altBoundary,l=void 0===g?!1:g;c=c.padding;c=void 0===c?0:c;c=Ya("number"!==typeof c?c:Za(c,ua));g=a.rects.popper;l=a.elements[l?"popper"===d?"reference":"popper":d];e=Mb(fa(l)?l:l.contextElement||U(a.elements.popper),
+e,f);f=ha(a.elements.reference);l=db({reference:f,element:g,strategy:"absolute",placement:b});g=Ka(Object.assign({},g,l));f="popper"===d?g:f;var m={top:e.top-f.top+c.top,bottom:f.bottom-e.bottom+c.bottom,left:e.left-f.left+c.left,right:f.right-e.right+c.right};a=a.modifiersData.offset;if("popper"===d&&a){var k=a[b];Object.keys(m).forEach(function(p){var q=0<=["right","bottom"].indexOf(p)?1:-1,n=0<=["top","bottom"].indexOf(p)?"y":"x";m[p]+=k[n]*q})}return m}function Nb(a,b){void 0===b&&(b={});var c=
+b.boundary,d=b.rootBoundary,e=b.padding,f=b.flipVariations,g=b.allowedAutoPlacements,l=void 0===g?eb:g,m=ja(b.placement);b=m?f?fb:fb.filter(function(p){return ja(p)===m}):ua;f=b.filter(function(p){return 0<=l.indexOf(p)});0===f.length&&(f=b);var k=f.reduce(function(p,q){p[q]=ta(a,{placement:q,boundary:c,rootBoundary:d,padding:e})[N(q)];return p},{});return Object.keys(k).sort(function(p,q){return k[p]-k[q]})}function Ob(a){if("auto"===N(a))return[];var b=xa(a);return[ab(a),b,ab(b)]}function gb(a,
+b,c){void 0===c&&(c={x:0,y:0});return{top:a.top-b.height-c.y,right:a.right-b.width+c.x,bottom:a.bottom-b.height+c.y,left:a.left-b.width-c.x}}function hb(a){return["top","right","bottom","left"].some(function(b){return 0<=a[b]})}function Pb(a,b,c){void 0===c&&(c=!1);var d=F(b),e;if(e=F(b)){var f=b.getBoundingClientRect();e=ia(f.width)/b.offsetWidth||1;f=ia(f.height)/b.offsetHeight||1;e=1!==e||1!==f}f=e;e=U(b);a=ha(a,f);f={scrollLeft:0,scrollTop:0};var g={x:0,y:0};if(d||!d&&!c){if("body"!==M(b)||Ja(e))f=
+b!==K(b)&&F(b)?{scrollLeft:b.scrollLeft,scrollTop:b.scrollTop}:Ha(b);F(b)?(g=ha(b,!0),g.x+=b.clientLeft,g.y+=b.clientTop):e&&(g.x=Ia(e))}return{x:a.left+f.scrollLeft-g.x,y:a.top+f.scrollTop-g.y,width:a.width,height:a.height}}function Qb(a){function b(f){d.add(f.name);[].concat(f.requires||[],f.requiresIfExists||[]).forEach(function(g){d.has(g)||(g=c.get(g))&&b(g)});e.push(f)}var c=new Map,d=new Set,e=[];a.forEach(function(f){c.set(f.name,f)});a.forEach(function(f){d.has(f.name)||b(f)});return e}function Rb(a){var b=
+Qb(a);return Sb.reduce(function(c,d){return c.concat(b.filter(function(e){return e.phase===d}))},[])}function Tb(a){var b;return function(){b||(b=new Promise(function(c){Promise.resolve().then(function(){b=void 0;c(a())})}));return b}}function Ub(a){var b=a.reduce(function(c,d){var e=c[d.name];c[d.name]=e?Object.assign({},e,d,{options:Object.assign({},e.options,d.options),data:Object.assign({},e.data,d.data)}):d;return c},{});return Object.keys(b).map(function(c){return b[c]})}function ib(){for(var a=
+arguments.length,b=Array(a),c=0;c<a;c++)b[c]=arguments[c];return!b.some(function(d){return!(d&&"function"===typeof d.getBoundingClientRect)})}function La(){La=Object.assign||function(a){for(var b=1;b<arguments.length;b++){var c=arguments[b],d;for(d in c)Object.prototype.hasOwnProperty.call(c,d)&&(a[d]=c[d])}return a};return La.apply(this,arguments)}function Vb(){return[{name:"applyStyles",fn(a){let {state:b}=a;Object.keys(b.elements).forEach(c=>{if("popper"===c){var d=b.attributes[c]||{},e=b.elements[c];
+Object.assign(e.style,{position:"fixed",left:"50%",top:"50%",transform:"translate(-50%, -50%)"});Object.keys(d).forEach(f=>{let g=d[f];!1===g?e.removeAttribute(f):e.setAttribute(f,!0===g?"":g)})}})}},{name:"computeStyles",options:{adaptive:!1}}]}function Wb(a){let b=Vb(),c={placement:"top",strategy:"fixed",modifiers:[{name:"focusAfterRender",enabled:!0,phase:"afterWrite",fn(){setTimeout(()=>{a.el&&a.el.focus()},300)}}]};return c=La({},c,{modifiers:Array.from(new Set([...c.modifiers,...b]))})}function jb(a){return qa(a)&&
+""!==a?"-"!==a.charAt(a.length-1)?`${a}-`:a:""}function Ma(a){a=a.options.attachTo||{};let b=Object.assign({},a);if(qa(a.element)){try{b.element=document.querySelector(a.element)}catch(c){}b.element||console.error(`The element for this Shepherd step was not found ${a.element}`)}return b}function Na(){let a=Date.now();return"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,b=>{let c=(a+16*Math.random())%16|0;a=Math.floor(a/16);return("x"==b?c:c&3|8).toString(16)})}function Xb(a,b){let c={modifiers:[{name:"preventOverflow",
+options:{altAxis:!0,tether:!1}},{name:"focusAfterRender",enabled:!0,phase:"afterWrite",fn(){setTimeout(()=>{b.el&&b.el.focus()},300)}}],strategy:"absolute"};b.isCentered()?c=Wb(b):c.placement=a.on;(a=b.tour&&b.tour.options&&b.tour.options.defaultStepOptions)&&(c=kb(a,c));return c=kb(b.options,c)}function kb(a,b){if(a.popperOptions){let c=Object.assign({},b,a.popperOptions);if(a.popperOptions.modifiers&&0<a.popperOptions.modifiers.length){let d=a.popperOptions.modifiers.map(e=>e.name);b=b.modifiers.filter(e=>
+!d.includes(e.name));c.modifiers=Array.from(new Set([...b,...a.popperOptions.modifiers]))}return c}return b}function G(){}function Yb(a,b){for(let c in b)a[c]=b[c];return a}function ka(a){return a()}function lb(a){return"function"===typeof a}function Q(a,b){return a!=a?b==b:a!==b||a&&"object"===typeof a||"function"===typeof a}function H(a){a.parentNode.removeChild(a)}function mb(a){return document.createElementNS("http://www.w3.org/2000/svg",a)}function ya(a,b,c,d){a.addEventListener(b,c,d);return()=>
+a.removeEventListener(b,c,d)}function B(a,b,c){null==c?a.removeAttribute(b):a.getAttribute(b)!==c&&a.setAttribute(b,c)}function nb(a,b){let c=Object.getOwnPropertyDescriptors(a.__proto__);for(let d in b)null==b[d]?a.removeAttribute(d):"style"===d?a.style.cssText=b[d]:"__value"===d?a.value=a[d]=b[d]:c[d]&&c[d].set?a[d]=b[d]:B(a,d,b[d])}function la(a,b,c){a.classList[c?"add":"remove"](b)}function za(){if(!R)throw Error("Function called outside component initialization");return R}function Oa(a){Aa.push(a)}
+function ob(){let a=R;do{for(;Ba<va.length;){var b=va[Ba];Ba++;R=b;b=b.$$;if(null!==b.fragment){b.update();b.before_update.forEach(ka);var c=b.dirty;b.dirty=[-1];b.fragment&&b.fragment.p(b.ctx,c);b.after_update.forEach(Oa)}}R=null;for(Ba=va.length=0;ma.length;)ma.pop()();for(b=0;b<Aa.length;b+=1)c=Aa[b],Pa.has(c)||(Pa.add(c),c());Aa.length=0}while(va.length);for(;pb.length;)pb.pop()();Qa=!1;Pa.clear();R=a}function Z(){aa={r:0,c:[],p:aa}}function ba(){aa.r||aa.c.forEach(ka);aa=aa.p}function z(a,b){a&&
+a.i&&(Ca.delete(a),a.i(b))}function C(a,b,c,d){a&&a.o&&!Ca.has(a)&&(Ca.add(a),aa.c.push(()=>{Ca.delete(a);d&&(c&&a.d(1),d())}),a.o(b))}function ca(a){a&&a.c()}function W(a,b,c,d){let {fragment:e,on_mount:f,on_destroy:g,after_update:l}=a.$$;e&&e.m(b,c);d||Oa(()=>{let m=f.map(ka).filter(lb);g?g.push(...m):m.forEach(ka);a.$$.on_mount=[]});l.forEach(Oa)}function X(a,b){a=a.$$;null!==a.fragment&&(a.on_destroy.forEach(ka),a.fragment&&a.fragment.d(b),a.on_destroy=a.fragment=null,a.ctx=[])}function S(a,b,
+c,d,e,f,g,l){void 0===l&&(l=[-1]);let m=R;R=a;let k=a.$$={fragment:null,ctx:null,props:f,update:G,not_equal:e,bound:Object.create(null),on_mount:[],on_destroy:[],on_disconnect:[],before_update:[],after_update:[],context:new Map(b.context||(m?m.$$.context:[])),callbacks:Object.create(null),dirty:l,skip_bound:!1,root:b.target||m.$$.root};g&&g(k.root);let p=!1;k.ctx=c?c(a,b.props||{},function(q,n){let r=(2>=arguments.length?0:arguments.length-2)?2>=arguments.length?void 0:arguments[2]:n;if(k.ctx&&e(k.ctx[q],
+k.ctx[q]=r)){if(!k.skip_bound&&k.bound[q])k.bound[q](r);p&&(-1===a.$$.dirty[0]&&(va.push(a),Qa||(Qa=!0,Zb.then(ob)),a.$$.dirty.fill(0)),a.$$.dirty[q/31|0]|=1<<q%31)}return n}):[];k.update();p=!0;k.before_update.forEach(ka);k.fragment=d?d(k.ctx):!1;b.target&&(b.hydrate?(c=Array.from(b.target.childNodes),k.fragment&&k.fragment.l(c),c.forEach(H)):k.fragment&&k.fragment.c(),b.intro&&z(a.$$.fragment),W(a,b.target,b.anchor,b.customElement),ob());R=m}function $b(a){let b,c,d,e,f;return{c(){b=document.createElement("button");
+B(b,"aria-label",c=a[3]?a[3]:null);B(b,"class",d=`${a[1]||""} shepherd-button ${a[4]?"shepherd-button-secondary":""}`);b.disabled=a[2];B(b,"tabindex","0")},m(g,l){g.insertBefore(b,l||null);b.innerHTML=a[5];e||(f=ya(b,"click",function(){lb(a[0])&&a[0].apply(this,arguments)}),e=!0)},p(g,l){[l]=l;a=g;l&32&&(b.innerHTML=a[5]);l&8&&c!==(c=a[3]?a[3]:null)&&B(b,"aria-label",c);l&18&&d!==(d=`${a[1]||""} shepherd-button ${a[4]?"shepherd-button-secondary":""}`)&&B(b,"class",d);l&4&&(b.disabled=a[2])},i:G,o:G,
+d(g){g&&H(b);e=!1;f()}}}function ac(a,b,c){function d(n){return ea(n)?n.call(f):n}let {config:e,step:f}=b,g,l,m,k,p,q;a.$$set=n=>{"config"in n&&c(6,e=n.config);"step"in n&&c(7,f=n.step)};a.$$.update=()=>{a.$$.dirty&192&&(c(0,g=e.action?e.action.bind(f.tour):null),c(1,l=e.classes),c(2,m=e.disabled?d(e.disabled):!1),c(3,k=e.label?d(e.label):null),c(4,p=e.secondary),c(5,q=e.text?d(e.text):null))};return[g,l,m,k,p,q,e,f]}function qb(a,b,c){a=a.slice();a[2]=b[c];return a}function rb(a){let b,c,d=a[1],
+e=[];for(let g=0;g<d.length;g+=1)e[g]=sb(qb(a,d,g));let f=g=>C(e[g],1,1,()=>{e[g]=null});return{c(){for(let g=0;g<e.length;g+=1)e[g].c();b=document.createTextNode("")},m(g,l){for(let m=0;m<e.length;m+=1)e[m].m(g,l);g.insertBefore(b,l||null);c=!0},p(g,l){if(l&3){d=g[1];let m;for(m=0;m<d.length;m+=1){let k=qb(g,d,m);e[m]?(e[m].p(k,l),z(e[m],1)):(e[m]=sb(k),e[m].c(),z(e[m],1),e[m].m(b.parentNode,b))}Z();for(m=d.length;m<e.length;m+=1)f(m);ba()}},i(g){if(!c){for(g=0;g<d.length;g+=1)z(e[g]);c=!0}},o(g){e=
+e.filter(Boolean);for(g=0;g<e.length;g+=1)C(e[g]);c=!1},d(g){var l=e;for(let m=0;m<l.length;m+=1)l[m]&&l[m].d(g);g&&H(b)}}}function sb(a){let b,c;b=new bc({props:{config:a[2],step:a[0]}});return{c(){ca(b.$$.fragment)},m(d,e){W(b,d,e);c=!0},p(d,e){let f={};e&2&&(f.config=d[2]);e&1&&(f.step=d[0]);b.$set(f)},i(d){c||(z(b.$$.fragment,d),c=!0)},o(d){C(b.$$.fragment,d);c=!1},d(d){X(b,d)}}}function cc(a){let b,c,d=a[1]&&rb(a);return{c(){b=document.createElement("footer");d&&d.c();B(b,"class","shepherd-footer")},
+m(e,f){e.insertBefore(b,f||null);d&&d.m(b,null);c=!0},p(e,f){[f]=f;e[1]?d?(d.p(e,f),f&2&&z(d,1)):(d=rb(e),d.c(),z(d,1),d.m(b,null)):d&&(Z(),C(d,1,1,()=>{d=null}),ba())},i(e){c||(z(d),c=!0)},o(e){C(d);c=!1},d(e){e&&H(b);d&&d.d()}}}function dc(a,b,c){let d,{step:e}=b;a.$$set=f=>{"step"in f&&c(0,e=f.step)};a.$$.update=()=>{a.$$.dirty&1&&c(1,d=e.options.buttons)};return[e,d]}function ec(a){let b,c,d,e,f;return{c(){b=document.createElement("button");c=document.createElement("span");c.textContent="\u00d7";
+B(c,"aria-hidden","true");B(b,"aria-label",d=a[0].label?a[0].label:"Close Tour");B(b,"class","shepherd-cancel-icon");B(b,"type","button")},m(g,l){g.insertBefore(b,l||null);b.appendChild(c);e||(f=ya(b,"click",a[1]),e=!0)},p(g,l){[l]=l;l&1&&d!==(d=g[0].label?g[0].label:"Close Tour")&&B(b,"aria-label",d)},i:G,o:G,d(g){g&&H(b);e=!1;f()}}}function fc(a,b,c){let {cancelIcon:d,step:e}=b;a.$$set=f=>{"cancelIcon"in f&&c(0,d=f.cancelIcon);"step"in f&&c(2,e=f.step)};return[d,f=>{f.preventDefault();e.cancel()},
+e]}function gc(a){let b;return{c(){b=document.createElement("h3");B(b,"id",a[1]);B(b,"class","shepherd-title")},m(c,d){c.insertBefore(b,d||null);a[3](b)},p(c,d){[d]=d;d&2&&B(b,"id",c[1])},i:G,o:G,d(c){c&&H(b);a[3](null)}}}function hc(a,b,c){let {labelId:d,element:e,title:f}=b;za().$$.after_update.push(()=>{ea(f)&&c(2,f=f());c(0,e.innerHTML=f,e)});a.$$set=g=>{"labelId"in g&&c(1,d=g.labelId);"element"in g&&c(0,e=g.element);"title"in g&&c(2,f=g.title)};return[e,d,f,function(g){ma[g?"unshift":"push"](()=>
+{e=g;c(0,e)})}]}function tb(a){let b,c;b=new ic({props:{labelId:a[0],title:a[2]}});return{c(){ca(b.$$.fragment)},m(d,e){W(b,d,e);c=!0},p(d,e){let f={};e&1&&(f.labelId=d[0]);e&4&&(f.title=d[2]);b.$set(f)},i(d){c||(z(b.$$.fragment,d),c=!0)},o(d){C(b.$$.fragment,d);c=!1},d(d){X(b,d)}}}function ub(a){let b,c;b=new jc({props:{cancelIcon:a[3],step:a[1]}});return{c(){ca(b.$$.fragment)},m(d,e){W(b,d,e);c=!0},p(d,e){let f={};e&8&&(f.cancelIcon=d[3]);e&2&&(f.step=d[1]);b.$set(f)},i(d){c||(z(b.$$.fragment,d),
+c=!0)},o(d){C(b.$$.fragment,d);c=!1},d(d){X(b,d)}}}function kc(a){let b,c,d,e=a[2]&&tb(a),f=a[3]&&a[3].enabled&&ub(a);return{c(){b=document.createElement("header");e&&e.c();c=document.createTextNode(" ");f&&f.c();B(b,"class","shepherd-header")},m(g,l){g.insertBefore(b,l||null);e&&e.m(b,null);b.appendChild(c);f&&f.m(b,null);d=!0},p(g,l){[l]=l;g[2]?e?(e.p(g,l),l&4&&z(e,1)):(e=tb(g),e.c(),z(e,1),e.m(b,c)):e&&(Z(),C(e,1,1,()=>{e=null}),ba());g[3]&&g[3].enabled?f?(f.p(g,l),l&8&&z(f,1)):(f=ub(g),f.c(),
+z(f,1),f.m(b,null)):f&&(Z(),C(f,1,1,()=>{f=null}),ba())},i(g){d||(z(e),z(f),d=!0)},o(g){C(e);C(f);d=!1},d(g){g&&H(b);e&&e.d();f&&f.d()}}}function lc(a,b,c){let {labelId:d,step:e}=b,f,g;a.$$set=l=>{"labelId"in l&&c(0,d=l.labelId);"step"in l&&c(1,e=l.step)};a.$$.update=()=>{a.$$.dirty&2&&(c(2,f=e.options.title),c(3,g=e.options.cancelIcon))};return[d,e,f,g]}function mc(a){let b;return{c(){b=document.createElement("div");B(b,"class","shepherd-text");B(b,"id",a[1])},m(c,d){c.insertBefore(b,d||null);a[3](b)},
+p(c,d){[d]=d;d&2&&B(b,"id",c[1])},i:G,o:G,d(c){c&&H(b);a[3](null)}}}function nc(a,b,c){let {descriptionId:d,element:e,step:f}=b;za().$$.after_update.push(()=>{let {text:g}=f.options;ea(g)&&(g=g.call(f));g instanceof HTMLElement?e.appendChild(g):c(0,e.innerHTML=g,e)});a.$$set=g=>{"descriptionId"in g&&c(1,d=g.descriptionId);"element"in g&&c(0,e=g.element);"step"in g&&c(2,f=g.step)};return[e,d,f,function(g){ma[g?"unshift":"push"](()=>{e=g;c(0,e)})}]}function vb(a){let b,c;b=new oc({props:{labelId:a[1],
+step:a[2]}});return{c(){ca(b.$$.fragment)},m(d,e){W(b,d,e);c=!0},p(d,e){let f={};e&2&&(f.labelId=d[1]);e&4&&(f.step=d[2]);b.$set(f)},i(d){c||(z(b.$$.fragment,d),c=!0)},o(d){C(b.$$.fragment,d);c=!1},d(d){X(b,d)}}}function wb(a){let b,c;b=new pc({props:{descriptionId:a[0],step:a[2]}});return{c(){ca(b.$$.fragment)},m(d,e){W(b,d,e);c=!0},p(d,e){let f={};e&1&&(f.descriptionId=d[0]);e&4&&(f.step=d[2]);b.$set(f)},i(d){c||(z(b.$$.fragment,d),c=!0)},o(d){C(b.$$.fragment,d);c=!1},d(d){X(b,d)}}}function xb(a){let b,
+c;b=new qc({props:{step:a[2]}});return{c(){ca(b.$$.fragment)},m(d,e){W(b,d,e);c=!0},p(d,e){let f={};e&4&&(f.step=d[2]);b.$set(f)},i(d){c||(z(b.$$.fragment,d),c=!0)},o(d){C(b.$$.fragment,d);c=!1},d(d){X(b,d)}}}function rc(a){let b,c=void 0!==a[2].options.title||a[2].options.cancelIcon&&a[2].options.cancelIcon.enabled,d,e=void 0!==a[2].options.text,f,g=Array.isArray(a[2].options.buttons)&&a[2].options.buttons.length,l,m=c&&vb(a),k=e&&wb(a),p=g&&xb(a);return{c(){b=document.createElement("div");m&&m.c();
+d=document.createTextNode(" ");k&&k.c();f=document.createTextNode(" ");p&&p.c();B(b,"class","shepherd-content")},m(q,n){q.insertBefore(b,n||null);m&&m.m(b,null);b.appendChild(d);k&&k.m(b,null);b.appendChild(f);p&&p.m(b,null);l=!0},p(q,n){[n]=n;n&4&&(c=void 0!==q[2].options.title||q[2].options.cancelIcon&&q[2].options.cancelIcon.enabled);c?m?(m.p(q,n),n&4&&z(m,1)):(m=vb(q),m.c(),z(m,1),m.m(b,d)):m&&(Z(),C(m,1,1,()=>{m=null}),ba());n&4&&(e=void 0!==q[2].options.text);e?k?(k.p(q,n),n&4&&z(k,1)):(k=wb(q),
+k.c(),z(k,1),k.m(b,f)):k&&(Z(),C(k,1,1,()=>{k=null}),ba());n&4&&(g=Array.isArray(q[2].options.buttons)&&q[2].options.buttons.length);g?p?(p.p(q,n),n&4&&z(p,1)):(p=xb(q),p.c(),z(p,1),p.m(b,null)):p&&(Z(),C(p,1,1,()=>{p=null}),ba())},i(q){l||(z(m),z(k),z(p),l=!0)},o(q){C(m);C(k);C(p);l=!1},d(q){q&&H(b);m&&m.d();k&&k.d();p&&p.d()}}}function sc(a,b,c){let {descriptionId:d,labelId:e,step:f}=b;a.$$set=g=>{"descriptionId"in g&&c(0,d=g.descriptionId);"labelId"in g&&c(1,e=g.labelId);"step"in g&&c(2,f=g.step)};
+return[d,e,f]}function yb(a){let b;return{c(){b=document.createElement("div");B(b,"class","shepherd-arrow");B(b,"data-popper-arrow","")},m(c,d){c.insertBefore(b,d||null)},d(c){c&&H(b)}}}function tc(a){let b,c,d,e,f,g,l,m,k=a[4].options.arrow&&a[4].options.attachTo&&a[4].options.attachTo.element&&a[4].options.attachTo.on&&yb();d=new uc({props:{descriptionId:a[2],labelId:a[3],step:a[4]}});let p=[{"aria-describedby":e=void 0!==a[4].options.text?a[2]:null},{"aria-labelledby":f=a[4].options.title?a[3]:
+null},a[1],{role:"dialog"},{tabindex:"0"}],q={};for(let n=0;n<p.length;n+=1)q=Yb(q,p[n]);return{c(){b=document.createElement("div");k&&k.c();c=document.createTextNode(" ");ca(d.$$.fragment);nb(b,q);la(b,"shepherd-has-cancel-icon",a[5]);la(b,"shepherd-has-title",a[6]);la(b,"shepherd-element",!0)},m(n,r){n.insertBefore(b,r||null);k&&k.m(b,null);b.appendChild(c);W(d,b,null);a[13](b);g=!0;l||(m=ya(b,"keydown",a[7]),l=!0)},p(n,r){var [x]=r;n[4].options.arrow&&n[4].options.attachTo&&n[4].options.attachTo.element&&
+n[4].options.attachTo.on?k||(k=yb(),k.c(),k.m(b,c)):k&&(k.d(1),k=null);r={};x&4&&(r.descriptionId=n[2]);x&8&&(r.labelId=n[3]);x&16&&(r.step=n[4]);d.$set(r);r=b;x=[(!g||x&20&&e!==(e=void 0!==n[4].options.text?n[2]:null))&&{"aria-describedby":e},(!g||x&24&&f!==(f=n[4].options.title?n[3]:null))&&{"aria-labelledby":f},x&2&&n[1],{role:"dialog"},{tabindex:"0"}];let h={},t={},v={$$scope:1},A=p.length;for(;A--;){let u=p[A],w=x[A];if(w){for(let y in u)y in w||(t[y]=1);for(let y in w)v[y]||(h[y]=w[y],v[y]=
+1);p[A]=w}else for(let y in u)v[y]=1}for(let u in t)u in h||(h[u]=void 0);nb(r,q=h);la(b,"shepherd-has-cancel-icon",n[5]);la(b,"shepherd-has-title",n[6]);la(b,"shepherd-element",!0)},i(n){g||(z(d.$$.fragment,n),g=!0)},o(n){C(d.$$.fragment,n);g=!1},d(n){n&&H(b);k&&k.d();X(d);a[13](null);l=!1;m()}}}function zb(a){return a.split(" ").filter(b=>!!b.length)}function vc(a,b,c){let {classPrefix:d,element:e,descriptionId:f,firstFocusableElement:g,focusableElements:l,labelId:m,lastFocusableElement:k,step:p,
+dataStepId:q}=b,n,r,x;za().$$.on_mount.push(()=>{c(1,q={[`data-${d}shepherd-step-id`]:p.id});c(9,l=e.querySelectorAll('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), [tabindex="0"]'));c(8,g=l[0]);c(10,k=l[l.length-1])});za().$$.after_update.push(()=>{if(x!==p.options.classes){var h=x;qa(h)&&(h=zb(h),h.length&&e.classList.remove(...h));h=x=p.options.classes;qa(h)&&(h=zb(h),h.length&&e.classList.add(...h))}});a.$$set=h=>{"classPrefix"in
+h&&c(11,d=h.classPrefix);"element"in h&&c(0,e=h.element);"descriptionId"in h&&c(2,f=h.descriptionId);"firstFocusableElement"in h&&c(8,g=h.firstFocusableElement);"focusableElements"in h&&c(9,l=h.focusableElements);"labelId"in h&&c(3,m=h.labelId);"lastFocusableElement"in h&&c(10,k=h.lastFocusableElement);"step"in h&&c(4,p=h.step);"dataStepId"in h&&c(1,q=h.dataStepId)};a.$$.update=()=>{a.$$.dirty&16&&(c(5,n=p.options&&p.options.cancelIcon&&p.options.cancelIcon.enabled),c(6,r=p.options&&p.options.title))};
+return[e,q,f,m,p,n,r,h=>{const {tour:t}=p;switch(h.keyCode){case 9:if(0===l.length){h.preventDefault();break}if(h.shiftKey){if(document.activeElement===g||document.activeElement.classList.contains("shepherd-element"))h.preventDefault(),k.focus()}else document.activeElement===k&&(h.preventDefault(),g.focus());break;case 27:t.options.exitOnEsc&&p.cancel();break;case 37:t.options.keyboardNavigation&&t.back();break;case 39:t.options.keyboardNavigation&&t.next()}},g,l,k,d,()=>e,function(h){ma[h?"unshift":
+"push"](()=>{e=h;c(0,e)})}]}function wc(a){a&&({steps:a}=a,a.forEach(b=>{b.options&&!1===b.options.canClickTarget&&b.options.attachTo&&b.target instanceof HTMLElement&&b.target.classList.remove("shepherd-target-click-disabled")}))}function xc(a){let b,c,d,e,f;return{c(){b=mb("svg");c=mb("path");B(c,"d",a[2]);B(b,"class",d=`${a[1]?"shepherd-modal-is-visible":""} shepherd-modal-overlay-container`)},m(g,l){g.insertBefore(b,l||null);b.appendChild(c);a[11](b);e||(f=ya(b,"touchmove",a[3]),e=!0)},p(g,l){[l]=
+l;l&4&&B(c,"d",g[2]);l&2&&d!==(d=`${g[1]?"shepherd-modal-is-visible":""} shepherd-modal-overlay-container`)&&B(b,"class",d)},i:G,o:G,d(g){g&&H(b);a[11](null);e=!1;f()}}}function Ab(a){if(!a)return null;let b=a instanceof HTMLElement&&window.getComputedStyle(a).overflowY;return"hidden"!==b&&"visible"!==b&&a.scrollHeight>=a.clientHeight?a:Ab(a.parentElement)}function yc(a,b,c){function d(){c(4,p={width:0,height:0,x:0,y:0,r:0})}function e(){c(1,q=!1);l()}function f(h,t,v,A){void 0===h&&(h=0);void 0===
+t&&(t=0);if(A){var u=A.getBoundingClientRect();let y=u.y||u.top;u=u.bottom||y+u.height;if(v){var w=v.getBoundingClientRect();v=w.y||w.top;w=w.bottom||v+w.height;y=Math.max(y,v);u=Math.min(u,w)}let {y:Y,height:E}={y,height:Math.max(u-y,0)},{x:I,width:D,left:na}=A.getBoundingClientRect();c(4,p={width:D+2*h,height:E+2*h,x:(I||na)-h,y:Y-h,r:t})}else d()}function g(){c(1,q=!0)}function l(){n&&(cancelAnimationFrame(n),n=void 0);window.removeEventListener("touchmove",x,{passive:!1})}function m(h){let {modalOverlayOpeningPadding:t,
+modalOverlayOpeningRadius:v}=h.options,A=Ab(h.target),u=()=>{n=void 0;f(t,v,A,h.target);n=requestAnimationFrame(u)};u();window.addEventListener("touchmove",x,{passive:!1})}let {element:k,openingProperties:p}=b;Na();let q=!1,n=void 0,r;d();let x=h=>{h.preventDefault()};a.$$set=h=>{"element"in h&&c(0,k=h.element);"openingProperties"in h&&c(4,p=h.openingProperties)};a.$$.update=()=>{if(a.$$.dirty&16){let {width:h,height:t,x:v=0,y:A=0,r:u=0}=p,{innerWidth:w,innerHeight:y}=window;c(2,r=`M${w},${y}\
+H0\
+V0\
+H${w}\
+V${y}\
+Z\
+M${v+u},${A}\
+a${u},${u},0,0,0-${u},${u}\
+V${t+A-u}\
+a${u},${u},0,0,0,${u},${u}\
+H${h+v-u}\
+a${u},${u},0,0,0,${u}-${u}\
+V${A+u}\
+a${u},${u},0,0,0-${u}-${u}\
+Z`)}};return[k,q,r,h=>{h.stopPropagation()},p,()=>k,d,e,f,function(h){l();h.tour.options.useModalOverlay?(m(h),g()):e()},g,function(h){ma[h?"unshift":"push"](()=>{k=h;c(0,k)})}]}var Fb=function(a){var b;if(b=!!a&&"object"===typeof a)b=Object.prototype.toString.call(a),b=!("[object RegExp]"===b||"[object Date]"===b||a.$$typeof===zc);return b},zc="function"===typeof Symbol&&Symbol.for?Symbol.for("react.element"):60103;da.all=function(a,b){if(!Array.isArray(a))throw Error("first argument should be an array");
+return a.reduce(function(c,d){return da(c,d,b)},{})};var Ac=da;class Ra{on(a,b,c,d){void 0===d&&(d=!1);void 0===this.bindings&&(this.bindings={});void 0===this.bindings[a]&&(this.bindings[a]=[]);this.bindings[a].push({handler:b,ctx:c,once:d});return this}once(a,b,c){return this.on(a,b,c,!0)}off(a,b){if(void 0===this.bindings||void 0===this.bindings[a])return this;void 0===b?delete this.bindings[a]:this.bindings[a].forEach((c,d)=>{c.handler===b&&this.bindings[a].splice(d,1)});return this}trigger(a){for(var b=
+arguments.length,c=Array(1<b?b-1:0),d=1;d<b;d++)c[d-1]=arguments[d];void 0!==this.bindings&&this.bindings[a]&&this.bindings[a].forEach((e,f)=>{let {ctx:g,handler:l,once:m}=e;l.apply(g||this,c);m&&this.bindings[a].splice(f,1)});return this}}var ua=["top","bottom","right","left"],fb=ua.reduce(function(a,b){return a.concat([b+"-start",b+"-end"])},[]),eb=[].concat(ua,["auto"]).reduce(function(a,b){return a.concat([b,b+"-start",b+"-end"])},[]),Sb="beforeRead read afterRead beforeMain main afterMain beforeWrite write afterWrite".split(" "),
+L=Math.max,V=Math.min,ia=Math.round,Ib={top:"auto",right:"auto",bottom:"auto",left:"auto"},Da={passive:!0},Jb={left:"right",right:"left",bottom:"top",top:"bottom"},Kb={start:"end",end:"start"},Bb={placement:"bottom",modifiers:[],strategy:"absolute"},Bc=function(a){void 0===a&&(a={});var b=a.defaultModifiers,c=void 0===b?[]:b;a=a.defaultOptions;var d=void 0===a?Bb:a;return function(e,f,g){function l(){k.orderedModifiers.forEach(function(r){var x=r.name,h=r.options;h=void 0===h?{}:h;r=r.effect;"function"===
+typeof r&&(x=r({state:k,name:x,instance:n,options:h}),p.push(x||function(){}))})}function m(){p.forEach(function(r){return r()});p=[]}void 0===g&&(g=d);var k={placement:"bottom",orderedModifiers:[],options:Object.assign({},Bb,d),modifiersData:{},elements:{reference:e,popper:f},attributes:{},styles:{}},p=[],q=!1,n={state:k,setOptions:function(r){r="function"===typeof r?r(k.options):r;m();k.options=Object.assign({},d,k.options,r);k.scrollParents={reference:fa(e)?sa(e):e.contextElement?sa(e.contextElement):
+[],popper:sa(f)};r=Rb(Ub([].concat(c,k.options.modifiers)));k.orderedModifiers=r.filter(function(x){return x.enabled});l();return n.update()},forceUpdate:function(){if(!q){var r=k.elements,x=r.reference;r=r.popper;if(ib(x,r))for(k.rects={reference:Pb(x,ra(r),"fixed"===k.options.strategy),popper:Fa(r)},k.reset=!1,k.placement=k.options.placement,k.orderedModifiers.forEach(function(v){return k.modifiersData[v.name]=Object.assign({},v.data)}),x=0;x<k.orderedModifiers.length;x++)if(!0===k.reset)k.reset=
+!1,x=-1;else{var h=k.orderedModifiers[x];r=h.fn;var t=h.options;t=void 0===t?{}:t;h=h.name;"function"===typeof r&&(k=r({state:k,options:t,name:h,instance:n})||k)}}},update:Tb(function(){return new Promise(function(r){n.forceUpdate();r(k)})}),destroy:function(){m();q=!0}};if(!ib(e,f))return n;n.setOptions(g).then(function(r){if(!q&&g.onFirstUpdate)g.onFirstUpdate(r)});return n}}({defaultModifiers:[{name:"eventListeners",enabled:!0,phase:"write",fn:function(){},effect:function(a){var b=a.state,c=a.instance;
+a=a.options;var d=a.scroll,e=void 0===d?!0:d;a=a.resize;var f=void 0===a?!0:a,g=K(b.elements.popper),l=[].concat(b.scrollParents.reference,b.scrollParents.popper);e&&l.forEach(function(m){m.addEventListener("scroll",c.update,Da)});f&&g.addEventListener("resize",c.update,Da);return function(){e&&l.forEach(function(m){m.removeEventListener("scroll",c.update,Da)});f&&g.removeEventListener("resize",c.update,Da)}},data:{}},{name:"popperOffsets",enabled:!0,phase:"read",fn:function(a){var b=a.state;b.modifiersData[a.name]=
+db({reference:b.rects.reference,element:b.rects.popper,strategy:"absolute",placement:b.placement})},data:{}},{name:"computeStyles",enabled:!0,phase:"beforeWrite",fn:function(a){var b=a.state,c=a.options;a=c.gpuAcceleration;a=void 0===a?!0:a;var d=c.adaptive;d=void 0===d?!0:d;c=c.roundOffsets;c=void 0===c?!0:c;a={placement:N(b.placement),variation:ja(b.placement),popper:b.elements.popper,popperRect:b.rects.popper,gpuAcceleration:a,isFixed:"fixed"===b.options.strategy};null!=b.modifiersData.popperOffsets&&
+(b.styles.popper=Object.assign({},b.styles.popper,$a(Object.assign({},a,{offsets:b.modifiersData.popperOffsets,position:b.options.strategy,adaptive:d,roundOffsets:c}))));null!=b.modifiersData.arrow&&(b.styles.arrow=Object.assign({},b.styles.arrow,$a(Object.assign({},a,{offsets:b.modifiersData.arrow,position:"absolute",adaptive:!1,roundOffsets:c}))));b.attributes.popper=Object.assign({},b.attributes.popper,{"data-popper-placement":b.placement})},data:{}},{name:"applyStyles",enabled:!0,phase:"write",
+fn:function(a){var b=a.state;Object.keys(b.elements).forEach(function(c){var d=b.styles[c]||{},e=b.attributes[c]||{},f=b.elements[c];F(f)&&M(f)&&(Object.assign(f.style,d),Object.keys(e).forEach(function(g){var l=e[g];!1===l?f.removeAttribute(g):f.setAttribute(g,!0===l?"":l)}))})},effect:function(a){var b=a.state,c={popper:{position:b.options.strategy,left:"0",top:"0",margin:"0"},arrow:{position:"absolute"},reference:{}};Object.assign(b.elements.popper.style,c.popper);b.styles=c;b.elements.arrow&&
+Object.assign(b.elements.arrow.style,c.arrow);return function(){Object.keys(b.elements).forEach(function(d){var e=b.elements[d],f=b.attributes[d]||{};d=Object.keys(b.styles.hasOwnProperty(d)?b.styles[d]:c[d]).reduce(function(g,l){g[l]="";return g},{});F(e)&&M(e)&&(Object.assign(e.style,d),Object.keys(f).forEach(function(g){e.removeAttribute(g)}))})}},requires:["computeStyles"]},{name:"offset",enabled:!0,phase:"main",requires:["popperOffsets"],fn:function(a){var b=a.state,c=a.name;a=a.options.offset;
+var d=void 0===a?[0,0]:a;a=eb.reduce(function(g,l){var m=b.rects;var k=N(l);var p=0<=["left","top"].indexOf(k)?-1:1,q="function"===typeof d?d(Object.assign({},m,{placement:l})):d;m=q[0];q=q[1];m=m||0;q=(q||0)*p;k=0<=["left","right"].indexOf(k)?{x:q,y:m}:{x:m,y:q};g[l]=k;return g},{});var e=a[b.placement],f=e.x;e=e.y;null!=b.modifiersData.popperOffsets&&(b.modifiersData.popperOffsets.x+=f,b.modifiersData.popperOffsets.y+=e);b.modifiersData[c]=a}},{name:"flip",enabled:!0,phase:"main",fn:function(a){var b=
+a.state,c=a.options;a=a.name;if(!b.modifiersData[a]._skip){var d=c.mainAxis;d=void 0===d?!0:d;var e=c.altAxis;e=void 0===e?!0:e;var f=c.fallbackPlacements,g=c.padding,l=c.boundary,m=c.rootBoundary,k=c.altBoundary,p=c.flipVariations,q=void 0===p?!0:p,n=c.allowedAutoPlacements;c=b.options.placement;p=N(c);f=f||(p!==c&&q?Ob(c):[xa(c)]);var r=[c].concat(f).reduce(function(E,I){return E.concat("auto"===N(I)?Nb(b,{placement:I,boundary:l,rootBoundary:m,padding:g,flipVariations:q,allowedAutoPlacements:n}):
+I)},[]);c=b.rects.reference;f=b.rects.popper;var x=new Map;p=!0;for(var h=r[0],t=0;t<r.length;t++){var v=r[t],A=N(v),u="start"===ja(v),w=0<=["top","bottom"].indexOf(A),y=w?"width":"height",Y=ta(b,{placement:v,boundary:l,rootBoundary:m,altBoundary:k,padding:g});u=w?u?"right":"left":u?"bottom":"top";c[y]>f[y]&&(u=xa(u));y=xa(u);w=[];d&&w.push(0>=Y[A]);e&&w.push(0>=Y[u],0>=Y[y]);if(w.every(function(E){return E})){h=v;p=!1;break}x.set(v,w)}if(p)for(d=function(E){var I=r.find(function(D){if(D=x.get(D))return D.slice(0,
+E).every(function(na){return na})});if(I)return h=I,"break"},e=q?3:1;0<e&&"break"!==d(e);e--);b.placement!==h&&(b.modifiersData[a]._skip=!0,b.placement=h,b.reset=!0)}},requiresIfExists:["offset"],data:{_skip:!1}},{name:"preventOverflow",enabled:!0,phase:"main",fn:function(a){var b=a.state,c=a.options;a=a.name;var d=c.mainAxis,e=void 0===d?!0:d;d=c.altAxis;var f=void 0===d?!1:d;d=c.tether;var g=void 0===d?!0:d;d=c.tetherOffset;var l=void 0===d?0:d,m=ta(b,{boundary:c.boundary,rootBoundary:c.rootBoundary,
+padding:c.padding,altBoundary:c.altBoundary}),k=N(b.placement),p=ja(b.placement),q=!p,n=Ga(k);c="x"===n?"y":"x";d=b.modifiersData.popperOffsets;var r=b.rects.reference,x=b.rects.popper;l="function"===typeof l?l(Object.assign({},b.rects,{placement:b.placement})):l;var h="number"===typeof l?{mainAxis:l,altAxis:l}:Object.assign({mainAxis:0,altAxis:0},l),t=b.modifiersData.offset?b.modifiersData.offset[b.placement]:null;l={x:0,y:0};if(d){if(e){var v,A="y"===n?"top":"left",u="y"===n?"bottom":"right",w=
+"y"===n?"height":"width";e=d[n];var y=e+m[A],Y=e-m[u],E=g?-x[w]/2:0,I="start"===p?r[w]:x[w];p="start"===p?-x[w]:-r[w];var D=b.elements.arrow;D=g&&D?Fa(D):{width:0,height:0};var na=b.modifiersData["arrow#persistent"]?b.modifiersData["arrow#persistent"].padding:{top:0,right:0,bottom:0,left:0};A=na[A];u=na[u];D=L(0,V(r[w],D[w]));I=q?r[w]/2-E-D-A-h.mainAxis:I-D-A-h.mainAxis;q=q?-r[w]/2+E+D+u+h.mainAxis:p+D+u+h.mainAxis;w=(w=b.elements.arrow&&ra(b.elements.arrow))?"y"===n?w.clientTop||0:w.clientLeft||
+0:0;E=null!=(v=null==t?void 0:t[n])?v:0;v=e+q-E;y=g?V(y,e+I-E-w):y;v=g?L(Y,v):Y;v=L(y,V(e,v));d[n]=v;l[n]=v-e}if(f){var J;f=d[c];e="y"===c?"height":"width";v=f+m["x"===n?"top":"left"];m=f-m["x"===n?"bottom":"right"];k=-1!==["top","left"].indexOf(k);n=null!=(J=null==t?void 0:t[c])?J:0;J=k?v:f-r[e]-x[e]-n+h.altAxis;r=k?f+r[e]+x[e]-n-h.altAxis:m;g&&k?(J=L(J,V(f,r)),J=J>r?r:J):J=L(g?J:v,V(f,g?r:m));d[c]=J;l[c]=J-f}b.modifiersData[a]=l}},requiresIfExists:["offset"]},{name:"arrow",enabled:!0,phase:"main",
+fn:function(a){var b,c=a.state,d=a.name,e=a.options,f=c.elements.arrow,g=c.modifiersData.popperOffsets,l=N(c.placement);a=Ga(l);l=0<=["left","right"].indexOf(l)?"height":"width";if(f&&g){e=e.padding;e="function"===typeof e?e(Object.assign({},c.rects,{placement:c.placement})):e;e=Ya("number"!==typeof e?e:Za(e,ua));var m=Fa(f),k="y"===a?"top":"left",p="y"===a?"bottom":"right",q=c.rects.reference[l]+c.rects.reference[a]-g[a]-c.rects.popper[l];g=g[a]-c.rects.reference[a];f=(f=ra(f))?"y"===a?f.clientHeight||
+0:f.clientWidth||0:0;g=f/2-m[l]/2+(q/2-g/2);l=L(e[k],V(g,f-m[l]-e[p]));c.modifiersData[d]=(b={},b[a]=l,b.centerOffset=l-g,b)}},effect:function(a){var b=a.state;a=a.options.element;a=void 0===a?"[data-popper-arrow]":a;if(null!=a){if("string"===typeof a&&(a=b.elements.popper.querySelector(a),!a))return;Wa(b.elements.popper,a)&&(b.elements.arrow=a)}},requires:["popperOffsets"],requiresIfExists:["preventOverflow"]},{name:"hide",enabled:!0,phase:"main",requiresIfExists:["preventOverflow"],fn:function(a){var b=
+a.state;a=a.name;var c=b.rects.reference,d=b.rects.popper,e=b.modifiersData.preventOverflow,f=ta(b,{elementContext:"reference"}),g=ta(b,{altBoundary:!0});c=gb(f,c);d=gb(g,d,e);e=hb(c);g=hb(d);b.modifiersData[a]={referenceClippingOffsets:c,popperEscapeOffsets:d,isReferenceHidden:e,hasPopperEscaped:g};b.attributes.popper=Object.assign({},b.attributes.popper,{"data-popper-reference-hidden":e,"data-popper-escaped":g})}}]});let R,va=[],ma=[],Aa=[],pb=[],Zb=Promise.resolve(),Qa=!1,Pa=new Set,Ba=0,Ca=new Set,
+aa;class T{$destroy(){X(this,1);this.$destroy=G}$on(a,b){let c=this.$$.callbacks[a]||(this.$$.callbacks[a]=[]);c.push(b);return()=>{let d=c.indexOf(b);-1!==d&&c.splice(d,1)}}$set(a){this.$$set&&0!==Object.keys(a).length&&(this.$$.skip_bound=!0,this.$$set(a),this.$$.skip_bound=!1)}}class bc extends T{constructor(a){super();S(this,a,ac,$b,Q,{config:6,step:7})}}class qc extends T{constructor(a){super();S(this,a,dc,cc,Q,{step:0})}}class jc extends T{constructor(a){super();S(this,a,fc,ec,Q,{cancelIcon:0,
+step:2})}}class ic extends T{constructor(a){super();S(this,a,hc,gc,Q,{labelId:1,element:0,title:2})}}class oc extends T{constructor(a){super();S(this,a,lc,kc,Q,{labelId:0,step:1})}}class pc extends T{constructor(a){super();S(this,a,nc,mc,Q,{descriptionId:1,element:0,step:2})}}class uc extends T{constructor(a){super();S(this,a,sc,rc,Q,{descriptionId:0,labelId:1,step:2})}}class Cc extends T{constructor(a){super();S(this,a,vc,tc,Q,{classPrefix:11,element:0,descriptionId:2,firstFocusableElement:8,focusableElements:9,
+labelId:3,lastFocusableElement:10,step:4,dataStepId:1,getElement:12})}get getElement(){return this.$$.ctx[12]}}var Cb=function(a,b){return b={exports:{}},a(b,b.exports),b.exports}(function(a,b){(function(){a.exports={polyfill:function(){function c(h,t){this.scrollLeft=h;this.scrollTop=t}function d(h){if(null===h||"object"!==typeof h||void 0===h.behavior||"auto"===h.behavior||"instant"===h.behavior)return!0;if("object"===typeof h&&"smooth"===h.behavior)return!1;throw new TypeError("behavior member of ScrollOptions "+
+h.behavior+" is not a valid value for enumeration ScrollBehavior.");}function e(h,t){if("Y"===t)return h.clientHeight+x<h.scrollHeight;if("X"===t)return h.clientWidth+x<h.scrollWidth}function f(h,t){h=k.getComputedStyle(h,null)["overflow"+t];return"auto"===h||"scroll"===h}function g(h){var t=e(h,"Y")&&f(h,"Y");h=e(h,"X")&&f(h,"X");return t||h}function l(h){var t=(r()-h.startTime)/468;var v=.5*(1-Math.cos(Math.PI*(1<t?1:t)));t=h.startX+(h.x-h.startX)*v;v=h.startY+(h.y-h.startY)*v;h.method.call(h.scrollable,
+t,v);t===h.x&&v===h.y||k.requestAnimationFrame(l.bind(k,h))}function m(h,t,v){var A=r();if(h===p.body){var u=k;var w=k.scrollX||k.pageXOffset;h=k.scrollY||k.pageYOffset;var y=n.scroll}else u=h,w=h.scrollLeft,h=h.scrollTop,y=c;l({scrollable:u,method:y,startTime:A,startX:w,startY:h,x:t,y:v})}var k=window,p=document;if(!("scrollBehavior"in p.documentElement.style&&!0!==k.__forceSmoothScrollPolyfill__)){var q=k.HTMLElement||k.Element,n={scroll:k.scroll||k.scrollTo,scrollBy:k.scrollBy,elementScroll:q.prototype.scroll||
+c,scrollIntoView:q.prototype.scrollIntoView},r=k.performance&&k.performance.now?k.performance.now.bind(k.performance):Date.now,x=/MSIE |Trident\/|Edge\//.test(k.navigator.userAgent)?1:0;k.scroll=k.scrollTo=function(h,t){void 0!==h&&(!0===d(h)?n.scroll.call(k,void 0!==h.left?h.left:"object"!==typeof h?h:k.scrollX||k.pageXOffset,void 0!==h.top?h.top:void 0!==t?t:k.scrollY||k.pageYOffset):m.call(k,p.body,void 0!==h.left?~~h.left:k.scrollX||k.pageXOffset,void 0!==h.top?~~h.top:k.scrollY||k.pageYOffset))};
+k.scrollBy=function(h,t){void 0!==h&&(d(h)?n.scrollBy.call(k,void 0!==h.left?h.left:"object"!==typeof h?h:0,void 0!==h.top?h.top:void 0!==t?t:0):m.call(k,p.body,~~h.left+(k.scrollX||k.pageXOffset),~~h.top+(k.scrollY||k.pageYOffset)))};q.prototype.scroll=q.prototype.scrollTo=function(h,t){if(void 0!==h)if(!0===d(h)){if("number"===typeof h&&void 0===t)throw new SyntaxError("Value could not be converted");n.elementScroll.call(this,void 0!==h.left?~~h.left:"object"!==typeof h?~~h:this.scrollLeft,void 0!==
+h.top?~~h.top:void 0!==t?~~t:this.scrollTop)}else t=h.left,h=h.top,m.call(this,this,"undefined"===typeof t?this.scrollLeft:~~t,"undefined"===typeof h?this.scrollTop:~~h)};q.prototype.scrollBy=function(h,t){void 0!==h&&(!0===d(h)?n.elementScroll.call(this,void 0!==h.left?~~h.left+this.scrollLeft:~~h+this.scrollLeft,void 0!==h.top?~~h.top+this.scrollTop:~~t+this.scrollTop):this.scroll({left:~~h.left+this.scrollLeft,top:~~h.top+this.scrollTop,behavior:h.behavior}))};q.prototype.scrollIntoView=function(h){if(!0===
+d(h))n.scrollIntoView.call(this,void 0===h?!0:h);else{for(h=this;h!==p.body&&!1===g(h);)h=h.parentNode||h.host;var t=h.getBoundingClientRect(),v=this.getBoundingClientRect();h!==p.body?(m.call(this,h,h.scrollLeft+v.left-t.left,h.scrollTop+v.top-t.top),"fixed"!==k.getComputedStyle(h).position&&k.scrollBy({left:t.left,top:t.top,behavior:"smooth"})):k.scrollBy({left:v.left,top:v.top,behavior:"smooth"})}}}}}})()});Cb.polyfill;Cb.polyfill();class Sa extends Ra{constructor(a,b){void 0===b&&(b={});super(a,
+b);this.tour=a;this.classPrefix=this.tour.options?jb(this.tour.options.classPrefix):"";this.styles=a.styles;Va(this);this._setOptions(b);return this}cancel(){this.tour.cancel();this.trigger("cancel")}complete(){this.tour.complete();this.trigger("complete")}destroy(){this.tooltip&&(this.tooltip.destroy(),this.tooltip=null);this.el instanceof HTMLElement&&this.el.parentNode&&(this.el.parentNode.removeChild(this.el),this.el=null);this._updateStepTargetOnHide();this.trigger("destroy")}getTour(){return this.tour}hide(){this.tour.modal.hide();
+this.trigger("before-hide");this.el&&(this.el.hidden=!0);this._updateStepTargetOnHide();this.trigger("hide")}isCentered(){let a=Ma(this);return!a.element||!a.on}isOpen(){return!(!this.el||this.el.hidden)}show(){if(ea(this.options.beforeShowPromise)){let a=this.options.beforeShowPromise();if(void 0!==a)return a.then(()=>this._show())}this._show()}updateStepOptions(a){Object.assign(this.options,a);this.shepherdElementComponent&&this.shepherdElementComponent.$set({step:this})}getElement(){return this.el}getTarget(){return this.target}_createTooltipContent(){this.shepherdElementComponent=
+new Cc({target:this.tour.options.stepsContainer||document.body,props:{classPrefix:this.classPrefix,descriptionId:`${this.id}-description`,labelId:`${this.id}-label`,step:this,styles:this.styles}});return this.shepherdElementComponent.getElement()}_scrollTo(a){let {element:b}=Ma(this);ea(this.options.scrollToHandler)?this.options.scrollToHandler(b):b instanceof Element&&"function"===typeof b.scrollIntoView&&b.scrollIntoView(a)}_getClassOptions(a){var b=this.tour&&this.tour.options&&this.tour.options.defaultStepOptions;
+b=b&&b.classes?b.classes:"";a=[...(a.classes?a.classes:"").split(" "),...b.split(" ")];a=new Set(a);return Array.from(a).join(" ").trim()}_setOptions(a){void 0===a&&(a={});let b=this.tour&&this.tour.options&&this.tour.options.defaultStepOptions;b=Ac({},b||{});this.options=Object.assign({arrow:!0},b,a);let {when:c}=this.options;this.options.classes=this._getClassOptions(a);this.destroy();this.id=this.options.id||`step-${Na()}`;c&&Object.keys(c).forEach(d=>{this.on(d,c[d],this)})}_setupElements(){void 0!==
+this.el&&this.destroy();this.el=this._createTooltipContent();this.options.advanceOn&&Hb(this);this.tooltip&&this.tooltip.destroy();let a=Ma(this),b=a.element,c=Xb(a,this);this.isCentered()&&(b=document.body,this.shepherdElementComponent.getElement().classList.add("shepherd-centered"));this.tooltip=Bc(b,this.el,c);this.target=a.element}_show(){this.trigger("before-show");this._setupElements();this.tour.modal||this.tour._setupModal();this.tour.modal.setupForStep(this);this._styleTargetElementForStep(this);
+this.el.hidden=!1;this.options.scrollTo&&setTimeout(()=>{this._scrollTo(this.options.scrollTo)});this.el.hidden=!1;let a=this.shepherdElementComponent.getElement(),b=this.target||document.body;b.classList.add(`${this.classPrefix}shepherd-enabled`);b.classList.add(`${this.classPrefix}shepherd-target`);a.classList.add("shepherd-enabled");this.trigger("show")}_styleTargetElementForStep(a){let b=a.target;b&&(a.options.highlightClass&&b.classList.add(a.options.highlightClass),b.classList.remove("shepherd-target-click-disabled"),
+!1===a.options.canClickTarget&&b.classList.add("shepherd-target-click-disabled"))}_updateStepTargetOnHide(){let a=this.target||document.body;this.options.highlightClass&&a.classList.remove(this.options.highlightClass);a.classList.remove("shepherd-target-click-disabled",`${this.classPrefix}shepherd-enabled`,`${this.classPrefix}shepherd-target`)}}class Dc extends T{constructor(a){super();S(this,a,yc,xc,Q,{element:0,openingProperties:4,getElement:5,closeModalOpening:6,hide:7,positionModal:8,setupForStep:9,
+show:10})}get getElement(){return this.$$.ctx[5]}get closeModalOpening(){return this.$$.ctx[6]}get hide(){return this.$$.ctx[7]}get positionModal(){return this.$$.ctx[8]}get setupForStep(){return this.$$.ctx[9]}get show(){return this.$$.ctx[10]}}let oa=new Ra;class Ec extends Ra{constructor(a){void 0===a&&(a={});super(a);Va(this);this.options=Object.assign({},{exitOnEsc:!0,keyboardNavigation:!0},a);this.classPrefix=jb(this.options.classPrefix);this.steps=[];this.addSteps(this.options.steps);"active cancel complete inactive show start".split(" ").map(b=>
+{(c=>{this.on(c,d=>{d=d||{};d.tour=this;oa.trigger(c,d)})})(b)});this._setTourID();return this}addStep(a,b){a instanceof Sa?a.tour=this:a=new Sa(this,a);void 0!==b?this.steps.splice(b,0,a):this.steps.push(a);return a}addSteps(a){Array.isArray(a)&&a.forEach(b=>{this.addStep(b)});return this}back(){let a=this.steps.indexOf(this.currentStep);this.show(a-1,!1)}cancel(){this.options.confirmCancel?window.confirm(this.options.confirmCancelMessage||"Are you sure you want to stop the tour?")&&this._done("cancel"):
+this._done("cancel")}complete(){this._done("complete")}getById(a){return this.steps.find(b=>b.id===a)}getCurrentStep(){return this.currentStep}hide(){let a=this.getCurrentStep();if(a)return a.hide()}isActive(){return oa.activeTour===this}next(){let a=this.steps.indexOf(this.currentStep);a===this.steps.length-1?this.complete():this.show(a+1,!0)}removeStep(a){let b=this.getCurrentStep();this.steps.some((c,d)=>{if(c.id===a)return c.isOpen()&&c.hide(),c.destroy(),this.steps.splice(d,1),!0});b&&b.id===
+a&&(this.currentStep=void 0,this.steps.length?this.show(0):this.cancel())}show(a,b){void 0===a&&(a=0);void 0===b&&(b=!0);if(a=qa(a)?this.getById(a):this.steps[a])this._updateStateBeforeShow(),ea(a.options.showOn)&&!a.options.showOn()?this._skipStep(a,b):(this.trigger("show",{step:a,previous:this.currentStep}),this.currentStep=a,a.show())}start(){this.trigger("start");this.focusedElBeforeOpen=document.activeElement;this.currentStep=null;this._setupModal();this._setupActiveTour();this.next()}_done(a){let b=
+this.steps.indexOf(this.currentStep);Array.isArray(this.steps)&&this.steps.forEach(c=>c.destroy());wc(this);this.trigger(a,{index:b});oa.activeTour=null;this.trigger("inactive",{tour:this});this.modal&&this.modal.hide();"cancel"!==a&&"complete"!==a||!this.modal||(a=document.querySelector(".shepherd-modal-overlay-container"))&&a.remove();this.focusedElBeforeOpen instanceof HTMLElement&&this.focusedElBeforeOpen.focus()}_setupActiveTour(){this.trigger("active",{tour:this});oa.activeTour=this}_setupModal(){this.modal=
+new Dc({target:this.options.modalContainer||document.body,props:{classPrefix:this.classPrefix,styles:this.styles}})}_skipStep(a,b){a=this.steps.indexOf(a);a=b?a+1:a-1;a===this.steps.length-1?this.complete():this.show(a,b)}_updateStateBeforeShow(){this.currentStep&&this.currentStep.hide();this.isActive()||this._setupActiveTour()}_setTourID(){this.id=`${this.options.tourName||"tour"}--${Na()}`}}Object.assign(oa,{Tour:Ec,Step:Sa});return oa})

+ 3 - 2
src/main/frontend/components/header.cljs

@@ -133,8 +133,9 @@
   (ui/with-shortcut :ui/toggle-left-sidebar "bottom"
     [:a#left-menu.cp__header-left-menu.button
      {:on-click on-click
-      :style {:margin-left 12}}
-     (ui/icon "menu-2" {:style {:fontSize ui/icon-size}})]))
+      :style    {:margin-left 12}}
+     [:span.inner
+      (ui/icon "menu-2" {:style {:fontSize ui/icon-size}})]]))
 
 (rum/defc dropdown-menu < rum/reactive
   [{:keys [current-repo t]}]

+ 110 - 92
src/main/frontend/components/header.css

@@ -31,9 +31,10 @@
   }
 
   /* To prevent header glitch on Safari */
+
   > .l, > .r {
-      -webkit-transform: translate3d(0, 0, 0);
-      transform: translate3d(0, 0, 0);
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
   }
 
   .it svg {
@@ -119,6 +120,18 @@
       top: 1px;
     }
   }
+
+  &-left-menu {
+    &.button {
+      margin: 0;
+      padding: 0;
+    }
+
+    > .inner {
+      line-height: 0;
+      padding: 3px;
+    }
+  }
 }
 
 .is-electron.is-mac .cp__header {
@@ -189,6 +202,10 @@ a.button {
   &:hover, &.active {
     opacity: 1;
     background: none;
+
+    @screen md {
+      background: var(--ls-tertiary-background-color);
+    }
   }
 
   &:active {
@@ -201,6 +218,7 @@ a.button {
 }
 
 html.is-ios.is-safari {
+  
   .cp__header {
     background-color: var(--ls-primary-background-color);
   }
@@ -214,130 +232,130 @@ html.is-native-iphone,
 html.is-native-iphone-without-notch,
 html.is-native-ipad {
 
-     #main-container {
-         padding-top: 0px;
-         display: flex;
-         flex-direction: column;
-    }
+  #main-container {
+    padding-top: 0px;
+    display: flex;
+    flex-direction: column;
+  }
 
-     #main-content-container {
-         padding-left: 22px;
-         padding-right: 14px;
-         padding-top: 0px;
-         height: calc(100vh - var(--ls-headbar-inner-top-padding) - var(--ls-headbar-height));
+  #main-content-container {
+    padding-left: 22px;
+    padding-right: 14px;
+    padding-top: 0px;
+    height: calc(100vh - var(--ls-headbar-inner-top-padding) - var(--ls-headbar-height));
 
-         @screen sm {
-             padding-left: 2rem;
-         }
+    @screen sm {
+      padding-left: 2rem;
+    }
 
-         .page {
-             margin-top: 24px;
-         }
+    .page {
+      margin-top: 24px;
     }
+  }
 
-     .cp__header {
-         > .r {
-             display: flex;
-         }
+  .cp__header {
+    > .r {
+      display: flex;
+    }
 
-         a.button {
-             opacity: 1;
-         }
+    a.button {
+      opacity: 1;
     }
+  }
 }
 
 html.is-native-ipad {
-    --ls-headbar-inner-top-padding: 0px;
-    --ls-headbar-height: 4rem;
+  --ls-headbar-inner-top-padding: 0px;
+  --ls-headbar-height: 4rem;
 
-    .cp__header {
-      background-color: transparent !important;
-      display: flex;
+  .cp__header {
+    background-color: transparent !important;
+    display: flex;
 
-      > .l {
-        /* background-color: var(--ls-primary-background-color); */
-        padding-top: 20px;
-      }
+    > .l {
+      /* background-color: var(--ls-primary-background-color); */
+      padding-top: 20px;
+    }
 
-      > .r {
-        flex: 1;
-        background-color: var(--ls-primary-background-color);
-        height: 100%;
-        padding-top: 20px;
-        justify-content: flex-end;
-        align-items: center;
-      }
+    > .r {
+      flex: 1;
+      background-color: var(--ls-primary-background-color);
+      height: 100%;
+      padding-top: 20px;
+      justify-content: flex-end;
+      align-items: center;
     }
+  }
 
-    .left-sidebar-inner  {
-        > .wrap {
-            padding-top: 20px;
-      }
+  .left-sidebar-inner  {
+    > .wrap {
+      padding-top: 20px;
     }
+  }
 
-    .cp__right-sidebar {
-        &-settings {
-            margin-top: -4px;
-        }
-
-        &-topbar {
-            padding-top: 37px;
-        }
-
-        &-inner {
-            .resizer {
-                top: 30vh;
-                width: 12px;
-                height: 40vh;
-            }
-
-            .resizer:hover {
-                background-color: var(--ls-guideline-color, #ddd);
-            }
-        }
+  .cp__right-sidebar {
+    &-settings {
+      margin-top: -4px;
     }
-}
 
-html.is-native-iphone {
-    --ls-headbar-inner-top-padding: 36px;
+    &-topbar {
+      padding-top: 37px;
+    }
 
-    .left-sidebar-inner {
-        > .wrap {
-            padding-top: 12px;
-        }
+    &-inner {
+      .resizer {
+        top: 30vh;
+        width: 12px;
+        height: 40vh;
+      }
 
-        .new-page {
-            padding-bottom: 12px;
-        }
+      .resizer:hover {
+        background-color: var(--ls-guideline-color, #ddd);
+      }
     }
+  }
+}
 
-    .ui__notifications {
-        top: calc(var(--ls-headbar-height) + var(--ls-headbar-inner-top-padding) - 0.3rem);
+html.is-native-iphone {
+  --ls-headbar-inner-top-padding: 36px;
+
+  .left-sidebar-inner {
+    > .wrap {
+      padding-top: 12px;
     }
 
-    @media (orientation: landscape) {
-        --ls-headbar-inner-top-padding: 8px;
-        --ls-headbar-height: 2.5rem;
+    .new-page {
+      padding-bottom: 12px;
     }
+  }
+
+  .ui__notifications {
+    top: calc(var(--ls-headbar-height) + var(--ls-headbar-inner-top-padding) - 0.3rem);
+  }
+
+  @media (orientation: landscape) {
+    --ls-headbar-inner-top-padding: 8px;
+    --ls-headbar-height: 2.5rem;
+  }
 }
 
 html.is-native-iphone-without-notch {
 
-    --ls-headbar-inner-top-padding: 15px;
-    --ls-headbar-height: 2.5rem;
+  --ls-headbar-inner-top-padding: 15px;
+  --ls-headbar-height: 2.5rem;
 
-    @media (orientation: landscape) {
+  @media (orientation: landscape) {
 
-        --ls-headbar-inner-top-padding: 0px;
-        --ls-headbar-height: 2.5rem;
-    }
+    --ls-headbar-inner-top-padding: 0px;
+    --ls-headbar-height: 2.5rem;
+  }
 }
 
 html.is-zoomed-native-ios {
-    --ls-headbar-inner-top-padding: 30px;
+  --ls-headbar-inner-top-padding: 30px;
 
-     @media (orientation: landscape) {
-        --ls-headbar-inner-top-padding: 8px;
-        --ls-headbar-height: 2.5rem;
-    }
+  @media (orientation: landscape) {
+    --ls-headbar-inner-top-padding: 8px;
+    --ls-headbar-height: 2.5rem;
+  }
 }

+ 557 - 334
src/main/frontend/components/onboarding/index.css

@@ -1,393 +1,616 @@
 body[data-page=repo-add],
 body[data-page=import] {
-    .cp__header .add-graph-btn {
-        display: none;
-    }
+  .cp__header .add-graph-btn {
+    display: none;
+  }
 }
 
 .cp__onboarding {
-    &-setups {
-        background-color: var(--ls-primary-background-color);
-        z-index: 1;
+  &-setups {
+    background-color: var(--ls-primary-background-color);
+    z-index: 1;
+
+    .as-flex-center {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .inner-card {
+      background-color: var(--ls-secondary-background-color);
+      padding-top: 55px;
 
-        .as-flex-center {
+      > h1 {
+        font-size: 30px;
+
+        strong {
+          color: var(--ls-active-primary-color);
+          display: inline-block;
+          padding-right: 4px;
+          font-weight: normal;
+
+          &:first-child {
+            display: block;
+            text-align: center;
+            padding-bottom: 15px;
+          }
+        }
+      }
+
+      > h2 {
+        font-size: 14px;
+        margin-top: 20px;
+        margin-bottom: 40px;
+        padding: 0 30px;
+        text-align: center;
+      }
+
+      > article {
+        background-color: var(--ls-secondary-background-color);
+        border-radius: 20px;
+        flex: 1;
+
+        > section {
+          flex: 1;
+
+          &.a {
+            background-color: var(--ls-tertiary-background-color);
             display: flex;
+            flex-direction: column;
             align-items: center;
-            justify-content: center;
-        }
+            padding-top: 75px;
+            padding-bottom: 100px;
+            border-radius: 20px 20px 0 0;
+            min-width: 50%;
+
+            > strong {
+              font-size: 28px;
+              padding-bottom: 15px;
+              font-weight: 600;
+            }
 
-        .inner-card {
-            background-color: var(--ls-secondary-background-color);
-            padding-top: 55px;
+            > small {
+              font-size: 18px;
+              line-height: 30px;
+              padding: 0 40px;
+              text-align: center;
+            }
 
-            > h1 {
-                font-size: 30px;
+            > .choose {
+              padding-top: 48px;
+              width: 100%;
+              cursor: pointer;
 
-                strong {
-                    color: var(--ls-active-primary-color);
-                    display: inline-block;
-                    padding-right: 4px;
-                    font-weight: normal;
-
-                    &:first-child {
-                        display: block;
-                        text-align: center;
-                        padding-bottom: 15px;
-                    }
-                }
-            }
+              &:active {
+                opacity: .8;
+              }
 
-            > h2 {
-                font-size: 14px;
-                margin-top: 20px;
-                margin-bottom: 40px;
-                padding: 0 30px;
-                text-align: center;
+              i {
+                width: 180px;
+                height: 120px;
+                background-image: url("../img/folder-logo.png");
+                background-size: contain;
+              }
+
+              .control {
+                padding: 20px 20px 0 20px;
+                width: 100%;
+              }
             }
+          }
 
-            > article {
-                background-color: var(--ls-secondary-background-color);
-                border-radius: 20px;
-                flex: 1;
+          &.b {
+            display: none;
+            padding: 50px 40px;
 
-                > section {
-                    flex: 1;
-
-                    &.a {
-                        background-color: var(--ls-tertiary-background-color);
-                        display: flex;
-                        flex-direction: column;
-                        align-items: center;
-                        padding-top: 75px;
-                        padding-bottom: 100px;
-                        border-radius: 20px 20px 0 0;
-                        min-width: 50%;
-
-                        > strong {
-                            font-size: 28px;
-                            padding-bottom: 15px;
-                            font-weight: 600;
-                        }
-
-                        > small {
-                            font-size: 18px;
-                            line-height: 30px;
-                            padding: 0 40px;
-                            text-align: center;
-                        }
-
-                        > .choose {
-                            padding-top: 48px;
-                            width: 100%;
-                            cursor: pointer;
-
-                            &:active {
-                                opacity: .8;
-                            }
-
-                            i {
-                                width: 180px;
-                                height: 120px;
-                                background-image: url("../img/folder-logo.png");
-                                background-size: contain;
-                            }
-
-                            .control {
-                                padding: 20px 20px 0 20px;
-                                width: 100%;
-                            }
-                        }
-                    }
+            > p {
+              width: 100%;
 
-                    &.b {
-                        display: none;
-                        padding: 50px 40px;
-
-                        > p {
-                            width: 100%;
-
-                            &:first-child {
-                                i {
-                                    width: 42px;
-                                }
-
-                                strong {
-                                    font-size: 19px;
-                                    line-height: 1.5em;
-                                }
-                            }
-                        }
-
-                        ul {
-                            margin: 0;
-                            padding-top: 20px;
-                            width: 100%;
-
-                            > li {
-                                list-style: none;
-                                margin-bottom: 8px;
-                                height: 40px;
-                                display: flex;
-
-                                &.hr {
-                                    height: 1px;
-                                    border-bottom: 1px solid var(--ls-border-color);
-                                    margin: 20px 0px;
-                                    opacity: 0.6;
-                                }
-
-                                > i {
-                                    width: 48px;
-                                    background-image: url(../img/folder.png);
-                                    background-size: contain;
-                                    background-repeat: no-repeat;
-                                    background-position-y: 2px;
-                                    position: relative;
-                                    right: -2px;
-
-                                    &.is-file {
-                                        background-image: url("../img/file-edn.png");
-                                        background-size: 50%;
-                                        background-position-x: center;
-                                    }
-
-                                    > .ti {
-                                        opacity: .25;
-                                        color: black;
-                                    }
-                                }
-
-                                > span {
-                                    flex: 1;
-                                    padding-left: 15px;
-                                    display: flex;
-                                    flex-direction: column;
-
-                                    strong {
-                                        font-size: 11px;
-                                    }
-                                }
-                            }
-                        }
-                    }
+              &:first-child {
+                i {
+                  width: 42px;
                 }
 
-                &.importer {
-                    background-color: var(--ls-tertiary-background-color);
-                    position: relative;
-
-                    > section {
-                        flex: unset;
-                        padding: 0 30px;
-
-                        h1 {
-                            font-size: 26px;
-                            font-weight: 500;
-                        }
-
-                        h2 {
-                            font-size: 14px;
-                            padding-top: 15px;
-                            padding-bottom: 15px;
-                        }
-
-                        &.d {
-                            width: 100%;
-                            padding: 20px 0;
-
-                            > label {
-                                width: unset;
-                                height: 80px;
-                                flex: 1;
-                                margin-bottom: 10px;
-
-                                > span {
-                                    &:first-child {
-                                        padding: 16px;
-
-                                        i {
-                                            height: 30px;
-                                            width: 30px;
-                                            display: flex;
-                                            align-items: center;
-                                            justify-content: center;
-                                        }
-                                    }
-                                }
-
-                                strong {
-                                    font-size: 18px;
-                                }
-
-                                small {
-                                    font-size: 11px;
-                                }
-                            }
-                        }
-                    }
+                strong {
+                  font-size: 19px;
+                  line-height: 1.5em;
                 }
+              }
             }
 
+            ul {
+              margin: 0;
+              padding-top: 20px;
+              width: 100%;
+
+              > li {
+                list-style: none;
+                margin-bottom: 8px;
+                height: 40px;
+                display: flex;
+
+                &.hr {
+                  height: 1px;
+                  border-bottom: 1px solid var(--ls-border-color);
+                  margin: 20px 0px;
+                  opacity: 0.6;
+                }
 
-            @screen lg {
-                background-color: unset;
+                > i {
+                  width: 48px;
+                  background-image: url(../img/folder.png);
+                  background-size: contain;
+                  background-repeat: no-repeat;
+                  background-position-y: 2px;
+                  position: relative;
+                  right: -2px;
+
+                  &.is-file {
+                    background-image: url("../img/file-edn.png");
+                    background-size: 50%;
+                    background-position-x: center;
+                  }
+
+                  > .ti {
+                    opacity: .25;
+                    color: black;
+                  }
+                }
 
-                > h1 {
-                    font-size: 36px;
+                > span {
+                  flex: 1;
+                  padding-left: 15px;
+                  display: flex;
+                  flex-direction: column;
 
-                    strong {
-                        &:first-child {
-                            display: inline-block;
-                        }
-                    }
+                  strong {
+                    font-size: 11px;
+                  }
                 }
+              }
+            }
+          }
+        }
 
-                > h2 {
-                    font-size: 20px;
-                    padding: 0;
-                }
+        &.importer {
+          background-color: var(--ls-tertiary-background-color);
+          position: relative;
 
-                > article {
-                    max-width: 100vw;
-                    flex: unset;
+          > section {
+            flex: unset;
+            padding: 0 30px;
 
-                    > section {
-                        &.a {
-                            border-radius: 20px 0 0 20px;
+            h1 {
+              font-size: 26px;
+              font-weight: 500;
+            }
 
-                            > small {
-                                padding: 0 95px;
-                            }
+            h2 {
+              font-size: 14px;
+              padding-top: 15px;
+              padding-bottom: 15px;
+            }
 
-                            > .choose {
-                                .control {
-                                    padding: 30px 70px 0 70px;
-                                }
-                            }
-                        }
+            &.d {
+              width: 100%;
+              padding: 20px 0;
 
-                        &.b {
-                            display: flex;
-                        }
+              > label {
+                width: unset;
+                height: 80px;
+                flex: 1;
+                margin-bottom: 10px;
+
+                > span {
+                  &:first-child {
+                    padding: 16px;
+
+                    i {
+                      height: 30px;
+                      width: 30px;
+                      display: flex;
+                      align-items: center;
+                      justify-content: center;
                     }
+                  }
+                }
 
-                    &.importer {
-                        > section {
-                            padding: 0;
-
-                            h1 {
-                                font-size: 28px;
-                            }
-
-                            h2 {
-                                font-size: 19px;
-                                line-height: 3em;
-                                padding: unset;
-                            }
-
-                            &.e {
-                                position: absolute;
-                                bottom: -50px;
-                                right: 15px;
-
-                                a.button {
-                                    padding: 4px 10px;
-                                }
-                            }
-                        }
-                    }
+                strong {
+                  font-size: 18px;
+                }
+
+                small {
+                  font-size: 11px;
                 }
+              }
             }
+          }
         }
+      }
 
-        label.action-input {
-            transition: none;
-            color: var(--ls-active-primary-color);
-            background-color: var(--ls-quaternary-background-color);
-            height: 68px;
-            width: 100%;
-            opacity: .8;
-            user-select: none;
-            border-radius: 12px;
-            overflow: hidden;
-            cursor: pointer;
-
-            small {
-                font-size: 11px;
-                text-align: center;
+
+      @screen lg {
+        background-color: unset;
+
+        > h1 {
+          font-size: 36px;
+
+          strong {
+            &:first-child {
+              display: inline-block;
             }
+          }
+        }
 
-            &:hover {
-                opacity: 1;
+        > h2 {
+          font-size: 20px;
+          padding: 0;
+        }
+
+        > article {
+          max-width: 100vw;
+          flex: unset;
+
+          > section {
+            &.a {
+              border-radius: 20px 0 0 20px;
+
+              > small {
+                padding: 0 95px;
+              }
+
+              > .choose {
+                .control {
+                  padding: 30px 70px 0 70px;
+                }
+              }
             }
 
-            &:active {
-                opacity: .5;
+            &.b {
+              display: flex;
             }
+          }
+
+          &.importer {
+            > section {
+              padding: 0;
 
-            &[disabled] {
-                pointer-events: none;
+              h1 {
+                font-size: 28px;
+              }
+
+              h2 {
+                font-size: 19px;
+                line-height: 3em;
+                padding: unset;
+              }
+
+              &.e {
+                position: absolute;
+                bottom: -50px;
+                right: 15px;
+
+                a.button {
+                  padding: 4px 10px;
+                }
+              }
             }
+          }
         }
+      }
+    }
 
-        @screen lg {
-            justify-content: center;
-            align-items: center;
+    label.action-input {
+      transition: none;
+      color: var(--ls-active-primary-color);
+      background-color: var(--ls-quaternary-background-color);
+      height: 68px;
+      width: 100%;
+      opacity: .8;
+      user-select: none;
+      border-radius: 12px;
+      overflow: hidden;
+      cursor: pointer;
+
+      small {
+        font-size: 11px;
+        text-align: center;
+      }
+
+      &:hover {
+        opacity: 1;
+      }
+
+      &:active {
+        opacity: .5;
+      }
+
+      &[disabled] {
+        pointer-events: none;
+      }
+    }
+
+    @screen lg {
+      justify-content: center;
+      align-items: center;
+    }
+  }
+
+  &-quick-tour {
+    &.shepherd-element, .shepherd-arrow:before {
+      background-color: var(--ls-quaternary-background-color);
+      font-size: 14px;
+    }
+
+    &.shepherd-element {
+      max-width: 320px;
+      border-radius: 8px;
+      box-shadow: none;
+
+      &[data-shepherd-step-id=nav-journal-page] {
+        .shepherd-arrow {
+          left: 30px !important;
         }
+      }
     }
+
+    .shepherd-content {
+      display: flex;
+      flex-direction: column;
+      -webkit-font-smoothing: antialiased;
+    }
+
+    .shepherd-text {
+      font-size: 14px;
+      color: var(--ls-secondary-text-color);
+      flex: 1;
+      padding: 8px 10px;
+      position: relative;
+
+      h2 {
+        font-size: 18px;
+        line-height: 28px;
+        font-weight: 700;
+        padding-top: 5px;
+        padding-bottom: 5px;
+      }
+
+      p {
+        color: var(--ls-secondary-text-color);
+      }
+
+      .steps {
+        position: absolute;
+        bottom: -28px;
+        left: 10px;
+        font-size: 12px;
+
+        strong {
+          opacity: .5;
+          font-size: 11px;
+        }
+
+        ul {
+          display: flex;
+          list-style: none;
+          align-items: center;
+          margin: 0;
+          padding-left: 1px;
+          padding-top: 2px;
+
+          li {
+            padding: 0;
+            width: 5px;
+            height: 5px;
+            margin: 0 5px 0 0;
+            background-color: rgba(0, 0, 0, .2);
+            border-radius: 100%;
+            font-size: 0;
+
+            &.active {
+              background-color: var(--ls-primary-text-color);
+            }
+          }
+        }
+      }
+    }
+
+    .shepherd-footer {
+      button {
+        @apply bg-indigo-600 hover:bg-indigo-700;
+
+        padding: 4px 8px;
+        border-radius: 6px;
+        overflow: hidden;
+        color: white;
+        font-size: 13px;
+        font-weight: 500;
+
+        &.back {
+          background-color: rgba(0, 0, 0, .3);
+        }
+      }
+    }
+  }
+
+  &-skip-quick-tour {
+    -webkit-font-smoothing: antialiased;
+    position: fixed;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-60px);
+    z-index: 10001;
+    background-color: #4B5563;
+    padding: 12px 20px;
+    border-radius: 8px;
+    color: white;
+    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
+    font-weight: 700;
+
+    .ti {
+      padding-right: 6px;
+      font-size: 18px;
+      position: relative;
+      top: 2px;
+      font-weight: normal;
+    }
+
+    &:hover {
+      opacity: .8;
+    }
+
+    &:active {
+      opacity: 1;
+    }
+  }
+}
+
+.shepherd-modal-overlay-container.shepherd-modal-is-visible {
+  transition: none;
+  opacity: .4;
+}
+
+.shepherd-target {
+  &.nav-content-item {
+    background-color: rgba(0, 0, 0, .4);
+    padding-left: 15px;
+    padding-right: 15px;
+  }
+
+  .nav-content-item-inner {
+    background-color: var(--ls-secondary-background-color);
+    overflow: hidden;
+
+    .header {
+      padding: 4px 10px !important;
+    }
+
+    .bd {
+      ul a {
+        padding: 2px 4px !important;
+      }
+    }
+  }
+
+  &.page-title {
+    background-color: rgba(0, 0, 0, .4);
+
+    > h1 {
+      background-color: var(--ls-primary-background-color);
+      border-radius: 12px;
+    }
+  }
+
+  &.cp__sidebar-help-btn {
+    background-color: rgba(0, 0, 0, .4);
+
+    > .inner {
+      opacity: 1;
+    }
+  }
+
+  &.cp__header-left-menu {
+    background-color: rgba(0, 0, 0, .4);
+    border-radius: 0;
+    opacity: 1 !important;
+    transition: none;
+
+    &:hover {
+      background-color: rgba(0, 0, 0, .4);
+    }
+
+    > .inner {
+      border-radius: 100%;
+      background-color: var(--ls-primary-background-color);
+    }
+  }
+}
+
+.shepherd-element {
+  &[data-popper-placement^=right] > .shepherd-arrow {
+    left: -4px;
+  }
+
+  &[data-popper-placement^=top] > .shepherd-arrow {
+    bottom: -4px !important;
+  }
+
+  &[data-popper-placement^=left] > .shepherd-arrow {
+    right: -4px !important;
+  }
+
+  &[data-popper-placement^=bottom] > .shepherd-arrow {
+    top: -4px !important;
+  }
+}
+
+.shepherd-arrow, .shepherd-arrow:before {
+  width: 8px;
+  height: 8px;
+}
+
+html[data-theme=light] {
+  .cp__onboarding {
+    &-quick-tour {
+      &.shepherd-element, .shepherd-arrow:before {
+        background-color: #E8E5DE;
+      }
+    }
+  }
 }
 
 html.is-native-android,
 html.is-native-ipad,
 html.is-native-iphone,
 html.is-native-iphone-without-notch {
-    .cp__onboarding {
-        &-setups {
-            position: absolute;
-            width: 100%;
-            top: 0;
-            left: 0;
-            height: 100vh;
-            overflow-y: auto;
-
-            .inner-card {
-                padding-top: 30px;
-                min-height: 100vh;
-                width: 100%;
-
-                > h2 {
-                    margin-bottom: 25px;
-                }
-
-                > article {
-                    > section {
-                        &.a {
-                            padding-top: 25px;
-
-                            small {
-                                text-align: left;
-                                padding: 0 40px;
-                            }
-                            .mobile-intro {
-                                margin-top: 10px;
-                                line-height: 1.5rem;
-                                font-size: 1rem;
-                            }
-
-                            > .choose {
-                                padding-top: 25px;
-                            }
-                        }
-                    }
-                }
+  .cp__onboarding {
+    &-setups {
+      position: absolute;
+      width: 100%;
+      top: 0;
+      left: 0;
+      height: 100vh;
+      overflow-y: auto;
+
+      .inner-card {
+        padding-top: 30px;
+        min-height: 100vh;
+        width: 100%;
+
+        > h2 {
+          margin-bottom: 25px;
+        }
 
-                @screen lg {
-                    > article {
-                        width: 1040px;
-                        height: 510px;
-                    }
-                }
+        > article {
+          > section {
+            &.a {
+              padding-top: 25px;
+
+              small {
+                text-align: left;
+                padding: 0 40px;
+              }
+
+              .mobile-intro {
+                margin-top: 10px;
+                line-height: 1.5rem;
+                font-size: 1rem;
+              }
+
+              > .choose {
+                padding-top: 25px;
+              }
             }
+          }
+        }
+
+        @screen lg {
+          > article {
+            width: 1040px;
+            height: 510px;
+          }
         }
+      }
     }
+  }
 }

+ 158 - 0
src/main/frontend/components/onboarding/quick_tour.cljs

@@ -0,0 +1,158 @@
+(ns frontend.components.onboarding.quick-tour
+  (:require [promesa.core :as p]
+            [cljs-bean.core :as bean]
+            [frontend.loader :refer [load]]
+            [frontend.state :as state]
+            [frontend.date :as date]
+            [frontend.util :as util]
+            [frontend.handler.route :as router-handler]
+            [frontend.handler.command-palette :as command-palette]
+            [hiccups.runtime :as h]
+            [dommy.core :as d]))
+
+(defn js-load$
+  [url]
+  (p/create
+    (fn [resolve]
+      (load url resolve))))
+
+(def JS_ROOT
+  (if (= js/location.protocol "file:")
+    "./js"
+    "./static/js"))
+
+(defn- load-base-assets$
+  []
+  (js-load$ (str JS_ROOT "/shepherd.min.js")))
+
+(defn- make-skip-fns
+  [^js jsTour]
+  (let [^js el (js/document.createElement "button")]
+    (.add (.-classList el) "cp__onboarding-skip-quick-tour")
+    (set! (.-innerHTML el) (h/render-html [:span [:i.ti.ti-player-skip-forward] "Skip Quick Tour"]))
+    (.addEventListener el "click" #(.cancel jsTour))
+    [#(.appendChild js/document.body el)
+     #(.removeChild js/document.body el)]))
+
+(defn- wait-target
+  [fn-or-selector time]
+  (p/let [action (if (string? fn-or-selector)
+                   #(d/sel1 fn-or-selector)
+                   fn-or-selector)
+          _      (action)
+          _      (p/delay time)]))
+
+(defn- inject-steps-indicator
+  [current total]
+
+  (h/render-html
+    [:div.steps
+     [:strong (str "STEP " current)]
+     [:ul (for [i (range total)] [:li {:class (when (= current (inc i)) "active")} i])]]))
+
+(defn- create-steps! [^js jsTour]
+  [
+   ;; step 1
+   {:id                "nav-help"
+    :text              (h/render-html [:section [:h2 "❓ Help"]
+                                       [:p "You can always click here for help and other information about Logseq."]])
+    :attachTo          {:element ".cp__sidebar-help-btn" :on "top"}
+    :beforeShowPromise #(if (state/sub :ui/sidebar-open?)
+                          (wait-target state/hide-right-sidebar! 700)
+                          (p/resolved true))
+    :canClickTarget    true
+    :buttons           [{:text "Next" :action (.-next jsTour)}]
+    :popperOptions     {:modifiers [{:name    "preventOverflow"
+                                     :options {:padding 20}}
+                                    {:name    "offset"
+                                     :options {:offset [0, 10]}}]}}
+
+   ;; step 2
+   {:id                "nav-journal-page"
+    :text              (h/render-html [:section [:h2 "📆 Daily Journal Page"]
+                                       [:p
+                                        [:span "This is today’s daily journal page. Here yo can dump your thoughts, learnings and ideas. Don’t worry about organizing. Just write and"]
+                                        [:a "[[link]]"]
+                                        [:span "your thoughts."]]])
+
+    :attachTo          {:element ".page.is-journals .page-title" :on "top-end"}
+    :beforeShowPromise #(if-not (= (util/safe-lower-case (state/get-current-page))
+                                  (util/safe-lower-case (date/today)))
+                          (wait-target (fn []
+                                         (router-handler/redirect-to-page! (date/today))
+                                         (util/scroll-to-top)) 200)
+                          (p/resolved true))
+    :buttons           [{:text "Back" :classes "back" :action (.-back jsTour)}
+                        {:text "Next" :action (.-next jsTour)}]
+    :popperOptions     {:modifiers [{:name    "preventOverflow"
+                                     :options {:padding 63}}
+                                    {:name    "offset"
+                                     :options {:offset [10, 10]}}]}}
+
+   ;; step 3
+   {:id                "nav-left-sidebar"
+    :text              (h/render-html [:section [:h2 "👀 Left Sidebar"]
+                                       [:p [:span "Open the left sidebar to explore important menu items in Logseq."]]])
+
+    :attachTo          {:element "#left-menu" :on "top"}
+    :beforeShowPromise #(p/resolved true)
+    :buttons           [{:text "Back" :classes "back" :action (.-back jsTour)}
+                        {:text "Next" :action (.-next jsTour)}]
+    :popperOptions     {:modifiers [{:name    "preventOverflow"
+                                     :options {:padding 20}}
+                                    {:name    "offset"
+                                     :options {:offset [10, 10]}}]}}
+
+   ;; step 4
+   {:id                "nav-favorites"
+    :text              (h/render-html [:section [:h2 "⭐️ Favorites"]
+                                       [:p "Pin your favorite pages via the `... `menu on any page."]
+                                       [:p "We’ve also added some template pages here to help you get started. You can remove these once you start writing your own notes."]])
+    :beforeShowPromise #(if-not (state/sub :ui/left-sidebar-open?)
+                          (wait-target state/toggle-left-sidebar! 500)
+                          (p/resolved true))
+    :attachTo          {:element ".nav-content-item.favorites" :on "right"}
+    :buttons           [{:text "Back" :classes "back" :action (.-back jsTour)}
+                        {:text "Finish" :action (.-complete jsTour)}]}
+   ])
+
+(defn start
+  []
+  (let [^js jsTour (js/Shepherd.Tour.
+                     (bean/->js
+                       {:useModalOverlay    true
+                        :defaultStepOptions {:classes  "cp__onboarding-quick-tour"
+                                             :scrollTo false}}))
+        steps      (create-steps! jsTour)
+        steps      (map-indexed #(assoc %2 :text (str (:text %2) (inject-steps-indicator (inc %1) (count steps)))) steps)
+        [show-skip! hide-skip!] (make-skip-fns jsTour)]
+
+    ;; events
+    (doto jsTour
+      (.on "show" show-skip!)
+      (.on "hide" hide-skip!)
+      (.on "complete" hide-skip!)
+      (.on "cancel" hide-skip!))
+
+    (doseq [step steps]
+      (.addStep jsTour (bean/->js step)))
+
+    (.start jsTour)))
+
+(defn- ready
+  [callback]
+  (p/then
+    (if (nil? js/window.Shepherd)
+      (load-base-assets$) (p/resolved true))
+    callback))
+
+(def should-guide? false)
+
+(defn init []
+  (command-palette/register {:id     :document/quick-tour
+                             :desc   "Quick tour for onboarding"
+                             :action #(ready start)})
+
+  ;; TODO: fix logic
+  (when should-guide?
+    (ready start)))

+ 9 - 3
src/main/frontend/components/page.css

@@ -257,10 +257,10 @@
 
 .ls-page-title {
   @apply rounded-sm;
-  
+
   padding: 5px 8px;
   margin: 0 -6px;
-  
+
   &.title {
     margin-bottom: 12px;
   }
@@ -274,11 +274,17 @@
   }
 }
 
+a.page-title {
+  padding: 0 8px;
+  margin-left: -12px;
+  transition: none;
+}
+
 html.is-native-android,
 html.is-native-ipad,
 html.is-native-iphone,
 html.is-native-iphone-without-notch {
-    
+
     .ls-page-title {
         margin: 0px 0px 24px -15px;
         padding: 0px;

+ 2 - 2
src/main/frontend/components/repo.cljs

@@ -148,12 +148,12 @@
             render-content (fn [{:keys [toggle-fn]}]
                              (let [repo-path (db/get-repo-name current-repo)
                                    short-repo-name (db/get-short-repo-name repo-path)]
-                               [:a.item.group.flex.items-center.px-2.py-2.text-sm.font-medium.rounded-md
+                               [:a.item.group.flex.items-center.px-1.py-2.text-sm.font-medium.rounded-md
                                 {:on-click (fn []
                                              (check-multiple-windows? state)
                                              (toggle-fn))
                                  :title repo-path} ;; show full path on hover
-                                (ui/icon "database mr-3" {:style {:font-size 20} :id "database-icon"})
+                                (ui/icon "database mr-2" {:style {:font-size 16} :id "database-icon"})
                                 [:div.graphs
                                  [:span#repo-switch.block.pr-2.whitespace-nowrap
                                   [:span [:span#repo-name.font-medium short-repo-name]]

+ 66 - 50
src/main/frontend/components/sidebar.cljs

@@ -46,16 +46,17 @@
 
   [:div.nav-content-item.is-expand
    {:class class}
-   [:div.header.items-center.mb-1
-    {:on-click (fn [^js/MouseEvent e]
-                 (let [^js target (.-target e)
-                       ^js parent (.closest target ".nav-content-item")]
-                   (.toggle (.-classList parent) "is-expand")))}
-
-    [:div.font-medium.fade-link name]
-    [:span
-     [:a.more svg/arrow-down-v2]]]
-   [:div.bd child]])
+   [:div.nav-content-item-inner
+    [:div.header.items-center.mb-1
+     {:on-click (fn [^js/MouseEvent e]
+                  (let [^js target (.-target e)
+                        ^js parent (.closest target ".nav-content-item")]
+                    (.toggle (.-classList parent) "is-expand")))}
+
+     [:div.font-medium.fade-link name]
+     [:span
+      [:a.more svg/arrow-down-v2]]]
+    [:div.bd child]]])
 
 (defn- delta-y
   [e]
@@ -99,6 +100,7 @@
         target (state/sub :favorites/dragging)]
     [:li.favorite-item
      {:key name
+      :title name
       :data-ref name
       :class (if (and target @dragging-over (not= target @dragging-over))
                "dragging-target"
@@ -123,10 +125,9 @@
 (rum/defc favorites < rum/reactive
   [t]
   (nav-content-item
-   [:a.flex.items-center.text-sm.font-medium.rounded-md
-    (ui/icon "star mr-1" {:style {:font-size 18}})
-    [:span.flex-1.ml-1 {:style {:padding-top 2}}
-     (t :left-side-bar/nav-favorites)]]
+   [:a.flex.items-center.text-sm.font-medium.rounded-md.wrap-th
+    (ui/icon "star mr-1" {:style {:font-size 16}})
+    [:span.flex-1.ml-1 (string/upper-case (t :left-side-bar/nav-favorites))]]
 
    {:class "favorites"
     :edit-fn
@@ -148,10 +149,10 @@
 (rum/defc recent-pages < rum/reactive db-mixins/query
   [t]
   (nav-content-item
-   [:a.flex.items-center.text-sm.font-medium.rounded-md
-    (ui/icon "history mr-2" {:style {:font-size 18}})
-    [:span.flex-1 {:style {:padding-top 2}}
-     (t :left-side-bar/nav-recent-pages)]]
+   [:a.flex.items-center.text-sm.font-medium.rounded-md.wrap-th
+    (ui/icon "history mr-2" {:style {:font-size 16}})
+    [:span.flex-1
+     (string/upper-case (t :left-side-bar/nav-recent-pages))]]
 
    {:class "recent"}
 
@@ -167,6 +168,7 @@
         (when-let [entity (db/entity [:block/name (util/safe-page-name-sanity-lc name)])]
           [:li.recent-item.select-none
            {:key name
+            :title name
             :data-ref name}
            (page-name name (get-page-icon entity))]))])))
 
@@ -174,10 +176,12 @@
   {:did-mount (fn [state]
                 (srs/update-cards-due-count!)
                 state)}
-  [state]
+  [_state srs-open?]
   (let [num (state/sub :srs/cards-due-count)]
-    [:a.item.group.flex.items-center.px-2.py-2.text-sm.font-medium.rounded-md {:on-click #(state/pub-event! [:modal/show-cards])}
-     (ui/icon "infinity mr-3" {:style {:font-size 20}})
+    [:a.item.group.flex.items-center.px-2.py-2.text-sm.font-medium.rounded-md
+     {:class (util/classnames [{:active srs-open?}])
+      :on-click #(state/pub-event! [:modal/show-cards])}
+     (ui/icon "infinity")
      [:span.flex-1 (t :right-side-bar/flashcards)]
      (when (and num (not (zero? num)))
        [:span.ml-3.inline-block.py-0.5.px-3.text-xs.font-medium.rounded-full.fade-in num])]))
@@ -198,18 +202,21 @@
     class :class
     title :title
     icon :icon
+    active :active
     href :href}]
   [:div
    {:class class}
    [:a.item.group.flex.items-center.px-2.py-2.text-sm.font-medium.rounded-md
     {:on-click on-click-handler
+     :class (when active "active")
      :href href}
-    (ui/icon (str icon " mr-3") {:style {:font-size 20}})
+    (ui/icon (str icon))
     [:span.flex-1 title]]])
 
 (rum/defc sidebar-nav
-  [_route-match close-modal-fn left-sidebar-open?]
-  (let [default-home (get-default-home-if-valid)]
+  [route-match close-modal-fn left-sidebar-open? srs-open?]
+  (let [default-home (get-default-home-if-valid)
+        route-name (get-in route-match [:data :name])]
 
     [:div.left-sidebar-inner.flex-1.flex.flex-col.min-h-0
      {:on-click #(when-let [^js target (and (util/sm-breakpoint?) (.-target %))]
@@ -217,36 +224,43 @@
                                [".favorites .bd" ".recent .bd" ".dropdown-wrapper" ".nav-header"])
                      (close-modal-fn)))}
      [:div.flex.flex-col.pb-4.wrap
-      [:nav.px-2.space-y-1 {:aria-label "Sidebar"}
+      [:nav.px-4.pt-1.space-y-1 {:aria-label "Sidebar"}
        (repo/repos-dropdown)
 
        [:div.nav-header
-        (if (:page default-home)
+        (if-let [page (:page default-home)]
           (sidebar-item
-           {:class            "home-nav"
-            :title            (:page default-home)
-            :on-click-handler route-handler/redirect-to-home!
-            :icon             "home"})
+            {:class            "home-nav"
+             :title            page
+             :on-click-handler route-handler/redirect-to-home!
+             :active           (and (not srs-open?)
+                                    (= route-name :page)
+                                    (= page (get-in route-match [:path-params :name])))
+             :icon             "home"})
           (sidebar-item
-           {:class            "journals-nav"
-            :title            (t :left-side-bar/journals)
-            :on-click-handler route-handler/go-to-journals!
-            :icon             "calendar"}))
+            {:class            "journals-nav"
+             :active           (and (not srs-open?)
+                                 (or (= route-name :all-journals) (= route-name :home)))
+             :title            (t :left-side-bar/journals)
+             :on-click-handler route-handler/go-to-journals!
+             :icon             "calendar"}))
 
         [:div.flashcards-nav
-         (flashcards)]
+         (flashcards srs-open?)]
 
         (sidebar-item
-         {:class "graph-view-nav"
-          :title (t :right-side-bar/graph-view)
-          :href  (rfe/href :graph)
-          :icon  "hierarchy"})
+          {:class  "graph-view-nav"
+           :title  (t :right-side-bar/graph-view)
+           :href   (rfe/href :graph)
+           :active (and (not srs-open?) (= route-name :graph))
+           :icon   "hierarchy"})
 
         (sidebar-item
-         {:class "all-pages-nav"
-          :title (t :right-side-bar/all-pages)
-          :href  (rfe/href :all-pages)
-          :icon  "files"})]]
+          {:class  "all-pages-nav"
+           :title  (t :right-side-bar/all-pages)
+           :href   (rfe/href :all-pages)
+           :active (and (not srs-open?) (= route-name :all-pages))
+           :icon   "files"})]]
 
       (favorites t)
 
@@ -256,7 +270,7 @@
        [:nav.px-2 {:aria-label "Sidebar"
                    :class      "new-page"}
         (when-not config/publishing?
-          [:a.item.group.flex.items-center.px-2.py-2.text-sm.font-medium.rounded-md
+          [:a.item.group.flex.items-center.px-2.py-2.text-sm.font-medium.rounded-md.new-page-link
            {:on-click (fn []
                         (and (util/sm-breakpoint?)
                              (state/toggle-left-sidebar!))
@@ -266,12 +280,13 @@
 
 (rum/defc left-sidebar < rum/reactive
   [{:keys [left-sidebar-open? route-match]}]
-  (let [close-fn #(state/set-left-sidebar-open! false)]
+  (let [close-fn #(state/set-left-sidebar-open! false)
+        srs-open? (= :srs (state/sub :modal/id))]
     [:div#left-sidebar.cp__sidebar-left-layout
      {:class (util/classnames [{:is-open left-sidebar-open?}])}
 
      ;; sidebar contents
-     (sidebar-nav route-match close-fn left-sidebar-open?)
+     (sidebar-nav route-match close-fn left-sidebar-open? srs-open?)
      [:span.shade-mask {:on-click close-fn}]]))
 
 (rum/defc recording-bar
@@ -484,10 +499,11 @@
   []
   (when-not (state/sub :ui/sidebar-open?)
     [:div.cp__sidebar-help-btn
-     {:title (t :help-shortcut-title)
-      :on-click (fn []
-                  (state/sidebar-add-block! (state/get-current-repo) "help" :help))}
-     "?"]))
+     [:div.inner
+      {:title    (t :help-shortcut-title)
+       :on-click (fn []
+                   (state/sidebar-add-block! (state/get-current-repo) "help" :help))}
+      "?"]]))
 
 (defn- hide-context-menu-and-clear-selection
   [e]

+ 70 - 37
src/main/frontend/components/sidebar.css

@@ -37,13 +37,13 @@
     height: 100%;
     transition: padding-left .3s;
 
-    &.is-left-sidebar-open {
-        padding-left: 0;
+  &.is-left-sidebar-open {
+    padding-left: 0;
 
-        @screen sm {
-            padding-left: var(--ls-left-sidebar-width);
-        }
+    @screen sm {
+      padding-left: var(--ls-left-sidebar-width);
     }
+  }
 }
 
 #main-content {
@@ -63,11 +63,13 @@
   width: var(--ls-left-sidebar-sm-width);
   overflow-x: hidden;
   overflow-y: auto;
-  background-color: var(--ls-primary-background-color);
+  background-color: var(--ls-secondary-background-color);
   transition: transform .3s;
   transform: translateX(-100%);
   z-index: 3;
 
+  -webkit-font-smoothing: antialiased;
+
   > .wrap {
     height: calc(100vh - var(--ls-headbar-inner-top-padding) - 50px);
     margin-top: 40px;
@@ -80,36 +82,53 @@
   }
 
   .page-icon {
-    margin-right: 8px;
-    width: 1.1em;
+    width: 1em;
     text-align: center;
     display: inline-block;
     color: #aaa;
+    visibility: hidden;
   }
 
   a.item {
     user-select: none;
-    transition: none;
+    transition: background-color .3s;
+    margin-bottom: 2px;
+
+    > .ti {
+      font-size: 16px;
+      margin-right: 8px;
+      opacity: .6;
+      position: relative;
+      top: -1px;
+    }
 
-    > span {
-      margin-top: 3px;
+    &.active, &:active {
+      background-color: var(--ls-quaternary-background-color);
     }
 
     &:hover {
-      background-color: var(--ls-quaternary-background-color);
+      opacity: .8;
+
+      .ti {
+        opacity: .8;
+      }
     }
   }
 
   .nav-content-item {
-    padding: 18px 0 0 0;
+    margin-top: 14px;
 
-    > .header {
+    &-inner {
+      border-radius: 8px;
+    }
+
+    .header {
       display: flex;
       justify-content: space-between;
       align-items: center;
       user-select: none;
       cursor: pointer;
-      padding: 4px 18px;
+      padding: 4px 25px;
 
       > span {
         > a {
@@ -152,9 +171,17 @@
       &:active {
         opacity: .8;
       }
+
+      .wrap-th {
+        > span {
+          font-size: 11px;
+          font-weight: 600;
+          padding-top: 2px;
+        }
+      }
     }
 
-    > .bd {
+    .bd {
       display: none;
 
       ul {
@@ -164,12 +191,13 @@
 
         a {
           width: 100%;
-          padding: 2px 20px;
+          padding: 2px 18px;
           display: block;
           text-overflow: ellipsis;
           overflow: hidden;
           white-space: nowrap;
           color: var(--ls-primary-text-color);
+          transition: background-color .3s;
 
           &:hover {
             background-color: var(--ls-quaternary-background-color);
@@ -183,13 +211,13 @@
     }
 
     &.is-expand {
-      > .header > span > a {
+      .header > span > a {
         &:last-child {
           transform: translateY(2px) translateX(-3px);
         }
       }
 
-      > .bd {
+      .bd {
         display: block;
       }
     }
@@ -197,16 +225,18 @@
 
   .new-page {
     position: absolute;
-    background-color: var(--ls-primary-background-color);
     bottom: 0;
     left: 0;
     width: 100%;
-    padding-bottom: 8px;
-    padding-top: 8px;
+    padding: 14px;
+
+    &-link {
+      background-color: var(--ls-primary-background-color);
+      box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
+    }
   }
 
   @screen sm {
-    background-color: var(--ls-secondary-background-color);
     width: var(--ls-left-sidebar-width);
     padding-top: 0;
 
@@ -215,7 +245,9 @@
     }
 
     .new-page {
-      background-color: var(--ls-secondary-background-color);
+      &-link {
+        background-color: var(--ls-primary-background-color);
+      }
     }
   }
 }
@@ -302,9 +334,9 @@
 }
 
 .ls-wide-mode {
- .cp__sidebar-main-content {
-   max-width: var(--ls-main-content-max-width-wide);
- }
+  .cp__sidebar-main-content {
+    max-width: var(--ls-main-content-max-width-wide);
+  }
 }
 
 html[data-theme='dark'] {
@@ -347,14 +379,15 @@ html[data-theme='dark'] {
   }
 
   &-btn {
-    @apply font-bold fixed bottom-4
-    rounded-full h-8 w-8 flex items-center justify-center font-bold
-    opacity-70 hover:opacity-100;
+    @apply fixed bottom-4 right-8;
 
-    user-select: none;
-    cursor: help;
-    right: 24px;
-    background-color: var(--ls-secondary-background-color);
+    > .inner {
+      @apply font-bold
+      rounded-full h-8 w-8 flex items-center justify-center font-bold
+      opacity-70 hover:opacity-100 select-none cursor-help;
+
+      background-color: var(--ls-secondary-background-color);
+    }
   }
 }
 
@@ -368,8 +401,8 @@ html[data-theme='dark'] {
   }
 
   &.open {
-      width: var(--ls-right-sidebar-width);
-      max-width: 60vw;
+    width: var(--ls-right-sidebar-width);
+    max-width: 60vw;
   }
 
   &-scollable {
@@ -479,5 +512,5 @@ html[data-theme='dark'] {
 }
 
 .full-height-without-header {
-    height: calc(100vh - var(--ls-headbar-height) - 4rem);
+  height: calc(100vh - var(--ls-headbar-height) - 4rem);
 }

+ 2 - 0
src/main/frontend/page.cljs

@@ -5,6 +5,7 @@
             [frontend.components.sidebar :as sidebar]
             [frontend.handler.search :as search-handler]
             [frontend.handler.notification :as notification]
+            [frontend.components.onboarding.quick-tour :as quick-tour]
             [frontend.handler.plugin :as plugin-handler]))
 
 (rum/defc route-view
@@ -87,6 +88,7 @@
                    (state/setup-electron-updater!)
                    (ui/inject-document-devices-envs!)
                    (ui/inject-dynamic-style-node!)
+                   (quick-tour/init)
                    (plugin-handler/host-mounted!)
                    (assoc state ::teardown (setup-fns!) ))
    :will-unmount (fn [state]

+ 1 - 0
tailwind.all.css

@@ -5,6 +5,7 @@
 @import "resources/css/reveal.min.css";
 @import "resources/css/reveal_black.min.css";
 @import "resources/css/photoswipe.css";
+@import "resources/css/shepherd.css";
 @import "resources/css/fonts.css";
 @import "resources/css/excalidraw.min.css";
 @import "resources/css/katex.min.css";

+ 2 - 0
templates/config.edn

@@ -177,6 +177,8 @@
 
  :ref/linked-references-collapsed-threshold 50
 
+ :favorites ["How to take dummy notes?"]
+
  ;; any number between 0 and 1 (the greater it is the faster the changes of the next-interval of card reviews) (default 0.5)
  ;; :srs/learning-fraction 0.5