Feature/basic chat

Gemfile

@@ -75,9 +75,6 @@ gem "postmark-rails"
 # Subscription management
 gem "stripe"
 
-# Chat
-gem "stream-chat-ruby"
-
 # Markdown support
 gem "redcarpet"
 

Gemfile.lock

@@ -85,7 +85,6 @@ GEM
       regexp_parser (>= 1.5, < 3.0)
       xpath (~> 3.2)
     concurrent-ruby (1.2.2)
-    connection_pool (2.4.1)
     content_disposition (1.0.0)
     crass (1.0.6)
     cssbundling-rails (1.3.3)
@@ -119,9 +118,6 @@ GEM
     faraday-multipart (1.0.4)
       multipart-post (~> 2)
     faraday-net_http (3.0.2)
-    faraday-net_http_persistent (2.1.0)
-      faraday (~> 2.5)
-      net-http-persistent (~> 4.0)
     ffi (1.16.1)
     globalid (1.2.1)
       activesupport (>= 6.1)
@@ -193,8 +189,6 @@ GEM
     msgpack (1.7.2)
     multi_json (1.15.0)
     multipart-post (2.3.0)
-    net-http-persistent (4.0.2)
-      connection_pool (~> 2.2)
     net-imap (0.3.7)
       date
       net-protocol
@@ -316,7 +310,6 @@ GEM
       faraday (>= 0.17.5, < 3.a)
       jwt (>= 1.5, < 3.0)
       multi_json (~> 1.10)
-    sorbet-runtime (0.5.11074)
     sprockets (4.2.1)
       concurrent-ruby (~> 1.0)
       rack (>= 2.2.4, < 4)
@@ -326,13 +319,6 @@ GEM
       sprockets (>= 3.0.0)
     stimulus-rails (1.2.2)
       railties (>= 6.0.0)
-    stream-chat-ruby (3.0.0)
-      faraday
-      faraday-multipart
-      faraday-net_http_persistent
-      jwt
-      net-http-persistent
-      sorbet-runtime
     stringio (3.0.8)
     stripe (9.4.0)
     thor (1.2.2)
@@ -391,7 +377,6 @@ DEPENDENCIES
   shrine-google_cloud_storage
   sprockets-rails
   stimulus-rails
-  stream-chat-ruby
   stripe
   turbo-rails
   tzinfo-data

app/assets/stylesheets/application.bootstrap.scss

@@ -4,12 +4,48 @@ $primary: #262626;
 @import 'bootstrap/scss/bootstrap';
 @import 'bootstrap-icons/font/bootstrap-icons';
 
+@import 'channels';
 @import 'chats';
 @import 'home';
 @import 'location';
+@import 'profiles';
 @import 'search_location';
 @import 'visas';
 
 .navbar-actions {
   display: flex;
 }
+
+.profile-picture {
+  border-radius: 50%;
+
+  height: 180px;
+  width: 180px;
+
+  &.chat-profile-picture {
+    margin-right: 4px;
+
+    height: 36px;
+    width: 36px;
+
+    &.placeholder {
+      font-size: 1rem;
+    }
+  }
+
+  &.placeholder {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    background-color: lighten($primary, 20%);
+    color: $white;
+
+    font-size: 5rem;
+
+    &:hover {
+      cursor: default;
+    }
+  }
+}
+

app/assets/stylesheets/channels.scss

@@ -0,0 +1,137 @@
+.chat-channel-section {
+  flex: 1;
+
+  display: flex;
+  flex-direction: column;
+
+  .channel-header {
+    flex: 0;
+
+    display: flex;
+    flex-direction: row;
+
+    border-bottom: 1px solid $primary;
+
+    .leave-channel-button {
+      color: $danger;
+    }
+  }
+
+  .channel-message-section {
+    flex: 1 0 0;
+    overflow: scroll;
+
+    display: flex;
+    flex-direction: column-reverse;
+
+    .chat-message {
+      display: flex;
+      flex-direction: row;
+
+      align-items: center;
+
+      margin: 0 0.25rem 0.25rem 0.25rem;
+
+      .message-actions-container {
+        display: none;
+        flex-direction: row;
+        align-items: center;
+
+        a, button {
+          display: flex;
+        }
+
+        .delete-icon {
+          color: $danger;
+        }
+      }
+
+      &:hover {
+        .message-actions-container {
+          display: flex;
+        }
+      }
+
+      p {
+        max-width: 50vw;
+        margin: 0; // reset margin
+        padding: 0.5rem 0.75rem;
+        border-radius: 1.5rem;
+
+        color: $white;
+        background-color: $primary;
+      }
+
+      &.chat-message-current-user {
+        display: flex;
+        flex-direction: row-reverse;
+      }
+
+      .message-body {
+        white-space: pre-line;
+      }
+
+      .replying-to-link {
+        border-bottom: 1px solid $white;
+      }
+
+      .replying-to {
+        color: $white;
+        font-size: 0.75rem;
+      }
+    }
+
+    .load-more-link-container, .start-of-conversation {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      margin-top: 0.25rem;
+    }
+  }
+
+  .channel-message-form-section {
+    flex: 0;
+    border-top: 1px solid $primary;
+
+    .channel-message-form {
+      display: flex;
+      flex-direction: row;
+
+      .channel-message-textarea {
+        flex: 1;
+      }
+
+      .channel-message-button-container {
+        min-width: 6rem;
+        flex: 0;
+      }
+    }
+
+    .reply-to-section {
+      display: none;
+      flex-direction: row;
+
+      p {
+        flex: 1;
+      }
+    }
+
+    .error-scroll-to-reply {
+      display: none;
+      color: $danger;
+    }
+
+    .join-channel-section {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+
+  .message-sender {
+    font-size: 0.75rem;
+    margin-left: 44px; // align with message
+  }
+}

app/assets/stylesheets/chats.scss

@@ -1,43 +1,63 @@
-@import 'stream-chat-react/dist/scss/v2/index.scss';
-
 body {
   height: 100vh;
-}
+  max-height: 100vh;
 
-.chat-root {
   display: flex;
+  flex-direction: column;
 
-  .str-chat__channel {
-    flex: 1;
+  .navbar {
+    flex: 0;
   }
 
-  .str-chat-channel-list {
-    width: 20vw;
-  }
-}
+  .chat-screen-container {
+    flex: 1;
 
-.str-chat {
-  --str-chat__primary-color: #262626;
-  --str-chat__own-message-bubble-background-color: #262626;
-  --str-chat__own-message-bubble-color: white;
-}
+    .chat-message-section {
+      display: flex;
+      flex-direction: column;
 
-.str-chat__message--me {
-  --str-chat__message-mention-color: white;
-}
+      border-left: 1px solid $primary;
 
-.str-chat__message-input {
-  position: abolute;
-  bottom: 0.5rem;
-}
+      &.no-chat {
+        justify-content: center;
+        align-items: center;
+      }
+    }
 
-.str-chat__list {
-  min-height: 75vh;
-  max-height: 75vh;
-  overflow: scroll;
-}
+    .channel-list-container {
+      display: flex;
+      flex-direction: column;
+
+      .channel-list {
+        flex: 1;
+
+        display: flex;
+        flex-direction: column;
+
+        .channel-links-container {
+          flex: 1 0 0;
+          overflow: scroll;
+
+          display: flex;
+          flex-direction: column;
 
-.str-chat__thread {
-  max-width: 30vw;
+          .channel-link {
+            border-bottom: 1px solid $primary;
+            text-decoration: none;
+
+            &:hover {
+              background-color: lighten($primary, 70%);
+            }
+          }
+        }
+
+        .channel-list-actions {
+          flex: 0;
+
+          display: grid;
+        }
+      }
+    }
+  }
 }
 

app/assets/stylesheets/visas.scss

@@ -1,4 +1,4 @@
-.delete-country-button {
+.delete-button {
   background: none;
 	color: inherit;
 	border: none;