Merge pull request #2 from SbokyZahodi/1.2.0

1.2.0

.vscode/settings.json

@@ -26,7 +26,7 @@
   ],
 
   "explorer.fileNesting.patterns": {
-    "package.json": "package-lock.json, yarn.lock, uno.config.ts, .gitattributes, .gitignore, .npmrc, tsconfig.json, eslint.config.js, README.md, app.config.ts, .env, nuxt.config.ts, yarn-error.log, bun.lockb, LICENSE"
+    "package.json": "package-lock.json, yarn.lock, uno.config.ts, .gitattributes, .gitignore, .npmrc, tsconfig.json, eslint.config.js, README.md, app.config.ts, .env, nuxt.config.ts, yarn-error.log, bun.lockb, LICENSE, error.vue"
   },
 
   // Enable eslint for all supported languages

app.config.ts

@@ -21,7 +21,14 @@ export default defineAppConfig({
 
     notifications: {
       // Show toasts at the top right of the screen
-      position: 'bottom-0 ',
+      position: 'bottom-0 left-0',
+      // container: 'center',
+    },
+
+    notification: {
+      default: {
+        timeout: 3000,
+      },
     },
 
     modal: {

error.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { NuxtError } from '#app'
+
+defineProps({
+  error: Object as () => NuxtError,
+})
+
+const handleError = () => clearError({ redirect: '/' })
+</script>
+
+<template>
+  <UCard class="center h-90vh m-10 light:bg-blue-1">
+    <UNotFound class="">
+      <template v-if="error.statusCode === 404">
+        <h2 class="text-3xl">
+          {{ error.statusCode }}
+        </h2>
+        <UButton class="mt-4 w-50 center" size="xl" @click="handleError">
+          Back to home
+        </UButton>
+      </template>
+      <template v-else>
+        <h2 class="text-3xl">
+          {{ error.statusCode }}
+        </h2>
+        <NuxtLink to="https://github.com/SbokyZahodi/modpack-constructor/issues">
+          <UButton class="mt-4 w-50 center" size="xl">
+            Create issue
+          </UButton>
+        </NuxtLink>
+      </template>
+    </UNotFound>
+  </UCard>
+</template>

features/CopyModList/api/index.ts

@@ -0,0 +1 @@
+export { }

features/CopyModList/index.ts

@@ -0,0 +1,3 @@
+export * from './api'
+export * from './model'
+export * from './ui'

features/CopyModList/model/index.ts

@@ -0,0 +1 @@
+export { }

features/CopyModList/ui/CopyModList.vue

@@ -0,0 +1,42 @@
+<script lang='ts' setup>
+import saveAs from 'file-saver'
+
+const props = defineProps<{
+  modlist: IShortModInfo[]
+}>()
+
+const pending = ref(false)
+
+async function saveModlistAsTxt() {
+  const modlist = await $api<IModInfo[]>('projects', {
+    params: {
+      ids: JSON.stringify(props.modlist.map(mod => mod.slug)),
+    },
+    onRequest() {
+      pending.value = true
+    },
+    onResponse() {
+      pending.value = false
+    },
+    onRequestError({ error }) {
+      useToast().add({ title: error.message, color: 'red' })
+      pending.value = false
+    },
+  })
+
+  const title = `Total mods: ${modlist.length}`
+  const mods = modlist.map(mod => `* (${mod.title}) - ${mod.description} | https://modrinth.com/mod/${mod.slug}`).join('\n\n')
+
+  const file = `${title}\n \n${mods}`
+
+  const blob = new Blob([file], { type: 'text/plain;charset=utf-8' })
+
+  saveAs(blob, 'modlist.txt')
+}
+</script>
+
+<template>
+  <UButton :loading="pending" @click="saveModlistAsTxt">
+    Mods installed: {{ modlist.length }}
+  </UButton>
+</template>

features/CopyModList/ui/index.ts

@@ -0,0 +1,3 @@
+import CopyModList from './CopyModList.vue'
+
+export { CopyModList }

features/SelectLoader/ui/SelectLoader.vue

@@ -1,5 +1,9 @@
 <script lang='ts' setup>
-const loader = ref(HGetQuery('loader', 'All')) as Ref<ILoader>
+import { useModpack } from '~/widgets/ModPack'
+
+const { modpack } = useModpack()
+
+const loader = ref(HGetQuery('loader', modpack.value.loader)) as Ref<ILoader>
 
 const items = [{
   label: 'All',
@@ -15,6 +19,11 @@ const items = [{
 
 const currentIndex = computed(() => items.findIndex(el => el.label === loader.value))
 
+onMounted(() => {
+  if (!HGetQuery('loader'))
+    HSetQuery('loader', modpack.value.loader)
+})
+
 function setLoader(event: number) {
   if (items[event].label === 'All') {
     HSetQuery('loader', null)

features/ShowModInfo/ui/AddModButton.vue

@@ -15,7 +15,6 @@ async function fetchModsWithDependencies() {
     if (props.mod.project_type === 'mod') {
       return {
         game_versions: JSON.stringify([modpack.value.version]),
-        featured: true,
         loaders: JSON.stringify([modpack.value.loader]).toLowerCase(),
       }
     }
@@ -32,8 +31,11 @@ async function fetchModsWithDependencies() {
     params: params(),
   })
 
-  if (!versions.length)
-    throw new Error('No versions found')
+  if (!versions.length) {
+    useToast().add({ title: 'This mod is incompatible with your version', color: 'red' })
+    pending.value = false
+    return
+  }
 
   const dependencies = versions[0].dependencies.filter(({ dependency_type }) => dependency_type === 'required')
 
@@ -79,7 +81,7 @@ const isModCompatible = computed(() => {
 </script>
 
 <template>
-  <UButton class="center font-semibold w-full p-4" :loading="pending" :disabled="!isModCompatible.compatible" variant="solid" @click="fetchModsWithDependencies">
+  <UButton class="center w-full p-4 font-semibold" :loading="pending" :disabled="!isModCompatible.compatible" variant="solid" @click="fetchModsWithDependencies">
     {{ isModCompatible.message }}
   </UButton>
 </template>

layouts/default.vue

@@ -13,7 +13,7 @@ import { Header } from '~/widgets/Header'
     <ModPack />
     <Header />
     <ShowModInfo />
-    <UNotifications class="md:w-100" />
+    <UNotifications class="md:w-120" />
     <slot />
   </main>
 </template>

pages/HomePage/model/useFilters.ts

@@ -16,21 +16,21 @@ export default () => {
   })
 
   const searchOptions = computed(() => {
-    const list = []
+    const options = []
 
-    list.push([`project_type:${project_type.value}`])
-    list.push([`versions:${modpack.value.version}`])
+    options.push([`project_type:${project_type.value}`])
+    options.push([`versions:${modpack.value.version}`])
 
     if (categories.value)
-      categories.value.split(',').forEach(category => list.push([`categories:${category}`]))
+      categories.value.split(',').forEach(category => options.push([`categories:${category}`]))
 
     if (project_type.value === 'datapack')
-      list.push([`project_type:datapack`])
+      options.push([`project_type:datapack`])
 
     if (loader.value && project_type.value === 'mod')
-      list.push([`categories:${loader.value}`])
+      options.push([`categories:${loader.value}`])
 
-    return JSON.stringify(list)
+    return JSON.stringify(options)
   })
 
   const modlistPage = computed(() => {
@@ -46,6 +46,5 @@ export default () => {
     project_type,
     loader,
     categories,
-
   }
 }

pages/HomePage/ui/HomePage.vue

@@ -39,9 +39,9 @@ const { data, pending } = await useAPI<{ limit: number, offset: number, total_hi
     </div>
 
     <SelectCategory class="my-1" />
-    <div class="items-center justify-between md:flex my-4">
+    <div class="items-center justify-between lg:flex my-4">
       <SelectLoader />
-      <UPagination v-if="data" v-model="searchPage" :total="data.total_hits" class="relative bottom-1 mt-5 md:mt-0" :page-count="20" />
+      <UPagination v-if="data" v-model="searchPage" :total="data.total_hits" class="relative bottom-1 mt-5 lg:mt-0" :page-count="20" />
     </div>
 
     <div class="my-4">

shared/config/icons.ts

@@ -4,4 +4,5 @@ export enum ICONS {
   GEAR = 'material-symbols:settings-rounded',
   CUBE = 'clarity:block-solid',
   TRASH = 'octicon:trash-16',
+  UPDATE = 'ic:round-sync'
 }

widgets/ModPack/model/useModpack.ts

@@ -60,8 +60,14 @@ export default () => {
       return
     }
 
-    modpack.value.modlist = []
-    useToast().add({ title: 'All mods removed', icon: 'ic:baseline-delete', color: 'green' })
+    const actions = ref([{
+      label: 'Confirm',
+      click: () => modpack.value.modlist = [],
+    }, {
+      label: 'Cancel',
+    }])
+
+    useToast().add({ title: 'Remove all mods?', icon: 'ic:baseline-delete', color: 'red', actions, timeout: 0, closeButton: false })
   }
 
   return {

widgets/ModPack/ui/DownloadModpack.vue

@@ -12,8 +12,12 @@ const { state, downloadModpack } = useDownloadModpack()
   <UModal v-model="state.isFetching" prevent-close :ui="{ background: 'bg-transparent shadow-none dark:bg-transparent' }">
     <UIcon class="mx-auto text-5xl text-sky mb-4" name="material-symbols:download-rounded" />
     <UProgress animation="carousel" />
-    <p class="mt-2 flex items-center gap-2 justify-end text-end">
-      Downloading mods... <UIcon name="mingcute:loading-3-line" class="text-xl animate-spin" /> <span class="w-28">{{ toMegabytes(state.loaded) }} / {{ toMegabytes(state.total) }}</span>
-    </p>
+    <div class="flex justify-between items-center">
+      <p class="mt-2 flex items-center gap-2 justify-end text-end">
+        Downloading mods... <UIcon name="mingcute:loading-3-line" class="text-xl animate-spin" />
+      </p>
+
+      <span class="w-28">{{ toMegabytes(state.loaded) }} / {{ toMegabytes(state.total) }}</span>
+    </div>
   </UModal>
 </template>

widgets/ModPack/ui/ModPack.vue

@@ -1,8 +1,10 @@
 <script lang='ts' setup>
 import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
+import { RecycleScroller } from 'vue-virtual-scroller'
 import { useModpack } from '..'
 import ModPackConfigurator from './ModPackConfigurator.vue'
 import DownloadModpack from './DownloadModpack.vue'
+import { CopyModList } from '~/features/CopyModList'
 import { ModCard } from '~/entities/ModEntity'
 import { ShowModVersions, useModVersions } from '~/features/ShowModVersions'
 
@@ -49,44 +51,47 @@ const modsBySearch = computed(() => modsByTab.value?.filter(mod => mod.title.toL
         <div class="flex w-full gap-2">
           <UTooltip text="Remove all mods">
             <UButton :icon="ICONS.TRASH" color="red" variant="outline" :loading="pending" @click="removeAllMods">
-              Clear All
+              <span class="hidden md:block">Clear All</span>
             </UButton>
           </UTooltip>
         </div>
-        <UButton color="gray">
-          Mods installed: {{ modpack.modlist.length }}
-        </UButton>
+        <CopyModList :modlist="modpack.modlist" color="gray" />
       </div>
-      <UInput v-model="searchByName" placeholder="Filter mods by name" class="mt-2" />
-
-      <div class="overflow-auto hide-scrollbar h-75%">
-        <div class="p1">
-          <TransitionExpand group tag="ul">
-            <ul v-for="mod in modsBySearch" :key="mod.project_id" class="relative my-2" :mod="mod">
-              <ModCard :mod="mod" />
+      <UInput v-model="searchByName" placeholder="Filter mods by name" class="my-2" />
+
+      <div class="overflow-auto relative hide-scrollbar">
+        <TransitionScale axis="x" appear>
+          <RecycleScroller
+            v-if="modsBySearch"
+            v-slot="{ item }"
+            class="h-65vh md:h-170 hide-scrollbar"
+            :items="modsBySearch"
+            :item-size="170"
+            key-field="slug"
+          >
+            <ul class="relative m-2" :mod="item">
+              <ModCard :mod="item" />
 
               <div class="absolute right-4 flex gap-2 bottom-4 md:bottom-auto md:top-4">
                 <UTooltip text="Select mod version">
-                  <UButton variant="outline" :icon="ICONS.CUBE" @click="showProjectVersions(mod)">
-                    <span class="truncate w-30">{{ modpack.modlist.find(m => m.slug === mod.slug)?.version_name }}</span>
+                  <UButton variant="outline" :icon="ICONS.CUBE" @click="showProjectVersions(item)">
+                    <span class="truncate w-30">{{ modpack.modlist.find(m => m.slug === item.slug)?.version_name }}</span>
                   </UButton>
                 </UTooltip>
                 <UTooltip text="Remove mod">
-                  <UButton color="red" variant="outline" :loading="pending" :icon="ICONS.TRASH" @click="removeMod(mod.slug)" />
+                  <UButton color="red" variant="outline" :loading="pending" :icon="ICONS.TRASH" @click="removeMod(item.slug)" />
                 </UTooltip>
               </div>
             </ul>
-          </TransitionExpand>
-        </div>
+          </RecycleScroller>
+        </TransitionScale>
 
-        <TransitionExpand>
-          <UNotFound v-if="!modsBySearch?.length" class="md:h-[90%] h-1/2 m-1" />
-        </TransitionExpand>
+        <UNotFound v-if="!modsBySearch?.length" class="absolute top-0 left-0 w-full md:h-[90%] h-1/2 m-1" />
       </div>
 
-      <div class="absolute p-2 w-full left-0 bottom-0">
-        <UCard>
-          <div class="md:flex justify-between items-center">
+      <div class="absolute w-full px-2 left-0 bottom-0 pb-3">
+        <UCard :ui="{ body: { padding: 'p-2' } }">
+          <div class="flex overflow-auto hide-scrollbar justify-between items-center">
             <div class="flex items-center gap-4">
               <UTooltip text="Select modpack configuration" @click="isOptionsModalOpened = true">
                 <UButton :icon="ICONS.GEAR" color="gray" size="lg" />

widgets/ModPack/ui/ModPackConfigurator.vue

@@ -59,11 +59,11 @@ function saveChanges() {
 
       <UAlert v-if="modpack.modlist.length" class="mt-2" title="If you change a modpack configuration modlist will be reset" icon="octicon:alert-16" description="" color="red" variant="outline" />
 
-      <div class="flex absolute w-full justify-around bottom-2 right-0">
-        <UButton size="xl" variant="outline" class="center w-60" color="red" @click="emit('closeModal')">
+      <div class="absolute grid grid-cols-2 gap-2 px-2 w-full justify-around bottom-2 right-0">
+        <UButton size="xl" variant="outline" class="center" color="red" @click="emit('closeModal')">
           Cancel
         </UButton>
-        <UButton size="xl" variant="outline" class="w-60 center" @click="saveChanges">
+        <UButton size="xl" variant="outline" class="center" @click="saveChanges">
           Save
         </UButton>
       </div>