feat: add snippet sorting by size and update help section with sorting instructions

index.html

@@ -73,6 +73,10 @@
                         <span class="sort-text">Name</span>
                         <span class="sort-arrow">⬇</span>
                     </button>
+                    <button class="sort-btn" data-sort="size" title="Sort by snippet size">
+                        <span class="sort-text">Size</span>
+                        <span class="sort-arrow">⬇</span>
+                    </button>
                 </div>
                 <div class="search-controls">
                     <input type="text" id="snippet-search" placeholder="Search snippets..." />
@@ -438,6 +442,7 @@
                     <section class="help-section">
                         <h3 class="help-heading">Tips & Tricks</h3>
                         <ul class="help-list">
+                            <li><strong>Sort snippets</strong> — Use the sort buttons to organize by Modified, Created, Name, or Size. Click a button twice to reverse the sort order (⬇ becomes ⬆).</li>
                             <li><strong>Extract inline data</strong> — When editing a spec with inline data, click "Extract to Dataset" to create a reusable dataset automatically.</li>
                             <li><strong>Dataset references</strong> — Astrolabe resolves dataset references at render time, so you can freely switch between inline and referenced data.</li>
                             <li><strong>Search across specs</strong> — The search box looks inside snippet names, comments, and the spec content itself.</li>