Refactor Dropdown

modules/webapp/src/main/elm/Comp/AddressForm.elm

@@ -51,9 +51,7 @@ emptyModel =
     , city = ""
     , country =
         Comp.Dropdown.makeSingleList
-            { makeOption = \c -> { value = c.code, text = c.label, additional = "" }
+            { options = countries
-            , placeholder = "Select Country"
-            , options = countries
             , selected = Nothing
             }
     }
@@ -114,6 +112,14 @@ update msg model =
 
 view2 : UiSettings -> Model -> Html Msg
 view2 settings model =
+    let
+        countryCfg =
+            { makeOption = \c -> { text = c.label, additional = "" }
+            , placeholder = "Select Country"
+            , labelColor = \_ -> \_ -> ""
+            , style = DS.mainStyle
+            }
+    in
     div [ class "flex flex-col" ]
         [ div
             [ class "mb-2"
@@ -178,7 +184,7 @@ view2 settings model =
                 ]
             , Html.map CountryMsg
                 (Comp.Dropdown.view2
-                    DS.mainStyle
+                    countryCfg
                     settings
                     model.country
                 )

modules/webapp/src/main/elm/Comp/ClassifierSettingsForm.elm

@@ -64,16 +64,10 @@ init flags sett =
       , itemCount = Just sett.itemCount
       , categoryListModel =
             let
-                mkOption s =
-                    { value = s, text = s, additional = "" }
-
                 minit =
                     Comp.Dropdown.makeModel
                         { multiple = True
                         , searchable = \n -> n > 0
-                        , makeOption = mkOption
-                        , labelColor = \_ -> \_ -> "grey "
-                        , placeholder = "Choose categories …"
                         }
 
                 lm =
@@ -192,6 +186,13 @@ view2 texts settings model =
                 model.categoryListType
                 (Data.ListType.label model.categoryListType)
                 Nothing
+
+        categoryCfg =
+            { makeOption = \s -> { text = s, additional = "" }
+            , labelColor = \_ -> \_ -> "grey "
+            , placeholder = "Choose categories …"
+            , style = DS.mainStyle
+            }
     in
     div []
         [ Markdown.toHtml [ class "px-2 py-2 opacity-75" ]
@@ -213,7 +214,7 @@ view2 texts settings model =
                 ]
             , Html.map CategoryListMsg
                 (Comp.Dropdown.view2
-                    DS.mainStyle
+                    categoryCfg
                     settings
                     model.categoryListModel
                 )

modules/webapp/src/main/elm/Comp/CollectiveSettingsForm.elm

@@ -51,14 +51,7 @@ init flags settings =
     in
     ( { langModel =
             Comp.Dropdown.makeSingleList
-                { makeOption =
+                { options = Data.Language.all
-                    \l ->
-                        { value = Data.Language.toIso3 l
-                        , text = Data.Language.toName l
-                        , additional = ""
-                        }
-                , placeholder = ""
-                , options = Data.Language.all
                 , selected = Just lang
                 }
       , intEnabled = settings.integrationEnabled
@@ -203,6 +196,18 @@ update flags msg model =
 
 view2 : Flags -> Texts -> UiSettings -> Model -> Html Msg
 view2 flags texts settings model =
+    let
+        languageCfg =
+            { makeOption =
+                \l ->
+                    { text = Data.Language.toName l
+                    , additional = ""
+                    }
+            , placeholder = ""
+            , labelColor = \_ -> \_ -> ""
+            , style = DS.mainStyle
+            }
+    in
     div
         [ classList
             [ ( "ui form error success", True )
@@ -237,7 +242,7 @@ view2 flags texts settings model =
                 ]
             , Html.map LangDropdownMsg
                 (Comp.Dropdown.view2
-                    DS.mainStyle
+                    languageCfg
                     settings
                     model.langModel
                 )

modules/webapp/src/main/elm/Comp/Dropdown.elm

@@ -2,6 +2,7 @@ module Comp.Dropdown exposing
     ( Model
     , Msg(..)
     , Option
+    , ViewSettings
     , getSelected
     , isDropdownChangeMsg
     , makeModel
@@ -10,16 +11,13 @@ module Comp.Dropdown exposing
     , makeSingleList
     , mkOption
     , notSelected
-    , orgDropdown
+    , orgFormViewSettings
     , setMkOption
     , update
     , view2
     , viewSingle2
     )
 
-{-| This needs to be rewritten from scratch!
--}
-
 import Api.Model.IdName exposing (IdName)
 import Data.DropdownStyle as DS
 import Data.UiSettings exposing (UiSettings)
@@ -31,32 +29,8 @@ import Util.Html exposing (onKeyUp)
 import Util.List
 
 
-orgDropdown : Model IdName
-orgDropdown =
-    makeModel
-        { multiple = False
-        , searchable = \n -> n > 0
-        , makeOption = \e -> { value = e.id, text = e.name, additional = "" }
-        , labelColor = \_ -> \_ -> ""
-        , placeholder = "Choose an organization"
-        }
-
-
-type alias Option =
-    { value : String
-    , text : String
-    , additional : String
-    }
-
-
-mkOption : String -> String -> Option
-mkOption value text =
-    Option value text ""
-
-
 type alias Item a =
     { value : a
-    , option : Option
     , visible : Bool
     , selected : Bool
     , active : Bool
@@ -66,7 +40,6 @@ type alias Item a =
 makeItem : Model a -> a -> Item a
 makeItem model val =
     { value = val
-    , option = model.makeOption val
     , visible = True
     , selected =
         List.any (\i -> i.value == val) model.selected
@@ -78,26 +51,15 @@ type alias Model a =
     { multiple : Bool
     , selected : List (Item a)
     , available : List (Item a)
-    , makeOption : a -> Option
     , menuOpen : Bool
     , filterString : String
-    , labelColor : a -> UiSettings -> String
     , searchable : Int -> Bool
-    , placeholder : String
     }
 
 
-setMkOption : (a -> Option) -> Model a -> Model a
-setMkOption mkopt model =
-    { model | makeOption = mkopt }
-
-
 makeModel :
     { multiple : Bool
     , searchable : Int -> Bool
-    , makeOption : a -> Option
-    , labelColor : a -> UiSettings -> String
-    , placeholder : String
     }
     -> Model a
 makeModel input =
@@ -105,45 +67,28 @@ makeModel input =
     , searchable = input.searchable
     , selected = []
     , available = []
-    , makeOption = input.makeOption
     , menuOpen = False
     , filterString = ""
-    , labelColor = input.labelColor
-    , placeholder = input.placeholder
     }
 
 
-makeSingle :
+makeSingle : Model a
-    { makeOption : a -> Option
+makeSingle =
-    , placeholder : String
-    }
-    -> Model a
-makeSingle opts =
     makeModel
         { multiple = False
         , searchable = \n -> n > 0
-        , makeOption = opts.makeOption
-        , labelColor = \_ -> \_ -> ""
-        , placeholder =
-            if opts.placeholder == "" then
-                "Select…"
-
-            else
-                opts.placeholder
         }
 
 
 makeSingleList :
-    { makeOption : a -> Option
+    { options : List a
-    , placeholder : String
-    , options : List a
     , selected : Maybe a
     }
     -> Model a
 makeSingleList opts =
     let
         m =
-            makeSingle { makeOption = opts.makeOption, placeholder = opts.placeholder }
+            makeSingle
 
         m2 =
             { m | available = List.map (makeItem m) opts.options }
@@ -156,18 +101,11 @@ makeSingleList opts =
     m3
 
 
-makeMultiple :
+makeMultiple : Model a
-    { makeOption : a -> Option
+makeMultiple =
-    , labelColor : a -> UiSettings -> String
-    }
-    -> Model a
-makeMultiple opts =
     makeModel
         { multiple = True
         , searchable = \n -> n > 0
-        , makeOption = opts.makeOption
-        , labelColor = opts.labelColor
-        , placeholder = ""
         }
 
 
@@ -186,9 +124,8 @@ type Msg a
     | SetSelection (List a)
     | ToggleMenu
     | AddItem (Item a)
-    | RemoveItem (Item a)
     | RemoveItem2 (Item a)
-    | Filter String
+    | Filter (a -> String) String
     | ShowMenu Bool
     | KeyPress Int
 
@@ -215,17 +152,17 @@ deselectItem : Model a -> Item a -> Model a
 deselectItem model item =
     let
         value =
-            item.option.value
+            item.value
 
         sel =
             if model.multiple then
-                List.filter (\e -> e.option.value /= value) model.selected
+                List.filter (\e -> e.value /= value) model.selected
 
             else
                 []
 
         show e =
-            if e.option.value == value then
+            if e.value == value then
                 { e | selected = False }
 
             else
@@ -241,7 +178,7 @@ selectItem : Model a -> Item a -> Model a
 selectItem model item =
     let
         value =
-            item.option.value
+            item.value
 
         sel =
             if model.multiple then
@@ -251,7 +188,7 @@ selectItem model item =
                 [ item ]
 
         hide e =
-            if e.option.value == value then
+            if e.value == value then
                 { e | selected = True }
 
             else if model.multiple then
@@ -266,13 +203,13 @@ selectItem model item =
     { model | selected = sel, available = avail }
 
 
-filterOptions : String -> List (Item a) -> List (Item a)
+filterOptions : String -> (a -> String) -> List (Item a) -> List (Item a)
-filterOptions str list =
+filterOptions str mkText list =
-    List.map (\e -> { e | visible = Simple.Fuzzy.match str e.option.text, active = False }) list
+    List.map (\e -> { e | visible = Simple.Fuzzy.match str (mkText e.value), active = False }) list
 
 
-applyFilter : String -> Model a -> Model a
+applyFilter : String -> (a -> String) -> Model a -> Model a
-applyFilter str model =
+applyFilter str mkText model =
     let
         selected =
             if str /= "" && not model.multiple then
@@ -281,7 +218,12 @@ applyFilter str model =
             else
                 model.selected
     in
-    { model | filterString = str, available = filterOptions str model.available, selected = selected }
+    { model | filterString = str, available = filterOptions str mkText model.available, selected = selected }
+
+
+clearFilter : Model a -> Model a
+clearFilter model =
+    { model | filterString = "" }
 
 
 makeNextActive : (Int -> Int) -> Model a -> Model a
@@ -299,7 +241,7 @@ makeNextActive nextEl model =
                 |> Maybe.andThen (Util.List.get opts)
 
         merge item1 item2 =
-            { item2 | active = item1.option.value == item2.option.value }
+            { item2 | active = item1.value == item2.value }
 
         updateModel item =
             { model | available = List.map (merge item) model.available, menuOpen = True }
@@ -325,7 +267,7 @@ selectActive model =
     in
     case current of
         Just item ->
-            selectItem model item |> applyFilter ""
+            selectItem model item |> clearFilter
 
         Nothing ->
             model
@@ -337,9 +279,6 @@ isDropdownChangeMsg cm =
         AddItem _ ->
             True
 
-        RemoveItem _ ->
-            True
-
         RemoveItem2 _ ->
             True
 
@@ -375,34 +314,23 @@ update msg model =
         AddItem e ->
             let
                 m =
-                    selectItem model e |> applyFilter ""
+                    selectItem model e |> clearFilter
             in
             ( { m | menuOpen = False }, Cmd.none )
 
-        RemoveItem e ->
-            let
-                m =
-                    deselectItem model e |> applyFilter ""
-            in
-            ( -- Setting to True, because parent click sets it to False… ugly
-              { m | menuOpen = True }
-            , Cmd.none
-            )
-
         RemoveItem2 e ->
             let
                 m =
-                    deselectItem model e |> applyFilter ""
+                    deselectItem model e |> clearFilter
             in
-            ( -- Hack above only needed with semanticui
+            ( m
-              m
             , Cmd.none
             )
 
-        Filter str ->
+        Filter f str ->
             let
                 m =
-                    applyFilter str model
+                    applyFilter str f model
             in
             ( { m | menuOpen = True }, Cmd.none )
 
@@ -438,7 +366,7 @@ update msg model =
                             [ e ] ->
                                 let
                                     ( m_, c_ ) =
-                                        update (RemoveItem e) model
+                                        update (RemoveItem2 e) model
                                 in
                                 ( { m_ | menuOpen = False }, c_ )
 
@@ -463,32 +391,65 @@ update msg model =
 -- View2
 
 
-view2 : DS.DropdownStyle -> UiSettings -> Model a -> Html (Msg a)
+type alias Option =
-view2 style settings model =
+    { text : String
+    , additional : String
+    }
+
+
+mkOption : String -> Option
+mkOption text =
+    Option text ""
+
+
+type alias ViewSettings a =
+    { makeOption : a -> Option
+    , placeholder : String
+    , labelColor : a -> UiSettings -> String
+    , style : DS.DropdownStyle
+    }
+
+
+orgFormViewSettings : DS.DropdownStyle -> ViewSettings IdName
+orgFormViewSettings ds =
+    { makeOption = \e -> { text = e.name, additional = "" }
+    , labelColor = \_ -> \_ -> ""
+    , placeholder = "Choose an organization"
+    , style = ds
+    }
+
+
+setMkOption : (a -> Option) -> ViewSettings a -> ViewSettings a
+setMkOption mkopt model =
+    { model | makeOption = mkopt }
+
+
+view2 : ViewSettings a -> UiSettings -> Model a -> Html (Msg a)
+view2 cfg settings model =
     if model.multiple then
-        viewMultiple2 style settings model
+        viewMultiple2 cfg settings model
 
     else
-        viewSingle2 style model
+        viewSingle2 cfg model
 
 
-viewSingle2 : DS.DropdownStyle -> Model a -> Html (Msg a)
+viewSingle2 : ViewSettings a -> Model a -> Html (Msg a)
-viewSingle2 style model =
+viewSingle2 cfg model =
     let
         renderItem item =
             a
                 [ href "#"
-                , class style.item
+                , class cfg.style.item
                 , classList
-                    [ ( style.itemActive, item.active )
+                    [ ( cfg.style.itemActive, item.active )
                     , ( "font-semibold", item.selected )
                     ]
                 , onClick (AddItem item)
                 , onKeyUp KeyPress
                 ]
-                [ text item.option.text
+                [ text <| (.value >> cfg.makeOption >> .text) item
                 , span [ class "text-gray-400 float-right" ]
-                    [ text item.option.additional
+                    [ text <| (.value >> cfg.makeOption >> .additional) item
                     ]
                 ]
 
@@ -500,7 +461,7 @@ viewSingle2 style model =
         , onKeyUp KeyPress
         ]
         [ div
-            [ class style.link
+            [ class cfg.style.link
             ]
             [ a
                 [ class "flex-grow"
@@ -514,8 +475,8 @@ viewSingle2 style model =
                 , onClick ToggleMenu
                 , href "#"
                 ]
-                [ Maybe.map (.option >> .text) sel
+                [ Maybe.map (.value >> cfg.makeOption >> .text) sel
-                    |> Maybe.withDefault model.placeholder
+                    |> Maybe.withDefault cfg.placeholder
                     |> text
                 ]
             , a
@@ -532,11 +493,11 @@ viewSingle2 style model =
                 ]
             , input
                 [ type_ "text"
-                , placeholder model.placeholder
+                , placeholder cfg.placeholder
-                , onInput Filter
+                , onInput (Filter (cfg.makeOption >> .text))
                 , value model.filterString
                 , class "inline-block border-0 px-0 w-full py-0 focus:ring-0 "
-                , class style.input
+                , class cfg.style.input
                 , classList [ ( "hidden", not (model.menuOpen && isSearchable model) ) ]
                 ]
                 []
@@ -550,43 +511,43 @@ viewSingle2 style model =
                 ]
             ]
         , div
-            [ class style.menu
+            [ class cfg.style.menu
             , classList [ ( "hidden", not model.menuOpen ) ]
             ]
             (getOptions model |> List.map renderItem)
         ]
 
 
-viewMultiple2 : DS.DropdownStyle -> UiSettings -> Model a -> Html (Msg a)
+viewMultiple2 : ViewSettings a -> UiSettings -> Model a -> Html (Msg a)
-viewMultiple2 style settings model =
+viewMultiple2 cfg settings model =
     let
         renderItem item =
             a
                 [ href "#"
-                , class style.item
+                , class cfg.style.item
                 , classList
-                    [ ( style.itemActive, item.active )
+                    [ ( cfg.style.itemActive, item.active )
                     , ( "font-semibold", item.selected )
                     ]
                 , onClick (AddItem item)
                 , onKeyUp KeyPress
                 ]
-                [ text item.option.text
+                [ text <| (.value >> cfg.makeOption >> .text) item
                 , span [ class "text-gray-400 float-right" ]
-                    [ text item.option.additional
+                    [ text <| (.value >> cfg.makeOption >> .additional) item
                     ]
                 ]
 
         renderSelectMultiple : Item a -> Html (Msg a)
         renderSelectMultiple item =
             a
-                [ class (model.labelColor item.value settings)
+                [ class (cfg.labelColor item.value settings)
                 , class "label font-medium inline-flex relative items-center hover:shadow-md mt-1 mr-1"
-                , onClick (RemoveItem item)
+                , onClick (RemoveItem2 item)
                 , href "#"
                 ]
                 [ span [ class "pl-4" ]
-                    [ text item.option.text
+                    [ text <| (.value >> cfg.makeOption >> .text) item
                     ]
                 , span [ class "opacity-75 absolute left-2 my-auto" ]
                     [ i [ class "fa fa-times" ] []
@@ -598,7 +559,7 @@ viewMultiple2 style settings model =
         , onKeyUp KeyPress
         ]
         [ div
-            [ class style.link
+            [ class cfg.style.link
             , class "flex inline-flex flex-wrap items-center"
             ]
             [ div
@@ -609,10 +570,10 @@ viewMultiple2 style settings model =
             , input
                 [ type_ "text"
                 , placeholder "Search…"
-                , onInput Filter
+                , onInput (Filter (cfg.makeOption >> .text))
                 , value model.filterString
                 , class "inline-flex w-16 border-0 px-0 focus:ring-0 h-6"
-                , class style.input
+                , class cfg.style.input
                 ]
                 []
             , a
@@ -629,7 +590,7 @@ viewMultiple2 style settings model =
                 ]
             ]
         , div
-            [ class style.menu
+            [ class cfg.style.menu
             , classList [ ( "hidden", not model.menuOpen ) ]
             ]
             (getOptions model |> List.map renderItem)

modules/webapp/src/main/elm/Comp/EmailSettingsForm.elm

@@ -55,14 +55,7 @@ emptyModel =
     , replyTo = Nothing
     , sslType =
         Comp.Dropdown.makeSingleList
-            { makeOption =
+            { options = Data.SSLType.all
-                \s ->
-                    { value = Data.SSLType.toString s
-                    , text = Data.SSLType.label s
-                    , additional = ""
-                    }
-            , placeholder = ""
-            , options = Data.SSLType.all
             , selected = Just Data.SSLType.None
             }
     , ignoreCertificates = False
@@ -83,14 +76,7 @@ init ems =
     , replyTo = ems.replyTo
     , sslType =
         Comp.Dropdown.makeSingleList
-            { makeOption =
+            { options = Data.SSLType.all
-                \s ->
-                    { value = Data.SSLType.toString s
-                    , text = Data.SSLType.label s
-                    , additional = ""
-                    }
-            , placeholder = ""
-            , options = Data.SSLType.all
             , selected =
                 Data.SSLType.fromString ems.sslType
                     |> Maybe.withDefault Data.SSLType.None
@@ -186,6 +172,18 @@ update msg model =
 
 view2 : UiSettings -> Model -> Html Msg
 view2 settings model =
+    let
+        sslCfg =
+            { makeOption =
+                \s ->
+                    { text = Data.SSLType.label s
+                    , additional = ""
+                    }
+            , placeholder = ""
+            , labelColor = \_ -> \_ -> ""
+            , style = DS.mainStyle
+            }
+    in
     div [ class "grid grid-cols-4 gap-y-4 gap-x-2" ]
         [ div [ class "col-span-4" ]
             [ label
@@ -291,7 +289,7 @@ view2 settings model =
                 ]
             , Html.map SSLTypeMsg
                 (Comp.Dropdown.view2
-                    DS.mainStyle
+                    sslCfg
                     settings
                     model.sslType
                 )

modules/webapp/src/main/elm/Comp/ImapSettingsForm.elm

@@ -52,14 +52,7 @@ emptyModel =
     , password = Nothing
     , sslType =
         Comp.Dropdown.makeSingleList
-            { makeOption =
+            { options = Data.SSLType.all
-                \s ->
-                    { value = Data.SSLType.toString s
-                    , text = Data.SSLType.label s
-                    , additional = ""
-                    }
-            , placeholder = ""
-            , options = Data.SSLType.all
             , selected = Just Data.SSLType.None
             }
     , ignoreCertificates = False
@@ -79,14 +72,7 @@ init ems =
     , password = ems.imapPassword
     , sslType =
         Comp.Dropdown.makeSingleList
-            { makeOption =
+            { options = Data.SSLType.all
-                \s ->
-                    { value = Data.SSLType.toString s
-                    , text = Data.SSLType.label s
-                    , additional = ""
-                    }
-            , placeholder = ""
-            , options = Data.SSLType.all
             , selected =
                 Data.SSLType.fromString ems.sslType
                     |> Maybe.withDefault Data.SSLType.None
@@ -178,6 +164,18 @@ update msg model =
 
 view2 : UiSettings -> Model -> Html Msg
 view2 settings model =
+    let
+        sslCfg =
+            { makeOption =
+                \s ->
+                    { text = Data.SSLType.label s
+                    , additional = ""
+                    }
+            , placeholder = ""
+            , labelColor = \_ -> \_ -> ""
+            , style = DS.mainStyle
+            }
+    in
     div
         [ class "grid grid-cols-4 gap-y-4 gap-x-2" ]
         [ div [ class "col-span-4" ]
@@ -251,7 +249,7 @@ view2 settings model =
                 ]
             , Html.map SSLTypeMsg
                 (Comp.Dropdown.view2
-                    DS.mainStyle
+                    sslCfg
                     settings
                     model.sslType
                 )

modules/webapp/src/main/elm/Comp/ItemDetail/EditForm.elm

@@ -14,8 +14,10 @@ import Comp.ItemDetail.Model
         )
 import Comp.KeyInput
 import Comp.Tabs as TB
+import Data.Direction
 import Data.DropdownStyle
 import Data.Fields
+import Data.Flags exposing (Flags)
 import Data.Icons as Icons
 import Data.UiSettings exposing (UiSettings)
 import Dict
@@ -27,11 +29,13 @@ import Page exposing (Page(..))
 import Set exposing (Set)
 import Styles as S
 import Util.Folder
+import Util.Person
+import Util.Tag
 import Util.Time
 
 
-view2 : UiSettings -> Model -> Html Msg
+view2 : Flags -> UiSettings -> Model -> Html Msg
-view2 settings model =
+view2 flags settings model =
     let
         keyAttr =
             if settings.itemDetailShortcuts then
@@ -44,7 +48,7 @@ view2 settings model =
             TB.searchMenuStyle
 
         tabs =
-            formTabs settings model
+            formTabs flags settings model
 
         allTabNames =
             List.map .title tabs
@@ -57,8 +61,8 @@ view2 settings model =
         ]
 
 
-formTabs : UiSettings -> Model -> List (TB.Tab Msg)
+formTabs : Flags -> UiSettings -> Model -> List (TB.Tab Msg)
-formTabs settings model =
+formTabs flags settings model =
     let
         dds =
             Data.DropdownStyle.sidebarStyle
@@ -106,6 +110,38 @@ formTabs settings model =
 
             else
                 span [ class "invisible hidden" ] []
+
+        directionCfg =
+            { makeOption =
+                \entry ->
+                    { text = Data.Direction.toString entry
+                    , additional = ""
+                    }
+            , placeholder = "Choose a direction…"
+            , labelColor = \_ -> \_ -> ""
+            , style = dds
+            }
+
+        folderCfg =
+            { makeOption = Util.Folder.mkFolderOption flags model.allFolders
+            , placeholder = ""
+            , labelColor = \_ -> \_ -> ""
+            , style = dds
+            }
+
+        idNameCfg =
+            { makeOption = \e -> { text = e.name, additional = "" }
+            , labelColor = \_ -> \_ -> ""
+            , placeholder = "Select…"
+            , style = dds
+            }
+
+        personCfg =
+            { makeOption = \p -> Util.Person.mkPersonOption p model.allPersons
+            , labelColor = \_ -> \_ -> ""
+            , placeholder = "Select…"
+            , style = dds
+            }
     in
     [ { title = "Name"
       , titleRight = []
@@ -163,7 +199,11 @@ formTabs settings model =
       , info = Nothing
       , body =
             [ div [ class "mb-4 flex flex-col" ]
-                [ Html.map TagDropdownMsg (Comp.Dropdown.view2 dds settings model.tagModel)
+                [ Html.map TagDropdownMsg
+                    (Comp.Dropdown.view2 (Util.Tag.tagSettings dds)
+                        settings
+                        model.tagModel
+                    )
                 , div [ class "flex flex-row items-center justify-end" ]
                     [ a
                         [ class S.secondaryButton
@@ -184,7 +224,7 @@ formTabs settings model =
             [ div [ class "mb-4" ]
                 [ Html.map FolderDropdownMsg
                     (Comp.Dropdown.view2
-                        dds
+                        folderCfg
                         settings
                         model.folderModel
                     )
@@ -254,7 +294,12 @@ item visible. This message will disappear then.
                         , addIconLink "Add new organization" StartCorrOrgModal
                         , editIconLink "Edit organization" model.corrOrgModel StartEditCorrOrgModal
                         ]
-                    , Html.map OrgDropdownMsg (Comp.Dropdown.view2 dds settings model.corrOrgModel)
+                    , Html.map OrgDropdownMsg
+                        (Comp.Dropdown.view2
+                            (Comp.Dropdown.orgFormViewSettings dds)
+                            settings
+                            model.corrOrgModel
+                        )
                     , renderOrgSuggestions model
                     ]
             , optional [ Data.Fields.CorrPerson ] <|
@@ -267,7 +312,11 @@ item visible. This message will disappear then.
                             model.corrPersonModel
                             (StartEditPersonModal model.corrPersonModel)
                         ]
-                    , Html.map CorrPersonMsg (Comp.Dropdown.view2 dds settings model.corrPersonModel)
+                    , Html.map CorrPersonMsg
+                        (Comp.Dropdown.view2 personCfg
+                            settings
+                            model.corrPersonModel
+                        )
                     , renderCorrPersonSuggestions model
                     , div
                         [ classList
@@ -298,7 +347,7 @@ item visible. This message will disappear then.
                         ]
                     , Html.map ConcPersonMsg
                         (Comp.Dropdown.view2
-                            dds
+                            personCfg
                             settings
                             model.concPersonModel
                         )
@@ -316,7 +365,7 @@ item visible. This message will disappear then.
                         ]
                     , Html.map ConcEquipMsg
                         (Comp.Dropdown.view2
-                            dds
+                            idNameCfg
                             settings
                             model.concEquipModel
                         )
@@ -331,7 +380,7 @@ item visible. This message will disappear then.
             [ div [ class "mb-4" ]
                 [ Html.map DirDropdownMsg
                     (Comp.Dropdown.view2
-                        dds
+                        directionCfg
                         settings
                         model.directionModel
                     )

modules/webapp/src/main/elm/Comp/ItemDetail/Model.elm

@@ -39,7 +39,6 @@ import Comp.KeyInput
 import Comp.LinkTarget exposing (LinkTarget)
 import Comp.MarkdownInput
 import Comp.SentMails
-import Comp.YesNoDimmer
 import Data.Direction exposing (Direction)
 import Data.Fields exposing (Field)
 import DatePicker exposing (DatePicker)
@@ -136,45 +135,17 @@ emptyModel =
     , visibleAttach = 0
     , attachMenuOpen = False
     , menuOpen = False
-    , tagModel =
+    , tagModel = Util.Tag.makeDropdownModel
-        Util.Tag.makeDropdownModel2
     , directionModel =
         Comp.Dropdown.makeSingleList
-            { makeOption =
+            { options = Data.Direction.all
-                \entry ->
-                    { value = Data.Direction.toString entry
-                    , text = Data.Direction.toString entry
-                    , additional = ""
-                    }
-            , options = Data.Direction.all
-            , placeholder = "Choose a direction…"
             , selected = Nothing
             }
-    , corrOrgModel =
+    , corrOrgModel = Comp.Dropdown.makeSingle
-        Comp.Dropdown.makeSingle
+    , corrPersonModel = Comp.Dropdown.makeSingle
-            { makeOption = \e -> { value = e.id, text = e.name, additional = "" }
+    , concPersonModel = Comp.Dropdown.makeSingle
-            , placeholder = ""
+    , concEquipModel = Comp.Dropdown.makeSingle
-            }
+    , folderModel = Comp.Dropdown.makeSingle
-    , corrPersonModel =
-        Comp.Dropdown.makeSingle
-            { makeOption = \e -> { value = e.id, text = e.name, additional = "" }
-            , placeholder = ""
-            }
-    , concPersonModel =
-        Comp.Dropdown.makeSingle
-            { makeOption = \e -> { value = e.id, text = e.name, additional = "" }
-            , placeholder = ""
-            }
-    , concEquipModel =
-        Comp.Dropdown.makeSingle
-            { makeOption = \e -> { value = e.id, text = e.name, additional = "" }
-            , placeholder = ""
-            }
-    , folderModel =
-        Comp.Dropdown.makeSingle
-            { makeOption = \e -> { value = e.id, text = e.name, additional = "" }
-            , placeholder = ""
-            }
     , allFolders = []
     , nameModel = ""
     , nameState = SaveSuccess

modules/webapp/src/main/elm/Comp/ItemDetail/MultiEditMenu.elm

@@ -48,6 +48,7 @@ import Time
 import Util.Folder exposing (mkFolderOption)
 import Util.List
 import Util.Maybe
+import Util.Person
 import Util.Tag
 
 
@@ -117,45 +118,17 @@ type Msg
 
 init : Model
 init =
-    { tagModel =
+    { tagModel = Util.Tag.makeDropdownModel
-        Util.Tag.makeDropdownModel2
     , directionModel =
         Comp.Dropdown.makeSingleList
-            { makeOption =
+            { options = Data.Direction.all
-                \entry ->
-                    { value = Data.Direction.toString entry
-                    , text = Data.Direction.toString entry
-                    , additional = ""
-                    }
-            , options = Data.Direction.all
-            , placeholder = "Choose a direction…"
             , selected = Nothing
             }
-    , corrOrgModel =
+    , corrOrgModel = Comp.Dropdown.makeSingle
-        Comp.Dropdown.makeSingle
+    , corrPersonModel = Comp.Dropdown.makeSingle
-            { makeOption = \e -> { value = e.id, text = e.name, additional = "" }
+    , concPersonModel = Comp.Dropdown.makeSingle
-            , placeholder = ""
+    , concEquipModel = Comp.Dropdown.makeSingle
-            }
+    , folderModel = Comp.Dropdown.makeSingle
-    , corrPersonModel =
-        Comp.Dropdown.makeSingle
-            { makeOption = \e -> { value = e.id, text = e.name, additional = "" }
-            , placeholder = ""
-            }
-    , concPersonModel =
-        Comp.Dropdown.makeSingle
-            { makeOption = \e -> { value = e.id, text = e.name, additional = "" }
-            , placeholder = ""
-            }
-    , concEquipModel =
-        Comp.Dropdown.makeSingle
-            { makeOption = \e -> { value = e.id, text = e.name, additional = "" }
-            , placeholder = ""
-            }
-    , folderModel =
-        Comp.Dropdown.makeSingle
-            { makeOption = \e -> { value = e.id, text = e.name, additional = "" }
-            , placeholder = ""
-            }
     , allFolders = []
     , nameModel = ""
     , nameSaveThrottle = Throttle.create 1
@@ -310,13 +283,7 @@ update flags msg model =
         GetFolderResp (Ok fs) ->
             let
                 model_ =
-                    { model
+                    { model | allFolders = fs.items }
-                        | allFolders = fs.items
-                        , folderModel =
-                            Comp.Dropdown.setMkOption
-                                (mkFolderOption flags fs.items)
-                                model.folderModel
-                    }
 
                 mkIdName fitem =
                     IdName fitem.id fitem.name
@@ -635,13 +602,13 @@ defaultViewConfig =
 --- View2
 
 
-view2 : ViewConfig -> UiSettings -> Model -> Html Msg
+view2 : Flags -> ViewConfig -> UiSettings -> Model -> Html Msg
 view2 =
     renderEditForm2
 
 
-renderEditForm2 : ViewConfig -> UiSettings -> Model -> Html Msg
+renderEditForm2 : Flags -> ViewConfig -> UiSettings -> Model -> Html Msg
-renderEditForm2 cfg settings model =
+renderEditForm2 flags cfg settings model =
     let
         fieldVisible field =
             Data.UiSettings.fieldVisible settings field
@@ -700,6 +667,31 @@ renderEditForm2 cfg settings model =
 
         tabStyle =
             TB.searchMenuStyle
+
+        folderCfg =
+            { makeOption = Util.Folder.mkFolderOption flags model.allFolders
+            , placeholder = ""
+            , labelColor = \_ -> \_ -> ""
+            , style = dds
+            }
+
+        idNameCfg =
+            { makeOption = \e -> { text = e.name, additional = "" }
+            , labelColor = \_ -> \_ -> ""
+            , placeholder = "Select…"
+            , style = dds
+            }
+
+        directionCfg =
+            { makeOption =
+                \entry ->
+                    { text = Data.Direction.toString entry
+                    , additional = ""
+                    }
+            , placeholder = "Choose a direction…"
+            , labelColor = \_ -> \_ -> ""
+            , style = dds
+            }
     in
     div [ class cfg.menuClass, class "mt-2" ]
         [ TB.akkordion
@@ -747,7 +739,11 @@ renderEditForm2 cfg settings model =
                                 [ tagModeIcon
                                 ]
                             ]
-                        , Html.map TagDropdownMsg (Comp.Dropdown.view2 dds settings model.tagModel)
+                        , Html.map TagDropdownMsg
+                            (Comp.Dropdown.view2 (Util.Tag.tagSettings dds)
+                                settings
+                                model.tagModel
+                            )
                         , Markdown.toHtml [ class "opacity-50 text-sm" ] tagModeMsg
                         ]
                     ]
@@ -756,7 +752,7 @@ renderEditForm2 cfg settings model =
               , titleRight = []
               , info = Nothing
               , body =
-                    [ Html.map FolderDropdownMsg (Comp.Dropdown.view2 dds settings model.folderModel)
+                    [ Html.map FolderDropdownMsg (Comp.Dropdown.view2 folderCfg settings model.folderModel)
                     , div
                         [ classList
                             [ ( S.message, True )
@@ -835,7 +831,7 @@ item visible. This message will disappear then.
                                     [ text "Organization"
                                     ]
                                 ]
-                            , Html.map OrgDropdownMsg (Comp.Dropdown.view2 dds settings model.corrOrgModel)
+                            , Html.map OrgDropdownMsg (Comp.Dropdown.view2 idNameCfg settings model.corrOrgModel)
                             ]
                     , optional [ Data.Fields.CorrPerson ] <|
                         div [ class "mb-4" ]
@@ -845,7 +841,7 @@ item visible. This message will disappear then.
                                     [ text "Person"
                                     ]
                                 ]
-                            , Html.map CorrPersonMsg (Comp.Dropdown.view2 dds settings model.corrPersonModel)
+                            , Html.map CorrPersonMsg (Comp.Dropdown.view2 idNameCfg settings model.corrPersonModel)
                             ]
                     ]
               }
@@ -860,7 +856,7 @@ item visible. This message will disappear then.
                                 , span [ class "ml-2" ]
                                     [ text "Person" ]
                                 ]
-                            , Html.map ConcPersonMsg (Comp.Dropdown.view2 dds settings model.concPersonModel)
+                            , Html.map ConcPersonMsg (Comp.Dropdown.view2 idNameCfg settings model.concPersonModel)
                             ]
                     , optional [ Data.Fields.ConcEquip ] <|
                         div [ class "mb-4" ]
@@ -869,7 +865,11 @@ item visible. This message will disappear then.
                                 , span [ class "ml-2" ]
                                     [ text "Equipment" ]
                                 ]
-                            , Html.map ConcEquipMsg (Comp.Dropdown.view2 dds settings model.concEquipModel)
+                            , Html.map ConcEquipMsg
+                                (Comp.Dropdown.view2 idNameCfg
+                                    settings
+                                    model.concEquipModel
+                                )
                             ]
                     ]
               }
@@ -877,7 +877,7 @@ item visible. This message will disappear then.
               , titleRight = []
               , info = Nothing
               , body =
-                    [ Html.map DirDropdownMsg (Comp.Dropdown.view2 dds settings model.directionModel)
+                    [ Html.map DirDropdownMsg (Comp.Dropdown.view2 directionCfg settings model.directionModel)
                     ]
               }
             , { title = "Name"

modules/webapp/src/main/elm/Comp/ItemDetail/Update.elm

@@ -62,7 +62,6 @@ import Set exposing (Set)
 import Throttle
 import Time
 import Util.File exposing (makeFileId)
-import Util.Folder exposing (mkFolderOption)
 import Util.Http
 import Util.List
 import Util.Maybe
@@ -576,13 +575,7 @@ update key flags inav settings msg model =
         GetFolderResp (Ok fs) ->
             let
                 model_ =
-                    { model
+                    { model | allFolders = fs.items }
-                        | allFolders = fs.items
-                        , folderModel =
-                            Comp.Dropdown.setMkOption
-                                (mkFolderOption flags fs.items)
-                                model.folderModel
-                    }
 
                 mkIdName fitem =
                     IdName fitem.id fitem.name
@@ -645,23 +638,8 @@ update key flags inav settings msg model =
                     List.filter personFilter correspondent
                         |> List.map (\e -> IdName e.id e.name)
 
-                mkPersonOption idref =
-                    let
-                        org =
-                            Dict.get idref.id personDict
-                                |> Maybe.andThen .organization
-                                |> Maybe.map .name
-                                |> Maybe.map (Util.String.ellipsis 15)
-                                |> Maybe.withDefault ""
-                    in
-                    Comp.Dropdown.Option idref.id idref.name org
-
                 model_ =
-                    { model
+                    { model | allPersons = personDict }
-                        | corrPersonModel = Comp.Dropdown.setMkOption mkPersonOption model.corrPersonModel
-                        , concPersonModel = Comp.Dropdown.setMkOption mkPersonOption model.concPersonModel
-                        , allPersons = personDict
-                    }
 
                 res1 =
                     update key
@@ -1505,7 +1483,7 @@ update key flags inav settings msg model =
         ToggleOpenAllAkkordionTabs ->
             let
                 allNames =
-                    Comp.ItemDetail.EditForm.formTabs settings model
+                    Comp.ItemDetail.EditForm.formTabs flags settings model
                         |> List.map .title
                         |> Set.fromList
 

modules/webapp/src/main/elm/Comp/ItemMail.elm

@@ -69,11 +69,7 @@ type FormAction
 
 emptyModel : Model
 emptyModel =
-    { connectionModel =
+    { connectionModel = Comp.Dropdown.makeSingle
-        Comp.Dropdown.makeSingle
-            { makeOption = \a -> { value = a, text = a, additional = "" }
-            , placeholder = "Select connection..."
-            }
     , subject = ""
     , recipients = []
     , recipientsModel = Comp.EmailInput.init
@@ -160,9 +156,7 @@ update flags msg model =
 
                 cm =
                     Comp.Dropdown.makeSingleList
-                        { makeOption = \a -> { value = a, text = a, additional = "" }
+                        { options = names
-                        , placeholder = "Select Connection..."
-                        , options = names
                         , selected = List.head names
                         }
             in
@@ -229,6 +223,13 @@ view2 settings model =
     let
         dds =
             Data.DropdownStyle.mainStyle
+
+        connectionCfg =
+            { makeOption = \a -> { text = a, additional = "" }
+            , placeholder = "Select connection..."
+            , labelColor = \_ -> \_ -> ""
+            , style = dds
+            }
     in
     div
         [ class "flex flex-col"
@@ -238,7 +239,7 @@ view2 settings model =
                 [ text "Send via"
                 , B.inputRequired
                 ]
-            , Html.map ConnMsg (Comp.Dropdown.view2 dds settings model.connectionModel)
+            , Html.map ConnMsg (Comp.Dropdown.view2 connectionCfg settings model.connectionModel)
             ]
         , div
             [ class S.errorMessage

modules/webapp/src/main/elm/Comp/NotificationForm.elm

@@ -144,13 +144,9 @@ init flags =
             Comp.CalEventInput.initDefault
     in
     ( { settings = Api.Model.NotificationSettings.empty
-      , connectionModel =
+      , connectionModel = Comp.Dropdown.makeSingle
-            Comp.Dropdown.makeSingle
+      , tagInclModel = Util.Tag.makeDropdownModel
-                { makeOption = \a -> { value = a, text = a, additional = "" }
+      , tagExclModel = Util.Tag.makeDropdownModel
-                , placeholder = "Select connection..."
-                }
-      , tagInclModel = Util.Tag.makeDropdownModel2
-      , tagExclModel = Util.Tag.makeDropdownModel2
       , recipients = []
       , recipientsModel = Comp.EmailInput.init
       , remindDays = Just 1
@@ -298,9 +294,7 @@ update flags msg model =
 
                 cm =
                     Comp.Dropdown.makeSingleList
-                        { makeOption = \a -> { value = a, text = a, additional = "" }
+                        { options = names
-                        , placeholder = "Select Connection..."
-                        , options = names
                         , selected = List.head names
                         }
             in
@@ -493,6 +487,13 @@ view2 extraClasses settings model =
                 , title = "Start this task now"
                 , icon = Just "fa fa-play"
                 }
+
+        connectionCfg =
+            { makeOption = \a -> { text = a, additional = "" }
+            , placeholder = "Select connection..."
+            , labelColor = \_ -> \_ -> ""
+            , style = DS.mainStyle
+            }
     in
     div
         [ class "flex flex-col md:relative"
@@ -579,7 +580,7 @@ view2 extraClasses settings model =
                 ]
             , Html.map ConnMsg
                 (Comp.Dropdown.view2
-                    DS.mainStyle
+                    connectionCfg
                     settings
                     model.connectionModel
                 )
@@ -609,7 +610,7 @@ view2 extraClasses settings model =
                 [ text "Tags Include (and)" ]
             , Html.map TagIncMsg
                 (Comp.Dropdown.view2
-                    DS.mainStyle
+                    (Util.Tag.tagSettings DS.mainStyle)
                     settings
                     model.tagInclModel
                 )
@@ -622,7 +623,7 @@ view2 extraClasses settings model =
                 [ text "Tags Exclude (or)" ]
             , Html.map TagExcMsg
                 (Comp.Dropdown.view2
-                    DS.mainStyle
+                    (Util.Tag.tagSettings DS.mainStyle)
                     settings
                     model.tagExclModel
                 )

modules/webapp/src/main/elm/Comp/PersonForm.elm

@@ -49,7 +49,7 @@ emptyModel =
         Comp.FixedDropdown.initMap
             Data.PersonUse.label
             Data.PersonUse.all
-    , orgModel = Comp.Dropdown.orgDropdown
+    , orgModel = Comp.Dropdown.makeSingle
     }
 
 
@@ -242,7 +242,7 @@ view2 mobile settings model =
                 ]
             , Html.map OrgDropdownMsg
                 (Comp.Dropdown.view2
-                    DS.mainStyle
+                    (Comp.Dropdown.orgFormViewSettings DS.mainStyle)
                     settings
                     model.orgModel
                 )

modules/webapp/src/main/elm/Comp/ScanMailboxForm.elm

@@ -191,11 +191,7 @@ init flags =
             Comp.CalEventInput.initDefault
     in
     ( { settings = Api.Model.ScanMailboxSettings.empty
-      , connectionModel =
+      , connectionModel = Comp.Dropdown.makeSingle
-            Comp.Dropdown.makeSingle
-                { makeOption = \a -> { value = a, text = a, additional = "" }
-                , placeholder = "Select connection..."
-                }
       , enabled = False
       , deleteMail = False
       , receivedHours = Nothing
@@ -209,11 +205,7 @@ init flags =
       , formMsg = Nothing
       , loading = 3
       , yesNoDelete = Comp.YesNoDimmer.emptyModel
-      , folderModel =
+      , folderModel = Comp.Dropdown.makeSingle
-            Comp.Dropdown.makeSingle
-                { makeOption = \e -> { value = e.id, text = e.name, additional = "" }
-                , placeholder = ""
-                }
       , allFolders = []
       , itemFolderId = Nothing
       , tagModel = Util.Tag.makeDropdownModel
@@ -370,9 +362,7 @@ update flags msg model =
 
                 cm =
                     Comp.Dropdown.makeSingleList
-                        { makeOption = \a -> { value = a, text = a, additional = "" }
+                        { options = names
-                        , placeholder = "Select Connection..."
-                        , options = names
                         , selected =
                             Util.Maybe.or
                                 [ List.head (Comp.Dropdown.getSelected model.connectionModel)
@@ -522,10 +512,6 @@ update flags msg model =
                     { model
                         | allFolders = fs.items
                         , loading = model.loading - 1
-                        , folderModel =
-                            Comp.Dropdown.setMkOption
-                                (mkFolderOption flags fs.items)
-                                model.folderModel
                     }
 
                 mkIdName fitem =
@@ -729,8 +715,8 @@ isFolderMember model =
     Util.Folder.isFolderMember model.allFolders selected
 
 
-view2 : String -> UiSettings -> Model -> Html Msg
+view2 : Flags -> String -> UiSettings -> Model -> Html Msg
-view2 extraClasses settings model =
+view2 flags extraClasses settings model =
     let
         dimmerSettings =
             Comp.YesNoDimmer.defaultSettings2 "Really delete this scan mailbox task?"
@@ -799,7 +785,7 @@ view2 extraClasses settings model =
         , Comp.Tabs.akkordion
             Comp.Tabs.defaultStyle
             tabActive
-            (formTabs settings model)
+            (formTabs flags settings model)
         , Html.map YesNoDeleteMsg
             (Comp.YesNoDimmer.viewN
                 True
@@ -832,8 +818,8 @@ tabTitle tab =
             "Schedule"
 
 
-formTabs : UiSettings -> Model -> List (Comp.Tabs.Tab Msg)
+formTabs : Flags -> UiSettings -> Model -> List (Comp.Tabs.Tab Msg)
-formTabs settings model =
+formTabs flags settings model =
     [ { title = tabTitle TabGeneral
       , titleRight = []
       , info = Nothing
@@ -857,7 +843,7 @@ formTabs settings model =
     , { title = tabTitle TabMetadata
       , titleRight = []
       , info = Just "Define metadata that should be attached to all items created by this task."
-      , body = viewMetadata2 settings model
+      , body = viewMetadata2 flags settings model
       }
     , { title = tabTitle TabSchedule
       , titleRight = []
@@ -869,6 +855,14 @@ formTabs settings model =
 
 viewGeneral2 : UiSettings -> Model -> List (Html Msg)
 viewGeneral2 settings model =
+    let
+        connectionCfg =
+            { makeOption = \a -> { text = a, additional = "" }
+            , placeholder = "Select connection..."
+            , labelColor = \_ -> \_ -> ""
+            , style = DS.mainStyle
+            }
+    in
     [ MB.viewItem <|
         MB.Checkbox
             { id = "scanmail-enabled"
@@ -899,7 +893,7 @@ viewGeneral2 settings model =
             ]
         , Html.map ConnMsg
             (Comp.Dropdown.view2
-                DS.mainStyle
+                connectionCfg
                 settings
                 model.connectionModel
             )
@@ -1054,8 +1048,16 @@ viewPostProcessing2 model =
     ]
 
 
-viewMetadata2 : UiSettings -> Model -> List (Html Msg)
+viewMetadata2 : Flags -> UiSettings -> Model -> List (Html Msg)
-viewMetadata2 settings model =
+viewMetadata2 flags settings model =
+    let
+        folderCfg =
+            { makeOption = Util.Folder.mkFolderOption flags model.allFolders
+            , placeholder = ""
+            , labelColor = \_ -> \_ -> ""
+            , style = DS.mainStyle
+            }
+    in
     [ div [ class "mb-4" ]
         [ label [ class S.inputLabel ]
             [ text "Item direction"
@@ -1105,7 +1107,7 @@ viewMetadata2 settings model =
             ]
         , Html.map FolderDropdownMsg
             (Comp.Dropdown.view2
-                DS.mainStyle
+                folderCfg
                 settings
                 model.folderModel
             )
@@ -1131,7 +1133,7 @@ disappear then.
             [ text "Tags" ]
         , Html.map TagDropdownMsg
             (Comp.Dropdown.view2
-                DS.mainStyle
+                (Util.Tag.tagSettings DS.mainStyle)
                 settings
                 model.tagModel
             )

modules/webapp/src/main/elm/Comp/ScanMailboxManage.elm

@@ -17,7 +17,6 @@ import Data.Flags exposing (Flags)
 import Data.UiSettings exposing (UiSettings)
 import Html exposing (..)
 import Html.Attributes exposing (..)
-import Html.Events exposing (onClick)
 import Http
 import Styles as S
 import Util.Http
@@ -213,8 +212,8 @@ update flags msg model =
 --- View2
 
 
-view2 : UiSettings -> Model -> Html Msg
+view2 : Flags -> UiSettings -> Model -> Html Msg
-view2 settings model =
+view2 flags settings model =
     div [ class "flex flex-col" ]
         (div
             [ classList
@@ -229,7 +228,7 @@ view2 settings model =
             ]
             :: (case model.detailModel of
                     Just msett ->
-                        viewForm2 settings msett
+                        viewForm2 flags settings msett
 
                     Nothing ->
                         viewList2 model
@@ -237,10 +236,10 @@ view2 settings model =
         )
 
 
-viewForm2 : UiSettings -> Comp.ScanMailboxForm.Model -> List (Html Msg)
+viewForm2 : Flags -> UiSettings -> Comp.ScanMailboxForm.Model -> List (Html Msg)
-viewForm2 settings model =
+viewForm2 flags settings model =
     [ Html.map DetailMsg
-        (Comp.ScanMailboxForm.view2 "" settings model)
+        (Comp.ScanMailboxForm.view2 flags "" settings model)
     ]
 
 

modules/webapp/src/main/elm/Comp/SearchMenu.elm

@@ -95,36 +95,13 @@ init flags =
     , tagSelection = Comp.TagSelect.emptySelection
     , directionModel =
         Comp.Dropdown.makeSingleList
-            { makeOption =
+            { options = Data.Direction.all
-                \entry ->
-                    { value = Data.Direction.toString entry
-                    , text = Data.Direction.toString entry
-                    , additional = ""
-                    }
-            , options = Data.Direction.all
-            , placeholder = "Choose a direction…"
             , selected = Nothing
             }
-    , orgModel =
+    , orgModel = Comp.Dropdown.makeSingle
-        Comp.Dropdown.orgDropdown
+    , corrPersonModel = Comp.Dropdown.makeSingle
-    , corrPersonModel =
+    , concPersonModel = Comp.Dropdown.makeSingle
-        Comp.Dropdown.makeSingle
+    , concEquipmentModel = Comp.Dropdown.makeSingle
-            { makeOption = \e -> { value = e.id, text = e.name, additional = "" }
-            , placeholder = "Choose a person"
-            }
-    , concPersonModel =
-        Comp.Dropdown.makeSingle
-            { makeOption = \e -> { value = e.id, text = e.name, additional = "" }
-            , placeholder = "Choose a person"
-            }
-    , concEquipmentModel =
-        Comp.Dropdown.makeModel
-            { multiple = False
-            , searchable = \n -> n > 0
-            , makeOption = \e -> { value = e.id, text = e.name, additional = "" }
-            , labelColor = \_ -> \_ -> ""
-            , placeholder = "Choose an equipment"
-            }
     , folderList = Comp.FolderSelect.init Nothing []
     , selectedFolder = Nothing
     , inboxCheckbox = False
@@ -1022,6 +999,38 @@ searchTabs ddd flags settings model =
 
         tagSelectWM =
             Comp.TagSelect.makeWorkModel model.tagSelection model.tagSelectModel
+
+        directionCfg =
+            { makeOption =
+                \entry ->
+                    { text = Data.Direction.toString entry
+                    , additional = ""
+                    }
+            , placeholder = "Choose a direction…"
+            , labelColor = \_ -> \_ -> ""
+            , style = DS.sidebarStyle
+            }
+
+        corrPersonCfg =
+            { makeOption = \e -> { text = e.name, additional = "" }
+            , placeholder = "Choose a person"
+            , labelColor = \_ -> \_ -> ""
+            , style = DS.sidebarStyle
+            }
+
+        concPersonCfg =
+            { makeOption = \e -> { text = e.name, additional = "" }
+            , placeholder = "Choose a person"
+            , labelColor = \_ -> \_ -> ""
+            , style = DS.sidebarStyle
+            }
+
+        concEquipCfg =
+            { makeOption = \e -> { text = e.name, additional = "" }
+            , labelColor = \_ -> \_ -> ""
+            , placeholder = "Choose an equipment"
+            , style = DS.sidebarStyle
+            }
     in
     [ { title = "Inbox"
       , info = Nothing
@@ -1129,7 +1138,7 @@ searchTabs ddd flags settings model =
                     [ text "Organization" ]
                 , Html.map OrgMsg
                     (Comp.Dropdown.view2
-                        DS.sidebarStyle
+                        (Comp.Dropdown.orgFormViewSettings DS.sidebarStyle)
                         settings
                         model.orgModel
                     )
@@ -1141,7 +1150,7 @@ searchTabs ddd flags settings model =
                 [ label [ class S.inputLabel ] [ text "Person" ]
                 , Html.map CorrPersonMsg
                     (Comp.Dropdown.view2
-                        DS.sidebarStyle
+                        corrPersonCfg
                         settings
                         model.corrPersonModel
                     )
@@ -1159,7 +1168,7 @@ searchTabs ddd flags settings model =
                 [ label [ class S.inputLabel ] [ text "Person" ]
                 , Html.map ConcPersonMsg
                     (Comp.Dropdown.view2
-                        DS.sidebarStyle
+                        concPersonCfg
                         settings
                         model.concPersonModel
                     )
@@ -1171,7 +1180,7 @@ searchTabs ddd flags settings model =
                 [ label [ class S.inputLabel ] [ text "Equipment" ]
                 , Html.map ConcEquipmentMsg
                     (Comp.Dropdown.view2
-                        DS.sidebarStyle
+                        concEquipCfg
                         settings
                         model.concEquipmentModel
                     )
@@ -1295,7 +1304,7 @@ searchTabs ddd flags settings model =
       , body =
             [ Html.map DirectionMsg
                 (Comp.Dropdown.view2
-                    DS.sidebarStyle
+                    directionCfg
                     settings
                     model.directionModel
                 )

modules/webapp/src/main/elm/Comp/SourceForm.elm

@@ -64,25 +64,14 @@ emptyModel =
             Data.Priority.all
     , priority = Data.Priority.Low
     , enabled = False
-    , folderModel =
+    , folderModel = Comp.Dropdown.makeSingle
-        Comp.Dropdown.makeSingle
-            { makeOption = \e -> { value = e.id, text = e.name, additional = "" }
-            , placeholder = ""
-            }
     , allFolders = []
     , folderId = Nothing
-    , tagModel = Util.Tag.makeDropdownModel2
+    , tagModel = Util.Tag.makeDropdownModel
     , fileFilter = Nothing
     , languageModel =
         Comp.Dropdown.makeSingleList
-            { makeOption =
+            { options = Data.Language.all
-                \a ->
-                    { value = Data.Language.toName a
-                    , text = Data.Language.toName a
-                    , additional = ""
-                    }
-            , placeholder = "Select…"
-            , options = Data.Language.all
             , selected = Nothing
             }
     , language = Nothing
@@ -237,13 +226,7 @@ update flags msg model =
         GetFolderResp (Ok fs) ->
             let
                 model_ =
-                    { model
+                    { model | allFolders = fs.items }
-                        | allFolders = fs.items
-                        , folderModel =
-                            Comp.Dropdown.setMkOption
-                                (mkFolderOption flags fs.items)
-                                model.folderModel
-                    }
 
                 mkIdName fitem =
                     IdName fitem.id fitem.name
@@ -331,13 +314,34 @@ update flags msg model =
 
 
 view2 : Flags -> Texts -> UiSettings -> Model -> Html Msg
-view2 _ texts settings model =
+view2 flags texts settings model =
     let
         priorityItem =
             Comp.FixedDropdown.Item
                 model.priority
                 (Data.Priority.toName model.priority)
                 Nothing
+
+        folderCfg =
+            { makeOption = mkFolderOption flags model.allFolders
+            , placeholder = ""
+            , labelColor = \_ -> \_ -> ""
+            , style = DS.mainStyle
+            }
+
+        tagCfg =
+            Util.Tag.tagSettings DS.mainStyle
+
+        languageCfg =
+            { makeOption =
+                \a ->
+                    { text = Data.Language.toName a
+                    , additional = ""
+                    }
+            , placeholder = "Select…"
+            , labelColor = \_ -> \_ -> ""
+            , style = DS.mainStyle
+            }
     in
     div [ class "flex flex-col" ]
         [ div [ class "mb-4" ]
@@ -424,7 +428,7 @@ view2 _ texts settings model =
                 ]
             , Html.map FolderDropdownMsg
                 (Comp.Dropdown.view2
-                    DS.mainStyle
+                    folderCfg
                     settings
                     model.folderModel
                 )
@@ -446,7 +450,7 @@ view2 _ texts settings model =
                 ]
             , Html.map TagDropdownMsg
                 (Comp.Dropdown.view2
-                    DS.mainStyle
+                    tagCfg
                     settings
                     model.tagModel
                 )
@@ -479,7 +483,7 @@ view2 _ texts settings model =
                 ]
             , Html.map LanguageMsg
                 (Comp.Dropdown.view2
-                    DS.mainStyle
+                    languageCfg
                     settings
                     model.languageModel
                 )

modules/webapp/src/main/elm/Comp/TagForm.elm

@@ -37,9 +37,7 @@ emptyModel categories =
         let
             cm =
                 Comp.Dropdown.makeSingleList
-                    { makeOption = \s -> Comp.Dropdown.mkOption s s
+                    { options = categories
-                    , placeholder = "Select or define category..."
-                    , options = categories
                     , selected = Nothing
                     }
         in
@@ -122,6 +120,14 @@ update _ msg model =
 
 view2 : Model -> Html Msg
 view2 model =
+    let
+        categoryCfg =
+            { makeOption = \s -> Comp.Dropdown.mkOption s
+            , placeholder = "Select or define category..."
+            , labelColor = \_ -> \_ -> ""
+            , style = DS.mainStyle
+            }
+    in
     div
         [ class "flex flex-col" ]
         [ div [ class "mb-4" ]
@@ -155,7 +161,7 @@ view2 model =
                 ]
             , Html.map CatMsg
                 (Comp.Dropdown.viewSingle2
-                    DS.mainStyle
+                    categoryCfg
                     model.catDropdown
                 )
             ]

modules/webapp/src/main/elm/Comp/UserForm.elm

@@ -41,14 +41,7 @@ emptyModel =
     , password = Nothing
     , state =
         Comp.Dropdown.makeSingleList
-            { makeOption =
+            { options = Data.UserState.all
-                \s ->
-                    { value = Data.UserState.toString s
-                    , text = Data.UserState.toString s
-                    , additional = ""
-                    }
-            , placeholder = ""
-            , options = Data.UserState.all
             , selected = List.head Data.UserState.all
             }
     }
@@ -103,14 +96,7 @@ update _ msg model =
             let
                 state =
                     Comp.Dropdown.makeSingleList
-                        { makeOption =
+                        { options = Data.UserState.all
-                            \s ->
-                                { value = Data.UserState.toString s
-                                , text = Data.UserState.toString s
-                                , additional = ""
-                                }
-                        , placeholder = ""
-                        , options = Data.UserState.all
                         , selected =
                             Data.UserState.fromString t.state
                                 |> Maybe.map (\u -> List.filter ((==) u) Data.UserState.all)
@@ -169,6 +155,18 @@ update _ msg model =
 
 view2 : Texts -> UiSettings -> Model -> Html Msg
 view2 texts settings model =
+    let
+        stateCfg =
+            { makeOption =
+                \s ->
+                    { text = Data.UserState.toString s
+                    , additional = ""
+                    }
+            , placeholder = ""
+            , style = DS.mainStyle
+            , labelColor = \_ -> \_ -> ""
+            }
+    in
     div [ class "flex flex-col" ]
         [ div
             [ class "mb-4" ]
@@ -205,7 +203,7 @@ view2 texts settings model =
                 ]
             , Html.map StateMsg
                 (Comp.Dropdown.view2
-                    DS.mainStyle
+                    stateCfg
                     settings
                     model.state
                 )

modules/webapp/src/main/elm/Data/UiSettings.elm

@@ -7,7 +7,6 @@ module Data.UiSettings exposing
     , cardPreviewSize2
     , catColor
     , catColorFg2
-    , catColorString
     , catColorString2
     , defaults
     , fieldHidden
@@ -18,7 +17,6 @@ module Data.UiSettings exposing
     , posToString
     , tagColor
     , tagColorFg2
-    , tagColorString
     , tagColorString2
     , toStoredUiSettings
     )
@@ -276,13 +274,6 @@ tagColor tag settings =
     Maybe.andThen (catColor settings) tag.category
 
 
-catColorString : UiSettings -> String -> String
-catColorString settings name =
-    catColor settings name
-        |> Maybe.map Data.Color.toString
-        |> Maybe.withDefault ""
-
-
 catColorString2 : UiSettings -> String -> String
 catColorString2 settings name =
     catColor settings name
@@ -297,13 +288,6 @@ catColorFg2 settings name =
         |> Maybe.withDefault ""
 
 
-tagColorString : Tag -> UiSettings -> String
-tagColorString tag settings =
-    tagColor tag settings
-        |> Maybe.map Data.Color.toString
-        |> Maybe.withDefault ""
-
-
 tagColorString2 : Tag -> UiSettings -> String
 tagColorString2 tag settings =
     tagColor tag settings

modules/webapp/src/main/elm/Page/Home/SideMenu.elm

@@ -47,7 +47,7 @@ view flags settings model =
                 SelectView svm ->
                     case svm.action of
                         EditSelected ->
-                            viewEditMenu svm settings
+                            viewEditMenu flags svm settings
 
                         _ ->
                             viewSearch flags settings model
@@ -83,8 +83,8 @@ viewSearch flags settings model =
     ]
 
 
-viewEditMenu : SelectViewModel -> UiSettings -> List (Html Msg)
+viewEditMenu : Flags -> SelectViewModel -> UiSettings -> List (Html Msg)
-viewEditMenu svm settings =
+viewEditMenu flags svm settings =
     let
         cfg_ =
             Comp.ItemDetail.MultiEditMenu.defaultViewConfig
@@ -127,5 +127,5 @@ viewEditMenu svm settings =
         , rootClasses = "mt-2 text-sm"
         }
     , Html.map EditMenuMsg
-        (Comp.ItemDetail.MultiEditMenu.view2 cfg settings svm.editModel)
+        (Comp.ItemDetail.MultiEditMenu.view2 flags cfg settings svm.editModel)
     ]

modules/webapp/src/main/elm/Page/ItemDetail/View2.elm

@@ -17,7 +17,7 @@ import Styles as S
 
 
 viewSidebar : Texts -> Bool -> Flags -> UiSettings -> Model -> Html Msg
-viewSidebar texts visible _ settings model =
+viewSidebar texts visible flags settings model =
     div
         [ id "sidebar"
         , class S.sidebar
@@ -49,7 +49,7 @@ viewSidebar texts visible _ settings model =
             , rootClasses = "text-sm mb-3 "
             }
         , Html.map ItemDetailMsg
-            (Comp.ItemDetail.EditForm.view2 settings model.detail)
+            (Comp.ItemDetail.EditForm.view2 flags settings model.detail)
         ]
 
 

modules/webapp/src/main/elm/Page/UserSettings/View2.elm

@@ -119,7 +119,7 @@ viewContent flags settings model =
                 viewImapSettings settings model
 
             Just ScanMailboxTab ->
-                viewScanMailboxManage settings model
+                viewScanMailboxManage flags settings model
 
             Just UiSettingsTab ->
                 viewUiSettings flags settings model
@@ -247,8 +247,8 @@ viewNotificationManage settings model =
     ]
 
 
-viewScanMailboxManage : UiSettings -> Model -> List (Html Msg)
+viewScanMailboxManage : Flags -> UiSettings -> Model -> List (Html Msg)
-viewScanMailboxManage settings model =
+viewScanMailboxManage flags settings model =
     [ h2
         [ class S.header1
         , class "inline-flex items-center"
@@ -276,6 +276,7 @@ viewScanMailboxManage settings model =
         ]
     , Html.map ScanMailboxMsg
         (Comp.ScanMailboxManage.view2
+            flags
             settings
             model.scanMailboxModel
         )

modules/webapp/src/main/elm/Util/Folder.elm

@@ -37,7 +37,7 @@ mkFolderOption flags allFolders idref =
             else
                 ""
     in
-    { value = idref.id, text = idref.name, additional = adds }
+    { text = idref.name, additional = adds }
 
 
 isFolderMember : List FolderItem -> Maybe String -> Bool

modules/webapp/src/main/elm/Util/Person.elm

@@ -0,0 +1,20 @@
+module Util.Person exposing (mkPersonOption)
+
+import Api.Model.IdName exposing (IdName)
+import Api.Model.Person exposing (Person)
+import Comp.Dropdown
+import Dict exposing (Dict)
+import Util.String
+
+
+mkPersonOption : IdName -> Dict String Person -> Comp.Dropdown.Option
+mkPersonOption idref personDict =
+    let
+        org =
+            Dict.get idref.id personDict
+                |> Maybe.andThen .organization
+                |> Maybe.map .name
+                |> Maybe.map (Util.String.ellipsis 15)
+                |> Maybe.withDefault ""
+    in
+    Comp.Dropdown.Option idref.name org

modules/webapp/src/main/elm/Util/Tag.elm

@@ -1,12 +1,14 @@
 module Util.Tag exposing
-    ( getCategories
+    ( catSettings
+    , getCategories
     , makeCatDropdownModel
     , makeDropdownModel
-    , makeDropdownModel2
+    , tagSettings
     )
 
 import Api.Model.Tag exposing (Tag)
 import Comp.Dropdown
+import Data.DropdownStyle as DS
 import Data.UiSettings
 import Util.List
 
@@ -16,29 +18,18 @@ makeDropdownModel =
     Comp.Dropdown.makeModel
         { multiple = True
         , searchable = \n -> n > 0
-        , makeOption = \tag -> { value = tag.id, text = tag.name, additional = "" }
-        , labelColor =
-            \tag ->
-                \settings ->
-                    "basic " ++ Data.UiSettings.tagColorString tag settings
-        , placeholder = "Choose a tag…"
         }
 
 
-makeDropdownModel2 : Comp.Dropdown.Model Tag
+tagSettings : DS.DropdownStyle -> Comp.Dropdown.ViewSettings Tag
-makeDropdownModel2 =
+tagSettings ds =
-    Comp.Dropdown.makeModel
+    { makeOption = \tag -> { text = tag.name, additional = "" }
-        { multiple = True
-        , searchable = \n -> n > 0
-        , makeOption = \tag -> { value = tag.id, text = tag.name, additional = "" }
     , labelColor =
         \tag ->
             \settings ->
                 Data.UiSettings.tagColorString2 tag settings
-                        ++ -- legacy colors
-                           " basic "
-                        ++ Data.UiSettings.tagColorString tag settings
     , placeholder = "Choose a tag…"
+    , style = ds
     }
 
 
@@ -47,9 +38,15 @@ makeCatDropdownModel =
     Comp.Dropdown.makeModel
         { multiple = True
         , searchable = \n -> n > 0
-        , makeOption = \cat -> { value = cat, text = cat, additional = "" }
+        }
+
+
+catSettings : DS.DropdownStyle -> Comp.Dropdown.ViewSettings String
+catSettings ds =
+    { makeOption = \cat -> { text = cat, additional = "" }
     , labelColor = \_ -> \_ -> ""
     , placeholder = "Choose a tag category…"
+    , style = ds
     }