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