move folding to left side of username, move text to css

app/assets/javascripts/application.js.erb

@@ -296,7 +296,6 @@ $(document).ready(function() {
 
   $(document).on("click", "a.comment_folder", function() {
     $(this).addClass("comment_unfolder").removeClass("comment_folder");
-    $(this).text("unfold");
     var comment = $(this).closest(".comment");
     comment.nextAll(".comments").each(function() {
       $(this).addClass("collapsed");
@@ -305,7 +304,6 @@ $(document).ready(function() {
 
   $(document).on("click", "a.comment_unfolder", function() {
     $(this).addClass("comment_folder").removeClass("comment_unfolder");
-    $(this).text("fold");
     var comment = $(this).closest(".comment");
     comment.nextAll(".comments").each(function() {
       $(this).removeClass("collapsed");

app/assets/stylesheets/application.css

@@ -526,6 +526,18 @@ li .domain {
 	vertical-align: middle;
 }
 
+li .comment_folder:before,
+li .comment_unfolder:before {
+	font-size: 9pt;
+	letter-spacing: 0.1em;
+}
+li .comment_folder:before {
+	content: "[-]";
+}
+li .comment_unfolder:before {
+	content: "[+]";
+}
+
 li .byline {
 	color: #888;
 	font-size: 8.5pt;

app/views/comments/_comment.html.erb

@@ -26,6 +26,10 @@ class="comment <%= comment.current_vote ? (comment.current_vote[:vote] == 1 ?
     <div class="byline">
       <a name="c_<%= comment.short_id %>"></a>
 
+      <% if @user %>
+        <a class="comment_folder"></a>
+      <% end %>
+
       <% if defined?(was_merged) && was_merged %>
         <span class="merge"></span>
       <% end %>
@@ -63,11 +67,6 @@ class="comment <%= comment.current_vote ? (comment.current_vote[:vote] == 1 ?
         |
         <a href="<%= comment.url %>">link</a>
 
-        <% if @user %>
-          |
-          <a class="comment_folder">fold</a>
-        <% end %>
-
         <% if comment.is_editable_by_user?(@user) %>
           |
           <a class="comment_editor">edit</a>