ChatView.svelte raw

   1  <script>
   2      import { activeChatTab } from './chatStores.js';
   3      import InboxView from './InboxView.svelte';
   4      import ChannelsView from './ChannelsView.svelte';
   5  
   6      export let isLoggedIn = false;
   7      export let userPubkey = "";
   8      export let userSigner = null;
   9  </script>
  10  
  11  <div class="chat-view">
  12      <div class="chat-tabs">
  13          <button
  14              class="chat-tab"
  15              class:active={$activeChatTab === "inbox"}
  16              on:click={() => activeChatTab.set("inbox")}
  17          >
  18              Inbox
  19          </button>
  20          <button
  21              class="chat-tab"
  22              class:active={$activeChatTab === "channels"}
  23              on:click={() => activeChatTab.set("channels")}
  24          >
  25              Channels
  26          </button>
  27      </div>
  28  
  29      <div class="chat-content">
  30          {#if $activeChatTab === "inbox"}
  31              <InboxView {isLoggedIn} {userPubkey} {userSigner} />
  32          {:else}
  33              <ChannelsView {isLoggedIn} {userPubkey} {userSigner} />
  34          {/if}
  35      </div>
  36  </div>
  37  
  38  <style>
  39      .chat-view {
  40          width: 100%;
  41          height: 100%;
  42          display: flex;
  43          flex-direction: column;
  44      }
  45  
  46      .chat-tabs {
  47          display: flex;
  48          border-bottom: 1px solid var(--border-color);
  49          background: var(--bg-color);
  50          position: sticky;
  51          top: 0;
  52          z-index: 1;
  53      }
  54  
  55      .chat-tab {
  56          flex: 1;
  57          padding: 0.7em 1em;
  58          background: none;
  59          border: none;
  60          border-bottom: 2px solid transparent;
  61          color: var(--text-muted);
  62          font-size: 0.85rem;
  63          font-weight: 500;
  64          cursor: pointer;
  65          transition: color 0.15s, border-color 0.15s;
  66      }
  67  
  68      .chat-tab:hover {
  69          color: var(--text-color);
  70      }
  71  
  72      .chat-tab.active {
  73          color: var(--primary);
  74          border-bottom-color: var(--primary);
  75      }
  76  
  77      .chat-content {
  78          flex: 1;
  79          overflow: hidden;
  80          display: flex;
  81      }
  82  </style>
  83