1import Theme from "../themes/theme";
  2import { panel } from "./app";
  3import {
  4    backgroundColor,
  5    border,
  6    player,
  7    shadow,
  8    text,
  9    TextColor
 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: shadow(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.value,
 83            },
 84            sender: {
 85                ...message.sender,
 86                color: theme.textColor.muted.value,
 87            },
 88            timestamp: {
 89                ...message.timestamp,
 90                color: theme.textColor.muted.value,
 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}