External dependencies list (#518)

pages/_type/_id/version.vue

@@ -315,7 +315,7 @@
       </section>
       <section
         v-if="
-          version.dependencies.length > 0 ||
+          version.dependencies.filter((x) => !x.file_name).length > 0 ||
           mode === 'edit' ||
           mode === 'create'
         "
@@ -323,7 +323,9 @@
         <h3>Dependencies</h3>
         <div class="dependencies">
           <div
-            v-for="(dependency, index) in version.dependencies"
+            v-for="(dependency, index) in version.dependencies.filter(
+              (x) => !x.file_name
+            )"
             :key="index"
             class="dependency"
           >
@@ -419,6 +421,32 @@
         </div>
         <hr class="card-divider" />
       </section>
+      <section
+        v-if="version.dependencies.filter((x) => x.file_name).length > 0"
+      >
+        <div>
+          <h3>External Dependencies</h3>
+          <InfoIcon
+            v-tooltip="
+              'Mods not part of the Modrinth platform but depended on by this project'
+            "
+          />
+        </div>
+        <div class="external-dependency">
+          <div
+            v-for="(dependency, index) in version.dependencies.filter(
+              (x) => x.file_name
+            )"
+            :key="index"
+            class="external-dependency"
+          >
+            <p v-if="dependency.file_name">
+              {{ decodeURIComponent(dependency.file_name) }}
+            </p>
+          </div>
+        </div>
+        <hr class="card-divider" />
+      </section>
       <section
         v-if="version.files.length > 0 || mode === 'edit' || mode === 'create'"
       >
@@ -501,6 +529,7 @@ import Multiselect from 'vue-multiselect'
 import ConfirmPopup from '~/components/ui/ConfirmPopup'
 import SmartFileInput from '~/components/ui/SmartFileInput'
 
+import InfoIcon from '~/assets/images/utils/info.svg?inline'
 import TrashIcon from '~/assets/images/utils/trash.svg?inline'
 import PlusIcon from '~/assets/images/utils/plus.svg?inline'
 import EditIcon from '~/assets/images/utils/edit.svg?inline'
@@ -529,6 +558,7 @@ export default {
     Multiselect,
     PlusIcon,
     SmartFileInput,
+    InfoIcon,
   },
   beforeRouteLeave(to, from, next) {
     if (this.mode === 'create') {
@@ -1016,6 +1046,12 @@ section {
   }
 }
 
+.external-dependency {
+  p {
+    margin: 0.25rem 0;
+  }
+}
+
 .edit-dependency {
   h4 {
     margin: 0 0 0.25rem 0;