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