chore: lint pass (app-frontend)

Author: IMB11

apps/app-frontend/eslint.config.mjs

@@ -1,2 +1,2 @@
 import config from '@modrinth/tooling-config/eslint/nuxt.mjs'
-export default config
+export default config

apps/app-frontend/package.json

@@ -42,22 +42,18 @@
   },
   "devDependencies": {
     "@modrinth/tooling-config": "workspace:*",
-    "@eslint/compat": "^1.1.1",
     "@formatjs/cli": "^6.2.12",
-    "@nuxt/eslint-config": "^0.5.6",
     "@taijased/vue-render-tracker": "^1.0.7",
     "@vitejs/plugin-vue": "^5.0.4",
     "autoprefixer": "^10.4.19",
-    "eslint": "^9.9.1",
-    "eslint-plugin-turbo": "^2.5.4",
     "postcss": "^8.4.39",
-    "prettier": "^3.2.5",
     "sass": "^1.74.1",
     "tailwindcss": "^3.4.4",
     "typescript": "^5.5.4",
     "vite": "^5.4.6",
     "vue-tsc": "^2.1.6"
   },
   "packageManager": "[email protected]",
-  "web-types": "../../web-types.json"
+  "web-types": "../../web-types.json",
+  "prettier": "@modrinth/tooling-config/prettier.nuxt.config.js"
 }

apps/app-frontend/src/App.vue

@@ -428,7 +428,7 @@ function handleAuxClick(e) {
       <InstanceCreationModal ref="installationModal" />
     </Suspense>
     <div
-      class="app-grid-navbar bg-bg-raised flex flex-col p-[0.5rem] pt-0 gap-[0.5rem] w-[--left-bar-width]"
+      class="app-grid-navbar flex w-[--left-bar-width] flex-col gap-[0.5rem] bg-bg-raised p-[0.5rem] pt-0"
     >
       <NavButton v-tooltip.right="'Home'" to="/">
         <HomeIcon />
@@ -459,7 +459,7 @@ function handleAuxClick(e) {
       >
         <LibraryIcon />
       </NavButton>
-      <div class="h-px w-6 mx-auto my-2 bg-button-bg"></div>
+      <div class="mx-auto my-2 h-px w-6 bg-button-bg"></div>
       <suspense>
         <QuickInstanceSwitcher />
       </suspense>
@@ -502,26 +502,26 @@ function handleAuxClick(e) {
         <template #label>Sign in</template>
       </NavButton>
     </div>
-    <div data-tauri-drag-region class="app-grid-statusbar bg-bg-raised h-[--top-bar-height] flex">
+    <div data-tauri-drag-region class="app-grid-statusbar flex h-[--top-bar-height] bg-bg-raised">
       <div data-tauri-drag-region class="flex p-3">
-        <ModrinthAppLogo class="h-full w-auto text-contrast pointer-events-none" />
-        <div class="flex items-center gap-1 ml-3">
+        <ModrinthAppLogo class="pointer-events-none h-full w-auto text-contrast" />
+        <div class="ml-3 flex items-center gap-1">
           <button
-            class="cursor-pointer p-0 m-0 text-contrast border-none outline-none bg-button-bg rounded-full flex items-center justify-center w-6 h-6 hover:brightness-75 transition-all"
+            class="m-0 flex h-6 w-6 cursor-pointer items-center justify-center rounded-full border-none bg-button-bg p-0 text-contrast outline-none transition-all hover:brightness-75"
             @click="router.back()"
           >
             <LeftArrowIcon />
           </button>
           <button
-            class="cursor-pointer p-0 m-0 text-contrast border-none outline-none bg-button-bg rounded-full flex items-center justify-center w-6 h-6 hover:brightness-75 transition-all"
+            class="m-0 flex h-6 w-6 cursor-pointer items-center justify-center rounded-full border-none bg-button-bg p-0 text-contrast outline-none transition-all hover:brightness-75"
             @click="router.forward()"
           >
             <RightArrowIcon />
           </button>
         </div>
         <Breadcrumbs class="pt-[2px]" />
       </div>
-      <section class="flex ml-auto items-center">
+      <section class="ml-auto flex items-center">
         <ButtonStyled
           v-if="!forceSidebar && themeStore.toggleSidebar"
           :type="sidebarToggled ? 'standard' : 'transparent'"
@@ -535,7 +535,7 @@ function handleAuxClick(e) {
             <RightArrowIcon />
           </button>
         </ButtonStyled>
-        <div class="flex mr-3">
+        <div class="mr-3 flex">
           <Suspense>
             <RunningAppBar />
           </Suspense>
@@ -564,9 +564,9 @@ function handleAuxClick(e) {
     class="app-contents experimental-styles-within"
     :class="{ 'sidebar-enabled': sidebarVisible }"
   >
-    <div class="app-viewport flex-grow router-view">
+    <div class="app-viewport router-view flex-grow">
       <div
-        class="loading-indicator-container h-8 fixed z-50"
+        class="loading-indicator-container fixed z-50 h-8"
         :style="{
           top: 'calc(var(--top-bar-height))',
           left: 'calc(var(--left-bar-width))',
@@ -577,20 +577,20 @@ function handleAuxClick(e) {
       </div>
       <div
         v-if="themeStore.featureFlags.page_path"
-        class="absolute bottom-0 left-0 m-2 bg-tooltip-bg text-tooltip-text font-semibold rounded-full px-2 py-1 text-xs z-50"
+        class="absolute bottom-0 left-0 z-50 m-2 rounded-full bg-tooltip-bg px-2 py-1 text-xs font-semibold text-tooltip-text"
       >
         {{ route.fullPath }}
       </div>
       <div
         id="background-teleport-target"
-        class="absolute h-full -z-10 rounded-tl-[--radius-xl] overflow-hidden"
+        class="absolute -z-10 h-full overflow-hidden rounded-tl-[--radius-xl]"
         :style="{
           width: 'calc(100% - var(--right-bar-width))',
         }"
       ></div>
       <div
         v-if="criticalErrorMessage"
-        class="m-6 mb-0 flex flex-col border-red bg-bg-red rounded-2xl border-2 border-solid p-4 gap-1 font-semibold text-contrast"
+        class="m-6 mb-0 flex flex-col gap-1 rounded-2xl border-2 border-solid border-red bg-bg-red p-4 font-semibold text-contrast"
       >
         <h1 class="m-0 text-lg font-extrabold">{{ criticalErrorMessage.header }}</h1>
         <div
@@ -607,29 +607,29 @@ function handleAuxClick(e) {
       </RouterView>
     </div>
     <div
-      class="app-sidebar mt-px shrink-0 flex flex-col border-0 border-l-[1px] border-[--brand-gradient-border] border-solid overflow-auto"
+      class="app-sidebar mt-px flex shrink-0 flex-col overflow-auto border-0 border-l-[1px] border-solid border-[--brand-gradient-border]"
       :class="{ 'has-plus': hasPlus }"
     >
       <div
-        class="app-sidebar-scrollable flex-grow shrink overflow-y-auto relative"
+        class="app-sidebar-scrollable relative shrink flex-grow overflow-y-auto"
         :class="{ 'pb-12': !hasPlus }"
       >
         <div id="sidebar-teleport-target" class="sidebar-teleport-content"></div>
         <div class="sidebar-default-content" :class="{ 'sidebar-enabled': sidebarVisible }">
-          <div class="p-4 border-0 border-b-[1px] border-[--brand-gradient-border] border-solid">
-            <h3 class="text-lg m-0">Playing as</h3>
+          <div class="border-0 border-b-[1px] border-solid border-[--brand-gradient-border] p-4">
+            <h3 class="m-0 text-lg">Playing as</h3>
             <suspense>
               <AccountsCard ref="accounts" mode="small" />
             </suspense>
           </div>
-          <div class="p-4 border-0 border-b-[1px] border-[--brand-gradient-border] border-solid">
+          <div class="border-0 border-b-[1px] border-solid border-[--brand-gradient-border] p-4">
             <suspense>
               <FriendsList :credentials="credentials" :sign-in="() => signIn()" />
             </suspense>
           </div>
-          <div v-if="news && news.length > 0" class="pt-4 flex flex-col items-center">
-            <h3 class="px-4 text-lg m-0 text-left w-full">News</h3>
-            <div class="px-4 pt-2 space-y-4 flex flex-col items-center w-full">
+          <div v-if="news && news.length > 0" class="flex flex-col items-center pt-4">
+            <h3 class="m-0 w-full px-4 text-left text-lg">News</h3>
+            <div class="flex w-full flex-col items-center space-y-4 px-4 pt-2">
               <NewsArticleCard
                 v-for="(item, index) in news"
                 :key="`news-${index}`"
@@ -647,7 +647,7 @@ function handleAuxClick(e) {
       <template v-if="showAd">
         <a
           href="https://modrinth.plus?app"
-          class="absolute bottom-[250px] w-full flex justify-center items-center gap-1 px-4 py-3 text-purple font-medium hover:underline z-10"
+          class="absolute bottom-[250px] z-10 flex w-full items-center justify-center gap-1 px-4 py-3 font-medium text-purple hover:underline"
           target="_blank"
         >
           <ArrowBigUpDashIcon class="text-2xl" /> Upgrade to Modrinth+

apps/app-frontend/src/components/ui/AccountsCard.vue

@@ -2,7 +2,7 @@
   <div
     v-if="mode !== 'isolated'"
     ref="button"
-    class="button-base mt-2 px-3 py-2 bg-button-bg rounded-xl flex items-center gap-2"
+    class="button-base mt-2 flex items-center gap-2 rounded-xl bg-button-bg px-3 py-2"
     :class="{ expanded: mode === 'expanded' }"
     @click="toggleMenu"
   >
@@ -12,11 +12,11 @@
         selectedAccount ? avatarUrl : 'https://launcher-files.modrinth.com/assets/steve_head.png'
       "
     />
-    <div class="flex flex-col w-full">
+    <div class="flex w-full flex-col">
       <span>{{ selectedAccount ? selectedAccount.profile.name : 'Select account' }}</span>
-      <span class="text-secondary text-xs">Minecraft account</span>
+      <span class="text-xs text-secondary">Minecraft account</span>
     </div>
-    <DropdownIcon class="w-5 h-5 shrink-0" />
+    <DropdownIcon class="h-5 w-5 shrink-0" />
   </div>
   <transition name="fade">
     <Card

apps/app-frontend/src/components/ui/Breadcrumbs.vue

@@ -29,14 +29,14 @@
       <span
         v-else
         data-tauri-drag-region
-        class="text-contrast font-semibold cursor-default select-none"
+        class="cursor-default select-none font-semibold text-contrast"
         >{{
           breadcrumb.name.charAt(0) === '?'
             ? breadcrumbData.getName(breadcrumb.name.slice(1))
             : breadcrumb.name
         }}</span
       >
-      <ChevronRightIcon v-if="breadcrumb.link" data-tauri-drag-region class="w-5 h-5" />
+      <ChevronRightIcon v-if="breadcrumb.link" data-tauri-drag-region class="h-5 w-5" />
     </template>
   </div>
 </template>

apps/app-frontend/src/components/ui/ErrorModal.vue

@@ -301,19 +301,19 @@ async function copyToClipboard(text) {
         </ButtonStyled>
       </div>
       <template v-if="hasDebugInfo">
-        <div class="bg-button-bg rounded-xl mt-2 overflow-clip">
+        <div class="mt-2 overflow-clip rounded-xl bg-button-bg">
           <button
-            class="flex items-center justify-between w-full bg-transparent border-0 px-4 py-3 cursor-pointer"
+            class="flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-4 py-3"
             @click="errorCollapsed = !errorCollapsed"
           >
-            <span class="text-contrast font-extrabold m-0">Debug information:</span>
+            <span class="m-0 font-extrabold text-contrast">Debug information:</span>
             <DropdownIcon
               class="h-5 w-5 text-secondary transition-transform"
               :class="{ 'rotate-180': !errorCollapsed }"
             />
           </button>
           <Collapsible :collapsed="errorCollapsed">
-            <pre class="m-0 px-4 py-3 bg-bg rounded-none">{{ debugInfo }}</pre>
+            <pre class="m-0 rounded-none bg-bg px-4 py-3">{{ debugInfo }}</pre>
           </Collapsible>
         </div>
       </template>

apps/app-frontend/src/components/ui/ExportModal.vue

@@ -138,7 +138,7 @@ const exportPack = async () => {
 
       <div class="table">
         <div class="table-head">
-          <div class="table-cell row-wise">
+          <div class="row-wise table-cell">
             Select files and folders to include in pack
             <Button
               class="sleek-primary collapsed-button"
@@ -152,7 +152,7 @@ const exportPack = async () => {
         </div>
         <div v-if="showingFiles" class="table-content">
           <div v-for="[path, children] in folders" :key="path.name" class="table-row">
-            <div class="table-cell file-entry">
+            <div class="file-entry table-cell">
               <div class="file-primary">
                 <Checkbox
                   :model-value="children.every((child) => child.selected)"
@@ -182,7 +182,7 @@ const exportPack = async () => {
             </div>
           </div>
           <div v-for="file in files" :key="file.path" class="table-row">
-            <div class="table-cell file-entry">
+            <div class="file-entry table-cell">
               <div class="file-primary">
                 <Checkbox
                   v-model="file.selected"

apps/app-frontend/src/components/ui/Instance.vue

@@ -134,7 +134,7 @@ onUnmounted(() => unlisten())
 <template>
   <template v-if="compact">
     <div
-      class="card-shadow grid grid-cols-[auto_1fr_auto] bg-bg-raised rounded-xl p-3 pl-4 gap-2 cursor-pointer hover:brightness-90 transition-all"
+      class="card-shadow grid cursor-pointer grid-cols-[auto_1fr_auto] gap-2 rounded-xl bg-bg-raised p-3 pl-4 transition-all hover:brightness-90"
       @click="seeInstance"
       @mouseenter="checkProcess"
     >
@@ -144,7 +144,7 @@ onUnmounted(() => unlisten())
         :tint-by="instance.path"
         alt="Mod card"
       />
-      <div class="h-full flex items-center font-bold text-contrast leading-normal">
+      <div class="flex h-full items-center font-bold leading-normal text-contrast">
         <span class="line-clamp-2">{{ instance.name }}</span>
       </div>
       <div class="flex items-center">
@@ -169,7 +169,7 @@ onUnmounted(() => unlisten())
           </button>
         </ButtonStyled>
       </div>
-      <div class="flex items-center col-span-3 gap-1 text-secondary font-semibold">
+      <div class="col-span-3 flex items-center gap-1 font-semibold text-secondary">
         <TimerIcon />
         <span class="text-sm">
           <template v-if="instance.last_played">
@@ -182,7 +182,7 @@ onUnmounted(() => unlisten())
   </template>
   <div v-else>
     <div
-      class="button-base bg-bg-raised p-4 rounded-xl flex gap-3 group"
+      class="button-base group flex gap-3 rounded-xl bg-bg-raised p-4"
       @click="seeInstance"
       @mouseenter="checkProcess"
     >
@@ -192,14 +192,14 @@ onUnmounted(() => unlisten())
           :src="instance.icon_path ? convertFileSrc(instance.icon_path) : null"
           :tint-by="instance.path"
           alt="Mod card"
-          :class="`transition-all ${modLoading || installing ? `brightness-[0.25] scale-[0.85]` : `group-hover:brightness-75`}`"
+          :class="`transition-all ${modLoading || installing ? `scale-[0.85] brightness-[0.25]` : `group-hover:brightness-75`}`"
         />
         <div class="absolute inset-0 flex items-center justify-center">
           <ButtonStyled v-if="playing" size="large" color="red" circular>
             <button
               v-tooltip="'Stop'"
               :class="{ 'scale-100 opacity-100': playing }"
-              class="transition-all scale-75 origin-bottom opacity-0 card-shadow"
+              class="card-shadow origin-bottom scale-75 opacity-0 transition-all"
               @click="(e) => stop(e, 'InstanceCard')"
               @mousehover="checkProcess"
             >
@@ -209,13 +209,13 @@ onUnmounted(() => unlisten())
           <SpinnerIcon
             v-else-if="modLoading || installing"
             v-tooltip="modLoading ? 'Instance is loading...' : 'Installing...'"
-            class="animate-spin w-8 h-8"
+            class="h-8 w-8 animate-spin"
             tabindex="-1"
           />
           <ButtonStyled v-else-if="!installed" size="large" color="brand" circular>
             <button
               v-tooltip="'Repair'"
-              class="transition-all scale-75 group-hover:scale-100 group-focus-within:scale-100 origin-bottom opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 card-shadow"
+              class="card-shadow origin-bottom scale-75 opacity-0 transition-all group-focus-within:scale-100 group-focus-within:opacity-100 group-hover:scale-100 group-hover:opacity-100"
               @click="(e) => repair(e)"
             >
               <DownloadIcon />
@@ -224,7 +224,7 @@ onUnmounted(() => unlisten())
           <ButtonStyled v-else size="large" color="brand" circular>
             <button
               v-tooltip="'Play'"
-              class="transition-all scale-75 group-hover:scale-100 group-focus-within:scale-100 origin-bottom opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 card-shadow"
+              class="card-shadow origin-bottom scale-75 opacity-0 transition-all group-focus-within:scale-100 group-focus-within:opacity-100 group-hover:scale-100 group-hover:opacity-100"
               @click="(e) => play(e, 'InstanceCard')"
               @mousehover="checkProcess"
             >
@@ -234,10 +234,10 @@ onUnmounted(() => unlisten())
         </div>
       </div>
       <div class="flex flex-col gap-1">
-        <p class="m-0 text-md font-bold text-contrast leading-tight line-clamp-1">
+        <p class="text-md m-0 line-clamp-1 font-bold leading-tight text-contrast">
           {{ instance.name }}
         </p>
-        <div class="flex items-center col-span-3 gap-1 text-secondary font-semibold mt-auto">
+        <div class="col-span-3 mt-auto flex items-center gap-1 font-semibold text-secondary">
           <GameIcon class="shrink-0" />
           <span class="text-sm capitalize">
             {{ instance.loader }} {{ instance.game_version }}

apps/app-frontend/src/components/ui/InstanceIndicator.vue

@@ -19,7 +19,7 @@ defineProps<{
 </script>
 
 <template>
-  <div class="flex justify-between items-center border-0 border-b border-solid border-divider pb-4">
+  <div class="flex items-center justify-between border-0 border-b border-solid border-divider pb-4">
     <router-link
       :to="`/instance/${encodeURIComponent(instance.path)}`"
       tabindex="-1"
@@ -32,10 +32,10 @@ defineProps<{
           size="48px"
         />
         <span class="flex flex-col gap-2">
-          <span class="font-extrabold bold text-contrast">
+          <span class="bold font-extrabold text-contrast">
             {{ instance.name }}
           </span>
-          <span class="text-secondary flex items-center gap-2 font-semibold">
+          <span class="flex items-center gap-2 font-semibold text-secondary">
             <GameIcon class="h-5 w-5 text-secondary" />
             {{ formatCategory(instance.loader) }} {{ instance.game_version }}
           </span>