feat: add storage monitor to track localStorage usage

src/styles.css

@@ -332,9 +332,11 @@ body {
 .panel-content {
     flex: 1;
     padding: 8px;
-    overflow: auto;
+    overflow: hidden;
     background: #ffffff;
     border: 1px inset #c0c0c0;
+    display: flex;
+    flex-direction: column;
 }
 
 /* Panel sizing */
@@ -392,6 +394,10 @@ body {
 
 .snippet-list {
     list-style: none;
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+    margin-bottom: 8px;
 }
 
 .snippet-item {
@@ -477,13 +483,14 @@ body {
 /* Snippet meta section */
 .snippet-meta {
     margin-top: 12px;
-    padding: 8px;
+    padding: 8px 8px 16px 8px;
     border-top: 1px solid #808080;
     background: #f0f0f0;
     border: 1px inset #c0c0c0;
     margin-left: -8px;
     margin-right: -8px;
-    margin-bottom: -8px;
+    margin-bottom: 0;
+    flex-shrink: 0;
 }
 
 .meta-header {
@@ -598,4 +605,52 @@ body {
 
 .ghost-card .snippet-date {
     color: #808080;
+}
+
+/* Storage monitor */
+.storage-monitor {
+    padding: 8px;
+    background: #f0f0f0;
+    border-top: 1px solid #808080;
+    margin: 0 -8px -8px -8px;
+    flex-shrink: 0;
+}
+
+.storage-info {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 4px;
+    font-size: 10px;
+}
+
+.storage-label {
+    font-weight: bold;
+    color: #000000;
+}
+
+.storage-text {
+    color: #606060;
+}
+
+.storage-bar {
+    width: 100%;
+    height: 12px;
+    background: #ffffff;
+    border: 1px inset #c0c0c0;
+    position: relative;
+}
+
+.storage-fill {
+    height: 100%;
+    background: #00aa00;
+    transition: width 0.3s ease, background-color 0.3s ease;
+}
+
+.storage-fill.warning {
+    background: #ff8800;
+}
+
+.storage-fill.critical {
+    background: #ff0000;
 }