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(interactive({
 33        base: {
 34            ...baseEntry,
 35            text: text(layer, "mono", "variant", { size: "sm" }),
 36            status,
 37        }, state:
 38        {
 39            hovered: {
 40                background: background(layer, "variant", "hovered"),
 41            }
 42        }
 43    }),
 44        {
 45            default: {
 46                /*background: colorScheme.isLight
 47                  ? withOpacity(background(layer, "active"), 0.5)
 48                  : background(layer, "active") ,*/ // todo posiewic
 49                text: text(layer, "mono", "active", { size: "sm" }),
 50            },
 51            hovered: {
 52                //background: background(layer, "active"),
 53                text: text(layer, "mono", "active", { size: "sm" }),
 54            },
 55
 56        });
 57
 58    return {
 59        openProjectButton: interactive({
 60            base: {
 61                background: background(layer),
 62                border: border(layer, "active"),
 63                cornerRadius: 4,
 64                margin: {
 65                    top: 16,
 66                    left: 16,
 67                    right: 16,
 68                },
 69                padding: {
 70                    top: 3,
 71                    bottom: 3,
 72                    left: 7,
 73                    right: 7,
 74                },
 75                ...text(layer, "sans", "default", { size: "sm" })
 76            }, state: {
 77                hovered: {
 78                    ...text(layer, "sans", "default", { size: "sm" }),
 79                    background: background(layer, "hovered"),
 80                    border: border(layer, "active"),
 81                },
 82            }
 83        }),
 84        background: background(layer),
 85        padding: { left: 6, right: 6, top: 0, bottom: 6 },
 86        indentWidth: 12,
 87        entry,
 88        draggedEntry: {
 89            ...baseEntry,
 90            text: text(layer, "mono", "on", { size: "sm" }),
 91            background: withOpacity(background(layer, "on"), 0.9),
 92            border: border(layer),
 93            status,
 94        },
 95        ignoredEntry: {
 96            ...entry,
 97            iconColor: foreground(layer, "disabled"),
 98            text: text(layer, "mono", "disabled"),
 99            active: {
100                ...entry.active,
101                iconColor: foreground(layer, "variant"),
102            },
103        },
104        cutEntry: {
105            ...entry,
106            text: text(layer, "mono", "disabled"),
107            active: {
108                ...entry.active,
109                default: {
110                    ...entry.active.default,
111                    background: background(layer, "active"),
112                    text: text(layer, "mono", "disabled", { size: "sm" }),
113                },
114
115            },
116        },
117        filenameEditor: {
118            background: background(layer, "on"),
119            text: text(layer, "mono", "on", { size: "sm" }),
120            selection: colorScheme.players[0],
121        },
122    }
123}