refactor(dialogs): Improved dialog system in the launcher

[arse09]

Summary

• Improved the current dialog system
• The new/edit dialog was renamed to InstallationsDialog
• Created a new dialog called ConfirmDialog which needs be provided with a title, a message, an optional onConfirm event and an optional onCancel event. You can see it in action when deleting an installation.
• Made InstallationDialog's states (editingInstall, versionDialogOpen and showSnapshots) not global.
• Installations are still client-side, they are being implemented in feat: Implement installations #62.

Dialogs are opened via setOpenedDialog({name: ""}) if the dialog requires additional data, you need to provide it with setOpenedDialog({name: "", props: "data"})

For example, opening a InstallationDialog to edit a installation:

setOpenedDialog({
  name: "installation",
  props: {
    editing: true,
    installation: {...}
  }
});

To create a new dialog, create a tsx file inside components/dialogs/.
Write a export type with your props if needed. Then, add your dialog name and type inside lib/types.ts in the DialogMap type:

// dialog_name: typeof props
type DialogMap = {
  installation: InstallationDialogProps;
  confirm_dialog: ConfirmDialogProps;
};

If you don't have prompts, put undefined as the type and don't forget to add the dialog to App.tsx

[Purdze]

Good work,a few issues tho

ConfirmDialog closes before action completes - setOpenedDialog(null) is called before await dialogProps.onConfirm?.(), If the confirm action fails, the dialog is already gone and the user gets no feedback

Installations still only client-side - setInstallations((prev) => prev.filter(...)) on delete doesn't call any backend, PR doesn't persist installations (#62 does that), but worth noting they should be coordinated

lastPlayed: "Today" in createEmptyInstallation - hardcoded string for a new installation that hasn't been played. Should be null or "Never".

linear-gradient(135deg, var(--accent-dark), var(--accent-dark)) - gradient with the same color twice is just a solid color. Use background: var(--accent-dark) instead

Default version fallback "26.1" - hardcoded in createEmptyInstallation. Should just use versions[0]?.id || "" and validate before save

[Purdze]

lastPlayed: "Never" still hardcoded

linear-gradient(135deg, var(--accent-dark), var(--accent-dark)) - gradient with the same color twice is just a solid color. Use background: var(--accent-dark) instead