Externalize strings in UiSettings page

modules/webapp/src/main/elm/App/View2.elm

@@ -130,7 +130,7 @@ mainContent model =
                 viewManageData model
 
             UserSettingPage ->
-                viewUserSettings model
+                viewUserSettings texts model
 
             QueuePage ->
                 viewQueue texts model
@@ -440,12 +440,21 @@ viewManageData model =
     ]
 
 
-viewUserSettings : Model -> List (Html Msg)
+viewUserSettings : Messages -> Model -> List (Html Msg)
-viewUserSettings model =
+viewUserSettings texts model =
     [ Html.map UserSettingsMsg
-        (UserSettings.viewSidebar model.sidebarVisible model.flags model.uiSettings model.userSettingsModel)
+        (UserSettings.viewSidebar texts.userSettings
+            model.sidebarVisible
+            model.flags
+            model.uiSettings
+            model.userSettingsModel
+        )
     , Html.map UserSettingsMsg
-        (UserSettings.viewContent model.flags model.uiSettings model.userSettingsModel)
+        (UserSettings.viewContent texts.userSettings
+            model.flags
+            model.uiSettings
+            model.userSettingsModel
+        )
     ]
 
 

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

@@ -16,6 +16,7 @@ import Html exposing (..)
 import Html.Attributes exposing (..)
 import Html.Events exposing (onClick)
 import Http
+import Messages.ChangePasswordFormComp exposing (Texts)
 import Styles as S
 import Util.Http
 
@@ -179,8 +180,8 @@ update flags msg model =
 --- View2
 
 
-view2 : Model -> Html Msg
+view2 : Texts -> Model -> Html Msg
-view2 model =
+view2 texts model =
     let
         currentEmpty =
             model.current == Nothing
@@ -195,11 +196,12 @@ view2 model =
         [ class "flex flex-col space-y-4 relative" ]
         [ div []
             [ label [ class S.inputLabel ]
-                [ text "Current Password"
+                [ text texts.currentPassword
                 , B.inputRequired
                 ]
             , Html.map SetCurrent
                 (Comp.PasswordInput.view2
+                    { placeholder = texts.currentPasswordPlaceholder }
                     model.current
                     currentEmpty
                     model.currentModel
@@ -209,11 +211,12 @@ view2 model =
             [ label
                 [ class S.inputLabel
                 ]
-                [ text "New Password"
+                [ text texts.newPassword
                 , B.inputRequired
                 ]
             , Html.map SetNew1
                 (Comp.PasswordInput.view2
+                    { placeholder = texts.newPasswordPlaceholder }
                     model.newPass1
                     pass1Empty
                     model.pass1Model
@@ -221,11 +224,12 @@ view2 model =
             ]
         , div []
             [ label [ class S.inputLabel ]
-                [ text "New Password (repeat)"
+                [ text texts.repeatPassword
                 , B.inputRequired
                 ]
             , Html.map SetNew2
                 (Comp.PasswordInput.view2
+                    { placeholder = texts.repeatPasswordPlaceholder }
                     model.newPass2
                     pass2Empty
                     model.pass2Model

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

@@ -250,6 +250,7 @@ view2 settings model =
                 ]
             , Html.map PassMsg
                 (Comp.PasswordInput.view2
+                    { placeholder = "Password" }
                     model.password
                     False
                     model.passField

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

@@ -1,6 +1,7 @@
 module Comp.FieldListSelect exposing
     ( Model
     , Msg
+    , ViewSettings
     , update
     , view2
     )
@@ -49,17 +50,23 @@ addField selected field =
 --- View2
 
 
-view2 : String -> Model -> Html Msg
+type alias ViewSettings =
-view2 classes selected =
+    { fieldLabel : Field -> String
+    , classes : String
+    }
+
+
+view2 : ViewSettings -> Model -> Html Msg
+view2 cfg selected =
     div
         [ class "flex flex-col space-y-4 md:space-y-2"
-        , class classes
+        , class cfg.classes
         ]
-        (List.map (fieldCheckbox2 selected) Data.Fields.all)
+        (List.map (fieldCheckbox2 cfg selected) Data.Fields.all)
 
 
-fieldCheckbox2 : Model -> Field -> Html Msg
+fieldCheckbox2 : ViewSettings -> Model -> Field -> Html Msg
-fieldCheckbox2 selected field =
+fieldCheckbox2 cfg selected field =
     let
         isChecked =
             List.member field selected
@@ -69,5 +76,5 @@ fieldCheckbox2 selected field =
             { id = "field-toggle-" ++ Data.Fields.toString field
             , value = isChecked
             , tagger = \_ -> Toggle field
-            , label = Data.Fields.label field
+            , label = cfg.fieldLabel field
             }

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

@@ -238,6 +238,7 @@ view2 settings model =
                 [ text "IMAP Password" ]
             , Html.map PassMsg
                 (Comp.PasswordInput.view2
+                    { placeholder = "Password" }
                     model.password
                     False
                     model.passField

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

@@ -49,8 +49,13 @@ update msg model =
 --- View2
 
 
-view2 : Maybe String -> Bool -> Model -> Html Msg
+type alias ViewSettings =
-view2 pw isError model =
+    { placeholder : String
+    }
+
+
+view2 : ViewSettings -> Maybe String -> Bool -> Model -> Html Msg
+view2 cfg pw isError model =
     div [ class "relative" ]
         [ div [ class S.inputIcon ]
             [ i
@@ -81,7 +86,7 @@ view2 pw isError model =
 
                 else
                     ""
-            , placeholder "Password"
+            , placeholder cfg.placeholder
             ]
             []
         , a

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

@@ -29,6 +29,7 @@ import Html.Events exposing (onClick, onInput)
 import Http
 import Markdown
 import Messages
+import Messages.UiSettingsFormComp exposing (Texts)
 import Set exposing (Set)
 import Styles as S
 import UiLanguage exposing (UiLanguage)
@@ -52,7 +53,6 @@ type alias Model =
     , searchMenuTagCatCountModel : Comp.IntField.Model
     , formFields : List Field
     , itemDetailShortcuts : Bool
-    , editMenuVisible : Bool
     , cardPreviewSize : BasicSize
     , cardTitlePattern : PatternModel
     , cardSubtitlePattern : PatternModel
@@ -146,7 +146,6 @@ init flags settings =
                 "Number of categories in search menu"
       , formFields = settings.formFields
       , itemDetailShortcuts = settings.itemDetailShortcuts
-      , editMenuVisible = settings.editMenuVisible
       , cardPreviewSize = settings.cardPreviewSize
       , cardTitlePattern = initPatternModel settings.cardTitleTemplate
       , cardSubtitlePattern = initPatternModel settings.cardSubtitleTemplate
@@ -174,7 +173,6 @@ type Msg
     | SearchMenuTagCatMsg Comp.IntField.Msg
     | FieldListMsg Comp.FieldListSelect.Msg
     | ToggleItemDetailShortcuts
-    | ToggleEditMenuVisible
     | CardPreviewSizeMsg Comp.BasicSizeField.Msg
     | SetCardTitlePattern String
     | SetCardSubtitlePattern String
@@ -340,15 +338,6 @@ update sett msg model =
             , Just { sett | itemDetailShortcuts = flag }
             )
 
-        ToggleEditMenuVisible ->
-            let
-                flag =
-                    not model.editMenuVisible
-            in
-            ( { model | editMenuVisible = flag }
-            , Just { sett | editMenuVisible = flag }
-            )
-
         CardPreviewSizeMsg lm ->
             let
                 next =
@@ -476,22 +465,22 @@ update sett msg model =
 --- View2
 
 
-tagColorViewOpts2 : Comp.ColorTagger.ViewOpts
+tagColorViewOpts2 : Texts -> Comp.ColorTagger.ViewOpts
-tagColorViewOpts2 =
+tagColorViewOpts2 texts =
     { renderItem =
-        \( k, v ) ->
+        \( _, v ) ->
             span [ class (" label " ++ Data.Color.toString2 v) ]
-                [ text k ]
+                [ text (texts.colorLabel v) ]
-    , label = "Choose color for tag categories"
+    , label = texts.chooseTagColorLabel
-    , description = Just "Tags can be represented differently based on their category."
+    , description = Just texts.tagColorDescription
     }
 
 
-view2 : Flags -> UiSettings -> Model -> Html Msg
+view2 : Texts -> Flags -> UiSettings -> Model -> Html Msg
-view2 flags settings model =
+view2 texts flags settings model =
     let
         state tab =
-            if Set.member tab.title model.openTabs then
+            if Set.member tab.name model.openTabs then
                 Comp.Tabs.Open
 
             else
@@ -501,12 +490,12 @@ view2 flags settings model =
         [ Comp.Tabs.akkordion
             Comp.Tabs.defaultStyle
             (\t -> ( state t, ToggleAkkordionTab t.title ))
-            (settingFormTabs flags settings model)
+            (settingFormTabs texts flags settings model)
         ]
 
 
-settingFormTabs : Flags -> UiSettings -> Model -> List (Comp.Tabs.Tab Msg)
+settingFormTabs : Texts -> Flags -> UiSettings -> Model -> List (Comp.Tabs.Tab Msg)
-settingFormTabs flags _ model =
+settingFormTabs texts flags _ model =
     let
         langCfg =
             { display = \lang -> Messages.get lang |> .label
@@ -514,7 +503,7 @@ settingFormTabs flags _ model =
             , style = DS.mainStyle
             }
     in
-    [ { title = "General"
+    [ { title = texts.general
       , titleRight = []
       , info = Nothing
       , body =
@@ -522,13 +511,13 @@ settingFormTabs flags _ model =
                 [ MB.viewItem <|
                     MB.Checkbox
                         { id = "uisetting-sidemenu-visible"
-                        , label = "Show side menu by default"
+                        , label = texts.showSideMenuByDefault
                         , tagger = \_ -> ToggleSideMenuVisible
                         , value = model.sideMenuVisible
                         }
                 ]
             , div [ class "mb-4" ]
-                [ label [ class S.inputLabel ] [ text "UI Language" ]
+                [ label [ class S.inputLabel ] [ text texts.uiLanguage ]
                 , Html.map UiLangMsg
                     (Comp.FixedDropdown.viewStyled2
                         langCfg
@@ -539,16 +528,13 @@ settingFormTabs flags _ model =
                 ]
             ]
       }
-    , { title = "Item Search"
+    , { title = texts.itemSearch
       , titleRight = []
       , info = Nothing
       , body =
             [ Html.map SearchPageSizeMsg
                 (Comp.IntField.viewWithInfo2
-                    ("Maximum results in one page when searching items. At most "
+                    (texts.maxResultsPerPageInfo flags.config.maxPageSize)
-                        ++ String.fromInt flags.config.maxPageSize
-                        ++ "."
-                    )
                     model.itemSearchPageSize
                     "mb-4"
                     model.searchPageSizeModel
@@ -559,7 +545,7 @@ settingFormTabs flags _ model =
                         { id = "uisetting-searchstats-visible"
                         , value = model.searchStatsVisible
                         , tagger = \_ -> ToggleSearchStatsVisible
-                        , label = "Show basic search statistics by default"
+                        , label = texts.showBasicSearchStatsByDefault
                         }
                 ]
             , div [ class "mb-4" ]
@@ -568,21 +554,18 @@ settingFormTabs flags _ model =
                         { id = "uisetting-powersearch-enabled"
                         , value = model.powerSearchEnabled
                         , tagger = \_ -> TogglePowerSearch
-                        , label = "Enable power-user search bar"
+                        , label = texts.enablePowerSearch
                         }
                 ]
             ]
       }
-    , { title = "Item Cards"
+    , { title = texts.itemCards
       , titleRight = []
       , info = Nothing
       , body =
             [ Html.map NoteLengthMsg
                 (Comp.IntField.viewWithInfo2
-                    ("Maximum size of the item notes to display in card view. Between 0 - "
+                    (texts.maxNoteSizeInfo flags.config.maxNoteLength)
-                        ++ String.fromInt flags.config.maxNoteLength
-                        ++ "."
-                    )
                     model.itemSearchNoteLength
                     "mb-4"
                     model.searchNoteLengthModel
@@ -590,16 +573,16 @@ settingFormTabs flags _ model =
             , Html.map CardPreviewSizeMsg
                 (Comp.BasicSizeField.view2
                     "mb-4"
-                    "Size of item preview"
+                    texts.sizeOfItemPreview
                     model.cardPreviewSize
                 )
             , div [ class "mb-4" ]
                 [ label [ class S.inputLabel ]
-                    [ text "Card Title Pattern"
+                    [ text texts.cardTitlePattern
                     , a
                         [ class "float-right"
                         , class S.link
-                        , title "Toggle pattern help text"
+                        , title texts.togglePatternHelpText
                         , href "#"
                         , onClick TogglePatternHelpMsg
                         ]
@@ -616,11 +599,11 @@ settingFormTabs flags _ model =
                 ]
             , div [ class "mb-4" ]
                 [ label [ class S.inputLabel ]
-                    [ text "Card Subtitle Pattern"
+                    [ text texts.cardSubtitlePattern
                     , a
                         [ class "float-right"
                         , class S.link
-                        , title "Toggle pattern help text"
+                        , title texts.togglePatternHelpText
                         , href "#"
                         , onClick TogglePatternHelpMsg
                         ]
@@ -644,34 +627,34 @@ settingFormTabs flags _ model =
                 IT.helpMessage
             ]
       }
-    , { title = "Search Menu"
+    , { title = texts.searchMenu
       , titleRight = []
       , info = Nothing
       , body =
             [ Html.map SearchMenuTagMsg
                 (Comp.IntField.viewWithInfo2
-                    "How many tags to display in search menu at once. Others can be expanded. Use 0 to always show all."
+                    texts.searchMenuTagCountInfo
                     model.searchMenuTagCount
                     "mb-4"
                     model.searchMenuTagCountModel
                 )
             , Html.map SearchMenuTagCatMsg
                 (Comp.IntField.viewWithInfo2
-                    "How many categories to display in search menu at once. Others can be expanded. Use 0 to always show all."
+                    texts.searchMenuCatCountInfo
                     model.searchMenuTagCatCount
                     "mb-4"
                     model.searchMenuTagCatCountModel
                 )
             , Html.map SearchMenuFolderMsg
                 (Comp.IntField.viewWithInfo2
-                    "How many folders to display in search menu at once. Other folders can be expanded. Use 0 to always show all."
+                    texts.searchMenuFolderCountInfo
                     model.searchMenuFolderCount
                     "mb-4"
                     model.searchMenuFolderCountModel
                 )
             ]
       }
-    , { title = "Item Detail"
+    , { title = texts.itemDetail
       , titleRight = []
       , info = Nothing
       , body =
@@ -679,7 +662,7 @@ settingFormTabs flags _ model =
                 [ MB.viewItem <|
                     MB.Checkbox
                         { tagger = \_ -> TogglePdfPreview
-                        , label = "Browser-native PDF preview"
+                        , label = texts.browserNativePdfView
                         , value = model.nativePdfPreview
                         , id = "uisetting-pdfpreview-toggle"
                         }
@@ -688,44 +671,37 @@ settingFormTabs flags _ model =
                 [ MB.viewItem <|
                     MB.Checkbox
                         { tagger = \_ -> ToggleItemDetailShortcuts
-                        , label = "Use keyboard shortcuts for navigation and confirm/unconfirm with open edit menu."
+                        , label = texts.keyboardShortcutLabel
                         , value = model.itemDetailShortcuts
                         , id = "uisetting-itemdetailshortcuts-toggle"
                         }
                 ]
-            , div [ class "mb-4 hidden" ]
-                [ MB.viewItem <|
-                    MB.Checkbox
-                        { id = "uisetting-editmenu-visible"
-                        , value = model.editMenuVisible
-                        , tagger = \_ -> ToggleEditMenuVisible
-                        , label = "Show edit side menu by default"
-                        }
-                ]
             ]
       }
-    , { title = "Tag Category Colors"
+    , { title = texts.tagCategoryColors
       , titleRight = []
       , info = Nothing
       , body =
             [ Html.map TagColorMsg
                 (Comp.ColorTagger.view2
                     model.tagColors
-                    tagColorViewOpts2
+                    (tagColorViewOpts2 texts)
                     model.tagColorModel
                 )
             ]
       }
-    , { title = "Fields"
+    , { title = texts.fields
       , titleRight = []
       , info = Nothing
       , body =
             [ span [ class "opacity-50 text-sm" ]
-                [ text "Choose which fields to display in search and edit menus."
+                [ text texts.fieldsInfo
                 ]
             , Html.map FieldListMsg
                 (Comp.FieldListSelect.view2
-                    "px-2"
+                    { classes = "px-2"
+                    , fieldLabel = texts.fieldLabel
+                    }
                     model.formFields
                 )
             ]

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

@@ -14,6 +14,7 @@ import Data.UiSettings exposing (UiSettings)
 import Html exposing (..)
 import Html.Attributes exposing (..)
 import Html.Events exposing (onClick)
+import Messages.UiSettingsManageComp exposing (Texts)
 import Ports
 import Styles as S
 
@@ -125,15 +126,15 @@ isSuccess model =
     Maybe.map .success model.message == Just True
 
 
-view2 : Flags -> UiSettings -> String -> Model -> Html Msg
+view2 : Texts -> Flags -> UiSettings -> String -> Model -> Html Msg
-view2 flags settings classes model =
+view2 texts flags settings classes model =
     div [ class classes ]
         [ MB.view
             { start =
                 [ MB.PrimaryButton
                     { tagger = Submit
-                    , label = "Submit"
+                    , label = texts.basics.submit
-                    , title = "Save settings"
+                    , title = texts.saveSettings
                     , icon = Just "fa fa-save"
                     }
                 ]
@@ -153,6 +154,7 @@ view2 flags settings classes model =
             ]
         , Html.map UiSettingsFormMsg
             (Comp.UiSettingsForm.view2
+                texts.uiSettingsForm
                 flags
                 settings
                 model.formModel

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

@@ -3,7 +3,6 @@ module Data.Fields exposing
     , all
     , fromList
     , fromString
-    , label
     , sort
     , toString
     )
@@ -130,46 +129,6 @@ toString field =
             "sourcename"
 
 
-label : Field -> String
-label field =
-    case field of
-        Tag ->
-            "Tag"
-
-        Folder ->
-            "Folder"
-
-        CorrOrg ->
-            "Correspondent Organization"
-
-        CorrPerson ->
-            "Correspondent Person"
-
-        ConcPerson ->
-            "Concerning Person"
-
-        ConcEquip ->
-            "Concerned Equipment"
-
-        Date ->
-            "Date"
-
-        DueDate ->
-            "Due Date"
-
-        Direction ->
-            "Direction"
-
-        PreviewImage ->
-            "Preview Image"
-
-        CustomFields ->
-            "Custom Fields"
-
-        SourceName ->
-            "Item Source"
-
-
 fromList : List String -> List Field
 fromList strings =
     List.filterMap fromString strings

modules/webapp/src/main/elm/Messages.elm

@@ -13,6 +13,7 @@ import Messages.NewInvitePage
 import Messages.QueuePage
 import Messages.RegisterPage
 import Messages.UploadPage
+import Messages.UserSettingsPage
 import UiLanguage exposing (UiLanguage(..))
 
 
@@ -31,6 +32,7 @@ type alias Messages =
     , upload : Messages.UploadPage.Texts
     , itemDetail : Messages.ItemDetailPage.Texts
     , queue : Messages.QueuePage.Texts
+    , userSettings : Messages.UserSettingsPage.Texts
     }
 
 
@@ -91,6 +93,7 @@ gb =
     , upload = Messages.UploadPage.gb
     , itemDetail = Messages.ItemDetailPage.gb
     , queue = Messages.QueuePage.gb
+    , userSettings = Messages.UserSettingsPage.gb
     }
 
 
@@ -108,4 +111,5 @@ de =
     , upload = Messages.UploadPage.de
     , itemDetail = Messages.ItemDetailPage.de
     , queue = Messages.QueuePage.de
+    , userSettings = Messages.UserSettingsPage.de
     }

modules/webapp/src/main/elm/Messages/ChangePasswordFormComp.elm

@@ -0,0 +1,22 @@
+module Messages.ChangePasswordFormComp exposing (..)
+
+
+type alias Texts =
+    { currentPassword : String
+    , newPassword : String
+    , repeatPassword : String
+    , currentPasswordPlaceholder : String
+    , newPasswordPlaceholder : String
+    , repeatPasswordPlaceholder : String
+    }
+
+
+gb : Texts
+gb =
+    { currentPassword = "Current Password"
+    , newPassword = "New Password"
+    , repeatPassword = "New Password (repeat)"
+    , currentPasswordPlaceholder = "Password"
+    , newPasswordPlaceholder = "Password"
+    , repeatPasswordPlaceholder = "Password"
+    }

modules/webapp/src/main/elm/Messages/ColorData.elm

@@ -0,0 +1,46 @@
+module Messages.ColorData exposing (..)
+
+import Data.Color exposing (Color(..))
+
+
+gb : Color -> String
+gb color =
+    case color of
+        Red ->
+            "Rot"
+
+        Orange ->
+            "Orange"
+
+        Yellow ->
+            "Yellow"
+
+        Olive ->
+            "Olive"
+
+        Green ->
+            "Green"
+
+        Teal ->
+            "Teal"
+
+        Blue ->
+            "Blue"
+
+        Violet ->
+            "Violet"
+
+        Purple ->
+            "Purple"
+
+        Pink ->
+            "Pink"
+
+        Brown ->
+            "Brown"
+
+        Grey ->
+            "Grey"
+
+        Black ->
+            "Black"

modules/webapp/src/main/elm/Messages/FieldsData.elm

@@ -0,0 +1,43 @@
+module Messages.FieldsData exposing (..)
+
+import Data.Fields exposing (Field(..))
+
+
+gb : Field -> String
+gb field =
+    case field of
+        Tag ->
+            "Tag"
+
+        Folder ->
+            "Folder"
+
+        CorrOrg ->
+            "Correspondent Organization"
+
+        CorrPerson ->
+            "Correspondent Person"
+
+        ConcPerson ->
+            "Concerning Person"
+
+        ConcEquip ->
+            "Concerned Equipment"
+
+        Date ->
+            "Date"
+
+        DueDate ->
+            "Due Date"
+
+        Direction ->
+            "Direction"
+
+        PreviewImage ->
+            "Preview Image"
+
+        CustomFields ->
+            "Custom Fields"
+
+        SourceName ->
+            "Item Source"

modules/webapp/src/main/elm/Messages/UiSettingsFormComp.elm

@@ -0,0 +1,77 @@
+module Messages.UiSettingsFormComp exposing (..)
+
+import Data.Color exposing (Color)
+import Data.Fields exposing (Field)
+import Messages.ColorData
+import Messages.FieldsData
+
+
+type alias Texts =
+    { general : String
+    , showSideMenuByDefault : String
+    , uiLanguage : String
+    , itemSearch : String
+    , maxResultsPerPageInfo : Int -> String
+    , showBasicSearchStatsByDefault : String
+    , enablePowerSearch : String
+    , itemCards : String
+    , maxNoteSizeInfo : Int -> String
+    , sizeOfItemPreview : String
+    , cardTitlePattern : String
+    , togglePatternHelpText : String
+    , cardSubtitlePattern : String
+    , searchMenu : String
+    , searchMenuTagCountInfo : String
+    , searchMenuCatCountInfo : String
+    , searchMenuFolderCountInfo : String
+    , itemDetail : String
+    , browserNativePdfView : String
+    , keyboardShortcutLabel : String
+    , tagCategoryColors : String
+    , colorLabel : Color -> String
+    , chooseTagColorLabel : String
+    , tagColorDescription : String
+    , fields : String
+    , fieldsInfo : String
+    , fieldLabel : Field -> String
+    }
+
+
+gb : Texts
+gb =
+    { general = "General"
+    , showSideMenuByDefault = "Show side menu by default"
+    , uiLanguage = "UI Language"
+    , itemSearch = "Item Search"
+    , maxResultsPerPageInfo =
+        \max ->
+            "Maximum results in one page when searching items. At most "
+                ++ String.fromInt max
+                ++ "."
+    , showBasicSearchStatsByDefault = "Show basic search statistics by default"
+    , enablePowerSearch = "Enable power-user search bar"
+    , itemCards = "Item Cards"
+    , maxNoteSizeInfo =
+        \max ->
+            "Maximum size of the item notes to display in card view. Between 0 - "
+                ++ String.fromInt max
+                ++ "."
+    , sizeOfItemPreview = "Size of item preview"
+    , cardTitlePattern = "Card Title Pattern"
+    , togglePatternHelpText = "Toggle pattern help text"
+    , cardSubtitlePattern = "Card Subtitle Pattern"
+    , searchMenu = "Search Menu"
+    , searchMenuTagCountInfo = "How many tags to display in search menu at once. Others can be expanded. Use 0 to always show all."
+    , searchMenuCatCountInfo = "How many categories to display in search menu at once. Others can be expanded. Use 0 to always show all."
+    , searchMenuFolderCountInfo = "How many folders to display in search menu at once. Other folders can be expanded. Use 0 to always show all."
+    , itemDetail = "Item Detail"
+    , browserNativePdfView = "Browser-native PDF preview"
+    , keyboardShortcutLabel = "Use keyboard shortcuts for navigation and confirm/unconfirm with open edit menu."
+    , tagCategoryColors = "Tag Category Colors"
+    , colorLabel = Messages.ColorData.gb
+    , chooseTagColorLabel = "Choose color for tag categories"
+    , tagColorDescription = "Tags can be represented differently based on their category."
+    , fields = "Fields"
+    , fieldsInfo = "Choose which fields to display in search and edit menus."
+    , fieldLabel = Messages.FieldsData.gb
+    }

modules/webapp/src/main/elm/Messages/UiSettingsManageComp.elm

@@ -0,0 +1,19 @@
+module Messages.UiSettingsManageComp exposing (..)
+
+import Messages.Basics
+import Messages.UiSettingsFormComp
+
+
+type alias Texts =
+    { basics : Messages.Basics.Texts
+    , uiSettingsForm : Messages.UiSettingsFormComp.Texts
+    , saveSettings : String
+    }
+
+
+gb : Texts
+gb =
+    { basics = Messages.Basics.gb
+    , uiSettingsForm = Messages.UiSettingsFormComp.gb
+    , saveSettings = "Save settings"
+    }

modules/webapp/src/main/elm/Messages/UserSettingsPage.elm

@@ -0,0 +1,40 @@
+module Messages.UserSettingsPage exposing (..)
+
+import Messages.ChangePasswordFormComp
+import Messages.UiSettingsManageComp
+
+
+type alias Texts =
+    { changePasswordForm : Messages.ChangePasswordFormComp.Texts
+    , uiSettingsManage : Messages.UiSettingsManageComp.Texts
+    , userSettings : String
+    , uiSettings : String
+    , notifications : String
+    , scanMailbox : String
+    , emailSettingSmtp : String
+    , emailSettingImap : String
+    , changePassword : String
+    , uiSettingsInfo : String
+    }
+
+
+gb : Texts
+gb =
+    { changePasswordForm = Messages.ChangePasswordFormComp.gb
+    , uiSettingsManage = Messages.UiSettingsManageComp.gb
+    , userSettings = "User Settings"
+    , uiSettings = "UI Settings"
+    , notifications = "Notifications"
+    , scanMailbox = "Scan Mailbox"
+    , emailSettingSmtp = "E-Mail Settings (SMTP)"
+    , emailSettingImap = "E-Mail Settings (IMAP)"
+    , changePassword = "Change Password"
+    , uiSettingsInfo =
+        "These settings only affect the web ui. They are stored in the browser, "
+            ++ "so they are separated between browsers and devices."
+    }
+
+
+de : Texts
+de =
+    gb

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

@@ -11,12 +11,13 @@ import Data.UiSettings exposing (UiSettings)
 import Html exposing (..)
 import Html.Attributes exposing (..)
 import Html.Events exposing (onClick)
+import Messages.UserSettingsPage exposing (Texts)
 import Page.UserSettings.Data exposing (..)
 import Styles as S
 
 
-viewSidebar : Bool -> Flags -> UiSettings -> Model -> Html Msg
+viewSidebar : Texts -> Bool -> Flags -> UiSettings -> Model -> Html Msg
-viewSidebar visible _ _ model =
+viewSidebar texts visible _ _ model =
     div
         [ id "sidebar"
         , class S.sidebar
@@ -25,7 +26,7 @@ viewSidebar visible _ _ model =
         ]
         [ div [ class "" ]
             [ h1 [ class S.header1 ]
-                [ text "User Settings"
+                [ text texts.userSettings
                 ]
             ]
         , div [ class "flex flex-col my-2" ]
@@ -38,7 +39,7 @@ viewSidebar visible _ _ model =
                 [ i [ class "fa fa-cog" ] []
                 , span
                     [ class "ml-3" ]
-                    [ text "UI Settings" ]
+                    [ text texts.uiSettings ]
                 ]
             , a
                 [ href "#"
@@ -49,7 +50,7 @@ viewSidebar visible _ _ model =
                 [ i [ class "fa fa-bullhorn" ] []
                 , span
                     [ class "ml-3" ]
-                    [ text "Notifications" ]
+                    [ text texts.notifications ]
                 ]
             , a
                 [ href "#"
@@ -60,7 +61,7 @@ viewSidebar visible _ _ model =
                 [ i [ class "fa fa-envelope-open font-thin" ] []
                 , span
                     [ class "ml-3" ]
-                    [ text "Scan Mailbox" ]
+                    [ text texts.scanMailbox ]
                 ]
             , a
                 [ href "#"
@@ -71,7 +72,7 @@ viewSidebar visible _ _ model =
                 [ i [ class "fa fa-envelope" ] []
                 , span
                     [ class "ml-3" ]
-                    [ text "E-Mail Settings (SMTP)" ]
+                    [ text texts.emailSettingSmtp ]
                 ]
             , a
                 [ href "#"
@@ -82,7 +83,7 @@ viewSidebar visible _ _ model =
                 [ i [ class "fa fa-envelope" ] []
                 , span
                     [ class "ml-3" ]
-                    [ text "E-Mail Settings (IMAP)" ]
+                    [ text texts.emailSettingImap ]
                 ]
             , a
                 [ href "#"
@@ -93,21 +94,21 @@ viewSidebar visible _ _ model =
                 [ i [ class "fa fa-user-secret" ] []
                 , span
                     [ class "ml-3" ]
-                    [ text "Change Password" ]
+                    [ text texts.changePassword ]
                 ]
             ]
         ]
 
 
-viewContent : Flags -> UiSettings -> Model -> Html Msg
+viewContent : Texts -> Flags -> UiSettings -> Model -> Html Msg
-viewContent flags settings model =
+viewContent texts flags settings model =
     div
         [ id "content"
         , class S.content
         ]
         (case model.currentTab of
             Just ChangePassTab ->
-                viewChangePassword model
+                viewChangePassword texts model
 
             Just EmailSettingsTab ->
                 viewEmailSettings settings model
@@ -122,7 +123,7 @@ viewContent flags settings model =
                 viewScanMailboxManage flags settings model
 
             Just UiSettingsTab ->
-                viewUiSettings flags settings model
+                viewUiSettings texts flags settings model
 
             Nothing ->
                 []
@@ -142,38 +143,41 @@ menuEntryActive model tab =
         class ""
 
 
-viewChangePassword : Model -> List (Html Msg)
+viewChangePassword : Texts -> Model -> List (Html Msg)
-viewChangePassword model =
+viewChangePassword texts model =
     [ h2
         [ class S.header1
         , class "inline-flex items-center"
         ]
         [ i [ class "fa fa-user-secret" ] []
         , div [ class "ml-3" ]
-            [ text "Change Password"
+            [ text texts.changePassword
             ]
         ]
-    , Html.map ChangePassMsg (Comp.ChangePasswordForm.view2 model.changePassModel)
+    , Html.map ChangePassMsg
+        (Comp.ChangePasswordForm.view2 texts.changePasswordForm
+            model.changePassModel
+        )
     ]
 
 
-viewUiSettings : Flags -> UiSettings -> Model -> List (Html Msg)
+viewUiSettings : Texts -> Flags -> UiSettings -> Model -> List (Html Msg)
-viewUiSettings flags settings model =
+viewUiSettings texts flags settings model =
     [ h2
         [ class S.header1
         , class "inline-flex items-center"
         ]
         [ i [ class "fa fa-cog" ] []
         , span [ class "ml-3" ]
-            [ text "UI Settings"
+            [ text texts.uiSettings
             ]
         ]
     , p [ class "opacity-75 text-lg mb-4" ]
-        [ text "These settings only affect the web ui. They are stored in the browser, "
+        [ text texts.uiSettingsInfo
-        , text "so they are separated between browsers and devices."
         ]
     , Html.map UiSettingsMsg
         (Comp.UiSettingsManage.view2
+            texts.uiSettingsManage
             flags
             settings
             ""