Skip to content

Instantly share code, notes, and snippets.

@AgentCoop

AgentCoop/gist:dc5c2361e7c8ecd3bd37ff787507cbf2

Created January 12, 2026 21:47
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save AgentCoop/dc5c2361e7c8ecd3bd37ff787507cbf2 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save AgentCoop/dc5c2361e7c8ecd3bd37ff787507cbf2 to your computer and use it in GitHub Desktop.
Download ZIP
Angular Desktop UI Architecture Guide
Raw
gistfile1.txt
desktop-ui-app/
├── src/
│ ├── app/
│ │ ├── core/ # Singleton services, guards
│ │ │ ├── services/
│ │ │ │ ├── window-state.service.ts
│ │ │ │ ├── layout-persistence.service.ts
│ │ │ │ ├── theme.service.ts
│ │ │ │ ├── shortcut.service.ts
│ │ │ │ ├── drag-drop.service.ts
│ │ │ │ └── core.service.ts
│ │ │ ├── guards/
│ │ │ │ ├── unsaved-changes.guard.ts
│ │ │ │ └── layout-access.guard.ts
│ │ │ ├── interceptors/
│ │ │ │ ├── window-state.interceptor.ts
│ │ │ │ └── layout.interceptor.ts
│ │ │ ├── models/
│ │ │ │ ├── window.models.ts
│ │ │ │ ├── panel.models.ts
│ │ │ │ ├── pane.models.ts
│ │ │ │ ├── layout.models.ts
│ │ │ │ └── index.ts
│ │ │ └── core.module.ts
│ │ │
│ │ ├── shared/ # Reusable components, directives, pipes
│ │ │ ├── components/
│ │ │ │ ├── ui/
│ │ │ │ │ ├── splitter/
│ │ │ │ │ │ ├── splitter.component.ts
│ │ │ │ │ │ ├── splitter.component.html
│ │ │ │ │ │ ├── splitter.component.scss
│ │ │ │ │ │ └── splitter.component.spec.ts
│ │ │ │ │ ├── resizable/
│ │ │ │ │ │ ├── resizable.directive.ts
│ │ │ │ │ │ ├── resizable-handle.component.ts
│ │ │ │ │ │ └── index.ts
│ │ │ │ │ ├── draggable/
│ │ │ │ │ │ ├── draggable.directive.ts
│ │ │ │ │ │ ├── drag-handle.component.ts
│ │ │ │ │ │ └── index.ts
│ │ │ │ │ ├── drop-zone/
│ │ │ │ │ │ └── drop-zone.component.ts
│ │ │ │ │ ├── context-menu/
│ │ │ │ │ │ └── context-menu.component.ts
│ │ │ │ │ └── tooltip/
│ │ │ │ │ └── custom-tooltip.component.ts
│ │ │ │ │
│ │ │ │ ├── icons/
│ │ │ │ │ ├── app-icon.component.ts
│ │ │ │ │ ├── file-icon.component.ts
│ │ │ │ │ └── folder-icon.component.ts
│ │ │ │ │
│ │ │ │ └── layout/
│ │ │ │ ├── empty-state/
│ │ │ │ │ └── empty-state.component.ts
│ │ │ │ ├── loading/
│ │ │ │ │ └── loading.component.ts
│ │ │ │ └── error-state/
│ │ │ │ └── error-state.component.ts
│ │ │ │
│ │ │ ├── directives/
│ │ │ │ ├── auto-focus.directive.ts
│ │ │ │ ├── drag-drop.directive.ts
│ │ │ │ ├── resize-observer.directive.ts
│ │ │ │ └── click-outside.directive.ts
│ │ │ │
│ │ │ ├── pipes/
│ │ │ │ ├── file-size.pipe.ts
│ │ │ │ ├── safe-url.pipe.ts
│ │ │ │ └── truncate.pipe.ts
│ │ │ │
│ │ │ ├── utils/
│ │ │ │ ├── dom.utils.ts
│ │ │ │ ├── layout.utils.ts
│ │ │ │ ├── geometry.utils.ts
│ │ │ │ └── color.utils.ts
│ │ │ │
│ │ │ └── shared.module.ts
│ │ │
│ │ ├── layout/ # Main layout components
│ │ │ ├── shell/
│ │ │ │ ├── shell.component.ts
│ │ │ │ ├── shell.component.html
│ │ │ │ ├── shell.component.scss
│ │ │ │ └── shell.component.spec.ts
│ │ │ │
│ │ │ ├── window-manager/
│ │ │ │ ├── components/
│ │ │ │ │ ├── window-container/
│ │ │ │ │ │ └── window-container.component.ts
│ │ │ │ │ ├── window/
│ │ │ │ │ │ └── window.component.ts
│ │ │ │ │ ├── window-header/
│ │ │ │ │ │ └── window-header.component.ts
│ │ │ │ │ ├── window-resize-handles/
│ │ │ │ │ │ └── window-resize-handles.component.ts
│ │ │ │ │ └── window-minimap/
│ │ │ │ │ └── window-minimap.component.ts
│ │ │ │ │
│ │ │ │ ├── services/
│ │ │ │ │ ├── window-manager.service.ts
│ │ │ │ │ ├── window-factory.service.ts
│ │ │ │ │ └── window-zorder.service.ts
│ │ │ │ │
│ │ │ │ └── window-manager.module.ts
│ │ │ │
│ │ │ ├── panel-system/
│ │ │ │ ├── components/
│ │ │ │ │ ├── panel-container/
│ │ │ │ │ │ └── panel-container.component.ts
│ │ │ │ │ ├── panel/
│ │ │ │ │ │ └── panel.component.ts
│ │ │ │ │ ├── panel-header/
│ │ │ │ │ │ └── panel-header.component.ts
│ │ │ │ │ ├── panel-group/
│ │ │ │ │ │ └── panel-group.component.ts
│ │ │ │ │ ├── dock-container/
│ │ │ │ │ │ └── dock-container.component.ts
│ │ │ │ │ └── floating-panel/
│ │ │ │ │ └── floating-panel.component.ts
│ │ │ │ │
│ │ │ │ ├── services/
│ │ │ │ │ ├── panel-manager.service.ts
│ │ │ │ │ ├── dock.service.ts
│ │ │ │ │ └── splitter.service.ts
│ │ │ │ │
│ │ │ │ └── panel-system.module.ts
│ │ │ │
│ │ │ ├── tiling-system/
│ │ │ │ ├── components/
│ │ │ │ │ ├── tiling-container/
│ │ │ │ │ │ └── tiling-container.component.ts
│ │ │ │ │ ├── split-view/
│ │ │ │ │ │ └── split-view.component.ts
│ │ │ │ │ ├── grid-layout/
│ │ │ │ │ │ └── grid-layout.component.ts
│ │ │ │ │ ├── tab-group-container/
│ │ │ │ │ │ └── tab-group-container.component.ts
│ │ │ │ │ └── layout-minimap/
│ │ │ │ │ └── layout-minimap.component.ts
│ │ │ │ │
│ │ │ │ ├── services/
│ │ │ │ │ ├── tiling-manager.service.ts
│ │ │ │ │ ├── layout-engine.service.ts
│ │ │ │ │ └── snap-guide.service.ts
│ │ │ │ │
│ │ │ │ └── tiling-system.module.ts
│ │ │ │
│ │ │ ├── pane-system/
│ │ │ │ ├── components/
│ │ │ │ │ ├── pane/
│ │ │ │ │ │ └── pane.component.ts
│ │ │ │ │ ├── pane-header/
│ │ │ │ │ │ └── pane-header.component.ts
│ │ │ │ │ ├── tab-group/
│ │ │ │ │ │ └── tab-group.component.ts
│ │ │ │ │ ├── tab-item/
│ │ │ │ │ │ └── tab-item.component.ts
│ │ │ │ │ ├── pane-split-controls/
│ │ │ │ │ │ └── pane-split-controls.component.ts
│ │ │ │ │ └── pane-drop-zone/
│ │ │ │ │ └── pane-drop-zone.component.ts
│ │ │ │ │
│ │ │ │ ├── services/
│ │ │ │ │ ├── pane-manager.service.ts
│ │ │ │ │ ├── tab-manager.service.ts
│ │ │ │ │ └── content-link.service.ts
│ │ │ │ │
│ │ │ │ └── pane-system.module.ts
│ │ │ │
│ │ │ ├── desktop-ui/
│ │ │ │ ├── components/
│ │ │ │ │ ├── menu-bar/
│ │ │ │ │ │ └── menu-bar.component.ts
│ │ │ │ │ ├── taskbar/
│ │ │ │ │ │ └── taskbar.component.ts
│ │ │ │ │ ├── system-tray/
│ │ │ │ │ │ └── system-tray.component.ts
│ │ │ │ │ ├── desktop-icons/
│ │ │ │ │ │ └── desktop-icons.component.ts
│ │ │ │ │ ├── virtual-desktop-switcher/
│ │ │ │ │ │ └── virtual-desktop-switcher.component.ts
│ │ │ │ │ └── notification-center/
│ │ │ │ │ └── notification-center.component.ts
│ │ │ │ │
│ │ │ │ ├── services/
│ │ │ │ │ ├── desktop-manager.service.ts
│ │ │ │ │ ├── virtual-desktop.service.ts
│ │ │ │ │ └── notification.service.ts
│ │ │ │ │
│ │ │ │ └── desktop-ui.module.ts
│ │ │ │
│ │ │ ├── layout-manager/
│ │ │ │ ├── components/
│ │ │ │ │ ├── layout-manager/
│ │ │ │ │ │ └── layout-manager.component.ts
│ │ │ │ │ ├── layout-presets/
│ │ │ │ │ │ └── layout-presets.component.ts
│ │ │ │ │ ├── layout-import-export/
│ │ │ │ │ │ └── layout-import-export.component.ts
│ │ │ │ │ └── layout-history/
│ │ │ │ │ └── layout-history.component.ts
│ │ │ │ │
│ │ │ │ ├── services/
│ │ │ │ │ ├── layout-manager.service.ts
│ │ │ │ │ ├── layout-persistence.service.ts
│ │ │ │ │ └── layout-history.service.ts
│ │ │ │ │
│ │ │ │ └── layout-manager.module.ts
│ │ │ │
│ │ │ └── layout.module.ts
│ │ │
│ │ ├── features/ # Feature modules (lazy-loaded)
│ │ │ ├── file-explorer/
│ │ │ │ ├── components/
│ │ │ │ │ ├── file-explorer-panel/
│ │ │ │ │ │ └── file-explorer-panel.component.ts
│ │ │ │ │ ├── file-tree/
│ │ │ │ │ │ └── file-tree.component.ts
│ │ │ │ │ ├── file-list/
│ │ │ │ │ │ └── file-list.component.ts
│ │ │ │ │ ├── breadcrumb/
│ │ │ │ │ │ └── breadcrumb.component.ts
│ │ │ │ │ ├── quick-access/
│ │ │ │ │ │ └── quick-access.component.ts
│ │ │ │ │ └── file-preview/
│ │ │ │ │ └── file-preview.component.ts
│ │ │ │ │
│ │ │ │ ├── services/
│ │ │ │ │ ├── file-system.service.ts
│ │ │ │ │ ├── file-icon.service.ts
│ │ │ │ │ └── file-search.service.ts
│ │ │ │ │
│ │ │ │ ├── panes/
│ │ │ │ │ ├── file-explorer-pane/
│ │ │ │ │ │ └── file-explorer-pane.component.ts
│ │ │ │ │ └── file-search-pane/
│ │ │ │ │ └── file-search-pane.component.ts
│ │ │ │ │
│ │ │ │ └── file-explorer.module.ts
│ │ │ │
│ │ │ ├── editor/
│ │ │ │ ├── components/
│ │ │ │ │ ├── editor-toolbar/
│ │ │ │ │ │ └── editor-toolbar.component.ts
│ │ │ │ │ ├── editor-status-bar/
│ │ │ │ │ │ └── editor-status-bar.component.ts
│ │ │ │ │ ├── editor-minimap/
│ │ │ │ │ │ └── editor-minimap.component.ts
│ │ │ │ │ ├── editor-gutter/
│ │ │ │ │ │ └── editor-gutter.component.ts
│ │ │ │ │ └── editor-sidebar/
│ │ │ │ │ └── editor-sidebar.component.ts
│ │ │ │ │
│ │ │ │ ├── services/
│ │ │ │ │ ├── editor.service.ts
│ │ │ │ │ ├── syntax-highlight.service.ts
│ │ │ │ │ ├── auto-complete.service.ts
│ │ │ │ │ └── linting.service.ts
│ │ │ │ │
│ │ │ │ ├── panes/
│ │ │ │ │ ├── code-editor-pane/
│ │ │ │ │ │ └── code-editor-pane.component.ts
│ │ │ │ │ ├── markdown-editor-pane/
│ │ │ │ │ │ └── markdown-editor-pane.component.ts
│ │ │ │ │ └── json-editor-pane/
│ │ │ │ │ └── json-editor-pane.component.ts
│ │ │ │ │
│ │ │ │ └── editor.module.ts
│ │ │ │
│ │ │ ├── terminal/
│ │ │ │ ├── components/
│ │ │ │ │ ├── terminal-toolbar/
│ │ │ │ │ │ └── terminal-toolbar.component.ts
│ │ │ │ │ ├── terminal-tabs/
│ │ │ │ │ │ └── terminal-tabs.component.ts
│ │ │ │ │ └── terminal-settings/
│ │ │ │ │ └── terminal-settings.component.ts
│ │ │ │ │
│ │ │ │ ├── services/
│ │ │ │ │ ├── terminal.service.ts
│ │ │ │ │ ├── shell.service.ts
│ │ │ │ │ └── command-history.service.ts
│ │ │ │ │
│ │ │ │ ├── panes/
│ │ │ │ │ └── terminal-pane/
│ │ │ │ │ └── terminal-pane.component.ts
│ │ │ │ │
│ │ │ │ └── terminal.module.ts
│ │ │ │
│ │ │ ├── debugger/
│ │ │ │ ├── components/
│ │ │ │ │ ├── debug-toolbar/
│ │ │ │ │ │ └── debug-toolbar.component.ts
│ │ │ │ │ ├── call-stack/
│ │ │ │ │ │ └── call-stack.component.ts
│ │ │ │ │ ├── variables-view/
│ │ │ │ │ │ └── variables-view.component.ts
│ │ │ │ │ ├── breakpoints/
│ │ │ │ │ │ └── breakpoints.component.ts
│ │ │ │ │ └── debug-console/
│ │ │ │ │ └── debug-console.component.ts
│ │ │ │ │
│ │ │ │ ├── services/
│ │ │ │ │ ├── debugger.service.ts
│ │ │ │ │ ├── breakpoint.service.ts
│ │ │ │ │ └── debug-adapter.service.ts
│ │ │ │ │
│ │ │ │ ├── panes/
│ │ │ │ │ └── debugger-pane/
│ │ │ │ │ └── debugger-pane.component.ts
│ │ │ │ │
│ │ │ │ └── debugger.module.ts
│ │ │ │
│ │ │ ├── git/
│ │ │ │ ├── components/
│ │ │ │ │ ├── git-status/
│ │ │ │ │ │ └── git-status.component.ts
│ │ │ │ │ ├── git-history/
│ │ │ │ │ │ └── git-history.component.ts
│ │ │ │ │ ├── git-branches/
│ │ │ │ │ │ └── git-branches.component.ts
│ │ │ │ │ ├── git-diff/
│ │ │ │ │ │ └── git-diff.component.ts
│ │ │ │ │ └── git-commit/
│ │ │ │ │ └── git-commit.component.ts
│ │ │ │ │
│ │ │ │ ├── services/
│ │ │ │ │ ├── git.service.ts
│ │ │ │ │ └── diff.service.ts
│ │ │ │ │
│ │ │ │ ├── panes/
│ │ │ │ │ └── git-pane/
│ │ │ │ │ └── git-pane.component.ts
│ │ │ │ │
│ │ │ │ └── git.module.ts
│ │ │ │
│ │ │ ├── settings/
│ │ │ │ ├── components/
│ │ │ │ │ ├── settings-navigation/
│ │ │ │ │ │ └── settings-navigation.component.ts
│ │ │ │ │ ├── settings-editor/
│ │ │ │ │ │ └── settings-editor.component.ts
│ │ │ │ │ ├── settings-theme/
│ │ │ │ │ │ └── settings-theme.component.ts
│ │ │ │ │ ├── settings-shortcuts/
│ │ │ │ │ │ └── settings-shortcuts.component.ts
│ │ │ │ │ └── settings-layout/
│ │ │ │ │ └── settings-layout.component.ts
│ │ │ │ │
│ │ │ │ ├── services/
│ │ │ │ │ └── settings.service.ts
│ │ │ │ │
│ │ │ │ ├── panes/
│ │ │ │ │ └── settings-pane/
│ │ │ │ │ └── settings-pane.component.ts
│ │ │ │ │
│ │ │ │ └── settings.module.ts
│ │ │ │
│ │ │ └── search/
│ │ │ ├── components/
│ │ │ │ ├── search-bar/
│ │ │ │ │ └── search-bar.component.ts
│ │ │ │ ├── search-results/
│ │ │ │ │ └── search-results.component.ts
│ │ │ │ ├── find-replace/
│ │ │ │ │ └── find-replace.component.ts
│ │ │ │ └── advanced-search/
│ │ │ │ └── advanced-search.component.ts
│ │ │ │
│ │ │ ├── services/
│ │ │ │ ├── search.service.ts
│ │ │ │ └── find-replace.service.ts
│ │ │ │
│ │ │ ├── panes/
│ │ │ │ └── search-pane/
│ │ │ │ └── search-pane.component.ts
│ │ │ │
│ │ │ └── search.module.ts
│ │ │
│ │ ├── store/ # State management (if using NgRx/NGXS)
│ │ │ ├── state/
│ │ │ │ ├── app.state.ts
│ │ │ │ ├── layout.state.ts
│ │ │ │ ├── window.state.ts
│ │ │ │ ├── panel.state.ts
│ │ │ │ └── pane.state.ts
│ │ │ │
│ │ │ ├── actions/
│ │ │ │ ├── layout.actions.ts
│ │ │ │ ├── window.actions.ts
│ │ │ │ ├── panel.actions.ts
│ │ │ │ └── pane.actions.ts
│ │ │ │
│ │ │ ├── reducers/
│ │ │ │ ├── layout.reducer.ts
│ │ │ │ ├── window.reducer.ts
│ │ │ │ ├── panel.reducer.ts
│ │ │ │ └── pane.reducer.ts
│ │ │ │
│ │ │ ├── effects/
│ │ │ │ ├── layout.effects.ts
│ │ │ │ ├── window.effects.ts
│ │ │ │ ├── panel.effects.ts
│ │ │ │ └── pane.effects.ts
│ │ │ │
│ │ │ ├── selectors/
│ │ │ │ ├── layout.selectors.ts
│ │ │ │ ├── window.selectors.ts
│ │ │ │ ├── panel.selectors.ts
│ │ │ │ └── pane.selectors.ts
│ │ │ │
│ │ │ └── store.module.ts
│ │ │
│ │ ├── app.component.ts
│ │ ├── app.component.html
│ │ ├── app.component.scss
│ │ └── app.module.ts
│ │
│ ├── assets/
│ │ ├── icons/
│ │ │ ├── file-icons/
│ │ │ │ ├── typescript.svg
│ │ │ │ ├── javascript.svg
│ │ │ │ ├── html.svg
│ │ │ │ └── css.svg
│ │ │ │
│ │ │ ├── app-icons/
│ │ │ │ ├── window.svg
│ │ │ │ ├── panel.svg
│ │ │ │ └── pane.svg
│ │ │ │
│ │ │ └── system-icons/
│ │ │ ├── close.svg
│ │ │ ├── minimize.svg
│ │ │ ├── maximize.svg
│ │ │ └── restore.svg
│ │ │
│ │ ├── themes/
│ │ │ ├── dark-theme.scss
│ │ │ ├── light-theme.scss
│ │ │ └── high-contrast-theme.scss
│ │ │
│ │ └── layouts/
│ │ ├── default-layout.json
│ │ ├── web-dev-layout.json
│ │ ├── data-science-layout.json
│ │ └── presentation-layout.json
│ │
│ ├── environments/
│ │ ├── environment.ts
│ │ ├── environment.prod.ts
│ │ └── environment.dev.ts
│ │
│ ├── styles/
│ │ ├── _variables.scss
│ │ ├── _mixins.scss
│ │ ├── _animations.scss
│ │ ├── _themes.scss
│ │ ├── _layout.scss
│ │ ├── _window.scss
│ │ ├── _panel.scss
│ │ ├── _pane.scss
│ │ ├── _dock.scss
│ │ ├── _splitter.scss
│ │ ├── _tab.scss
│ │ ├── _taskbar.scss
│ │ ├── _menu-bar.scss
│ │ └── styles.scss
│ │
│ └── index.html
│
├── .editorconfig
├── .gitignore
├── angular.json
├── package.json
├── tsconfig.json
├── tsconfig.app.json
├── tsconfig.spec.json
└── README.md
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment