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        interactive({
 33            base: {
 34                ...baseEntry,
 35                text: text(layer, "mono", "variant", { size: "sm" }),
 36                status,
 37            },
 38            state: {
 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            },
 77            state: {
 78                hovered: {
 79                    ...text(layer, "sans", "default", { size: "sm" }),
 80                    background: background(layer, "hovered"),
 81                    border: border(layer, "active"),
 82                },
 83            },
 84        }),
 85        background: background(layer),
 86        padding: { left: 6, right: 6, top: 0, bottom: 6 },
 87        indentWidth: 12,
 88        entry,
 89        draggedEntry: {
 90            ...baseEntry,
 91            text: text(layer, "mono", "on", { size: "sm" }),
 92            background: withOpacity(background(layer, "on"), 0.9),
 93            border: border(layer),
 94            status,
 95        },
 96        ignoredEntry: {
 97            ...entry,
 98            iconColor: foreground(layer, "disabled"),
 99            text: text(layer, "mono", "disabled"),
100            active: {
101                ...entry.active,
102                iconColor: foreground(layer, "variant"),
103            },
104        },
105        cutEntry: {
106            ...entry,
107            text: text(layer, "mono", "disabled"),
108            active: {
109                ...entry.active,
110                default: {
111                    ...entry.active.default,
112                    background: background(layer, "active"),
113                    text: text(layer, "mono", "disabled", { size: "sm" }),
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}