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