Hotfix: 0.4.3

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1 @@
+blank_issues_enabled: false

CONTRIBUTING.md

@@ -14,7 +14,7 @@ Before you jump the gun, we ask that you first and foremost check the following
 
 If you issue has already been listed, you're welcome to add a comment if you have any additional context to contribute!
 
-When creating a new issue, please use the corresponding templates to better organize the context surrounding your issue and make it as easy as possible for maintainers to address your issue in a timely manner.
+When creating a new issue, **please use the corresponding templates** to better organize the context surrounding your issue and make it as easy as possible for maintainers to address your issue in a timely manner.
 
 ## For Developers
 

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "beatmapper",
-	"version": "0.4.2",
+	"version": "0.4.3",
 	"type": "module",
 	"private": true,
 	"packageManager": "yarn@4.9.2",

src/components/app/forms/create-map.tsx

@@ -6,7 +6,7 @@ import { gtValue, minLength, number, object, pipe, string, transform } from "val
 
 import { APP_TOASTER, CHARACTERISTIC_COLLECTION, COVER_ART_FILE_ACCEPT_TYPE, DIFFICULTY_COLLECTION, SONG_FILE_ACCEPT_TYPE } from "$/components/app/constants";
 import { Field, FileUpload, useAppForm } from "$/components/ui/compositions";
-import { resolveBeatmapId, resolveSongId } from "$/helpers/song.helpers";
+import { createSongId, resolveBeatmapId } from "$/helpers/song.helpers";
 import { addSong } from "$/store/actions";
 import { useAppDispatch, useAppSelector } from "$/store/hooks";
 import { selectSongIds, selectUsername } from "$/store/selectors";
@@ -62,7 +62,7 @@ function CreateMapForm({ dialog }: Props) {
 				});
 			}
 
-			const songId = resolveSongId({ name: value.name });
+			const songId = createSongId(value);
 			const beatmapId = resolveBeatmapId({ characteristic: value.characteristic, difficulty: value.difficulty });
 
 			// Song IDs must be unique, and song IDs are generated from the name.

src/components/app/forms/settings/index.tsx

@@ -23,7 +23,7 @@ const collection = createListCollection({
 function AppSettings() {
 	return (
 		<Fragment>
-			<Tabs collection={collection} />
+			<Tabs unfocusOnClick collection={collection} />
 		</Fragment>
 	);
 }

src/components/app/layouts/error-boundary.tsx

@@ -42,7 +42,7 @@ function ErrorBoundary({ error, interactive = true, reset }: Props) {
 								</Wrap>
 							</Stack>
 							<Text>
-								If you're still encountering issues, please <AnchorLink href="https://github.com/bsmg/beatmapper/issues/new">fill out a bug report</AnchorLink> on the repository.
+								If you're still encountering issues, please <AnchorLink href="https://github.com/bsmg/beatmapper/issues/new?template=bug.md">fill out a bug report</AnchorLink> on the repository.
 							</Text>
 						</Stack>
 					</Presence>

src/components/app/layouts/status-bar/range.tsx

@@ -15,7 +15,7 @@ function StatusBarRangeControl({ label, minIcon, maxIcon, min, max, step, value,
 		<Tooltip render={() => label}>
 			<HStack gap={1}>
 				<StatusBarIcon size={14} icon={minIcon} onClick={() => onValueChange?.({ value: [min ?? 0] })} disabled={disabled} />
-				<Slider {...delegated} size="sm" min={min} max={max} step={step} value={value} onValueChange={onValueChange} disabled={disabled} />
+				<Slider {...delegated} size="sm" min={min} max={max} step={step} value={value} onValueChange={onValueChange} disabled={disabled} unfocusOnClick />
 				<StatusBarIcon size={14} icon={maxIcon} onClick={() => onValueChange?.({ value: [max ?? 100] })} disabled={disabled} />
 			</HStack>
 		</Tooltip>

src/components/app/layouts/status-bar/toggle.tsx

@@ -15,7 +15,7 @@ function StatusBarToggleControl({ label, onIcon, offIcon, checked, onCheckedChan
 		<Tooltip render={() => label}>
 			<HStack gap={1}>
 				<StatusBarIcon size={14} opacity={checked ? 0.5 : 1} icon={offIcon} onClick={() => onCheckedChange?.({ checked: false })} disabled={disabled} />
-				<Switch {...rest} size="sm" checked={checked} onCheckedChange={onCheckedChange} disabled={disabled} />
+				<Switch {...rest} size="sm" checked={checked} onCheckedChange={onCheckedChange} disabled={disabled} unfocusOnClick />
 				<StatusBarIcon size={14} opacity={checked ? 1 : 0.5} icon={onIcon} onClick={() => onCheckedChange?.({ checked: true })} disabled={disabled} />
 			</HStack>
 		</Tooltip>

src/components/app/templates/action-panel-groups/clipboard.tsx

@@ -22,15 +22,15 @@ function ClipboardActionPanelActionGroup({ sid }: Props) {
 		<ActionPanelGroup.ActionGroup>
 			<Presence asChild present={isAnythingSelected}>
 				<ActionPanelGroup.ActionGroup>
-					<Button variant="subtle" size="sm" disabled={!isAnythingSelected} onClick={() => dispatch(cutSelection({ view: view ?? View.BEATMAP }))}>
+					<Button variant="subtle" size="sm" disabled={!isAnythingSelected} unfocusOnClick onClick={() => dispatch(cutSelection({ view: view ?? View.BEATMAP }))}>
 						Cut
 					</Button>
-					<Button variant="subtle" size="sm" disabled={!isAnythingSelected} onClick={() => dispatch(copySelection({ view: view ?? View.BEATMAP }))}>
+					<Button variant="subtle" size="sm" disabled={!isAnythingSelected} unfocusOnClick onClick={() => dispatch(copySelection({ view: view ?? View.BEATMAP }))}>
 						Copy
 					</Button>
 				</ActionPanelGroup.ActionGroup>
 			</Presence>
-			<Button variant="subtle" size="sm" disabled={!hasCopiedNotes} onClick={() => dispatch(pasteSelection({ songId: sid, view: view ?? View.BEATMAP }))}>
+			<Button variant="subtle" size="sm" disabled={!hasCopiedNotes} unfocusOnClick onClick={() => dispatch(pasteSelection({ songId: sid, view: view ?? View.BEATMAP }))}>
 				Paste Selection
 			</Button>
 		</ActionPanelGroup.ActionGroup>

src/components/app/templates/action-panel-groups/default.tsx

@@ -24,18 +24,18 @@ function DefaultActionPanelGroup({ sid, handleGridConfigClick }: Props) {
 			<ClipboardActionPanelActionGroup sid={sid} />
 			<ActionPanelGroup.ActionGroup>
 				<Tooltip render={() => "Select everything over a time period"}>
-					<Button variant="subtle" size="sm" onClick={() => openPrompt("QUICK_SELECT")}>
+					<Button variant="subtle" size="sm" unfocusOnClick onClick={() => openPrompt("QUICK_SELECT")}>
 						Quick-select
 					</Button>
 				</Tooltip>
 				<Tooltip render={() => "Jump to a specific beat number"}>
-					<Button variant="subtle" size="sm" onClick={() => openPrompt("JUMP_TO_BEAT")}>
+					<Button variant="subtle" size="sm" unfocusOnClick onClick={() => openPrompt("JUMP_TO_BEAT")}>
 						Jump to Beat
 					</Button>
 				</Tooltip>
 				{mappingExtensionsEnabled && (
 					<Tooltip render={() => "Change the number of columns/rows"}>
-						<Button variant="subtle" size="sm" onClick={handleGridConfigClick}>
+						<Button variant="subtle" size="sm" unfocusOnClick onClick={handleGridConfigClick}>
 							Customize Grid
 						</Button>
 					</Tooltip>

src/components/app/templates/action-panel-groups/direction.tsx

@@ -20,31 +20,31 @@ function NoteDirectionActionPanelGroup() {
 	return (
 		<ActionPanelGroup.Root label="Notes">
 			<Grid columns={3} gap={0.5}>
-				<Button variant="ghost" size="icon" disabled={isDisabled} data-active={selectedDirection === NoteDirection.UP_LEFT} onClick={() => dispatch(updateNotesEditorDirection({ direction: NoteDirection.UP_LEFT }))}>
+				<Button variant="ghost" size="icon" disabled={isDisabled} data-active={selectedDirection === NoteDirection.UP_LEFT} unfocusOnClick onClick={() => dispatch(updateNotesEditorDirection({ direction: NoteDirection.UP_LEFT }))}>
 					<ArrowUpLeftIcon />
 				</Button>
-				<Button variant="ghost" size="icon" disabled={isDisabled} data-active={selectedDirection === NoteDirection.UP} onClick={() => dispatch(updateNotesEditorDirection({ direction: NoteDirection.UP }))}>
+				<Button variant="ghost" size="icon" disabled={isDisabled} data-active={selectedDirection === NoteDirection.UP} unfocusOnClick onClick={() => dispatch(updateNotesEditorDirection({ direction: NoteDirection.UP }))}>
 					<ArrowUpIcon />
 				</Button>
-				<Button variant="ghost" size="icon" disabled={isDisabled} data-active={selectedDirection === NoteDirection.UP_RIGHT} onClick={() => dispatch(updateNotesEditorDirection({ direction: NoteDirection.UP_RIGHT }))}>
+				<Button variant="ghost" size="icon" disabled={isDisabled} data-active={selectedDirection === NoteDirection.UP_RIGHT} unfocusOnClick onClick={() => dispatch(updateNotesEditorDirection({ direction: NoteDirection.UP_RIGHT }))}>
 					<ArrowUpRightIcon />
 				</Button>
-				<Button variant="ghost" size="icon" disabled={isDisabled} data-active={selectedDirection === NoteDirection.LEFT} onClick={() => dispatch(updateNotesEditorDirection({ direction: NoteDirection.LEFT }))}>
+				<Button variant="ghost" size="icon" disabled={isDisabled} data-active={selectedDirection === NoteDirection.LEFT} unfocusOnClick onClick={() => dispatch(updateNotesEditorDirection({ direction: NoteDirection.LEFT }))}>
 					<ArrowLeftIcon />
 				</Button>
-				<Button variant="ghost" size="icon" disabled={isDisabled} data-active={selectedDirection === NoteDirection.ANY} onClick={() => dispatch(updateNotesEditorDirection({ direction: NoteDirection.ANY }))}>
+				<Button variant="ghost" size="icon" disabled={isDisabled} data-active={selectedDirection === NoteDirection.ANY} unfocusOnClick onClick={() => dispatch(updateNotesEditorDirection({ direction: NoteDirection.ANY }))}>
 					<CircleIcon />
 				</Button>
-				<Button variant="ghost" size="icon" disabled={isDisabled} data-active={selectedDirection === NoteDirection.RIGHT} onClick={() => dispatch(updateNotesEditorDirection({ direction: NoteDirection.RIGHT }))}>
+				<Button variant="ghost" size="icon" disabled={isDisabled} data-active={selectedDirection === NoteDirection.RIGHT} unfocusOnClick onClick={() => dispatch(updateNotesEditorDirection({ direction: NoteDirection.RIGHT }))}>
 					<ArrowRightIcon />
 				</Button>
-				<Button variant="ghost" size="icon" disabled={isDisabled} data-active={selectedDirection === NoteDirection.DOWN_LEFT} onClick={() => dispatch(updateNotesEditorDirection({ direction: NoteDirection.DOWN_LEFT }))}>
+				<Button variant="ghost" size="icon" disabled={isDisabled} data-active={selectedDirection === NoteDirection.DOWN_LEFT} unfocusOnClick onClick={() => dispatch(updateNotesEditorDirection({ direction: NoteDirection.DOWN_LEFT }))}>
 					<ArrowDownLeftIcon />
 				</Button>
-				<Button variant="ghost" size="icon" disabled={isDisabled} data-active={selectedDirection === NoteDirection.DOWN} onClick={() => dispatch(updateNotesEditorDirection({ direction: NoteDirection.DOWN }))}>
+				<Button variant="ghost" size="icon" disabled={isDisabled} data-active={selectedDirection === NoteDirection.DOWN} unfocusOnClick onClick={() => dispatch(updateNotesEditorDirection({ direction: NoteDirection.DOWN }))}>
 					<ArrowDownIcon />
 				</Button>
-				<Button variant="ghost" size="icon" disabled={isDisabled} data-active={selectedDirection === NoteDirection.DOWN_RIGHT} onClick={() => dispatch(updateNotesEditorDirection({ direction: NoteDirection.DOWN_RIGHT }))}>
+				<Button variant="ghost" size="icon" disabled={isDisabled} data-active={selectedDirection === NoteDirection.DOWN_RIGHT} unfocusOnClick onClick={() => dispatch(updateNotesEditorDirection({ direction: NoteDirection.DOWN_RIGHT }))}>
 					<ArrowDownRightIcon />
 				</Button>
 			</Grid>

src/components/app/templates/action-panel-groups/history.tsx

@@ -15,10 +15,10 @@ function HistoryActionPanelActionGroup({ sid }: Props) {
 
 	return (
 		<ActionPanelGroup.ActionGroup>
-			<Button variant="subtle" size="sm" disabled={!canUndo} onClick={() => dispatch(undoObjects({ songId: sid }))}>
+			<Button variant="subtle" size="sm" disabled={!canUndo} unfocusOnClick onClick={() => dispatch(undoObjects({ songId: sid }))}>
 				Undo
 			</Button>
-			<Button variant="subtle" size="sm" disabled={!canRedo} onClick={() => dispatch(redoObjects({ songId: sid }))}>
+			<Button variant="subtle" size="sm" disabled={!canRedo} unfocusOnClick onClick={() => dispatch(redoObjects({ songId: sid }))}>
 				Redo
 			</Button>
 		</ActionPanelGroup.ActionGroup>

src/components/app/templates/action-panel-groups/obstacles.tsx

@@ -12,7 +12,7 @@ function ObstaclesActionPanelGroup({ sid }: Props) {
 	return (
 		<ActionPanelGroup.Root label="Obstacles">
 			<ActionPanelGroup.ActionGroup>
-				<Button variant="subtle" size="sm" onClick={() => openPrompt("UPDATE_OBSTACLE_DURATION")}>
+				<Button variant="subtle" size="sm" unfocusOnClick onClick={() => openPrompt("UPDATE_OBSTACLE_DURATION")}>
 					Change duration
 				</Button>
 			</ActionPanelGroup.ActionGroup>

src/components/app/templates/action-panel-groups/tool.tsx

@@ -20,22 +20,22 @@ function NoteToolActionPanelGroup({ sid, bid }: Props) {
 		<ActionPanelGroup.Root label="Items">
 			<ActionPanelGroup.ActionGroup>
 				<Tooltip render={() => "Left Color Note"}>
-					<Button variant="ghost" size="icon" data-active={selectedTool === ObjectTool.LEFT_NOTE} onClick={() => dispatch(updateNotesEditorTool({ tool: ObjectTool.LEFT_NOTE }))}>
+					<Button variant="ghost" size="icon" data-active={selectedTool === ObjectTool.LEFT_NOTE} unfocusOnClick onClick={() => dispatch(updateNotesEditorTool({ tool: ObjectTool.LEFT_NOTE }))}>
 						<ColorNoteIcon size={20} color={resolveColorForItem(ObjectTool.LEFT_NOTE, { customColors: colorScheme })} />
 					</Button>
 				</Tooltip>
 				<Tooltip render={() => "Right Color Note"}>
-					<Button variant="ghost" size="icon" data-active={selectedTool === ObjectTool.RIGHT_NOTE} onClick={() => dispatch(updateNotesEditorTool({ tool: ObjectTool.RIGHT_NOTE }))}>
+					<Button variant="ghost" size="icon" data-active={selectedTool === ObjectTool.RIGHT_NOTE} unfocusOnClick onClick={() => dispatch(updateNotesEditorTool({ tool: ObjectTool.RIGHT_NOTE }))}>
 						<ColorNoteIcon size={20} color={resolveColorForItem(ObjectTool.RIGHT_NOTE, { customColors: colorScheme })} />
 					</Button>
 				</Tooltip>
 				<Tooltip render={() => "Bomb Note"}>
-					<Button variant="ghost" size="icon" data-active={selectedTool === ObjectTool.BOMB_NOTE} onClick={() => dispatch(updateNotesEditorTool({ tool: ObjectTool.BOMB_NOTE }))}>
+					<Button variant="ghost" size="icon" data-active={selectedTool === ObjectTool.BOMB_NOTE} unfocusOnClick onClick={() => dispatch(updateNotesEditorTool({ tool: ObjectTool.BOMB_NOTE }))}>
 						<BombNoteIcon size={20} />
 					</Button>
 				</Tooltip>
 				<Tooltip render={() => "Obstacle"}>
-					<Button variant="ghost" size="icon" data-active={selectedTool === ObjectTool.OBSTACLE} onClick={() => dispatch(updateNotesEditorTool({ tool: ObjectTool.OBSTACLE }))}>
+					<Button variant="ghost" size="icon" data-active={selectedTool === ObjectTool.OBSTACLE} unfocusOnClick onClick={() => dispatch(updateNotesEditorTool({ tool: ObjectTool.OBSTACLE }))}>
 						<ObstacleIcon size={20} color={resolveColorForItem(ObjectTool.OBSTACLE, { customColors: colorScheme })} />
 					</Button>
 				</Tooltip>

src/components/app/templates/editor/action-panel/grid.tsx

@@ -30,16 +30,16 @@ function GridActionPanel({ sid, finishTweakingGrid }: Props) {
 			{!isObjectEmpty(gridPresets) && (
 				<ActionPanelGroup.Root label="Grid Presets">
 					<ActionPanelGroup.ActionGroup>
-						<Select collection={createListCollection({ items: Object.keys(gridPresets) })} value={[slot]} onValueChange={(x) => setSlot(x.value[0])} />
+						<Select unfocusOnClick collection={createListCollection({ items: Object.keys(gridPresets) })} value={[slot]} onValueChange={(x) => setSlot(x.value[0])} />
 					</ActionPanelGroup.ActionGroup>
 					<ActionPanelGroup.ActionGroup>
 						<Tooltip render={() => "Load Grid Preset"}>
-							<Button variant="subtle" size="sm" disabled={!gridPresets[slot]} onClick={() => dispatch(loadGridPreset({ songId: sid, grid: gridPresets[slot] }))}>
+							<Button variant="subtle" size="sm" disabled={!gridPresets[slot]} unfocusOnClick onClick={() => dispatch(loadGridPreset({ songId: sid, grid: gridPresets[slot] }))}>
 								<ArrowUpFromDotIcon size={16} />
 							</Button>
 						</Tooltip>
 						<Tooltip render={() => "Delete Grid Preset"}>
-							<Button variant="subtle" size="sm" disabled={!gridPresets[slot]} onClick={() => dispatch(removeGridPreset({ songId: sid, presetSlot: slot }))}>
+							<Button variant="subtle" size="sm" disabled={!gridPresets[slot]} unfocusOnClick onClick={() => dispatch(removeGridPreset({ songId: sid, presetSlot: slot }))}>
 								<TrashIcon size={16} />
 							</Button>
 						</Tooltip>
@@ -63,13 +63,13 @@ function GridActionPanel({ sid, finishTweakingGrid }: Props) {
 					</Field>
 				</ActionPanelGroup.ActionGroup>
 				<ActionPanelGroup.ActionGroup>
-					<Button variant="subtle" size="sm" onClick={() => openPrompt("SAVE_GRID_PRESET")}>
+					<Button variant="subtle" size="sm" unfocusOnClick onClick={() => openPrompt("SAVE_GRID_PRESET")}>
 						Save as Preset
 					</Button>
-					<Button variant="subtle" size="sm" onClick={() => sid && dispatch(updateGridSize({ songId: sid, changes: DEFAULT_GRID }))}>
+					<Button variant="subtle" size="sm" unfocusOnClick onClick={() => sid && dispatch(updateGridSize({ songId: sid, changes: DEFAULT_GRID }))}>
 						Reset Grid
 					</Button>
-					<Button variant="subtle" size="sm" onClick={finishTweakingGrid}>
+					<Button variant="subtle" size="sm" unfocusOnClick onClick={finishTweakingGrid}>
 						Finish Customizing
 					</Button>
 				</ActionPanelGroup.ActionGroup>

src/components/app/templates/editor/action-panel/selection.tsx

@@ -64,30 +64,30 @@ function SelectionActionPanel({ sid, numOfSelectedBlocks, numOfSelectedMines, nu
 			<ActionPanelGroup.Root label="Actions">
 				<ActionPanelGroup.ActionGroup>
 					<Tooltip render={() => "Mirror selection horizontally"}>
-						<Button variant="ghost" size="icon" onClick={() => dispatch(mirrorSelection({ axis: "horizontal", grid }))}>
+						<Button variant="ghost" size="icon" unfocusOnClick onClick={() => dispatch(mirrorSelection({ axis: "horizontal", grid }))}>
 							<FlipHorizontal2Icon />
 						</Button>
 					</Tooltip>
 					<Tooltip render={() => "Mirror selection vertically"}>
-						<Button variant="ghost" size="icon" onClick={() => dispatch(mirrorSelection({ axis: "vertical", grid }))}>
+						<Button variant="ghost" size="icon" unfocusOnClick onClick={() => dispatch(mirrorSelection({ axis: "vertical", grid }))}>
 							<FlipVertical2Icon />
 						</Button>
 					</Tooltip>
 				</ActionPanelGroup.ActionGroup>
 				<ActionPanelGroup.ActionGroup>
 					<Tooltip render={() => "Nudge selection forwards"}>
-						<Button variant="ghost" size="icon" onClick={() => dispatch(nudgeSelection({ direction: "forwards", view: View.BEATMAP }))}>
+						<Button variant="ghost" size="icon" unfocusOnClick onClick={() => dispatch(nudgeSelection({ direction: "forwards", view: View.BEATMAP }))}>
 							<ArrowUpToLineIcon />
 						</Button>
 					</Tooltip>
 					<Tooltip render={() => "Nudge selection backwards"}>
-						<Button variant="ghost" size="icon" onClick={() => dispatch(nudgeSelection({ direction: "backwards", view: View.BEATMAP }))}>
+						<Button variant="ghost" size="icon" unfocusOnClick onClick={() => dispatch(nudgeSelection({ direction: "backwards", view: View.BEATMAP }))}>
 							<ArrowDownToLineIcon />
 						</Button>
 					</Tooltip>
 				</ActionPanelGroup.ActionGroup>
 				<ActionPanelGroup.ActionGroup>
-					<Button variant="subtle" size="sm" onClick={() => dispatch(deselectAllEntities({ view: View.BEATMAP }))}>
+					<Button variant="subtle" size="sm" unfocusOnClick onClick={() => dispatch(deselectAllEntities({ view: View.BEATMAP }))}>
 						Clear selection
 					</Button>
 				</ActionPanelGroup.ActionGroup>