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