Changes First Version

public/index.html

@@ -9,9 +9,11 @@
 <body>
     <!-- Context Menu -->
     <div class="context-menu" id="context-menu">
-        <div class="context-menu-item" id="context-edit">✏️ Edit</div>
-        <div class="context-menu-item" id="context-promote" style="display: none;">⬆️ Promote to Task</div>
-        <div class="context-menu-item danger" id="context-delete">🗑️ Delete</div>
+        <div class="context-menu-item" id="context-edit">&#9998; Edit</div>
+        <div class="context-menu-item" id="context-promote" style="display: none;">&#11014; Promote to Task</div>
+        <div class="context-menu-item" id="context-restore" style="display: none;">&#9654; Restore to Active</div>
+        <div class="context-menu-item" id="context-archive" style="display: none;">&#128230; Archive</div>
+        <div class="context-menu-item danger" id="context-delete">&#128465; Delete</div>
     </div>
 
     <!-- Modal for creating/editing tasks -->
@@ -33,7 +35,11 @@
 
                 <div class="form-group">
                     <label for="task-description">Description</label>
-                    <textarea id="task-description" placeholder="What do you want to achieve?" rows="3"></textarea>
+                    <textarea id="task-description" placeholder="What do you want to achieve?" rows="2"></textarea>
+                    <label class="checkbox-label">
+                        <input type="checkbox" id="task-expand-desc">
+                        <span>Show full description on card</span>
+                    </label>
                 </div>
 
                 <div class="form-row">
@@ -61,10 +67,19 @@
     <div class="container">
         <header>
             <h1>Learning Progress Tracker</h1>
-            <button class="btn-add" id="open-modal">+ New Goal</button>
+            <div class="header-actions">
+                <button class="btn-add" id="open-modal">+ New Goal</button>
+                <div class="view-toggle">
+                    <button class="toggle-btn active" id="view-active">Active</button>
+                    <button class="toggle-btn" id="view-archive">
+                        Archive
+                        <span class="archive-count" id="archive-count" style="display:none;">0</span>
+                    </button>
+                </div>
+            </div>
         </header>
 
-        <!-- Overall Progress - Always Visible -->
+        <!-- Overall Progress - Active view only -->
         <div class="overall-progress" id="overall-progress">
             <div class="overall-header">
                 <span>Overall Progress</span>