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
 73    return {
 74        openProjectButton: interactive({
 75            base: {
 76                background: background(layer),
 77                border: border(layer, "active"),
 78                cornerRadius: 4,
 79                margin: {
 80                    top: 16,
 81                    left: 16,
 82                    right: 16,
 83                },
 84                padding: {
 85                    top: 3,
 86                    bottom: 3,
 87                    left: 7,
 88                    right: 7,
 89                },
 90                ...text(layer, "sans", "default", { size: "sm" }),
 91            },
 92            state: {
 93                hovered: {
 94                    ...text(layer, "sans", "default", { size: "sm" }),
 95                    background: background(layer, "hovered"),
 96                    border: border(layer, "active"),
 97                },
 98                clicked: {
 99                    ...text(layer, "sans", "default", { size: "sm" }),
100                    background: background(layer, "pressed"),
101                    border: border(layer, "active"),
102                }
103            },
104        }),
105        background: background(layer),
106        padding: { left: 6, right: 6, top: 0, bottom: 6 },
107        indentWidth: 12,
108        entry,
109        draggedEntry: {
110            ...baseEntry,
111            text: text(layer, "mono", "on", { size: "sm" }),
112            background: withOpacity(background(layer, "on"), 0.9),
113            border: border(layer),
114            status,
115        },
116        ignoredEntry: {
117            ...entry,
118            iconColor: foreground(layer, "disabled"),
119            text: text(layer, "mono", "disabled"),
120            active: {
121                ...entry.active,
122                iconColor: foreground(layer, "variant"),
123            },
124        },
125        cutEntry: {
126            ...entry,
127            text: text(layer, "mono", "disabled"),
128            active: {
129                ...entry.active,
130                default: {
131                    ...entry.active.default,
132                    background: background(layer, "active"),
133                    text: text(layer, "mono", "disabled", { size: "sm" }),
134                },
135            },
136        },
137        filenameEditor: {
138            background: background(layer, "on"),
139            text: text(layer, "mono", "on", { size: "sm" }),
140            selection: colorScheme.players[0],
141        },
142    }
143}