Hiding unused UI elements

[DusanLesan]

After the latest release, Insomnia reduced usable area of the app. I would like to have ability to hide:

• Top bar with login buttons.
• Left bar with projects.
• Bottom bar with preferences.

I do not even use multiple collections/projects or accounts. But I do like having more space for main features.

Hiding these bars would require moving collection/project switchers and account stuff to menu options. Less desirable option could be a compact layout where you could have one narrow bar with all these functionalities

[DusanLesan]

Until all discussions like this are addressed and we get a sensible way to hide bars, people like me who do not need any bars at all can set this in their theme to hide them:

...
		rawCss: `
		.app .app-header {
			opacity: 0;
			height: 0;
			padding: 0;
		}

		.app > div:nth-child(2) {
			grid-template: "Header Header" auto
			"Navbar Content" 1fr
			"Statusbar Statusbar" 0 / 0 1fr;
		}
...

Full theme file I use:

module.exports = {
	name: 'vscode',
	displayName: 'VSCode',
	theme: {
		rawCss: `
		.app .app-header {
			opacity: 0;
			height: 0;
			padding: 0;
		}

		.app > div:nth-child(2) {
			grid-template: "Header Header" auto
			"Navbar Content" 1fr
			"Statusbar Statusbar" 0 / 0 1fr;
		}

		.notice.error {
			border-style: unset;
			background-color: var(--color-danger);
			color: white;
		}
		.notice.success {
			border-style: unset;
			background-color: var(--color-success);
			color: black;
		}
		.notice.warning {
			border-style: unset;
			background-color: var(--color-warning);
			color: black;
		}
		.notice.info {
			border-style: unset;
			background-color: var(--color-info);
			color: black;
		}
		`,
		background: {
			default: '#1E1E1E',
			success: '#50fa7b',
			notice: '#f1fa8c',
			warning: '#ffb86c',
			danger: '#ff5555',
			surprise: '#35A0F3',
			info: '#8be9fd'
		},
		foreground: {
			default: '#f8f8f2',
			success: '#282a36',
			notice: '#282a36',
			warning: '#282a36',
			danger: '#282a36',
			surprise: '#282a36',
			info: '#282a36'
		},
		highlight: {
			md: '#1E1E1E', // '#181818',
		},
		styles: {
			sidebar: {
				background: {
					default: '#1E1E1E'
				},
				highlight: {
					default: '#cccccc',
					xxs: 'rgba(98, 98, 98, 0.05)',
					xs: 'rgba(98, 98, 98, 0.1)',
					sm: 'rgba(98, 98, 98, 0.2)',
					md: 'rgba(98, 98, 98, 0.4)',
					lg: 'rgba(98, 98, 98, 0.6)',
					xl: 'rgba(98, 98, 98, 0.8)'
				},
				foreground: {
					default: '#cccccc',
				},
			},
			pane: {
				// Editor 
				background: {
					default: '#181818',
					success: '#9CDCFE',
					notice: '#CE9178',
					warning: '#f1fa8c',
					danger: '#ff5555',
					surprise: '#35A0F3',
					info: '#B5CEA8'
				},
				highlight: {
					default: '#8F8F8F',
					xs: '#37373D',
					//md: '#444444',
					//md: '#151515',
					md: '#1E1E1E',
					lg: '#A9A9A9',
					xl: '#6D6D6D'
				},
			},
			transparentOverlay: {
				background: {
					default: 'rgba(40, 40, 40, 0.5)',
				}
			},
			dialog: {
				background: {
					default: '#1E1E1E',
				}
			},
			link: {
				background: {
					surprise: '#CE9178',
				},
			},
			sidebarList: {
				background: {
					success: '#B5CEA8',
					surprise: '#35A0F3',
				},
				foreground: {
					default: '#cccccc',
				},
				highlight: {
					default: '#cccccc',
					xs: '#37373D',
				},
			},
		}
	}
}

[subnetmarco]

We are going to allow the Organization bar to be hidden as described in #5580 (comment)

The footer and header will need to stay, because we provide functional capabilities there.

[DusanLesan]

Thanks for making this effort. I have asked for more extensive changes again in that comment response