Add support for mentioning users; change loading screen loading animation to falling; restore chat close functionality on mobile; make message input resize on message send.

web/style.css

@@ -66,10 +66,14 @@ body.light {
     --text-primary: black;
     --text-secondary: black;
     --text-muted: rgb(134, 134, 134);
-    --accent: black;                                                                   --accent-gradient: white;                                                          --accent-hover: #4f46e5;                                                           --online-color: rgba(0, 0, 000, 0.6);
+    --accent: black;
+    --accent-gradient: white;
+    --accent-hover: #4f46e5;
+    --online-color: rgba(0, 0, 000, 0.6);
     --bubble-incoming: #01abaa;
     --bubble-outgoing: #016f6e;
-    --input-bg: white;                                                                 --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --input-bg: white;
+    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);                                                                                   --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.1);                                                                                  --glass-blur: blur(20px);
     --high-box-shadow: 2px 7px 5px rgba(0, 0, 0, 0.3), 0px -4px 10px rgba(0, 0, 0, 0.3);
 }
@@ -884,21 +888,21 @@ li {
 }
 
 /* Scrollbars styling */
-::-webkit-scrollbar {
+*::-webkit-scrollbar {
     width: 6px;
     height: 6px;
 }
 
-::-webkit-scrollbar-track {
+*::-webkit-scrollbar-track {
     background: transparent;
 }
 
-::-webkit-scrollbar-thumb {
+*::-webkit-scrollbar-thumb {
     background: rgba(255, 255, 255, 0.08);
     border-radius: 0px;
 }
 
-::-webkit-scrollbar-thumb:hover {
+*::-webkit-scrollbar-thumb:hover {
     background: rgba(255, 255, 255, 0.16);
 }
 
@@ -1029,35 +1033,73 @@ li {
     align-items: center;
     justify-content: center;
     flex-direction: column;
-    outline: thick solid var(--bg-secondary);
     gap: 1rem;
 }
 
 #loading-screen.collapsed {
-    transform: translateY(100%);
+    transform-origin: top center;
+    animation: fall 0.8s cubic-bezier(.4, 0, .8, .2) forwards;
     opacity: 0;
 }
 
 #mentioning-indicator {
     transition: all .4s cubic-bezier(0.4, 0, 0.2, 1);
     background-color: var(--bg-secondary);
-    padding: 0.4rem 0.8rem;
-    max-height: 3em;
-    text-overflow: ellipsis;
+    padding: 0.4em 0.8em;
     overflow: hidden;
-    opacity: 1;
-    margin-top: .8rem;
 }
 
-#mentioning-indicator.collapsed {
+#mentioning-indicator > span {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    overflow: hidden;
+}
+
+#mentioning-indicator.collapsed, #mentioning-suggestion.collapsed {
     max-height: 0;
     padding-top: 0;
     padding-bottom: 0;
     margin-top: 0;
-    opacity: 0;
+    /* opacity: 0; */
     pointer-events: none;
 }
 
+#mentioning-suggestion {
+    transition: all .4s cubic-bezier(0.4, 0, 0.2, 1);
+    display: flex;
+    height: 4rem;
+    padding: 0.4rem 0.8rem;
+    background-color: var(--bg-secondary);
+}
+
+#mention-suggestions {
+    display: flex;
+    gap: 1em;
+    align-items: center;
+
+    flex: 1;
+    min-width: 0;
+
+    overflow-x: auto;
+    overflow-y: hidden;
+
+    justify-content: center;
+}
+
+.mention-suggestion::before {
+    content: "[ ";
+}
+
+.mention-suggestion::after {
+    content: " ]";
+}
+
+#mention-suggestions > * {
+    flex-shrink: 0;
+}
+
 @media (max-width: 768px) {
     .app-container {
         width: 100%;
@@ -1252,3 +1294,17 @@ h2.modal-title {
     color: var(--bg-main);
 }
 
+@keyframes fall {
+    0% {
+        transform: perspective(600px) rotateX(0deg);
+    }
+    70% {
+        transform: perspective(600px) rotateX(82deg);
+    }
+    85% {
+        transform: perspective(600px) rotateX(94deg);
+    }
+    100% {
+        transform: perspective(600px) rotateX(90deg);
+    }
+}