feat: sidebar, files in opfs

1 files changed, 57 insertions, 11 deletions

diff --git a/assets/style.scss b/assets/style.scss
index 8020885..14909c5 100644
--- a/assets/style.scss
+++ b/assets/style.scss
@@ -139,7 +139,7 @@ p {
   margin: 0;
 }
 
-.chats-list {
+.chats-list, .roster-list {
   border-width: 0 2px 0 0;
   border-color: black;
   border-style: solid;
@@ -147,18 +147,21 @@ p {
   width: 400px;
   flex: 0 0 auto;
   align-self: stretch;
+  display: flex;
+  flex-direction: column;
 }
 
-.chats-list>* {
+.chats-list>*, .roster-list>* {
   padding: 8px 16px;
 }
 
-.chats-list h2 {
+.chats-list h2, .roster-list h2 {
   margin-top: 0.4rem;
   border-bottom: 2px solid black;
+  flex: 0 0 auto;
 }
 
-.chats-list-item {
+.chats-list-item, .roster-list-item, {
   display: flex;
   gap: 8px;
   border-radius: 1em;
@@ -168,7 +171,9 @@ p {
 }
 
 .chats-list-item:hover,
-.chats-list-item.open {
+.chats-list-item.open,
+.roster-list-item:hover,
+.roster-list-item.open, {
   background: #00000060;
   /* color: black; */
   /* border: 2px solid black; */
@@ -183,13 +188,14 @@ p {
   height: 48px;
 }
 
-.chats-list-item .avatar {
+.chats-list-item .avatar, .roster-list-item .avatar {
   width: 48px;
   height: 48px;
 }
 
-.chats-list-chats {
-  height: auto;
+.chats-list-chats, .roster-list-roster {
+  flex-grow: 1;
+  overflow: scroll;
 }
 
 .open-chat-views {
@@ -392,22 +398,62 @@ p {
   opacity: 0;
 }
 
+.sidebar {
+  display: flex;
+}
+
 .dock {
   display: flex;
   flex-direction: column;
   border-width: 0 2px 0 0;
 }
 
-.dock-icon {
-  margin: 8px;
+.shortcuts {
+  padding: 8px 0;
+}
+
+.dock-item {
+  display: flex;
+  justify-content: center;
+  position: relative;
+}
+
+.dock-pill {
+  position: absolute;
+  border-radius: 50%;
+  left: -4px;
+  top: calc(50% - 4px);
+  width: 8px;
+  height: 8px;
+  opacity: 0;
+  background-color: #dcdcdc;
+  transition-duration: 250ms;
+}
+
+.dock-item.open .dock-pill {
+  opacity: 100%;
+}
+
+.dock-item:hover .dock-pill, .dock-item.hovering .dock-pill {
+  top: calc(50% - 14px);
+  height: 28px;
+  opacity: 100%;
+}
+
+.dock-item.focused .dock-pill {
+  top: calc(50% - 24px);
+  height: 48px;
+  opacity: 100%;
 }
 
 .shortcuts {
   border-bottom: 2px solid black;
 }
 
-.dock-icon img {
+.dock-item img {
   width: 64px;
+  height: 64px;
+  padding: 4px 8px;
 }
 
 /* font-families */