\n 
\n
![\"Get](\"https://play.google.com/intl/en_us/badges/images/generic/en-play-badge.png\"){kind=icon}
](https://play.google.com/store/apps/details?id=com.foxdebug.acodefree) [![\"Get](\"https://fdroid.gitlab.io/artwork/badge/get-it-on.png\"){kind=icon}
](https://www.f-droid.org/packages/com.foxdebug.acode/)\n\n## • Project Structure\n\n\nAcode/\n|\n|- src/ - Core code and language files\n|\n|- www/ - Public documents, compiled files, and HTML templates\n|\n|- utils/ - CLI tools for building, string manipulation, and more\n\n\n## • Multi-language Support\n\nEnhance Acode's capabilities by adding new languages easily. Just create a file with the language code (e.g., en-us for English) in [`src/lang/`](https://github.com/Acode-Foundation/Acode/tree/main/src/lang) and include it in [`src/lib/lang.js`](https://github.com/Acode-Foundation/Acode/blob/main/src/lib/lang.js). Manage strings across languages effortlessly using utility commands:\n\n```shell\npnpm run lang add\npnpm run lang remove\npnpm run lang search\npnpm run lang update\n```\n\n## • Contributing & Building the Application\n\nSee [CONTRIBUTING.md](CONTRIBUTING.md) for detailed instructions.\n\n## • Contributors\n\n\n
\";\n\t\t},\n\t);\n\treturn result;\n}\n\nfunction renderTooltipContent(\n\tplugin: LSPPlugin,\n\tvalue: string | MarkupContent | MarkedString | MarkedString[],\n): string {\n\tif (Array.isArray(value)) {\n\t\treturn value.map((item) => renderCode(plugin, item)).join(\"
\");\n\t}\n\n\tif (\n\t\ttypeof value === \"string\" ||\n\t\t(typeof value === \"object\" && value != null && \"language\" in value)\n\t) {\n\t\treturn renderCode(plugin, value);\n\t}\n\n\treturn plugin.docToHTML(value);\n}\n\nfunction isPointerOrTouchSelection(update: ViewUpdate): boolean {\n\treturn (\n\t\tupdate.selectionSet &&\n\t\tupdate.transactions.some(\n\t\t\t(tr) =>\n\t\t\t\ttr.isUserEvent(\"pointer\") ||\n\t\t\t\ttr.isUserEvent(\"select.pointer\") ||\n\t\t\t\ttr.isUserEvent(\"touch\") ||\n\t\t\t\ttr.isUserEvent(\"select.touch\"),\n\t\t)\n\t);\n}\n\nfunction closeHoverIfNeeded(view: EditorView): void {\n\tif (hasHoverTooltips(view.state)) {\n\t\tview.dispatch({ effects: closeHoverTooltips });\n\t}\n}\n\nfunction hoverRequest(plugin: LSPPlugin, pos: number) {\n\tconst client = plugin.client as typeof plugin.client & LspClientInternals;\n\tif (client.hasCapability?.(\"hoverProvider\") === false) {\n\t\treturn Promise.resolve(null);\n\t}\n\n\tplugin.client.sync();\n\treturn plugin.client.request
\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\n\t\t\t\t
\n\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t0:00\n\t\t\t\t
\n\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t);\n\n\t\tthis.container.appendChild(audioPlayer);\n\n\t\tthis.elements.volumeBtn.el.innerHTML = ``;\n\t}\n\n\tinitializeEvents() {\n\t\t// Play/Pause\n\t\tthis.elements.playBtn.el.addEventListener(\"click\", () => this.togglePlay());\n\n\t\t// Timeline\n\t\tthis.elements.timeline.el.addEventListener(\"click\", (e) => this.seek(e));\n\t\tthis.elements.timeline.el.addEventListener(\"touchstart\", (e) =>\n\t\t\tthis.seek(e),\n\t\t);\n\n\t\t// Volume\n\t\tthis.elements.volumeBtn.el.addEventListener(\"click\", () =>\n\t\t\tthis.toggleMute(),\n\t\t);\n\n\t\t// Audio events\n\t\tthis.audio.addEventListener(\"timeupdate\", () => this.updateProgress());\n\t\tthis.audio.addEventListener(\"ended\", () => this.audioEnded());\n\t}\n\n\ttogglePlay() {\n\t\tif (this.isPlaying) {\n\t\t\tthis.audio.pause();\n\t\t\tthis.elements.playIcon.el.classList.remove(\"pause\");\n\t\t\tthis.elements.playIcon.el.classList.add(\"play_arrow\");\n\t\t} else {\n\t\t\tthis.audio.play();\n\t\t\tthis.elements.playIcon.el.classList.remove(\"play_arrow\");\n\t\t\tthis.elements.playIcon.el.classList.add(\"pause\");\n\t\t}\n\t\tthis.isPlaying = !this.isPlaying;\n\t}\n\n\tseek(e) {\n\t\tconst rect = this.elements.timeline.el.getBoundingClientRect();\n\t\tconst pos =\n\t\t\t(e.type.includes(\"touch\") ? e.touches[0].clientX : e.clientX) - rect.left;\n\t\tconst percentage = pos / rect.width;\n\t\tthis.audio.currentTime = percentage * this.audio.duration;\n\t}\n\n\tupdateProgress() {\n\t\tconst percentage = (this.audio.currentTime / this.audio.duration) * 100;\n\t\tthis.elements.progress.el.style.width = `${percentage}%`;\n\t\tthis.elements.progressHandle.el.style.left = `${percentage}%`;\n\t\tthis.elements.timeDisplay.el.textContent = this.formatTime(\n\t\t\tthis.audio.currentTime,\n\t\t);\n\t}\n\n\tformatTime(seconds) {\n\t\tconst mins = Math.floor(seconds / 60);\n\t\tconst secs = Math.floor(seconds % 60);\n\t\treturn `${mins}:${secs.toString().padStart(2, \"0\")}`;\n\t}\n\n\ttoggleMute() {\n\t\tthis.audio.muted = !this.audio.muted;\n\t\tif (this.audio.muted) {\n\t\t\tthis.elements.volumeBtn.el.innerHTML =\n\t\t\t\t'';\n\t\t} else {\n\t\t\tthis.elements.volumeBtn.el.innerHTML =\n\t\t\t\t'';\n\t\t}\n\t}\n\n\taudioEnded() {\n\t\tthis.isPlaying = false;\n\t\tthis.elements.playIcon.el.classList.remove(\"pause\");\n\t\tthis.elements.playIcon.el.classList.add(\"play_arrow\");\n\t}\n\n\tloadTrack(src) {\n\t\tthis.audio.src = src;\n\t\tthis.audio.load();\n\t}\n\n\tcleanup() {\n\t\tthis.audio.pause();\n\t\tthis.audio.currentTime = 0;\n\t\tthis.isPlaying = false;\n\n\t\tthis.elements.playBtn.el.removeEventListener(\"click\", () =>\n\t\t\tthis.togglePlay(),\n\t\t);\n\t\tthis.elements.timeline.el.removeEventListener(\"click\", (e) => this.seek(e));\n\t\tthis.elements.timeline.el.removeEventListener(\"touchstart\", (e) =>\n\t\t\tthis.seek(e),\n\t\t);\n\t\tthis.elements.volumeBtn.el.removeEventListener(\"click\", () =>\n\t\t\tthis.toggleMute(),\n\t\t);\n\t\tthis.audio.removeEventListener(\"timeupdate\", () => this.updateProgress());\n\t\tthis.audio.removeEventListener(\"ended\", () => this.audioEnded());\n\n\t\tconst audioSrc = this.audio.src;\n\t\tthis.audio.src = \"\";\n\t\tthis.audio.load();\n\t\tif (audioSrc.startsWith(\"blob:\")) {\n\t\t\tURL.revokeObjectURL(audioSrc);\n\t\t}\n\t}\n}\n"
},
{
"path": "src/components/audioPlayer/style.scss",
"content": ".audio-player {\n background: var(--primary-color, #1e1e1e);\n border-radius: 10px;\n padding: 15px;\n display: flex;\n align-items: center;\n gap: 15px;\n width: 100%;\n max-width: 400px;\n user-select: none;\n\n .play-btn {\n background: transparent;\n border: none;\n width: 30px;\n height: 30px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: all 0.2s;\n\n span {\n font-size: 20px;\n color: var(--primary-text-color);\n }\n\n &:hover {\n background: color-mix(in srgb, var(--secondary-color) 30%, transparent);\n }\n }\n\n .timeline {\n flex: 1;\n height: 4px;\n background: color-mix(in srgb, var(--secondary-color) 60%, transparent);\n border-radius: 2px;\n position: relative;\n cursor: pointer;\n\n &:hover .progress-handle {\n opacity: 1;\n }\n }\n\n .progress {\n background: var(--primary-text-color, #fff);\n width: 0%;\n height: 100%;\n border-radius: 2px;\n transition: width 0.1s linear;\n }\n\n .progress-handle {\n width: 12px;\n height: 12px;\n background: var(--primary-text-color, #fff);\n border-radius: 50%;\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n pointer-events: none;\n opacity: 0;\n transition: opacity 0.2s;\n }\n\n .time {\n color: var(--primary-text-color, #fff);\n font-family: monospace;\n font-size: 12px;\n min-width: 45px;\n }\n\n .volume-control {\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n .volume-btn {\n background: transparent;\n border: none;\n cursor: pointer;\n\n svg {\n width: 20px;\n height: 20px;\n fill: var(--primary-text-color, #fff);\n }\n }\n}\n"
},
{
"path": "src/components/checkbox/index.js",
"content": "import \"./styles.scss\";\nimport Ref from \"html-tag-js/ref\";\n\n/**\n * @typedef {Object} Checkbox\n * @property {string} text\n * @property {Ref} ref\n * @property {boolean} checked\n * @property {string} [name]\n * @property {string} [id]\n * @property {string} [size]\n * @property {\"checkbox\"|\"radio\"} [type]\n */\n\n/**\n * Create a checkbox\n * @param {string | Checkbox} text Checkbox label\n * @param {Boolean} checked Whether checkbox is checked or not\n * @param {string} [name] Name of checkbox\n * @param {string} [id] Id of checkbox\n * @param {\"checkbox\"|\"radio\"} [type] Type of checkbox\n * @param {Ref} [ref] A reference to the input element\n * @param {string} [size] Size of checkbox\n * @returns {Checkbox & HTMLLabelElement}\n */\nfunction Checkbox(text, checked, name, id, type, ref, size) {\n\tif (typeof text === \"object\") {\n\t\t({ text, checked, name, id, type, ref, size } = text);\n\t}\n\n\tsize = size || \"1rem\";\n\n\tconst $input = ref || Ref();\n\tconst $checkbox = (\n\t\t\n\t);\n\n\tObject.defineProperties($checkbox, {\n\t\tchecked: {\n\t\t\tget() {\n\t\t\t\treturn !!$input.el.checked;\n\t\t\t},\n\t\t\tset(value) {\n\t\t\t\t$input.el.checked = value;\n\t\t\t},\n\t\t},\n\t\tonclick: {\n\t\t\tget() {\n\t\t\t\treturn $input.el.onclick;\n\t\t\t},\n\t\t\tset(onclick) {\n\t\t\t\t$input.el.onclick = onclick;\n\t\t\t},\n\t\t},\n\t\tonchange: {\n\t\t\tget() {\n\t\t\t\treturn $input.el.onchange;\n\t\t\t},\n\t\t\tset(onchange) {\n\t\t\t\t$input.el.onchange = onchange;\n\t\t\t},\n\t\t},\n\t\tvalue: {\n\t\t\tget() {\n\t\t\t\treturn this.checked;\n\t\t\t},\n\t\t\tset(value) {\n\t\t\t\tthis.checked = value;\n\t\t\t},\n\t\t},\n\t\ttoggle: {\n\t\t\tvalue() {\n\t\t\t\tthis.checked = !this.checked;\n\t\t\t},\n\t\t},\n\t});\n\n\treturn $checkbox;\n}\n\nexport default Checkbox;\n"
},
{
"path": "src/components/checkbox/styles.scss",
"content": ".input-checkbox {\n display: inline-flex;\n align-items: center;\n\n input {\n display: none;\n }\n\n .box {\n display: flex;\n height: 1.2rem;\n width: 1.2rem;\n border-radius: 4px;\n border: solid 1px #252525;\n border: solid 1px var(--secondary-text-color);\n margin: 0 5px;\n\n &::after {\n content: '';\n display: block;\n height: 80%;\n width: 80%;\n background-color: #3399ff;\n background-color: var(--button-background-color);\n margin: auto;\n border-radius: 2px;\n }\n }\n\n input:checked {\n &+.box::after {\n opacity: 1;\n }\n }\n\n input:not(:checked) {\n &+.box::after {\n opacity: 0;\n }\n }\n}"
},
{
"path": "src/components/collapsableList.js",
"content": "import tag from \"html-tag-js\";\nimport tile from \"./tile\";\n\n/**\n * @typedef {object} CollapsibleBase\n * @property {HTMLElement} $title\n * @property {HTMLUListElement} $ul\n * @property {function(void):void} ontoggle\n * @property {function(void):void} collapse\n * @property {function(void):void} expand\n * @property {boolean} collapsed\n * @property {boolean} unclasped\n */\n\n/**\n * @typedef {CollapsibleBase & HTMLElement} Collapsible\n */\n\n/**\n * Create a collapsible list\n * @param {string} titleText Title of the list\n * @param {boolean} hidden If true, the list will be hidden\n * @param {\"indicator\"|\"folder\"} type Type of the list toggle indicator\n * @param {object} [options] Configuration options\n * @param {HTMLElement} [options.tail] Tail element of the title\n * @param {string} [options.type] Type of the list element\n * @param {boolean} [options.allCaps] If true, the title will be in all caps\n * @param {function(this:Collapsible):void} [options.ontoggle] Called when the list is toggled\n * @returns {Collapsible}\n */\nexport default function collapsableList(\n\ttitleText,\n\ttype = \"indicator\",\n\toptions = {},\n) {\n\tlet onscroll = null;\n\tconst $ul = tag(\"ul\", {\n\t\tclassName: \"scroll\",\n\t\tonscroll: onUlScroll,\n\t});\n\tconst $collapseIndicator = tag(\"span\", {\n\t\tclassName: `icon ${type}`,\n\t});\n\tconst $title = tile({\n\t\tlead: $collapseIndicator,\n\t\ttype: \"div\",\n\t\ttext: options.allCaps ? titleText.toUpperCase() : titleText,\n\t\ttail: options.tail,\n\t});\n\tconst $mainWrapper = tag(options.type || \"div\", {\n\t\tclassName: \"list collapsible hidden\",\n\t\tchildren: [$title, $ul],\n\t});\n\n\tlet collapse = () => {\n\t\t$mainWrapper.classList.add(\"hidden\");\n\t\tif ($mainWrapper.ontoggle) $mainWrapper.ontoggle.call($mainWrapper);\n\t\tdelete $ul.dataset.scrollTop;\n\t};\n\n\tlet expand = () => {\n\t\t$mainWrapper.classList.remove(\"hidden\");\n\t\tif ($mainWrapper.ontoggle) $mainWrapper.ontoggle.call($mainWrapper);\n\t};\n\n\t$title.classList.add(\"light\");\n\t$title.addEventListener(\"click\", toggle);\n\n\t[$title, $mainWrapper].forEach(defineProperties);\n\n\t$mainWrapper.dataset.id = `${Math.random().toString(36).substring(2, 15)}`;\n\n\treturn $mainWrapper;\n\n\tfunction onUlScroll() {\n\t\tif (onscroll) onscroll.call($ul);\n\t\t$ul.dataset.scrollTop = $ul.scrollTop;\n\t}\n\n\tfunction toggle() {\n\t\tif ($title.collapsed) {\n\t\t\texpand();\n\t\t} else {\n\t\t\tcollapse();\n\t\t}\n\t}\n\n\tfunction defineProperties($el) {\n\t\tObject.defineProperties($el, {\n\t\t\t$title: {\n\t\t\t\tget() {\n\t\t\t\t\treturn $title;\n\t\t\t\t},\n\t\t\t},\n\t\t\t$ul: {\n\t\t\t\tget() {\n\t\t\t\t\treturn $ul;\n\t\t\t\t},\n\t\t\t},\n\t\t\tontoggle: {\n\t\t\t\tget() {\n\t\t\t\t\treturn options.ontoggle;\n\t\t\t\t},\n\t\t\t\tset(fun) {\n\t\t\t\t\tif (typeof fun === \"function\") options.ontoggle = fun;\n\t\t\t\t},\n\t\t\t},\n\t\t\tcollapse: {\n\t\t\t\tget() {\n\t\t\t\t\treturn collapse || (() => {});\n\t\t\t\t},\n\t\t\t\tset(fun) {\n\t\t\t\t\tif (typeof fun === \"function\") collapse = fun;\n\t\t\t\t},\n\t\t\t},\n\t\t\texpand: {\n\t\t\t\tget() {\n\t\t\t\t\treturn expand || (() => {});\n\t\t\t\t},\n\t\t\t\tset(fun) {\n\t\t\t\t\tif (typeof fun === \"function\") expand = fun;\n\t\t\t\t},\n\t\t\t},\n\t\t\tcollapsed: {\n\t\t\t\tget() {\n\t\t\t\t\treturn $mainWrapper.classList.contains(\"hidden\");\n\t\t\t\t},\n\t\t\t},\n\t\t\tunclasped: {\n\t\t\t\tget() {\n\t\t\t\t\treturn !this.collapsed;\n\t\t\t\t},\n\t\t\t},\n\t\t\tonscroll: {\n\t\t\t\tget() {\n\t\t\t\t\treturn onscroll;\n\t\t\t\t},\n\t\t\t\tset(fun) {\n\t\t\t\t\tif (typeof fun === \"function\") {\n\t\t\t\t\t\tonscroll = fun;\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t},\n\t\t\tscrollTop: {\n\t\t\t\tget() {\n\t\t\t\t\treturn $ul.dataset.scrollTop || 0;\n\t\t\t\t},\n\t\t\t\tset(val) {\n\t\t\t\t\t$ul.dataset.scrollTop = val;\n\t\t\t\t\t$ul.scrollTop = val;\n\t\t\t\t},\n\t\t\t},\n\t\t});\n\t}\n}\n"
},
{
"path": "src/components/contextmenu/index.js",
"content": "import \"./style.scss\";\nimport actionStack from \"lib/actionStack\";\n\n/**\n * @typedef {object} ContextMenuObj\n * @extends HTMLElement\n * @property {function():void} hide hides the menu\n * @property {function():void} show shows the page\n * @property {function():void} destroy destroys the menu\n */\n\n/**\n * @typedef {object} ContextMenuOptions\n * @property {number} left\n * @property {number} top\n * @property {number} bottom\n * @property {number} right\n * @property {string} transformOrigin\n * @property {HTMLElement} toggler\n * @property {function} onshow\n * @property {function} onhide\n * @property {Array<[string, string]>} items Array of [text, action] pairs\n * @property {(this:HTMLElement, event:MouseEvent)=>void} onclick Called when an item is clicked\n * @property {(item:string) => void} onselect Called when an item is selected\n * @property {(this:HTMLElement) => string} innerHTML Called when the menu is shown\n */\n\n/**\n * Create a context menu\n * @param {string|ContextMenuOptions} content Context menu content or options\n * @param {ContextMenuOptions} [options] Options\n * @returns {ContextMenuObj}\n */\nexport default function Contextmenu(content, options) {\n\tif (!options && typeof content === \"object\") {\n\t\toptions = content;\n\t\tcontent = null;\n\t} else if (!options) {\n\t\toptions = {};\n\t}\n\n\tconst $el = tag(\"ul\", {\n\t\tclassName: \"context-menu scroll\",\n\t\tinnerHTML: content || \"\",\n\t\tonclick(e) {\n\t\t\tif (options.onclick) options.onclick.call(this, e);\n\t\t\tif (options.onselect) {\n\t\t\t\tconst $target = e.target;\n\t\t\t\tconst { action } = $target.dataset;\n\t\t\t\tif (!action) return;\n\t\t\t\thide();\n\t\t\t\toptions.onselect.call(this, action);\n\t\t\t}\n\t\t},\n\t\tstyle: {\n\t\t\ttop: options.top || \"auto\",\n\t\t\tleft: options.left || \"auto\",\n\t\t\tright: options.right || \"auto\",\n\t\t\tbottom: options.bottom || \"auto\",\n\t\t\ttransformOrigin: options.transformOrigin,\n\t\t},\n\t});\n\tconst $mask = tag(\"span\", {\n\t\tclassName: \"mask\",\n\t\tontouchstart: hide,\n\t\tonmousedown: hide,\n\t});\n\n\tif (Array.isArray(options.items)) {\n\t\toptions.items.forEach(([text, action]) => {\n\t\t\t$el.append(- \n\t\t\t{hints.map((hint) => (\n\t\t\t\t
\n\t\t\t
\n\t);\n\n\tconst $body = $dialog.querySelector(\".lsp-dialog-body\");\n\n\tfunction renderList() {\n\t\t$body.innerHTML = \"\";\n\n\t\tif (relevantServers.length === 0) {\n\t\t\t$body.appendChild(\n\t\t\t\t\n\t\t\t\t\n\t\t\t\tLanguage Servers\n\t\t\t
\n\t\t\t\n\t\t\n\t\t\t\t\t\n\t\t\t\t\t
,\n\t\t\t);\n\t\t\treturn;\n\t\t}\n\n\t\tconst $list = \n\t\t\t\t\t\tNo language servers for{\" \"}\n\t\t\t\t\t\t{currentLanguage || \"this file\"}\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t {\n\t\t\t\t\t\tawait restartAllServers();\n\t\t\t\t\t\tawait new Promise((r) => setTimeout(r, 500));\n\t\t\t\t\t\trenderList();\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t\n\t\t\t\t\t{hasRunning ? \"Restart All\" : \"Start All\"}\n\t\t\t\t\n\t\t\t\t{hasRunning && (\n\t\t\t\t\t {\n\t\t\t\t\t\t\tawait stopAllServers();\n\t\t\t\t\t\t\trenderList();\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t\n\t\t\t\t\t\tStop All\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t
\n\t\t);\n\t\t$body.appendChild($actions);\n\n\t\tfor (const server of relevantServers) {\n\t\t\tconst status = getServerStatus(server.id);\n\t\t\tconst statusColor = getStatusColor(status);\n\t\t\tconst logs = getLspLogs(server.id);\n\t\t\tconst errorCount = logs.filter((l) => l.level === \"error\").length;\n\n\t\t\tconst $item = (\n\t\t\t\t\n\t\t\t\t\t\t{server.label}\n\t\t\t\t\t\t{status}\n\t\t\t\t\t
\n\t\t\t\t\t{errorCount > 0 && (\n\t\t\t\t\t\t{errorCount}\n\t\t\t\t\t)}\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t);\n\t\t\t$list.appendChild($item);\n\t\t}\n\n\t\t$body.appendChild($list);\n\t}\n\n\tfunction renderDetails() {\n\t\tif (!selectedServer) return;\n\t\t$body.innerHTML = \"\";\n\n\t\tconst server = selectedServer;\n\t\tconst status = getServerStatus(server.id);\n\t\tconst clientState = getClientState(server.id);\n\t\tconst isRunning = status !== \"stopped\";\n\n\t\tconst capabilities = [];\n\t\tconst hasCapabilities = clientState?.client?.serverCapabilities;\n\t\tif (hasCapabilities) {\n\t\t\tconst caps = clientState.client.serverCapabilities;\n\t\t\tif (caps.completionProvider) capabilities.push(\"Completion\");\n\t\t\tif (caps.hoverProvider) capabilities.push(\"Hover\");\n\t\t\tif (caps.definitionProvider) capabilities.push(\"Go to Definition\");\n\t\t\tif (caps.referencesProvider) capabilities.push(\"Find References\");\n\t\t\tif (caps.renameProvider) capabilities.push(\"Rename\");\n\t\t\tif (caps.documentFormattingProvider) capabilities.push(\"Format\");\n\t\t\tif (caps.signatureHelpProvider) capabilities.push(\"Signature Help\");\n\t\t\tif (caps.inlayHintProvider) capabilities.push(\"Inlay Hints\");\n\t\t\tif (caps.codeActionProvider) capabilities.push(\"Code Actions\");\n\t\t\tif (caps.diagnosticProvider) capabilities.push(\"Diagnostics\");\n\t\t}\n\t\tif (isRunning && capabilities.length === 0 && hasCapabilities) {\n\t\t\tcapabilities.push(\"Diagnostics\");\n\t\t}\n\n\t\tconst logs = getLspLogs(server.id);\n\n\t\tconst $details = (\n\t\t\t\n\t\t\t\t
\n\t\t);\n\n\t\t$body.appendChild($details);\n\n\t\t// Create simple collapsible logs section\n\t\tconst $logsSection = (\n\t\t\t\n\t\t\t\t\t {\n\t\t\t\t\t\t\tcurrentView = \"list\";\n\t\t\t\t\t\t\tselectedServer = null;\n\t\t\t\t\t\t\trenderList();\n\t\t\t\t\t\t}}\n\t\t\t\t\t\taria-label=\"Back\"\n\t\t\t\t\t>\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\n\t\t\t\t{isRunning && (\n\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t {\n\t\t\t\t\t\t\t\tawait restartServer(server.id);\n\t\t\t\t\t\t\t\tawait new Promise((r) => setTimeout(r, 500));\n\t\t\t\t\t\t\t\trenderDetails();\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\taria-label=\"Restart Server\"\n\t\t\t\t\t\t\ttitle=\"Restart Server\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t{isRunning && (\n\t\t\t\t\t\t\t {\n\t\t\t\t\t\t\t\t\tawait stopServer(server.id);\n\t\t\t\t\t\t\t\t\trenderDetails();\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\taria-label=\"Stop Server\"\n\t\t\t\t\t\t\t\ttitle=\"Stop Server\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t)}\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t)}\n\n\t\t\t\tCapabilities
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t{capabilities.length > 0\n\t\t\t\t\t\t\t\t? capabilities.map((cap) => (\n\t\t\t\t\t\t\t\t\t\t{cap}\n\t\t\t\t\t\t\t\t\t))\n\t\t\t\t\t\t\t\t: !hasCapabilities && (\n\t\t\t\t\t\t\t\t\t\tInitializing...\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t
\n\n\t\t\t\t{isRunning && (\n\t\t\t\t\tSupported
\n\t\t\t\t\t\n\t\t\t\t\t\t{server.languages.map((lang) => (\n\t\t\t\t\t\t\t.{lang}\n\t\t\t\t\t\t))}\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t)}\n\n\t\t\t\t{isRunning && (\n\t\t\t\t\tProject
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t{clientState?.rootUri || \"(workspace folders mode)\"}\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t)}\n\t\t\tResources
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t\t\tMemory\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t—\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\tUptime\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t—\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\tPID\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t—\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t {\n\t\t\t\t\t\tconst section = e.currentTarget.closest(\".lsp-logs-section\");\n\t\t\t\t\t\tif (section) {\n\t\t\t\t\t\t\tsection.classList.toggle(\"collapsed\");\n\t\t\t\t\t\t\tif (!section.classList.contains(\"collapsed\")) {\n\t\t\t\t\t\t\t\tconst container = section.querySelector(\".lsp-logs-container\");\n\t\t\t\t\t\t\t\tif (container) container.scrollTop = container.scrollHeight;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\tLSP Logs\n\t\t\t\t\t\t{logs.length > 0 && (\n\t\t\t\t\t\t\t({logs.length})\n\t\t\t\t\t\t)}\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t {\n\t\t\t\t\t\t\t\te.stopPropagation();\n\t\t\t\t\t\t\t\tcopyLogsToClipboard(server.id, server.label);\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\taria-label=\"Copy Logs\"\n\t\t\t\t\t\t\ttitle=\"Copy Logs\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t {\n\t\t\t\t\t\t\t\te.stopPropagation();\n\t\t\t\t\t\t\t\tclearLspLogs(server.id);\n\t\t\t\t\t\t\t\trenderDetails();\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\taria-label=\"Clear Logs\"\n\t\t\t\t\t\t\ttitle=\"Clear Logs\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t{logs.length === 0 ? (\n\t\t\t\t\t\t
\n\t\t\t\n\t\t);\n\n\t\t$body.appendChild($logsSection);\n\n\t\t// Fetch and update stats asynchronously\n\t\tif (isRunning) {\n\t\t\tgetServerStats(server.id).then((stats) => {\n\t\t\t\tif (!stats) return;\n\t\t\t\tconst $mem = document.getElementById(`lsp-mem-${server.id}`);\n\t\t\t\tconst $uptime = document.getElementById(`lsp-uptime-${server.id}`);\n\t\t\t\tconst $pid = document.getElementById(`lsp-pid-${server.id}`);\n\t\t\t\tif ($mem) $mem.textContent = stats.memoryFormatted;\n\t\t\t\tif ($uptime) $uptime.textContent = stats.uptimeFormatted;\n\t\t\t\tif ($pid) $pid.textContent = stats.pid ? String(stats.pid) : \"—\";\n\t\t\t});\n\t\t}\n\t}\n\n\tfunction hide() {\n\t\t$dialog.classList.add(\"hide\");\n\t\trestoreTheme();\n\t\tactionStack.remove(\"lsp-info-dialog\");\n\t\tsetTimeout(() => {\n\t\t\t$dialog.remove();\n\t\t\t$mask.remove();\n\t\t\tdialogInstance = null;\n\t\t}, 200);\n\t}\n\n\tdialogInstance = { hide, element: $dialog };\n\n\tactionStack.push({\n\t\tid: \"lsp-info-dialog\",\n\t\taction: hide,\n\t});\n\n\trestoreTheme(true);\n\tdocument.body.appendChild($dialog);\n\tdocument.body.appendChild($mask);\n\n\tif (currentView === \"list\") {\n\t\trenderList();\n\t}\n}\n\nfunction hasConnectedServers() {\n\tconst relevantServers = getServersForCurrentFile();\n\treturn relevantServers.length > 0;\n}\n\nexport { addLspLog, getLspLogs, hasConnectedServers, showLspInfoDialog };\nexport default showLspInfoDialog;\n"
},
{
"path": "src/components/lspInfoDialog/styles.scss",
"content": ":root {\n --lsp-status-active: #22c55e;\n --lsp-status-connecting: #f59e0b;\n --lsp-status-stopped: #6b7280;\n}\n\n.lsp-info-dialog {\n max-width: 360px;\n min-width: 300px;\n\n .title {\n display: flex;\n align-items: center;\n text-transform: none;\n font-weight: 500;\n }\n}\n\n.lsp-dialog-body {\n overflow-y: auto;\n max-height: 65vh;\n\n &::-webkit-scrollbar {\n width: 4px;\n }\n\n &::-webkit-scrollbar-track {\n background: transparent;\n }\n\n &::-webkit-scrollbar-thumb {\n background: var(--scrollbar-color);\n border-radius: 2px;\n }\n}\n\n.lsp-empty-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 48px 24px;\n color: var(--popup-text-color);\n text-align: center;\n\n .icon {\n font-size: 2.5rem;\n margin-bottom: 16px;\n opacity: 0.3;\n }\n\n p {\n font-size: 0.9rem;\n margin: 0;\n opacity: 0.6;\n\n strong {\n opacity: 1;\n }\n }\n}\n\n.lsp-list-actions {\n display: flex;\n gap: 8px;\n padding: 8px 12px;\n border-bottom: 1px solid var(--border-color);\n}\n\n.lsp-action-btn {\n display: flex;\n align-items: center;\n gap: 6px;\n flex: 1;\n justify-content: center;\n padding: 8px 12px;\n background-color: var(--box-shadow-color);\n border: none;\n color: var(--popup-text-color);\n cursor: pointer;\n border-radius: 6px;\n font-size: 0.75rem;\n font-weight: 500;\n transition: all 0.12s ease;\n\n .icon {\n font-size: 0.9rem;\n }\n\n &:hover {\n background-color: var(--active-icon-color);\n }\n\n &.danger {\n color: var(--danger-color);\n\n &:hover {\n background-color: color-mix(in srgb, var(--danger-color) 15%, transparent);\n }\n }\n}\n\n.lsp-server-list {\n list-style: none;\n padding: 8px;\n margin: 0;\n}\n\n.lsp-server-item {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 14px 12px;\n border-radius: 6px;\n cursor: pointer;\n transition: background-color 0.12s ease;\n color: var(--popup-text-color);\n\n &:hover {\n background-color: var(--box-shadow-color);\n }\n\n &:active {\n background-color: var(--active-icon-color);\n }\n\n &:not(:last-child) {\n border-bottom: 1px solid var(--border-color);\n }\n}\n\n.lsp-arrow {\n font-size: 1.3rem;\n opacity: 0.35;\n margin-left: auto;\n}\n\n.lsp-status-dot {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n flex-shrink: 0;\n}\n\n.lsp-server-info {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.lsp-server-name {\n font-size: 0.95rem;\n font-weight: 500;\n color: var(--popup-text-color);\n}\n\n.lsp-server-status {\n font-size: 0.72rem;\n color: var(--popup-text-color);\n opacity: 0.5;\n text-transform: capitalize;\n}\n\n.lsp-error-badge {\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: 18px;\n height: 18px;\n padding: 0 5px;\n background-color: var(--danger-color);\n color: var(--danger-text-color);\n font-size: 0.65rem;\n font-weight: 600;\n border-radius: 9px;\n}\n\n.lsp-details {\n display: flex;\n flex-direction: column;\n}\n\n.lsp-details-header {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 12px;\n border-bottom: 1px solid var(--border-color);\n}\n\n.lsp-header-actions {\n display: flex;\n gap: 4px;\n margin-left: auto;\n}\n\n.lsp-icon-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n background: transparent;\n border: none;\n color: var(--popup-text-color);\n cursor: pointer;\n border-radius: 6px;\n padding: 0;\n transition: all 0.12s ease;\n opacity: 0.7;\n\n &:hover {\n background-color: var(--box-shadow-color);\n opacity: 1;\n }\n\n &:active {\n background-color: var(--active-icon-color);\n }\n\n .icon {\n font-size: 1.1rem;\n }\n\n &.small {\n width: 26px;\n height: 26px;\n\n .icon {\n font-size: 0.95rem;\n }\n }\n\n &.danger {\n color: var(--danger-color);\n\n &:hover {\n background-color: color-mix(in srgb, var(--danger-color) 15%, transparent);\n }\n }\n}\n\n.lsp-details-title {\n display: flex;\n align-items: center;\n gap: 10px;\n font-size: 0.95rem;\n font-weight: 500;\n color: var(--popup-text-color);\n}\n\n.lsp-section {\n padding: 10px 14px;\n\n &:last-child {\n border-bottom: none;\n }\n}\n\n.lsp-section-label {\n font-size: 0.65rem;\n font-weight: 600;\n color: var(--popup-text-color);\n opacity: 0.5;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n margin-bottom: 8px;\n}\n\n.lsp-chip-container {\n display: flex;\n flex-wrap: wrap;\n gap: 5px;\n}\n\n.lsp-chip {\n display: inline-flex;\n align-items: center;\n padding: 4px 10px;\n background: var(--box-shadow-color);\n color: var(--popup-text-color);\n border-radius: 4px;\n font-size: 0.7rem;\n font-weight: 500;\n\n &.ext {\n font-family: monospace;\n font-weight: 600;\n background: color-mix(in srgb, var(--active-color) 15%, transparent);\n color: var(--active-color);\n }\n}\n\n.lsp-project-path {\n font-size: 0.75rem;\n font-family: monospace;\n color: var(--popup-text-color);\n opacity: 0.75;\n word-break: break-all;\n padding: 8px 10px;\n background-color: var(--box-shadow-color);\n border-radius: 6px;\n line-height: 1.3;\n}\n\n.lsp-logs-section {\n margin: 8px 14px 12px;\n\n &.collapsed {\n .lsp-logs-container {\n display: none;\n }\n\n .lsp-expand-icon {\n transform: rotate(-90deg);\n }\n\n .lsp-clear-btn {\n display: none;\n }\n }\n}\n\n.lsp-logs-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n cursor: pointer;\n padding: 6px 8px;\n margin: 0 -8px;\n}\n\n.lsp-logs-title {\n display: flex;\n align-items: center;\n gap: 4px;\n font-size: 0.75rem;\n font-weight: 500;\n color: var(--popup-text-color);\n opacity: 0.7;\n}\n\n.lsp-expand-icon {\n font-size: 1.1rem;\n transition: transform 0.15s ease;\n}\n\n.lsp-log-count {\n font-size: 0.65rem;\n opacity: 0.5;\n margin-left: 2px;\n}\n\n.lsp-logs-actions {\n display: flex;\n gap: 2px;\n}\n\n.lsp-logs-container {\n max-height: 160px;\n overflow-y: auto;\n background-color: var(--box-shadow-color);\n border-radius: 6px;\n font-family: monospace;\n font-size: 0.65rem;\n margin-top: 4px;\n\n &::-webkit-scrollbar {\n width: 3px;\n }\n\n &::-webkit-scrollbar-track {\n background: transparent;\n }\n\n &::-webkit-scrollbar-thumb {\n background: var(--scrollbar-color);\n border-radius: 2px;\n }\n}\n\n.lsp-logs-empty {\n padding: 14px;\n text-align: center;\n color: var(--popup-text-color);\n opacity: 0.4;\n font-size: 0.7rem;\n font-family: inherit;\n}\n\n.lsp-log {\n display: flex;\n gap: 6px;\n padding: 1px 8px;\n line-height: 1.3;\n\n &:first-child {\n padding-top: 4px;\n }\n\n &:last-child {\n padding-bottom: 4px;\n }\n\n &.error .lsp-log-text {\n color: var(--danger-color);\n }\n\n &.warn .lsp-log-text {\n color: var(--error-text-color);\n }\n\n &.stderr .lsp-log-text {\n color: var(--error-text-color);\n }\n}\n\n.lsp-log-time {\n flex-shrink: 0;\n color: var(--popup-text-color);\n opacity: 0.35;\n font-size: 0.6rem;\n}\n\n.lsp-log-text {\n flex: 1;\n color: var(--popup-text-color);\n opacity: 0.85;\n word-break: break-word;\n}\n\n.lsp-stats-container {\n display: flex;\n gap: 16px;\n}\n\n.lsp-stat {\n display: flex;\n align-items: baseline;\n gap: 6px;\n}\n\n.lsp-stat-label {\n font-size: 0.65rem;\n font-weight: 500;\n color: var(--popup-text-color);\n opacity: 0.75;\n}\n\n.lsp-stat-value {\n font-size: 0.8rem;\n font-weight: 600;\n color: var(--popup-text-color);\n font-family: monospace;\n}"
},
{
"path": "src/components/lspStatusBar/index.js",
"content": "import \"./style.scss\";\n\n/**@type {HTMLElement | null} */\nlet $statusBar = null;\n\n/**@type {number | null} */\nlet hideTimeout = null;\n\n/**\n * @typedef {Object} ProgressItem\n * @property {string} title - Task title\n * @property {string} [message] - Current message\n * @property {number} [percentage] - Progress percentage (0-100)\n */\n\n/**@type {MapNo logs yet
\n\t\t\t\t\t) : (\n\t\t\t\t\t\tlogs.slice(-50).map((log) => {\n\t\t\t\t\t\t\tconst time = log.timestamp.toLocaleTimeString(\"en-US\", {\n\t\t\t\t\t\t\t\thour12: false,\n\t\t\t\t\t\t\t\thour: \"2-digit\",\n\t\t\t\t\t\t\t\tminute: \"2-digit\",\n\t\t\t\t\t\t\t\tsecond: \"2-digit\",\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t{time}\n\t\t\t\t\t\t\t\t\t{log.message}\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t})\n\t\t\t\t\t)}\n\t\t\t\t\n\t\t\t\n\t\t
\n\t);\n\n\t// Find the quicktools footer to insert before it\n\tconst $footer = document.getElementById(\"quick-tools\");\n\tif ($footer && $footer.parentNode) {\n\t\t$footer.parentNode.insertBefore($statusBar, $footer);\n\t} else {\n\t\t// Fallback: append to app\n\t\tconst $app = document.getElementById(\"app\") || document.body;\n\t\t$app.appendChild($statusBar);\n\t}\n\n\treturn $statusBar;\n}\n\n/**\n * Build aggregated message from all active progress items\n * @returns {{ message: string, avgProgress: number | null, taskCount: number }}\n */\nfunction buildAggregatedStatus() {\n\tconst items = Array.from(activeProgress.values());\n\tconst taskCount = items.length;\n\n\tif (taskCount === 0) {\n\t\treturn { message: \"\", avgProgress: null, taskCount: 0 };\n\t}\n\n\t// Calculate average progress for items that have percentage\n\tconst itemsWithProgress = items.filter(\n\t\t(item) => typeof item.percentage === \"number\",\n\t);\n\tconst avgProgress =\n\t\titemsWithProgress.length > 0\n\t\t\t? Math.round(\n\t\t\t\t\titemsWithProgress.reduce(\n\t\t\t\t\t\t(sum, item) => sum + (item.percentage || 0),\n\t\t\t\t\t\t0,\n\t\t\t\t\t) / itemsWithProgress.length,\n\t\t\t\t)\n\t\t\t: null;\n\n\t// Build message\n\tif (taskCount === 1) {\n\t\tconst item = items[0];\n\t\tconst parts = [];\n\t\tif (item.message) {\n\t\t\tparts.push(item.message);\n\t\t} else if (item.title) {\n\t\t\tparts.push(item.title);\n\t\t}\n\t\treturn { message: parts.join(\" \"), avgProgress, taskCount };\n\t}\n\n\t// Multiple tasks - show count and maybe the most recent message\n\tconst latestWithMessage = items.filter((item) => item.message).pop();\n\tconst message = latestWithMessage\n\t\t? `${taskCount} tasks: ${latestWithMessage.message}`\n\t\t: `${taskCount} tasks running`;\n\n\treturn { message, avgProgress, taskCount };\n}\n\n/**\n * Update the status bar display\n */\nfunction updateStatusBarDisplay() {\n\tconst bar = $statusBar;\n\tif (!bar) return;\n\n\tconst { message, avgProgress, taskCount } = buildAggregatedStatus();\n\n\tif (taskCount === 0) {\n\t\thideStatusBar();\n\t\treturn;\n\t}\n\n\tconst $title = bar.querySelector(\".lsp-status-title\");\n\tconst $message = bar.querySelector(\".lsp-status-message\");\n\tconst $progressText = bar.querySelector(\".lsp-status-progress-text\");\n\tconst $progressContainer = bar.querySelector(\".lsp-status-progress\");\n\tconst $icon = bar.querySelector(\".lsp-status-icon\");\n\n\tif ($title) $title.textContent = currentServerLabel || \"\";\n\tif ($message) $message.textContent = message;\n\n\tif (avgProgress !== null && $progressText && $progressContainer) {\n\t\t$progressText.textContent = `${avgProgress}%`;\n\t\t$progressContainer.style.display = \"\";\n\t} else if ($progressContainer) {\n\t\t$progressContainer.style.display = \"none\";\n\t}\n\n\t// Show spinning icon while progress is active\n\tif ($icon) {\n\t\t$icon.className = \"lsp-status-icon icon autorenew\";\n\t}\n\n\tbar.className = \"lsp-status info\";\n\tbar.classList.remove(\"hiding\");\n}\n\n/**\n * Hide the status bar\n */\nfunction hideStatusBar() {\n\tif (hideTimeout) {\n\t\tclearTimeout(hideTimeout);\n\t\thideTimeout = null;\n\t}\n\n\tif ($statusBar) {\n\t\t$statusBar.classList.add(\"hiding\");\n\t\tsetTimeout(() => {\n\t\t\tif ($statusBar) {\n\t\t\t\t$statusBar.remove();\n\t\t\t\t$statusBar = null;\n\t\t\t}\n\t\t}, 300);\n\t}\n}\n\n/**\n * Show LSP status notification\n * @param {LspStatusOptions} options - Status options\n * @returns {string | undefined} The status ID for later updates/removal\n */\nexport function showLspStatus(options) {\n\tconst {\n\t\tmessage,\n\t\ticon = \"autorenew\",\n\t\ttype = \"info\",\n\t\tduration = 0,\n\t\tshowProgress = false,\n\t\tprogress,\n\t\ttitle,\n\t\tid,\n\t} = options;\n\n\t// Clear any existing hide timeout\n\tif (hideTimeout) {\n\t\tclearTimeout(hideTimeout);\n\t\thideTimeout = null;\n\t}\n\n\t// If this is a progress item (has id), track it\n\tif (id && id.includes(\"-progress-\")) {\n\t\t// Extract server info from id (format: serverId-progress-token)\n\t\tconst serverMatch = id.match(/^(.+?)-progress-/);\n\t\tif (serverMatch) {\n\t\t\tcurrentServerId = serverMatch[1];\n\t\t\tcurrentServerLabel = title || currentServerId;\n\t\t}\n\n\t\tactiveProgress.set(id, {\n\t\t\ttitle: title || \"\",\n\t\t\tmessage: message || \"\",\n\t\t\tpercentage: progress,\n\t\t});\n\n\t\tensureStatusBar();\n\t\tupdateStatusBarDisplay();\n\t\treturn id;\n\t}\n\n\t// For non-progress messages (errors, warnings, etc.)\n\tconst bar = ensureStatusBar();\n\n\tconst $title = bar.querySelector(\".lsp-status-title\");\n\tconst $message = bar.querySelector(\".lsp-status-message\");\n\tconst $progressText = bar.querySelector(\".lsp-status-progress-text\");\n\tconst $progressContainer = bar.querySelector(\".lsp-status-progress\");\n\tconst $icon = bar.querySelector(\".lsp-status-icon\");\n\n\tif ($title) $title.textContent = title || \"\";\n\tif ($message) $message.textContent = message;\n\n\tconst hasProgress = showProgress && typeof progress === \"number\";\n\tif (hasProgress && $progressText && $progressContainer) {\n\t\t$progressText.textContent = `${Math.round(progress)}%`;\n\t\t$progressContainer.style.display = \"\";\n\t} else if ($progressContainer) {\n\t\t$progressContainer.style.display = \"none\";\n\t}\n\n\tif ($icon) {\n\t\t$icon.className = `lsp-status-icon icon ${icon}`;\n\t}\n\n\tbar.className = `lsp-status ${type}`;\n\tbar.classList.remove(\"hiding\");\n\n\t// Auto-hide after duration unless duration is false\n\tif (duration !== false) {\n\t\tconst ms = duration || 5000;\n\t\thideTimeout = window.setTimeout(() => {\n\t\t\t// Only hide if no progress is active\n\t\t\tif (activeProgress.size === 0) {\n\t\t\t\thideStatusBar();\n\t\t\t}\n\t\t}, ms);\n\t}\n\n\treturn id;\n}\n\n/**\n * Hide a specific progress item by ID\n * @param {string} id - The progress ID to hide\n */\nexport function hideStatus(id) {\n\tif (activeProgress.has(id)) {\n\t\tactiveProgress.delete(id);\n\n\t\tif (activeProgress.size === 0) {\n\t\t\t// All progress complete - hide after a brief delay\n\t\t\thideTimeout = window.setTimeout(() => {\n\t\t\t\thideStatusBar();\n\t\t\t}, 500);\n\t\t} else {\n\t\t\tupdateStatusBarDisplay();\n\t\t}\n\t}\n}\n\n/**\n * Hide the LSP status bar (legacy support - hides all)\n */\nexport function hideLspStatus() {\n\tactiveProgress.clear();\n\thideStatusBar();\n}\n\n/**\n * Update a progress item\n * @param {Partial\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t{$input}
;\n\n\t// Create a palette with input and hints\n\tinputhints($input, generateHints, onSelect);\n\n\t// Only set the darkened theme when this is not a chained palette\n\tif (!isChained) {\n\t\t// Removes the darkened color from status bar and navigation bar\n\t\trestoreTheme(true);\n\t}\n\n\t// Remove palette when input is blurred\n\t$input.addEventListener(\"blur\", remove);\n\t// Don't wait for input to blur when keyboard hides, remove is\n\t// as soon as keyboard starts to hide\n\tkeyboardHandler.on(\"keyboardHideStart\", remove);\n\n\t// Add to DOM\n\tapp.append($palette, $mask);\n\n\t// If we're in a chained palette, ensure we don't lose focus\n\tif (isChained) {\n\t\t// Don't let any blur events from previous palette affect this one\n\t\tsetTimeout(() => {\n\t\t\t$input.focus();\n\t\t}, 0);\n\t}\n\n\t// Focus input to show options\n\t$input.focus();\n\n\t// Trigger input event to show hints immediately\n\t$input.dispatchEvent(new Event(\"input\"));\n\n\t// Add to action stack to remove on back button\n\tactionStack.push({\n\t\tid: \"palette\",\n\t\taction: remove,\n\t});\n\t// Store this palette as the active one for chaining\n\tactivePalette = { remove };\n\n\t/**\n\t * On select callback for inputhints\n\t * @param {string} value\n\t */\n\tfunction onSelect(value) {\n\t\tconst currentPalette = { remove };\n\t\tactivePalette = currentPalette;\n\n\t\tonsSelectCb(value);\n\n\t\tif (activePalette === currentPalette) {\n\t\t\tremove();\n\t\t}\n\t}\n\n\t/**\n\t * Keydown event handler for input\n\t * @param {KeyboardEvent} e\n\t */\n\tfunction onkeydown(e) {\n\t\tif (e.key !== \"Escape\") return;\n\t\tremove();\n\t}\n\n\t/**\n\t * Generates hint for inputhints\n\t * @param {HintCallback} setHints Set hints callback\n\t * @param {HintModification} hintModification Hint modification object\n\t */\n\tasync function generateHints(setHints, hintModification) {\n\t\tconst list = getList(hintModification);\n\t\tconst data = list instanceof Promise ? await list : list;\n\t\tsetHints(data);\n\t}\n\n\t/**\n\t * Removes the palette\n\t */\n\tfunction remove() {\n\t\tactionStack.remove(\"palette\");\n\t\tkeyboardHandler.off(\"keyboardHideStart\", remove);\n\t\t$input.removeEventListener(\"blur\", remove);\n\n\t\t$palette.remove();\n\t\t$mask.remove();\n\n\t\t// Restore previous palette if chained\n\t\tif (isChained && previousPalette) {\n\t\t\tactivePalette = previousPalette;\n\t\t} else {\n\t\t\tactivePalette = null;\n\t\t\trestoreTheme();\n\t\t}\n\n\t\tif (typeof onremove === \"function\") {\n\t\t\tonremove();\n\t\t\treturn;\n\t\t}\n\n\t\t// If not chained or last in chain, focus the editor\n\t\tif (!isChained) {\n\t\t\tconst { activeFile, editor } = editorManager;\n\t\t\tif (activeFile.wasFocused) {\n\t\t\t\teditor.focus();\n\t\t\t}\n\t\t}\n\n\t\tremove = () => {\n\t\t\twindow.log(\"warn\", \"Palette already removed.\");\n\t\t};\n\t}\n}\n"
},
{
"path": "src/components/palette/style.scss",
"content": "#palette {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n margin: auto;\n height: 40px;\n width: 90vw;\n max-width: 600px;\n z-index: 99;\n display: flex;\n align-items: center;\n background-color: inherit;\n box-shadow: 0 0 4px black;\n z-index: 999;\n\n &~#hints {\n width: 90vw;\n box-sizing: border-box;\n z-index: 999;\n }\n\n &~.mask {\n opacity: 0.4;\n z-index: 998;\n // pointer-events: none;\n }\n\n input {\n width: 100%;\n border: none;\n color: var(--primary-text-color);\n }\n}"
},
{
"path": "src/components/quickTools/footer.js",
"content": "/**\n * @typedef {import('html-tag-js/ref')} Ref\n */\n\nimport settings from \"lib/settings\";\nimport items, { ref } from \"./items\";\n\n/**\n * Create a row with common buttons\n * @param {object} param0 Attributes\n * @param {number} [param0.row] Row number\n */\nexport const Row = ({ row }) => {\n\tconst startIndex =\n\t\t(row - 1) * settings.QUICKTOOLS_GROUP_CAPACITY * settings.QUICKTOOLS_GROUPS;\n\treturn (\n\t\t\n\t\t\t{(() => {\n\t\t\t\tconst sections = [];\n\t\t\t\tfor (let i = 0; i < settings.QUICKTOOLS_GROUPS; ++i) {\n\t\t\t\t\tconst section = [];\n\t\t\t\t\tfor (let j = 0; j < settings.QUICKTOOLS_GROUP_CAPACITY; ++j) {\n\t\t\t\t\t\tconst index =\n\t\t\t\t\t\t\tstartIndex + (i * settings.QUICKTOOLS_GROUP_CAPACITY + j);\n\t\t\t\t\t\tconst itemIndex = settings.value.quicktoolsItems[index]; // saved item index\n\t\t\t\t\t\tconst item = items[itemIndex]; // item object\n\t\t\t\t\t\tsection.push(
\n\t);\n};\n\n/**\n * Create a search row with search input and buttons\n * @returns {Element}\n */\nexport const SearchRow1 = ({ inputRef }) => (\n\t{section}
);\n\t\t\t\t}\n\t\t\t\treturn sections;\n\t\t\t})()}\n\t\t\n\t\t\n\t\t
\n);\n\n/**\n * Create a search row with replace input and buttons\n * @returns {Element}\n */\nexport const SearchRow2 = ({ inputRef, posRef, totalRef }) => (\n\t\n\t\t\n\t\t
\n);\n\n/**@type {HTMLElement} */\nexport const $footer = ;\n\n/**@type {HTMLElement} */\nexport const $toggler = (\n\t\n\t\t\t0\n\t\t\tof\n\t\t\t0\n\t\t
\n\t\n\t\t\t
\n\t);\n\n\t$panel.append($dragHandle, $header, $content);\n\t$mask.onclick = hide;\n\n\tlet startY = 0;\n\tlet currentY = 0;\n\tlet isDragging = false;\n\n\t$dragHandle.ontouchstart = onDragStart;\n\t$dragHandle.onmousedown = onDragStart;\n\n\tfunction onDragStart(e) {\n\t\tisDragging = true;\n\t\tstartY = e.touches ? e.touches[0].clientY : e.clientY;\n\t\tcurrentY = startY;\n\t\t$panel.style.transition = \"none\";\n\n\t\tdocument.addEventListener(\"touchmove\", onDragMove, { passive: false });\n\t\tdocument.addEventListener(\"mousemove\", onDragMove);\n\t\tdocument.addEventListener(\"touchend\", onDragEnd);\n\t\tdocument.addEventListener(\"mouseup\", onDragEnd);\n\t}\n\n\tfunction onDragMove(e) {\n\t\tif (!isDragging) return;\n\t\te.preventDefault();\n\t\tcurrentY = e.touches ? e.touches[0].clientY : e.clientY;\n\t\tconst deltaY = currentY - startY;\n\n\t\tif (deltaY > 0) {\n\t\t\t$panel.style.transform = `translateY(${deltaY}px)`;\n\t\t} else if (!state.expanded) {\n\t\t\tconst expansion = Math.min(Math.abs(deltaY), 100);\n\t\t\t$panel.style.maxHeight = `${60 + (expansion / 100) * 25}vh`;\n\t\t}\n\t}\n\n\tfunction onDragEnd() {\n\t\tisDragging = false;\n\t\tdocument.removeEventListener(\"touchmove\", onDragMove);\n\t\tdocument.removeEventListener(\"mousemove\", onDragMove);\n\t\tdocument.removeEventListener(\"touchend\", onDragEnd);\n\t\tdocument.removeEventListener(\"mouseup\", onDragEnd);\n\n\t\t$panel.style.transition = \"\";\n\t\tconst deltaY = currentY - startY;\n\n\t\tif (deltaY > 100) {\n\t\t\thide();\n\t\t} else if (deltaY < -50 && !state.expanded) {\n\t\t\tstate.expanded = true;\n\t\t\t$panel.classList.add(\"expanded\");\n\t\t\t$panel.style.transform = \"\";\n\t\t\t$panel.style.maxHeight = \"\";\n\t\t} else {\n\t\t\t$panel.style.transform = \"\";\n\t\t\t$panel.style.maxHeight = \"\";\n\t\t}\n\t}\n\n\tfunction setTitle(symbolName) {\n\t\t$title.innerHTML = \"\";\n\t\t$title.append(\n\t\t\t,\n\t\t\tReferences to ,\n\t\t\t{sanitize(symbolName)},\n\t\t);\n\t}\n\n\tfunction setSubtitle(text) {\n\t\t$subtitle.textContent = text;\n\t}\n\n\tfunction openInTab() {\n\t\tconst refs = state.references;\n\t\tconst sym = state.symbolName;\n\t\thide();\n\t\topenReferencesTab({\n\t\t\tsymbolName: sym,\n\t\t\treferences: refs,\n\t\t});\n\t}\n\n\tfunction toggleFile(uri) {\n\t\tif (state.collapsedFiles.has(uri)) {\n\t\t\tstate.collapsedFiles.delete(uri);\n\t\t} else {\n\t\t\tstate.collapsedFiles.add(uri);\n\t\t}\n\t\trenderReferencesList();\n\t}\n\n\tfunction renderLoading() {\n\t\t$content.innerHTML = \"\";\n\t\t$content.append(\n\t\t\t\n\t\t\t\t{$title}\n\t\t\t\t{$subtitle}\n\t\t\t
\n\t\t\t\n\t\t\t\t{$openTabBtn}\n\t\t\t\t{$closeBtn}\n\t\t\t
\n\t\t\n\t\t\t\t\n\t\t\t\tFinding references...\n\t\t\t
,\n\t\t);\n\t}\n\n\tfunction renderEmpty() {\n\t\t$content.innerHTML = \"\";\n\t\t$content.append(\n\t\t\t\n\t\t\t\t\n\t\t\t\tNo references found\n\t\t\t
,\n\t\t);\n\t}\n\n\tfunction renderReferencesList() {\n\t\t$refList.innerHTML = \"\";\n\n\t\tconst visibleItems = state.flatItems.filter((item) => {\n\t\t\tif (item.type === \"file-header\") return true;\n\t\t\treturn !state.collapsedFiles.has(item.uri);\n\t\t});\n\n\t\tconst fragment = document.createDocumentFragment();\n\n\t\tfor (const item of visibleItems) {\n\t\t\tconst $el = createReferenceItem(item, {\n\t\t\t\tcollapsedFiles: state.collapsedFiles,\n\t\t\t\tonToggleFile: toggleFile,\n\t\t\t\tonNavigate: (ref) => {\n\t\t\t\t\thide();\n\t\t\t\t\tnavigateToReference(ref);\n\t\t\t\t},\n\t\t\t});\n\t\t\tfragment.appendChild($el);\n\t\t}\n\n\t\t$refList.appendChild(fragment);\n\t\t$content.innerHTML = \"\";\n\t\t$content.appendChild($refList);\n\t}\n\n\tasync function renderReferences() {\n\t\t$content.innerHTML = \"\";\n\t\t$content.append(\n\t\t\t\n\t\t\t\t\n\t\t\t\tHighlighting code...\n\t\t\t
,\n\t\t);\n\n\t\tconst stats = getReferencesStats(state.references);\n\t\tsetSubtitle(stats.text);\n\n\t\tstate.flatItems = await buildFlatList(state.references, state.symbolName);\n\n\t\trenderReferencesList();\n\t}\n\n\tfunction show(options = {}) {\n\t\tif (currentPanel && currentPanel !== panelInstance) {\n\t\t\tcurrentPanel.hide();\n\t\t}\n\t\tcurrentPanel = panelInstance;\n\n\t\tstate.symbolName = options.symbolName || \"\";\n\t\tstate.references = [];\n\t\tstate.loading = true;\n\t\tstate.expanded = false;\n\t\tstate.collapsedFiles.clear();\n\t\tstate.flatItems = [];\n\n\t\tclearHighlightCache();\n\n\t\tsetTitle(state.symbolName);\n\t\tsetSubtitle(\"Searching...\");\n\t\trenderLoading();\n\n\t\tdocument.body.append($mask, $panel);\n\n\t\trequestAnimationFrame(() => {\n\t\t\t$mask.classList.add(\"visible\");\n\t\t\t$panel.classList.add(\"visible\");\n\t\t\t$panel.classList.remove(\"expanded\");\n\t\t});\n\n\t\tstate.visible = true;\n\n\t\tactionStack.push({\n\t\t\tid: \"references-panel\",\n\t\t\taction: hide,\n\t\t});\n\t}\n\n\tfunction hide() {\n\t\tif (!state.visible) return;\n\t\tstate.visible = false;\n\n\t\t$mask.classList.remove(\"visible\");\n\t\t$panel.classList.remove(\"visible\");\n\n\t\tactionStack.remove(\"references-panel\");\n\n\t\tsetTimeout(() => {\n\t\t\t$mask.remove();\n\t\t\t$panel.remove();\n\t\t}, 250);\n\n\t\tif (currentPanel === panelInstance) {\n\t\t\tcurrentPanel = null;\n\t\t}\n\t}\n\n\tfunction setReferences(references) {\n\t\tstate.loading = false;\n\t\tstate.references = references || [];\n\n\t\tif (state.references.length === 0) {\n\t\t\tsetSubtitle(\"No references found\");\n\t\t\trenderEmpty();\n\t\t} else {\n\t\t\trenderReferences();\n\t\t}\n\t}\n\n\tfunction setError(message) {\n\t\tstate.loading = false;\n\t\tsetSubtitle(\"Error\");\n\t\t$content.innerHTML = \"\";\n\t\t$content.append(\n\t\t\t\n\t\t\t\t\n\t\t\t\t{sanitize(message)}\n\t\t\t
,\n\t\t);\n\t}\n\n\tconst panelInstance = {\n\t\tshow,\n\t\thide,\n\t\tsetReferences,\n\t\tsetError,\n\t\tget visible() {\n\t\t\treturn state.visible;\n\t\t},\n\t};\n\n\treturn panelInstance;\n}\n\nlet panelSingleton = null;\n\nfunction getPanel() {\n\tif (!panelSingleton) {\n\t\tpanelSingleton = createReferencesPanel();\n\t}\n\treturn panelSingleton;\n}\n\nexport function showReferencesPanel(options) {\n\tconst panel = getPanel();\n\tpanel.show(options);\n\treturn panel;\n}\n\nexport function hideReferencesPanel() {\n\tconst panel = getPanel();\n\tpanel.hide();\n}\n\nexport { openReferencesTab };\n\nexport default {\n\tshow: showReferencesPanel,\n\thide: hideReferencesPanel,\n\tgetPanel,\n\topenReferencesTab,\n};\n"
},
{
"path": "src/components/referencesPanel/referencesTab.js",
"content": "import EditorFile from \"lib/editorFile\";\nimport {\n\tbuildFlatList,\n\tclearHighlightCache,\n\tcreateReferenceItem,\n\tgetReferencesStats,\n\tnavigateToReference,\n\tsanitize,\n} from \"./utils\";\n\nexport function createReferencesTab(options = {}) {\n\tconst {\n\t\tsymbolName = \"\",\n\t\treferences = [],\n\t\tflatItems: prebuiltItems = null,\n\t} = options;\n\tconst collapsedFiles = new Set();\n\tlet flatItems = prebuiltItems || [];\n\tlet isInitialized = false;\n\n\tconst $container = ;\n\tconst $listContainer = ;\n\tconst $refList = ;\n\n\tconst stats = getReferencesStats(references);\n\n\tconst $header = (\n\t\t\n\t\t\t
\n\t);\n\n\tconst $loadingState = (\n\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\tReferences to
\n\t\t{sanitize(symbolName)}\n\t\t\t\t\n\t\t\t\t{stats.text}\n\t\t\t\n\t\t\t\n\t\t\tHighlighting code...\n\t\t
\n\t);\n\n\t$container.append($header, $listContainer);\n\n\tfunction getVisibleItems() {\n\t\treturn flatItems.filter((item) => {\n\t\t\tif (item.type === \"file-header\") return true;\n\t\t\treturn !collapsedFiles.has(item.uri);\n\t\t});\n\t}\n\n\tfunction toggleFile(uri) {\n\t\tif (collapsedFiles.has(uri)) {\n\t\t\tcollapsedFiles.delete(uri);\n\t\t} else {\n\t\t\tcollapsedFiles.add(uri);\n\t\t}\n\t\trenderList();\n\t}\n\n\tfunction renderList() {\n\t\t$refList.innerHTML = \"\";\n\n\t\tconst visibleItems = getVisibleItems();\n\t\tconst fragment = document.createDocumentFragment();\n\n\t\tfor (const item of visibleItems) {\n\t\t\tconst $el = createReferenceItem(item, {\n\t\t\t\tcollapsedFiles,\n\t\t\t\tonToggleFile: toggleFile,\n\t\t\t\tonNavigate: navigateToReference,\n\t\t\t});\n\t\t\tfragment.appendChild($el);\n\t\t}\n\n\t\t$refList.appendChild(fragment);\n\t}\n\n\tasync function init() {\n\t\tif (isInitialized) return;\n\t\tisInitialized = true;\n\n\t\tif (!prebuiltItems || prebuiltItems.length === 0) {\n\t\t\t$listContainer.appendChild($loadingState);\n\t\t\tflatItems = await buildFlatList(references, symbolName);\n\t\t\t$loadingState.remove();\n\t\t}\n\n\t\trenderList();\n\t\t$listContainer.appendChild($refList);\n\t}\n\n\tfunction destroy() {\n\t\t$refList.innerHTML = \"\";\n\t}\n\n\treturn {\n\t\tcontainer: $container,\n\t\tinit,\n\t\tdestroy,\n\t\tget symbolName() {\n\t\t\treturn symbolName;\n\t\t},\n\t\tget referenceCount() {\n\t\t\treturn references.length;\n\t\t},\n\t};\n}\n\nexport async function openReferencesTab(options = {}) {\n\tconst { symbolName = \"\", references = [] } = options;\n\n\tconst tabName = `Refs: ${symbolName}`;\n\tconst existingFile = editorManager.getFile(tabName, \"filename\");\n\tif (existingFile) {\n\t\texistingFile.makeActive();\n\t\treturn existingFile;\n\t}\n\n\tclearHighlightCache();\n\tconst flatItems = await buildFlatList(references, symbolName);\n\tconst stats = getReferencesStats(references);\n\n\tconst tabView = createReferencesTab({ symbolName, references, flatItems });\n\n\tconst file = new EditorFile(tabName, {\n\t\ttype: \"terminal\",\n\t\tcontent: tabView.container,\n\t\ttabIcon: \"icon linkinsert_link\",\n\t\trender: true,\n\t});\n\n\tfile.setCustomTitle(() => stats.text);\n\ttabView.init();\n\n\tfile.on(\"close\", () => {\n\t\ttabView.destroy();\n\t});\n\n\treturn file;\n}\n\nexport default {\n\tcreateReferencesTab,\n\topenReferencesTab,\n};\n"
},
{
"path": "src/components/referencesPanel/styles.scss",
"content": "@use \"../../styles/mixins.scss\";\n\n.references-panel-mask {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: rgba(0, 0, 0, 0.4);\n z-index: 100;\n opacity: 0;\n transition: opacity 200ms ease-out;\n pointer-events: none;\n\n &.visible {\n opacity: 1;\n pointer-events: auto;\n }\n}\n\n.references-panel {\n position: fixed;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: 101;\n background-color: var(--popup-background-color);\n border-top-left-radius: 12px;\n border-top-right-radius: 12px;\n box-shadow: 0 -4px 20px var(--box-shadow-color);\n transform: translateY(100%);\n transition: transform 250ms ease-out, max-height 200ms ease-out;\n display: flex;\n flex-direction: column;\n max-height: 60vh;\n overflow: hidden;\n\n &.visible {\n transform: translateY(0);\n }\n\n &.expanded {\n max-height: 85vh;\n }\n\n .drag-handle {\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 8px 0 4px 0;\n cursor: grab;\n flex-shrink: 0;\n\n &::after {\n content: \"\";\n width: 36px;\n height: 4px;\n background-color: var(--border-color);\n border-radius: 2px;\n }\n\n &:active {\n cursor: grabbing;\n }\n }\n\n .panel-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 8px 12px 12px 16px;\n border-bottom: 1px solid var(--border-color);\n min-height: 44px;\n flex-shrink: 0;\n\n .header-content {\n display: flex;\n flex-direction: column;\n gap: 2px;\n flex: 1;\n min-width: 0;\n\n .header-title {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 1rem;\n font-weight: 600;\n color: var(--primary-text-color);\n\n .icon {\n font-size: 1.1em;\n opacity: 0.7;\n }\n\n .symbol-name {\n font-family: monospace;\n background-color: var(--secondary-color);\n padding: 2px 8px;\n border-radius: 4px;\n max-width: 160px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n }\n\n .header-subtitle {\n font-size: 0.85rem;\n color: var(--secondary-text-color);\n opacity: 0.8;\n }\n }\n\n .header-actions {\n display: flex;\n gap: 4px;\n flex-shrink: 0;\n }\n\n .action-btn {\n width: 36px;\n height: 36px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n background: transparent;\n color: var(--secondary-text-color);\n border-radius: 50%;\n cursor: pointer;\n\n &:active {\n background-color: var(--active-icon-color);\n }\n\n .icon {\n font-size: 1.2em;\n }\n\n &.open-tab-btn {\n color: var(--active-color);\n }\n }\n }\n\n .panel-content {\n flex: 1;\n overflow-y: auto;\n overflow-x: hidden;\n -webkit-overflow-scrolling: touch;\n overscroll-behavior: contain;\n\n &::-webkit-scrollbar {\n width: var(--scrollbar-width, 4px);\n }\n\n &::-webkit-scrollbar-track {\n background: transparent;\n }\n\n &::-webkit-scrollbar-thumb {\n background: var(--scrollbar-color, rgba(0, 0, 0, 0.333));\n border-radius: calc(var(--scrollbar-width, 4px) / 2);\n }\n }\n\n .loading-state {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 32px 16px;\n color: var(--secondary-text-color);\n gap: 12px;\n\n .loader {\n @include mixins.circular-loader(24px);\n }\n }\n\n .empty-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 32px 16px;\n color: var(--secondary-text-color);\n text-align: center;\n\n .icon {\n font-size: 2rem;\n margin-bottom: 8px;\n opacity: 0.5;\n }\n }\n}\n\n.ref-file-header,\n.ref-item {\n box-sizing: border-box;\n display: flex;\n align-items: center;\n will-change: transform;\n}\n\n.ref-file-header {\n gap: 8px;\n padding: 0 16px;\n cursor: pointer;\n user-select: none;\n background-color: color-mix(in srgb, var(--secondary-color) 50%, var(--primary-color));\n\n &:active {\n background-color: var(--active-icon-color);\n }\n\n .chevron {\n font-size: 1rem;\n color: var(--secondary-text-color);\n transition: transform 150ms ease;\n width: 18px;\n text-align: center;\n flex-shrink: 0;\n }\n\n &.collapsed .chevron {\n transform: rotate(-90deg);\n }\n\n .file-icon {\n font-size: 1rem;\n flex-shrink: 0;\n }\n\n .file-name {\n flex: 1;\n font-size: 0.9rem;\n font-weight: 500;\n color: var(--primary-text-color);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n min-width: 0;\n }\n\n .ref-count {\n font-size: 0.75rem;\n color: var(--secondary-text-color);\n background-color: var(--popup-background-color);\n padding: 2px 8px;\n border-radius: 10px;\n flex-shrink: 0;\n }\n}\n\n.ref-item {\n gap: 10px;\n padding: 0 16px 0 36px;\n cursor: pointer;\n\n &:active {\n background-color: var(--active-icon-color);\n }\n\n .line-number {\n font-size: 0.75rem;\n color: var(--secondary-text-color);\n min-width: 32px;\n text-align: right;\n font-family: monospace;\n flex-shrink: 0;\n opacity: 0.7;\n }\n\n .ref-preview {\n flex: 1;\n font-size: 0.85rem;\n font-family: monospace;\n color: var(--primary-text-color);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n line-height: 1.4;\n min-width: 0;\n direction: rtl;\n text-align: left;\n\n span {\n direction: ltr;\n unicode-bidi: bidi-override;\n }\n\n .symbol-match {\n background-color: color-mix(in srgb, var(--active-color) 30%, transparent);\n border-radius: 2px;\n padding: 0 2px;\n }\n }\n}\n\n.references-tab-container {\n display: flex;\n flex-direction: column;\n height: 100%;\n background-color: var(--primary-color);\n color: var(--primary-text-color);\n\n .references-tab-header {\n padding: 16px;\n border-bottom: 1px solid var(--border-color);\n background-color: var(--secondary-color);\n flex-shrink: 0;\n\n .header-info {\n display: flex;\n align-items: center;\n gap: 10px;\n flex-wrap: wrap;\n\n .icon {\n font-size: 1.2em;\n opacity: 0.7;\n }\n\n .header-title {\n font-size: 1rem;\n font-weight: 600;\n color: var(--primary-text-color);\n\n code {\n font-family: monospace;\n background-color: var(--popup-background-color);\n padding: 2px 8px;\n border-radius: 4px;\n margin-left: 4px;\n }\n }\n\n .header-stats {\n font-size: 0.85rem;\n color: var(--secondary-text-color);\n margin-left: auto;\n }\n }\n }\n\n .references-list-container {\n flex: 1;\n overflow-y: auto;\n overflow-x: hidden;\n -webkit-overflow-scrolling: touch;\n overscroll-behavior: contain;\n\n &::-webkit-scrollbar {\n width: var(--scrollbar-width, 4px);\n }\n\n &::-webkit-scrollbar-track {\n background: transparent;\n }\n\n &::-webkit-scrollbar-thumb {\n background: var(--scrollbar-color, rgba(0, 0, 0, 0.333));\n border-radius: calc(var(--scrollbar-width, 4px) / 2);\n }\n\n .loading-state {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 32px 16px;\n color: var(--secondary-text-color);\n gap: 12px;\n\n .loader {\n @include mixins.circular-loader(24px);\n }\n }\n }\n}"
},
{
"path": "src/components/referencesPanel/utils.js",
"content": "import { EditorView } from \"@codemirror/view\";\nimport Sidebar from \"components/sidebar\";\nimport DOMPurify from \"dompurify\";\nimport openFile from \"lib/openFile\";\nimport {\n\tclearHighlightCache,\n\thighlightLine,\n\tsanitize,\n} from \"utils/codeHighlight\";\nimport helpers from \"utils/helpers\";\n\nexport { clearHighlightCache, sanitize };\n\nexport function getFilename(uri) {\n\tif (!uri) return \"\";\n\ttry {\n\t\tconst decoded = decodeURIComponent(uri);\n\t\tconst parts = decoded.split(\"/\").filter(Boolean);\n\t\treturn parts.pop() || \"\";\n\t} catch {\n\t\tconst parts = uri.split(\"/\").filter(Boolean);\n\t\treturn parts.pop() || \"\";\n\t}\n}\n\nexport function escapeRegExp(string) {\n\treturn string.replace(/[.*+?^${}()|[\\]\\\\]/g, \"\\\\$&\");\n}\n\nexport function groupReferencesByFile(references) {\n\tconst grouped = {};\n\tfor (const ref of references) {\n\t\tif (!grouped[ref.uri]) {\n\t\t\tgrouped[ref.uri] = [];\n\t\t}\n\t\tgrouped[ref.uri].push(ref);\n\t}\n\treturn grouped;\n}\n\nexport async function buildFlatList(references, symbolName) {\n\tconst grouped = groupReferencesByFile(references);\n\n\tconst items = [];\n\tfor (const [uri, fileRefs] of Object.entries(grouped)) {\n\t\tfileRefs.sort((a, b) => a.range.start.line - b.range.start.line);\n\n\t\titems.push({\n\t\t\ttype: \"file-header\",\n\t\t\turi,\n\t\t\tfileName: getFilename(uri),\n\t\t\tcount: fileRefs.length,\n\t\t});\n\n\t\tfor (const ref of fileRefs) {\n\t\t\tconst highlightedText = await highlightLine(\n\t\t\t\tref.lineText || \"\",\n\t\t\t\turi,\n\t\t\t\tsymbolName,\n\t\t\t);\n\n\t\t\titems.push({\n\t\t\t\ttype: \"reference\",\n\t\t\t\turi,\n\t\t\t\tref,\n\t\t\t\tline: ref.range.start.line + 1,\n\t\t\t\tlineText: ref.lineText || \"\",\n\t\t\t\thighlightedText,\n\t\t\t\tsymbol: symbolName,\n\t\t\t});\n\t\t}\n\t}\n\treturn items;\n}\n\nexport function createReferenceItem(item, options = {}) {\n\tconst { collapsedFiles, onToggleFile, onNavigate } = options;\n\n\tif (item.type === \"file-header\") {\n\t\tconst isCollapsed = collapsedFiles?.has(item.uri);\n\t\tconst iconClass = helpers.getIconForFile(item.fileName);\n\n\t\tconst $el = (\n\t\t\t onNavigate?.(item.ref)}>\n\t\t\t{item.line}\n\t\t\t\n\t\t
\n\t);\n\n\t$el.get(\".ref-preview\").innerHTML = DOMPurify.sanitize(item.highlightedText);\n\n\treturn $el;\n}\n\nexport async function navigateToReference(ref) {\n\tSidebar.hide();\n\n\ttry {\n\t\tawait openFile(ref.uri, { render: true });\n\t\tconst { editor } = editorManager;\n\t\tif (!editor) return;\n\n\t\tconst doc = editor.state.doc;\n\t\tconst startLine = doc.line(ref.range.start.line + 1);\n\t\tconst endLine = doc.line(ref.range.end.line + 1);\n\t\tconst from = Math.min(\n\t\t\tstartLine.from + ref.range.start.character,\n\t\t\tstartLine.to,\n\t\t);\n\t\tconst to = Math.min(endLine.from + ref.range.end.character, endLine.to);\n\n\t\teditor.dispatch({\n\t\t\tselection: { anchor: from, head: to },\n\t\t\teffects: EditorView.scrollIntoView(from, { y: \"center\" }),\n\t\t});\n\t\teditor.focus();\n\t} catch (error) {\n\t\tconsole.error(\"Failed to navigate to reference:\", error);\n\t}\n}\n\nexport function getReferencesStats(references) {\n\tconst fileCount = new Set(references.map((r) => r.uri)).size;\n\tconst refCount = references.length;\n\treturn {\n\t\tfileCount,\n\t\trefCount,\n\t\ttext: `${refCount} reference${refCount !== 1 ? \"s\" : \"\"} in ${fileCount} file${fileCount !== 1 ? \"s\" : \"\"}`,\n\t};\n}\n"
},
{
"path": "src/components/scrollbar/index.js",
"content": "import \"./style.scss\";\nimport tag from \"html-tag-js\";\n\n/**\n * @typedef {object} Scrollbar\n * @property {function():void} destroy\n * @property {function():void} render\n * @property {function():void} show\n * @property {function():void} hide\n * @property {function():void} resize\n * @property {function():void} onshow\n * @property {function():void} onhide\n * @property {function():void} hideImmediately\n * @property {number} value\n * @property {number} size\n * @property {boolean} visible\n */\n\n/**\n * Create a scrollbar\n * @param {Object} options\n * @param {HTMLElement} [options.parent]\n * @param {\"top\"|\"left\"|\"right\"|\"bottom\"} [options.placement = \"right\"]\n * @param {Number} [options.width]\n * @param {function():void} [options.onscroll]\n * @param {function():void} [options.onscrollend]\n * @returns {Scrollbar & HTMLElement}\n */\nexport default function ScrollBar(options) {\n\tif (!options || !options.parent) {\n\t\tthrow new Error(\"ScrollBar.js: Parent element required.\");\n\t}\n\n\tconst { placement = \"right\" } = options;\n\tconst $cursor = tag(\"span\", {\n\t\tclassName: \"scroll-cursor\",\n\t\tstyle: {\n\t\t\ttop: 0,\n\t\t\tleft: 0,\n\t\t},\n\t});\n\tconst $thumb = tag(\"span\", {\n\t\tclassName: \"thumb\",\n\t});\n\tconst $container = tag(\"div\", {\n\t\tclassName: \"container\",\n\t\tchildren: [$cursor, $thumb],\n\t});\n\tconst $scrollbar = tag(\"div\", {\n\t\tclassName: `scrollbar-container ${placement}`,\n\t\tchild: $container,\n\t});\n\tconst config = {\n\t\tpassive: false,\n\t};\n\tconst TIMEOUT = 2000;\n\tconst isVertical = placement === \"right\" || placement === \"left\";\n\tconst observer = new MutationObserver(observerCallback);\n\tlet scroll = 0;\n\tlet touchStartValue = {\n\t\tx: 0,\n\t\ty: 0,\n\t};\n\tlet scrollbarSize = 20;\n\tlet height;\n\tlet width;\n\tlet rect;\n\tlet scrollbarTimeoutHide;\n\tlet scrollbarTimeoutRemove;\n\tlet onshow;\n\tlet onhide;\n\tlet touchStarted = false;\n\n\tif (options.width) scrollbarSize = options.width;\n\n\tsetWidth(scrollbarSize);\n\t$scrollbar.onScroll = options.onscroll;\n\t$scrollbar.onScrollEnd = options.onscrollend;\n\t$thumb.addEventListener(\"touchstart\", touchStart, config);\n\t$thumb.addEventListener(\"mousedown\", touchStart, config);\n\twindow.addEventListener(\"resize\", resize);\n\tobserver.observe($cursor, {\n\t\tattributes: true,\n\t});\n\n\tfunction observerCallback() {\n\t\t$thumb.style.top = $cursor.style.top;\n\t\t$thumb.style.left = $cursor.style.left;\n\t}\n\n\tfunction setWidth(width) {\n\t\tif (isVertical) $scrollbar.style.width = $cursor.style.width = width + \"px\";\n\t\telse $scrollbar.style.height = $cursor.style.height = width + \"px\";\n\t}\n\n\t/**\n\t *\n\t * @param {TouchEvent|MouseEvent} e\n\t */\n\tfunction touchStart(e) {\n\t\te.preventDefault();\n\t\ttouchStarted = true;\n\t\tif (!rect) resize();\n\t\tconst touch = e.type === \"touchstart\" ? e.touches[0] : e;\n\t\ttouchStartValue.x = touch.clientX;\n\t\ttouchStartValue.y = touch.clientY;\n\t\t$scrollbar.classList.add(\"active\");\n\t\tdocument.addEventListener(\"touchmove\", touchMove, config);\n\t\tdocument.addEventListener(\"mousemove\", touchMove, config);\n\t\tdocument.addEventListener(\"touchend\", touchEnd, config);\n\t\tdocument.addEventListener(\"mouseup\", touchEnd, config);\n\t\tdocument.addEventListener(\"touchcancel\", touchEnd, config);\n\t\tclearTimeout(scrollbarTimeoutHide);\n\t}\n\n\t/**\n\t *\n\t * @param {TouchEvent | MouseEvent} e\n\t */\n\tfunction touchMove(e) {\n\t\tconst touch = e.type === \"touchmove\" ? e.touches[0] : e;\n\t\tconst touchDiffX = touchStartValue.x - touch.clientX;\n\t\tconst touchDiffY = touchStartValue.y - touch.clientY;\n\t\ttouchStartValue.x = touch.clientX;\n\t\ttouchStartValue.y = touch.clientY;\n\n\t\tif (isVertical) {\n\t\t\tlet top = Number.parseFloat($cursor.style.top) - touchDiffY;\n\t\t\tconst currentTopValue = Number.parseFloat($cursor.style.top);\n\n\t\t\tif (top < 0) top = 0;\n\t\t\telse if (top > height) top = height;\n\n\t\t\tif (currentTopValue !== top) {\n\t\t\t\t$cursor.style.top = top + \"px\";\n\t\t\t\tscroll = top / height;\n\t\t\t\tif (typeof $scrollbar.onScroll === \"function\")\n\t\t\t\t\t$scrollbar.onScroll(scroll);\n\t\t\t}\n\t\t} else {\n\t\t\tlet left = Number.parseFloat($cursor.style.left) - touchDiffX;\n\t\t\tconst currentLeftValue = Number.parseFloat($cursor.style.left);\n\n\t\t\tif (left < 0) left = 0;\n\t\t\telse if (left > width) left = width;\n\n\t\t\tif (currentLeftValue !== left) {\n\t\t\t\t$cursor.style.left = left + \"px\";\n\t\t\t\tscroll = left / width;\n\t\t\t\tif (typeof $scrollbar.onScroll === \"function\")\n\t\t\t\t\t$scrollbar.onScroll(scroll);\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t *\n\t * @param {TouchEvent|MouseEvent} e\n\t */\n\tfunction touchEnd(e) {\n\t\te.preventDefault();\n\t\ttouchStarted = false;\n\t\t$scrollbar.classList.remove(\"active\");\n\t\tdocument.removeEventListener(\"touchmove\", touchMove, config);\n\t\tdocument.removeEventListener(\"mousemove\", touchMove, config);\n\t\tdocument.removeEventListener(\"touchend\", touchEnd, config);\n\t\tdocument.removeEventListener(\"mouseup\", touchEnd, config);\n\t\tdocument.removeEventListener(\"touchcancel\", touchEnd, config);\n\t\tif (typeof $scrollbar.onScrollEnd === \"function\") $scrollbar.onScrollEnd();\n\t\tscrollbarTimeoutHide = setTimeout(hide, TIMEOUT);\n\t}\n\n\tfunction resize(render = true) {\n\t\trect = $scrollbar.getBoundingClientRect();\n\t\theight = rect.height - 20;\n\t\twidth = rect.width - 20;\n\n\t\tif (height < 0) height = 0;\n\t\tif (width < 0) width = 0;\n\t\tif (render && height && width) setValue(scroll);\n\t}\n\n\tfunction setValue(val) {\n\t\tif (!height || !width) resize(false);\n\n\t\t//Make sure value is between 0 and 1\n\t\tif (val < 0) val = 0;\n\t\telse if (val > 1) val = 1;\n\n\t\tscroll = val;\n\t\tif (isVertical) $cursor.style.top = val * height + \"px\";\n\t\telse $cursor.style.left = val * width + \"px\";\n\t}\n\n\tfunction destroy() {\n\t\twindow.removeEventListener(\"resize\", resize);\n\t\t$thumb.removeEventListener(\"touchstart\", touchStart);\n\t\tobserver.disconnect();\n\t\tif (typeof onhide === \"function\") onhide();\n\t}\n\n\tfunction render() {\n\t\tshow();\n\t\tclearTimeout(scrollbarTimeoutHide);\n\t\tscrollbarTimeoutHide = setTimeout(hide, TIMEOUT);\n\t}\n\n\tfunction show() {\n\t\tif ($scrollbar.dataset.hidden === \"false\") {\n\t\t\treturn;\n\t\t}\n\t\t$scrollbar.dataset.hidden = false;\n\t\tclearTimeout(scrollbarTimeoutHide);\n\t\tclearTimeout(scrollbarTimeoutRemove);\n\t\t$scrollbar.classList.remove(\"hide\");\n\t\tif (!$scrollbar.isConnected) {\n\t\t\toptions.parent.append($scrollbar);\n\t\t\tif (typeof onshow === \"function\") onshow();\n\t\t}\n\t}\n\n\tfunction hide() {\n\t\tif (touchStarted) return;\n\t\t$scrollbar.dataset.hidden = true;\n\t\t$scrollbar.classList.add(\"hide\");\n\t\tscrollbarTimeoutRemove = setTimeout(() => $scrollbar.remove(), 300);\n\t\tif (typeof onhide === \"function\") onhide();\n\t}\n\n\tfunction hideImmediately() {\n\t\t$scrollbar.dataset.hidden = true;\n\t\t$scrollbar.classList.add(\"hide\");\n\t\t$scrollbar.remove();\n\t\tif (typeof onhide === \"function\") onhide();\n\t}\n\n\tObject.defineProperty($scrollbar, \"size\", {\n\t\tget: () => scrollbarSize,\n\t\tset: setWidth,\n\t});\n\n\tObject.defineProperty($scrollbar, \"resize\", {\n\t\tvalue: resize,\n\t});\n\n\tObject.defineProperty($scrollbar, \"value\", {\n\t\tget: () => scroll,\n\t\tset: setValue,\n\t});\n\n\tObject.defineProperty($scrollbar, \"destroy\", {\n\t\tvalue: destroy,\n\t});\n\n\tObject.defineProperty($scrollbar, \"render\", {\n\t\tvalue: render,\n\t});\n\n\tObject.defineProperty($scrollbar, \"show\", {\n\t\tvalue: show,\n\t});\n\n\tObject.defineProperty($scrollbar, \"hide\", {\n\t\tvalue: hide,\n\t});\n\n\tObject.defineProperty($scrollbar, \"visible\", {\n\t\tget() {\n\t\t\treturn this.dataset.hidden !== \"true\";\n\t\t},\n\t});\n\n\tObject.defineProperty($scrollbar, \"onshow\", {\n\t\tset(fun) {\n\t\t\tonshow = fun;\n\t\t},\n\t\tget() {\n\t\t\treturn onshow;\n\t\t},\n\t});\n\n\tObject.defineProperty($scrollbar, \"onhide\", {\n\t\tset(fun) {\n\t\t\tonhide = fun;\n\t\t},\n\t\tget() {\n\t\t\treturn onhide;\n\t\t},\n\t});\n\n\tObject.defineProperty($scrollbar, \"hideImmediately\", {\n\t\tvalue: hideImmediately,\n\t});\n\n\treturn $scrollbar;\n}\n"
},
{
"path": "src/components/scrollbar/style.scss",
"content": ".scrollbar-container {\n position: absolute;\n background-color: transparent;\n padding: 10px;\n opacity: 0.5;\n z-index: 9999;\n animation: scrollbar-show 300ms ease 1;\n transition: all 300ms ease;\n opacity: 1;\n\n &.hide {\n opacity: 0;\n }\n\n &.active {\n opacity: 1;\n\n .thumb {\n box-shadow: 0 0 0 4px rgba($color: #fff, $alpha: 0.2);\n }\n }\n\n .container {\n height: 100%;\n width: 100%;\n position: relative;\n\n .thumb,\n .scroll-cursor {\n position: absolute;\n display: block;\n }\n\n .thumb {\n background-color: #39f;\n background-color: var(--button-background-color);\n border-radius: 4px;\n }\n }\n\n &.right,\n &.left {\n height: calc(100% - (50px * 2));\n width: 10px;\n top: 0;\n bottom: 0;\n margin: auto;\n\n .thumb,\n .cursor {\n height: 1px;\n width: 100%;\n }\n\n .thumb {\n height: 50px;\n margin-top: -25px;\n }\n }\n\n &.right {\n left: auto;\n right: 0;\n padding: 10px 17px 10px 10px;\n }\n\n &.left {\n left: 0;\n right: auto;\n }\n\n &.top,\n &.bottom {\n width: calc(100% - (50px * 2));\n height: 10px;\n left: 0;\n right: 0;\n margin: auto;\n\n .thumb,\n .cursor {\n height: 100%;\n width: 1px;\n }\n\n .thumb {\n width: 50px;\n margin-left: -25px;\n }\n }\n\n &.top {\n top: 0;\n bottom: auto;\n }\n\n &.bottom {\n bottom: 0;\n top: auto;\n }\n}"
},
{
"path": "src/components/searchbar/index.js",
"content": "import \"./style.scss\";\nimport Ref from \"html-tag-js/ref\";\nimport actionStack from \"lib/actionStack\";\n\n/**\n * Create and activate search bar\n * @param {HTMLUListElement|HTMLOListElement} $list\n * @param {(hide:Function)=>void} setHide\n * @param {()=>void} onhideCb callback to be called when search bar is hidden\n * @param {(value:string)=>HTMLElement[]} searchFunction\n */\nfunction searchBar($list, setHide, onhideCb, searchFunction) {\n\tlet hideOnBlur = true;\n\tlet timeout = null;\n\tconst $searchInput = Ref();\n\t/**@type {HTMLDivElement} */\n\tconst $container = (\n\t\t\n\t\t\t
\n\t);\n\n\t/**@type {HTMLElement[]} */\n\tconst children = [...$list.children];\n\n\tif (typeof setHide === \"function\") {\n\t\thideOnBlur = false;\n\t\tsetHide(hide);\n\t}\n\tapp.appendChild($container);\n\n\t$searchInput.el.oninput = search;\n\t$searchInput.el.focus();\n\t$searchInput.el.onblur = () => {\n\t\tif (!hideOnBlur) return;\n\t\tsetTimeout(hide, 0);\n\t};\n\n\tactionStack.push({\n\t\tid: \"searchbar\",\n\t\taction: hide,\n\t});\n\n\tfunction hide() {\n\t\tactionStack.remove(\"searchbar\");\n\t\tif (typeof onhideCb === \"function\") onhideCb();\n\n\t\t$list.content = children;\n\t\t$container.classList.add(\"hide\");\n\t\tsetTimeout(() => {\n\t\t\t$container.remove();\n\t\t}, 300);\n\t}\n\n\tfunction search() {\n\t\tif (timeout) clearTimeout(timeout);\n\t\ttimeout = setTimeout(searchNow.bind(this), 500);\n\t}\n\n\t/**\n\t * @this {HTMLInputElement}\n\t */\n\tasync function searchNow() {\n\t\tconst val = $searchInput.value.toLowerCase();\n\n\t\tif (!val) {\n\t\t\t$list.content = children;\n\t\t\treturn;\n\t\t}\n\n\t\tlet result;\n\n\t\tif (searchFunction) {\n\t\t\tresult = searchFunction(val);\n\n\t\t\tif (result instanceof Promise) {\n\t\t\t\ttry {\n\t\t\t\t\tresult = await result;\n\t\t\t\t} catch (error) {\n\t\t\t\t\twindow.log(\"error\", \"Search function failed:\");\n\t\t\t\t\twindow.log(\"error\", error);\n\t\t\t\t\tresult = [];\n\t\t\t\t}\n\t\t\t}\n\t\t} else {\n\t\t\tresult = filterList(val);\n\t\t}\n\n\t\t$list.textContent = \"\";\n\t\t$list.append(...buildSearchContent(result, val));\n\t}\n\n\t/**\n\t * Search list items\n\t * @param {string} val\n\t * @returns\n\t */\n\tfunction filterList(val) {\n\t\treturn children.filter((child) => {\n\t\t\tconst text = child.textContent.toLowerCase();\n\t\t\treturn text.match(val, \"i\");\n\t\t});\n\t}\n\n\t/**\n\t * Keep grouped settings search results in section cards instead of flattening them.\n\t * @param {HTMLElement[]} result\n\t * @param {string} val\n\t * @returns {HTMLElement[]}\n\t */\n\tfunction buildSearchContent(result, val) {\n\t\tif (!val || !result.length) return result;\n\n\t\tconst groupedSections = [];\n\t\tconst sectionIndexByLabel = new Map();\n\t\tlet hasGroups = false;\n\n\t\tresult.forEach(($item) => {\n\t\t\tconst label = $item.dataset.searchGroup;\n\t\t\tif (!label) {\n\t\t\t\tgroupedSections.push({\n\t\t\t\t\titems: [$item],\n\t\t\t\t\ttype: \"ungrouped\",\n\t\t\t\t});\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\thasGroups = true;\n\t\t\tconst existingSectionIndex = sectionIndexByLabel.get(label);\n\t\t\tif (existingSectionIndex !== undefined) {\n\t\t\t\tgroupedSections[existingSectionIndex].items.push($item);\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tsectionIndexByLabel.set(label, groupedSections.length);\n\t\t\tgroupedSections.push({\n\t\t\t\titems: [$item],\n\t\t\t\tlabel,\n\t\t\t\ttype: \"group\",\n\t\t\t});\n\t\t});\n\n\t\tif (!hasGroups) return result.map(cloneSearchItem);\n\n\t\tconst countLabel = `${result.length} ${\n\t\t\tresult.length === 1\n\t\t\t\t? strings[\"search result label singular\"]\n\t\t\t\t: strings[\"search result label plural\"]\n\t\t}`;\n\t\tconst content = [\n\t\t\t{countLabel}
,\n\t\t];\n\n\t\tgroupedSections.forEach((section) => {\n\t\t\tif (section.type === \"ungrouped\") {\n\t\t\t\tcontent.push(...section.items.map(cloneSearchItem));\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tcontent.push(\n\t\t\t\t{section.label}
\n\t\t\t\t\t\n\t\t\t\t\t\t{section.items.map(cloneSearchItem)}\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t);\n}\n\nfunction createListItemElement(item, options, useInfoAsDescription) {\n\tconst $setting = Ref();\n\tconst $tail = Ref();\n\tconst isCheckboxItem = isBooleanSetting(item);\n\tconst state = getItemDisplayState(item, useInfoAsDescription);\n\t/**@type {HTMLDivElement} */\n\tconst $item = (\n\t\t\n\t\t\t\t\n\t\t\t\t{strings.info}\n\t\t\t
\n\t\t\t\n\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\n\t);\n\tconst searchGroup =\n\t\titem.searchGroup || item.category || options.defaultSearchGroup;\n\n\tif (searchGroup) {\n\t\t$item.dataset.searchGroup = searchGroup;\n\t}\n\n\tif (isCheckboxItem) {\n\t\tconst $checkbox = Checkbox(\"\", item.checkbox || item.value);\n\t\t$tail.el.appendChild($checkbox);\n\t}\n\n\tif (state.hasSubtitle) {\n\t\tconst $valueText = createSubtitleElement(item, state);\n\t\t$setting.append($valueText);\n\t\t$item.classList.add(\"has-subtitle\");\n\t\tif (!state.showInfoAsSubtitle) {\n\t\t\tsetColor($item, item.value);\n\t\t}\n\t} else {\n\t\t$item.classList.add(\"compact\");\n\t}\n\n\tif (shouldShowTrailingValue(item, options)) {\n\t\t$item.classList.add(\"has-tail-value\");\n\t\tif (item.select) {\n\t\t\t$item.classList.add(\"has-tail-select\");\n\t\t}\n\t\t$tail.el.append(createTrailingValueDisplay(item));\n\t}\n\n\tif (shouldShowTailChevron(item)) {\n\t\t$tail.el.append(\n\t\t\t,\n\t\t);\n\t}\n\n\tif (!$tail.el.children.length) {\n\t\t$tail.el.remove();\n\t}\n\n\treturn $item;\n}\n\nfunction isBooleanSetting(item) {\n\treturn item.checkbox !== undefined || typeof item.value === \"boolean\";\n}\n\nfunction getItemDisplayState(item, useInfoAsDescription) {\n\tconst isCheckboxItem = isBooleanSetting(item);\n\tconst subtitle = isCheckboxItem\n\t\t? item.info\n\t\t: getSubtitleText(item, useInfoAsDescription);\n\tconst showInfoAsSubtitle =\n\t\tisCheckboxItem ||\n\t\tuseInfoAsDescription ||\n\t\t(item.value === undefined && item.info);\n\n\treturn {\n\t\tsubtitle,\n\t\tshowInfoAsSubtitle,\n\t\thasSubtitle: subtitle !== undefined && subtitle !== null && subtitle !== \"\",\n\t};\n}\n\nfunction createSubtitleElement(item, state) {\n\tconst $valueText = ;\n\tsetValueText(\n\t\t$valueText,\n\t\tstate.subtitle,\n\t\tstate.showInfoAsSubtitle ? null : item.valueText?.bind(item),\n\t);\n\n\tif (state.showInfoAsSubtitle) {\n\t\t$valueText.classList.add(\"setting-info\");\n\t}\n\n\treturn $valueText;\n}\n\nfunction shouldShowTrailingValue(item, options) {\n\treturn (\n\t\toptions.valueInTail &&\n\t\titem.value !== undefined &&\n\t\titem.checkbox === undefined &&\n\t\ttypeof item.value !== \"boolean\"\n\t);\n}\n\nfunction createTrailingValueDisplay(item) {\n\tconst $trailingValueText = (\n\t\t{item.text?.capitalize?.(0) ?? item.text}
\n\t\t\t\n\t\t\t{$trailingValueText}\n\t\t\t{item.select ? (\n\t\t\t\t\n\t\t\t) : null}\n\t\t
\n\t);\n}\n\nfunction shouldShowTailChevron(item) {\n\treturn (\n\t\titem.chevron ||\n\t\t(!item.select &&\n\t\t\tBoolean(item.prompt || item.file || item.folder || item.link))\n\t);\n}\n\nfunction insertRenderedItem(renderedItems, item, $item) {\n\tif (Number.isInteger(item.index)) {\n\t\trenderedItems.splice(item.index, 0, { item, $item });\n\t\treturn;\n\t}\n\n\trenderedItems.push({ item, $item });\n}\n\nfunction buildListContent(renderedItems, options) {\n\tconst $content = [];\n\t/** @type {HTMLElement | null} */\n\tlet $currentSectionCard = null;\n\tlet currentCategory = null;\n\n\trenderedItems.forEach(({ item, $item }) => {\n\t\tconst category =\n\t\t\titem.category?.trim() || (options.groupByDefault ? \"__default__\" : \"\");\n\n\t\tif (!category) {\n\t\t\tcurrentCategory = null;\n\t\t\t$currentSectionCard = null;\n\t\t\t$content.push($item);\n\t\t\treturn;\n\t\t}\n\n\t\tif (currentCategory !== category || !$currentSectionCard) {\n\t\t\tcurrentCategory = category;\n\t\t\tconst section = createSectionElements(category);\n\t\t\t$currentSectionCard = section.$card;\n\t\t\t$content.push(section.$section);\n\t\t}\n\n\t\t$currentSectionCard.append($item);\n\t});\n\n\treturn $content.length ? $content : renderedItems.map(({ $item }) => $item);\n}\n\nfunction createSectionElements(category) {\n\tconst shouldShowLabel = category !== \"__default__\";\n\tconst $label = shouldShowLabel ? (\n\t\t{category}
\n\t) : null;\n\tconst $card = ;\n\treturn {\n\t\t$card,\n\t\t$section: (\n\t\t\t\n\t\t\t\t
\n\t\t\n\t);\n\tconst mask = ;\n\tconst touch = {\n\t\tstartX: 0,\n\t\ttotalX: 0,\n\t\tendX: 0,\n\t\tstartY: 0,\n\t\ttotalY: 0,\n\t\tendY: 0,\n\t\ttarget: null,\n\t};\n\tlet openedFolders = [];\n\tlet resizeTimeout = null;\n\tlet setWidthTimeout = null;\n\n\t$toggler?.addEventListener(\"click\", toggle);\n\t$container.addEventListener(\"touchstart\", ontouchstart, eventOptions);\n\twindow.addEventListener(\"resize\", onWindowResize);\n\n\tif (mode === \"tab\" && localStorage.sidebarShown === \"1\") {\n\t\tshow();\n\t}\n\n\tloginEvents.on(() => {\n\t\tupdateSidebarAvatar();\n\t});\n\n\tasync function handleUserIconClick(e) {\n\t\ttry {\n\t\t\tconst isLoggedIn = await auth.isLoggedIn();\n\n\t\t\tif (!isLoggedIn) {\n\t\t\t\tauth.openLoginUrl();\n\t\t\t} else {\n\t\t\t\ttoggleUserMenu();\n\t\t\t}\n\t\t} catch (error) {\n\t\t\tconsole.error(\"Error checking login status:\", error);\n\t\t\ttoast(\"Error checking login status\", 3000);\n\t\t}\n\t}\n\n\tfunction toggleUserMenu() {\n\t\tconst menu = userContextMenu.el;\n\t\tconst isActive = menu.classList.toggle(\"active\");\n\n\t\tif (isActive) {\n\t\t\t// Populate user info\n\t\t\tupdateUserMenuInfo();\n\n\t\t\t// Add click outside listener\n\t\t\tsetTimeout(() => {\n\t\t\t\tdocument.addEventListener(\"click\", handleClickOutside);\n\t\t\t}, 10);\n\t\t} else {\n\t\t\tdocument.removeEventListener(\"click\", handleClickOutside);\n\t\t}\n\t}\n\n\tfunction handleClickOutside(e) {\n\t\tif (\n\t\t\t!userContextMenu.el.contains(e.target) &&\n\t\t\te.target !== userAvatar.el &&\n\t\t\t!userAvatar.el.contains(e.target)\n\t\t) {\n\t\t\tuserContextMenu.el.classList.remove(\"active\");\n\t\t\tdocument.removeEventListener(\"click\", handleClickOutside);\n\t\t}\n\t}\n\n\tasync function updateUserMenuInfo() {\n\t\ttry {\n\t\t\tconst userInfo = await auth.getUserInfo();\n\t\t\tif (userInfo) {\n\t\t\t\tconst menuName = userContextMenu.el.querySelector(\".user-menu-name\");\n\t\t\t\tconst menuEmail = userContextMenu.el.querySelector(\".user-menu-email\");\n\t\t\t\tmenuName.textContent = userInfo.name || \"Anonymous\";\n\t\t\t\tif (userInfo.isAdmin) {\n\t\t\t\t\tmenuName.innerHTML += ' Admin';\n\t\t\t\t}\n\t\t\t\tmenuEmail.textContent = userInfo.email || \"\";\n\t\t\t}\n\t\t} catch (error) {\n\t\t\tconsole.error(\"Error fetching user info:\", error);\n\t\t}\n\t}\n\n\tasync function handleLogout() {\n\t\ttry {\n\t\t\tconst success = await auth.logout();\n\t\t\tif (success) {\n\t\t\t\tuserContextMenu.el.classList.remove(\"active\");\n\t\t\t\tdocument.removeEventListener(\"click\", handleClickOutside);\n\t\t\t\ttoast(\"Logged out successfully\");\n\t\t\t\tupdateSidebarAvatar();\n\t\t\t} else {\n\t\t\t\ttoast(\"Failed to logout\");\n\t\t\t}\n\t\t} catch (error) {\n\t\t\tconsole.error(\"Error during logout:\", error);\n\t\t}\n\t}\n\n\tasync function updateSidebarAvatar() {\n\t\tconst avatarUrl = await auth.getAvatar();\n\t\t// Remove existing icon or avatar\n\t\tconst existingIcon = userAvatar.el.querySelector(\".icon\");\n\t\tconst existingAvatar = userAvatar.el.querySelector(\".avatar\");\n\n\t\tif (existingIcon) {\n\t\t\texistingIcon.remove();\n\t\t}\n\t\tif (existingAvatar) {\n\t\t\texistingAvatar.remove();\n\t\t}\n\n\t\tif (avatarUrl?.startsWith(\"data:\") || avatarUrl?.startsWith(\"http\")) {\n\t\t\t// Create and add avatar image\n\t\t\tconst avatarImg = document.createElement(\"img\");\n\t\t\tavatarImg.className = \"avatar\";\n\t\t\tavatarImg.src = avatarUrl;\n\t\t\tuserAvatar.append(avatarImg);\n\t\t} else {\n\t\t\t// Fallback to default icon\n\t\t\tconst defaultIcon = document.createElement(\"span\");\n\t\t\tdefaultIcon.className = \"icon account_circle\";\n\t\t\tuserAvatar.append(defaultIcon);\n\t\t}\n\t}\n\n\tfunction onWindowResize() {\n\t\tclearTimeout(resizeTimeout);\n\t\tresizeTimeout = setTimeout(() => {\n\t\t\tconst { innerWidth: currentWidth } = window;\n\t\t\tif (innerWidth === currentWidth) return;\n\t\t\thide(true);\n\t\t\tinnerWidth = currentWidth;\n\t\t\t$el.classList.remove(mode);\n\t\t\tmode = innerWidth > 750 ? \"tab\" : \"phone\";\n\t\t\t$el.classList.add(mode);\n\t\t}, 300);\n\t}\n\n\tfunction toggle() {\n\t\tif ($el.activated) return hide(true);\n\t\tshow();\n\t}\n\n\tfunction show() {\n\t\tlocalStorage.sidebarShown = 1;\n\t\t$el.activated = true;\n\t\t$el.onclick = null;\n\n\t\tif (mode === \"phone\") {\n\t\t\tresizeBar.style.display = \"none\";\n\t\t\t$el.onshow();\n\t\t\tapp.append($el, mask);\n\t\t\t$el.classList.add(\"show\");\n\t\t\tdocument.ontouchstart = ontouchstart;\n\n\t\t\tactionStack.push({\n\t\t\t\tid: \"sidebar\",\n\t\t\t\taction: hideMaster,\n\t\t\t});\n\t\t} else {\n\t\t\tsetWidth(width);\n\t\t\tresizeBar.style.display = \"block\";\n\t\t\tapp.append($el);\n\t\t\t$el.onclick = () => {\n\t\t\t\tif (!$el.textContent) acode.exec(\"open-folder\");\n\t\t\t};\n\t\t}\n\t\tonshow();\n\t}\n\n\tfunction hide(hideIfTab = false) {\n\t\tlocalStorage.sidebarShown = 0;\n\t\tif (mode === \"phone\") {\n\t\t\tactionStack.remove(\"sidebar\");\n\t\t\thideMaster();\n\t\t} else if (hideIfTab) {\n\t\t\t$el.activated = false;\n\t\t\troot.style.removeProperty(\"margin-left\");\n\t\t\troot.style.removeProperty(\"width\");\n\t\t\t$el.remove();\n\t\t\t// TODO : Codemirror\n\t\t\t//editorManager.editor.resize(true);\n\t\t}\n\t}\n\n\tfunction hideMaster() {\n\t\t$el.style.transform = null;\n\t\t$el.classList.remove(\"show\");\n\t\tsetTimeout(() => {\n\t\t\t$el.activated = false;\n\t\t\tmask.remove();\n\t\t\t$el.remove();\n\t\t\t$container.style.overflow = null;\n\t\t\tonhide();\n\t\t}, 300);\n\t\tdocument.ontouchstart = null;\n\t\tresetState();\n\n\t\topenedFolders.map(($) => ($.onscroll = null));\n\t\topenedFolders = [];\n\t}\n\n\tasync function onshow() {\n\t\tif ($el.onshow) $el.onshow.call($el);\n\t\tevents.show.forEach((fn) => fn());\n\n\t\t// try {\n\t\t// \tif (await auth.isLoggedIn()) {\n\t\t// \t\tconst avatar = await auth.getAvatar();\n\t\t// \t\tif (avatar) {\n\t\t// \t\t\tauth.updateSidebarAvatar(avatar);\n\t\t// \t\t}\n\t\t// \t}\n\t\t// } catch (error) {\n\t\t// \tconsole.error(\"Error updating avatar:\", error);\n\t\t// }\n\t}\n\n\tfunction onhide() {\n\t\tif ($el.onhide) $el.onhide.call($el);\n\t\tevents.hide.forEach((fn) => fn());\n\t}\n\n\t/**\n\t * Event handler for touchstart event\n\t * @param {TouchEvent} e\n\t */\n\tfunction ontouchstart(e) {\n\t\tconst { target } = e;\n\t\tconst { clientX, clientY } = getClientCoords(e);\n\n\t\tif (preventSlideTests.find((test) => test(target))) return;\n\t\tif (mode === \"tab\") return;\n\n\t\t$el.style.transition = \"none\";\n\t\ttouch.startX = clientX;\n\t\ttouch.startY = clientY;\n\t\ttouch.target = target;\n\n\t\tif ($el.activated && !$el.contains(target) && target !== mask) {\n\t\t\treturn;\n\t\t} else if (\n\t\t\t(!$el.activated && touch.startX > START_THRESHOLD) ||\n\t\t\ttarget === $toggler\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\tdocument.addEventListener(\"touchmove\", ontouchmove, eventOptions);\n\t\tdocument.addEventListener(\"touchend\", ontouchend, eventOptions);\n\t}\n\n\t/**\n\t * Event handler for resize event\n\t * @param {MouseEvent | TouchEvent} e\n\t * @returns\n\t */\n\tfunction onresize(e) {\n\t\tconst { clientX } = getClientCoords(e);\n\t\tlet deltaX = 0;\n\t\tconst onMove = (e) => {\n\t\t\tconst { clientX: currentX } = getClientCoords(e);\n\t\t\tdeltaX = currentX - clientX;\n\t\t\tresize(deltaX);\n\t\t};\n\t\tconst onEnd = () => {\n\t\t\tconst newWidth = width + deltaX;\n\t\t\tif (newWidth <= MIN_WIDTH) width = MIN_WIDTH;\n\t\t\telse if (newWidth >= MAX_WIDTH()) width = MAX_WIDTH();\n\t\t\telse width = newWidth;\n\t\t\tlocalStorage.sideBarWidth = width;\n\t\t\tdocument.removeEventListener(\"touchmove\", onMove, eventOptions);\n\t\t\tdocument.removeEventListener(\"mousemove\", onMove, eventOptions);\n\t\t\tdocument.removeEventListener(\"touchend\", onEnd, eventOptions);\n\t\t\tdocument.removeEventListener(\"mouseup\", onEnd, eventOptions);\n\t\t\tdocument.removeEventListener(\"mouseleave\", onEnd, eventOptions);\n\t\t\tdocument.removeEventListener(\"touchcancel\", onEnd, eventOptions);\n\t\t};\n\t\tdocument.addEventListener(\"touchmove\", onMove, eventOptions);\n\t\tdocument.addEventListener(\"mousemove\", onMove, eventOptions);\n\t\tdocument.addEventListener(\"touchend\", onEnd, eventOptions);\n\t\tdocument.addEventListener(\"mouseup\", onEnd, eventOptions);\n\t\tdocument.addEventListener(\"mouseleave\", onEnd, eventOptions);\n\t\tdocument.addEventListener(\"touchcancel\", onEnd, eventOptions);\n\t\treturn;\n\t}\n\n\t/**\n\t * Resize the sidebar\n\t * @param {number} deltaX\n\t * @returns\n\t */\n\tfunction resize(deltaX) {\n\t\tconst newWidth = width + deltaX;\n\t\tif (newWidth >= MAX_WIDTH()) return;\n\t\tif (newWidth <= MIN_WIDTH) return;\n\t\tsetWidth(newWidth);\n\t}\n\n\t/**\n\t * Event handler for touchmove event\n\t * @param {TouchEvent} e\n\t */\n\tfunction ontouchmove(e) {\n\t\te.preventDefault();\n\n\t\tconst { clientX, clientY } = getClientCoords(e);\n\t\ttouch.endX = clientX;\n\t\ttouch.endY = clientY;\n\t\ttouch.totalX = touch.endX - touch.startX;\n\t\ttouch.totalY = touch.endY - touch.startY;\n\n\t\tlet width = $el.getWidth();\n\n\t\tif (\n\t\t\t!$el.activated &&\n\t\t\ttouch.totalX < width &&\n\t\t\ttouch.startX < START_THRESHOLD\n\t\t) {\n\t\t\tif (!$el.isConnected) {\n\t\t\t\tapp.append($el, mask);\n\t\t\t\t$container.style.overflow = \"hidden\";\n\t\t\t}\n\n\t\t\t$el.style.transform = `translate3d(${-(width - touch.totalX)}px, 0, 0)`;\n\t\t} else if (touch.totalX < 0 && $el.activated) {\n\t\t\t$el.style.transform = `translate3d(${touch.totalX}px, 0, 0)`;\n\t\t}\n\t}\n\n\t/**\n\t * Event handler for touchend event\n\t * @param {TouchEvent} e\n\t */\n\tfunction ontouchend(e) {\n\t\tif (e.target !== mask && touch.totalX === 0) return resetState();\n\t\telse if (e.target === mask && touch.totalX === 0) return hide();\n\t\te.preventDefault();\n\n\t\tconst threshold = $el.getWidth() / 3;\n\n\t\tif (\n\t\t\t($el.activated && touch.totalX > -threshold) ||\n\t\t\t(!$el.activated && touch.totalX >= threshold)\n\t\t) {\n\t\t\tlclShow();\n\t\t} else if (\n\t\t\t(!$el.activated && touch.totalX < threshold) ||\n\t\t\t($el.activated && touch.totalX <= -threshold)\n\t\t) {\n\t\t\thide();\n\t\t}\n\n\t\tfunction lclShow() {\n\t\t\tonshow();\n\t\t\t$el.activated = true;\n\t\t\t$el.style.transform = `translate3d(0, 0, 0)`;\n\t\t\tdocument.addEventListener(\"touchstart\", ontouchstart, eventOptions);\n\t\t\tactionStack.remove(\"sidebar\");\n\t\t\tactionStack.push({\n\t\t\t\tid: \"sidebar\",\n\t\t\t\taction: hideMaster,\n\t\t\t});\n\t\t\tresetState();\n\t\t}\n\t}\n\n\t/**\n\t * Reset the touch state\n\t */\n\tfunction resetState() {\n\t\ttouch.totalY = 0;\n\t\ttouch.startY = 0;\n\t\ttouch.endY = 0;\n\t\ttouch.totalX = 0;\n\t\ttouch.startX = 0;\n\t\ttouch.endX = 0;\n\t\ttouch.target = null;\n\t\t$el.style.transition = null;\n\t\tdocument.removeEventListener(\"touchmove\", ontouchmove, eventOptions);\n\t\tdocument.removeEventListener(\"touchend\", ontouchend, eventOptions);\n\t}\n\n\t/**\n\t * Set the width of the sidebar\n\t * @param {number} width\n\t */\n\tfunction setWidth(width) {\n\t\t$el.style.transition = \"none\";\n\t\t$el.style.maxWidth = width + \"px\";\n\t\troot.style.marginLeft = width + \"px\";\n\t\troot.style.width = `calc(100% - ${width}px)`;\n\t\tclearTimeout(setWidthTimeout);\n\t\tsetWidthTimeout = setTimeout(() => {\n\t\t\teditorManager?.editor?.resize(true);\n\t\t}, 300);\n\t}\n\n\t/**\n\t * Get the clientX and clientY from the event\n\t * @param {TouchEvent | MouseEvent} e\n\t * @returns {{clientX: number, clientY: number}}\n\t */\n\tfunction getClientCoords(e) {\n\t\tconst { clientX, clientY } = (e.touches ?? [])[0] ?? e;\n\t\treturn { clientX, clientY };\n\t}\n\n\t$el.show = show;\n\t$el.hide = hide;\n\t$el.toggle = toggle;\n\t$el.onshow = () => {};\n\t$el.getWidth = function () {\n\t\tconst width = innerWidth * 0.7;\n\t\treturn mode === \"phone\" ? (width >= 350 ? 350 : width) : MIN_WIDTH;\n\t};\n\n\treturn $el;\n}\n\n/**\n * Create a sidebar or return the existing one\n * @param {object} [arg0] - the element that will activate the sidebar\n * @param {HTMLElement} [arg0.container] - the element that will contain the sidebar\n * @param {HTMLElement} [arg0.toggler] - the element that will toggle the sidebar\n * @returns {HTMLElement & SideBar}\n */\nfunction Sidebar({ container, toggler }) {\n\t$sidebar = $sidebar ?? create(container, toggler);\n\treturn $sidebar;\n}\n\nSidebar.hide = () => $sidebar?.hide();\nSidebar.show = () => $sidebar?.show();\nSidebar.toggle = () => $sidebar?.toggle();\n\nSidebar.on = (\n\t/**@type {'hide'|'show'} */ event,\n\t/**@type {Function} */ callback,\n) => {\n\tif (!events[event]) return;\n\tevents[event].push(callback);\n};\n\nSidebar.off = (\n\t/**@type {'hide'|'show'} */ event,\n\t/**@type {Function} */ callback,\n) => {\n\tif (!events[event]) return;\n\tevents[event] = events[event].filter((cb) => cb !== callback);\n};\n\n/**@type {HTMLElement} */\nSidebar.el = null;\n\nObject.defineProperty(Sidebar, \"el\", {\n\tget() {\n\t\treturn $sidebar;\n\t},\n});\n\npreventSlideTests.push((target) => {\n\tlet lastEl;\n\treturn testScrollable(target.closest(\".scroll\"));\n\n\t/**\n\t * Test if the element is scrollable recursively\n\t * @param {HTMLElement} container\n\t * @returns\n\t */\n\tfunction testScrollable(container) {\n\t\tif (!container || container === lastEl) return false;\n\n\t\tconst { scrollHeight, offsetHeight, scrollWidth, offsetWidth } = container;\n\n\t\tif (scrollHeight > offsetHeight) return true;\n\t\tif (scrollWidth > offsetWidth) return true;\n\n\t\tlastEl = container;\n\n\t\treturn testScrollable(container.parentElement.closest(\".scroll\"));\n\t}\n});\n\npreventSlideTests.push((target) => {\n\treturn (\n\t\ttarget instanceof HTMLInputElement ||\n\t\ttarget instanceof HTMLTextAreaElement ||\n\t\ttarget.contentEditable === \"true\"\n\t);\n});\n\nexport default Sidebar;\n\n/**\n * Prevent the sidebar from sliding when the test returns true\n * @param {(target:Element)=>boolean} test\n */\nexport function preventSlide(test) {\n\tpreventSlideTests.push(test);\n}\n"
},
{
"path": "src/components/sidebar/style.scss",
"content": "body.no-animation {\n #sidebar {\n border-right: solid 1px rgba(0, 0, 0, 0.2);\n }\n}\n\n.page-replacement~#sidebar {\n opacity: 0;\n}\n\n#sidebar {\n z-index: 109;\n position: fixed;\n left: 0;\n top: 0;\n width: 70vw;\n max-width: 350px;\n height: 100vh;\n display: flex;\n background-color: rgb(153, 153, 255);\n background-color: var(--primary-color);\n color: rgb(255, 255, 255);\n color: var(--primary-text-color);\n overflow: hidden;\n box-sizing: border-box;\n\n &+.mask {\n z-index: 108;\n }\n\n &.phone {\n transition: transform 300ms ease;\n transform: translate(-100%, 0);\n box-shadow: 2px 0 4px rgba(0, 0, 0, 0.07);\n\n .resize-bar {\n pointer-events: none;\n }\n }\n\n &.tab {\n max-width: 250px;\n }\n\n &.show {\n transform: translate(0, 0);\n animation: show-sidebar 300ms ease 1;\n }\n\n .resize-bar {\n height: 100vh;\n width: 5px;\n margin-left: -2.5px;\n z-index: 110;\n }\n\n .apps {\n width: 52px;\n min-width: 52px;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.15);\n padding: 0;\n display: flex;\n flex-direction: column;\n position: relative;\n box-sizing: border-box;\n\n .app-icons-container {\n flex: 1;\n overflow-y: auto;\n overflow-x: hidden;\n padding: 8px 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 4px;\n scrollbar-width: none;\n -ms-overflow-style: none;\n\n &::-webkit-scrollbar {\n display: none;\n }\n }\n\n .user-icon-container {\n position: sticky;\n bottom: 0;\n width: 100%;\n padding: 12px 0;\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: rgba(0, 0, 0, 0.1);\n border-top: 1px solid rgba(255, 255, 255, 0.08);\n\n .avatar {\n display: block;\n height: 32px;\n width: 32px;\n border-radius: 50%;\n object-fit: cover;\n object-position: center;\n cursor: pointer;\n transition: all 0.2s ease;\n border: 2px solid transparent;\n\n &:hover {\n transform: scale(1.05);\n border-color: rgba(255, 255, 255, 0.3);\n }\n }\n\n .icon {\n height: 40px;\n width: 40px;\n color: currentColor;\n font-size: 1.4em;\n border-radius: 10px;\n opacity: 0.6;\n transition: all 0.2s ease;\n margin: 0 auto;\n cursor: pointer;\n text-align: center;\n line-height: 40px;\n\n &:hover {\n opacity: 0.9;\n background-color: rgba(255, 255, 255, 0.08);\n }\n\n &.active {\n opacity: 1;\n }\n }\n }\n\n .icon {\n height: 40px;\n width: 40px;\n min-height: 40px;\n color: currentColor;\n font-size: 1.3em;\n border-radius: 10px;\n opacity: 0.55;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n margin: 0 auto;\n cursor: pointer;\n position: relative;\n box-sizing: border-box;\n text-align: center;\n line-height: 40px;\n\n // Active indicator bar using ::after to not interfere with font icon's ::before\n &::after {\n content: '';\n position: absolute;\n left: -6px;\n top: 50%;\n transform: translateY(-50%) scaleY(0);\n width: 3px;\n height: 20px;\n background-color: currentColor;\n border-radius: 0 2px 2px 0;\n transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;\n opacity: 0;\n }\n\n &:hover {\n opacity: 0.85;\n background-color: rgba(255, 255, 255, 0.08);\n }\n\n &.active {\n opacity: 1;\n background-color: rgba(255, 255, 255, 0.12);\n\n &::after {\n transform: translateY(-50%) scaleY(1);\n opacity: 1;\n }\n }\n\n // Special styling for the favorites/sponsors icon\n &.favorite {\n margin-top: 8px;\n\n &::after {\n display: none;\n }\n\n &:hover {\n color: #ff6b8a;\n opacity: 1;\n background-color: rgba(255, 107, 138, 0.12);\n }\n }\n }\n }\n\n .container {\n overflow: hidden;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n\n &.files {\n overflow-x: auto;\n }\n\n >.list {\n width: 100%;\n max-width: 100%;\n max-height: 100%;\n\n &.hidden {\n max-height: 36px !important;\n min-height: 36px !important;\n overflow: hidden !important;\n }\n\n .tile {\n &:not(:first-child) {\n background-color: inherit;\n }\n\n &.notice {\n &::before {\n content: \"\\2022\";\n color: rgb(212, 250, 150);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 1em;\n }\n }\n }\n\n .icon {\n height: 34px;\n width: 34px;\n min-width: 34px;\n color: currentColor;\n font-size: 1.15em;\n text-align: center;\n line-height: 34px;\n }\n\n >ul {\n overflow: auto;\n width: 100%;\n max-width: 100%;\n max-height: calc(100% - 36px);\n height: calc(100% - 36px);\n\n .tile:active {\n >*:nth-child(2) {\n color: rgb(255, 215, 0);\n }\n }\n\n li {\n >*:nth-child(2) {\n color: currentColor;\n }\n\n &.active {\n >*:nth-child(2) {\n color: rgb(255, 215, 0);\n }\n }\n }\n }\n }\n\n .tile {\n user-select: none;\n }\n }\n\n textarea {\n padding: 5px !important;\n box-sizing: border-box;\n }\n\n textarea,\n input {\n color: rgb(255, 255, 255);\n color: var(--primary-text-color);\n border: solid 1px var(--border-color);\n border: solid 1px color-mix(in srgb, var(--border-color) 70%, transparent);\n border-radius: 8px;\n height: 30px;\n width: 90%;\n padding: 0 12px;\n text-indent: 0;\n margin-bottom: 12px;\n background: transparent;\n transition: all 0.2s ease;\n\n &:focus {\n border-color: var(--border-color) !important;\n background: var(--secondary-color);\n background: color-mix(in srgb, var(--secondary-color) 10%, transparent);\n box-shadow: 0 0 0 2px var(---box-shadow-color);\n }\n\n &::placeholder {\n opacity: 0.5;\n }\n }\n\n .box {\n border: solid 1px rgb(255, 255, 255);\n border: solid 1px var(--primary-text-color);\n\n &::after {\n background-color: rgb(255, 255, 255);\n background-color: var(--primary-text-color);\n }\n }\n\n .header {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n\n .title {\n display: flex;\n width: 100%;\n height: 36px;\n align-items: center;\n justify-content: center;\n font-weight: 600;\n }\n }\n}\n\n.user-menu {\n position: absolute;\n bottom: 55px;\n left: 30px;\n width: 200px;\n background-color: var(--popup-background-color);\n border: 1px solid var(--border-color);\n border-radius: 6px;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);\n display: none;\n z-index: 1000;\n overflow: hidden;\n\n &.active {\n display: block;\n }\n\n .user-menu-header {\n padding: 12px;\n border-bottom: 1px solid var(--border-color);\n\n .user-menu-name {\n font-weight: 500;\n margin-bottom: 4px;\n\n .badge {\n display: inline-flex;\n align-items: center;\n background-color: var(--popup-background-color);\n background-color: color-mix(in srgb,\n var(--error-text-color) 20%,\n transparent);\n color: var(--error-text-color);\n padding: 2px 6px;\n border-radius: 4px;\n font-size: 12px;\n font-weight: 500;\n margin-left: 8px;\n }\n }\n\n .user-menu-email {\n font-size: 12px;\n color: var(--popup-text-color);\n color: color-mix(in srgb, var(--popup-text-color) 70%, transparent);\n }\n }\n\n .user-menu-item {\n padding: 10px 12px;\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: 8px;\n\n &:hover {\n background-color: var(--active-icon-color);\n }\n }\n\n .user-menu-separator {\n height: 1px;\n background-color: var(--border-color);\n margin: 4px 0;\n }\n}\n"
},
{
"path": "src/components/symbolsPanel/index.js",
"content": "import \"./styles.scss\";\nimport { fetchDocumentSymbols, navigateToSymbol } from \"cm/lsp\";\nimport actionStack from \"lib/actionStack\";\n\nlet currentPanel = null;\n\nconst SYMBOL_KIND_ABBREV = {\n\t1: \"Fi\",\n\t2: \"Mo\",\n\t3: \"Ns\",\n\t4: \"Pk\",\n\t5: \"C\",\n\t6: \"M\",\n\t7: \"P\",\n\t8: \"F\",\n\t9: \"Co\",\n\t10: \"E\",\n\t11: \"I\",\n\t12: \"fn\",\n\t13: \"V\",\n\t14: \"c\",\n\t15: \"S\",\n\t16: \"#\",\n\t17: \"B\",\n\t18: \"[]\",\n\t19: \"{}\",\n\t20: \"K\",\n\t21: \"∅\",\n\t22: \"Em\",\n\t23: \"St\",\n\t24: \"Ev\",\n\t25: \"Op\",\n\t26: \"T\",\n};\n\nfunction sanitize(str) {\n\tif (!str) return \"\";\n\treturn str\n\t\t.replace(/&/g, \"&\")\n\t\t.replace(//g, \">\")\n\t\t.replace(/\"/g, \""\");\n}\n\nfunction flattenSymbolsForDisplay(symbols, depth = 0) {\n\tconst result = [];\n\tfor (const sym of symbols) {\n\t\tresult.push({\n\t\t\t...sym,\n\t\t\tdepth,\n\t\t\tid: `${sym.selectionRange.startLine}-${sym.selectionRange.startCharacter}-${sym.name}`,\n\t\t});\n\t\tif (sym.children && sym.children.length > 0) {\n\t\t\tresult.push(...flattenSymbolsForDisplay(sym.children, depth + 1));\n\t\t}\n\t}\n\treturn result;\n}\n\nfunction createSymbolsPanel() {\n\tconst state = {\n\t\tvisible: false,\n\t\texpanded: false,\n\t\tloading: true,\n\t\tsymbols: [],\n\t\tflatSymbols: [],\n\t\tfilteredSymbols: [],\n\t\tsearchQuery: \"\",\n\t\teditorView: null,\n\t};\n\n\tconst $mask = ;\n\tconst $panel = ;\n\tconst $dragHandle = ;\n\tconst $title = ;\n\tconst $subtitle = ;\n\tconst $searchInput = (\n\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t{/* */}\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t{strings.logout}\n\t\t\t\t
\n\t\t\t\n\t\t\t
\n\t);\n\n\tconst $search = \n\t\t\t\t{$title}\n\t\t\t\t{$subtitle}\n\t\t\t
\n\t\t\t{$closeBtn}
\n\t\t{$searchInput}
;\n\n\t$panel.append($dragHandle, $header, $search, $content);\n\t$mask.onclick = hide;\n\n\tlet startY = 0;\n\tlet currentY = 0;\n\tlet isDragging = false;\n\n\t$dragHandle.ontouchstart = onDragStart;\n\t$dragHandle.onmousedown = onDragStart;\n\n\tfunction onDragStart(e) {\n\t\tisDragging = true;\n\t\tstartY = e.touches ? e.touches[0].clientY : e.clientY;\n\t\tcurrentY = startY;\n\t\t$panel.style.transition = \"none\";\n\n\t\tdocument.addEventListener(\"touchmove\", onDragMove, { passive: false });\n\t\tdocument.addEventListener(\"mousemove\", onDragMove);\n\t\tdocument.addEventListener(\"touchend\", onDragEnd);\n\t\tdocument.addEventListener(\"mouseup\", onDragEnd);\n\t}\n\n\tfunction onDragMove(e) {\n\t\tif (!isDragging) return;\n\t\te.preventDefault();\n\t\tcurrentY = e.touches ? e.touches[0].clientY : e.clientY;\n\t\tconst deltaY = currentY - startY;\n\n\t\tif (deltaY > 0) {\n\t\t\t$panel.style.transform = `translateY(${deltaY}px)`;\n\t\t} else if (!state.expanded) {\n\t\t\tconst expansion = Math.min(Math.abs(deltaY), 100);\n\t\t\t$panel.style.maxHeight = `${60 + (expansion / 100) * 25}vh`;\n\t\t}\n\t}\n\n\tfunction onDragEnd() {\n\t\tisDragging = false;\n\t\tdocument.removeEventListener(\"touchmove\", onDragMove);\n\t\tdocument.removeEventListener(\"mousemove\", onDragMove);\n\t\tdocument.removeEventListener(\"touchend\", onDragEnd);\n\t\tdocument.removeEventListener(\"mouseup\", onDragEnd);\n\n\t\t$panel.style.transition = \"\";\n\t\tconst deltaY = currentY - startY;\n\n\t\tif (deltaY > 100) {\n\t\t\thide();\n\t\t} else if (deltaY < -50 && !state.expanded) {\n\t\t\tstate.expanded = true;\n\t\t\t$panel.classList.add(\"expanded\");\n\t\t\t$panel.style.transform = \"\";\n\t\t\t$panel.style.maxHeight = \"\";\n\t\t} else {\n\t\t\t$panel.style.transform = \"\";\n\t\t\t$panel.style.maxHeight = \"\";\n\t\t}\n\t}\n\n\tfunction setTitle(text) {\n\t\t$title.innerHTML = \"\";\n\t\t$title.append(\n\t\t\t,\n\t\t\t{sanitize(text)},\n\t\t);\n\t}\n\n\tfunction setSubtitle(text) {\n\t\t$subtitle.textContent = text;\n\t}\n\n\tfunction onSearchInput(e) {\n\t\tstate.searchQuery = e.target.value.trim();\n\t\tfilterSymbols();\n\t}\n\n\tfunction clearSearch() {\n\t\t$searchInput.value = \"\";\n\t\tstate.searchQuery = \"\";\n\t}\n\n\tfunction filterSymbols() {\n\t\tconst query = state.searchQuery.toLowerCase();\n\n\t\tif (!query) {\n\t\t\tstate.filteredSymbols = state.flatSymbols;\n\t\t} else {\n\t\t\tstate.filteredSymbols = state.flatSymbols.filter((sym) => {\n\t\t\t\tconst nameMatch = sym.name.toLowerCase().includes(query);\n\t\t\t\tconst kindMatch = sym.kindName.toLowerCase().includes(query);\n\t\t\t\tconst detailMatch = sym.detail?.toLowerCase().includes(query);\n\t\t\t\treturn nameMatch || kindMatch || detailMatch;\n\t\t\t});\n\t\t}\n\n\t\tupdateList();\n\t}\n\n\tfunction updateList() {\n\t\tsetSubtitle(getSubtitle());\n\t\trenderSymbolsList();\n\t}\n\n\tfunction getSubtitle() {\n\t\tconst total = state.flatSymbols.length;\n\t\tconst filtered = state.filteredSymbols.length;\n\n\t\tif (total === 0) return \"No symbols\";\n\t\tif (filtered === total) return `${total} symbol${total !== 1 ? \"s\" : \"\"}`;\n\t\treturn `${filtered} of ${total} symbols`;\n\t}\n\n\tfunction renderLoading() {\n\t\t$content.innerHTML = \"\";\n\t\t$content.append(\n\t\t\t\n\t\t\t\t\n\t\t\t\tLoading symbols...\n\t\t\t
,\n\t\t);\n\t}\n\n\tfunction renderEmpty() {\n\t\tconst message = state.searchQuery\n\t\t\t? \"No matching symbols\"\n\t\t\t: \"No symbols found\";\n\t\t$content.innerHTML = \"\";\n\t\t$content.append(\n\t\t\t\n\t\t\t\t\n\t\t\t\t{message}\n\t\t\t
,\n\t\t);\n\t}\n\n\tfunction renderNotSupported() {\n\t\t$content.innerHTML = \"\";\n\t\t$content.append(\n\t\t\t\n\t\t\t\t\n\t\t\t\tLanguage server does not support document symbols\n\t\t\t
,\n\t\t);\n\t}\n\n\tfunction highlightMatch(text, query) {\n\t\tif (!query) return sanitize(text);\n\n\t\tconst lowerText = text.toLowerCase();\n\t\tconst lowerQuery = query.toLowerCase();\n\t\tconst index = lowerText.indexOf(lowerQuery);\n\n\t\tif (index === -1) return sanitize(text);\n\n\t\tconst before = sanitize(text.slice(0, index));\n\t\tconst match = sanitize(text.slice(index, index + query.length));\n\t\tconst after = sanitize(text.slice(index + query.length));\n\n\t\treturn `${before}${match}${after}`;\n\t}\n\n\tfunction createSymbolItem(symbol) {\n\t\tconst kindName = symbol.kindName || \"Unknown\";\n\t\tconst kindClass = `kind-${kindName.toLowerCase().replace(/\\s+/g, \"\")}`;\n\t\tconst abbrev = SYMBOL_KIND_ABBREV[symbol.kind] || \"?\";\n\t\tconst indent = (symbol.depth || 0) * 16;\n\t\tconst startLine = symbol.selectionRange?.startLine ?? 0;\n\n\t\tconst $item = (\n\t\t\t onSymbolClick(symbol)}>\n\t\t\t\t\n\t\t\t\t{abbrev}\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t{symbol.detail && (\n\t\t\t\t\t\t{sanitize(symbol.detail)}\n\t\t\t\t\t)}\n\t\t\t\t\n\t\t\t\t:{startLine + 1}\n\t\t\t
\n\t\t);\n\n\t\t$item.get(\".symbol-name\").innerHTML = highlightMatch(\n\t\t\tsymbol.name,\n\t\t\tstate.searchQuery,\n\t\t);\n\n\t\treturn $item;\n\t}\n\n\tfunction renderSymbolsList() {\n\t\t$symbolsList.innerHTML = \"\";\n\n\t\tif (state.filteredSymbols.length === 0) {\n\t\t\trenderEmpty();\n\t\t\treturn;\n\t\t}\n\n\t\t$content.innerHTML = \"\";\n\t\tconst fragment = document.createDocumentFragment();\n\n\t\tfor (const symbol of state.filteredSymbols) {\n\t\t\tfragment.appendChild(createSymbolItem(symbol));\n\t\t}\n\n\t\t$symbolsList.appendChild(fragment);\n\t\t$content.appendChild($symbolsList);\n\t}\n\n\tfunction onSymbolClick(symbol) {\n\t\tif (!state.editorView) return;\n\t\thide();\n\t\tnavigateToSymbol(state.editorView, symbol);\n\t}\n\n\tasync function loadSymbols() {\n\t\tif (!state.editorView) {\n\t\t\trenderNotSupported();\n\t\t\treturn;\n\t\t}\n\n\t\trenderLoading();\n\n\t\ttry {\n\t\t\tconst symbols = await fetchDocumentSymbols(state.editorView);\n\n\t\t\tif (symbols === null) {\n\t\t\t\tstate.loading = false;\n\t\t\t\tsetSubtitle(\"Not supported\");\n\t\t\t\trenderNotSupported();\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tstate.loading = false;\n\t\t\tstate.symbols = symbols;\n\t\t\tstate.flatSymbols = flattenSymbolsForDisplay(symbols);\n\t\t\tstate.filteredSymbols = state.flatSymbols;\n\n\t\t\tif (state.flatSymbols.length === 0) {\n\t\t\t\tsetSubtitle(\"No symbols\");\n\t\t\t\trenderEmpty();\n\t\t\t} else {\n\t\t\t\tsetSubtitle(getSubtitle());\n\t\t\t\trenderSymbolsList();\n\t\t\t}\n\t\t} catch (error) {\n\t\t\tconsole.error(\"Failed to load symbols:\", error);\n\t\t\tstate.loading = false;\n\t\t\tsetSubtitle(\"Error\");\n\t\t\t$content.innerHTML = \"\";\n\t\t\t$content.append(\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t{sanitize(error.message || \"Failed to load symbols\")}\n\t\t\t\t
,\n\t\t\t);\n\t\t}\n\t}\n\n\tfunction show(options = {}) {\n\t\tif (currentPanel && currentPanel !== panelInstance) {\n\t\t\tcurrentPanel.hide();\n\t\t}\n\t\tcurrentPanel = panelInstance;\n\n\t\tstate.editorView = options.view || null;\n\t\tstate.symbols = [];\n\t\tstate.flatSymbols = [];\n\t\tstate.filteredSymbols = [];\n\t\tstate.searchQuery = \"\";\n\t\tstate.loading = true;\n\t\tstate.expanded = false;\n\n\t\tclearSearch();\n\t\tsetTitle(\"Document Outline\");\n\t\tsetSubtitle(\"Loading...\");\n\t\trenderLoading();\n\n\t\tdocument.body.append($mask, $panel);\n\n\t\trequestAnimationFrame(() => {\n\t\t\t$mask.classList.add(\"visible\");\n\t\t\t$panel.classList.add(\"visible\");\n\t\t\t$panel.classList.remove(\"expanded\");\n\t\t});\n\n\t\tstate.visible = true;\n\n\t\tactionStack.push({\n\t\t\tid: \"symbols-panel\",\n\t\t\taction: hide,\n\t\t});\n\n\t\tloadSymbols();\n\t}\n\n\tfunction hide() {\n\t\tif (!state.visible) return;\n\t\tstate.visible = false;\n\n\t\t$mask.classList.remove(\"visible\");\n\t\t$panel.classList.remove(\"visible\");\n\n\t\tactionStack.remove(\"symbols-panel\");\n\n\t\tsetTimeout(() => {\n\t\t\t$mask.remove();\n\t\t\t$panel.remove();\n\t\t}, 250);\n\n\t\tif (currentPanel === panelInstance) {\n\t\t\tcurrentPanel = null;\n\t\t}\n\n\t\tif (state.editorView) {\n\t\t\tstate.editorView.focus();\n\t\t}\n\t}\n\n\tconst panelInstance = {\n\t\tshow,\n\t\thide,\n\t\tget visible() {\n\t\t\treturn state.visible;\n\t\t},\n\t};\n\n\treturn panelInstance;\n}\n\nlet panelSingleton = null;\n\nfunction getPanel() {\n\tif (!panelSingleton) {\n\t\tpanelSingleton = createSymbolsPanel();\n\t}\n\treturn panelSingleton;\n}\n\nexport function showSymbolsPanel(options) {\n\tconst panel = getPanel();\n\tpanel.show(options);\n\treturn panel;\n}\n\nexport function hideSymbolsPanel() {\n\tconst panel = getPanel();\n\tpanel.hide();\n}\n\nexport async function showDocumentSymbols(view) {\n\tif (!view) {\n\t\tconst em = globalThis.editorManager;\n\t\tview = em?.editor;\n\t}\n\n\tif (!view) {\n\t\tconst toast = globalThis.toast;\n\t\ttoast?.(\"No editor available\");\n\t\treturn false;\n\t}\n\n\tshowSymbolsPanel({ view });\n\treturn true;\n}\n\nexport default {\n\tshow: showSymbolsPanel,\n\thide: hideSymbolsPanel,\n\tshowDocumentSymbols,\n\tgetPanel,\n};\n"
},
{
"path": "src/components/symbolsPanel/styles.scss",
"content": "@use \"../../styles/mixins.scss\";\n\n.symbols-panel-mask {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: rgba(0, 0, 0, 0.4);\n z-index: 100;\n opacity: 0;\n transition: opacity 200ms ease-out;\n pointer-events: none;\n\n &.visible {\n opacity: 1;\n pointer-events: auto;\n }\n}\n\n.symbols-panel {\n position: fixed;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: 101;\n background-color: var(--popup-background-color);\n border-top-left-radius: 12px;\n border-top-right-radius: 12px;\n box-shadow: 0 -4px 20px var(--box-shadow-color);\n transform: translateY(100%);\n transition: transform 250ms ease-out, max-height 200ms ease-out;\n display: flex;\n flex-direction: column;\n max-height: 60vh;\n overflow: hidden;\n\n &.visible {\n transform: translateY(0);\n }\n\n &.expanded {\n max-height: 85vh;\n }\n\n .drag-handle {\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 8px 0 4px 0;\n cursor: grab;\n flex-shrink: 0;\n\n &::after {\n content: \"\";\n width: 36px;\n height: 4px;\n background-color: var(--border-color);\n border-radius: 2px;\n }\n\n &:active {\n cursor: grabbing;\n }\n }\n\n .panel-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 8px 12px 12px 16px;\n border-bottom: 1px solid var(--border-color);\n min-height: 44px;\n flex-shrink: 0;\n\n .header-content {\n display: flex;\n flex-direction: column;\n gap: 2px;\n flex: 1;\n min-width: 0;\n\n .header-title {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 1rem;\n font-weight: 600;\n color: var(--primary-text-color);\n\n .icon {\n font-size: 1.1em;\n opacity: 0.7;\n }\n }\n\n .header-subtitle {\n font-size: 0.85rem;\n color: var(--secondary-text-color);\n opacity: 0.8;\n }\n }\n\n .header-actions {\n display: flex;\n gap: 4px;\n flex-shrink: 0;\n }\n\n .action-btn {\n width: 36px;\n height: 36px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n background: transparent;\n color: var(--secondary-text-color);\n border-radius: 50%;\n cursor: pointer;\n\n &:active {\n background-color: var(--active-icon-color);\n }\n\n .icon {\n font-size: 1.2em;\n }\n }\n }\n\n .panel-search {\n padding: 8px 16px;\n border-bottom: 1px solid var(--border-color);\n flex-shrink: 0;\n\n input {\n width: 100%;\n background-color: var(--secondary-color);\n border: 1px solid var(--border-color);\n border-radius: 8px;\n padding: 10px 12px;\n font-size: 0.9rem;\n color: var(--primary-text-color);\n outline: none;\n\n &::placeholder {\n color: var(--secondary-text-color);\n opacity: 0.7;\n }\n\n &:focus {\n border-color: var(--active-color);\n }\n }\n }\n\n .panel-content {\n flex: 1;\n overflow-y: auto;\n overflow-x: hidden;\n -webkit-overflow-scrolling: touch;\n overscroll-behavior: contain;\n\n &::-webkit-scrollbar {\n width: var(--scrollbar-width, 4px);\n }\n\n &::-webkit-scrollbar-track {\n background: transparent;\n }\n\n &::-webkit-scrollbar-thumb {\n background: var(--scrollbar-color, rgba(0, 0, 0, 0.333));\n border-radius: calc(var(--scrollbar-width, 4px) / 2);\n }\n }\n\n .loading-state {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 32px 16px;\n color: var(--secondary-text-color);\n gap: 12px;\n\n .loader {\n @include mixins.circular-loader(24px);\n }\n }\n\n .empty-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 32px 16px;\n color: var(--secondary-text-color);\n text-align: center;\n\n .icon {\n font-size: 2rem;\n margin-bottom: 8px;\n opacity: 0.5;\n }\n }\n}\n\n.symbol-item {\n box-sizing: border-box;\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 0 16px;\n height: 44px;\n cursor: pointer;\n user-select: none;\n will-change: transform;\n\n &:active {\n background-color: var(--active-icon-color);\n }\n\n .symbol-indent {\n flex-shrink: 0;\n }\n\n .symbol-icon {\n width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 4px;\n flex-shrink: 0;\n font-size: 0.8rem;\n font-weight: 600;\n text-transform: uppercase;\n\n &.kind-file {\n background-color: rgba(158, 158, 158, 0.2);\n color: #9e9e9e;\n }\n\n &.kind-module {\n background-color: rgba(255, 152, 0, 0.2);\n color: #ff9800;\n }\n\n &.kind-namespace {\n background-color: rgba(255, 152, 0, 0.2);\n color: #ff9800;\n }\n\n &.kind-package {\n background-color: rgba(121, 85, 72, 0.2);\n color: #795548;\n }\n\n &.kind-class {\n background-color: rgba(255, 193, 7, 0.2);\n color: #ffc107;\n }\n\n &.kind-method {\n background-color: rgba(156, 39, 176, 0.2);\n color: #9c27b0;\n }\n\n &.kind-property {\n background-color: rgba(0, 150, 136, 0.2);\n color: #009688;\n }\n\n &.kind-field {\n background-color: rgba(0, 150, 136, 0.2);\n color: #009688;\n }\n\n &.kind-constructor {\n background-color: rgba(156, 39, 176, 0.2);\n color: #9c27b0;\n }\n\n &.kind-enum {\n background-color: rgba(255, 152, 0, 0.2);\n color: #ff9800;\n }\n\n &.kind-interface {\n background-color: rgba(0, 188, 212, 0.2);\n color: #00bcd4;\n }\n\n &.kind-function {\n background-color: rgba(103, 58, 183, 0.2);\n color: #673ab7;\n }\n\n &.kind-variable {\n background-color: rgba(33, 150, 243, 0.2);\n color: #2196f3;\n }\n\n &.kind-constant {\n background-color: rgba(33, 150, 243, 0.2);\n color: #2196f3;\n }\n\n &.kind-string {\n background-color: rgba(76, 175, 80, 0.2);\n color: #4caf50;\n }\n\n &.kind-number {\n background-color: rgba(139, 195, 74, 0.2);\n color: #8bc34a;\n }\n\n &.kind-boolean {\n background-color: rgba(33, 150, 243, 0.2);\n color: #2196f3;\n }\n\n &.kind-array {\n background-color: rgba(255, 87, 34, 0.2);\n color: #ff5722;\n }\n\n &.kind-object {\n background-color: rgba(96, 125, 139, 0.2);\n color: #607d8b;\n }\n\n &.kind-key {\n background-color: rgba(233, 30, 99, 0.2);\n color: #e91e63;\n }\n\n &.kind-null {\n background-color: rgba(158, 158, 158, 0.2);\n color: #9e9e9e;\n }\n\n &.kind-enummember {\n background-color: rgba(255, 152, 0, 0.2);\n color: #ff9800;\n }\n\n &.kind-struct {\n background-color: rgba(96, 125, 139, 0.2);\n color: #607d8b;\n }\n\n &.kind-event {\n background-color: rgba(255, 235, 59, 0.2);\n color: #fdd835;\n }\n\n &.kind-operator {\n background-color: rgba(158, 158, 158, 0.2);\n color: #9e9e9e;\n }\n\n &.kind-typeparameter {\n background-color: rgba(0, 188, 212, 0.2);\n color: #00bcd4;\n }\n }\n\n .symbol-info {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n\n .symbol-name {\n font-size: 0.9rem;\n font-weight: 500;\n color: var(--primary-text-color);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n\n .symbol-match {\n background-color: color-mix(in srgb, var(--active-color) 30%, transparent);\n border-radius: 2px;\n padding: 0 2px;\n }\n }\n\n .symbol-detail {\n font-size: 0.75rem;\n color: var(--secondary-text-color);\n opacity: 0.8;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n }\n\n .symbol-line {\n font-size: 0.75rem;\n color: var(--secondary-text-color);\n font-family: monospace;\n flex-shrink: 0;\n opacity: 0.7;\n }\n}"
},
{
"path": "src/components/tabView.js",
"content": "import Ref from \"html-tag-js/ref\";\n\n/**\n *\n * @param {object} param0\n * @param {string} param0.id\n * @returns\n */\nexport default function TabView({ id, disableSwipe = false }, children) {\n\tlet moveX = 0;\n\tlet moveY = 0;\n\tlet lastX = 0;\n\tlet lastY = 0;\n\tlet isScrolling = false;\n\tconst el = Ref();\n\treturn (\n\t\t