## Design/theme

Put a lot of work into tightening up pixels and made progress towards custom themes:

![CleanShot 2021-08-13 at 09 35 40](https://user-images.githubusercontent.com/36073/129383567-ae628c68-3c96-463f-a47e-4800186ea7ac.png)

Here's a silly demo of me playing with theme generation:

https://user-images.githubusercontent.com/36073/129384214-2af744ab-8165-4e3f-825d-42fadbf86aec.mp4

## Flags ⚐

An astute observer would notice that the `Edit` and `Share` tabs are now gone. They've been consolidated into a "flag menu".

When you press the `right` key from the main menu of script, the flag menu now opens up. This shows the selected script and gives you some options. It also exposes the keyboard shortcuts associated with those options that you can use to :

![CleanShot 2021-08-13 at 09 42 52](https://user-images.githubusercontent.com/36073/129384559-bff59ebf-88d9-4b95-b9b5-640ce755fe8f.png)

I've found I use `cmd+o` and `cmd+n` all the time to tweak scripts of quickly create a new one to play around with.

### Custom Flags

You can pass your own custom flags like so:

[Install flags-demo](https://scriptkit.com/api/new?name=flags-demo&url=https://gist.githubusercontent.com/johnlindquist/b96c8f8de9c256f909ae0f6ab0adda39/raw/9f049cf454f0766fb278e5ee7a24c6b6776df889/flags-demo.js)

```js
//Menu: Flags demo

let urls = [
  "https://scriptkit.com",
  "https://egghead.io",
  "https://johnlindquist.com",
]

let flags = {
  open: {
    name: "Open",
    shortcut: "cmd+o",
  },
  copy: {
    name: "Copy",
    shortcut: "cmd+c",
  },
}

let url = await arg(
  { placeholder: `Press 'right' to see menu`, flags },
  urls
)

if (flag?.open) {
  $`open ${url}`
} else if (flag?.copy) {
  copy(url)
} else {
  console.log(url)
}
```

Notice that `flag` is a global while `flags` is an object you pass to `arg`. This is to help keep it consistent with terminal usage:

From the terminal
```bash
flags-demo --open
```

Will set the global `flag.open` to `true`

![CleanShot 2021-08-13 at 10 08 30](https://user-images.githubusercontent.com/36073/129388037-3f27a12d-9e44-4402-a51f-bac39eead54d.png)


You could also run this and pass in all the args:

```bash
flags-demo https://egghead.io --copy
```

In the app, you could create a second script to pass flags to the first with. This is required if you need to pass multiple flags since the `arg` helper can only "submit" one per `arg`.

```js
await run(`flags-demo https://egghead.io --copy`)
```

I'll put together some more demos soon. There are plenty of existing CLI tools out there using flags heavily, so lots of inspiration to pull from.

## `await div()`

There's a new `div` "component". You can pass in arbitrary HTML. This works well with the `md()` helper which generates `html` from markdown.

[Install div-demo](https://scriptkit.com/api/new?name=div-demo&url=https://gist.githubusercontent.com/johnlindquist/0ad790953f7101d313abfd48182356b0/raw/c70e17649317986707d2ac714c31afe6f7850015/div-demo.js)

```js
// Menu: Div Demo

// Hit "enter" to continue, escape to exit
await div(`<img src="https://placekitten.com/320"/>`)

await div(
  md(
    `
    # Some header

    ## You guessed it, an h2

    * I
    * love
    * lists
    `
  )
)

```

## Fixed `notify`

`notify` is now fixed so that it doesn't open a prompt

The most basic usage is:

```js
notify("Hello world")
```

`notify` leverages [https://www.npmjs.com/package/node-notifier](https://www.npmjs.com/package/node-notifier)

So the entire API should be available. Here's an example of using the "type inside a notification":

[Install notify-demo](https://scriptkit.com/api/new?name=notify-demo&url=https://gist.githubusercontent.com/johnlindquist/44387dc5b0c170e4146b061162c33532/raw/1bce77fb778a45cf9052a63d02dcab94a9cf7ef0/notify-demo.js)

```js
// Menu: Notify Demo
let notifier = notify({
  title: "Notifications",
  message: "Write a reply?",
  reply: true,
})

notifier.on("replied", async (obj, options, metadata) => {
  await arg(metadata.activationValue)
})

```


