2 files changed, 55 insertions, 9 deletions
diff --git a/public/assets/js/lib/views/stream/hootfilters.js b/public/assets/js/lib/views/stream/hootfilters.js
index cfcbdf0..5b46a1d 100644
--- a/public/assets/js/lib/views/stream/hootfilters.js
+++ b/public/assets/js/lib/views/stream/hootfilters.js
@@ -85,6 +85,8 @@ var HootFilters = View.extend({
           ? this.state.order === "desc"
             ? "asc"
             : "desc"
+          : value === "date"
+          ? "desc"
           : "asc",
     });
     this.parent.onFilter(this.state);
diff --git a/public/assets/js/lib/views/stream/hootstream.js b/public/assets/js/lib/views/stream/hootstream.js
index 2789dee..6c02cc6 100644
--- a/public/assets/js/lib/views/stream/hootstream.js
+++ b/public/assets/js/lib/views/stream/hootstream.js
@@ -12,6 +12,7 @@ var HootStream = View.extend({
     this.threadTemplate = this.$(".threadTemplate").html();
     this.lastlogTemplate = this.$(".lastlogTemplate").html();
     this.fileTemplate = this.$(".fileTemplate").html();
+    this.imageTemplate = this.$(".imageTemplate").html();
     this.onClickLink = this.onClickLink.bind(this);
   },
 
@@ -155,6 +156,8 @@ var HootStream = View.extend({
     audio.init();
   },
 
+  /** Render Methods */
+
   render: (template, object) => {
     if (!template) {
       console.error("No template", object);
@@ -235,6 +238,7 @@ var HootStream = View.extend({
       0.0,
       1.0
     );
+
     // console.log(thread);
     return [
       "<div class='divider dark'></div>",
@@ -253,24 +257,64 @@ var HootStream = View.extend({
         comment_count: `${thread.comment_count || 0} c.`,
         comment_opacity: age_opacity * get_size_opacity(thread.comment_count),
       }),
+      // this.renderImages(
+      //   isViewingThread || postedToday ? images : images.slice(0, 6)
+      // ),
       this.renderFiles(
         isViewingThread || postedToday ? files : files.slice(0, 10)
       ),
       ...this.renderHoots({
-        hoots: comments.slice(0, 1).map(trimComment(isViewingThread)),
+        hoots: comments
+          .slice(0, 1)
+          .map(
+            trimComment({
+              isViewingThread,
+              lines: 5,
+              snippetSize: 512,
+              cropSize: 256,
+            })
+          ),
         className: "first_post",
       }),
       ...this.renderHoots({
         hoots:
           isViewingThread || postedToday
-            ? comments.slice(1)
-            : comments.slice(1).slice(-5).map(trimComment(isViewingThread)),
+            ? comments
+                .slice(1)
+                .map(
+                  trimComment({
+                    isViewingThread,
+                    lines: 1,
+                    snippetSize: 256,
+                    cropSize: 128,
+                  })
+                )
+            : comments
+                .slice(1)
+                .slice(-5)
+                .map(
+                  trimComment({
+                    isViewingThread,
+                    lines: 1,
+                    snippetSize: 256,
+                    cropSize: 128,
+                  })
+                ),
       }),
       "<div class='divider'></div>",
     ];
-    // say "in ... "
-    // audio player OR recent file list
-    // recent 3 comments
+  },
+
+  renderImages: function (files) {
+    if (!files.length) {
+      return null;
+    }
+    const $table = $("<div class='imageList'>");
+    for (const file of files) {
+      const $el = this.renderFile(this.imageTemplate, file);
+      $table.append($el);
+    }
+    return $table;
   },
 
   renderFiles: function (files) {
@@ -279,18 +323,18 @@ var HootStream = View.extend({
     }
     const $table = $("<div class='fileList'>");
     for (const file of files) {
-      const $el = this.renderFile(file);
+      const $el = this.renderFile(this.fileTemplate, file);
       $table.append($el);
     }
     return $table;
   },
 
-  renderFile: function (file) {
+  renderFile: function (template, 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);
-    return this.render(this.fileTemplate, {
+    return this.render(template, {
       id: file.id,
       username: file.username,
       link,