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