chore: move vue components to separate js files

static/assets/js/components/menu-main.js

@@ -0,0 +1,14 @@
+PetiteVue.createApp({
+    $delimiters: ['${', '}'],
+    state: {
+        showDropdownResources: false,
+        showDropdownUser: false,
+        showApiKey: false
+    },
+    mounted() {
+        window.addEventListener('click', (e) => {
+            const skip = findParentAttribute(e.target, 'data-trigger-for')?.value
+            Object.keys(this.state).filter(k => k !== skip).forEach(k => this.state[k] = false)
+        })
+    }
+}).mount('#main-menu')

static/assets/js/components/settings.js

@@ -0,0 +1,33 @@
+PetiteVue.createApp({
+    //$delimiters: ['${', '}'],  // https://github.com/vuejs/petite-vue/pull/100
+    activeTab: defaultTab,
+    selectedTimezone: userTimeZone,
+    get tzOptions() {
+        return [defaultTzOption, ...tzs.sort().map(tz => ({ value: tz, text: tz }))]
+    },
+    updateTab() {
+        this.activeTab = window.location.hash.slice(1) || defaultTab
+    },
+    isActive(tab) {
+        return this.activeTab === tab
+    },
+    confirmRegenerate() {
+        if (confirm('Are you sure?')) {
+            formRegenerate.submit()
+        }
+    },
+    confirmWakatimeImport() {
+        if (confirm('Are you sure? The import can not be undone.')) {
+            formImportWakatime.submit()
+        }
+    },
+    confirmDeleteAccount() {
+        if (confirm('Are you sure? This can not be undone!')) {
+            formDelete.submit()
+        }
+    },
+    mounted() {
+        this.updateTab()
+        window.addEventListener('hashchange', () => this.updateTab())
+    }
+}).mount('#settings-page')

static/assets/js/components/signup.js

@@ -0,0 +1,29 @@
+let debounceTimeout
+
+PetiteVue.createApp({
+    timezone: guessTimezone(),
+    username: '',
+    email: '',
+    avatarUrl: defaultAvatarUrl,
+    updateAvatar() {
+        if (!avatarUrlTemplate) return
+        if (debounceTimeout) {
+            clearTimeout(debounceTimeout)
+        }
+        debounceTimeout = setTimeout(() => {
+            let url = avatarUrlTemplate
+
+            if ((url.includes('{username') && !this.username) || (url.includes('{email') && !this.email)) {
+                url = defaultAvatarUrl
+            } else {
+                url = url.replaceAll('{username}', this.username)
+                url = url.replaceAll('{email}', this.email)
+                url = url.replaceAll('{username_hash}', MD5(this.username))
+                url = url.replaceAll('{email_hash}', MD5(this.email))
+                url = url.includes('{') ? defaultAvatarUrl : url
+            }
+            console.log(url)
+            this.avatarUrl = url
+        }, 500)
+    }
+}).mount('#signup-page')

static/assets/js/components/summary.js

@@ -0,0 +1,24 @@
+PetiteVue.createApp({
+    $delimiters: ['${', '}'],
+    state: {
+        showDropdownTimepicker: false,
+    },
+    fromDate: fromDate,
+    toDate: toDate,
+    timeSelection: timeSelection,
+    onDateUpdated() {
+        formTimePicker.submit()
+    },
+    mounted() {
+        window.addEventListener('click', (e) => {
+            const skip = findParentAttribute(e.target, 'data-trigger-for')?.value
+            Object.keys(this.state).filter(k => k !== skip).forEach(k => this.state[k] = false)
+        })
+
+        const query = new URLSearchParams(window.location.search)
+        if (query.has('interval')) {
+            const refEl = document.getElementById(`time-option-${query.get('interval')}`)
+            this.timeSelection = refEl ? refEl.innerText : 'Unknown'
+        }
+    }
+}).mount('#summary-page')