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}