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">Appearance</span>
		</div>
		<div class="flex gap-3 items-center">
			<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>
			<div class="join join-vertical">
				<div class="tooltip tooltip-right" data-tip="Zoom In (ctrl +)">
					<button class="join-item btn btn-square btn-neutral btn-xs" (click)="settingsService.zoomIn()">
						<i class="bi bi-zoom-in"></i>
					</button>
				</div>
				<div class="tooltip tooltip-right" data-tip="Zoom Out (ctrl -)">
					<button class="join-item btn btn-square btn-neutral btn-xs" (click)="settingsService.zoomOut()">
						<i class="bi bi-zoom-out"></i>
					</button>
				</div>
			</div>
		</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">Chart Folder</span>
								<ul class="list-disc pl-5">
									<li>Chart files (such as audio and album art) are placed inside a folder</li>
									<li>Supported across many games</li>
								</ul>
							</div>
							<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 Clone Hero's current test build and YARG</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" />
				Chart Folder
			</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 left-8 flex">
		<a class="btn btn-link" (click)="openUrl('https://github.com/Geomitron/Bridge')"><i class="bi bi-github text-2xl"></i>Github</a>
		<a class="btn btn-link" (click)="openUrl('https://discord.gg/cqaUXGm')"><i class="bi bi-discord text-2xl"></i>Discord</a>
		<a class="btn btn-link" (click)="openUrl('https://www.patreon.com/ChorusEncore701')">
			<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" id="patreon">
				<path
					fill="currentColor"
					fill-rule="evenodd"
					d="M0 9.71C0 1.63 10.32-3.476 16.916 2.818c3.532 3.36 4.143 8.902 1.248 12.951-3.591 4.92-8.282 4.193-12.76 4.193v-9.588c.041-2.117.747-3.943 3.324-4.816 2.245-.664 4.863.581 5.653 2.947.832 2.533-.374 4.234-1.787 5.272-1.413 1.039-3.616 1.039-5.07.042v3.279c3.138 1.5 8.105-.303 9.684-4.4 1.08-2.864.332-6.185-1.912-8.26-2.701-2.2-5.653-2.74-8.811-1.204-2.204 1.12-3.741 3.404-4.116 5.894v10.834H.042L0 9.71z"></path>
			</svg>
			Patreon
		</a>
	</div>

	<div class="absolute bottom-8 right-8 flex gap-6">
		<div class="join">
			<button *ngIf="updateAvailable === 'yes'" 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 === 'error'" 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>