fix dashboard & add ability to create new profile

backend/common/profile/manager.go

@@ -26,6 +26,15 @@ type ProfileManifest struct {
 	Mods ProfileMods `json:"mods"`
 }
 
+func NewProfileManifest() ProfileManifest {
+	return ProfileManifest{
+		Mods: ProfileMods{
+			Thunderstore: []string{},
+			Nexus:        []string{},
+		},
+	}
+}
+
 func (pm *ProfileManager) GetProfiles(gameTitle string) (map[string]ProfileManifest, error) {
 	return GetProfiles(gameTitle)
 }
@@ -34,6 +43,10 @@ func (pm *ProfileManager) GetProfile(gameTitle, profileName string) (*ProfileMan
 	return GetManifest(gameTitle, profileName)
 }
 
+func (pm *ProfileManager) NewProfile(gameTitle, profileName string) error {
+	return SaveManifest(gameTitle, profileName, NewProfileManifest())
+}
+
 func (pm *ProfileManager) SaveProfile(gameTitle, profileName string, prof ProfileManifest) error {
 	return SaveManifest(gameTitle, profileName, prof)
 }

frontend/src/components/selected-game/ProfileManager.vue

@@ -1,33 +1,64 @@
 <script lang="ts" setup>
-import Listbox, { ListboxChangeEvent } from 'primevue/listbox'
+import Listbox, { ListboxChangeEvent } from 'primevue/listbox' 
 
-import { t } from '@i18n'
+import InputGroup from 'primevue/inputgroup'
+import Popover from 'primevue/popover'
+
+import { NewProfile } from '@backend/profile/ProfileManager'
 import { tooltipOpts } from '@frontend/src/util'
+
+import { t } from '@i18n'
 import { Profile } from '@types'
+import { useGameStore, useProfileStore } from '@stores'
 
-import { useProfileStore } from '@stores'
 import { storeToRefs } from 'pinia'
-import { onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
+
+const gameStore = useGameStore()
+const { selectedGame } = storeToRefs(gameStore)
 
 const profileStore = useProfileStore()
 
 const { setSelectedProfile, initProfiles } = profileStore
 const { profiles, selectedProfile } = storeToRefs(profileStore)
 
+const pp = ref()
+const newProfNameInput = ref<string>('')
+
 const getModsAmount = (prof: Profile) => {
     const tsAmt = prof.mods.thunderstore?.length ?? 0
     const nexusAmt = prof.mods.nexus?.length ?? 0
 
     return tsAmt + nexusAmt
 }
 
-const emit = defineEmits(['profileSelected'])
-
 const onChange = (e: ListboxChangeEvent) => {
     setSelectedProfile(e.value)
-    emit('profileSelected', e.value)
+    emit('profileSelected', e)
+}
+
+const toggleProfilePopover = (e: MouseEvent) => {
+    pp?.value.show(e)
+}
+
+const createProfile = async (e: MouseEvent) => {
+    await NewProfile(selectedGame.value.title, newProfNameInput.value!)
+    await initProfiles()
+
+    pp.value.hide(e)
+
+    emit('profileCreated', e)
+}
+
+const shouldDisableCreation = () => {
+    if (newProfNameInput.value.length < 1) return true // No input yet
+
+    // Profile already exists 
+    return profiles.value.some(p => p.name == newProfNameInput.value)
 }
 
+const emit = defineEmits(['profileSelected', 'profileCreated'])
+
 onMounted(async () => {
     await initProfiles()
 })
@@ -55,7 +86,23 @@ onMounted(async () => {
                     <Button
                         icon="pi pi-plus" severity="primary"
                         v-tooltip.top="tooltipOpts(t('selected-game.profile-manager.new-profile'))"
+                        @click="toggleProfilePopover"
                     />
+
+                    <Popover ref="pp">
+                        <div class="flex flex-col gap-4 w-[25rem]">
+                            <div>
+                                <span class="font-medium block mb-2">Profile Name</span>
+                                <InputGroup>
+                                    <InputText v-model="newProfNameInput" v-keyfilter="/^[^<>*!\/]+$/"/>
+                                    <Button 
+                                        label="Create" severity="success" icon="pi pi-check"
+                                        :disabled="shouldDisableCreation()" @click="createProfile"
+                                    />
+                                </InputGroup>
+                            </div>
+                        </div>
+                    </Popover>
                 </div>
 
                 <div class="flex row gap-1">
@@ -92,8 +139,15 @@ onMounted(async () => {
                 <div>[{{getModsAmount(profile)}}] {{ profile.name }}</div>
 
                 <div class="flex gap-1">
-                    <Button style="width: 34px; height: 32px;" icon="pi pi-pencil" severity="secondacry"></Button>
-                    <Button style="width: 34px; height: 32px;" icon="pi pi-trash" severity="danger"></Button>
+                    <Button
+                        style="width: 34px; height: 32px;" icon="pi pi-pencil"
+                        @click=""
+                    />
+
+                    <Button 
+                        style="width: 34px; height: 32px;" icon="pi pi-trash" severity="danger"
+                        @click="e => e.stopPropagation()"
+                    />
                 </div>
             </div>
         </template>

frontend/src/main.ts

@@ -21,6 +21,7 @@ import InputIcon from 'primevue/inputicon'
 import IconField from 'primevue/iconfield'
 
 import Tooltip from 'primevue/tooltip'
+import KeyFilter from 'primevue/keyfilter'
 //#endregion
 
 //#region Import styles
@@ -71,5 +72,6 @@ app.component('InputIcon', InputIcon)
 app.component('IconField', IconField)
 
 app.directive('Tooltip', Tooltip)
+app.directive('keyfilter', KeyFilter);
 
 app.mount('#app')

frontend/src/stores/profile.ts

@@ -21,8 +21,8 @@ export const useProfileStore = defineStore("ProfileStore", () => {
     const gameStore = useGameStore()
 
     // Key is the identifier of the game the profiles exist on.
-    const profiles = ref<Profile[]>()
-    const selectedProfile = ref<Nullable<Profile>>()
+    const profiles = ref<Profile[]>([])
+    const selectedProfile = ref<Nullable<Profile>>(null)
 
     function setSelectedProfile(prof: Profile) {
         selectedProfile.value = profiles.value?.find(p => p.name == prof.name) ?? prof

frontend/src/types/profile.ts

@@ -1,5 +1,5 @@
 export interface Profile {
-    name: string
+    name?: string
     mods: {
         thunderstore?: string[]
         nexus?: string[]

frontend/src/views/Dashboard.vue

@@ -123,5 +123,19 @@ async function getPackages() {
     background-color: rgb(43, 43, 43);
     -webkit-font-smoothing: antialiased;
 }
+
+:deep(.p-tabpanels) {
+    background: none;
+}
+
+:deep(.p-tablist-tab-list) {
+    background: none;
+    border: none;
+    justify-content: center;
+}
+
+:deep(.p-tab) {
+    font-size: 24px;
+}
 </style>
 <!-- #endregion -->