[desktop]: Use sidebar menu on Settings. Fix #537

desktop/src/app/app.module.ts

@@ -33,6 +33,7 @@ import { OverlayPanelModule } from 'primeng/overlaypanel'
 import { ProgressBarModule } from 'primeng/progressbar'
 import { ScrollPanelModule } from 'primeng/scrollpanel'
 import { SelectButtonModule } from 'primeng/selectbutton'
+import { SidebarModule } from 'primeng/sidebar'
 import { SlideMenuModule } from 'primeng/slidemenu'
 import { SliderModule } from 'primeng/slider'
 import { SplitButtonModule } from 'primeng/splitbutton'
@@ -187,6 +188,7 @@ import { StackerComponent } from './stacker/stacker.component'
 		ProgressBarModule,
 		ScrollPanelModule,
 		SelectButtonModule,
+		SidebarModule,
 		SlideMenuModule,
 		SliderModule,
 		SplitButtonModule,

desktop/src/app/settings/settings.component.html

@@ -1,16 +1,4 @@
-<div class="grid px-3 py-2 relative">
-	<div class="col-12 mb-2 mt-3">
-		<p-floatLabel class="w-full">
-			<p-dropdown
-				[options]="'SETTINGS_TAB' | dropdownOptions | enumDropdown"
-				[(ngModel)]="tab"
-				optionLabel="label"
-				optionValue="value"
-				styleClass="p-inputtext-sm border-0"
-				[autoDisplayFirst]="false" />
-			<label>Settings</label>
-		</p-floatLabel>
-	</div>
+<div class="grid px-3 pb-2 pt-3 relative">
 	<div
 		class="col-12"
 		*ngIf="tab === 'LOCATION'">
@@ -377,3 +365,15 @@
 		</div>
 	</div>
 </div>
+
+<p-sidebar
+	[(visible)]="showMenu"
+	[fullScreen]="true"
+	appendTo="body"
+	[modal]="false"
+	[dismissible]="true"
+	styleClass="bg-black-alpha-70">
+	<p-menu
+		[model]="menuModel"
+		styleClass="w-full border-0 px-2" />
+</p-sidebar>

desktop/src/app/settings/settings.component.ts

@@ -1,11 +1,12 @@
 import { AfterViewInit, Component, HostListener, OnDestroy } from '@angular/core'
 import { debounceTime, Subject, Subscription } from 'rxjs'
+import { MenuItem } from '../../shared/components/menu-item/menu-item.component'
 import { ElectronService } from '../../shared/services/electron.service'
 import { PreferenceService } from '../../shared/services/preference.service'
 import { DEFAULT_LOCATION, Location } from '../../shared/types/atlas.types'
 import { DEFAULT_CAMERA_CAPTURE_NAMING_FORMAT, FrameType, LiveStackerType } from '../../shared/types/camera.types'
 import { PlateSolverType } from '../../shared/types/platesolver.types'
-import { DEFAULT_SETTINGS_PREFERENCE, resetCameraCaptureNamingFormat, SettingsTabKey } from '../../shared/types/settings.types'
+import { DEFAULT_SETTINGS_PREFERENCE, resetCameraCaptureNamingFormat, SettingsTab } from '../../shared/types/settings.types'
 import { StackerType } from '../../shared/types/stacker.types'
 import { StarDetectorType } from '../../shared/types/stardetector.types'
 import { AppComponent } from '../app.component'
@@ -15,8 +16,8 @@ import { AppComponent } from '../app.component'
 	templateUrl: './settings.component.html',
 })
 export class SettingsComponent implements AfterViewInit, OnDestroy {
-	protected tab: SettingsTabKey = 'LOCATION'
-	protected readonly tabs: SettingsTabKey[] = ['LOCATION', 'PLATE_SOLVER', 'STAR_DETECTOR', 'LIVE_STACKER', 'STACKER', 'CAPTURE_NAMING_FORMAT']
+	protected tab: SettingsTab = 'LOCATION'
+	protected showMenu = false
 	protected readonly preference = structuredClone(DEFAULT_SETTINGS_PREFERENCE)
 
 	protected plateSolverType: PlateSolverType = 'ASTAP'
@@ -27,6 +28,51 @@ export class SettingsComponent implements AfterViewInit, OnDestroy {
 	private readonly locationChangePublisher = new Subject<Location>()
 	private readonly locationChangeSubscription?: Subscription
 
+	protected readonly menuModel: MenuItem[] = [
+		{
+			icon: 'mdi mdi-map-marker',
+			label: 'Location',
+			command: (e) => {
+				this.showTab('LOCATION', e.item?.label)
+			},
+		},
+		{
+			icon: 'mdi mdi-sigma',
+			label: 'Plate Solver',
+			command: (e) => {
+				this.showTab('PLATE_SOLVER', e.item?.label)
+			},
+		},
+		{
+			icon: 'mdi mdi-image-multiple',
+			label: 'Stacker',
+			command: (e) => {
+				this.showTab('STACKER', e.item?.label)
+			},
+		},
+		{
+			icon: 'mdi mdi-image-multiple',
+			label: 'Live Stacker',
+			command: (e) => {
+				this.showTab('LIVE_STACKER', e.item?.label)
+			},
+		},
+		{
+			icon: 'mdi mdi-star',
+			label: 'Star Detector',
+			command: (e) => {
+				this.showTab('STAR_DETECTOR', e.item?.label)
+			},
+		},
+		{
+			icon: 'mdi mdi-rename',
+			label: 'Capture Naming Format',
+			command: (e) => {
+				this.showTab('CAPTURE_NAMING_FORMAT', e.item?.label)
+			},
+		},
+	]
+
 	get plateSolver() {
 		return this.preference.plateSolver[this.plateSolverType]
 	}
@@ -44,11 +90,20 @@ export class SettingsComponent implements AfterViewInit, OnDestroy {
 	}
 
 	constructor(
-		app: AppComponent,
+		private readonly app: AppComponent,
 		private readonly preferenceService: PreferenceService,
 		private readonly electronService: ElectronService,
 	) {
 		app.title = 'Settings'
+		app.subTitle = 'Location'
+
+		app.topMenu.push({
+			icon: 'mdi mdi-menu',
+			label: 'Menu',
+			command: () => {
+				this.showMenu = !this.showMenu
+			},
+		})
 
 		this.locationChangeSubscription = this.locationChangePublisher.pipe(debounceTime(2000)).subscribe((location) => {
 			return this.electronService.locationChanged(location)
@@ -64,6 +119,12 @@ export class SettingsComponent implements AfterViewInit, OnDestroy {
 		this.locationChangeSubscription?.unsubscribe()
 	}
 
+	protected showTab(tab: SettingsTab, title?: string) {
+		this.tab = tab
+		this.showMenu = false
+		this.app.subTitle = title
+	}
+
 	protected addLocation() {
 		const location = structuredClone(DEFAULT_LOCATION)
 		location.id = +new Date()

desktop/src/shared/pipes/dropdown-options.pipe.ts

@@ -9,7 +9,6 @@ import { Bitpix, IMAGE_STATISTICS_BIT_OPTIONS, ImageChannel, ImageFormat, ImageS
 import { MountRemoteControlProtocol } from '../types/mount.types'
 import { PlateSolverType } from '../types/platesolver.types'
 import { SequencerCaptureMode } from '../types/sequencer.types'
-import { SettingsTabKey } from '../types/settings.types'
 import { StackerGroupType, StackerType } from '../types/stacker.types'
 import { StarDetectorType } from '../types/stardetector.types'
 
@@ -34,7 +33,6 @@ export interface DropdownOptions {
 	GUIDER_Y_AXIS_UNIT: GuiderYAxisUnit[]
 	SEQUENCE_CAPTURE_MODE: SequencerCaptureMode[]
 	STACKER: StackerType[]
-	SETTINGS_TAB: SettingsTabKey[]
 	STACKER_GROUP_TYPE: StackerGroupType[]
 	CONNECTION_TYPE: ConnectionType[]
 	IMAGE_STATISTICS_BIT_OPTION: ImageStatisticsBitOption[]
@@ -88,8 +86,6 @@ export class DropdownOptionsPipe implements PipeTransform {
 				return ['FULLY', 'INTERLEAVED'] as DropdownOptions[K]
 			case 'STACKER':
 				return ['PIXINSIGHT'] as DropdownOptions[K]
-			case 'SETTINGS_TAB':
-				return ['LOCATION', 'PLATE_SOLVER', 'STAR_DETECTOR', 'LIVE_STACKER', 'STACKER', 'CAPTURE_NAMING_FORMAT'] as DropdownOptions[K]
 			case 'STACKER_GROUP_TYPE':
 				return ['LUMINANCE', 'RED', 'GREEN', 'BLUE', 'MONO', 'RGB', 'NONE'] as DropdownOptions[K]
 			case 'CONNECTION_TYPE':

desktop/src/shared/pipes/enum.pipe.ts

@@ -9,7 +9,6 @@ import { Bitpix, ImageChannel, SCNRProtectionMethod } from '../types/image.types
 import { MountRemoteControlProtocol } from '../types/mount.types'
 import { PlateSolverType } from '../types/platesolver.types'
 import { SequencerCaptureMode, SequencerState } from '../types/sequencer.types'
-import { SettingsTabKey } from '../types/settings.types'
 import { StackerGroupType, StackerType } from '../types/stacker.types'
 import { StarDetectorType } from '../types/stardetector.types'
 import { Undefinable } from '../utils/types'
@@ -41,7 +40,6 @@ export type EnumPipeKey =
 	| Bitpix
 	| StackerType
 	| StackerGroupType
-	| SettingsTabKey
 	| SequencerState
 	| ExposureTimeUnit
 	| ImageChannel
@@ -102,7 +100,6 @@ export class EnumPipe implements PipeTransform {
 		CAM: 'Camelopardalis',
 		CAP: 'Capricornus',
 		CAPTURE_FINISHED: undefined,
-		CAPTURE_NAMING_FORMAT: 'Capture Naming Format',
 		CAPTURE_STARTED: undefined,
 		CAPTURED: 'Captured',
 		CAR: 'Carina',
@@ -250,9 +247,7 @@ export class EnumPipe implements PipeTransform {
 		LIB: 'Libra',
 		LIGHT: 'Light',
 		LINER_TYPE_ACTIVE_GALAXY_NUCLEUS: 'LINER-type Active Galaxy Nucleus',
-		LIVE_STACKER: 'Live Stacker',
 		LMI: 'Leo Minor',
-		LOCATION: 'Location',
 		LONG_PERIOD_VARIABLE: 'Long-Period Variable',
 		LONG: 'Long',
 		LOOP: 'Loop',
@@ -330,7 +325,6 @@ export class EnumPipe implements PipeTransform {
 		PIXINSIGHT: 'PixInsight',
 		PLANET: 'Planet',
 		PLANETARY_NEBULA: 'Planetary Nebula',
-		PLATE_SOLVER: 'Plate Solver',
 		POST_AGB_STAR: 'Post-AGB Star',
 		PROTO_CLUSTER_OF_GALAXIES: 'Proto Cluster of Galaxies',
 		PSA: 'Piscis Austrinus',
@@ -389,9 +383,7 @@ export class EnumPipe implements PipeTransform {
 		SOUTHERN: 'Southern',
 		SPECTROSCOPIC_BINARY: 'Spectroscopic Binary',
 		SPIRE: 'Spire',
-		STACKER: 'Stacker',
 		STACKING: 'Stacking',
-		STAR_DETECTOR: 'Star Detector',
 		STAR_FORMING_REGION: 'Star Forming Region',
 		STAR: 'Star',
 		STARBURST_GALAXY: 'Starburst Galaxy',

desktop/src/shared/services/browser-window.service.ts

@@ -129,7 +129,7 @@ export class BrowserWindowService {
 	}
 
 	openSettings(preference: WindowPreference = {}) {
-		Object.assign(preference, { icon: 'settings', width: 320, height: 450, minHeight: 350 })
+		Object.assign(preference, { icon: 'settings', width: 320, height: 397, minHeight: 350 })
 		return this.openWindow({ preference, id: 'settings', path: 'settings' })
 	}
 

desktop/src/shared/types/settings.types.ts

@@ -6,7 +6,7 @@ import { DEFAULT_PLATE_SOLVER_SETTINGS, plateSolverSettingsWithDefault, type Pla
 import { DEFAULT_STACKER_SETTINGS, stackerSettingsWithDefault, type StackerSettings, type StackerType } from './stacker.types'
 import { DEFAULT_STAR_DETECTOR_SETTINGS, starDetectorSettingsWithDefault, type StarDetectorSettings, type StarDetectorType } from './stardetector.types'
 
-export type SettingsTabKey = 'LOCATION' | 'PLATE_SOLVER' | 'STAR_DETECTOR' | 'LIVE_STACKER' | 'STACKER' | 'CAPTURE_NAMING_FORMAT'
+export type SettingsTab = 'LOCATION' | 'PLATE_SOLVER' | 'STAR_DETECTOR' | 'LIVE_STACKER' | 'STACKER' | 'CAPTURE_NAMING_FORMAT'
 
 export interface SettingsPreference {
 	plateSolver: Record<PlateSolverType, PlateSolverSettings>