feat: Add sort options with links above comments section

Author: splitbrain

frontend/src/components/meh-comments/meh-comments.css

@@ -5,6 +5,37 @@
     color: var(--meh-error);
   }
 
+  div.sort-options {
+    display: flex;
+    align-items: center;
+    margin-bottom: var(--meh-spacing);
+    font-size: 0.9em;
+    
+    .sort-label {
+      margin-right: 0.5em;
+      color: var(--meh-text-muted, #666);
+    }
+    
+    .sort-links {
+      display: flex;
+      gap: 1em;
+      
+      a {
+        color: var(--meh-link-color);
+        text-decoration: none;
+        
+        &.active {
+          font-weight: bold;
+          text-decoration: underline;
+        }
+        
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+    }
+  }
+
   > ul {
     list-style-type: none;
     padding: 0;

frontend/src/components/meh-comments/meh-comments.tsx

@@ -75,6 +75,10 @@ export class MehComments {
     reply: 'Reply',
     confirmDelete: 'Are you sure you want to delete this comment?',
     inReplyTo: 'in reply to',
+    sortOldest: 'Oldest',
+    sortNewest: 'Newest',
+    sortThreaded: 'Threaded',
+    sortBy: 'Sort by:',
   };
 
   // Translation manager instance
@@ -396,6 +400,55 @@ export class MehComments {
     }
   }
 
+  /**
+   * Handle sort change
+   */
+  private handleSortChange = (newSort: 'oldest' | 'newest' | 'threaded', e: Event) => {
+    e.preventDefault();
+    this.sort = newSort;
+    
+    // Save the sort preference to localStorage
+    try {
+      localStorage.setItem('meh-sort', newSort);
+    } catch (e) {
+      console.warn('Could not save sort preference to localStorage:', e);
+    }
+  };
+
+  /**
+   * Render sort options
+   */
+  private renderSortOptions() {
+    return (
+      <div class="sort-options">
+        <span class="sort-label">{this._('sortBy')}</span>
+        <div class="sort-links">
+          <a 
+            href="#" 
+            class={this.sort === 'oldest' ? 'active' : ''} 
+            onClick={(e) => this.handleSortChange('oldest', e)}
+          >
+            {this._('sortOldest')}
+          </a>
+          <a 
+            href="#" 
+            class={this.sort === 'newest' ? 'active' : ''} 
+            onClick={(e) => this.handleSortChange('newest', e)}
+          >
+            {this._('sortNewest')}
+          </a>
+          <a 
+            href="#" 
+            class={this.sort === 'threaded' ? 'active' : ''} 
+            onClick={(e) => this.handleSortChange('threaded', e)}
+          >
+            {this._('sortThreaded')}
+          </a>
+        </div>
+      </div>
+    );
+  }
+
   /**
    * Render comments in a threaded/nested structure
    */
@@ -467,6 +520,8 @@ export class MehComments {
     } else if (this.comments.length === 0) {
       elements.push(this.renderNoComments());
     } else {
+      // Add sort options above the comments
+      elements.push(this.renderSortOptions());
       elements.push(this.renderCommentsList());
     }