Merge commit '81ec068747a39e927c42273011252daaa58f1e14' into feature-clean

apps/app-frontend/src/components/ui/modal/AppSettingsModal.vue

@@ -0,0 +1,161 @@
+<script setup lang="ts">
+import {
+  ReportIcon,
+  ModrinthIcon,
+  ShieldIcon,
+  SettingsIcon,
+  GaugeIcon,
+  PaintBrushIcon,
+  GameIcon,
+  CoffeeIcon,
+} 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'
+
+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"
+            >
+              <ModrinthIcon class="w-6 h-6" />
+            </button>
+            <div>
+              <p class="m-0">Modrinth 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>
+        </div>
+      </template>
+    </TabbedModal>
+  </ModalWrapper>
+</template>

apps/app-frontend/src/components/ui/modal/ConfirmModalWrapper.vue

@@ -6,7 +6,7 @@ import { useTheming } from '@/store/theme.js'
 
 const themeStore = useTheming()
 
-defineProps({
+const props = defineProps({
   confirmationText: {
     type: String,
     default: '',
@@ -25,10 +25,22 @@ defineProps({
     default: 'No description defined',
     required: true,
   },
+  proceedIcon: {
+    type: Object,
+    default: undefined,
+  },
   proceedLabel: {
     type: String,
     default: 'Proceed',
   },
+  danger: {
+    type: Boolean,
+    default: true,
+  },
+  showAdOnClose: {
+    type: Boolean,
+    default: true,
+  },
 })
 
 const emit = defineEmits(['proceed'])
@@ -44,13 +56,29 @@ defineExpose({
   },
 })
 
+// function onModalHide() {
+//   if (props.showAdOnClose) {
+//     show_ads_window()
+//   }
+// }
+
 function proceed() {
   emit('proceed')
 }
 </script>
 
 <template>
-  <ConfirmModal ref="modal" :confirmation-text="confirmationText" :has-to-type="hasToType" :title="title"
-    :description="description" :proceed-label="proceedLabel" :on-hide="onModalHide"
-    :noblur="!themeStore.advancedRendering" @proceed="proceed" />
+  <ConfirmModal
+    ref="modal"
+    :confirmation-text="confirmationText"
+    :has-to-type="hasToType"
+    :title="title"
+    :description="description"
+    :proceed-icon="proceedIcon"
+    :proceed-label="proceedLabel"
+    :on-hide="onModalHide"
+    :noblur="!themeStore.advancedRendering"
+    :danger="danger"
+    @proceed="proceed"
+  />
 </template>

apps/app-frontend/src/components/ui/modal/InstanceSettingsModal.vue

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import {
+  ChevronRightIcon,
+  CoffeeIcon,
+  InfoIcon,
+  WrenchIcon,
+  MonitorIcon,
+  CodeIcon,
+} from '@modrinth/assets'
+import { Avatar, TabbedModal, type TabbedModalTab } from '@modrinth/ui'
+import { ref } from 'vue'
+import { defineMessage, useVIntl } from '@vintl/vintl'
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import GeneralSettings from '@/components/ui/instance_settings/GeneralSettings.vue'
+import { convertFileSrc } from '@tauri-apps/api/core'
+import InstallationSettings from '@/components/ui/instance_settings/InstallationSettings.vue'
+import JavaSettings from '@/components/ui/instance_settings/JavaSettings.vue'
+import WindowSettings from '@/components/ui/instance_settings/WindowSettings.vue'
+import HooksSettings from '@/components/ui/instance_settings/HooksSettings.vue'
+import type { InstanceSettingsTabProps } from '../../../helpers/types'
+
+const { formatMessage } = useVIntl()
+
+const props = defineProps<InstanceSettingsTabProps>()
+
+const tabs: TabbedModalTab<InstanceSettingsTabProps>[] = [
+  {
+    name: defineMessage({
+      id: 'instance.settings.tabs.general',
+      defaultMessage: 'General',
+    }),
+    icon: InfoIcon,
+    content: GeneralSettings,
+  },
+  {
+    name: defineMessage({
+      id: 'instance.settings.tabs.installation',
+      defaultMessage: 'Installation',
+    }),
+    icon: WrenchIcon,
+    content: InstallationSettings,
+  },
+  {
+    name: defineMessage({
+      id: 'instance.settings.tabs.window',
+      defaultMessage: 'Window',
+    }),
+    icon: MonitorIcon,
+    content: WindowSettings,
+  },
+  {
+    name: defineMessage({
+      id: 'instance.settings.tabs.java',
+      defaultMessage: 'Java and memory',
+    }),
+    icon: CoffeeIcon,
+    content: JavaSettings,
+  },
+  {
+    name: defineMessage({
+      id: 'instance.settings.tabs.hooks',
+      defaultMessage: 'Launch hooks',
+    }),
+    icon: CodeIcon,
+    content: HooksSettings,
+  },
+]
+
+const modal = ref()
+
+function show() {
+  modal.value.show()
+}
+
+defineExpose({ show })
+
+const titleMessage = defineMessage({
+  id: 'instance.settings.title',
+  defaultMessage: 'Settings',
+})
+</script>
+<template>
+  <ModalWrapper ref="modal">
+    <template #title>
+      <span class="flex items-center gap-2 text-lg font-semibold text-primary">
+        <Avatar
+          :src="instance.icon_path ? convertFileSrc(instance.icon_path) : undefined"
+          size="24px"
+          :tint-by="props.instance.path"
+        />
+        {{ instance.name }} <ChevronRightIcon />
+        <span class="font-extrabold text-contrast">{{ formatMessage(titleMessage) }}</span>
+      </span>
+    </template>
+
+    <TabbedModal :tabs="tabs.map((tab) => ({ ...tab, props }))" />
+  </ModalWrapper>
+</template>

apps/app-frontend/src/components/ui/modal/ModalWrapper.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import { Modal } from '@modrinth/ui'
-
+import { NewModal as Modal } from '@modrinth/ui'
+// import { show_ads_window, hide_ads_window } from '@/helpers/ads.js'
 import { useTheming } from '@/store/theme.js'
 
 const themeStore = useTheming()
@@ -21,8 +21,11 @@ const props = defineProps({
       return () => { }
     },
   },
+  showAdOnClose: {
+    type: Boolean,
+    default: true,
+  },
 })
-
 const modal = ref(null)
 
 defineExpose({
@@ -36,12 +39,18 @@ defineExpose({
 })
 
 function onModalHide() {
+  // if (props.showAdOnClose) {
+  //   show_ads_window()
+  // }
   props.onHide()
 }
 </script>
 
 <template>
   <Modal ref="modal" :header="header" :noblur="!themeStore.advancedRendering" @hide="onModalHide">
+    <template #title>
+      <slot name="title" />
+    </template>
     <slot />
   </Modal>
 </template>