1import { ColorScheme } from "../themes/common/colorScheme"
  2import { withOpacity } from "../utils/color"
  3import { background, border, foreground, text } from "./components"
  4
  5export default function projectPanel(colorScheme: ColorScheme) {
  6    const { isLight } = colorScheme
  7    let layer = colorScheme.middle
  8
  9    let baseEntry = {
 10        height: 24,
 11        iconColor: foreground(layer, "variant"),
 12        iconSize: 8,
 13        iconSpacing: 8,
 14    }
 15
 16    let status = {
 17        git: {
 18            modified: isLight
 19                ? colorScheme.ramps.yellow(0.6).hex()
 20                : colorScheme.ramps.yellow(0.5).hex(),
 21            inserted: isLight
 22                ? colorScheme.ramps.green(0.45).hex()
 23                : colorScheme.ramps.green(0.5).hex(),
 24            conflict: isLight
 25                ? colorScheme.ramps.red(0.6).hex()
 26                : colorScheme.ramps.red(0.5).hex()
 27        }
 28    }
 29
 30    let entry = {
 31        ...baseEntry,
 32        text: text(layer, "mono", "variant", { size: "sm" }),
 33        hover: {
 34            background: background(layer, "variant", "hovered"),
 35        },
 36        active: {
 37            background: colorScheme.isLight
 38                ? withOpacity(background(layer, "active"), 0.5)
 39                : background(layer, "active"),
 40            text: text(layer, "mono", "active", { size: "sm" }),
 41        },
 42        activeHover: {
 43            background: background(layer, "active"),
 44            text: text(layer, "mono", "active", { size: "sm" }),
 45        },
 46        status
 47    }
 48
 49    return {
 50        openProjectButton: {
 51            background: background(layer),
 52            border: border(layer, "active"),
 53            cornerRadius: 4,
 54            margin: {
 55                top: 16,
 56                left: 16,
 57                right: 16,
 58            },
 59            padding: {
 60                top: 3,
 61                bottom: 3,
 62                left: 7,
 63                right: 7,
 64            },
 65            ...text(layer, "sans", "default", { size: "sm" }),
 66            hover: {
 67                ...text(layer, "sans", "default", { size: "sm" }),
 68                background: background(layer, "hovered"),
 69                border: border(layer, "active"),
 70            },
 71        },
 72        background: background(layer),
 73        padding: { left: 12, right: 12, top: 6, bottom: 6 },
 74        indentWidth: 8,
 75        entry,
 76        draggedEntry: {
 77            ...baseEntry,
 78            status,
 79            text: text(layer, "mono", "on", { size: "sm" }),
 80            background: withOpacity(background(layer, "on"), 0.9),
 81            border: border(layer),
 82        },
 83        ignoredEntry: {
 84            ...entry,
 85            text: text(layer, "mono", "disabled"),
 86        },
 87        cutEntry: {
 88            ...entry,
 89            text: text(layer, "mono", "disabled"),
 90            active: {
 91                background: background(layer, "active"),
 92                text: text(layer, "mono", "disabled", { size: "sm" }),
 93            },
 94        },
 95        filenameEditor: {
 96            background: background(layer, "on"),
 97            text: text(layer, "mono", "on", { size: "sm" }),
 98            selection: colorScheme.players[0],
 99        }
100    }
101}