More monorepo migration fixes (#1257)

* fix: More monorepo migration fixes * fix: Corrected icon sizes & other fixes * fix(theseus): Change color of mod installation button * fix(theseus): More Turborepo fixes * chore: Prettier --------- Co-authored-by: Geometrically <18202329+Geometrically@users.noreply.github.com>
2024-07-18 07:01:58 +02:00
parent 8704d3acb3
commit f1713647cf
16 changed files with 141 additions and 197 deletions
--- a/apps/app-frontend/package.json
+++ b/apps/app-frontend/package.json
@@ -19,7 +19,6 @@
    "floating-vue": "^5.2.2",
    "mixpanel-browser": "^2.49.0",
    "ofetch": "^1.3.4",
-    "omorphia": "^0.4.41",
    "pinia": "^2.1.7",
    "tauri-plugin-window-state-api": "github:tauri-apps/tauri-plugin-window-state#v1",
    "vite-svg-loader": "^5.1.0",
--- a/apps/app-frontend/src/components/GridDisplay.vue
+++ b/apps/app-frontend/src/components/GridDisplay.vue
@@ -243,7 +243,7 @@ const filteredResults = computed(() => {
    <div class="iconified-input">
      <SearchIcon />
      <input v-model="search" type="text" placeholder="Search" class="search-input" />
-      <Button @click="() => (search = '')">
+      <Button class="r-btn" @click="() => (search = '')">
        <XIcon />
      </Button>
    </div>
--- a/apps/app-frontend/src/components/ui/AddContentButton.vue
+++ b/apps/app-frontend/src/components/ui/AddContentButton.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { DropdownIcon, FolderOpenIcon, SearchIcon } from '@modrinth/assets'
+import { Button, OverflowMenu } from '@modrinth/ui'
+import { open } from '@tauri-apps/api/dialog'
+import { add_project_from_path, get } from '@/helpers/profile.js'
+import { handleError } from '@/store/notifications.js'
+import { useRouter } from 'vue-router'
+
+const props = defineProps({
+  instance: {
+    type: Object,
+    required: true,
+  },
+})
+
+const router = useRouter()
+
+const handleAddContentFromFile = async () => {
+  const newProject = await open({ multiple: true })
+  if (!newProject) return
+
+  for (const project of newProject) {
+    await add_project_from_path(props.instance.path, project, 'mod').catch(handleError)
+  }
+  props.instance.initProjects(await get(props.instance.path).catch(handleError))
+}
+
+const handleSearchContent = async () => {
+  await router.push({
+    path: `/browse/${props.instance.metadata.loader === 'vanilla' ? 'datapack' : 'mod'}`,
+    query: { i: props.instance.path },
+  })
+}
+</script>
+
+<template>
+  <div class="joined-buttons">
+    <Button color="primary" @click="handleSearchContent"><SearchIcon /> Add content </Button>
+
+    <OverflowMenu
+      :options="[
+        {
+          id: 'search',
+          action: () => handleSearchContent,
+        },
+        {
+          id: 'from_file',
+          action: () => handleAddContentFromFile,
+        },
+      ]"
+      class="btn btn-primary btn-dropdown-animation icon-only"
+    >
+      <DropdownIcon />
+      <template #search>
+        <SearchIcon />
+        <span class="no-wrap"> Search </span>
+      </template>
+      <template #from_file>
+        <FolderOpenIcon />
+        <span class="no-wrap"> Add from file </span>
+      </template>
+    </OverflowMenu>
+  </div>
+</template>
--- a/apps/app-frontend/src/components/ui/ExportModal.vue
+++ b/apps/app-frontend/src/components/ui/ExportModal.vue
@@ -113,7 +113,7 @@ const exportPack = async () => {
        <div class="iconified-input">
          <PackageIcon />
          <input v-model="nameInput" type="text" placeholder="Modpack name" class="input" />
-          <Button @click="nameInput = ''">
+          <Button class="r-btn" @click="nameInput = ''">
            <XIcon />
          </Button>
        </div>
@@ -123,7 +123,7 @@ const exportPack = async () => {
        <div class="iconified-input">
          <VersionIcon />
          <input v-model="versionInput" type="text" placeholder="1.0.0" class="input" />
-          <Button @click="versionInput = ''">
+          <Button class="r-btn" @click="versionInput = ''">
            <XIcon />
          </Button>
        </div>
--- a/apps/app-frontend/src/components/ui/InstanceCreationModal.vue
+++ b/apps/app-frontend/src/components/ui/InstanceCreationModal.vue
@@ -110,7 +110,7 @@
              placeholder="Path to launcher"
              @change="setPath"
            />
-            <Button @click="() => (selectedLauncherPath = '')">
+            <Button class="r-btn" @click="() => (selectedLauncherPath = '')">
              <XIcon />
            </Button>
          </div>
--- a/apps/app-frontend/src/components/ui/ModInstallModal.vue
+++ b/apps/app-frontend/src/components/ui/ModInstallModal.vue
@@ -228,7 +228,7 @@ const check_valid = computed(() => {
      <div class="profiles" :class="{ 'hide-creation': !showCreation }">
        <div v-for="profile in profiles" :key="profile.metadata.name" class="option">
          <Button
-            color="raised"
+            transparent
            class="profile-button"
            @click="$router.push(`/instance/${encodeURIComponent(profile.path)}`)"
          >
--- a/apps/app-frontend/src/components/ui/RunningAppBar.vue
+++ b/apps/app-frontend/src/components/ui/RunningAppBar.vue
@@ -335,8 +335,12 @@ onBeforeUnmount(() => {
  width: 1.25rem !important;
  height: 1.25rem !important;

+  svg {
+    min-width: 1.25rem;
+  }
+
  &.stop {
-    --text-color: var(--color-red) !important;
+    color: var(--color-red);
  }
 }

--- a/apps/app-frontend/src/pages/Browse.vue
+++ b/apps/app-frontend/src/pages/Browse.vue
@@ -703,7 +703,7 @@ onUnmounted(() => unlistenOffline())
            :placeholder="`Search ${projectType}s...`"
            @input="onSearchChange(1)"
          />
-          <Button @click="() => clearSearch()">
+          <Button class="r-btn" @click="() => clearSearch()">
            <XIcon />
          </Button>
        </div>
--- a/apps/app-frontend/src/pages/Settings.vue
+++ b/apps/app-frontend/src/pages/Settings.vue
@@ -165,7 +165,7 @@ async function refreshDir() {
        <div class="iconified-input">
          <BoxIcon />
          <input id="appDir" v-model="settingsDir" type="text" class="input" />
-          <Button @click="findLauncherDir">
+          <Button class="r-btn" @click="findLauncherDir">
            <FolderSearchIcon />
          </Button>
        </div>
--- a/apps/app-frontend/src/pages/instance/Mods.vue
+++ b/apps/app-frontend/src/pages/instance/Mods.vue
@@ -20,7 +20,7 @@
          class="text-input"
          autocomplete="off"
        />
-        <Button @click="() => (searchFilter = '')">
+        <Button class="r-btn" @click="() => (searchFilter = '')">
          <XIcon />
        </Button>
      </div>
@@ -42,24 +42,7 @@
      <UpdatedIcon />
      Update all
    </Button>
-
-    <!--    <DropdownButton-->
-    <!--      v-if="!isPackLocked"-->
-    <!--      :options="['search', 'from_file']"-->
-    <!--      default-value="search"-->
-    <!--      name="add-content-dropdown"-->
-    <!--      color="primary"-->
-    <!--      @option-click="handleContentOptionClick"-->
-    <!--    >-->
-    <!--      <template #search>-->
-    <!--        <SearchIcon />-->
-    <!--        <span class="no-wrap"> Add content </span>-->
-    <!--      </template>-->
-    <!--      <template #from_file>-->
-    <!--        <FolderOpenIcon />-->
-    <!--        <span class="no-wrap"> Add from file </span>-->
-    <!--      </template>-->
-    <!--    </DropdownButton>-->
+    <AddContentButton v-if="!isPackLocked" :instance="instance" />
  </Card>
  <Pagination
    v-if="projects.length > 0"
@@ -241,7 +224,7 @@
              <TrashIcon />
            </Button>
          </div>
-          <AnimatedLogo v-if="mod.updating" class="btn icon-only updating-indicator"></AnimatedLogo>
+          <AnimatedLogo v-if="mod.updating" class="btn icon-only updating-indicator" />
          <div
            v-else
            v-tooltip="isPackLocked ? 'Unlock this instance to update mods.' : 'Update project'"
@@ -283,24 +266,7 @@
    </div>
    <h3>No projects found</h3>
    <p class="empty-subtitle">Add a project to get started</p>
-    <div class="empty-action">
-      <DropdownButton
-        :options="['search', 'from_file']"
-        default-value="search"
-        name="add-content-dropdown-from-empty"
-        color="primary"
-        @option-click="handleContentOptionClick"
-      >
-        <template #search>
-          <SearchIcon />
-          <span class="no-wrap"> Add content </span>
-        </template>
-        <template #from_file>
-          <FolderOpenIcon />
-          <span class="no-wrap"> Add from file </span>
-        </template>
-      </DropdownButton>
-    </div>
+    <AddContentButton :instance="instance" />
  </div>
  <Pagination
    v-if="projects.length > 0"
@@ -372,7 +338,6 @@ import {
  SearchIcon,
  UpdatedIcon,
  FolderOpenIcon,
-  // DropdownButton,
  XIcon,
  ShareIcon,
  DropdownIcon,
@@ -395,7 +360,6 @@ import {
 } from '@modrinth/ui'
 import { formatProjectType } from '@modrinth/utils'
 import { computed, onUnmounted, ref, watch } from 'vue'
-import { useRouter } from 'vue-router'
 import {
  add_project_from_path,
  get,
@@ -406,15 +370,13 @@ import {
 } from '@/helpers/profile.js'
 import { handleError } from '@/store/notifications.js'
 import { mixpanel_track } from '@/helpers/mixpanel'
-import { open } from '@tauri-apps/api/dialog'
 import { listen } from '@tauri-apps/api/event'
 import { convertFileSrc } from '@tauri-apps/api/tauri'
 import { highlightModInProfile } from '@/helpers/utils.js'
 import { MenuIcon, ToggleIcon, TextInputIcon, AddProjectImage, PackageIcon } from '@/assets/icons'
 import ExportModal from '@/components/ui/ExportModal.vue'
 import ModpackVersionModal from '@/components/ui/ModpackVersionModal.vue'
-
-const router = useRouter()
+import AddContentButton from '@/components/ui/AddContentButton.vue'

 const props = defineProps({
  instance: {
@@ -846,23 +808,6 @@ const handleRightClick = (event, mod) => {
  }
 }

-const handleContentOptionClick = async (args) => {
-  if (args.option === 'search') {
-    await router.push({
-      path: `/browse/${props.instance.metadata.loader === 'vanilla' ? 'datapack' : 'mod'}`,
-      query: { i: props.instance.path },
-    })
-  } else if (args.option === 'from_file') {
-    const newProject = await open({ multiple: true })
-    if (!newProject) return
-
-    for (const project of newProject) {
-      await add_project_from_path(props.instance.path, project, 'mod').catch(handleError)
-    }
-    initProjects(await get(props.instance.path).catch(handleError))
-  }
-}
-
 watch(selectAll, () => {
  for (const [key, value] of Array.from(selectionMap.value)) {
    if (value !== selectAll.value) {
@@ -967,13 +912,21 @@ onUnmounted(() => {
    }
  }

-  .btn {
+  :deep(.btn) {
    height: 2.5rem;
  }

  .dropdown-input {
    flex-grow: 1;

+    .animated-dropdown {
+      width: unset;
+
+      :deep(.selected) {
+        border-radius: var(--radius-md) 0 0 var(--radius-md);
+      }
+    }
+
    .iconified-input {
      width: 100%;

@@ -1159,8 +1112,12 @@ onUnmounted(() => {
 </style>
 <style lang="scss">
 .updating-indicator {
+  height: 2.25rem !important;
+  width: 2.25rem !important;
+
  svg {
-    margin-left: 0.5rem !important;
+    height: 1.25rem !important;
+    width: 1.25rem !important;
  }
 }

--- a/apps/app/tauri.conf.json
+++ b/apps/app/tauri.conf.json
@@ -78,7 +78,7 @@
      }
    },
    "security": {
-      "csp": "default-src 'self'; connect-src https://modrinth.com https://*.modrinth.com https://mixpanel.com https://*.mixpanel.com https://*.cloudflare.com https://api.mclo.gs; font-src https://cdn-raw.modrinth.com/fonts/inter/; img-src tauri: https: data: blob: 'unsafe-inline' asset: https://asset.localhost; script-src https://*.cloudflare.com 'self'; frame-src https://*.cloudflare.com https://www.youtube.com https://www.youtube-nocookie.com https://discord.com 'self'; style-src unsafe-inline 'self'"
+      "csp": "default-src 'self'; connect-src https://modrinth.com https://*.modrinth.com https://mixpanel.com https://*.mixpanel.com https://*.cloudflare.com https://api.mclo.gs; font-src https://cdn-raw.modrinth.com/fonts/inter/; img-src tauri: https: data: blob: 'unsafe-inline' asset: https://asset.localhost; script-src https://*.cloudflare.com 'self'; frame-src https://*.cloudflare.com https://www.youtube.com https://www.youtube-nocookie.com https://discord.com 'self'; style-src 'unsafe-inline' 'self'"
    },
    "updater": {
      "active": false