From 02fcfc1833e661e1b4c4bac2cd13b945c7e3a065 Mon Sep 17 00:00:00 2001
From: Oleh Omelchenko <ptrvtch@protonmail.com>
Date: Fri, 17 Oct 2025 00:49:00 +0300
Subject: [PATCH] feat: add snippet sorting by size and update help section
 with sorting instructions

---
 .claude/settings.local.json | 3 ++-
 index.html                  | 5 +++++
 src/js/snippet-manager.js   | 6 ++++++
 3 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/.claude/settings.local.json b/.claude/settings.local.json
index 730b146..9c4ed36 100644
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -5,5 +5,6 @@
     ],
     "deny": [],
     "ask": []
-  }
+  },
+  "outputStyle": "default"
 }
diff --git a/index.html b/index.html
index d14c4cc..d2050ca 100644
--- a/index.html
+++ b/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>
diff --git a/src/js/snippet-manager.js b/src/js/snippet-manager.js
index 4ec41ba..29cbb81 100644
--- a/src/js/snippet-manager.js
+++ b/src/js/snippet-manager.js
@@ -225,6 +225,12 @@ const SnippetStorage = {
                 case 'created':
                     comparison = new Date(a.created) - new Date(b.created);
                     break;
+                case 'size':
+                    // Calculate size for both snippets
+                    const sizeA = new Blob([JSON.stringify(a)]).size;
+                    const sizeB = new Blob([JSON.stringify(b)]).size;
+                    comparison = sizeA - sizeB;
+                    break;
                 case 'modified':
                 default:
                     comparison = new Date(a.modified) - new Date(b.modified);