1import {
  2    background,
  3    border,
  4    text,
  5} from "./components"
  6import { icon_button } from "../component/icon_button"
  7import { useTheme } from "../theme"
  8
  9export default function chat_panel(): any {
 10    const theme = useTheme()
 11    const layer = theme.middle
 12
 13    const SPACING = 12 as const
 14
 15    const channel_name = {
 16        padding: {
 17            left: SPACING,
 18            right: SPACING,
 19            top: 4,
 20            bottom: 4,
 21        },
 22        hash: {
 23            ...text(layer, "sans", "base"),
 24        },
 25        name: text(layer, "sans", "base"),
 26    }
 27
 28    return {
 29        background: background(layer),
 30        list: {
 31            margin: {
 32                left: SPACING,
 33                right: SPACING,
 34            }
 35        },
 36        channel_select: {
 37            header: {
 38                ...channel_name,
 39                border: border(layer, { bottom: true })
 40            },
 41            item: channel_name,
 42            active_item: {
 43                ...channel_name,
 44                background: background(layer, "on", "active"),
 45            },
 46            hovered_item: {
 47                ...channel_name,
 48                background: background(layer, "on", "hovered"),
 49            },
 50            menu: {
 51                background: background(layer, "on"),
 52                border: border(layer, { bottom: true })
 53            }
 54        },
 55        icon_button: icon_button({
 56            variant: "ghost",
 57            color: "variant",
 58            size: "sm",
 59        }),
 60        input_editor: {
 61            background: background(layer, "on"),
 62            corner_radius: 6,
 63            text: text(layer, "sans", "base"),
 64            placeholder_text: text(layer, "sans", "base", "disabled", {
 65                size: "xs",
 66            }),
 67            selection: theme.players[0],
 68            border: border(layer, "on"),
 69            margin: {
 70                left: SPACING,
 71                right: SPACING,
 72                bottom: SPACING,
 73            },
 74            padding: {
 75                bottom: 4,
 76                left: 8,
 77                right: 8,
 78                top: 4,
 79            },
 80        },
 81        message: {
 82            body: text(layer, "sans", "base"),
 83            sender: {
 84                margin: {
 85                    right: 8,
 86                },
 87                ...text(layer, "sans", "base", { weight: "bold" }),
 88            },
 89            timestamp: text(layer, "sans", "base", "disabled"),
 90            margin: { bottom: SPACING }
 91        },
 92        pending_message: {
 93            body: text(layer, "sans", "base"),
 94            sender: {
 95                margin: {
 96                    right: 8,
 97                },
 98                ...text(layer, "sans", "base", "disabled"),
 99            },
100            timestamp: text(layer, "sans", "base"),
101        },
102        sign_in_prompt: {
103            default: text(layer, "sans", "base"),
104        }
105    }
106}