           add_new: customization('list_show_new_button', list_key) && !is_collapsed && @props.proposals_count > 4
           can_sort: customization('homepage_show_search_and_sort') && @props.proposals_count > 8 
 
-
-
+window.NewList = ReactiveComponent
+  displayName: 'NewList'
+
+  render: -> 
+    subdomain = fetch '/subdomain'
+
+    if !@local.edit_key
+      @local.edit_key = "new-list-#{Math.round(Math.random() * 1000)}"
+    
+    list = 
+      name: @local.edit_key 
+
+    list_key = "list/#{list.name}"    
+    edit_list = fetch "edit-#{list_key}"
+
+    if edit_list.editing
+      List 
+        fresh: true
+        list: list 
+          
+
+
+    else 
+      BUTTON 
+        style: 
+          textAlign: 'left'
+          marginTop: 35
+          display: 'block'
+          padding: '18px 24px'
+          position: 'relative'
+          left: -24
+          border: 'none'
+          width: '100%'
+          borderRadius: 8
+
+        onClick: =>
+          edit_list.editing = true
+          save edit_list
+
+        onKeyDown: (e) => 
+          if e.which == 13 || e.which == 32 # ENTER or SPACE
+            e.target.click()
+            e.preventDefault()              
+
+        H1
+          style: 
+            fontSize: 36
+            fontWeight: 700
+            fontStyle: 'oblique'
+            color: '#888'
+          translator 'engage.create_new_list_button', "Create new list"
+
+
+EditableTitle = ReactiveComponent
+  displayName: 'EditableTitle'
+
+  render: -> 
+    subdomain = fetch '/subdomain'
+    current_user = fetch '/current_user'
+
+    list = @props.list 
+    list_key = "list/#{list.name}"    
+
+    edit_list = fetch "edit-#{list_key}"
+
+    list_items_title = customization('list_items_title', list_key) or list.name or 'Proposals'
+
+    title = (edit_list.editing and edit_list.list_title) or customization('list_title', list_key) or list_items_title
+
+    if title == 'Show all'
+      title = translator "engage.all_proposals_list", "All Proposals"
+    else if title == "Proposals"
+      title = translator "engage.default_proposals_list", "Proposals"
+    else 
+      title = translator 
+                id: "proposal_list.#{title}"
+                key: "/translations/#{subdomain.name}"
+                title 
+
+    heading_style = _.defaults {}, customization('list_label_style', list_key),
+      fontSize: 36
+      fontWeight: 700
+      fontStyle: 'oblique'
+
+    if title.replace(/^\s+|\s+$/g, '').length == 0 # trim whitespace
+      heading_style.fontSize = 0 
+
+    list_uncollapseable = customization 'list_uncollapseable', list_key
+    TITLE_WRAPPER = if list_uncollapseable then DIV else BUTTON
+
+    collapsed = fetch 'collapsed_lists'    
+    is_collapsed = !!collapsed[list_key]
+
+    tw = if is_collapsed then 15 else 20
+    th = if is_collapsed then 20 else 15    
+
+    toggle_list = ->
+      if !list_uncollapseable
+        collapsed[list_key] = !collapsed[list_key] 
+        save collapsed
+
+    is_admin = fetch('/current_user').is_admin
+    title_style = 
+      padding: 0 
+      margin: 0 
+      border: 'none'
+      backgroundColor: 'transparent'
+      textAlign: 'left'
+      color: heading_style.color
+      fontWeight: heading_style.fontWeight
+      fontFamily: heading_style.fontFamily
+      fontStyle: heading_style.fontStyle
+      textDecoration: heading_style.textDecoration
+
+    H1
+      style: heading_style
+
+      if edit_list.editing
+        AutoGrowTextArea
+          id: "title-#{list_key}"
+          ref: 'input'
+          style: _.extend {}, title_style, 
+            fontSize: heading_style.fontSize
+            width: '100%'
+            lineHeight: 1.4
+
+          defaultValue: title
+          onChange: (e) ->
+            edit_list.list_title = e.target.value 
+            save edit_list
+          placeholder: translator('engage.list_title_input-open.placeholder', 'Ask an open-ended question or set a list title')
+
+
+      else 
+
+        TITLE_WRAPPER
+          tabIndex: if !list_uncollapseable then 0
+          'aria-label': "#{title}. #{translator('Expand or collapse list.')}"
+          'aria-pressed': !collapsed[list_key]
+          onMouseEnter: => @local.hover_label = true; save @local 
+          onMouseLeave: => @local.hover_label = false; save @local
+          style: _.extend {}, title_style, 
+            cursor: if !list_uncollapseable then 'pointer'
+            position: 'relative'
+
+          onKeyDown: if !list_uncollapseable then (e) -> 
+            if e.which == 13 || e.which == 32 # ENTER or SPACE
+              toggle_list()
+              e.preventDefault()
+          onClick: if !list_uncollapseable then (e) -> 
+            toggle_list()
+            document.activeElement.blur()
+
+          title 
+
+          if !list_uncollapseable
+            SPAN 
+              'aria-hidden': true
+              style: cssTriangle (if is_collapsed then 'right' else 'bottom'), (heading_style.color or 'black'), tw, th,
+                position: 'absolute'
+                left: -tw - 20
+                top: 16
+                width: tw
+                height: th
+                display: if @local.hover_label or is_collapsed then 'inline-block' else 'none'
+                outline: 'none'
+
+
+
+EditableDescription = ReactiveComponent
+  displayName: 'EditableDescription'
+  render: -> 
+    list = @props.list 
+
+    list_key = "list/#{list.name}"    
+    edit_list = fetch "edit-#{list_key}"
+
+    description = edit_list.list_description or customization('list_description', list_key)
+    description_style = customization 'list_description_style', list_key
+
+    current_user = fetch '/current_user'
+
+    DIV
+      style: _.defaults {}, (description_style or {}),
+        fontSize: 18
+        fontWeight: 400 
+        color: '#444'
+        marginTop: 6
+
+      if _.isFunction description
+        description()
+      else 
+
+        if current_user.is_admin && edit_list.editing
+          DIV 
+            id: 'edit_description'
+            STYLE
+              dangerouslySetInnerHTML: __html: """
+                #edit_description .ql-editor {
+                  min-height: 48px;
+                }
+              """
+
+            WysiwygEditor
+              key: "#{list_key}-description"
+              horizontal: true
+              html: customization('list_description', list_key)
+              placeholder: translator("engage.list_description", "(optional) Description")
+
+        else 
+          desc = description
+          if typeof desc == 'string'
+            desc = [description]
+
+          for para, idx in desc
+            DIV 
+              key: idx
+              style:
+                marginBottom: 10
+              dangerouslySetInnerHTML: {__html: para}
 
 
 window.list_actions = (props) -> 


        EditList
          list: @props.list

        EditableTitle
          list: @props.list


      save edit_list

    admin_actions = [{action: 'edit', label: t('edit')}, {action: 'delete', label: t('delete')}]

    if !edit_list.editing 

      DropMenu
        options: admin_actions
        open_menu_on: 'activation'

        render_anchor: ->
          GearIcon
            size: 20
            fill: '#888'

        render_option: (option, is_active) ->
          SPAN null, 
            option.label


        selection_made_callback: (option) =>
          if option.action == 'edit' 
            edit_list.editing = true 
            save edit_list

            setTimeout => 
              @refs.input?.getDOMNode().focus()
              @refs.input?.getDOMNode().setSelectionRange(-1, -1) # put cursor at end
          else if option.action == 'delete'
            # TODO: what to do if there are proposals?
            customizations = JSON.parse subdomain.customizations
            delete customizations[list_key] 
            subdomain.customizations = JSON.stringify customizations, null, 2
            save subdomain
            

        wrapper_style: 
          position: 'absolute'
          right: -28
          top: 16

        anchor_style: {}

        menu_style: 
          backgroundColor: '#eee'
          border: "1px solid #{focus_color()}"
          right: -9999
          top: 18
          borderRadius: 8
          fontWeight: 400
          overflow: 'hidden'
          boxShadow: '0 1px 2px rgba(0,0,0,.3)'
          fontSize: 18
          fontStyle: 'normal'

        menu_when_open_style: 
          right: 0

        option_style: 
          padding: '6px 12px'
          borderBottom: "1px solid #ddd"
          display: 'block'

        active_option_style: 
          color: 'white'
          backgroundColor: focus_color()

    else 

      DIV 
        style: 
          position: 'absolute'
          top: -35
          left: 0

        BUTTON 
          style: 
            border: 'none'
            borderRadius: 8
            padding: '4px 8px'
          onClick: submit
          onKeyDown: (e) =>
            if e.which == 13 || e.which == 32 # ENTER or SPACE
              @submit(e)  
              e.preventDefault()

          translator 'engage.save_changes_button', 'Save'

        BUTTON
          style: 
            backgroundColor: 'transparent'
            border: 'none'
            textDecoration: 'underline'
          onClick: cancel_edit
          onKeyDown: (e) =>
            if e.which == 13 || e.which == 32 # ENTER or SPACE
              cancel_edit(e)  
              e.preventDefault()

          translator 'engage.cancel_button', 'cancel'

window.ListHeader = ReactiveComponent
  displayName: 'ListHeader'

  render: -> 
    list = @props.list 
