1 files changed, 240 insertions, 55 deletions

diff --git a/assets/style.scss b/assets/style.scss
index 7bdffa0..10042c2 100644
--- a/assets/style.scss
+++ b/assets/style.scss
@@ -1,8 +1,25 @@
+/*
+ * SPDX-FileCopyrightText: 2025 cel <cel@bunny.garden>
+ *
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
 /* App-wide styling */
 img {
   display: block;
 }
 
+::-webkit-scrollbar {
+  width: 8px;
+}
+.messages-buffer::-webkit-scrollbar {
+  width: 10px !important;
+}
+
+::-webkit-scrollbar-thumb {
+  background: black;
+}
+
 body {
   max-width: 100vw;
   max-height: 100vh;
@@ -102,6 +119,7 @@ label {
 
 input[type="text"],
 input[type="password"] {
+  font-size: 1rem;
   border: 2px solid black;
   font-family: "k2d";
 }
@@ -118,6 +136,8 @@ main {
 
 button,
 .button {
+  text-align: center;
+  font-size: 1rem;
   background: #FACC34;
   color: #000000;
   text-decoration: none !important;
@@ -127,6 +147,19 @@ button,
   font-family: K2D;
   font-weight: 600;
   box-shadow: inset 0px -0.75em 0.5em #ebb62e, 0 0.25em 0.25em #00000048;
+  cursor: pointer;
+}
+
+.overlay .error {
+  color: black;
+}
+
+button:hover, .button:hover {
+  background: #f9c61b;
+}
+
+button:clicked, .button:clicked {
+  background: #ffc300;
 }
 
 h1,
@@ -143,7 +176,9 @@ p {
   margin: 0;
 }
 
-.chats-list, .roster-list, .settings-sidebar {
+.chats-list,
+.roster-list,
+.settings-sidebar {
   border-width: 0 2px 0 0;
   border-color: black;
   border-style: solid;
@@ -163,17 +198,23 @@ p {
 
 .settings-sidebar>* {
   padding: 8px 16px;
+  cursor: pointer;
 }
 
-.settings-sidebar>.open, .settings-sidebar>*:hover {
+.settings-sidebar>.open,
+.settings-sidebar>*:hover {
   background: #00000060;
 }
 
-.chats-list>*, .roster-list>*, .settings .header {
+.chats-list>*,
+.roster-list>*,
+.settings .header {
   padding: 8px 16px;
 }
 
-.chats-list .header, .roster-list .header, .settings .header {
+.chats-list .header,
+.roster-list .header,
+.settings .header {
   margin-top: 0.4rem;
   border-bottom: 2px solid black;
   display: flex;
@@ -181,11 +222,15 @@ p {
   align-items: center;
 }
 
-.chats-list h2, .roster-list h2 {
+.chats-list h2,
+.roster-list h2 {
   flex: 0 0 auto;
 }
 
-.chats-list-item, .roster-list-item, {
+.chats-list-item,
+.roster-list-item,
+{
+  cursor: pointer;
   display: flex;
   align-items: start;
   gap: 8px;
@@ -199,15 +244,17 @@ p {
 .chats-list-item:hover,
 .chats-list-item.open,
 .roster-list-item:hover,
-.roster-list-item.open, {
-  background: #00000060;
-  /* color: black; */
-  /* border: 2px solid black; */
-  /* box-shadow: inset 0px -0.75em 0.5em #19311F, 0 0.25em 0.25em #00000048; */
-  /* background: linear-gradient(0deg, #364B3B 0%, #19311F 100%); */
+.roster-list-item.open,
+{
+background: #00000060;
+/* color: black; */
+/* border: 2px solid black; */
+/* box-shadow: inset 0px -0.75em 0.5em #19311F, 0 0.25em 0.25em #00000048; */
+/* background: linear-gradient(0deg, #364B3B 0%, #19311F 100%); */
 }
 
-.chats-list-item .item-info, .roster-list-item .item-info {
+.chats-list-item .item-info,
+.roster-list-item .item-info {
   width: 0;
   display: flex;
   flex: 1 1 auto;
@@ -215,22 +262,26 @@ p {
   justify-content: space-between;
 }
 
-.chats-list-item .main-info, .roster-list-item .main-info {
+.chats-list-item .main-info,
+.roster-list-item .main-info {
   display: flex;
   justify-content: space-between;
   align-items: baseline;
 }
 
-.chats-list-item .name, .roster-list-item .name {
+.chats-list-item .name,
+.roster-list-item .name {
   font-weight: bold;
   font-size: 1.1em;
 }
 
-.chats-list-item .name, .roster-list-item .name {
+.chats-list-item .name,
+.roster-list-item .name {
   font-weight: light;
 }
 
-.chats-list-item .sub-info, .roster-list-item .sub-info {
+.chats-list-item .sub-info,
+.roster-list-item .sub-info {
   display: flex;
 }
 
@@ -259,14 +310,16 @@ p {
   height: 48px;
 }
 
-.chats-list-item .avatar, .roster-list-item .avatar {
+.chats-list-item .avatar,
+.roster-list-item .avatar {
   width: 48px;
   height: 48px;
 }
 
-.chats-list-chats, .roster-list-roster {
+.chats-list-chats,
+.roster-list-roster {
   flex-grow: 1;
-  overflow: scroll;
+  /* overflow-y: scroll; */
 }
 
 .open-chat-views {
@@ -308,29 +361,22 @@ p {
   max-height: auto;
 }
 
-.new-message-composer textarea {
-  font-family: 'K2D';
+.new-message-composer .overlay-scroll {
+  max-height: min(32em, 50vh);
+  background-color: #dcdcdc;
   border: 2px solid black;
-  font-size: 16px;
-  padding: 8px;
-  /* width: auto; */
-  margin: 0;
-  height: auto;
-  /* resize: none; */
-  /* box-sizing: border-box; */
-  /* overflow: scroll; */
-  /* display: block; */
+}
+
+[contenteditable]:focus {
+    outline: 0px solid transparent;
 }
 
 .new-message-composer .text-box {
+  padding: 8px;
   white-space: pre-wrap;
   color: black;
-  background-color: #dcdcdc;
-  max-height: 32em;
-  overflow: scroll;
+  /* overflow-y: auto; */
   font-size: 16px;
-  border: 2px solid black;
-  padding: 8px;
   margin: 0;
   height: fit-content;
 }
@@ -354,7 +400,7 @@ p {
   /* You could leave this, but after a user resizes, then it ruins the auto sizing */
   resize: none;
   /* Firefox shows scrollbar on growth, you can hide like this. */
-  overflow: scroll;
+  overflow-y: scroll;
 }
 
 .grow-wrap>textarea,
@@ -377,7 +423,25 @@ p {
   display: flex;
   flex-direction: column-reverse;
   flex-grow: 1;
-  overflow: scroll;
+  overflow-y: scroll;
+}
+
+
+.messages-buffer .new-day {
+  display: flex;
+  align-items: center;
+  margin: 0.5em 0 0 0;
+  /* margin: 1em -1em; */
+  
+  
+  &:before,
+  &:after {
+    content: "";
+    flex: 1;
+    height: 2px;
+    margin: 0 1em;
+    background: black;
+  }
 }
 
 .chat-message {
@@ -457,7 +521,8 @@ p {
   filter: invert(99%) sepia(1%) saturate(2689%) hue-rotate(208deg) brightness(106%) contrast(73%);
 }
 
-.chat-message.final .message-delivery, .visible {
+.chat-message.final .message-delivery,
+.visible {
   opacity: 100% !important;
 }
 
@@ -486,6 +551,7 @@ p {
   display: flex;
   justify-content: center;
   position: relative;
+  cursor: pointer;
 }
 
 .dock-pill {
@@ -504,7 +570,8 @@ p {
   opacity: 100%;
 }
 
-.dock-item:hover .dock-pill, .dock-item.hovering .dock-pill {
+.dock-item:hover .dock-pill,
+.dock-item.hovering .dock-pill {
   top: calc(50% - 14px);
   height: 28px;
   opacity: 100%;
@@ -534,6 +601,7 @@ p {
 
 .avatar-with-presence {
   position: relative;
+  height: fit-content;
 }
 
 .avatar-with-presence>.presence-show-icon {
@@ -552,6 +620,10 @@ p {
   border-top: 2px solid black;
 }
 
+.sidebar {
+  position: relative;
+}
+
 .dock .personal .dock-item {
   padding: 8px 16px
 }
@@ -563,7 +635,6 @@ p {
 
 .sidebar-drawer {
   height: auto;
-  position: relative;
   z-index: 5;
 }
 
@@ -571,16 +642,29 @@ p {
   z-index: 10;
 }
 
-.sidebar .sidebar-hovering-drawer>* {
+.sidebar .sidebar-hovering-drawer {
   position: absolute;
-  left: 0;
-  transition: left 0.2s ease-in;
-  transition-behaviour: allow-discrete;
+  height: 100%;
+  /* must be width of dock... */
+  left: 82px;
+  transition: left 0.2s ease-out allow-discrete;
 }
+
 @starting-style {
-  .sidebar .sidebar-hovering-drawer>* {
+  .sidebar .sidebar-hovering-drawer {
     /* TODO: allow to edit this width */
-    left: -400px;
+    left: -318px;
+  }
+}
+
+.sidebar .behind-hovering {
+  width: 402px;
+  transition: width 0.2s ease-out allow-discrete;
+}
+
+@starting-style {
+  .sidebar .behind-hovering {
+    width: 0;
   }
 }
 
@@ -589,7 +673,8 @@ p {
   z-index: 100;
 }
 
-.overlay-background, .modal-background {
+.overlay-background,
+.modal-background {
   position: fixed;
   top: 0;
   left: 0;
@@ -623,12 +708,83 @@ p {
 }
 
 .settings-main {
+  height: calc(100% - 56px);
   display: flex;
   flex: 1 1 auto;
 }
 
 .settings-page {
   flex: 1 1 0;
+  overflow-y: auto;
+}
+
+.profile-settings {
+  display: flex;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+  flex-direction: row-reverse;
+}
+
+.profile-form {
+  flex: 1 1 auto;
+  margin: 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 16px;
+}
+
+.profile-form label {
+  font-size: 1rem;
+}
+
+.profile-form .change-avatar {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+
+#client-user-avatar {
+  opacity: 0;
+  position: absolute;
+  z-index: -1;
+}
+
+.profile-preview {
+  margin: 24px;
+  border: 2px solid black;
+  min-width: 240px;
+}
+
+.profile-preview .preview {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.profile-preview h2 {
+  padding: 8px 16px;
+  border-bottom: 2px solid black;
+}
+
+.profile-preview .avatar {
+  width: 64px;
+  height: 64px;
+}
+
+.profile-preview .nick {
+  font-size: 20px;
+  font-weight: bold;
+}
+
+hr {
+  width: 100%;
+  border: 1px solid black;
+}
+
+.profile-preview .preview {
+  padding: 16px;
 }
 
 .modal .overlay {
@@ -652,6 +808,7 @@ p {
 }
 
 .menu-item {
+  cursor: pointer;
   padding: 4px 8px;
 }
 
@@ -674,6 +831,7 @@ p {
   font-size: 1.1em;
   font-weight: bold;
 }
+
 .personal-status-menu .user .jid {
   font-family: Diolce;
 }
@@ -697,12 +855,24 @@ hr {
   padding: 4px;
 }
 
-.new-chat:hover, .new-chat.open, 
-.add-contact:hover, .add-contact.open,
+.new-chat, .add-contact, .close {
+  cursor: pointer;
+}
+
+.new-chat:hover,
+.new-chat.open,
+.add-contact:hover,
+.add-contact.open,
 .close:hover {
   background: #00000060;
 }
 
+.add-contact-panel {
+  flex-shrink: 0;
+  max-height: calc(100% - 150px);
+  border-bottom: 2px solid black;
+}
+
 .new-chat-widget form {
   border: 2px solid black;
   padding: 4px;
@@ -713,17 +883,14 @@ hr {
   align-items: end;
 }
 
-.roster-add-contact {
-  border-bottom: 2px solid black;
-}
-
 .add-contact-menu h3 {
   margin: 1em 0 0.5em;
 }
 
 .add-contact-menu form {
   display: flex;
-  gap: 16px;
+  flex-direction: column;
+  gap: 8px;
 }
 
 .add-contact-menu form input {
@@ -736,6 +903,24 @@ hr {
   justify-content: space-between;
 }
 
+.jid-with-buttons {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 4px;
+  margin-bottom: 8px;
+}
+
+.jid-with-buttons .buttons {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.jid-with-buttons .buttons>* {
+  flex: 1 1 auto;
+}
+
 .jid-with-button .jid {
   flex: 1 1 auto;
 }