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