@devchitchat/chat 0.0.0

package/pages/public/client/action-sheet.js

@@ -0,0 +1,77 @@
+/**
+ * action-sheet.js — singleton bottom sheet for mobile + iPad.
+ *
+ * Only one sheet can be open at a time. Dismisses on backdrop tap or swipe-down.
+ */
+
+let backdropEl = null
+let sheetEl    = null
+
+function ensureDOM() {
+  if (backdropEl) return
+
+  backdropEl = document.createElement('div')
+  backdropEl.className = 'action-sheet-backdrop'
+  backdropEl.innerHTML = `
+    <div class="action-sheet" role="dialog" aria-modal="true">
+      <div class="action-sheet-handle"></div>
+      <div class="action-sheet-label"></div>
+      <div class="action-sheet-items"></div>
+    </div>
+  `
+  document.body.appendChild(backdropEl)
+  sheetEl = backdropEl.querySelector('.action-sheet')
+
+  // Tap backdrop (outside sheet) to dismiss
+  backdropEl.addEventListener('click', e => {
+    if (e.target === backdropEl) dismiss()
+  })
+
+  // Swipe down to dismiss
+  let startY = 0
+  sheetEl.addEventListener('touchstart', e => {
+    startY = e.touches[0].clientY
+  }, { passive: true })
+  sheetEl.addEventListener('touchend', e => {
+    if (e.changedTouches[0].clientY - startY > 60) dismiss()
+  }, { passive: true })
+}
+
+/**
+ * @param {{ label?: string, items: Array<{ label: string, action?: () => void, danger?: boolean, disabled?: boolean }> }} opts
+ */
+export function showActionSheet({ label, items }) {
+  ensureDOM()
+
+  backdropEl.querySelector('.action-sheet-label').textContent = label ?? ''
+  const container = backdropEl.querySelector('.action-sheet-items')
+  container.innerHTML = ''
+
+  for (const item of items) {
+    const btn = document.createElement('button')
+    btn.className = 'action-sheet-item' + (item.danger ? ' danger' : '')
+    btn.textContent = item.label
+    btn.disabled = !!item.disabled
+    btn.addEventListener('click', () => {
+      dismiss()
+      item.action?.()
+    })
+    container.appendChild(btn)
+  }
+
+  requestAnimationFrame(() => {
+    backdropEl.classList.add('open')
+    sheetEl.classList.add('open')
+  })
+}
+
+export function dismiss() {
+  backdropEl?.classList.remove('open')
+  sheetEl?.classList.remove('open')
+}
+
+/** Returns the .action-sheet-items container, for callers that build forms inline. */
+export function getItemsContainer() {
+  ensureDOM()
+  return backdropEl.querySelector('.action-sheet-items')
+}

package/pages/public/client/app.js

@@ -0,0 +1,38 @@
+/**
+ * app.js — boots rdbljs islands and page-level setup.
+ *
+ * Loaded as <script type="module" src="{{base}}/client/app.js"> from _layout.html.
+ * init(window) from rdbljs discovers all [island] elements, imports each
+ * module, calls the default export factory with (root, window), and wires
+ * up bind(root, scope) so all directives (model=, onclick=, each=, etc.) work.
+ */
+import { init } from '@devchitchat/rdbljs'
+import { getSettings, syncFromServer, patchSettings } from './settings-sync.js'
+import { initSwipeNav } from './swipe-nav.js'
+import { initRouter } from './router.js'
+
+const BASE_PATH = window.__BASE_PATH__ ?? ''
+
+// On a channel page the intent is always to view the channel — persist the
+// current channel and ensure mobile shows the chat panel, not the hub panel.
+if (location.pathname.startsWith(`${BASE_PATH}/channels/`)) {
+  const channelId = location.pathname.split('/').pop()
+  if (channelId) patchSettings({ last_channel_id: channelId, mobile_chat_open: true })
+}
+
+// Apply settings before islands mount (prevent layout flash)
+const settings = getSettings()
+if (window.matchMedia('(max-width: 1024px)').matches && settings.mobile_chat_open === false) {
+  document.body.classList.add('sidebar-open')
+}
+
+await init(window)
+
+initRouter()
+initSwipeNav()
+
+// Reconcile with server in background after islands mount
+syncFromServer().then(remoteSettings => {
+  if (!remoteSettings || !window.matchMedia('(max-width: 1024px)').matches) return
+  document.body.classList.toggle('sidebar-open', remoteSettings.mobile_chat_open === false)
+})

package/pages/public/client/auth-tabs.js

@@ -0,0 +1,13 @@
+/**
+ * auth-tabs.js — tab switching on the login page (no framework needed).
+ */
+const tabs = document.querySelectorAll('[role="tab"]')
+const panels = document.querySelectorAll('[role="tabpanel"]')
+
+tabs.forEach(tab => {
+  tab.addEventListener('click', () => {
+    const target = tab.dataset.tab
+    tabs.forEach(t => t.setAttribute('aria-selected', t.dataset.tab === target ? 'true' : 'false'))
+    panels.forEach(p => { p.hidden = p.id !== `panel-${target}` })
+  })
+})

package/pages/public/client/emoji-data.js

@@ -0,0 +1,197 @@
+/**
+ * emoji-data.js — static emoji dataset (~500 emoji across 9 categories).
+ * "Recent" category starts empty and is populated from localStorage at runtime.
+ */
+
+export const CATEGORIES = [
+  {
+    id: 'recent',
+    label: '🕐',
+    emoji: [], // populated from localStorage at runtime
+  },
+  {
+    id: 'smileys',
+    label: '😀',
+    emoji: [
+      '😀','😃','😄','😁','😆','😅','😂','🤣','☺️','😊','😇','🙂','🙃','😉','😌',
+      '😍','🥰','😘','😗','😙','😚','😋','😛','😝','😜','🤪','🤨','🧐','🤓','😎',
+      '🤩','🥳','😏','😒','😞','😔','😟','😕','🙁','☹️','😣','😖','😫','😩','🥺',
+      '😢','😭','😤','😠','😡','🤬','😈','👿','💀','☠️','💩','🤡','👹','👺','👻',
+      '👽','👾','🤖','😺','😸','😹','😻','😼','😽','🙀','😿','😾','🤗','🤔','🤭',
+      '🤫','🤥','😶','😐','😑','😬','🙄','😯','😦','😧','😮','😲','🥱','😴','🤤',
+      '😪','😵','🤐','🥴','🤢','🤮','🤧','🥵','🥶','🥴','😷','🤒','🤕','🤑','🤠',
+    ],
+  },
+  {
+    id: 'people',
+    label: '👋',
+    emoji: [
+      '👍','👎','👌','✌️','🤞','🤟','🤘','🤙','👈','👉','👆','🖕','👇','☝️','👍',
+      '✋','🤚','🖐️','🖖','👋','🤙','💪','🦾','🖕','✍️','🤝','🙌','👏','🤲','🙏',
+      '🤜','🤛','✊','👊','🤏','🤌','👐','💅','🤳','💃','🕺','👫','👬','👭','💏',
+      '💑','👪','👨‍👩‍👦','👨‍👩‍👧','👩‍👦','👩‍👧','👨‍👦','👨‍👧','👶','🧒','👦','👧','🧑','👱','👨',
+      '🧔','👩','🧓','👴','👵','🙍','🙎','🙅','🙆','💁','🙋','🧏','🙇','🤦','🤷',
+      '👮','🕵️','💂','🥷','👷','🤴','👸','👳','👲','🧕','🤵','👰','🤰','��','👼',
+      '🎅','🤶','🦸','🦹','🧙','🧚','🧛','🧜','🧝','🧞','🧟','🧌','💆','💇','🚶',
+    ],
+  },
+  {
+    id: 'animals',
+    label: '🐾',
+    emoji: [
+      '🐶','🐱','🐭','🐹','🐰','🦊','🐻','🐼','🐨','🐯','🦁','🐮','🐷','🐸','🐵',
+      '🙈','🙉','🙊','🐔','🐧','🐦','🐤','🦆','🦅','🦉','🦇','🐺','🐗','🐴','🦄',
+      '🐝','🐛','🦋','🐌','🐞','🐜','🦟','🦗','🦂','🐢','🐍','🦎','🦖','🦕','🐙',
+      '🦑','🦐','🦞','🦀','🐡','🐠','🐟','🐬','🐳','🐋','🦈','🐊','🐅','🐆','🦓',
+      '🦍','🦧','🦣','🐘','🦛','🦏','🐪','🐫','🦒','🦘','🦬','🐃','🐂','🐄','🐎',
+      '🐖','🐏','🐑','🦙','🐐','🦌','🐕','🐩','🦮','🐈','🐓','🦃','🦤','🦚','🦜',
+      '🦢','🦩','🕊️','🐇','🦝','🦨','🦡','🦫','🦦','🦥','🐁','🐀','🐿️','🦔','🐾',
+    ],
+  },
+  {
+    id: 'food',
+    label: '🍕',
+    emoji: [
+      '🍕','🍔','🌮','🌯','🥙','🧆','🥚','🍳','🥘','🍲','🥗','🥫','🧈','🍞','🥐',
+      '🥖','🥨','🧀','🥪','🌭','🥓','🍖','🍗','🥩','🍱','🍘','🍙','🍚','🍛','🍜',
+      '🍝','🍠','🍢','🍣','🍤','🍥','🥮','🍡','🥟','🥠','🥡','🦪','🍦','🍧','🍨',
+      '🍩','🍪','🎂','🍰','🧁','🥧','🍫','🍬','🍭','🍮','🍯','🍎','🍏','🍊','🍋',
+      '🍌','🍉','🍇','🍓','🫐','🍈','🍑','🍒','🍍','🥭','🥥','🥝','🍅','🫒','🧄',
+      '🧅','🥔','🌽','🌶️','🥒','🥬','🥦','🧇','🥞','🧇','🥯','🥑','🍆','🥑','🫑',
+      '☕','🍵','🧃','🥤','🍺','🍻','🥂','🍷','🥃','🍸','🍹','🧉','🍾','🧊','🍶',
+    ],
+  },
+  {
+    id: 'activity',
+    label: '⚽',
+    emoji: [
+      '⚽','🏀','🏈','⚾','🥎','🎾','🏐','🏉','🥏','🎱','🏓','🏸','🏒','🏑','🥍',
+      '🏏','🪃','🥅','⛳','🪁','🏹','🎣','🤿','🥊','🥋','🎽','🛹','🛼','🛷','⛸️',
+      '🥌','🎿','⛷️','🏂','🏋️','🤸','🤺','🤼','🤾','🏌️','🏇','🧘','🏄','🏊','🤽',
+      '🚣','🧗','🚵','🚴','🏆','🥇','🥈','🥉','🏅','🎖️','🏵️','🎗️','🎫','🎟️','🎪',
+      '🎭','🎨','🎬','🎤','🎧','🎼','🎹','🥁','🪘','🎷','🎺','🎸','🪕','🎻','🎲',
+      '♟️','🎯','🎳','🎮','🕹️','🎰','🧩','🪅','🪆','🪇','🎃','🎄','🎆','🎇','🧨',
+      '✨','🎉','🎊','🎈','🎋','🎍','🎎','🎏','🎐','🧧','🎁','🎀','🎑','🎠','🎡',
+    ],
+  },
+  {
+    id: 'travel',
+    label: '🌍',
+    emoji: [
+      '🚀','✈️','🛸','🚁','🛩️','🪂','🚂','🚃','🚄','🚅','🚆','🚇','🚈','🚉','🚊',
+      '🚝','🚞','🚋','🚌','🚍','🚎','🏎️','🚐','🚑','🚒','🚓','🚔','🚖','🚗','🚘',
+      '🚙','🛻','🚚','🚛','🚜','🏍️','🛵','🛺','🚲','🛴','🛹','🚏','🛣️','🛤️','🛳️',
+      '🚢','⛴️','🛥️','⛵','🚤','🛶','🚣','⛽','🚦','🚥','🚧','⚓','🪝','⛵','🗺️',
+      '🧭','🌍','🌎','🌏','🌐','🏔️','⛰️','🌋','🗻','🏕️','🏖️','🏜️','🏝️','🏞️','🏟️',
+      '🏛️','🏗️','🏘️','🏚️','🏠','🏡','🏢','🏣','🏤','🏥','🏦','🏨','🏩','🏪','🏫',
+      '🏬','🏭','🏯','🏰','💒','🗼','🗽','⛪','🕌','🛕','🕍','⛩️','🕋','⛲','⛺',
+    ],
+  },
+  {
+    id: 'objects',
+    label: '💡',
+    emoji: [
+      '🔥','✅','❌','⚠️','🔑','🗝️','🔐','🔏','🔒','🔓','🔨','🪓','⛏️','⚒️','🛠️',
+      '🗡️','⚔️','🔫','🪃','🏹','🛡️','🪚','🔧','🪛','🔩','⚙️','🗜️','⚖️','🦯','🔗',
+      '⛓️','🪝','🧲','🔋','🪫','🔌','💡','🔦','🕯️','🪔','🧯','🛢️','💰','💴','💵',
+      '💶','💷','💸','💳','🪙','💹','📈','📉','📊','📋','📌','📍','✂️','🗃️','🗂️',
+      '📁','📂','🗒️','🗓️','📆','📅','🗑️','📇','📔','📒','📓','📕','📗','📘','📙',
+      '📚','📖','🔖','🏷️','💬','🗨️','💭','🗯️','📢','📣','🔔','🔕','📱','☎️','📞',
+      '📟','📠','📺','📻','🎙️','📡','🔭','🔬','🧬','🧫','🧪','🌡️','🧲','💊','💉',
+    ],
+  },
+  {
+    id: 'symbols',
+    label: '🔣',
+    emoji: [
+      '❤️','🧡','💛','💚','💙','💜','🖤','🤍','🤎','💔','❤️‍🔥','❤️‍🩹','❣️','💕',
+      '💞','💓','💗','💖','💘','💝','💟','☮️','✝️','☪️','🕉️','☸️','✡️','🔯','🕎',
+      '☯️','☦️','🛐','⛎','♈','♉','♊','♋','♌','♍','♎','♏','♐','♑','♒','♓',
+      '🆔','⚛️','🉑','☢️','☣️','📴','📳','🈶','🈚','🈸','🈺','🈷️','✴️','🆚','💮',
+      '🉐','㊙️','㊗️','🈴','🈵','🈹','🈲','🅰️','🅱️','🆎','🆑','🅾️','🆘','❓','❔',
+      '❕','❗','🔅','🔆','〽️','⚜️','🔱','📛','🔰','♻️','✅','🈯','💹','❇️','✳️',
+      '❎','🌐','💯','💠','Ⓜ️','🌀','➿','🔚','🔙','🔛','🔝','🔜','⏸️','⏹️','⏺️',
+    ],
+  },
+]
+
+export const EMOJI_NAMES = {
+  '😀': 'grinning face', '😃': 'grinning face with big eyes', '😄': 'grinning face with smiling eyes',
+  '😁': 'beaming face with smiling eyes', '😆': 'grinning squinting face', '😅': 'grinning face with sweat',
+  '😂': 'face with tears of joy', '🤣': 'rolling on the floor laughing', '☺️': 'smiling face',
+  '😊': 'smiling face with smiling eyes', '😇': 'smiling face with halo', '🙂': 'slightly smiling face',
+  '🙃': 'upside-down face', '😉': 'winking face', '😌': 'relieved face', '😍': 'smiling face with heart-eyes',
+  '🥰': 'smiling face with hearts', '😘': 'face blowing a kiss', '😗': 'kissing face',
+  '😙': 'kissing face with smiling eyes', '😚': 'kissing face with closed eyes', '😋': 'face savoring food',
+  '😛': 'face with tongue', '😝': 'squinting face with tongue', '😜': 'winking face with tongue',
+  '🤪': 'zany face', '🤨': 'face with raised eyebrow', '🧐': 'face with monocle', '🤓': 'nerd face',
+  '😎': 'smiling face with sunglasses', '🤩': 'star-struck', '🥳': 'partying face', '😏': 'smirking face',
+  '😒': 'unamused face', '😞': 'disappointed face', '😔': 'pensive face', '😟': 'worried face',
+  '😕': 'confused face', '🙁': 'slightly frowning face', '☹️': 'frowning face', '😣': 'persevering face',
+  '😖': 'confounded face', '😫': 'tired face', '😩': 'weary face', '🥺': 'pleading face',
+  '😢': 'crying face', '😭': 'loudly crying face', '😤': 'face with steam from nose',
+  '😠': 'angry face', '😡': 'pouting face', '🤬': 'face with symbols on mouth', '😈': 'smiling face with horns',
+  '👿': 'angry face with horns', '💀': 'skull', '☠️': 'skull and crossbones', '💩': 'pile of poo',
+  '🤡': 'clown face', '👹': 'ogre', '👺': 'goblin', '👻': 'ghost', '👽': 'alien', '👾': 'alien monster',
+  '🤖': 'robot', '😺': 'grinning cat', '😸': 'grinning cat with smiling eyes',
+  '😹': 'cat with tears of joy', '😻': 'smiling cat with heart-eyes', '😼': 'cat with wry smile',
+  '😽': 'kissing cat', '🙀': 'weary cat', '😿': 'crying cat', '😾': 'pouting cat',
+  '🤗': 'hugging face', '🤔': 'thinking face', '🤭': 'face with hand over mouth',
+  '🤫': 'shushing face', '🤥': 'lying face', '😶': 'face without mouth', '😐': 'neutral face',
+  '😑': 'expressionless face', '😬': 'grimacing face', '🙄': 'face with rolling eyes',
+  '😯': 'hushed face', '😦': 'frowning face with open mouth', '😧': 'anguished face',
+  '😮': 'face with open mouth', '😲': 'astonished face', '🥱': 'yawning face', '😴': 'sleeping face',
+  '🤤': 'drooling face', '😪': 'sleepy face', '😵': 'dizzy face', '🤐': 'zipper-mouth face',
+  '🥴': 'woozy face', '🤢': 'nauseated face', '🤮': 'face vomiting', '🤧': 'sneezing face',
+  '🥵': 'hot face', '🥶': 'cold face', '😷': 'face with medical mask', '🤒': 'face with thermometer',
+  '🤕': 'face with head-bandage', '🤑': 'money-mouth face', '🤠': 'cowboy hat face',
+  '👍': 'thumbs up', '👎': 'thumbs down', '👌': 'ok hand', '✌️': 'victory hand',
+  '🤞': 'crossed fingers', '🤟': 'love-you gesture', '🤘': 'sign of the horns',
+  '🤙': 'call me hand', '👈': 'backhand index pointing left', '👉': 'backhand index pointing right',
+  '👆': 'backhand index pointing up', '👇': 'backhand index pointing down',
+  '☝️': 'index pointing up', '✋': 'raised hand', '🤚': 'raised back of hand',
+  '🖐️': 'hand with fingers splayed', '🖖': 'vulcan salute', '👋': 'waving hand',
+  '🤙': 'call me hand', '💪': 'flexed biceps', '🦾': 'mechanical arm', '✍️': 'writing hand',
+  '🤝': 'handshake', '🙌': 'raising hands', '👏': 'clapping hands', '🤲': 'palms up together',
+  '🙏': 'folded hands', '🤜': 'right-facing fist', '🤛': 'left-facing fist', '✊': 'oncoming fist',
+  '👊': 'oncoming fist', '💅': 'nail polish', '🤳': 'selfie', '💃': 'woman dancing',
+  '🕺': 'man dancing', '🏆': 'trophy', '🥇': 'first place medal', '🥈': 'second place medal',
+  '🥉': 'third place medal', '🏅': 'sports medal', '🎯': 'direct hit', '🎉': 'party popper',
+  '🎊': 'confetti ball', '🎈': 'balloon', '🎁': 'wrapped gift', '🚀': 'rocket',
+  '✈️': 'airplane', '🌍': 'globe showing europe-africa', '🌎': 'globe showing americas',
+  '🌏': 'globe showing asia-australia', '🏠': 'house', '🔥': 'fire', '✅': 'check mark button',
+  '❌': 'cross mark', '⚠️': 'warning', '🔑': 'key', '💡': 'light bulb', '📱': 'mobile phone',
+  '💻': 'laptop', '🖥️': 'desktop computer', '🖨️': 'printer', '⌨️': 'keyboard', '🖱️': 'computer mouse',
+  '📷': 'camera', '📸': 'camera with flash', '📹': 'video camera', '🎥': 'movie camera',
+  '📞': 'telephone receiver', '☎️': 'telephone', '📟': 'pager', '📠': 'fax machine',
+  '📺': 'television', '📻': 'radio', '🔭': 'telescope', '🔬': 'microscope',
+  '❤️': 'red heart', '🧡': 'orange heart', '💛': 'yellow heart', '💚': 'green heart',
+  '💙': 'blue heart', '💜': 'purple heart', '🖤': 'black heart', '🤍': 'white heart',
+  '🤎': 'brown heart', '💔': 'broken heart', '💯': 'hundred points', '✨': 'sparkles',
+  '⭐': 'star', '🌟': 'glowing star', '💫': 'dizzy', '🌙': 'crescent moon', '☀️': 'sun',
+  '⚡': 'high voltage', '🌈': 'rainbow', '🌊': 'water wave', '💥': 'collision', '🎶': 'musical notes',
+  '🎵': 'musical note', '🔇': 'muted speaker', '🔔': 'bell', '🔕': 'bell with slash',
+  '👀': 'eyes', '💬': 'speech balloon', '💭': 'thought balloon', '🗯️': 'anger symbol',
+  '❗': 'exclamation mark', '❓': 'question mark', '‼️': 'double exclamation mark',
+  '🆕': 'new button', '🆒': 'cool button', '🆙': 'up button', '🔛': 'on arrow',
+  '🎸': 'guitar', '🎹': 'musical keyboard', '🥁': 'drum', '🎺': 'trumpet', '🎷': 'saxophone',
+  '🏖️': 'beach with umbrella', '🏔️': 'snow-capped mountain', '🌋': 'volcano',
+  '🐶': 'dog face', '🐱': 'cat face', '🐭': 'mouse face', '🐰': 'rabbit face',
+  '🦊': 'fox', '🐻': 'bear', '🐼': 'panda', '🐨': 'koala', '🐯': 'tiger face',
+  '🦁': 'lion', '🐮': 'cow face', '🐷': 'pig face', '🐸': 'frog', '🐵': 'monkey face',
+  '🙈': 'see-no-evil monkey', '🙉': 'hear-no-evil monkey', '🙊': 'speak-no-evil monkey',
+  '🐔': 'chicken', '🐧': 'penguin', '🐦': 'bird', '🦆': 'duck', '🦅': 'eagle',
+  '🦉': 'owl', '🦇': 'bat', '🐺': 'wolf', '🐴': 'horse face', '🦄': 'unicorn',
+  '🍕': 'pizza', '🍔': 'hamburger', '🌮': 'taco', '🌯': 'burrito', '🥙': 'stuffed flatbread',
+  '🍟': 'french fries', '🌭': 'hot dog', '🍿': 'popcorn', '🧂': 'salt', '🥓': 'bacon',
+  '🍳': 'cooking', '🥚': 'egg', '🧀': 'cheese wedge', '🥞': 'pancakes', '🧇': 'waffle',
+  '🍞': 'bread', '🥐': 'croissant', '🥖': 'baguette bread', '🥨': 'pretzel',
+  '🍎': 'red apple', '🍊': 'tangerine', '🍋': 'lemon', '🍌': 'banana', '🍉': 'watermelon',
+  '🍇': 'grapes', '🍓': 'strawberry', '🍒': 'cherries', '🍑': 'peach', '🍍': 'pineapple',
+  '☕': 'hot beverage', '🍵': 'teacup without handle', '🧃': 'beverage box', '🥤': 'cup with straw',
+  '🍺': 'beer mug', '🍻': 'clinking beer mugs', '🥂': 'clinking glasses',
+  '🍷': 'wine glass', '🍸': 'cocktail glass', '🍹': 'tropical drink',
+  '⚽': 'soccer ball', '🏀': 'basketball', '🏈': 'american football', '⚾': 'baseball',
+  '🎾': 'tennis', '🏐': 'volleyball', '🏉': 'rugby football', '🎱': 'pool 8 ball',
+  '🏓': 'ping pong', '🏸': 'badminton', '🥊': 'boxing glove', '🥋': 'martial arts uniform',
+}