Minor Tags CSS improvements

src/EyeButton.svelte

@@ -24,6 +24,44 @@ import { EmbeddedFile, EMBED_TYPES } from './main';
   }
   const isNotChrome = !navigator.userAgent.includes("Chrome/");
 
+
+  const opContainer = document.querySelector('.opContainer') as HTMLDivElement;
+  const fullId = opContainer?.dataset.fullID ?? "";
+  const boardID = fullId?.substring(0, fullId.indexOf('.')) ?? "";
+  const opID = fullId?.substring(fullId.indexOf('.') + '.'.length) ?? "";
+
+  const opSubject = opContainer?.querySelector('.postInfo.desktop .subject')?.textContent ?? "";
+  const opComment = opContainer?.querySelector('.postMessage')?.textContent ?? "";
+  const opInfo = (opSubject + opComment).substring(0, 46);
+  const opTotal = `[${opInfo}]_oID[${opID}]`;
+
+  const MAX_PATH = 237;
+  function downloadName(filename: string) {
+    //! TODO add user flag or check for Windows or not, if not remove .substring() calls.
+    //MAX Length=(260-12-1) = 247. The trailing minus 1 is for the invisible NUL terminator. (Windows)
+    //opera browser max length 243?
+    //firefox browser max length 237?
+    //style           -> '-[]_oID[]_pID[]_[].' = 19 char length
+    //style example   -> '$boardID-[$name]_opID.[$opID]_postID.[$postID]_[$fileName]'
+
+    const downloadExt = filename.substring(filename.lastIndexOf("."));
+
+    const postWrapper = document.querySelector('[alt="'+filename+'"]')?.parentElement?.parentElement?.parentElement?.parentElement;
+    const pID = postWrapper?.id.substring(1) ?? "";
+    // const pSubject = postWrapper?.querySelector('.subject')?.textContent ?? "";
+    // const pComment = postWrapper?.querySelector('.postMessage')?.textContent ?? "";
+    // const pInfo = (opSubject + opComment).substring(0, 46);
+    // const pTotal = `[${pInfo}]_ID[${pID}]`;
+
+    // return `${boardID}-${opTotal}_pID[${postID}]_[{3e}${fileName}]`;
+    const suffix = ']' + downloadExt;
+    const max = MAX_PATH - suffix.length;
+    const substringed = `${boardID}-${opTotal}_pID[${pID}]_[{PEE}${filename}`.substring(0, max);
+    return substringed + suffix;
+  }
+
+
+
   async function downloadFile(file: EmbeddedFile) {
     const a = document.createElement("a") as HTMLAnchorElement;
     document.body.appendChild(a);
@@ -32,7 +70,8 @@ import { EmbeddedFile, EMBED_TYPES } from './main';
     const type = await fileTypeFromBuffer(thumb);
     const url = URL.createObjectURL(new Blob([thumb], { type: type?.mime }))
     a.href = url;
-    a.download = file.filename;
+
+    a.download = downloadName(file.filename);
     a.click();
     window.URL.revokeObjectURL(url);
   }
@@ -161,6 +200,7 @@ import { EmbeddedFile, EMBED_TYPES } from './main';
     margin-right: 2px;
   }
   details.tags > summary {
+    user-select: none;
     cursor: pointer;
   }
   details.tags > ul {
@@ -168,13 +208,14 @@ import { EmbeddedFile, EMBED_TYPES } from './main';
     min-width: 35px;
 
     list-style: none;
+    margin: 0;
     margin-top: 2px;
     padding: 0;
-    background-color: #00000044;
+    background-color: #191a1c;
+    z-index: 10;
   }
   details.tags > ul > li {
-    padding: 2px 2px;
-    margin-bottom: 2px;
+    padding: 2px 4px;
+    /* margin-bottom: 2px; */
   }
 </style>
-