Add update notifications

static/css/layout.css

@@ -162,16 +162,109 @@
     font-weight: bold;
 }
 
+/* Update corner-controls for collapsible behavior */
 .corner-controls {
     position: fixed;
     top: 20px;
     right: 20px;
-    display: flex;
-    gap: 10px;
     z-index: var(--z-overlay);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    transition: all 0.3s ease;
+}
+
+.corner-controls-toggle {
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    background: var(--card-bg);
+    border: 1px solid var(--border-color);
+    color: var(--text-color);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    z-index: 2;
+    margin-bottom: 10px;
+}
+
+.corner-controls-toggle:hover {
+    background: var(--lora-accent);
+    color: white;
+    transform: translateY(-2px);
+}
+
+.corner-controls-items {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    opacity: 0;
+    transform: translateY(-10px) scale(0.9);
+    transition: all 0.3s ease;
+    pointer-events: none;
+}
+
+/* Expanded state */
+.corner-controls.expanded .corner-controls-items {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+    pointer-events: all;
+}
+
+/* Expanded state - only expand on hover if not already expanded by click */
+.corner-controls:hover:not(.expanded) .corner-controls-items {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+    pointer-events: all;
+}
+
+/* Ensure hidden class works properly */
+.hidden {
+    display: none !important;
+}
+
+/* Update toggle button styles */
+.update-toggle {
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    background: var(--card-bg);
+    border: 1px solid var(--border-color);
+    color: var(--text-color); /* Changed from var(--lora-accent) to match other toggles */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    position: relative;
+}
+
+.update-toggle:hover {
+    background: var(--lora-accent);
+    color: white;
+    transform: translateY(-2px);
+}
+
+/* Update badge styles */
+.update-badge {
+    position: absolute;
+    top: -3px;
+    right: -3px;
+    background-color: var(--lora-error);
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    box-shadow: 0 0 0 2px var(--card-bg);
+}
+
+/* Badge on corner toggle */
+.corner-badge {
+    top: 0;
+    right: 0;
 }
 
-/* Folder Tags Container */
 .folder-tags-container {
     position: relative;
     width: 100%;
@@ -560,10 +653,16 @@
     }
 
     .corner-controls {
-        /* Keep the fixed positioning even on mobile */
-        position: fixed;
-        top: 20px;
-        right: 20px;
+        top: 10px;
+        right: 10px;
+    }
+    
+    .corner-controls-items {
+        display: none;
+    }
+    
+    .corner-controls.expanded .corner-controls-items {
+        display: flex;
     }
 
     .back-to-top {