1import Theme from "../themes/common/theme";
  2import { panel } from "./app";
  3import {
  4  backgroundColor,
  5  border,
  6  player,
  7  text,
  8  TextColor,
  9  popoverShadow,
 10} from "./components";
 11
 12export default function chatPanel(theme: Theme) {
 13  function channelSelectItem(
 14    theme: Theme,
 15    textColor: TextColor,
 16    hovered: boolean
 17  ) {
 18    return {
 19      name: text(theme, "sans", textColor),
 20      padding: 4,
 21      hash: {
 22        ...text(theme, "sans", "muted"),
 23        margin: {
 24          right: 8,
 25        },
 26      },
 27      background: hovered ? backgroundColor(theme, 300, "hovered") : undefined,
 28      cornerRadius: hovered ? 6 : 0,
 29    };
 30  }
 31
 32  const message = {
 33    body: text(theme, "sans", "secondary"),
 34    timestamp: text(theme, "sans", "muted", { size: "sm" }),
 35    padding: {
 36      bottom: 6,
 37    },
 38    sender: {
 39      ...text(theme, "sans", "primary", { weight: "bold" }),
 40      margin: {
 41        right: 8,
 42      },
 43    },
 44  };
 45
 46  return {
 47    ...panel,
 48    channelName: text(theme, "sans", "primary", { weight: "bold" }),
 49    channelNameHash: {
 50      ...text(theme, "sans", "muted"),
 51      padding: {
 52        right: 8,
 53      },
 54    },
 55    channelSelect: {
 56      header: {
 57        ...channelSelectItem(theme, "primary", false),
 58        padding: {
 59          bottom: 4,
 60          left: 0,
 61        },
 62      },
 63      item: channelSelectItem(theme, "secondary", false),
 64      hoveredItem: channelSelectItem(theme, "secondary", true),
 65      activeItem: channelSelectItem(theme, "primary", false),
 66      hoveredActiveItem: channelSelectItem(theme, "primary", true),
 67      menu: {
 68        background: backgroundColor(theme, 500),
 69        cornerRadius: 6,
 70        padding: 4,
 71        border: border(theme, "primary"),
 72        shadow: popoverShadow(theme),
 73      },
 74    },
 75    signInPrompt: text(theme, "sans", "secondary", { underline: true }),
 76    hoveredSignInPrompt: text(theme, "sans", "primary", { underline: true }),
 77    message,
 78    pendingMessage: {
 79      ...message,
 80      body: {
 81        ...message.body,
 82        color: theme.textColor.muted,
 83      },
 84      sender: {
 85        ...message.sender,
 86        color: theme.textColor.muted,
 87      },
 88      timestamp: {
 89        ...message.timestamp,
 90        color: theme.textColor.muted,
 91      },
 92    },
 93    inputEditor: {
 94      background: backgroundColor(theme, 500),
 95      cornerRadius: 6,
 96      text: text(theme, "mono", "primary"),
 97      placeholderText: text(theme, "mono", "placeholder", { size: "sm" }),
 98      selection: player(theme, 1).selection,
 99      border: border(theme, "secondary"),
100      padding: {
101        bottom: 7,
102        left: 8,
103        right: 8,
104        top: 7,
105      },
106    },
107  };
108}