add: chats list page

app/public/style.css

@@ -17,6 +17,10 @@
     --color-green-lowered: hsl(100, 84%, 15%);
     --color-red-lowered: hsl(0, 84%, 35%);
 
+    --color-primary: hsl(25, 95%, 53%);
+    --color-primary-lowered: hsl(25, 95%, 49%);
+    --color-text-primary: hsl(0, 0%, 5%);
+
     --shadow-x-offset: 0;
     --shadow-y-offset: 0.125rem;
     --shadow-size: var(--pad-1);
@@ -51,6 +55,10 @@
     --color-green: hsl(100, 94%, 82%);
     --color-yellow: oklch(90.1% 0.076 70.697);
     --color-purple: hsl(284, 94%, 82%);
+
+    --color-primary: hsl(25, 95%, 63%);
+    --color-primary-lowered: hsl(25, 95%, 59%);
+    --color-text-primary: hsl(0, 0%, 5%);
 }
 
 html,
@@ -94,7 +102,7 @@ article {
     overflow: auto;
 }
 
-.tabs .tab {
+.tabs:not(.short) .tab {
     height: 100%;
 }
 
@@ -195,6 +203,10 @@ video {
     padding: var(--pad-2) var(--pad-4);
 }
 
+.card.surface {
+    background: var(--color-surface);
+}
+
 /* button */
 .button {
     --h: 36px;
@@ -215,6 +227,7 @@ video {
     text-decoration: none !important;
     user-select: none;
     appearance: none;
+    overflow: hidden;
 }
 
 .button:disabled {
@@ -276,6 +289,15 @@ video {
     }
 }
 
+.button.primary {
+    color: var(--color-text-primary) !important;
+    background: var(--color-primary);
+}
+
+.button.primary:hover {
+    background: var(--color-primary-lowered) !important;
+}
+
 /* dropdown */
 .dropdown {
     position: relative;
@@ -468,6 +490,12 @@ svg.icon {
     fill: currentColor;
 }
 
+.big_icon svg.icon {
+    width: 18px;
+    height: 18px;
+    position: absolute;
+}
+
 button svg {
     pointer-events: none;
 }
@@ -621,6 +649,10 @@ span {
     align-items: flex-end;
 }
 
+.gap_ch {
+    gap: 1ch;
+}
+
 /* table */
 table {
     width: 100%;
@@ -675,7 +707,7 @@ dialog {
     border: 0;
 }
 
-dialog.inner {
+dialog .inner {
     display: flex;
     flex-direction: column;
     gap: var(--pad-2);