Feature: New chatbox

chat/ConversationView.vue

@@ -358,6 +358,7 @@
           : '')
       "
       :hasToolbar="settings.bbCodeBar"
+      :toolbarPosition="settings.bbCodeBarPosition"
       ref="textBox"
       style="position: relative; margin-top: 5px"
       :maxlength="
@@ -367,6 +368,7 @@
       "
       :characterName="ownName"
       :type="'big'"
+      :placeholder="editorPlaceholder"
     >
       <span
         v-if="isPrivate(conversation) && conversation.typingStatus !== 'clear'"
@@ -403,71 +405,74 @@
           style="flex: 1; margin-left: 5px"
         ></bbcode-ui>
       </div>
-      <div class="bbcode-editor-controls">
-        <div
-          v-if="isChannel(conversation) || isPrivate(conversation)"
-          style="margin-right: 5px"
-        >
-          {{ getByteLength(conversation.enteredText) }} /
-          {{ conversation.maxMessageLength }}
-        </div>
-        <ul
-          class="nav nav-pills send-ads-switcher"
-          v-if="isChannel(conversation)"
-          style="position: relative; z-index: 10; margin-right: 5px"
-        >
-          <li
-            class="nav-item"
-            v-show="
-              conversation.channel.mode === 'both' ||
-              conversation.channel.mode === 'chat'
-            "
+      <template v-slot:controls>
+        <div class="toolbar-controls">
+          <span
+            v-if="isChannel(conversation) || isPrivate(conversation)"
+            class="char-counter"
           >
-            <a
-              href="#"
-              :class="{
-                active: !conversation.isSendingAds,
-                disabled:
-                  conversation.channel.mode != 'both' ||
-                  conversation.adManager.isActive()
-              }"
-              class="nav-link"
-              @click.prevent="setSendingAds(false)"
-              >{{ l('channel.mode.chat') }}</a
-            >
-          </li>
-          <li
-            class="nav-item"
-            v-show="
-              conversation.channel.mode === 'both' ||
-              conversation.channel.mode === 'ads'
-            "
+            {{ getByteLength(conversation.enteredText) }} /
+            {{ conversation.maxMessageLength }}
+          </span>
+          <ul
+            class="nav nav-pills send-ads-switcher"
+            v-if="isChannel(conversation)"
           >
-            <a
-              href="#"
-              :class="{
-                active: conversation.isSendingAds,
-                disabled:
-                  conversation.channel.mode != 'both' ||
-                  conversation.adManager.isActive()
-              }"
-              class="nav-link"
-              @click.prevent="setSendingAds(true)"
-              >{{ adsMode }}</a
+            <li
+              class="nav-item"
+              v-show="
+                conversation.channel.mode === 'both' ||
+                conversation.channel.mode === 'chat'
+              "
             >
-          </li>
-          <!--                    <li class="nav-item">-->
-          <!--                        <a href="#" :class="{active: conversation.adManager.isActive()}" class="nav-link toggle-autopost" @click="toggleAutoPostAds()">{{l('admgr.toggleAutoPost')}}</a>-->
-          <!--                    </li>-->
-        </ul>
-        <div
-          class="btn btn-sm btn-primary"
-          v-show="!settings.enterSend"
-          @click="sendButton"
-        >
-          {{ l('chat.send') }}
+              <a
+                href="#"
+                :class="{
+                  active: !conversation.isSendingAds,
+                  disabled:
+                    conversation.channel.mode != 'both' ||
+                    conversation.adManager.isActive()
+                }"
+                class="nav-link"
+                @click.prevent="setSendingAds(false)"
+                >{{ l('channel.mode.chat') }}</a
+              >
+            </li>
+            <li
+              class="nav-item"
+              v-show="
+                conversation.channel.mode === 'both' ||
+                conversation.channel.mode === 'ads'
+              "
+            >
+              <a
+                href="#"
+                :class="{
+                  active: conversation.isSendingAds,
+                  disabled:
+                    conversation.channel.mode != 'both' ||
+                    conversation.adManager.isActive()
+                }"
+                class="nav-link"
+                @click.prevent="setSendingAds(true)"
+                >{{ adsMode }}</a
+              >
+            </li>
+          </ul>
+          <span
+            class="toolbar-separator"
+            v-show="!settings.enterSend && isChannel(conversation)"
+          ></span>
+          <div
+            class="btn btn-sm btn-primary send-btn"
+            v-show="!settings.enterSend"
+            @click="sendButton"
+            :title="l('chat.send')"
+          >
+            <i class="fas fa-paper-plane"></i>
+          </div>
         </div>
-      </div>
+      </template>
     </bbcode-editor>
     <command-help ref="helpDialog"></command-help>
     <settings ref="settingsDialog" :conversation="conversation"></settings>
@@ -737,6 +742,15 @@
         : undefined;
     }
 
+    get editorPlaceholder(): string {
+      if (this.isChannel(this.conversation)) {
+        return l('chat.placeholder.channel', this.conversation.name);
+      } else if (this.isPrivate(this.conversation)) {
+        return l('chat.placeholder.private', this.conversation.name);
+      }
+      return '';
+    }
+
     get conversation(): Conversation {
       return core.conversations.selectedConversation;
     }

chat/ManageChannel.vue

@@ -42,9 +42,13 @@
         style="position: relative"
         :maxlength="50000"
       >
-        <div class="bbcode-editor-controls">
-          {{ getByteLength(description) }} / {{ maxLength }}
-        </div>
+        <template v-slot:controls>
+          <div class="toolbar-controls">
+            <span class="char-counter">
+              {{ getByteLength(description) }} / {{ maxLength }}
+            </span>
+          </div>
+        </template>
       </bbcode-editor>
     </div>
     <template v-if="isChannelOwner">

chat/SettingsView.vue

@@ -89,6 +89,29 @@
         </div>
       </div>
 
+      <div class="mb-3">
+        <div class="d-flex p-2 justify-content-between align-items-start">
+          <div class="w-50">
+            <label class="control-label" for="bbCodeBarPosition">
+              {{ l('settings.bbCodeBarPosition') }}
+            </label>
+          </div>
+          <select
+            v-model="bbCodeBarPosition"
+            id="bbCodeBarPosition"
+            class="form-select form-select-sm w-auto"
+            :disabled="!bbCodeBar"
+          >
+            <option value="bottom">
+              {{ l('settings.bbCodeBarPosition.bottom') }}
+            </option>
+            <option value="top">
+              {{ l('settings.bbCodeBarPosition.top') }}
+            </option>
+          </select>
+        </div>
+      </div>
+
       <div class="mb-3">
         <div class="d-flex p-2 justify-content-between align-items-start">
           <div class="w-50">
@@ -1178,6 +1201,7 @@
     showPerCharacterFriends!: boolean;
     hideNonCharacterFriends!: boolean;
     bbCodeBar!: boolean;
+    bbCodeBarPosition!: 'bottom' | 'top';
 
     risingAdScore!: boolean;
     risingLinkPreview!: boolean;
@@ -1244,6 +1268,7 @@
       this.showPerCharacterFriends = settings.showPerCharacterFriends;
       this.hideNonCharacterFriends = settings.hideNonCharacterFriends;
       this.bbCodeBar = settings.bbCodeBar;
+      this.bbCodeBarPosition = settings.bbCodeBarPosition;
       this.availableImports = (
         await core.settingsStore.getAvailableCharacters()
       ).filter(x => x !== core.connection.character);
@@ -1400,6 +1425,7 @@
         showPerCharacterFriends: this.showPerCharacterFriends,
         hideNonCharacterFriends: this.hideNonCharacterFriends,
         bbCodeBar: this.bbCodeBar,
+        bbCodeBarPosition: this.bbCodeBarPosition,
 
         risingAdScore: this.risingAdScore,
         risingLinkPreview: this.risingLinkPreview,

chat/StatusSwitcher.vue

@@ -27,9 +27,11 @@
     <div class="mb-3">
       <label class="control-label">{{ l('chat.setStatus.message') }}</label>
       <editor id="text" v-model="text" classes="form-control" maxlength="255">
-        <div class="bbcode-editor-controls">
-          {{ getByteLength(text) }} / 255
-        </div>
+        <template v-slot:controls>
+          <div class="toolbar-controls">
+            <span class="char-counter"> {{ getByteLength(text) }} / 255 </span>
+          </div>
+        </template>
       </editor>
     </div>
     <div class="mb-3">

chat/common.ts

@@ -84,6 +84,7 @@ export class Settings implements ISettings {
   showPerCharacterFriends = true;
   hideNonCharacterFriends = false;
   bbCodeBar = true;
+  bbCodeBarPosition: 'bottom' | 'top' = 'bottom';
 
   risingAdScore = true;
   risingLinkPreview = true;

chat/interfaces.ts

@@ -286,6 +286,7 @@ export namespace Settings {
     readonly showPerCharacterFriends: boolean;
     readonly hideNonCharacterFriends: boolean;
     readonly bbCodeBar: boolean;
+    readonly bbCodeBarPosition: 'bottom' | 'top';
 
     readonly risingAdScore: boolean;
     readonly risingLinkPreview: boolean;

chat/locales/en_us.json

@@ -150,6 +150,8 @@
   "chat.roll": "rolls {0}: {1}",
   "chat.search": "Search in messages…",
   "chat.send": "Send",
+  "chat.placeholder.channel": "Send a message in #{0}…",
+  "chat.placeholder.private": "Send a message to {0}…",
   "chat.setStatus": "Set status",
   "chat.setStatus.message": "Status message (optional)",
   "chat.setStatus.status": "Status",
@@ -342,6 +344,7 @@
   "duplicateDialog.info": "This will duplicate the character, kinks, infotags, customs, subkinks and images. Guestbook entries, friends, groups, and bookmarks are not duplicated.",
   "duplicateDialog.nameValid": "Name valid and unused.",
   "editor.closePreview": "Close Preview ({0})\n\nDismisses the BBCode preview.",
+  "editor.moreOptions": "More formatting options",
   "editor.preview": "Preview ({0})\n\nShows a preview of the BBCode you have typed, including any formatting errors.",
   "eicon.action": "Select EIcon",
   "eicon.addToFavorites": "Add to favorites",
@@ -566,6 +569,9 @@
   "settings.autoReplyPlaceholder": "Put your custom message for automatic replies here",
   "settings.automaticReplies": "Automatic Replies",
   "settings.bbCodeBar": "Show BBCode formatting bar",
+  "settings.bbCodeBarPosition": "Formatting bar position",
+  "settings.bbCodeBarPosition.top": "Top",
+  "settings.bbCodeBarPosition.bottom": "Bottom",
   "settings.behavior.chat": "Chat",
   "settings.behavior.window": "Window",
   "settings.beta": "Opt-in to test unstable prerelease updates",

electron/browser_windows.ts

@@ -240,6 +240,8 @@ export function createMainWindow(
     ...lastState,
     center: lastState.x === undefined,
     show: false,
+    minWidth: 600,
+    minHeight: 400,
     icon: process.platform === 'win32' ? winIcon : pngIcon,
     backgroundColor: !settings.allowWindowTransparency
       ? windowBackgroundColor

scss/_bbcode_editor.scss

@@ -1,13 +1,78 @@
 .bbcode-editor-text-area {
   textarea {
-    min-height: 150px;
+    min-height: 80px;
     &:focus {
-      box-shadow: 0 0 0 ($input-btn-focus-width / 2) $input-btn-focus-color;
+      box-shadow: none;
     }
     resize: none;
   }
 }
 
+.bbcode-editor.bbcode-editor-mattermost {
+  .bbcode-editor-text-area {
+    textarea {
+      min-height: 80px;
+      max-height: 250px;
+
+      &:focus {
+        box-shadow: none;
+        outline: none;
+      }
+    }
+  }
+
+  .bbcode-toolbar-internal {
+    .color-typing-hint .chip.red {
+      background: var(--textRedColor);
+      color: color-contrast($red-color);
+    }
+    .color-typing-hint .chip.orange {
+      background: var(--textOrangeColor);
+      color: color-contrast($orange-color);
+    }
+    .color-typing-hint .chip.yellow {
+      background: var(--textYellowColor);
+      color: color-contrast($yellow-color);
+    }
+    .color-typing-hint .chip.green {
+      background: var(--textGreenColor);
+      color: color-contrast($green-color);
+    }
+    .color-typing-hint .chip.cyan {
+      background: var(--textCyanColor);
+      color: color-contrast($cyan-color);
+    }
+    .color-typing-hint .chip.purple {
+      background: var(--textPurpleColor);
+      color: color-contrast($purple-color);
+    }
+    .color-typing-hint .chip.blue {
+      background: var(--textBlueColor);
+      color: color-contrast($blue-color);
+    }
+    .color-typing-hint .chip.pink {
+      background: var(--textPinkColor);
+      color: color-contrast($pink-color);
+    }
+    .color-typing-hint .chip.black {
+      background: var(--textBlackColor);
+      color: color-contrast($black-color);
+    }
+    .color-typing-hint .chip.brown {
+      background: var(--textBrownColor);
+      color: color-contrast($brown-color);
+    }
+    .color-typing-hint .chip.white {
+      background: var(--textWhiteColor);
+      color: color-contrast($white);
+    }
+    .color-typing-hint .chip.gray {
+      background: var(--textGrayColor);
+      color: color-contrast($gray-color);
+    }
+  }
+}
+
 .bbcode-toolbar {
   align-items: flex-start;
   flex-wrap: nowrap;