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 <[email protected]>
modrinth · Jul 18, 2024 · f171364 · f171364
1 parent 8704d3a
commit f171364
Show file tree

Hide file tree

Showing 16 changed files with 141 additions and 197 deletions.
diff --git 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",

diff --git 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>

diff --git 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>
diff --git 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>

diff --git 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>

diff --git 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)}`)"
           >

diff --git 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);
   }
 }
 

diff --git 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>

diff --git 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>

diff --git 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;
   }
 }
 

diff --git 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

diff --git a/package.json b/package.json
@@ -3,10 +3,11 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
-    "web:build": "turbo run build --filter=@modrinth/frontend",
-    "pages:build": "NITRO_PRESET=cloudflare-pages pnpm --filter frontend run build",
     "web:dev": "turbo run dev --filter=@modrinth/frontend",
+    "web:build": "turbo run build --filter=@modrinth/frontend",
     "app:dev": "turbo run dev --filter=@modrinth/app",
+    "app:build": "turbo run build --filter=@modrinth/app",
+    "pages:build": "NITRO_PRESET=cloudflare-pages pnpm --filter frontend run build",
     "build": "turbo run build --continue",
     "lint": "turbo run lint --continue",
     "test": "turbo run test --continue"

diff --git a/packages/assets/styles/variables.scss b/packages/assets/styles/variables.scss
@@ -3,11 +3,6 @@ html {
   --dark-color-base: #b0bac5;
   --dark-color-contrast: #ecf9fb;
 
-  --color-ad: rgba(125, 75, 162, 0.2);
-  --color-ad-raised: rgba(190, 140, 243, 0.5);
-  --color-ad-contrast: black;
-  --color-ad-highlight: var(--color-purple);
-
   --gap-xs: 0.25rem;
   --gap-sm: 0.5rem;
   --gap-md: 0.75rem;
@@ -60,6 +55,11 @@ html {
 
   --color-tooltip-text: var(--color-accent-contrast);
   --color-tooltip-bg: var(--color-base);
+
+  --color-ad: #d6e6f9;
+  --color-ad-raised: #b1c8e4;
+  --color-ad-contrast: var(--color-text);
+  --color-ad-highlight: #088cdb;
 }
 
 .dark-mode,
@@ -98,11 +98,18 @@ html {
 
   --color-tooltip-text: var(--color-base);
   --color-tooltip-bg: var(--color-button-bg);
+
+  --color-ad: #1f324a;
+  --color-ad-raised: #2e4057;
+  --color-ad-contrast: var(--color-text);
+  --color-ad-highlight: #088cdb;
 }
 
 .oled-mode {
   @extend .dark-mode;
   --color-bg: #000000;
   --color-raised-bg: #101013;
   --color-button-bg: #222329;
+
+  --color-ad: #0d1828;
 }