From 525568d3683b9b18dc32eda7688e709a198ded60 Mon Sep 17 00:00:00 2001 From: Andy Burke Date: Fri, 5 Sep 2025 11:03:53 -0700 Subject: [PATCH] refactor: talk => chat --- README.md | 1 + public/base.css | 38 + public/index.html | 1 + public/tabs/{talk/talk.css => chat/chat.css} | 122 +- .../tabs/{talk/talk.html => chat/chat.html} | 18 +- public/tabs/{talk/talk.js => chat/chat.js} | 18 +- public/tabs/chat/emojis/en.js | 1555 +++++++++++++++++ public/tabs/tabs.html | 5 +- 8 files changed, 1675 insertions(+), 83 deletions(-) rename public/tabs/{talk/talk.css => chat/chat.css} (64%) rename public/tabs/{talk/talk.html => chat/chat.html} (94%) rename public/tabs/{talk/talk.js => chat/chat.js} (96%) create mode 100644 public/tabs/chat/emojis/en.js diff --git a/README.md b/README.md index 8aee40c..5e5ab4e 100644 --- a/README.md +++ b/README.md @@ -35,6 +35,7 @@ feature discussions. - [X] sidebar on mobile needs to show/hide via a button - [ ] clean up after initial implementation - [X] split the monolithic talk.html up + - [X] rename talk => chat - [ ] chat message processing - [X] auto-link urls - [X] use this regex: `(?:(?[a-zA-Z]+):)?(?:\/\/)?(?:(?(?\S.+)\:(?.+))\@)?(?(?:(?[-a-zA-Z0-9\.]+)\.)?(?(?:[-a-zA-Z0-9]+?\.(?[-a-zA-Z0-9]{2,64}))|localhost)(?:\:(?[0-9]{1,6}))?)\b(?[-a-zA-Z0-9@:%_{}\[\]<>\(\)\+.~&\/="]*?(?\.[^\.?/#"\n<>]+)?)(?:\?(?[a-zA-Z0-9!$%&<>()*+,-\.\/\:\;\=\?\@_~"]+))?(?:#(?[a-zA-Z0-9!$&'()*+,-\.\/\:\;\=\?\@_~"]*?))?(?:$|\s)` diff --git a/public/base.css b/public/base.css index f1a1117..6565038 100644 --- a/public/base.css +++ b/public/base.css @@ -510,6 +510,44 @@ body[data-perms*="rooms.create"] [data-requires-permission="rooms.create"] { top: 2px; } +/* ICON - CHAT */ +.icon.chat { + box-sizing: border-box; + position: relative; + display: block; + transform: scale(var(--icon-scale, 1)); + width: 20px; + height: 16px; + border: 2px solid; + border-bottom: 0; + box-shadow: + -6px 8px 0 -6px, + 6px 8px 0 -6px; +} +.icon.chat::after, +.icon.chat::before { + content: ""; + display: block; + box-sizing: border-box; + position: absolute; + width: 8px; +} +.icon.chat::before { + border: 2px solid; + border-top-color: transparent; + border-bottom-left-radius: 20px; + right: 4px; + bottom: -6px; + height: 6px; +} +.icon.chat::after { + height: 2px; + background: currentColor; + box-shadow: 0 4px 0 0; + left: 4px; + top: 4px; +} + /* ICON - DOWNLOAD */ .icon.download { box-sizing: border-box; diff --git a/public/index.html b/public/index.html index 0fa8238..e15c789 100644 --- a/public/index.html +++ b/public/index.html @@ -14,6 +14,7 @@ + diff --git a/public/tabs/talk/talk.css b/public/tabs/chat/chat.css similarity index 64% rename from public/tabs/talk/talk.css rename to public/tabs/chat/chat.css index ecd6d1e..abfd7a4 100644 --- a/public/tabs/talk/talk.css +++ b/public/tabs/chat/chat.css @@ -1,4 +1,4 @@ -#talk .tab-content { +#chat .tab-content { display: grid; grid-template-columns: auto 1fr; } @@ -34,7 +34,7 @@ color: var(--accent); } -#talk .sidebar { +#chat .sidebar { position: relative; width: min-content; min-width: 10rem; @@ -43,24 +43,24 @@ padding: 0.5rem; } -#talk .sidebar #sidebar-toggle, -#talk .sidebar #sidebar-toggle-icon { +#chat .sidebar #sidebar-toggle, +#chat .sidebar #sidebar-toggle-icon { opacity: 0; display: none; } -#talk .sidebar .title { +#chat .sidebar .title { text-transform: uppercase; font-size: small; font-weight: bold; line-height: 2rem; } -#talk #room-chat-container { +#chat #room-chat-container { position: relative; } -#talk #room-chat-content { +#chat #room-chat-content { overflow-y: scroll; position: absolute; top: 0; @@ -70,7 +70,7 @@ padding: 0.5rem; } -#talk #room-chat-entry-container { +#chat #room-chat-entry-container { position: absolute; bottom: 0; left: 0; @@ -79,7 +79,7 @@ padding: 1rem; } -#talk #room-chat-entry-container form { +#chat #room-chat-entry-container form { position: absolute; top: 0; left: 0; @@ -90,13 +90,13 @@ padding: 0.75rem; } -#talk #room-chat-entry-container form input[type="file"] { +#chat #room-chat-entry-container form input[type="file"] { opacity: 0; display: none; } -#talk #room-chat-entry-container form button, -#talk #room-chat-entry-container form label { +#chat #room-chat-entry-container form button, +#chat #room-chat-entry-container form label { position: relative; top: inherit; font-size: inherit; @@ -110,7 +110,7 @@ border: 1px solid var(--text); } -#talk #room-chat-entry-container form textarea { +#chat #room-chat-entry-container form textarea { width: 100%; flex-grow: 1; background: inherit; @@ -118,7 +118,7 @@ border-radius: var(--border-radius); } -#talk .message-container { +#chat .message-container { position: relative; transition: all 0.33s; background: rgba(255, 255, 255, 0.03); @@ -127,27 +127,27 @@ border-radius: var(--border-radius); } -#talk .message-container.user-tick.time-tick + .message-container.user-tick.time-tick, -#talk .message-container.user-tick.time-tock + .message-container.user-tick.time-tock, -#talk .message-container.user-tock.time-tick + .message-container.user-tock.time-tick, -#talk .message-container.user-tock.time-tock + .message-container.user-tock.time-tock { +#chat .message-container.user-tick.time-tick + .message-container.user-tick.time-tick, +#chat .message-container.user-tick.time-tock + .message-container.user-tick.time-tock, +#chat .message-container.user-tock.time-tick + .message-container.user-tock.time-tick, +#chat .message-container.user-tock.time-tock + .message-container.user-tock.time-tock { margin-top: 0; padding: 0 2px; } -#talk +#chat .message-container.user-tick.time-tick + .message-container.user-tick.time-tick .info-container, -#talk +#chat .message-container.user-tick.time-tock + .message-container.user-tick.time-tock .info-container, -#talk +#chat .message-container.user-tock.time-tick + .message-container.user-tock.time-tick .info-container, -#talk +#chat .message-container.user-tock.time-tock + .message-container.user-tock.time-tock .info-container { @@ -157,11 +157,11 @@ margin: 0; } -#talk .message-container.sending { +#chat .message-container.sending { opacity: 0.75; } -#talk .message-container .message-actions-container { +#chat .message-container .message-actions-container { position: absolute; top: 0.5rem; right: 0.5rem; @@ -169,7 +169,7 @@ flex-direction: row; } -#talk .message-container .message-actions-container .message-action { +#chat .message-container .message-actions-container .message-action { opacity: 0; transition: 0.2s ease-in-out; width: 0; @@ -182,16 +182,16 @@ text-align: center; } -#talk .message-container .message-actions-container label { +#chat .message-container .message-actions-container label { cursor: pointer; } -#talk .message-container .message-actions-container input[type="checkbox"] { +#chat .message-container .message-actions-container input[type="checkbox"] { opacity: 0; display: none; } -#talk +#chat .message-container .message-actions-container input[type="checkbox"]:checked @@ -200,17 +200,17 @@ width: 4rem; } -#talk .message-container .message-actions-container .message-action .action-name { +#chat .message-container .message-actions-container .message-action .action-name { font-size: x-small; } -#talk .message-container .info-container { +#chat .message-container .info-container { display: flex; margin-bottom: -1.75rem; height: 3.75rem; } -#talk .message-container .info-container .avatar-container { +#chat .message-container .info-container .avatar-container { display: inline-block; margin: 0 4px; width: 3rem; @@ -219,41 +219,41 @@ overflow: hidden; } -#talk .message-container .info-container .avatar-container img { +#chat .message-container .info-container .avatar-container img { width: 100%; } -#talk .message-container .info-container .username-container { +#chat .message-container .info-container .username-container { margin: 0 4px; font-weight: bold; } -#talk .message-container .info-container .datetime-container { +#chat .message-container .info-container .datetime-container { margin: 0 4px; } -#talk .message-container .info-container .datetime-container .long { +#chat .message-container .info-container .datetime-container .long { font-size: x-small; text-transform: uppercase; } -#talk .message-container .info-container .datetime-container .short { +#chat .message-container .info-container .datetime-container .short { font-size: xx-small; visibility: hidden; display: none; } -#talk .message-container .message-content-container { +#chat .message-container .message-content-container { padding-left: 8rem; } -#talk .embed-container { +#chat .embed-container { position: relative; width: 100%; max-width: 640px; } -#talk .embed-container .embed-actions-container { +#chat .embed-container .embed-actions-container { position: absolute; z-index: 100; top: 0.25rem; @@ -265,31 +265,31 @@ opacity: 0; } -#talk .embed-container audio { +#chat .embed-container audio { width: 100%; } -#talk .embed-container.rounded { +#chat .embed-container.rounded { border-radius: 6px; } -#talk .embed-container.short { +#chat .embed-container.short { height: 120px; overflow: hidden; overflow-y: auto; } -#talk .embed-container.tidal { +#chat .embed-container.tidal { border-radius: 12px; } -#talk .embed-container.vertical { +#chat .embed-container.vertical { max-width: 320px; overflow: hidden; aspect-ratio: 9 / 16 !important; } -#talk .embed-container.letterbox { +#chat .embed-container.letterbox { /* height: 0; */ overflow: hidden; overflow-y: auto; @@ -297,14 +297,14 @@ aspect-ratio: 16 / 9 !important; } -#talk .embed-container.square { +#chat .embed-container.square { overflow: hidden; overflow-y: auto; aspect-ratio: 1 / 1 !important; } -#talk .embed-container iframe, -#talk .embed-container video { +#chat .embed-container iframe, +#chat .embed-container video { position: absolute; top: 0; left: 0; @@ -317,7 +317,7 @@ } @media screen and (max-width: 768px) { - #talk .sidebar { + #chat .sidebar { z-index: 100; background: var(--bg); position: absolute; @@ -330,7 +330,7 @@ transition: all ease-in-out 0.33s; } - #talk .sidebar #sidebar-toggle-icon { + #chat .sidebar #sidebar-toggle-icon { opacity: 1; display: block; position: absolute; @@ -343,20 +343,20 @@ padding: 0.5rem; } - #talk .sidebar .icon { + #chat .sidebar .icon { transition: all ease-in-out 0.33s; } - #talk .sidebar:has(#sidebar-toggle:checked) { + #chat .sidebar:has(#sidebar-toggle:checked) { left: 0; } - #talk .sidebar:has(#sidebar-toggle:checked) #sidebar-toggle-icon { + #chat .sidebar:has(#sidebar-toggle:checked) #sidebar-toggle-icon { right: 0; rotate: 180deg; } - #talk #room-chat-container { + #chat #room-chat-container { position: absolute; top: 0; left: 0; @@ -364,26 +364,26 @@ bottom: 0; } - #talk #room-chat-container #room-chat-entry-container, - #talk #room-chat-container #room-chat-entry-container form { + #chat #room-chat-container #room-chat-entry-container, + #chat #room-chat-container #room-chat-entry-container form { padding: 0.25rem; } - #talk #room-chat-container #room-chat-entry-container form button, - #talk #room-chat-container #room-chat-entry-container form label { + #chat #room-chat-container #room-chat-entry-container form button, + #chat #room-chat-container #room-chat-entry-container form label { margin: 0 0.5rem; } - #talk .message-container .message-content-container { + #chat .message-container .message-content-container { padding-left: 4rem; } - #talk .message-container .info-container .datetime-container .long { + #chat .message-container .info-container .datetime-container .long { display: none; visibility: hidden; } - #talk .message-container .info-container .datetime-container .short { + #chat .message-container .info-container .datetime-container .short { display: inline-block; visibility: visible; } diff --git a/public/tabs/talk/talk.html b/public/tabs/chat/chat.html similarity index 94% rename from public/tabs/talk/talk.html rename to public/tabs/chat/chat.html index d71f915..62c73d1 100644 --- a/public/tabs/talk/talk.html +++ b/public/tabs/chat/chat.html @@ -1,22 +1,22 @@ -
+
-