2 files changed, 44 insertions, 14 deletions

diff --git a/public/assets/css/bucky.css b/public/assets/css/bucky.css
index 66058ba..9ee633f 100644
--- a/public/assets/css/bucky.css
+++ b/public/assets/css/bucky.css
@@ -565,47 +565,48 @@ pre br {
 
 /* FILES */
 
-#files,
-#files tr {
+.files,
+.files tr {
   margin: 0; padding: 0;
   border-spacing: 0;
 }
-#files {
+.files {
   border: 1px solid #ccc;
   margin-bottom: 10px;
 }
-#files td {
+.files td {
   padding: 5px;
   font-size: 11px;
 }
-#files td:first-child {
+.files td:first-child {
   padding: 0;
 }
-#files td:first-child a {
+.files td:first-child a {
   display: block;
   padding: 5px;
+  text-overflow: ellipsis;
 }
-#files .user a {
+.files .user a {
   text-decoration: none;
   color: #333;
 }
-.desktop #files user a:hover {
+.desktop .files user a:hover {
   text-decoration: underline;
 }
-#files td:first-child {
+.files td:first-child {
   text-align: left;
 }
-#files td {
+.files td {
   text-align: right;
 }
-#files .total td {
+.files .total td {
   text-align: right;
   border-top: 1px dotted #888;
 }
-#files .playing:before {
+.files .playing:before {
   content: "> ";
 }
-#files tr.total td:first-child {
+.files tr.total td:first-child {
   padding: 5px;
 }
 .bold {
@@ -619,7 +620,7 @@ pre br {
   flex-direction: row;
   justify-content: space-between;
 }
-#files .total td a {
+.files .total td a {
   display: inline;
 }
 #gallery {
@@ -725,6 +726,12 @@ pre br {
   width: auto;
   display: inline-block;
 }
+#thread_settings #right_side {
+  margin-left: 10px;
+}
+#thread_settings .files td:first-child a {
+  width: 130px;
+}
 
 /* SEARCH */
 
diff --git a/public/assets/js/lib/views/details/settings.js b/public/assets/js/lib/views/details/settings.js
index 06bb315..eac1520 100644
--- a/public/assets/js/lib/views/details/settings.js
+++ b/public/assets/js/lib/views/details/settings.js
@@ -21,6 +21,7 @@ var ThreadSettingsForm = FormView.extend({
     this.__super__.initialize.call(this)
     this.template = this.$(".template").html()
     this.allowedTemplate = this.$(".allowedTemplate").html()
+    this.filesTemplate = this.$(".settingsFilesTemplate").html()
   },
   
   populate: function(){
@@ -57,6 +58,28 @@ var ThreadSettingsForm = FormView.extend({
     
     this.toggleAllowed()
     this.fetchKeywords()
+    
+    var $files = this.$(".files")
+    $files.empty()
+    files.sort((a,b) => cmp(a.filename, b.filename))
+    .forEach(file => {
+      var size = hush_size(file.size)
+      var datetime = verbose_date(file.date, true)
+      var date_class = carbon_date(file.date)
+      var link = make_link(file)
+
+      var t = this.filesTemplate.replace(/{{username}}/g, file.username)
+                           .replace(/{{link}}/g, link)
+                           .replace(/{{filename}}/g, file.filename)
+                           .replace(/{{date_class}}/g, date_class)
+                           .replace(/{{date}}/g, datetime[0])
+                           .replace(/{{time}}/g, datetime[1])
+                           .replace(/{{size_class}}/g, size[0])
+                           .replace(/{{size}}/g, size[1])
+                           .replace(/{{id}}/g, file.id)
+      var $t = $(t)
+      $files.append($t)
+    })
 
     $("body").removeClass("loading")
   },