From 5cddd62445a8f29cbd8379e7b25cd9126e439f1e Mon Sep 17 00:00:00 2001 From: bendera Date: Sun, 13 Jul 2025 23:02:19 +0200 Subject: [PATCH 01/17] Adjust the indent guide visibility --- dev/vscode-tree/guides-has-arrows.html | 2 +- .../vscode-tree-item.styles.ts | 11 +++- src/vscode-tree-item/vscode-tree-item.ts | 5 +- src/vscode-tree/tree-context.ts | 4 +- src/vscode-tree/vscode-tree.ts | 61 +++++++++++++++++-- 5 files changed, 71 insertions(+), 12 deletions(-) diff --git a/dev/vscode-tree/guides-has-arrows.html b/dev/vscode-tree/guides-has-arrows.html index 8109365f2..60af914eb 100644 --- a/dev/vscode-tree/guides-has-arrows.html +++ b/dev/vscode-tree/guides-has-arrows.html @@ -29,7 +29,7 @@

Basic example

- + diff --git a/src/vscode-tree/tree-context.ts b/src/vscode-tree/tree-context.ts index 87b85b69c..bf2fde6b9 100644 --- a/src/vscode-tree/tree-context.ts +++ b/src/vscode-tree/tree-context.ts @@ -1,6 +1,6 @@ import {createContext} from '@lit/context'; import type {VscodeTreeItem} from '../vscode-tree-item'; -import type {ExpandMode, VscodeTree} from './vscode-tree'; +import type {ExpandMode, IndentGuideDisplay, VscodeTree} from './vscode-tree'; export interface TreeContext { isShiftPressed: boolean; @@ -26,7 +26,7 @@ export interface ConfigContext { readonly arrows: boolean; readonly expandMode: ExpandMode; readonly indent: number; - readonly indentGuides: boolean; + readonly indentGuides: IndentGuideDisplay; readonly multiSelect: boolean; } diff --git a/src/vscode-tree/vscode-tree.ts b/src/vscode-tree/vscode-tree.ts index c9e38f6a7..a8296e1c3 100644 --- a/src/vscode-tree/vscode-tree.ts +++ b/src/vscode-tree/vscode-tree.ts @@ -30,6 +30,15 @@ export const EXPAND_MODE = { export type ExpandMode = (typeof EXPAND_MODE)[keyof typeof EXPAND_MODE]; +export const INDENT_GUIDE_DISPLAY = { + NONE: 'none', + ON_HOVER: 'onHover', + ALWAYS: 'always', +} as const; + +export type IndentGuideDisplay = + (typeof INDENT_GUIDE_DISPLAY)[keyof typeof INDENT_GUIDE_DISPLAY]; + type ListenedKey = | 'ArrowDown' | 'ArrowUp' @@ -52,9 +61,12 @@ const listenedKeys: ListenedKey[] = [ ]; const DEFAULT_ARROWS = false; const DEFAULT_INDENT = 8; -const DEFAULT_INDENT_GUIDES = false; const DEFAULT_MULTI_SELECT = false; const DEFAULT_EXPAND_MODE = EXPAND_MODE.SINGLE_CLICK; +const DEFAULT_INDENT_GUIDE_DISPLAY: IndentGuideDisplay = + INDENT_GUIDE_DISPLAY.ON_HOVER; +const CSS_PROP_DEFAULT_GUIDE_DISPLAY = '--default-guide-display'; +const CSS_PROP_HIGHLIGHTED_GUIDE_DISPLAY = '--highlighted-guide-display'; @customElement('vscode-tree') export class VscodeTree extends VscElement { @@ -71,8 +83,8 @@ export class VscodeTree extends VscElement { @property({type: Number, reflect: true}) indent = DEFAULT_INDENT; - @property({type: Boolean, attribute: 'indent-guides', reflect: true}) - indentGuides = DEFAULT_INDENT_GUIDES; + @property({type: String, attribute: 'indent-guides'}) + indentGuides: IndentGuideDisplay = DEFAULT_INDENT_GUIDE_DISPLAY; @property({type: Boolean, reflect: true, attribute: 'multi-select'}) multiSelect = DEFAULT_MULTI_SELECT; @@ -106,7 +118,7 @@ export class VscodeTree extends VscElement { arrows: DEFAULT_ARROWS, expandMode: DEFAULT_EXPAND_MODE, indent: DEFAULT_INDENT, - indentGuides: DEFAULT_INDENT_GUIDES, + indentGuides: DEFAULT_INDENT_GUIDE_DISPLAY, multiSelect: DEFAULT_MULTI_SELECT, }; @@ -120,6 +132,8 @@ export class VscodeTree extends VscElement { this.addEventListener('keyup', this._handleComponentKeyUp); this.addEventListener('keydown', this._handleComponentKeyDown); + this.addEventListener('mouseenter', this._handleComponentMouseEnter); + this.addEventListener('mouseleave', this._handleComponentMouseLeave); } override connectedCallback(): void { @@ -134,6 +148,10 @@ export class VscodeTree extends VscElement { if (changedProperties.has('multiSelect')) { this.ariaMultiSelectable = this.multiSelect ? 'true' : 'false'; } + + if (changedProperties.has('indentGuides')) { + this._updateIndentGuidesDefaultVisibility(); + } } //#endregion @@ -283,6 +301,33 @@ export class VscodeTree extends VscElement { } } + private _updateIndentGuidesDefaultVisibility() { + const isDefaultVisible = this.indentGuides === 'always'; + const isHighlightedVisible = + this.indentGuides === 'always' || this.indentGuides === 'onHover'; + this.style.setProperty( + CSS_PROP_DEFAULT_GUIDE_DISPLAY, + isDefaultVisible ? 'block' : 'none' + ); + this.style.setProperty( + CSS_PROP_HIGHLIGHTED_GUIDE_DISPLAY, + isHighlightedVisible ? 'block' : 'none' + ); + } + + private _updateIndentGuidesHoverVisibility() { + const isGuidesVisible = + this.indentGuides === 'always' || this.indentGuides === 'onHover'; + this.style.setProperty( + CSS_PROP_DEFAULT_GUIDE_DISPLAY, + isGuidesVisible ? 'block' : 'none' + ); + this.style.setProperty( + CSS_PROP_HIGHLIGHTED_GUIDE_DISPLAY, + isGuidesVisible ? 'block' : 'none' + ); + } + //#endregion //#region event handlers @@ -406,6 +451,14 @@ export class VscodeTree extends VscElement { } }; + private _handleComponentMouseEnter = () => { + this._updateIndentGuidesHoverVisibility(); + }; + + private _handleComponentMouseLeave = () => { + this._updateIndentGuidesDefaultVisibility(); + }; + private _handleSlotChange = () => { this._treeContextState.itemListUpToDate = false; initPathTrackerProps(this, this._assignedTreeItems); From 8b60e58a78d2e63ae0df81742a0d37ccbdc0e226 Mon Sep 17 00:00:00 2001 From: bendera Date: Sun, 13 Jul 2025 23:13:55 +0200 Subject: [PATCH 02/17] Refactor --- src/vscode-tree-item/vscode-tree-item.ts | 10 ++++---- src/vscode-tree/vscode-tree.ts | 31 ++++++++++++------------ 2 files changed, 21 insertions(+), 20 deletions(-) diff --git a/src/vscode-tree-item/vscode-tree-item.ts b/src/vscode-tree-item/vscode-tree-item.ts index cbfb5ad52..f5fe1ccc0 100644 --- a/src/vscode-tree-item/vscode-tree-item.ts +++ b/src/vscode-tree-item/vscode-tree-item.ts @@ -16,7 +16,7 @@ import { } from '../vscode-tree/tree-context'; import {initPathTrackerProps} from '../vscode-tree/helpers.js'; import styles from './vscode-tree-item.styles.js'; -import {EXPAND_MODE} from '../vscode-tree/vscode-tree.js'; +import {ExpandMode, IndentGuides} from '../vscode-tree/vscode-tree.js'; const BASE_INDENT = 3; const ARROW_CONTAINER_WIDTH = 30; @@ -325,7 +325,7 @@ export class VscodeTreeItem extends VscElement { this._selectItem(isCtrlDown); this._treeContextState.emitSelectEvent?.(); - if (this._configContext.expandMode === EXPAND_MODE.SINGLE_CLICK) { + if (this._configContext.expandMode === ExpandMode.singleClick) { if (this.branch && !(this._configContext.multiSelect && isCtrlDown)) { this.open = !this.open; } @@ -344,7 +344,7 @@ export class VscodeTreeItem extends VscElement { } private _handleDoubleClick(ev: MouseEvent) { - if (this._configContext.expandMode === EXPAND_MODE.DOUBLE_CLICK) { + if (this._configContext.expandMode === ExpandMode.doubleClick) { if (this.branch && !(this._configContext.multiSelect && ev.ctrlKey)) { this.open = !this.open; } @@ -371,8 +371,8 @@ export class VscodeTreeItem extends VscElement { const childrenClasses = { children: true, - guide: indentGuides !== 'none', - 'default-guide': indentGuides !== 'none', + guide: indentGuides !== IndentGuides.none, + 'default-guide': indentGuides !== IndentGuides.none, 'highlighted-guide': this.highlightedGuides, }; diff --git a/src/vscode-tree/vscode-tree.ts b/src/vscode-tree/vscode-tree.ts index a8296e1c3..e1e3c54de 100644 --- a/src/vscode-tree/vscode-tree.ts +++ b/src/vscode-tree/vscode-tree.ts @@ -23,21 +23,21 @@ import { export type VscTreeSelectEvent = CustomEvent<{selectedItems: VscodeTreeItem[]}>; -export const EXPAND_MODE = { - SINGLE_CLICK: 'singleClick', - DOUBLE_CLICK: 'doubleClick', +export const ExpandMode = { + singleClick: 'singleClick', + doubleClick: 'doubleClick', } as const; -export type ExpandMode = (typeof EXPAND_MODE)[keyof typeof EXPAND_MODE]; +export type ExpandMode = (typeof ExpandMode)[keyof typeof ExpandMode]; -export const INDENT_GUIDE_DISPLAY = { - NONE: 'none', - ON_HOVER: 'onHover', - ALWAYS: 'always', +export const IndentGuides = { + none: 'none', + onHover: 'onHover', + always: 'always', } as const; export type IndentGuideDisplay = - (typeof INDENT_GUIDE_DISPLAY)[keyof typeof INDENT_GUIDE_DISPLAY]; + (typeof IndentGuides)[keyof typeof IndentGuides]; type ListenedKey = | 'ArrowDown' @@ -62,9 +62,8 @@ const listenedKeys: ListenedKey[] = [ const DEFAULT_ARROWS = false; const DEFAULT_INDENT = 8; const DEFAULT_MULTI_SELECT = false; -const DEFAULT_EXPAND_MODE = EXPAND_MODE.SINGLE_CLICK; -const DEFAULT_INDENT_GUIDE_DISPLAY: IndentGuideDisplay = - INDENT_GUIDE_DISPLAY.ON_HOVER; +const DEFAULT_EXPAND_MODE = ExpandMode.singleClick; +const DEFAULT_INDENT_GUIDE_DISPLAY = IndentGuides.onHover; const CSS_PROP_DEFAULT_GUIDE_DISPLAY = '--default-guide-display'; const CSS_PROP_HIGHLIGHTED_GUIDE_DISPLAY = '--highlighted-guide-display'; @@ -302,9 +301,10 @@ export class VscodeTree extends VscElement { } private _updateIndentGuidesDefaultVisibility() { - const isDefaultVisible = this.indentGuides === 'always'; + const isDefaultVisible = this.indentGuides === IndentGuides.always; const isHighlightedVisible = - this.indentGuides === 'always' || this.indentGuides === 'onHover'; + this.indentGuides === IndentGuides.always || + this.indentGuides === IndentGuides.onHover; this.style.setProperty( CSS_PROP_DEFAULT_GUIDE_DISPLAY, isDefaultVisible ? 'block' : 'none' @@ -317,7 +317,8 @@ export class VscodeTree extends VscElement { private _updateIndentGuidesHoverVisibility() { const isGuidesVisible = - this.indentGuides === 'always' || this.indentGuides === 'onHover'; + this.indentGuides === IndentGuides.always || + this.indentGuides === IndentGuides.onHover; this.style.setProperty( CSS_PROP_DEFAULT_GUIDE_DISPLAY, isGuidesVisible ? 'block' : 'none' From 4617f40870a9eea8d82a2ebf9d1ac31e08b1f570 Mon Sep 17 00:00:00 2001 From: bendera Date: Sun, 13 Jul 2025 23:43:33 +0200 Subject: [PATCH 03/17] Change `arrows` property to `hideArrows` --- src/vscode-tree-item/vscode-tree-item.ts | 8 ++++---- src/vscode-tree/tree-context.ts | 2 +- src/vscode-tree/vscode-tree.ts | 12 ++++++------ 3 files changed, 11 insertions(+), 11 deletions(-) diff --git a/src/vscode-tree-item/vscode-tree-item.ts b/src/vscode-tree-item/vscode-tree-item.ts index f5fe1ccc0..2bad0aeb5 100644 --- a/src/vscode-tree-item/vscode-tree-item.ts +++ b/src/vscode-tree-item/vscode-tree-item.ts @@ -354,13 +354,13 @@ export class VscodeTreeItem extends VscElement { //#endregion override render(): TemplateResult { - const {arrows, indent, indentGuides} = this._configContext; + const {hideArrows, indent, indentGuides} = this._configContext; const {hasBranchItem} = this._treeContextState; let indentation = BASE_INDENT + this.level * indent; - const guideOffset = arrows ? 13 : 3; + const guideOffset = !hideArrows ? 13 : 3; const indentGuideX = BASE_INDENT + this.level * indent + guideOffset; - if (!this.branch && arrows && hasBranchItem) { + if (!this.branch && !hideArrows && hasBranchItem) { indentation += ARROW_CONTAINER_WIDTH; } @@ -383,7 +383,7 @@ export class VscodeTreeItem extends VscElement { @dblclick=${this._handleDoubleClick} .style=${stylePropertyMap({paddingLeft: `${indentation}px`})} > - ${this.branch && arrows + ${this.branch && !hideArrows ? html`
('vscode-list'); export interface ConfigContext { - readonly arrows: boolean; + readonly hideArrows: boolean; readonly expandMode: ExpandMode; readonly indent: number; readonly indentGuides: IndentGuideDisplay; diff --git a/src/vscode-tree/vscode-tree.ts b/src/vscode-tree/vscode-tree.ts index e1e3c54de..a18db2f91 100644 --- a/src/vscode-tree/vscode-tree.ts +++ b/src/vscode-tree/vscode-tree.ts @@ -59,7 +59,7 @@ const listenedKeys: ListenedKey[] = [ 'Escape', 'Shift', ]; -const DEFAULT_ARROWS = false; +const DEFAULT_HIDE_ARROWS = false; const DEFAULT_INDENT = 8; const DEFAULT_MULTI_SELECT = false; const DEFAULT_EXPAND_MODE = ExpandMode.singleClick; @@ -74,7 +74,7 @@ export class VscodeTree extends VscElement { //#region properties @property({type: Boolean, reflect: true}) - arrows = DEFAULT_ARROWS; + hideArrows = DEFAULT_HIDE_ARROWS; @property({type: String, attribute: 'expand-mode'}) expandMode: ExpandMode = DEFAULT_EXPAND_MODE; @@ -114,7 +114,7 @@ export class VscodeTree extends VscElement { @provide({context: configContext}) private _configContext: ConfigContext = { - arrows: DEFAULT_ARROWS, + hideArrows: DEFAULT_HIDE_ARROWS, expandMode: DEFAULT_EXPAND_MODE, indent: DEFAULT_INDENT, indentGuides: DEFAULT_INDENT_GUIDE_DISPLAY, @@ -239,10 +239,10 @@ export class VscodeTree extends VscElement { } private _updateConfigContext(changedProperties: PropertyValues) { - const {arrows, expandMode, indent, indentGuides, multiSelect} = this; + const {hideArrows, expandMode, indent, indentGuides, multiSelect} = this; - if (changedProperties.has('arrows')) { - this._configContext = {...this._configContext, arrows}; + if (changedProperties.has('hideArrows')) { + this._configContext = {...this._configContext, hideArrows}; } if (changedProperties.has('expandMode')) { From 721b797da6bf03b0a6c111e91f70b7c4819df385 Mon Sep 17 00:00:00 2001 From: bendera Date: Sun, 13 Jul 2025 23:43:56 +0200 Subject: [PATCH 04/17] FIx arrow color of selected item --- src/vscode-tree-item/vscode-tree-item.styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/vscode-tree-item/vscode-tree-item.styles.ts b/src/vscode-tree-item/vscode-tree-item.styles.ts index 52b6346e3..38200c1c0 100644 --- a/src/vscode-tree-item/vscode-tree-item.styles.ts +++ b/src/vscode-tree-item/vscode-tree-item.styles.ts @@ -79,7 +79,7 @@ const styles: CSSResultGroup = [ } :host([selected]) .arrow-container svg { - fill: var(--vscode-list-activeSelectionForeground); + fill: var(--vscode-list-activeSelectionIconForeground); } .icon-container { From 96a31f251b17605319bb30c26a59d4a1dc06e076 Mon Sep 17 00:00:00 2001 From: bendera Date: Mon, 14 Jul 2025 00:32:16 +0200 Subject: [PATCH 05/17] Add docs --- src/vscode-tree/vscode-tree.ts | 41 +++++++++++++++++++++++++++++----- 1 file changed, 36 insertions(+), 5 deletions(-) diff --git a/src/vscode-tree/vscode-tree.ts b/src/vscode-tree/vscode-tree.ts index a18db2f91..d9f9f3958 100644 --- a/src/vscode-tree/vscode-tree.ts +++ b/src/vscode-tree/vscode-tree.ts @@ -67,26 +67,51 @@ const DEFAULT_INDENT_GUIDE_DISPLAY = IndentGuides.onHover; const CSS_PROP_DEFAULT_GUIDE_DISPLAY = '--default-guide-display'; const CSS_PROP_HIGHLIGHTED_GUIDE_DISPLAY = '--highlighted-guide-display'; +/** + * @tag vscode-tree + * + * @prop {'singleClick' | 'doubleClick'} expandMode + */ @customElement('vscode-tree') export class VscodeTree extends VscElement { static override styles = styles; //#region properties + /** + * Although arrows are always visible in the Tree component by default in VSCode, some icon sets + * (e.g., Material Icon Theme) allow disabling them in the file explorer view. This flag makes it + * possible to mimic that behavior. + */ @property({type: Boolean, reflect: true}) - hideArrows = DEFAULT_HIDE_ARROWS; + hideArrows = false; + /** + * Controls how tree folders are expanded when clicked. This property is designed to use + * the `workbench.tree.expandMode` setting. + */ @property({type: String, attribute: 'expand-mode'}) - expandMode: ExpandMode = DEFAULT_EXPAND_MODE; + expandMode: ExpandMode = 'singleClick'; + /** + * Controls the indentation in pixels. This property is designed to use the + * `workbench.tree.indent` setting. + */ @property({type: Number, reflect: true}) - indent = DEFAULT_INDENT; + indent = 8; + /** + * Controls whether the tree should render indent guides. This property is + * designed to use the `workbench.tree.renderIndentGuides` setting. + */ @property({type: String, attribute: 'indent-guides'}) - indentGuides: IndentGuideDisplay = DEFAULT_INDENT_GUIDE_DISPLAY; + indentGuides: IndentGuideDisplay = 'onHover'; + /** + * Allows selecting multiple items. + */ @property({type: Boolean, reflect: true, attribute: 'multi-select'}) - multiSelect = DEFAULT_MULTI_SELECT; + multiSelect = false; //#endregion @@ -157,6 +182,9 @@ export class VscodeTree extends VscElement { //#region public methods + /** + * Expands all folders. + */ expandAll() { const children = this.querySelectorAll('vscode-tree-item'); @@ -167,6 +195,9 @@ export class VscodeTree extends VscElement { }); } + /** + * Collapses all folders. + */ collapseAll() { const children = this.querySelectorAll('vscode-tree-item'); From 72719fa286f23f67de2c77b93ef660564d01e585 Mon Sep 17 00:00:00 2001 From: bendera Date: Mon, 14 Jul 2025 17:26:10 +0200 Subject: [PATCH 06/17] Fix inactive selection background color --- src/vscode-tree-item/vscode-tree-item.styles.ts | 2 +- src/vscode-tree/vscode-tree.styles.ts | 6 +++++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/vscode-tree-item/vscode-tree-item.styles.ts b/src/vscode-tree-item/vscode-tree-item.styles.ts index 38200c1c0..f497016f2 100644 --- a/src/vscode-tree-item/vscode-tree-item.styles.ts +++ b/src/vscode-tree-item/vscode-tree-item.styles.ts @@ -39,7 +39,7 @@ const styles: CSSResultGroup = [ :host([selected]) .content { color: var(--vscode-list-activeSelectionForeground); - background-color: var(--vscode-list-activeSelectionBackground); + background-color: var(--selection-background); } :host([selected]) ::slotted(vscode-icon) { diff --git a/src/vscode-tree/vscode-tree.styles.ts b/src/vscode-tree/vscode-tree.styles.ts index 82d1d35b5..723cec4e6 100644 --- a/src/vscode-tree/vscode-tree.styles.ts +++ b/src/vscode-tree/vscode-tree.styles.ts @@ -6,10 +6,14 @@ const styles: CSSResultGroup = [ css` :host { --vsc-tree-item-arrow-display: none; - + --selection-background: var(--vscode-list-inactiveSelectionBackground); display: block; } + :host(:focus-within) { + --selection-background: var(--vscode-list-activeSelectionBackground); + } + :host([arrows]) { --vsc-tree-item-arrow-display: flex; } From 685dce8d7167692f493545af3e120a2c854f2596 Mon Sep 17 00:00:00 2001 From: bendera Date: Mon, 14 Jul 2025 17:47:46 +0200 Subject: [PATCH 07/17] Simplify the indent guide visibility logic --- .../vscode-tree-item.styles.ts | 4 +- src/vscode-tree/vscode-tree.styles.ts | 20 +++++++ src/vscode-tree/vscode-tree.ts | 52 +++---------------- 3 files changed, 28 insertions(+), 48 deletions(-) diff --git a/src/vscode-tree-item/vscode-tree-item.styles.ts b/src/vscode-tree-item/vscode-tree-item.styles.ts index f497016f2..4cd782fb8 100644 --- a/src/vscode-tree-item/vscode-tree-item.styles.ts +++ b/src/vscode-tree-item/vscode-tree-item.styles.ts @@ -106,11 +106,11 @@ const styles: CSSResultGroup = [ } .children.guide.default-guide:before { - display: var(--default-guide-display); + display: var(--default-indent-guide-display); } .children.guide.highlighted-guide:before { - display: var(--highlighted-guide-display); + display: var(--highlighted-indent-guide-display); background-color: var(--vscode-tree-indentGuidesStroke); } diff --git a/src/vscode-tree/vscode-tree.styles.ts b/src/vscode-tree/vscode-tree.styles.ts index 723cec4e6..42bc967f2 100644 --- a/src/vscode-tree/vscode-tree.styles.ts +++ b/src/vscode-tree/vscode-tree.styles.ts @@ -7,9 +7,17 @@ const styles: CSSResultGroup = [ :host { --vsc-tree-item-arrow-display: none; --selection-background: var(--vscode-list-inactiveSelectionBackground); + --default-indent-guide-display: none; + --highlighted-indent-guide-display: block; + display: block; } + :host(:hover) { + --default-indent-guide-display: block; + --highlighted-indent-guide-display: block; + } + :host(:focus-within) { --selection-background: var(--vscode-list-activeSelectionBackground); } @@ -17,6 +25,18 @@ const styles: CSSResultGroup = [ :host([arrows]) { --vsc-tree-item-arrow-display: flex; } + + :host([indent-guides="none"]), + :host([indent-guides="none"]:hover) { + --default-indent-guide-display: none; + --highlighted-indent-guide-display: none; + } + + :host([indent-guides="always"]), + :host([indent-guides="always"]:hover) { + --default-indent-guide-display: block; + --highlighted-indent-guide-display: block; + } `, ]; diff --git a/src/vscode-tree/vscode-tree.ts b/src/vscode-tree/vscode-tree.ts index d9f9f3958..085c6e4b6 100644 --- a/src/vscode-tree/vscode-tree.ts +++ b/src/vscode-tree/vscode-tree.ts @@ -64,8 +64,6 @@ const DEFAULT_INDENT = 8; const DEFAULT_MULTI_SELECT = false; const DEFAULT_EXPAND_MODE = ExpandMode.singleClick; const DEFAULT_INDENT_GUIDE_DISPLAY = IndentGuides.onHover; -const CSS_PROP_DEFAULT_GUIDE_DISPLAY = '--default-guide-display'; -const CSS_PROP_HIGHLIGHTED_GUIDE_DISPLAY = '--highlighted-guide-display'; /** * @tag vscode-tree @@ -104,7 +102,12 @@ export class VscodeTree extends VscElement { * Controls whether the tree should render indent guides. This property is * designed to use the `workbench.tree.renderIndentGuides` setting. */ - @property({type: String, attribute: 'indent-guides'}) + @property({ + type: String, + attribute: 'indent-guides', + useDefault: true, + reflect: true, + }) indentGuides: IndentGuideDisplay = 'onHover'; /** @@ -156,8 +159,6 @@ export class VscodeTree extends VscElement { this.addEventListener('keyup', this._handleComponentKeyUp); this.addEventListener('keydown', this._handleComponentKeyDown); - this.addEventListener('mouseenter', this._handleComponentMouseEnter); - this.addEventListener('mouseleave', this._handleComponentMouseLeave); } override connectedCallback(): void { @@ -172,10 +173,6 @@ export class VscodeTree extends VscElement { if (changedProperties.has('multiSelect')) { this.ariaMultiSelectable = this.multiSelect ? 'true' : 'false'; } - - if (changedProperties.has('indentGuides')) { - this._updateIndentGuidesDefaultVisibility(); - } } //#endregion @@ -331,35 +328,6 @@ export class VscodeTree extends VscElement { } } - private _updateIndentGuidesDefaultVisibility() { - const isDefaultVisible = this.indentGuides === IndentGuides.always; - const isHighlightedVisible = - this.indentGuides === IndentGuides.always || - this.indentGuides === IndentGuides.onHover; - this.style.setProperty( - CSS_PROP_DEFAULT_GUIDE_DISPLAY, - isDefaultVisible ? 'block' : 'none' - ); - this.style.setProperty( - CSS_PROP_HIGHLIGHTED_GUIDE_DISPLAY, - isHighlightedVisible ? 'block' : 'none' - ); - } - - private _updateIndentGuidesHoverVisibility() { - const isGuidesVisible = - this.indentGuides === IndentGuides.always || - this.indentGuides === IndentGuides.onHover; - this.style.setProperty( - CSS_PROP_DEFAULT_GUIDE_DISPLAY, - isGuidesVisible ? 'block' : 'none' - ); - this.style.setProperty( - CSS_PROP_HIGHLIGHTED_GUIDE_DISPLAY, - isGuidesVisible ? 'block' : 'none' - ); - } - //#endregion //#region event handlers @@ -483,14 +451,6 @@ export class VscodeTree extends VscElement { } }; - private _handleComponentMouseEnter = () => { - this._updateIndentGuidesHoverVisibility(); - }; - - private _handleComponentMouseLeave = () => { - this._updateIndentGuidesDefaultVisibility(); - }; - private _handleSlotChange = () => { this._treeContextState.itemListUpToDate = false; initPathTrackerProps(this, this._assignedTreeItems); From 3812feff8500d497ce2259b0153a480f88c36534 Mon Sep 17 00:00:00 2001 From: bendera Date: Mon, 14 Jul 2025 18:03:06 +0200 Subject: [PATCH 08/17] Fix foreground color in the selected tree item --- src/vscode-tree-item/vscode-tree-item.styles.ts | 6 +++--- src/vscode-tree/vscode-tree.styles.ts | 4 ++++ 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/vscode-tree-item/vscode-tree-item.styles.ts b/src/vscode-tree-item/vscode-tree-item.styles.ts index 4cd782fb8..188f67598 100644 --- a/src/vscode-tree-item/vscode-tree-item.styles.ts +++ b/src/vscode-tree-item/vscode-tree-item.styles.ts @@ -38,12 +38,12 @@ const styles: CSSResultGroup = [ } :host([selected]) .content { - color: var(--vscode-list-activeSelectionForeground); + color: var(--selection-foreground); background-color: var(--selection-background); } :host([selected]) ::slotted(vscode-icon) { - color: var(--vscode-list-activeSelectionForeground); + color: var(--selection-foreground); } :host(:focus) { @@ -79,7 +79,7 @@ const styles: CSSResultGroup = [ } :host([selected]) .arrow-container svg { - fill: var(--vscode-list-activeSelectionIconForeground); + fill: var(--selection-icon-foreground); } .icon-container { diff --git a/src/vscode-tree/vscode-tree.styles.ts b/src/vscode-tree/vscode-tree.styles.ts index 42bc967f2..4849d2a71 100644 --- a/src/vscode-tree/vscode-tree.styles.ts +++ b/src/vscode-tree/vscode-tree.styles.ts @@ -7,6 +7,8 @@ const styles: CSSResultGroup = [ :host { --vsc-tree-item-arrow-display: none; --selection-background: var(--vscode-list-inactiveSelectionBackground); + --selection-foreground: var(--vscode-foreground); + --selection-icon-foreground: var(--vscode-icon-foreground); --default-indent-guide-display: none; --highlighted-indent-guide-display: block; @@ -20,6 +22,8 @@ const styles: CSSResultGroup = [ :host(:focus-within) { --selection-background: var(--vscode-list-activeSelectionBackground); + --selection-foreground: var(--vscode-list-activeSelectionForeground); + --selection-icon-foreground: var(--vscode-list-activeSelectionIconForeground); } :host([arrows]) { From 4090e9041cd4f4dda574d039f0885c2d3bd4fc17 Mon Sep 17 00:00:00 2001 From: bendera Date: Mon, 14 Jul 2025 18:12:50 +0200 Subject: [PATCH 09/17] Rename private css variables --- .../vscode-tree-item.styles.ts | 12 ++++---- src/vscode-tree/vscode-tree.styles.ts | 28 +++++++++---------- 2 files changed, 20 insertions(+), 20 deletions(-) diff --git a/src/vscode-tree-item/vscode-tree-item.styles.ts b/src/vscode-tree-item/vscode-tree-item.styles.ts index 188f67598..966d9f3f3 100644 --- a/src/vscode-tree-item/vscode-tree-item.styles.ts +++ b/src/vscode-tree-item/vscode-tree-item.styles.ts @@ -38,12 +38,12 @@ const styles: CSSResultGroup = [ } :host([selected]) .content { - color: var(--selection-foreground); - background-color: var(--selection-background); + color: var(--internal-selectionForeground); + background-color: var(--internal-selectionBackground); } :host([selected]) ::slotted(vscode-icon) { - color: var(--selection-foreground); + color: var(--internal-selectionForeground); } :host(:focus) { @@ -79,7 +79,7 @@ const styles: CSSResultGroup = [ } :host([selected]) .arrow-container svg { - fill: var(--selection-icon-foreground); + fill: var(--internal-selectionIconForeground); } .icon-container { @@ -106,11 +106,11 @@ const styles: CSSResultGroup = [ } .children.guide.default-guide:before { - display: var(--default-indent-guide-display); + display: var(--internal-defaultIndentGuideDisplay); } .children.guide.highlighted-guide:before { - display: var(--highlighted-indent-guide-display); + display: var(--internal-highlightedIndentGuideDisplay); background-color: var(--vscode-tree-indentGuidesStroke); } diff --git a/src/vscode-tree/vscode-tree.styles.ts b/src/vscode-tree/vscode-tree.styles.ts index 4849d2a71..3e80b5c52 100644 --- a/src/vscode-tree/vscode-tree.styles.ts +++ b/src/vscode-tree/vscode-tree.styles.ts @@ -6,24 +6,24 @@ const styles: CSSResultGroup = [ css` :host { --vsc-tree-item-arrow-display: none; - --selection-background: var(--vscode-list-inactiveSelectionBackground); - --selection-foreground: var(--vscode-foreground); - --selection-icon-foreground: var(--vscode-icon-foreground); - --default-indent-guide-display: none; - --highlighted-indent-guide-display: block; + --internal-selectionBackground: var(--vscode-list-inactiveSelectionBackground); + --internal-selectionForeground: var(--vscode-foreground); + --internal-selectionIconForeground: var(--vscode-icon-foreground); + --internal-defaultIndentGuideDisplay: none; + --internal-highlightedIndentGuideDisplay: block; display: block; } :host(:hover) { - --default-indent-guide-display: block; - --highlighted-indent-guide-display: block; + --internal-defaultIndentGuideDisplay: block; + --internal-highlightedIndentGuideDisplay: block; } :host(:focus-within) { - --selection-background: var(--vscode-list-activeSelectionBackground); - --selection-foreground: var(--vscode-list-activeSelectionForeground); - --selection-icon-foreground: var(--vscode-list-activeSelectionIconForeground); + --internal-selectionBackground: var(--vscode-list-activeSelectionBackground); + --internal-selectionForeground: var(--vscode-list-activeSelectionForeground); + --internal-selectionIconForeground: var(--vscode-list-activeSelectionIconForeground); } :host([arrows]) { @@ -32,14 +32,14 @@ const styles: CSSResultGroup = [ :host([indent-guides="none"]), :host([indent-guides="none"]:hover) { - --default-indent-guide-display: none; - --highlighted-indent-guide-display: none; + --internal-defaultIndentGuideDisplay: none; + --internal-highlightedIndentGuideDisplay: none; } :host([indent-guides="always"]), :host([indent-guides="always"]:hover) { - --default-indent-guide-display: block; - --highlighted-indent-guide-display: block; + --internal-defaultIndentGuideDisplay: block; + --internal-highlightedIndentGuideDisplay: block; } `, ]; From fe217ea91d96629bce2b8038f98b48557081c074 Mon Sep 17 00:00:00 2001 From: bendera Date: Mon, 14 Jul 2025 22:59:51 +0200 Subject: [PATCH 10/17] Add basic example --- dev/vscode-tree/basic-example.html | 78 ++++++++++++++++++++++++++++++ 1 file changed, 78 insertions(+) create mode 100644 dev/vscode-tree/basic-example.html diff --git a/dev/vscode-tree/basic-example.html b/dev/vscode-tree/basic-example.html new file mode 100644 index 000000000..b153e8515 --- /dev/null +++ b/dev/vscode-tree/basic-example.html @@ -0,0 +1,78 @@ + + + + + + VSCode Elements + + + + + + + +

Basic example

+
+ + + Home + + About + Overview + Administration + + Facts + History + Current Statistics + Awards + + + Campus Tours + For Prospective Students + For Alumni + For Visitors + + + + Admissions + Apply + + Tuition + Undergraduate + Graduate + Professional Schools + + Sign Up + Visit + Photo Tour + Connect + + + Academics + Colleges & Schools + Programs of Study + Honors Programs + Online Courses + Course Explorer + Register for Classes + Academic Calendar + Transcripts + + + +
+ + From b8c44ba9870dcff09667f6584d5b2ace212e52bf Mon Sep 17 00:00:00 2001 From: bendera Date: Mon, 14 Jul 2025 23:02:04 +0200 Subject: [PATCH 11/17] Fix hideArrow property --- src/vscode-tree/vscode-tree.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/vscode-tree/vscode-tree.ts b/src/vscode-tree/vscode-tree.ts index 085c6e4b6..0140d33a0 100644 --- a/src/vscode-tree/vscode-tree.ts +++ b/src/vscode-tree/vscode-tree.ts @@ -81,7 +81,7 @@ export class VscodeTree extends VscElement { * (e.g., Material Icon Theme) allow disabling them in the file explorer view. This flag makes it * possible to mimic that behavior. */ - @property({type: Boolean, reflect: true}) + @property({type: Boolean, reflect: true, attribute: 'hide-arrows'}) hideArrows = false; /** From a806d552774ff8f188d5cf4b4f1dad34edde4d1c Mon Sep 17 00:00:00 2001 From: bendera Date: Mon, 14 Jul 2025 23:08:03 +0200 Subject: [PATCH 12/17] Fix Tree arrows visibility --- src/vscode-tree/vscode-tree.styles.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/vscode-tree/vscode-tree.styles.ts b/src/vscode-tree/vscode-tree.styles.ts index 3e80b5c52..c7badca42 100644 --- a/src/vscode-tree/vscode-tree.styles.ts +++ b/src/vscode-tree/vscode-tree.styles.ts @@ -5,7 +5,7 @@ const styles: CSSResultGroup = [ defaultStyles, css` :host { - --vsc-tree-item-arrow-display: none; + --vsc-tree-item-arrow-display: flex; --internal-selectionBackground: var(--vscode-list-inactiveSelectionBackground); --internal-selectionForeground: var(--vscode-foreground); --internal-selectionIconForeground: var(--vscode-icon-foreground); @@ -26,8 +26,8 @@ const styles: CSSResultGroup = [ --internal-selectionIconForeground: var(--vscode-list-activeSelectionIconForeground); } - :host([arrows]) { - --vsc-tree-item-arrow-display: flex; + :host([hide-arrows]) { + --vsc-tree-item-arrow-display: none; } :host([indent-guides="none"]), From bfbe9cf076dd1cd6c994c75b4ccd7ceee8eb221f Mon Sep 17 00:00:00 2001 From: bendera Date: Mon, 14 Jul 2025 23:08:58 +0200 Subject: [PATCH 13/17] Remove extra margins in Tree when icon is hidden --- src/vscode-tree-item/vscode-tree-item.styles.ts | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/vscode-tree-item/vscode-tree-item.styles.ts b/src/vscode-tree-item/vscode-tree-item.styles.ts index 966d9f3f3..6146db4c1 100644 --- a/src/vscode-tree-item/vscode-tree-item.styles.ts +++ b/src/vscode-tree-item/vscode-tree-item.styles.ts @@ -86,9 +86,16 @@ const styles: CSSResultGroup = [ align-items: center; display: flex; height: 22px; + } + + .icon-container slot { margin-right: 6px; } + slot[name='icon']:empty { + display: none; + } + .children { position: relative; } From fd032ebc79dc78d83638488ddadba1943b37312a Mon Sep 17 00:00:00 2001 From: bendera Date: Tue, 15 Jul 2025 00:15:46 +0200 Subject: [PATCH 14/17] Remove margins from the empty icon container --- .../vscode-tree-item.styles.ts | 6 +- src/vscode-tree-item/vscode-tree-item.ts | 57 +++++++++++++++++-- 2 files changed, 56 insertions(+), 7 deletions(-) diff --git a/src/vscode-tree-item/vscode-tree-item.styles.ts b/src/vscode-tree-item/vscode-tree-item.styles.ts index 6146db4c1..8f8f3ce1f 100644 --- a/src/vscode-tree-item/vscode-tree-item.styles.ts +++ b/src/vscode-tree-item/vscode-tree-item.styles.ts @@ -89,11 +89,11 @@ const styles: CSSResultGroup = [ } .icon-container slot { - margin-right: 6px; + display: block; } - slot[name='icon']:empty { - display: none; + .icon-container.has-icon { + margin-right: 6px; } .children { diff --git a/src/vscode-tree-item/vscode-tree-item.ts b/src/vscode-tree-item/vscode-tree-item.ts index 2bad0aeb5..7977b90b2 100644 --- a/src/vscode-tree-item/vscode-tree-item.ts +++ b/src/vscode-tree-item/vscode-tree-item.ts @@ -4,6 +4,7 @@ import { customElement, property, queryAssignedElements, + state, } from 'lit/decorators.js'; import {classMap} from 'lit/directives/class-map.js'; import {VscElement} from '../includes/VscElement'; @@ -98,6 +99,15 @@ export class VscodeTreeItem extends VscElement { private _path: number[] = []; + @state() + private _hasBranchIcon = false; + + @state() + private _hasBranchOpenedIcon = false; + + @state() + private _hasLeafIcon = false; + @consume({context: treeContext, subscribe: true}) private _treeContextState: TreeContext = { isShiftPressed: false, @@ -351,6 +361,24 @@ export class VscodeTreeItem extends VscElement { } } + private _handleIconSlotChange(ev: Event) { + const slot = ev.target as HTMLSlotElement; + const hasContent = slot.assignedElements().length > 0; + + switch (slot.name) { + case 'icon-branch': + this._hasBranchIcon = hasContent; + break; + case 'icon-branch-opened': + this._hasBranchOpenedIcon = hasContent; + break; + case 'icon-leaf': + this._hasLeafIcon = hasContent; + break; + default: + } + } + //#endregion override render(): TemplateResult { @@ -364,6 +392,11 @@ export class VscodeTreeItem extends VscElement { indentation += ARROW_CONTAINER_WIDTH; } + const hasVisibleIcon = + (this._hasBranchIcon && this.branch) || + (this._hasBranchOpenedIcon && this.branch && this.open) || + (this._hasLeafIcon && !this.branch); + const contentClasses = { content: true, active: this.active, @@ -376,6 +409,11 @@ export class VscodeTreeItem extends VscElement { 'highlighted-guide': this.highlightedGuides, }; + const iconContainerClasses = { + 'icon-container': true, + 'has-icon': hasVisibleIcon, + }; + return html`
` : nothing} -
+
${this.branch && !this.open - ? html`` + ? html`` : nothing} ${this.branch && this.open - ? html`` + ? html`` + : nothing} + ${!this.branch + ? html`` : nothing} - ${!this.branch ? html`` : nothing}
Date: Tue, 15 Jul 2025 00:29:19 +0200 Subject: [PATCH 15/17] Simplify the markup of the TreeItem --- .../vscode-tree-item.styles.ts | 49 +++---------------- src/vscode-tree-item/vscode-tree-item.ts | 25 +++------- 2 files changed, 13 insertions(+), 61 deletions(-) diff --git a/src/vscode-tree-item/vscode-tree-item.styles.ts b/src/vscode-tree-item/vscode-tree-item.styles.ts index 8f8f3ce1f..e6330a67b 100644 --- a/src/vscode-tree-item/vscode-tree-item.styles.ts +++ b/src/vscode-tree-item/vscode-tree-item.styles.ts @@ -18,11 +18,11 @@ const styles: CSSResultGroup = [ user-select: none; } - .wrapper { + .root { display: block; } - .content { + .wrapper { align-items: flex-start; display: flex; font-family: var(--vscode-font-family); @@ -32,12 +32,12 @@ const styles: CSSResultGroup = [ padding-right: 12px; } - .content:hover { + .wrapper:hover { background-color: var(--vscode-list-hoverBackground); color: var(--vscode-list-hoverForeground); } - :host([selected]) .content { + :host([selected]) .wrapper { color: var(--internal-selectionForeground); background-color: var(--internal-selectionBackground); } @@ -50,7 +50,7 @@ const styles: CSSResultGroup = [ outline: none; } - :host(:focus) .content.active { + :host(:focus) .wrapper.active { outline-color: var( --vscode-list-focusAndSelectionOutline, var(--vscode-list-focusOutline) @@ -121,50 +121,13 @@ const styles: CSSResultGroup = [ background-color: var(--vscode-tree-indentGuidesStroke); } - .text-content { + .content { line-height: 22px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } - .description { - font-size: 0.9em; - margin-left: 0.5em; - opacity: 0.95; - } - - .additional-content { - display: flex; - margin-left: auto; - } - - .decorations { - align-items: center; - display: flex; - height: 22px; - } - - .actions { - align-items: center; - display: none; - height: 22px; - } - - .content:hover .actions { - display: flex; - } - - .actions ::slotted(vscode-icon), - .actions ::slotted(vscode-badge) { - margin-left: 4px; - } - - .decorations ::slotted(vscode-icon), - .decorations ::slotted(vscode-badge) { - margin-left: 4px; - } - :host([branch]) ::slotted(vscode-tree-item) { display: none; } diff --git a/src/vscode-tree-item/vscode-tree-item.ts b/src/vscode-tree-item/vscode-tree-item.ts index 7977b90b2..5dae5b773 100644 --- a/src/vscode-tree-item/vscode-tree-item.ts +++ b/src/vscode-tree-item/vscode-tree-item.ts @@ -397,8 +397,8 @@ export class VscodeTreeItem extends VscElement { (this._hasBranchOpenedIcon && this.branch && this.open) || (this._hasLeafIcon && !this.branch); - const contentClasses = { - content: true, + const wrapperClasses = { + wrapper: true, active: this.active, }; @@ -414,9 +414,9 @@ export class VscodeTreeItem extends VscElement { 'has-icon': hasVisibleIcon, }; - return html`
+ return html`
` : nothing}
- ${this.branch && !this.open ? html`` : nothing}
-
- - -
-
-
- -
-
+
+
Date: Tue, 15 Jul 2025 01:17:32 +0200 Subject: [PATCH 16/17] Add demo pages --- dev/vscode-tree/hide-arrows.html | 78 + dev/vscode-tree/hide-guides-and-arrows.html | 78 + dev/vscode-tree/hide-guides.html | 78 + dev/vscode-tree/stress-test.html | 8404 +++++++++++++++++++ dev/vscode-tree/with-icons.html | 5583 ++++++++++++ 5 files changed, 14221 insertions(+) create mode 100644 dev/vscode-tree/hide-arrows.html create mode 100644 dev/vscode-tree/hide-guides-and-arrows.html create mode 100644 dev/vscode-tree/hide-guides.html create mode 100644 dev/vscode-tree/stress-test.html create mode 100644 dev/vscode-tree/with-icons.html diff --git a/dev/vscode-tree/hide-arrows.html b/dev/vscode-tree/hide-arrows.html new file mode 100644 index 000000000..6ed9d1122 --- /dev/null +++ b/dev/vscode-tree/hide-arrows.html @@ -0,0 +1,78 @@ + + + + + + VSCode Elements + + + + + + + +

Hide arrows

+
+ + + Home + + About + Overview + Administration + + Facts + History + Current Statistics + Awards + + + Campus Tours + For Prospective Students + For Alumni + For Visitors + + + + Admissions + Apply + + Tuition + Undergraduate + Graduate + Professional Schools + + Sign Up + Visit + Photo Tour + Connect + + + Academics + Colleges & Schools + Programs of Study + Honors Programs + Online Courses + Course Explorer + Register for Classes + Academic Calendar + Transcripts + + + +
+ + diff --git a/dev/vscode-tree/hide-guides-and-arrows.html b/dev/vscode-tree/hide-guides-and-arrows.html new file mode 100644 index 000000000..2ed49b8c9 --- /dev/null +++ b/dev/vscode-tree/hide-guides-and-arrows.html @@ -0,0 +1,78 @@ + + + + + + VSCode Elements + + + + + + + +

Hide guides and arrows

+
+ + + Home + + About + Overview + Administration + + Facts + History + Current Statistics + Awards + + + Campus Tours + For Prospective Students + For Alumni + For Visitors + + + + Admissions + Apply + + Tuition + Undergraduate + Graduate + Professional Schools + + Sign Up + Visit + Photo Tour + Connect + + + Academics + Colleges & Schools + Programs of Study + Honors Programs + Online Courses + Course Explorer + Register for Classes + Academic Calendar + Transcripts + + + +
+ + diff --git a/dev/vscode-tree/hide-guides.html b/dev/vscode-tree/hide-guides.html new file mode 100644 index 000000000..e6a812470 --- /dev/null +++ b/dev/vscode-tree/hide-guides.html @@ -0,0 +1,78 @@ + + + + + + VSCode Elements + + + + + + + +

Hide guides

+
+ + + Home + + About + Overview + Administration + + Facts + History + Current Statistics + Awards + + + Campus Tours + For Prospective Students + For Alumni + For Visitors + + + + Admissions + Apply + + Tuition + Undergraduate + Graduate + Professional Schools + + Sign Up + Visit + Photo Tour + Connect + + + Academics + Colleges & Schools + Programs of Study + Honors Programs + Online Courses + Course Explorer + Register for Classes + Academic Calendar + Transcripts + + + +
+ + diff --git a/dev/vscode-tree/stress-test.html b/dev/vscode-tree/stress-test.html new file mode 100644 index 000000000..3590f11ef --- /dev/null +++ b/dev/vscode-tree/stress-test.html @@ -0,0 +1,8404 @@ + + + + + + VSCode Elements + + + + + + + +

With icons

+
+ + + + + + + + + api + + + + components + + + + hooks + + + data.json + + + + auth.ts + + + + + + components + + + + admin + + + data.json + + + + + shared + + + index.ts + + + + style.css + + + + app.tsx + + + + data.json + + + + main.tsx + + + + data.json + + + + + + + models + + + + hooks + + + index.ts + + + + routes.ts + + + + app.tsx + + + + + + utils + + + index.ts + + + + config.ts + + + + + + components + + + index.ts + + + + app.tsx + + + + index.ts + + + + routes.ts + + + + auth.ts + + + + routes.ts + + + + + index.ts + + + + + + + config.ts + + + + + pages + + + app.tsx + + + + routes.ts + + + + index.ts + + + + + + assets + + + + assets + + + auth.ts + + + + + utils + + + + models + + + style.css + + + + app.tsx + + + + + + api + + + routes.ts + + + + routes.ts + + + + + + hooks + + + routes.ts + + + + app.tsx + + + + auth.ts + + + + data.json + + + + routes.ts + + + + + + pages + + + main.tsx + + + + main.tsx + + + + index.ts + + + + auth.ts + + + + config.ts + + + + + style.css + + + + + app.tsx + + + + + services + + + + assets + + + index.ts + + + + data.json + + + + routes.ts + + + + routes.ts + + + + index.ts + + + + index.ts + + + + + data.json + + + + data.json + + + + + + data.json + + + + + services + + + + assets + + + routes.ts + + + + + shared + + + style.css + + + + main.tsx + + + + auth.ts + + + + + + + models + + + + pages + + + style.css + + + + app.tsx + + + + style.css + + + + data.json + + + + data.json + + + + routes.ts + + + + + auth.ts + + + + style.css + + + + + shared + + + index.ts + + + + data.json + + + + main.tsx + + + + + + + services + + + data.json + + + + routes.ts + + + + + components + + + main.tsx + + + + index.ts + + + + routes.ts + + + + config.ts + + + + style.css + + + + style.css + + + + + + + pages + + + index.ts + + + + + components + + + index.ts + + + + routes.ts + + + + app.tsx + + + + + + pages + + + style.css + + + + app.tsx + + + + style.css + + + + style.css + + + + index.ts + + + + + + admin + + + main.tsx + + + + auth.ts + + + + config.ts + + + + main.tsx + + + + auth.ts + + + + routes.ts + + + + + + + admin + + + main.tsx + + + + + admin + + + index.ts + + + + config.ts + + + + config.ts + + + + style.css + + + + app.tsx + + + + index.ts + + + + + + pages + + + auth.ts + + + + auth.ts + + + + style.css + + + + app.tsx + + + + routes.ts + + + + data.json + + + + + + models + + + auth.ts + + + + config.ts + + + + + + pages + + + style.css + + + + style.css + + + + routes.ts + + + + style.css + + + + + style.css + + + + + + hooks + + + + assets + + + config.ts + + + + config.ts + + + + auth.ts + + + + app.tsx + + + + routes.ts + + + + + + assets + + + data.json + + + + data.json + + + + index.ts + + + + app.tsx + + + + + + + + + + admin + + + app.tsx + + + + + pages + + + + pages + + + routes.ts + + + + config.ts + + + + + components + + + + models + + + routes.ts + + + + main.tsx + + + + + + utils + + + auth.ts + + + + style.css + + + + + + admin + + + config.ts + + + + config.ts + + + + style.css + + + + main.tsx + + + + app.tsx + + + + style.css + + + + + app.tsx + + + + routes.ts + + + + style.css + + + + + + models + + + + utils + + + index.ts + + + + auth.ts + + + + + + assets + + + auth.ts + + + + app.tsx + + + + main.tsx + + + + index.ts + + + + auth.ts + + + + data.json + + + + + + models + + + main.tsx + + + + main.tsx + + + + routes.ts + + + + style.css + + + + main.tsx + + + + data.json + + + + + + assets + + + routes.ts + + + + style.css + + + + main.tsx + + + + auth.ts + + + + style.css + + + + + + auth.ts + + + + + + services + + + + api + + + + pages + + + style.css + + + + index.ts + + + + config.ts + + + + index.ts + + + + + + pages + + + main.tsx + + + + auth.ts + + + + main.tsx + + + + data.json + + + + data.json + + + + + + components + + + config.ts + + + + style.css + + + + app.tsx + + + + + + services + + + app.tsx + + + + index.ts + + + + app.tsx + + + + style.css + + + + style.css + + + + + + main.tsx + + + + + pages + + + + hooks + + + main.tsx + + + + index.ts + + + + auth.ts + + + + auth.ts + + + + + style.css + + + + + utils + + + index.ts + + + + index.ts + + + + app.tsx + + + + data.json + + + + data.json + + + + + + + style.css + + + + + + admin + + + + components + + + + models + + + config.ts + + + + + utils + + + config.ts + + + + routes.ts + + + + + + utils + + + routes.ts + + + + app.tsx + + + + auth.ts + + + + data.json + + + + style.css + + + + config.ts + + + + + index.ts + + + + + + api + + + routes.ts + + + + + admin + + + config.ts + + + + app.tsx + + + + + + assets + + + data.json + + + + auth.ts + + + + + + admin + + + app.tsx + + + + index.ts + + + + data.json + + + + config.ts + + + + auth.ts + + + + index.ts + + + + + + shared + + + data.json + + + + main.tsx + + + + index.ts + + + + data.json + + + + index.ts + + + + auth.ts + + + + + + api + + + app.tsx + + + + data.json + + + + index.ts + + + + index.ts + + + + data.json + + + + + + + components + + + auth.ts + + + + + utils + + + index.ts + + + + routes.ts + + + + app.tsx + + + + + + hooks + + + index.ts + + + + app.tsx + + + + config.ts + + + + auth.ts + + + + + + components + + + data.json + + + + routes.ts + + + + + + models + + + config.ts + + + + app.tsx + + + + + + api + + + auth.ts + + + + routes.ts + + + + + + + models + + + config.ts + + + + + models + + + routes.ts + + + + data.json + + + + auth.ts + + + + + auth.ts + + + + auth.ts + + + + + api + + + main.tsx + + + + main.tsx + + + + index.ts + + + + main.tsx + + + + app.tsx + + + + style.css + + + + + + auth.ts + + + + + + utils + + + + api + + + + services + + + routes.ts + + + + config.ts + + + + data.json + + + + + + hooks + + + config.ts + + + + main.tsx + + + + index.ts + + + + config.ts + + + + + + index.ts + + + + data.json + + + + data.json + + + + app.tsx + + + + + + api + + + + api + + + + components + + + index.ts + + + + routes.ts + + + + style.css + + + + auth.ts + + + + style.css + + + + routes.ts + + + + + main.tsx + + + + index.ts + + + + + + assets + + + + services + + + routes.ts + + + + app.tsx + + + + style.css + + + + data.json + + + + data.json + + + + + + hooks + + + app.tsx + + + + main.tsx + + + + app.tsx + + + + index.ts + + + + app.tsx + + + + app.tsx + + + + + config.ts + + + + + + assets + + + + assets + + + auth.ts + + + + style.css + + + + + + pages + + + config.ts + + + + routes.ts + + + + routes.ts + + + + + + utils + + + routes.ts + + + + data.json + + + + main.tsx + + + + config.ts + + + + app.tsx + + + + config.ts + + + + + + assets + + + index.ts + + + + app.tsx + + + + app.tsx + + + + auth.ts + + + + index.ts + + + + routes.ts + + + + + routes.ts + + + + + app.tsx + + + + + + admin + + + style.css + + + + config.ts + + + + + api + + + + shared + + + data.json + + + + style.css + + + + style.css + + + + routes.ts + + + + style.css + + + + + + services + + + index.ts + + + + data.json + + + + config.ts + + + + index.ts + + + + app.tsx + + + + app.tsx + + + + + + pages + + + config.ts + + + + app.tsx + + + + style.css + + + + data.json + + + + auth.ts + + + + + app.tsx + + + + + admin + + + auth.ts + + + + config.ts + + + + auth.ts + + + + config.ts + + + + style.css + + + + + + models + + + config.ts + + + + routes.ts + + + + data.json + + + + style.css + + + + config.ts + + + + + + app.tsx + + + + + api + + + config.ts + + + + + shared + + + style.css + + + + auth.ts + + + + + config.ts + + + + + api + + + data.json + + + + auth.ts + + + + app.tsx + + + + style.css + + + + + + assets + + + config.ts + + + + app.tsx + + + + auth.ts + + + + style.css + + + + + + + + services + + + routes.ts + + + + + components + + + + hooks + + + main.tsx + + + + app.tsx + + + + data.json + + + + + + shared + + + index.ts + + + + style.css + + + + + + shared + + + index.ts + + + + style.css + + + + routes.ts + + + + + index.ts + + + + + + + + shared + + + + shared + + + + utils + + + + hooks + + + config.ts + + + + app.tsx + + + + auth.ts + + + + config.ts + + + + app.tsx + + + + + + hooks + + + data.json + + + + main.tsx + + + + main.tsx + + + + auth.ts + + + + main.tsx + + + + + + routes.ts + + + + + api + + + + shared + + + auth.ts + + + + data.json + + + + app.tsx + + + + + + shared + + + config.ts + + + + routes.ts + + + + routes.ts + + + + + routes.ts + + + + + assets + + + app.tsx + + + + index.ts + + + + + auth.ts + + + + + index.ts + + + + + hooks + + + + admin + + + auth.ts + + + + index.ts + + + + routes.ts + + + + style.css + + + + main.tsx + + + + + auth.ts + + + + index.ts + + + + + utils + + + config.ts + + + + config.ts + + + + + + services + + + data.json + + + + index.ts + + + + + main.tsx + + + + + main.tsx + + + + + + assets + + + app.tsx + + + + + hooks + + + + utils + + + app.tsx + + + + config.ts + + + + main.tsx + + + + routes.ts + + + + main.tsx + + + + + auth.ts + + + + main.tsx + + + + + pages + + + index.ts + + + + auth.ts + + + + app.tsx + + + + + auth.ts + + + + + hooks + + + style.css + + + + config.ts + + + + + + + assets + + + + api + + + routes.ts + + + + app.tsx + + + + data.json + + + + main.tsx + + + + config.ts + + + + + + utils + + + app.tsx + + + + main.tsx + + + + data.json + + + + index.ts + + + + main.tsx + + + + + + hooks + + + app.tsx + + + + app.tsx + + + + + + + components + + + index.ts + + + + + assets + + + auth.ts + + + + auth.ts + + + + + index.ts + + + + + utils + + + index.ts + + + + data.json + + + + auth.ts + + + + index.ts + + + + + + + + hooks + + + data.json + + + + main.tsx + + + + app.tsx + + + + + utils + + + + services + + + index.ts + + + + auth.ts + + + + + + shared + + + config.ts + + + + index.ts + + + + routes.ts + + + + routes.ts + + + + + style.css + + + + + components + + + main.tsx + + + + style.css + + + + config.ts + + + + main.tsx + + + + + app.tsx + + + + + + pages + + + + utils + + + routes.ts + + + + style.css + + + + auth.ts + + + + config.ts + + + + + + assets + + + style.css + + + + app.tsx + + + + auth.ts + + + + main.tsx + + + + app.tsx + + + + config.ts + + + + + + components + + + app.tsx + + + + style.css + + + + style.css + + + + app.tsx + + + + routes.ts + + + + data.json + + + + + + + hooks + + + + services + + + style.css + + + + style.css + + + + + + hooks + + + index.ts + + + + config.ts + + + + index.ts + + + + data.json + + + + data.json + + + + routes.ts + + + + + + utils + + + app.tsx + + + + auth.ts + + + + auth.ts + + + + config.ts + + + + config.ts + + + + + + + style.css + + + + + data.json + + + + index.ts + + + + + + admin + + + main.tsx + + + + style.css + + + + style.css + + + + + auth.ts + + + + + components + + + + pages + + + data.json + + + + style.css + + + + + services + + + + admin + + + + models + + + index.ts + + + + style.css + + + + + + assets + + + index.ts + + + + auth.ts + + + + app.tsx + + + + + + app.tsx + + + + + services + + + + assets + + + data.json + + + + style.css + + + + config.ts + + + + routes.ts + + + + style.css + + + + + + assets + + + routes.ts + + + + app.tsx + + + + + + + api + + + auth.ts + + + + + admin + + + style.css + + + + config.ts + + + + app.tsx + + + + app.tsx + + + + routes.ts + + + + + + shared + + + app.tsx + + + + routes.ts + + + + routes.ts + + + + auth.ts + + + + app.tsx + + + + + + shared + + + app.tsx + + + + config.ts + + + + data.json + + + + auth.ts + + + + + + api + + + app.tsx + + + + data.json + + + + config.ts + + + + + + app.tsx + + + + + + admin + + + + components + + + + assets + + + main.tsx + + + + data.json + + + + app.tsx + + + + config.ts + + + + + app.tsx + + + + + + api + + + data.json + + + + auth.ts + + + + + shared + + + app.tsx + + + + index.ts + + + + routes.ts + + + + style.css + + + + app.tsx + + + + + + shared + + + routes.ts + + + + routes.ts + + + + + + + models + + + + components + + + app.tsx + + + + routes.ts + + + + auth.ts + + + + style.css + + + + + style.css + + + + auth.ts + + + + app.tsx + + + + + components + + + index.ts + + + + app.tsx + + + + data.json + + + + + + config.ts + + + + + + services + + + + models + + + app.tsx + + + + + shared + + + config.ts + + + + style.css + + + + routes.ts + + + + main.tsx + + + + main.tsx + + + + + main.tsx + + + + + shared + + + style.css + + + + main.tsx + + + + style.css + + + + app.tsx + + + + + + models + + + index.ts + + + + main.tsx + + + + config.ts + + + + auth.ts + + + + + style.css + + + + + + utils + + + + hooks + + + main.tsx + + + + main.tsx + + + + routes.ts + + + + + + services + + + style.css + + + + style.css + + + + main.tsx + + + + app.tsx + + + + + style.css + + + + + + hooks + + + + hooks + + + style.css + + + + auth.ts + + + + + + admin + + + app.tsx + + + + app.tsx + + + + style.css + + + + + + shared + + + routes.ts + + + + app.tsx + + + + app.tsx + + + + data.json + + + + auth.ts + + + + config.ts + + + + + + admin + + + auth.ts + + + + routes.ts + + + + main.tsx + + + + auth.ts + + + + + config.ts + + + + app.tsx + + + + + config.ts + + + + + api + + + index.ts + + + + + models + + + index.ts + + + + app.tsx + + + + + + api + + + auth.ts + + + + app.tsx + + + + style.css + + + + config.ts + + + + app.tsx + + + + app.tsx + + + + + config.ts + + + + config.ts + + + + data.json + + + + + + + models + + + + services + + + config.ts + + + + main.tsx + + + + + utils + + + main.tsx + + + + main.tsx + + + + data.json + + + + index.ts + + + + index.ts + + + + app.tsx + + + + + + components + + + index.ts + + + + style.css + + + + + + pages + + + config.ts + + + + auth.ts + + + + auth.ts + + + + app.tsx + + + + + + + utils + + + style.css + + + + + models + + + routes.ts + + + + main.tsx + + + + + main.tsx + + + + app.tsx + + + + + services + + + index.ts + + + + auth.ts + + + + index.ts + + + + data.json + + + + index.ts + + + + config.ts + + + + + + + components + + + main.tsx + + + + + utils + + + style.css + + + + app.tsx + + + + style.css + + + + style.css + + + + style.css + + + + data.json + + + + + + app.tsx + + + + + + + models + + + style.css + + + + + hooks + + + + assets + + + + hooks + + + auth.ts + + + + auth.ts + + + + style.css + + + + data.json + + + + auth.ts + + + + auth.ts + + + + + + services + + + app.tsx + + + + index.ts + + + + app.tsx + + + + data.json + + + + + + utils + + + auth.ts + + + + index.ts + + + + main.tsx + + + + app.tsx + + + + app.tsx + + + + + + shared + + + main.tsx + + + + auth.ts + + + + config.ts + + + + auth.ts + + + + + + index.ts + + + + + components + + + routes.ts + + + + data.json + + + + + models + + + index.ts + + + + app.tsx + + + + index.ts + + + + main.tsx + + + + index.ts + + + + + auth.ts + + + + + + + assets + + + + components + + + data.json + + + + + services + + + auth.ts + + + + style.css + + + + routes.ts + + + + main.tsx + + + + + routes.ts + + + + style.css + + + + + shared + + + routes.ts + + + + style.css + + + + data.json + + + + main.tsx + + + + + style.css + + + + + + shared + + + + services + + + config.ts + + + + routes.ts + + + + main.tsx + + + + data.json + + + + routes.ts + + + + + index.ts + + + + index.ts + + + + config.ts + + + + + + pages + + + + admin + + + auth.ts + + + + routes.ts + + + + style.css + + + + data.json + + + + index.ts + + + + + + utils + + + routes.ts + + + + routes.ts + + + + + + shared + + + index.ts + + + + index.ts + + + + + + shared + + + style.css + + + + main.tsx + + + + app.tsx + + + + config.ts + + + + + + pages + + + data.json + + + + routes.ts + + + + index.ts + + + + app.tsx + + + + + + + config.ts + + + + + pages + + + + shared + + + main.tsx + + + + data.json + + + + + utils + + + auth.ts + + + + auth.ts + + + + auth.ts + + + + index.ts + + + + config.ts + + + + + + style.css + + + + + models + + + + hooks + + + app.tsx + + + + routes.ts + + + + app.tsx + + + + + + services + + + routes.ts + + + + app.tsx + + + + app.tsx + + + + index.ts + + + + main.tsx + + + + + + pages + + + routes.ts + + + + routes.ts + + + + app.tsx + + + + + + components + + + main.tsx + + + + config.ts + + + + style.css + + + + + + api + + + routes.ts + + + + app.tsx + + + + style.css + + + + + auth.ts + + + + + + services + + + + utils + + + style.css + + + + style.css + + + + app.tsx + + + + app.tsx + + + + index.ts + + + + + auth.ts + + + + + + shared + + + + assets + + + main.tsx + + + + data.json + + + + data.json + + + + auth.ts + + + + + + services + + + config.ts + + + + main.tsx + + + + routes.ts + + + + + config.ts + + + + + utils + + + index.ts + + + + style.css + + + + app.tsx + + + + + + + utils + + + + api + + + index.ts + + + + data.json + + + + + + hooks + + + main.tsx + + + + config.ts + + + + + + components + + + auth.ts + + + + style.css + + + + style.css + + + + + + hooks + + + config.ts + + + + app.tsx + + + + config.ts + + + + + + pages + + + routes.ts + + + + style.css + + + + main.tsx + + + + app.tsx + + + + data.json + + + + + + + + app.tsx + + + + index.ts + + + + + utils + + + main.tsx + + + + auth.ts + + + + + hooks + + + data.json + + + + data.json + + + + + assets + + + + hooks + + + index.ts + + + + auth.ts + + + + data.json + + + + auth.ts + + + + auth.ts + + + + index.ts + + + + + + admin + + + main.tsx + + + + app.tsx + + + + index.ts + + + + auth.ts + + + + app.tsx + + + + + + pages + + + data.json + + + + routes.ts + + + + routes.ts + + + + data.json + + + + index.ts + + + + auth.ts + + + + + + assets + + + style.css + + + + auth.ts + + + + routes.ts + + + + routes.ts + + + + + + admin + + + app.tsx + + + + auth.ts + + + + routes.ts + + + + app.tsx + + + + config.ts + + + + routes.ts + + + + + + pages + + + index.ts + + + + main.tsx + + + + config.ts + + + + routes.ts + + + + routes.ts + + + + + + + api + + + routes.ts + + + + + hooks + + + auth.ts + + + + data.json + + + + routes.ts + + + + style.css + + + + app.tsx + + + + + + shared + + + data.json + + + + app.tsx + + + + auth.ts + + + + + + admin + + + routes.ts + + + + auth.ts + + + + index.ts + + + + + + + pages + + + + hooks + + + auth.ts + + + + config.ts + + + + data.json + + + + auth.ts + + + + index.ts + + + + routes.ts + + + + + + hooks + + + index.ts + + + + data.json + + + + data.json + + + + + + api + + + routes.ts + + + + routes.ts + + + + + + shared + + + main.tsx + + + + data.json + + + + app.tsx + + + + index.ts + + + + index.ts + + + + style.css + + + + + + + + assets + + + + admin + + + + assets + + + data.json + + + + data.json + + + + app.tsx + + + + data.json + + + + main.tsx + + + + index.ts + + + + + + hooks + + + auth.ts + + + + routes.ts + + + + + + models + + + auth.ts + + + + main.tsx + + + + data.json + + + + + auth.ts + + + + + + admin + + + + hooks + + + index.ts + + + + index.ts + + + + + config.ts + + + + + models + + + index.ts + + + + style.css + + + + app.tsx + + + + style.css + + + + style.css + + + + + data.json + + + + + hooks + + + index.ts + + + + auth.ts + + + + auth.ts + + + + + + shared + + + app.tsx + + + + main.tsx + + + + style.css + + + + + + + utils + + + + shared + + + main.tsx + + + + main.tsx + + + + routes.ts + + + + + + pages + + + index.ts + + + + main.tsx + + + + auth.ts + + + + + main.tsx + + + + + pages + + + config.ts + + + + auth.ts + + + + + + + style.css + + + + + + + + +
+ + diff --git a/dev/vscode-tree/with-icons.html b/dev/vscode-tree/with-icons.html new file mode 100644 index 000000000..194f600f8 --- /dev/null +++ b/dev/vscode-tree/with-icons.html @@ -0,0 +1,5583 @@ + + + + + + VSCode Elements + + + + + + + +

With icons

+
+ + + + + + api + + + + components + + + + hooks + + + data.json + + + + auth.ts + + + + + + components + + + + admin + + + data.json + + + + + shared + + + index.ts + + + + style.css + + + + app.tsx + + + + data.json + + + + main.tsx + + + + data.json + + + + + + + models + + + + hooks + + + index.ts + + + + routes.ts + + + + app.tsx + + + + + + utils + + + index.ts + + + + config.ts + + + + + + components + + + index.ts + + + + app.tsx + + + + index.ts + + + + routes.ts + + + + auth.ts + + + + routes.ts + + + + + index.ts + + + + + + + config.ts + + + + + pages + + + app.tsx + + + + routes.ts + + + + index.ts + + + + + + assets + + + + assets + + + auth.ts + + + + + utils + + + + models + + + style.css + + + + app.tsx + + + + + + api + + + routes.ts + + + + routes.ts + + + + + + hooks + + + routes.ts + + + + app.tsx + + + + auth.ts + + + + data.json + + + + routes.ts + + + + + + pages + + + main.tsx + + + + main.tsx + + + + index.ts + + + + auth.ts + + + + config.ts + + + + + style.css + + + + + app.tsx + + + + + services + + + + assets + + + index.ts + + + + data.json + + + + routes.ts + + + + routes.ts + + + + index.ts + + + + index.ts + + + + + data.json + + + + data.json + + + + + + data.json + + + + + services + + + + assets + + + routes.ts + + + + + shared + + + style.css + + + + main.tsx + + + + auth.ts + + + + + + + models + + + + pages + + + style.css + + + + app.tsx + + + + style.css + + + + data.json + + + + data.json + + + + routes.ts + + + + + auth.ts + + + + style.css + + + + + shared + + + index.ts + + + + data.json + + + + main.tsx + + + + + + + services + + + data.json + + + + routes.ts + + + + + components + + + main.tsx + + + + index.ts + + + + routes.ts + + + + config.ts + + + + style.css + + + + style.css + + + + + + + pages + + + index.ts + + + + + components + + + index.ts + + + + routes.ts + + + + app.tsx + + + + + + pages + + + style.css + + + + app.tsx + + + + style.css + + + + style.css + + + + index.ts + + + + + + admin + + + main.tsx + + + + auth.ts + + + + config.ts + + + + main.tsx + + + + auth.ts + + + + routes.ts + + + + + + + admin + + + main.tsx + + + + + admin + + + index.ts + + + + config.ts + + + + config.ts + + + + style.css + + + + app.tsx + + + + index.ts + + + + + + pages + + + auth.ts + + + + auth.ts + + + + style.css + + + + app.tsx + + + + routes.ts + + + + data.json + + + + + + models + + + auth.ts + + + + config.ts + + + + + + pages + + + style.css + + + + style.css + + + + routes.ts + + + + style.css + + + + + style.css + + + + + + hooks + + + + assets + + + config.ts + + + + config.ts + + + + auth.ts + + + + app.tsx + + + + routes.ts + + + + + + assets + + + data.json + + + + data.json + + + + index.ts + + + + app.tsx + + + + + + + + + + admin + + + app.tsx + + + + + pages + + + + pages + + + routes.ts + + + + config.ts + + + + + components + + + + models + + + routes.ts + + + + main.tsx + + + + + + utils + + + auth.ts + + + + style.css + + + + + + admin + + + config.ts + + + + config.ts + + + + style.css + + + + main.tsx + + + + app.tsx + + + + style.css + + + + + app.tsx + + + + routes.ts + + + + style.css + + + + + + models + + + + utils + + + index.ts + + + + auth.ts + + + + + + assets + + + auth.ts + + + + app.tsx + + + + main.tsx + + + + index.ts + + + + auth.ts + + + + data.json + + + + + + models + + + main.tsx + + + + main.tsx + + + + routes.ts + + + + style.css + + + + main.tsx + + + + data.json + + + + + + assets + + + routes.ts + + + + style.css + + + + main.tsx + + + + auth.ts + + + + style.css + + + + + + auth.ts + + + + + + services + + + + api + + + + pages + + + style.css + + + + index.ts + + + + config.ts + + + + index.ts + + + + + + pages + + + main.tsx + + + + auth.ts + + + + main.tsx + + + + data.json + + + + data.json + + + + + + components + + + config.ts + + + + style.css + + + + app.tsx + + + + + + services + + + app.tsx + + + + index.ts + + + + app.tsx + + + + style.css + + + + style.css + + + + + + main.tsx + + + + + pages + + + + hooks + + + main.tsx + + + + index.ts + + + + auth.ts + + + + auth.ts + + + + + style.css + + + + + utils + + + index.ts + + + + index.ts + + + + app.tsx + + + + data.json + + + + data.json + + + + + + + style.css + + + + + + admin + + + + components + + + + models + + + config.ts + + + + + utils + + + config.ts + + + + routes.ts + + + + + + utils + + + routes.ts + + + + app.tsx + + + + auth.ts + + + + data.json + + + + style.css + + + + config.ts + + + + + index.ts + + + + + + api + + + routes.ts + + + + + admin + + + config.ts + + + + app.tsx + + + + + + assets + + + data.json + + + + auth.ts + + + + + + admin + + + app.tsx + + + + index.ts + + + + data.json + + + + config.ts + + + + auth.ts + + + + index.ts + + + + + + shared + + + data.json + + + + main.tsx + + + + index.ts + + + + data.json + + + + index.ts + + + + auth.ts + + + + + + api + + + app.tsx + + + + data.json + + + + index.ts + + + + index.ts + + + + data.json + + + + + + + components + + + auth.ts + + + + + utils + + + index.ts + + + + routes.ts + + + + app.tsx + + + + + + hooks + + + index.ts + + + + app.tsx + + + + config.ts + + + + auth.ts + + + + + + components + + + data.json + + + + routes.ts + + + + + + models + + + config.ts + + + + app.tsx + + + + + + api + + + auth.ts + + + + routes.ts + + + + + + + models + + + config.ts + + + + + models + + + routes.ts + + + + data.json + + + + auth.ts + + + + + auth.ts + + + + auth.ts + + + + + api + + + main.tsx + + + + main.tsx + + + + index.ts + + + + main.tsx + + + + app.tsx + + + + style.css + + + + + + auth.ts + + + + + + utils + + + + api + + + + services + + + routes.ts + + + + config.ts + + + + data.json + + + + + + hooks + + + config.ts + + + + main.tsx + + + + index.ts + + + + config.ts + + + + + + index.ts + + + + data.json + + + + data.json + + + + app.tsx + + + + + + api + + + + api + + + + components + + + index.ts + + + + routes.ts + + + + style.css + + + + auth.ts + + + + style.css + + + + routes.ts + + + + + main.tsx + + + + index.ts + + + + + + assets + + + + services + + + routes.ts + + + + app.tsx + + + + style.css + + + + data.json + + + + data.json + + + + + + hooks + + + app.tsx + + + + main.tsx + + + + app.tsx + + + + index.ts + + + + app.tsx + + + + app.tsx + + + + + config.ts + + + + + + assets + + + + assets + + + auth.ts + + + + style.css + + + + + + pages + + + config.ts + + + + routes.ts + + + + routes.ts + + + + + + utils + + + routes.ts + + + + data.json + + + + main.tsx + + + + config.ts + + + + app.tsx + + + + config.ts + + + + + + assets + + + index.ts + + + + app.tsx + + + + app.tsx + + + + auth.ts + + + + index.ts + + + + routes.ts + + + + + routes.ts + + + + + app.tsx + + + + + + admin + + + style.css + + + + config.ts + + + + + api + + + + shared + + + data.json + + + + style.css + + + + style.css + + + + routes.ts + + + + style.css + + + + + + services + + + index.ts + + + + data.json + + + + config.ts + + + + index.ts + + + + app.tsx + + + + app.tsx + + + + + + pages + + + config.ts + + + + app.tsx + + + + style.css + + + + data.json + + + + auth.ts + + + + + app.tsx + + + + + admin + + + auth.ts + + + + config.ts + + + + auth.ts + + + + config.ts + + + + style.css + + + + + + models + + + config.ts + + + + routes.ts + + + + data.json + + + + style.css + + + + config.ts + + + + + + app.tsx + + + + + api + + + config.ts + + + + + shared + + + style.css + + + + auth.ts + + + + + config.ts + + + + + api + + + data.json + + + + auth.ts + + + + app.tsx + + + + style.css + + + + + + assets + + + config.ts + + + + app.tsx + + + + auth.ts + + + + style.css + + + + + + + + services + + + routes.ts + + + + + components + + + + hooks + + + main.tsx + + + + app.tsx + + + + data.json + + + + + + shared + + + index.ts + + + + style.css + + + + + + shared + + + index.ts + + + + style.css + + + + routes.ts + + + + + index.ts + + + + + + + + shared + + + + shared + + + + utils + + + + hooks + + + config.ts + + + + app.tsx + + + + auth.ts + + + + config.ts + + + + app.tsx + + + + + + hooks + + + data.json + + + + main.tsx + + + + main.tsx + + + + auth.ts + + + + main.tsx + + + + + + routes.ts + + + + + api + + + + shared + + + auth.ts + + + + data.json + + + + app.tsx + + + + + + shared + + + config.ts + + + + routes.ts + + + + routes.ts + + + + + routes.ts + + + + + assets + + + app.tsx + + + + index.ts + + + + + auth.ts + + + + + index.ts + + + + + hooks + + + + admin + + + auth.ts + + + + index.ts + + + + routes.ts + + + + style.css + + + + main.tsx + + + + + auth.ts + + + + index.ts + + + + + utils + + + config.ts + + + + config.ts + + + + + + services + + + data.json + + + + index.ts + + + + + main.tsx + + + + + main.tsx + + + + + + assets + + + app.tsx + + + + + hooks + + + + utils + + + app.tsx + + + + config.ts + + + + main.tsx + + + + routes.ts + + + + main.tsx + + + + + auth.ts + + + + main.tsx + + + + + pages + + + index.ts + + + + auth.ts + + + + app.tsx + + + + + auth.ts + + + + + hooks + + + style.css + + + + config.ts + + + + + + + assets + + + + api + + + routes.ts + + + + app.tsx + + + + data.json + + + + main.tsx + + + + config.ts + + + + + + utils + + + app.tsx + + + + main.tsx + + + + data.json + + + + index.ts + + + + main.tsx + + + + + + hooks + + + app.tsx + + + + app.tsx + + + + + + + components + + + index.ts + + + + + assets + + + auth.ts + + + + auth.ts + + + + + index.ts + + + + + utils + + + index.ts + + + + data.json + + + + auth.ts + + + + index.ts + + + + + + + + hooks + + + data.json + + + + main.tsx + + + + app.tsx + + + + + utils + + + + services + + + index.ts + + + + auth.ts + + + + + + shared + + + config.ts + + + + index.ts + + + + routes.ts + + + + routes.ts + + + + + style.css + + + + + components + + + main.tsx + + + + style.css + + + + config.ts + + + + main.tsx + + + + + app.tsx + + + + + + pages + + + + utils + + + routes.ts + + + + style.css + + + + auth.ts + + + + config.ts + + + + + + assets + + + style.css + + + + app.tsx + + + + auth.ts + + + + main.tsx + + + + app.tsx + + + + config.ts + + + + + + components + + + app.tsx + + + + style.css + + + + style.css + + + + app.tsx + + + + routes.ts + + + + data.json + + + + + + + hooks + + + + services + + + style.css + + + + style.css + + + + + + hooks + + + index.ts + + + + config.ts + + + + index.ts + + + + data.json + + + + data.json + + + + routes.ts + + + + + + utils + + + app.tsx + + + + auth.ts + + + + auth.ts + + + + config.ts + + + + config.ts + + + + + + + style.css + + + + + data.json + + + + index.ts + + + + + + admin + + + main.tsx + + + + style.css + + + + style.css + + + + + auth.ts + + + + + components + + + + pages + + + data.json + + + + style.css + + + + + services + + + + admin + + + + models + + + index.ts + + + + style.css + + + + + + assets + + + index.ts + + + + auth.ts + + + + app.tsx + + + + + + app.tsx + + + + + services + + + + assets + + + data.json + + + + style.css + + + + config.ts + + + + routes.ts + + + + style.css + + + + + + assets + + + routes.ts + + + + app.tsx + + + + + + + api + + + auth.ts + + + + + admin + + + style.css + + + + config.ts + + + + app.tsx + + + + app.tsx + + + + routes.ts + + + + + + shared + + + app.tsx + + + + routes.ts + + + + routes.ts + + + + auth.ts + + + + app.tsx + + + + + + shared + + + app.tsx + + + + config.ts + + + + data.json + + + + auth.ts + + + + + + api + + + app.tsx + + + + data.json + + + + config.ts + + + + + + app.tsx + + + + + + admin + + + + components + + + + assets + + + main.tsx + + + + data.json + + + + app.tsx + + + + config.ts + + + + + app.tsx + + + + + + api + + + data.json + + + + auth.ts + + + + + shared + + + app.tsx + + + + index.ts + + + + routes.ts + + + + style.css + + + + app.tsx + + + + + + shared + + + routes.ts + + + + routes.ts + + + + + + + models + + + + components + + + app.tsx + + + + routes.ts + + + + auth.ts + + + + style.css + + + + + style.css + + + + auth.ts + + + + app.tsx + + + + + components + + + index.ts + + + + app.tsx + + + + data.json + + + + + + config.ts + + + + + + services + + + + models + + + app.tsx + + + + + shared + + + config.ts + + + + style.css + + + + routes.ts + + + + main.tsx + + + + main.tsx + + + + + main.tsx + + + + + shared + + + style.css + + + + main.tsx + + + + style.css + + + + app.tsx + + + + + + models + + + index.ts + + + + main.tsx + + + + config.ts + + + + auth.ts + + + + + style.css + + + + + + utils + + + + hooks + + + main.tsx + + + + main.tsx + + + + routes.ts + + + + + + services + + + style.css + + + + style.css + + + + main.tsx + + + + app.tsx + + + + + style.css + + + + + + hooks + + + + hooks + + + style.css + + + + auth.ts + + + + + + admin + + + app.tsx + + + + app.tsx + + + + style.css + + + + + + shared + + + routes.ts + + + + app.tsx + + + + app.tsx + + + + data.json + + + + auth.ts + + + + config.ts + + + + + + admin + + + auth.ts + + + + routes.ts + + + + main.tsx + + + + auth.ts + + + + + config.ts + + + + app.tsx + + + + + config.ts + + + + + api + + + index.ts + + + + + models + + + index.ts + + + + app.tsx + + + + + + api + + + auth.ts + + + + app.tsx + + + + style.css + + + + config.ts + + + + app.tsx + + + + app.tsx + + + + + config.ts + + + + config.ts + + + + data.json + + + + + + + models + + + + services + + + config.ts + + + + main.tsx + + + + + utils + + + main.tsx + + + + main.tsx + + + + data.json + + + + index.ts + + + + index.ts + + + + app.tsx + + + + + + components + + + index.ts + + + + style.css + + + + + + pages + + + config.ts + + + + auth.ts + + + + auth.ts + + + + app.tsx + + + + + + + utils + + + style.css + + + + + models + + + routes.ts + + + + main.tsx + + + + + main.tsx + + + + app.tsx + + + + + services + + + index.ts + + + + auth.ts + + + + index.ts + + + + data.json + + + + index.ts + + + + config.ts + + + + + + + components + + + main.tsx + + + + + utils + + + style.css + + + + app.tsx + + + + style.css + + + + style.css + + + + style.css + + + + data.json + + + + + + app.tsx + + + + + + + models + + + style.css + + + + + hooks + + + + assets + + + + hooks + + + auth.ts + + + + auth.ts + + + + style.css + + + + data.json + + + + auth.ts + + + + auth.ts + + + + + + services + + + app.tsx + + + + index.ts + + + + app.tsx + + + + data.json + + + + + + utils + + + auth.ts + + + + index.ts + + + + main.tsx + + + + app.tsx + + + + app.tsx + + + + + + shared + + + main.tsx + + + + auth.ts + + + + config.ts + + + + auth.ts + + + + + + index.ts + + + + + components + + + routes.ts + + + + data.json + + + + + models + + + index.ts + + + + app.tsx + + + + index.ts + + + + main.tsx + + + + index.ts + + + + + auth.ts + + + + + + + assets + + + + components + + + data.json + + + + + services + + + auth.ts + + + + style.css + + + + routes.ts + + + + main.tsx + + + + + routes.ts + + + + style.css + + + + + shared + + + routes.ts + + + + style.css + + + + data.json + + + + main.tsx + + + + + style.css + + + + + + shared + + + + services + + + config.ts + + + + routes.ts + + + + main.tsx + + + + data.json + + + + routes.ts + + + + + index.ts + + + + index.ts + + + + config.ts + + + + + + pages + + + + admin + + + auth.ts + + + + routes.ts + + + + style.css + + + + data.json + + + + index.ts + + + + + + utils + + + routes.ts + + + + routes.ts + + + + + + shared + + + index.ts + + + + index.ts + + + + + + shared + + + style.css + + + + main.tsx + + + + app.tsx + + + + config.ts + + + + + + pages + + + data.json + + + + routes.ts + + + + index.ts + + + + app.tsx + + + + + + + config.ts + + + + + pages + + + + shared + + + main.tsx + + + + data.json + + + + + utils + + + auth.ts + + + + auth.ts + + + + auth.ts + + + + index.ts + + + + config.ts + + + + + + style.css + + + + + models + + + + hooks + + + app.tsx + + + + routes.ts + + + + app.tsx + + + + + + services + + + routes.ts + + + + app.tsx + + + + app.tsx + + + + index.ts + + + + main.tsx + + + + + + pages + + + routes.ts + + + + routes.ts + + + + app.tsx + + + + + + components + + + main.tsx + + + + config.ts + + + + style.css + + + + + + api + + + routes.ts + + + + app.tsx + + + + style.css + + + + + auth.ts + + + + + + services + + + + utils + + + style.css + + + + style.css + + + + app.tsx + + + + app.tsx + + + + index.ts + + + + + auth.ts + + + + + + shared + + + + assets + + + main.tsx + + + + data.json + + + + data.json + + + + auth.ts + + + + + + services + + + config.ts + + + + main.tsx + + + + routes.ts + + + + + config.ts + + + + + utils + + + index.ts + + + + style.css + + + + app.tsx + + + + + + + utils + + + + api + + + index.ts + + + + data.json + + + + + + hooks + + + main.tsx + + + + config.ts + + + + + + components + + + auth.ts + + + + style.css + + + + style.css + + + + + + hooks + + + config.ts + + + + app.tsx + + + + config.ts + + + + + + pages + + + routes.ts + + + + style.css + + + + main.tsx + + + + app.tsx + + + + data.json + + + + + + + + app.tsx + + + + index.ts + + + + + utils + + + main.tsx + + + + auth.ts + + + + + hooks + + + data.json + + + + data.json + + + + + assets + + + + hooks + + + index.ts + + + + auth.ts + + + + data.json + + + + auth.ts + + + + auth.ts + + + + index.ts + + + + + + admin + + + main.tsx + + + + app.tsx + + + + index.ts + + + + auth.ts + + + + app.tsx + + + + + + pages + + + data.json + + + + routes.ts + + + + routes.ts + + + + data.json + + + + index.ts + + + + auth.ts + + + + + + assets + + + style.css + + + + auth.ts + + + + routes.ts + + + + routes.ts + + + + + + admin + + + app.tsx + + + + auth.ts + + + + routes.ts + + + + app.tsx + + + + config.ts + + + + routes.ts + + + + + + pages + + + index.ts + + + + main.tsx + + + + config.ts + + + + routes.ts + + + + routes.ts + + + + + + + api + + + routes.ts + + + + + hooks + + + auth.ts + + + + data.json + + + + routes.ts + + + + style.css + + + + app.tsx + + + + + + shared + + + data.json + + + + app.tsx + + + + auth.ts + + + + + + admin + + + routes.ts + + + + auth.ts + + + + index.ts + + + + + + + pages + + + + hooks + + + auth.ts + + + + config.ts + + + + data.json + + + + auth.ts + + + + index.ts + + + + routes.ts + + + + + + hooks + + + index.ts + + + + data.json + + + + data.json + + + + + + api + + + routes.ts + + + + routes.ts + + + + + + shared + + + main.tsx + + + + data.json + + + + app.tsx + + + + index.ts + + + + index.ts + + + + style.css + + + + + + + + assets + + + + admin + + + + assets + + + data.json + + + + data.json + + + + app.tsx + + + + data.json + + + + main.tsx + + + + index.ts + + + + + + hooks + + + auth.ts + + + + routes.ts + + + + + + models + + + auth.ts + + + + main.tsx + + + + data.json + + + + + auth.ts + + + + + + admin + + + + hooks + + + index.ts + + + + index.ts + + + + + config.ts + + + + + models + + + index.ts + + + + style.css + + + + app.tsx + + + + style.css + + + + style.css + + + + + data.json + + + + + hooks + + + index.ts + + + + auth.ts + + + + auth.ts + + + + + + shared + + + app.tsx + + + + main.tsx + + + + style.css + + + + + + + utils + + + + shared + + + main.tsx + + + + main.tsx + + + + routes.ts + + + + + + pages + + + index.ts + + + + main.tsx + + + + auth.ts + + + + + main.tsx + + + + + pages + + + config.ts + + + + auth.ts + + + + + + + style.css + + + + + +
+ + From e713b4e29605ed5d2f151656bed3ef0b8607a5a0 Mon Sep 17 00:00:00 2001 From: bendera Date: Tue, 15 Jul 2025 23:38:26 +0200 Subject: [PATCH 17/17] Prettier fix --- dev/vscode-tree/guides-has-arrows.html | 7 ++++++- src/vscode-tree/vscode-tree.styles.ts | 24 ++++++++++++++++-------- 2 files changed, 22 insertions(+), 9 deletions(-) diff --git a/dev/vscode-tree/guides-has-arrows.html b/dev/vscode-tree/guides-has-arrows.html index 60af914eb..7008541c8 100644 --- a/dev/vscode-tree/guides-has-arrows.html +++ b/dev/vscode-tree/guides-has-arrows.html @@ -29,7 +29,12 @@

Basic example

- +