src/components/ModForm.tsx

@@ -524,6 +524,7 @@ export const ModForm = () => {
 type DownloadUrlFieldsProps = {
   index: number
   url: string
+  title?: string
   hash: string
   signatureKey: string
   malwareScanLink: string
@@ -537,6 +538,7 @@ const DownloadUrlFields = React.memo(
   ({
     index,
     url,
+    title,
     hash,
     signatureKey,
     malwareScanLink,
@@ -579,6 +581,28 @@ const DownloadUrlFields = React.memo(
             </svg>
           </button>
         </div>
+        <div className='inputWrapperMain'>
+          <div className='inputWrapperMainBox'>
+            <svg
+              xmlns='http://www.w3.org/2000/svg'
+              viewBox='-96 0 512 512'
+              width='1em'
+              height='1em'
+              fill='currentColor'
+            >
+              <path d='M320 448c0 17.67-14.31 32-32 32H64c-17.69 0-32-14.33-32-32v-384C32 46.34 46.31 32.01 64 32.01S96 46.34 96 64.01v352h192C305.7 416 320 430.3 320 448z'></path>
+            </svg>
+          </div>
+          <input
+            type='text'
+            className='inputMain'
+            name='title'
+            placeholder='Download Title'
+            value={title}
+            onChange={handleChange}
+          />
+          <div className='inputWrapperMainBox'></div>
+        </div>
         <div className='inputWrapperMain'>
           <div className='inputWrapperMainBox'>
             <svg

src/pages/mod/index.tsx

@@ -70,25 +70,6 @@ export const ModPage = () => {
 
   const [commentCount, setCommentCount] = useState(0)
 
-  const oldDownloadListRef = useRef<HTMLDivElement>(null)
-
-  const handleViewOldLinks = () => {
-    if (oldDownloadListRef.current) {
-      // Toggle styles
-      if (oldDownloadListRef.current.style.height === '0px') {
-        // Enable styles
-        oldDownloadListRef.current.style.padding = ''
-        oldDownloadListRef.current.style.height = ''
-        oldDownloadListRef.current.style.border = ''
-      } else {
-        // Disable styles
-        oldDownloadListRef.current.style.padding = '0'
-        oldDownloadListRef.current.style.height = '0'
-        oldDownloadListRef.current.style.border = 'unset'
-      }
-    }
-  }
-
   return (
     <>
       <RouterLoadingSpinner />
@@ -136,37 +117,16 @@ export const ModPage = () => {
                           </div>
                         )}
                         {mod.downloadUrls.length > 1 && (
-                          <>
+                          <div className='IBMSMSMBSSDownloads'>
-                            <div className='IBMSMSMBSSDownloadsActions'>
+                            {mod.downloadUrls
-                              <button
+                              .slice(1)
-                                className='btn btnMain'
+                              .map((download, index) => (
-                                id='viewOldLinks'
+                                <Download
-                                type='button'
+                                  key={`downloadUrl-${index}`}
-                                onClick={handleViewOldLinks}
+                                  {...download}
-                              >
+                                />
-                                View other links
+                              ))}
-                              </button>
+                          </div>
-                            </div>
-                            <div
-                              ref={oldDownloadListRef}
-                              id='oldDownloadList'
-                              className='IBMSMSMBSSDownloads'
-                              style={{
-                                padding: 0,
-                                height: '0px',
-                                border: 'unset'
-                              }}
-                            >
-                              {mod.downloadUrls
-                                .slice(1)
-                                .map((download, index) => (
-                                  <Download
-                                    key={`downloadUrl-${index}`}
-                                    {...download}
-                                  />
-                                ))}
-                            </div>
-                          </>
                         )}
                       </div>
                     </div>
@@ -608,6 +568,7 @@ const Body = ({
 
 const Download = ({
   url,
+  title,
   hash,
   signatureKey,
   malwareScanLink,
@@ -645,6 +606,9 @@ const Download = ({
 
   return (
     <div className='IBMSMSMBSSDownloadsElement'>
+      {typeof title !== 'undefined' && title !== '' && (
+        <span className=''>{title}</span>
+      )}
       <div className='IBMSMSMBSSDownloadsElementInside'>
         <button
           className='btn btnMain IBMSMSMBSSDownloadsElementBtn'

src/types/mod.ts

@@ -41,6 +41,7 @@ export interface ModFormState {
 
 export interface DownloadUrl {
   url: string
+  title?: string
   hash: string
   signatureKey: string
   malwareScanLink: string