Bridge-Multi/src-angular/app/components/settings/settings.component.html

<div class="p-8 flex flex-col gap-3">
	<label class="form-control w-full">
		<div class="label">
			<span class="label-text">Chart library directory</span>
		</div>
		<div class="join w-full">
			<input
				[value]="settingsService.libraryDirectory || 'No folder selected'"
				class="join-item input input-bordered cursor-default pointer-events-none flex-1"
				readonly
				type="text"
				placeholder="No directory selected!" />
			@if (settingsService.libraryDirectory !== undefined) {
				<button (click)="openLibraryDirectory()" class="join-item btn btn-neutral">Open Folder</button>
			}
			<button (click)="getLibraryDirectory()" class="join-item btn btn-primary">Choose</button>
		</div>
	</label>

	<label class="form-control w-full max-w-xs">
		<div class="label">
			<span class="label-text">Theme</span>
		</div>
		<div class="dropdown dropdown-hover">
			<label tabindex="0" class="btn btn-neutral">{{ capitalize(settingsService.theme) }}</label>
			<ul tabindex="0" class="dropdown-content z-[2] menu p-2 shadow bg-neutral text-neutral-content rounded-box w-36">
				<li>
					<h2 class="menu-title text-neutral-content text-opacity-50">Dark</h2>
					<ul>
						<li><a (click)="setTheme('business')">Business</a></li>
						<li><a (click)="setTheme('dark')">Dark</a></li>
						<li><a (click)="setTheme('dim')">Dim</a></li>
						<li><a (click)="setTheme('night')">Night</a></li>
						<li><a (click)="setTheme('sunset')">Sunset</a></li>
						<li><a (click)="setTheme('synthwave')">Synthwave</a></li>
					</ul>
				</li>
				<li>
					<h2 class="menu-title text-neutral-content text-opacity-50">Light</h2>
					<ul>
						<li><a (click)="setTheme('aqua')">Aqua</a></li>
						<li><a (click)="setTheme('emerald')">Emerald</a></li>
						<li><a (click)="setTheme('lemonade')">Lemonade</a></li>
						<li><a (click)="setTheme('nord')">Nord</a></li>
						<li><a (click)="setTheme('valentine')">Valentine</a></li>
						<li><a (click)="setTheme('winter')">Winter</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</label>

	<div class="form-control">
		<div class="label">
			<span class="label-text">
				Download Format
				<button class="btn btn-xs btn-circle btn-ghost" (click)="selectSngModal.showModal()">
					<i class="bi bi-info-circle text-sm hover:border-b-secondary-focus"></i>
				</button>
				<dialog #selectSngModal id="report_modal" class="modal whitespace-normal">
					<div class="modal-box bg-base-100 text-base-content flex flex-col gap-2">
						<form method="dialog">
							<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">
								<i class="bi bi-x-lg text-lg"></i>
							</button>
						</form>
						<div class="flex gap-6">
							<div class="flex-1">
								<span class="font-bold text-lg">.sng (new)</span>
								<ul class="list-disc pl-5">
									<li>Single chart file</li>
									<li>Can be scanned in-game directly without extracting</li>
									<li>Currently only supported by YARG and Clone Hero v1.1</li>
								</ul>
							</div>
							<div class="flex-1">
								<span class="font-bold text-lg">.zip</span>
								<ul class="list-disc pl-5">
									<li>Contains chart folder</li>
									<li>Must be extracted before it can be scanned in-game</li>
									<li>Supported across many games</li>
								</ul>
							</div>
						</div>
						<br />
						<div class="text-xs">
							A program to convert between .sng files and chart folders can be found
							<a class="link" (click)="openUrl('https://github.com/mdsitton/SngFileFormat/releases')">here</a>.
						</div>
					</div>
					<form method="dialog" class="modal-backdrop">
						<button>close</button>
					</form>
				</dialog>
			</span>
		</div>
		<div class="flex gap-2">
			<label class="label cursor-pointer">
				<input type="radio" name="isSng" class="radio radio-secondary mr-2" [value]="true" [formControl]="isSng" />
				.sng
			</label>

			<label class="label cursor-pointer">
				<input type="radio" name="isSng" class="radio radio-secondary mr-2" [value]="false" [formControl]="isSng" />
				.zip
			</label>
		</div>
	</div>

	<div class="form-control">
		<div class="label">
			<span class="label-text">Table Layout</span>
		</div>
		<div class="flex gap-2">
			<label class="label cursor-pointer">
				<input type="radio" name="isCompactTable" class="radio radio-secondary mr-2" [value]="false" [formControl]="isCompactTable" />
				Default
			</label>

			<label class="label cursor-pointer">
				<input type="radio" name="isCompactTable" class="radio radio-secondary mr-2" [value]="true" [formControl]="isCompactTable" />
				Compact
			</label>
		</div>
	</div>

	<div class="absolute bottom-8 right-8 flex gap-6">
		<div class="join">
			<button *ngIf="updateAvailable" class="join-item btn btn-primary" (click)="downloadUpdate()">
				<i class="bi text-xl" [ngClass]="updateDownloaded ? 'bi-arrow-repeat' : 'bi-cloud-arrow-down'"></i>{{ downloadUpdateText }}
			</button>
			<button *ngIf="updateAvailable === null" class="join-item btn btn-warning" [class.disabled]="updateRetrying" (click)="retryUpdate()">
				<i class="bi bi-arrow-repeat text-xl" [class.loading]="updateRetrying"></i>{{ retryUpdateText }}
			</button>
			<button class="join-item btn btn-outline btn-disabled">{{ currentVersion }}</button>
		</div>

		<div class="tooltip tooltip-left" data-tip="Toggle developer tools">
			<button class="btn btn-primary btn-square btn-neutral" (click)="toggleDevTools()">
				<i class="bi bi-gear text-lg"></i>
			</button>
		</div>
	</div>
</div>