You've already forked AstralRinth
forked from didirus/AstralRinth
250 lines
8.2 KiB
Vue
250 lines
8.2 KiB
Vue
<script setup lang="ts">
|
||
import {
|
||
ReportIcon,
|
||
AstralRinthLogo,
|
||
ShieldIcon,
|
||
SettingsIcon,
|
||
GaugeIcon,
|
||
PaintbrushIcon,
|
||
GameIcon,
|
||
CoffeeIcon,
|
||
DownloadIcon,
|
||
SpinnerIcon,
|
||
} from '@modrinth/assets'
|
||
import { TabbedModal } from '@modrinth/ui'
|
||
import { computed, ref, watch } from 'vue'
|
||
import { useVIntl, defineMessage } from '@vintl/vintl'
|
||
import AppearanceSettings from '@/components/ui/settings/AppearanceSettings.vue'
|
||
import JavaSettings from '@/components/ui/settings/JavaSettings.vue'
|
||
import ResourceManagementSettings from '@/components/ui/settings/ResourceManagementSettings.vue'
|
||
import PrivacySettings from '@/components/ui/settings/PrivacySettings.vue'
|
||
import DefaultInstanceSettings from '@/components/ui/settings/DefaultInstanceSettings.vue'
|
||
import { getVersion } from '@tauri-apps/api/app'
|
||
import { version as getOsVersion, platform as getOsPlatform } from '@tauri-apps/plugin-os'
|
||
import { useTheming } from '@/store/state'
|
||
import FeatureFlagSettings from '@/components/ui/settings/FeatureFlagSettings.vue'
|
||
import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
|
||
import { get, set } from '@/helpers/settings.ts'
|
||
// [AR] Imports
|
||
import { installState, getRemote, updateState } from '@/helpers/update.js'
|
||
|
||
const updateModalView = ref(null)
|
||
const updateRequestFailView = ref(null)
|
||
|
||
const initUpdateModal = async () => {
|
||
updateModalView.value.show()
|
||
}
|
||
|
||
const initDownload = async () => {
|
||
updateModalView.value.hide()
|
||
const result = await getRemote(true);
|
||
if (!result) {
|
||
updateRequestFailView.value.show()
|
||
}
|
||
}
|
||
|
||
const themeStore = useTheming()
|
||
|
||
const { formatMessage } = useVIntl()
|
||
|
||
const devModeCounter = ref(0)
|
||
|
||
const developerModeEnabled = defineMessage({
|
||
id: 'app.settings.developer-mode-enabled',
|
||
defaultMessage: 'Developer mode enabled.',
|
||
})
|
||
|
||
const tabs = [
|
||
{
|
||
name: defineMessage({
|
||
id: 'app.settings.tabs.appearance',
|
||
defaultMessage: 'Appearance',
|
||
}),
|
||
icon: PaintbrushIcon,
|
||
content: AppearanceSettings,
|
||
},
|
||
{
|
||
name: defineMessage({
|
||
id: 'app.settings.tabs.privacy',
|
||
defaultMessage: 'Privacy',
|
||
}),
|
||
icon: ShieldIcon,
|
||
content: PrivacySettings,
|
||
},
|
||
{
|
||
name: defineMessage({
|
||
id: 'app.settings.tabs.java-installations',
|
||
defaultMessage: 'Java installations',
|
||
}),
|
||
icon: CoffeeIcon,
|
||
content: JavaSettings,
|
||
},
|
||
{
|
||
name: defineMessage({
|
||
id: 'app.settings.tabs.default-instance-options',
|
||
defaultMessage: 'Default instance options',
|
||
}),
|
||
icon: GameIcon,
|
||
content: DefaultInstanceSettings,
|
||
},
|
||
{
|
||
name: defineMessage({
|
||
id: 'app.settings.tabs.resource-management',
|
||
defaultMessage: 'Resource management',
|
||
}),
|
||
icon: GaugeIcon,
|
||
content: ResourceManagementSettings,
|
||
},
|
||
{
|
||
name: defineMessage({
|
||
id: 'app.settings.tabs.feature-flags',
|
||
defaultMessage: 'Feature flags',
|
||
}),
|
||
icon: ReportIcon,
|
||
content: FeatureFlagSettings,
|
||
developerOnly: true,
|
||
},
|
||
]
|
||
|
||
const modal = ref()
|
||
|
||
function show() {
|
||
modal.value.show()
|
||
}
|
||
|
||
const isOpen = computed(() => modal.value?.isOpen)
|
||
|
||
defineExpose({ show, isOpen })
|
||
|
||
const version = await getVersion()
|
||
const osPlatform = getOsPlatform()
|
||
const osVersion = getOsVersion()
|
||
const settings = ref(await get())
|
||
|
||
watch(
|
||
settings,
|
||
async () => {
|
||
await set(settings.value)
|
||
},
|
||
{ deep: true },
|
||
)
|
||
|
||
function devModeCount() {
|
||
devModeCounter.value++
|
||
if (devModeCounter.value > 5) {
|
||
themeStore.devMode = !themeStore.devMode
|
||
settings.value.developer_mode = !!themeStore.devMode
|
||
devModeCounter.value = 0
|
||
|
||
if (!themeStore.devMode && tabs[modal.value.selectedTab].developerOnly) {
|
||
modal.value.setTab(0)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<template>
|
||
<ModalWrapper ref="modal">
|
||
<template #title>
|
||
<span class="flex items-center gap-2 text-lg font-extrabold text-contrast">
|
||
<SettingsIcon /> Settings
|
||
</span>
|
||
</template>
|
||
|
||
<TabbedModal :tabs="tabs.filter((t) => !t.developerOnly || themeStore.devMode)">
|
||
<template #footer>
|
||
<div class="mt-auto text-secondary text-sm">
|
||
<p v-if="themeStore.devMode" class="text-brand font-semibold m-0 mb-2">
|
||
{{ formatMessage(developerModeEnabled) }}
|
||
</p>
|
||
<div class="flex items-center gap-3">
|
||
<button
|
||
class="p-0 m-0 bg-transparent border-none cursor-pointer button-animation"
|
||
:class="{ 'text-brand': themeStore.devMode, 'text-secondary': !themeStore.devMode }"
|
||
@click="devModeCount">
|
||
<AstralRinthLogo class="w-6 h-6" />
|
||
</button>
|
||
<div>
|
||
<p class="m-0">AstralRinth App {{ version }}</p>
|
||
<p class="m-0">
|
||
<span v-if="osPlatform === 'macos'">MacOS</span>
|
||
<span v-else class="capitalize">{{ osPlatform }}</span>
|
||
{{ osVersion }}
|
||
</p>
|
||
</div>
|
||
<div v-if="updateState" class="w-8 h-8 cursor-pointer hover:brightness-75 neon-icon pulse">
|
||
<template v-if="installState">
|
||
<SpinnerIcon class="size-6 animate-spin" v-tooltip.bottom="'Installing in process...'" />
|
||
</template>
|
||
<template v-else>
|
||
<DownloadIcon class="size-6" v-tooltip.bottom="'View update info'" @click="!installState && (initUpdateModal(), getRemote(false))" />
|
||
</template>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</TabbedModal>
|
||
<!-- [AR] Feature -->
|
||
<ModalWrapper ref="updateModalView" :has-to-type="false" header="Request to update the AstralRinth launcher">
|
||
<div class="space-y-4">
|
||
<div class="space-y-2">
|
||
<p>The new version of the AstralRinth launcher is available.</p>
|
||
<p>Your version is outdated. We recommend that you update to the latest version.</p>
|
||
<p><strong>⚠️ Warning ⚠️</strong></p>
|
||
<p>
|
||
Before updating, make sure that you have saved all running instances and made a backup copy of the instances
|
||
that are valuable to you. Remember that the authors of the product are not responsible for the breakdown of
|
||
your files, so you should always make copies of them and keep them in a safe place.
|
||
</p>
|
||
</div>
|
||
<div class="text-sm text-secondary space-y-1">
|
||
<a class="neon-text" href="https://me.astralium.su/get/ar" target="_blank"
|
||
rel="noopener noreferrer"><strong>Source:</strong> Git Astralium</a>
|
||
<p>
|
||
<strong>Version on remote server:</strong>
|
||
<span id="releaseData" class="neon-text"></span>
|
||
</p>
|
||
<p>
|
||
<strong>Version on local device:</strong>
|
||
<span class="neon-text">v{{ version }}</span>
|
||
</p>
|
||
</div>
|
||
|
||
<div class="absolute bottom-4 right-4 flex items-center gap-4 neon-button neon">
|
||
<Button class="bordered" @click="updateModalView.hide()">Cancel</Button>
|
||
<Button class="bordered" @click="initDownload()">Download file</Button>
|
||
</div>
|
||
</div>
|
||
</ModalWrapper>
|
||
<ModalWrapper ref="updateRequestFailView" :has-to-type="false" header="Failed to request a file from the server :(">
|
||
<div class="space-y-4">
|
||
<div class="space-y-2">
|
||
<p><strong>Error occurred</strong></p>
|
||
<p>Unfortunately, the program was unable to download the file from our servers.</p>
|
||
<p>
|
||
Please try downloading it yourself from
|
||
<a class="neon-text" href="https://me.astralium.su/get/ar" target="_blank" rel="noopener noreferrer">Git
|
||
Astralium</a>
|
||
if there are any updates available.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="text-sm text-secondary">
|
||
<p>
|
||
<strong>Local AstralRinth:</strong>
|
||
<span class="neon-text">v{{ version }}</span>
|
||
</p>
|
||
</div>
|
||
|
||
<div class="absolute bottom-4 right-4 flex items-center gap-4 neon-button neon">
|
||
<Button class="bordered" @click="updateRequestFailView.hide()">Close</Button>
|
||
</div>
|
||
</div>
|
||
</ModalWrapper>
|
||
</ModalWrapper>
|
||
</template>
|
||
|
||
<style lang="scss" scoped>
|
||
@import '../../../../../../packages/assets/styles/neon-icon.scss';
|
||
@import '../../../../../../packages/assets/styles/neon-button.scss';
|
||
@import '../../../../../../packages/assets/styles/neon-text.scss';
|
||
</style> |