Add more options to Preferences

assets/css/extra.css

@@ -15,11 +15,13 @@ h1{
     margin:5px;
 }
 input[type="text"]{
-    padding:10px;
     border-radius: 5px;
+    padding:5px;
     outline: none;
     border:none;
-    width:60%;
+    width:50%;
+    height:35px;
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 }
 
 .prefBox, #pathConfig{
@@ -86,6 +88,16 @@ input[type="text"]{
     background-color: rgb(210 69 27);
     color:white;
 }
+.redBtn{
+    background-color: rgb(210 69 27);
+    color:white;
+    text-decoration: none;
+    border: none;
+    margin:5px;
+    border-radius: 10px;
+    cursor: pointer;
+    font-size: medium;
+}
 a{
     color:rgb(34, 136, 199);
     cursor: pointer;

html/preferences.html

@@ -134,6 +134,19 @@
         </div>
     </div>
 
+    <br>
+    <div class="prefBox">
+        <span>Filename format for playlists</span>
+        <input type="text" id="filenameFormat" placeholder="yt-dlp format style" value="%(playlist_index)s.%(title)s.%(ext)s">
+        <button class="redBtn" id="resetFilenameFormat">Reset to default</button>
+    </div>
+
+    <br>
+    <div class="prefBox">
+        <span>Folder name format for playlists</span>
+        <input type="text" id="foldernameFormat" value="%(playlist_title)s" placeholder="yt-dlp format style">
+        <button class="redBtn" id="resetFoldernameFormat">Reset to default</button>
+    </div>
 
     <script>
 

translations/en.json

@@ -74,5 +74,8 @@
 	"Open download folder":"Open download folder",
 	"Path:":"Path:",
 	"Select config file":"Select config file",
-	"Use configuration file":"Use configuration file"
+	"Use configuration file":"Use configuration file",
+	"Filename format for playlists":"Filename format for playlists",
+	"Folder name format for playlists":"Folder name format for playlists",
+	"Reset to default":"Reset to default"
 }