feat: add dashboard view toggle

style.css

@@ -176,7 +176,7 @@ main {
     top: 0;
     z-index: 10;
     display: grid;
-    grid-template-columns: minmax(220px, 360px) 1fr;
+    grid-template-columns: minmax(220px, 340px) 1fr auto;
     gap: 12px;
     align-items: center;
     padding: 12px 0;
@@ -214,7 +214,8 @@ main {
     box-shadow: 0 0 0 3px rgba(103, 232, 249, 0.08);
 }
 
-.segments {
+.segments,
+.view-toggle {
     display: flex;
     justify-content: flex-end;
     gap: 6px;
@@ -222,11 +223,13 @@ main {
     scrollbar-width: none;
 }
 
-.segments::-webkit-scrollbar {
+.segments::-webkit-scrollbar,
+.view-toggle::-webkit-scrollbar {
     display: none;
 }
 
-.segment {
+.segment,
+.view-option {
     min-width: max-content;
     height: 36px;
     padding: 0 13px;
@@ -237,7 +240,8 @@ main {
     cursor: pointer;
 }
 
-.segment.is-active {
+.segment.is-active,
+.view-option.is-active {
     color: #061014;
     background: #67e8f9;
     border-color: #67e8f9;
@@ -252,7 +256,11 @@ main {
 }
 
 .section[hidden],
-.service-card[hidden] {
+.service-card[hidden],
+.favorite-card[hidden],
+.favorite-group[hidden],
+#dashboardSections[hidden],
+#favoritesSections[hidden] {
     display: none;
 }