chore: seed migration objects batch 17

chore: seed migration objects batch 16
chore: seed migration objects batch 15
2026-10-18 14:11:45 +08:00 · 2026-10-18 14:11:41 +08:00 · 2026-10-18 14:11:37 +08:00 · 2026-10-18 14:11:33 +08:00 · 2026-10-18 14:11:28 +08:00 · 2026-10-18 14:11:21 +08:00
108 changed files with 1364 additions and 130 deletions
@@ -7,6 +7,15 @@
  /* Height of caption panel */
  --caption-panel-height: 4rem;

+  /* Wallpaper */
+  --wallpaper-url: url('../img/bkg/a00.png'); /* path relative to CSS file */
+  --wallpaper-repeat: repeat;
+  --wallpaper-blur: 0px;
+  --wallpaper-invert: 0;
+  --wallpaper-size: contain;
+  --wallpaper-position: center;
+
+
  /* Core Palette */
  --clr-bright: light-dark(#fff, #181818);
  --clr-dark: light-dark(#000, #fff);
@@ -57,7 +66,7 @@
  --clr-error-border-light: light-dark(#ffbdc6, #ff334e); /* Info box error border */
  --clr-error-text-dark: light-dark(#b51c1c, #de2323); /* Info box error text, icon */
  --clr-error-icon: light-dark(#ef5552, #d81b0e); /* Info box error icon specific */
-  --clr-warning-accent: light-dark(#FFC107, #000e16); /* Amber, danger-color */
+  --clr-warning-accent: light-dark(#FFC107, #808020); /* Amber, danger-color */
  --clr-warning-bg-light: light-dark(#fff9c4, #00060c); /* Info box warning bg */
  --clr-warning-border-light: light-dark(#fff59d, #000a2b); /* Info box warning border */
  --clr-warning-text-dark: light-dark(#6d4c41, #a08356); /* Info box warning text */
@@ -161,6 +170,41 @@
  --clr-badge-magenta-text: light-dark(#939, #747);
  --clr-badge-magenta-border: light-dark(#c9c, #636);

+    /* Chips */
+  --clr-chip-bg: var(--clr-background-extra-light-gray);
+  --clr-chip-invalid-text: var(--clr-error-text-muted);
+  --clr-chip-invalid-bg: var(--clr-badge-red-bg);
+  --clr-chip-remove-icon-bg: light-dark(#aaa, #555);
+  --clr-chip-remove-icon-text: var(--clr-background-extra-light-gray);
+  --clr-chip-remove-icon-hover-bg: var(--clr-text-placeholder);
+  --clr-chip-remove-icon-hover-text: var(--clr-bright);
+
+    /* Tabbar */
+  --clr-tabbar-bg: var(--clr-background-extra-light-gray);
+  --clr-tabbar-inactive-text: light-dark(rgba(33,150,243,0.6), rgba(22,90,160,1));
+  --clr-tabbar-active-text: var(--clr-primary-accent);
+  --clr-tabbar-inactive-border: var(--clr-border-light);
+  --clr-tabbar-active-border: var(--clr-primary-accent);
+
+  /* Miscellaneous UI */
+  --clr-highlight-text: var(--clr-std-teal);
+  --clr-highlight-preview-text: light-dark(#5f9ea0, #205e60);
+  --clr-spinner-track: light-dark(#f3f3f3, #0c0c0c);
+  --clr-spinner-active: var(--clr-primary-action);
+  --clr-cropper-bounding-box-border: var(--clr-primary-action);
+  --clr-cropper-bounding-box-bg: var(--clr-text-tertiary);
+  --clr-cropper-cutout-border: var(--clr-text-tertiary);
+  --clr-cropper-cutout-shadow: light-dark(rgb(230 246 255 / 66%), rgb(25 10 0 / 66%));
+  --clr-audio-bg: var(--clr-background-extra-light-gray);
+  --clr-audio-icon: light-dark(rgba(102, 117, 117, 0.8), rgba(153, 138, 138, 0.8));
+  --clr-audio-icon-disabled: light-dark(rgba(153  153  153 / 75%), rgba(102 102 102 / 75%));
+  --clr-audio-timer-text: light-dark(rgba(102, 102, 102, 0.75), rgba(153, 153, 153, 0.75));
+  --clr-pinned-menu-bg: light-dark(#f8f8f8, #1a1a1a);
+  --clr-drag-n-drop-border: var(--clr-std-grey);
+  --clr-drag-n-drop-text: var(--clr-std-grey);
+  --clr-drag-n-drop-bg: light-dark(rgba(255,255,255,.95), rgba(0,0,0,.95));
+  --clr-drag-n-drop-outline: light-dark(rgba(255,255,255,.95), rgba(0,0,0,.95));
+
  /* Letter Tiles Base */
  --clr-lettertile-default-text: light-dark(#fafafacc, #dcdcdccc);
  --clr-lettertile-hover-text: var(--clr-bright);
@@ -236,41 +280,6 @@
  --clr-dk-fg-13: var(--clr-dk-bg-13);
  --clr-dk-fg-14: var(--clr-dk-bg-14);
  --clr-dk-fg-15: var(--clr-dk-bg-15);
-
-  /* Chips */
-  --clr-chip-bg: var(--clr-background-extra-light-gray);
-  --clr-chip-invalid-text: var(--clr-error-text-muted);
-  --clr-chip-invalid-bg: var(--clr-badge-red-bg);
-  --clr-chip-remove-icon-bg: light-dark(#aaa, #555);
-  --clr-chip-remove-icon-text: var(--clr-background-extra-light-gray);
-  --clr-chip-remove-icon-hover-bg: var(--clr-text-placeholder);
-  --clr-chip-remove-icon-hover-text: var(--clr-bright);
-
-  /* Miscellaneous UI */
-  --clr-highlight-text: var(--clr-std-teal);
-  --clr-highlight-preview-text: light-dark(#5f9ea0, #205e60);
-  --clr-spinner-track: light-dark(#f3f3f3, #0c0c0c);
-  --clr-spinner-active: var(--clr-primary-action);
-  --clr-cropper-bounding-box-border: var(--clr-primary-action);
-  --clr-cropper-bounding-box-bg: var(--clr-text-tertiary);
-  --clr-cropper-cutout-border: var(--clr-text-tertiary);
-  --clr-cropper-cutout-shadow: light-dark(rgb(230 246 255 / 66%), rgb(25 10 0 / 66%));
-  --clr-audio-bg: var(--clr-background-extra-light-gray);
-  --clr-audio-icon: light-dark(rgba(102, 117, 117, 0.8), rgba(153, 138, 138, 0.8));
-  --clr-audio-icon-disabled: light-dark(rgba(153  153  153 / 75%), rgba(102 102 102 / 75%));
-  --clr-audio-timer-text: light-dark(rgba(102, 102, 102, 0.75), rgba(153, 153, 153, 0.75));
-  --clr-pinned-menu-bg: light-dark(#f8f8f8, #1a1a1a);
-  --clr-drag-n-drop-border: var(--clr-std-grey);
-  --clr-drag-n-drop-text: var(--clr-std-grey);
-  --clr-drag-n-drop-bg: light-dark(rgba(255,255,255,.95), rgba(0,0,0,.95));
-  --clr-drag-n-drop-outline: light-dark(rgba(255,255,255,.95), rgba(0,0,0,.95));
-
-  /* Tabbar */
-  --clr-tabbar-bg: var(--clr-background-extra-light-gray);
-  --clr-tabbar-inactive-text: light-dark(rgba(33,150,243,0.6), rgba(22,90,160,0.6));
-  --clr-tabbar-active-text: var(--clr-primary-accent);
-  --clr-tabbar-inactive-border: var(--clr-border-light);
-  --clr-tabbar-active-border: var(--clr-primary-accent);
 }

 * {
@@ -1761,19 +1770,34 @@ img.channel {
  overflow-y: scroll;
  background-color: var(--clr-background-blue-gray-50);
  height: 100%;
-  background-image: url("../img/bg_messages.png");
+}
+
+#messages-panel::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  background-image: var(--wallpaper-url);
+  background-repeat: var(--wallpaper-repeat);
+  background-size: var(--wallpaper-size);
+  background-position: var(--wallpaper-position);
+  filter: blur(var(--wallpaper-blur)) invert(var(--wallpaper-invert));
+  pointer-events: none;
+}
+
+/* Dark mode asigned by the OS */
+@media (prefers-color-scheme: dark) {
+  #messages-panel::before {
+    background-image: url("../img/bg_messages_dk.png");
+  }
 }

 /* Explicitly set dark mode */
-#messages-panel[color-scheme="dark"] {
+#messages-panel[color-scheme="dark"]::before {
  background-image: url("../img/bg_messages_dk.png");
 }
-/* Dark mode asigned by the OS */
-@media (prefers-color-scheme: dark) {
-  #messages-panel {
-    background-image: url("../img/bg_messages_dk.png");
-  }
-}

 #messages-container {
  position: relative;
@@ -3567,6 +3591,34 @@ ul.phone-country-selector span.country {
  overflow-x: hidden;
 }

+.image-grid {
+  position: relative;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
+  gap: 0.35rem;
+  padding: 0.25rem;
+}
+
+.image-grid-cell {
+  padding: 0;
+  margin: 0;
+  width: 100%;
+  height: 7rem;
+  overflow: hidden;
+  border-radius: 0.25rem;
+  border: 1.5px solid transparent;
+  cursor: pointer;
+  box-shadow: 0 0 0.2rem var( --clr-shadow-hr-inset); /* gray */
+}
+
+.image-grid-cell img {
+  object-fit: cover;
+}
+
+.image-grid-cell.selected {
+  border: 1.5px solid var(--clr-secondary-accent);
+}
+
 div.toast {
  visibility: hidden;
  display: flex;
@@ -0,0 +1,18 @@
+{
+  "patt": [
+    {"name": "a00.png", "size": 200}, {"name": "a01.jpg", "size": 384}, {"name": "a02.jpg", "size": 384},
+    {"name": "a03.jpg", "size": 384}, {"name": "a04.png", "size": 400}, {"name": "a05.jpg", "size": 400},
+    {"name": "a06.jpg", "size": 256}, {"name": "a07.jpg", "size": 384}, {"name": "a08.jpg", "size": 384},
+    {"name": "a09.jpg", "size": 400}, {"name": "a10.jpg", "size": 256}, {"name": "a11.png", "size": 200}
+  ],
+  "img": [
+    {"name": "w01.jpg", "pr": "p01.jpg"}, {"name": "w02.jpg", "pr": "p02.jpg"}, {"name": "w03.jpg", "pr": "p03.jpg"},
+    {"name": "w04.jpg", "pr": "p04.jpg"}, {"name": "w05.jpg", "pr": "p05.jpg"}, {"name": "w06.jpg", "pr": "p06.jpg"},
+    {"name": "w07.jpg", "pr": "p07.jpg"}, {"name": "w08.jpg", "pr": "p08.jpg"}, {"name": "w09.jpg", "pr": "p09.jpg"},
+    {"name": "w10.jpg", "pr": "p10.jpg"}, {"name": "w11.jpg", "pr": "p11.jpg"}, {"name": "w12.jpg", "pr": "p12.jpg"},
+    {"name": "w13.jpg", "pr": "p13.jpg"}, {"name": "w14.jpg", "pr": "p14.jpg"}, {"name": "w15.jpg", "pr": "p15.jpg"},
+    {"name": "w16.jpg", "pr": "p16.jpg"}, {"name": "w17.jpg", "pr": "p17.jpg"}, {"name": "w18.jpg", "pr": "p18.jpg"},
+    {"name": "w19.jpg", "pr": "p19.jpg"}, {"name": "w20.jpg", "pr": "p20.jpg"}, {"name": "w21.jpg", "pr": "p21.jpg"},
+    {"name": "w22.jpg", "pr": "p22.jpg"}, {"name": "w23.jpg", "pr": "p23.jpg"}, {"name": "w24.jpg", "pr": "p24.jpg"}
+  ]
+}
@@ -157,3 +157,6 @@ export const DEFAULT_TEXT_SIZE = 10;

 // MIME type for the legacy Drafty form-response data.
 export const DRAFTY_FR_MIME_TYPE_LEGACY = 'application/json'; // Remove in 2026.
+
+// Path to wallpaper images.
+export const WALLPAPER_DEFAULTS = {type: 'patt', index: 0, path:'img/bkg/'};
@@ -1864,5 +1864,54 @@
    "description": "Count of group topic members",
    "missing": false,
    "obsolete": false
+  },
+  "label_wallpapers": {
+    "translation": "",
+    "defaultMessage": "Wallpapers:",
+    "description": "Label for selecting wallpapers in Settings",
+    "missing": true,
+    "obsolete": true
+  },
+  "tabtitle_image": {
+    "translation": "",
+    "defaultMessage": "image",
+    "description": "Tab title Image",
+    "missing": true,
+    "obsolete": false
+  },
+  "tabtitle_pattern": {
+    "translation": "",
+    "defaultMessage": "pattern",
+    "description": "Tab title Pattern",
+    "missing": true,
+    "obsolete": false
+  },
+  "sidepanel_title_wallpapers": {
+    "translation": "",
+    "defaultMessage": "Wallpapers",
+    "description": "Sidepanel title for WallpapersView.",
+    "missing": true,
+    "obsolete": true
+  },
+  "button_restore": {
+    "translation": "",
+    "defaultMessage": "Restore default",
+    "description": "Reset setting to default",
+    "missing": true,
+    "obsolete": false
+  },
+  "wallpapers": {
+    "translation": "",
+    "defaultMessage": "Wallpapers",
+    "description": "Link or title for working with wallpapers.",
+    "missing": true,
+    "obsolete": false
+  },
+  "label_blur_wallpaper": {
+    "translation": "",
+    "defaultMessage": "Blur:",
+    "description": "Label adjusting blur amount",
+    "missing": true,
+    "obsolete": false
  }
 }
@@ -1864,5 +1864,54 @@
    "description": "Count of group topic members",
    "missing": false,
    "obsolete": false
+  },
+  "label_wallpapers": {
+    "translation": "",
+    "defaultMessage": "Wallpapers:",
+    "description": "Label for selecting wallpapers in Settings",
+    "missing": true,
+    "obsolete": true
+  },
+  "tabtitle_image": {
+    "translation": "",
+    "defaultMessage": "image",
+    "description": "Tab title Image",
+    "missing": true,
+    "obsolete": false
+  },
+  "tabtitle_pattern": {
+    "translation": "",
+    "defaultMessage": "pattern",
+    "description": "Tab title Pattern",
+    "missing": true,
+    "obsolete": false
+  },
+  "sidepanel_title_wallpapers": {
+    "translation": "",
+    "defaultMessage": "Wallpapers",
+    "description": "Sidepanel title for WallpapersView.",
+    "missing": true,
+    "obsolete": true
+  },
+  "button_restore": {
+    "translation": "",
+    "defaultMessage": "Restore default",
+    "description": "Reset setting to default",
+    "missing": true,
+    "obsolete": false
+  },
+  "wallpapers": {
+    "translation": "",
+    "defaultMessage": "Wallpapers",
+    "description": "Link or title for working with wallpapers.",
+    "missing": true,
+    "obsolete": false
+  },
+  "label_blur_wallpaper": {
+    "translation": "",
+    "defaultMessage": "Blur:",
+    "description": "Label adjusting blur amount",
+    "missing": true,
+    "obsolete": false
  }
 }
@@ -1864,5 +1864,47 @@
    "description": "Count of group topic members",
    "missing": false,
    "obsolete": false
+  },
+  "label_wallpapers": {
+    "translation": "Wallpapers",
+    "defaultMessage": "Wallpapers",
+    "description": "Label for selecting wallpapers in Settings",
+    "missing": false,
+    "obsolete": true
+  },
+  "tabtitle_image": {
+    "translation": "image",
+    "defaultMessage": "image",
+    "description": "Tab title Image",
+    "missing": false,
+    "obsolete": false
+  },
+  "tabtitle_pattern": {
+    "translation": "pattern",
+    "defaultMessage": "pattern",
+    "description": "Tab title Pattern",
+    "missing": false,
+    "obsolete": false
+  },
+  "button_restore": {
+    "translation": "Restore default",
+    "defaultMessage": "Restore default",
+    "description": "Reset setting to default",
+    "missing": false,
+    "obsolete": false
+  },
+  "wallpapers": {
+    "translation": "Wallpapers",
+    "defaultMessage": "Wallpapers",
+    "description": "Link or title for working with wallpapers.",
+    "missing": false,
+    "obsolete": false
+  },
+  "label_blur_wallpaper": {
+    "translation": "Blur:",
+    "defaultMessage": "Blur:",
+    "description": "Label adjusting blur amount",
+    "missing": false,
+    "obsolete": false
  }
 }
@@ -1864,5 +1864,54 @@
    "description": "Count of group topic members",
    "missing": false,
    "obsolete": false
+  },
+  "label_wallpapers": {
+    "translation": "",
+    "defaultMessage": "Wallpapers:",
+    "description": "Label for selecting wallpapers in Settings",
+    "missing": true,
+    "obsolete": true
+  },
+  "tabtitle_image": {
+    "translation": "",
+    "defaultMessage": "image",
+    "description": "Tab title Image",
+    "missing": true,
+    "obsolete": false
+  },
+  "tabtitle_pattern": {
+    "translation": "",
+    "defaultMessage": "pattern",
+    "description": "Tab title Pattern",
+    "missing": true,
+    "obsolete": false
+  },
+  "sidepanel_title_wallpapers": {
+    "translation": "",
+    "defaultMessage": "Wallpapers",
+    "description": "Sidepanel title for WallpapersView.",
+    "missing": true,
+    "obsolete": true
+  },
+  "button_restore": {
+    "translation": "",
+    "defaultMessage": "Restore default",
+    "description": "Reset setting to default",
+    "missing": true,
+    "obsolete": false
+  },
+  "wallpapers": {
+    "translation": "",
+    "defaultMessage": "Wallpapers",
+    "description": "Link or title for working with wallpapers.",
+    "missing": true,
+    "obsolete": false
+  },
+  "label_blur_wallpaper": {
+    "translation": "",
+    "defaultMessage": "Blur:",
+    "description": "Label adjusting blur amount",
+    "missing": true,
+    "obsolete": false
  }
 }
@@ -107,6 +107,10 @@
    "defaultMessage": "Reset",
    "description": "Button [Reset]"
  },
+  "button_restore": {
+    "defaultMessage": "Restore default",
+    "description": "Reset setting to default"
+  },
  "button_security": {
    "defaultMessage": "Security",
    "description": "Navigaton button for security panel."
@@ -406,6 +410,10 @@
    "defaultMessage": "Alias",
    "description": "Label for editing user or topic alias"
  },
+  "label_blur_wallpaper": {
+    "defaultMessage": "Blur:",
+    "description": "Label adjusting blur amount"
+  },
  "label_client": {
    "defaultMessage": "Client:",
    "description": "Label for a client version"
@@ -980,10 +988,18 @@
    "defaultMessage": "by id",
    "description": "Tab title Find topic by ID"
  },
+  "tabtitle_image": {
+    "defaultMessage": "image",
+    "description": "Tab title Image"
+  },
  "tabtitle_new_group": {
    "defaultMessage": "new group",
    "description": "Tab title New Group"
  },
+  "tabtitle_pattern": {
+    "defaultMessage": "pattern",
+    "description": "Tab title Pattern"
+  },
  "tags_editor_no_tags": {
    "defaultMessage": "Add some tags",
    "description": "Tag editor prompt when no tags are found."
@@ -1063,5 +1079,9 @@
  "user_not_found": {
    "defaultMessage": "Not found",
    "description": "In place of a user's full name when the user is not found."
+  },
+  "wallpapers": {
+    "defaultMessage": "Wallpapers",
+    "description": "Link or title for working with wallpapers."
  }
 }
@@ -1864,5 +1864,54 @@
    "description": "Count of group topic members",
    "missing": false,
    "obsolete": false
+  },
+  "label_wallpapers": {
+    "translation": "",
+    "defaultMessage": "Wallpapers:",
+    "description": "Label for selecting wallpapers in Settings",
+    "missing": true,
+    "obsolete": true
+  },
+  "tabtitle_image": {
+    "translation": "",
+    "defaultMessage": "image",
+    "description": "Tab title Image",
+    "missing": true,
+    "obsolete": false
+  },
+  "tabtitle_pattern": {
+    "translation": "",
+    "defaultMessage": "pattern",
+    "description": "Tab title Pattern",
+    "missing": true,
+    "obsolete": false
+  },
+  "sidepanel_title_wallpapers": {
+    "translation": "",
+    "defaultMessage": "Wallpapers",
+    "description": "Sidepanel title for WallpapersView.",
+    "missing": true,
+    "obsolete": true
+  },
+  "button_restore": {
+    "translation": "",
+    "defaultMessage": "Restore default",
+    "description": "Reset setting to default",
+    "missing": true,
+    "obsolete": false
+  },
+  "wallpapers": {
+    "translation": "",
+    "defaultMessage": "Wallpapers",
+    "description": "Link or title for working with wallpapers.",
+    "missing": true,
+    "obsolete": false
+  },
+  "label_blur_wallpaper": {
+    "translation": "",
+    "defaultMessage": "Blur:",
+    "description": "Label adjusting blur amount",
+    "missing": true,
+    "obsolete": false
  }
 }
@@ -1864,5 +1864,54 @@
    "description": "Count of group topic members",
    "missing": false,
    "obsolete": false
+  },
+  "label_wallpapers": {
+    "translation": "",
+    "defaultMessage": "Wallpapers:",
+    "description": "Label for selecting wallpapers in Settings",
+    "missing": true,
+    "obsolete": true
+  },
+  "tabtitle_image": {
+    "translation": "",
+    "defaultMessage": "image",
+    "description": "Tab title Image",
+    "missing": true,
+    "obsolete": false
+  },
+  "tabtitle_pattern": {
+    "translation": "",
+    "defaultMessage": "pattern",
+    "description": "Tab title Pattern",
+    "missing": true,
+    "obsolete": false
+  },
+  "sidepanel_title_wallpapers": {
+    "translation": "",
+    "defaultMessage": "Wallpapers",
+    "description": "Sidepanel title for WallpapersView.",
+    "missing": true,
+    "obsolete": true
+  },
+  "button_restore": {
+    "translation": "",
+    "defaultMessage": "Restore default",
+    "description": "Reset setting to default",
+    "missing": true,
+    "obsolete": false
+  },
+  "wallpapers": {
+    "translation": "",
+    "defaultMessage": "Wallpapers",
+    "description": "Link or title for working with wallpapers.",
+    "missing": true,
+    "obsolete": false
+  },
+  "label_blur_wallpaper": {
+    "translation": "",
+    "defaultMessage": "Blur:",
+    "description": "Label adjusting blur amount",
+    "missing": true,
+    "obsolete": false
  }
 }
@@ -1864,5 +1864,54 @@
    "description": "Count of group topic members",
    "missing": false,
    "obsolete": false
+  },
+  "label_wallpapers": {
+    "translation": "",
+    "defaultMessage": "Wallpapers:",
+    "description": "Label for selecting wallpapers in Settings",
+    "missing": true,
+    "obsolete": true
+  },
+  "tabtitle_image": {
+    "translation": "",
+    "defaultMessage": "image",
+    "description": "Tab title Image",
+    "missing": true,
+    "obsolete": false
+  },
+  "tabtitle_pattern": {
+    "translation": "",
+    "defaultMessage": "pattern",
+    "description": "Tab title Pattern",
+    "missing": true,
+    "obsolete": false
+  },
+  "sidepanel_title_wallpapers": {
+    "translation": "",
+    "defaultMessage": "Wallpapers",
+    "description": "Sidepanel title for WallpapersView.",
+    "missing": true,
+    "obsolete": true
+  },
+  "button_restore": {
+    "translation": "",
+    "defaultMessage": "Restore default",
+    "description": "Reset setting to default",
+    "missing": true,
+    "obsolete": false
+  },
+  "wallpapers": {
+    "translation": "",
+    "defaultMessage": "Wallpapers",
+    "description": "Link or title for working with wallpapers.",
+    "missing": true,
+    "obsolete": false
+  },
+  "label_blur_wallpaper": {
+    "translation": "",
+    "defaultMessage": "Blur:",
+    "description": "Label adjusting blur amount",
+    "missing": true,
+    "obsolete": false
  }
 }
@@ -1864,5 +1864,54 @@
    "description": "Count of group topic members",
    "missing": false,
    "obsolete": false
+  },
+  "label_wallpapers": {
+    "translation": "",
+    "defaultMessage": "Wallpapers:",
+    "description": "Label for selecting wallpapers in Settings",
+    "missing": true,
+    "obsolete": true
+  },
+  "tabtitle_image": {
+    "translation": "",
+    "defaultMessage": "image",
+    "description": "Tab title Image",
+    "missing": true,
+    "obsolete": false
+  },
+  "tabtitle_pattern": {
+    "translation": "",
+    "defaultMessage": "pattern",
+    "description": "Tab title Pattern",
+    "missing": true,
+    "obsolete": false
+  },
+  "sidepanel_title_wallpapers": {
+    "translation": "",
+    "defaultMessage": "Wallpapers",
+    "description": "Sidepanel title for WallpapersView.",
+    "missing": true,
+    "obsolete": true
+  },
+  "button_restore": {
+    "translation": "",
+    "defaultMessage": "Restore default",
+    "description": "Reset setting to default",
+    "missing": true,
+    "obsolete": false
+  },
+  "wallpapers": {
+    "translation": "",
+    "defaultMessage": "Wallpapers",
+    "description": "Link or title for working with wallpapers.",
+    "missing": true,
+    "obsolete": false
+  },
+  "label_blur_wallpaper": {
+    "translation": "",
+    "defaultMessage": "Blur:",
+    "description": "Label adjusting blur amount",
+    "missing": true,
+    "obsolete": false
  }
 }
@@ -1864,5 +1864,54 @@
    "description": "Count of group topic members",
    "missing": false,
    "obsolete": false
+  },
+  "label_wallpapers": {
+    "translation": "",
+    "defaultMessage": "Wallpapers:",
+    "description": "Label for selecting wallpapers in Settings",
+    "missing": true,
+    "obsolete": true
+  },
+  "tabtitle_image": {
+    "translation": "",
+    "defaultMessage": "image",
+    "description": "Tab title Image",
+    "missing": true,
+    "obsolete": false
+  },
+  "tabtitle_pattern": {
+    "translation": "",
+    "defaultMessage": "pattern",
+    "description": "Tab title Pattern",
+    "missing": true,
+    "obsolete": false
+  },
+  "sidepanel_title_wallpapers": {
+    "translation": "",
+    "defaultMessage": "Wallpapers",
+    "description": "Sidepanel title for WallpapersView.",
+    "missing": true,
+    "obsolete": true
+  },
+  "button_restore": {
+    "translation": "",
+    "defaultMessage": "Restore default",
+    "description": "Reset setting to default",
+    "missing": true,
+    "obsolete": false
+  },
+  "wallpapers": {
+    "translation": "",
+    "defaultMessage": "Wallpapers",
+    "description": "Link or title for working with wallpapers.",
+    "missing": true,
+    "obsolete": false
+  },
+  "label_blur_wallpaper": {
+    "translation": "",
+    "defaultMessage": "Blur:",
+    "description": "Label adjusting blur amount",
+    "missing": true,
+    "obsolete": false
  }
 }
@@ -1864,5 +1864,54 @@
    "description": "Count of group topic members",
    "missing": false,
    "obsolete": false
+  },
+  "label_wallpapers": {
+    "translation": "",
+    "defaultMessage": "Wallpapers:",
+    "description": "Label for selecting wallpapers in Settings",
+    "missing": true,
+    "obsolete": true
+  },
+  "tabtitle_image": {
+    "translation": "",
+    "defaultMessage": "image",
+    "description": "Tab title Image",
+    "missing": true,
+    "obsolete": false
+  },
+  "tabtitle_pattern": {
+    "translation": "",
+    "defaultMessage": "pattern",
+    "description": "Tab title Pattern",
+    "missing": true,
+    "obsolete": false
+  },
+  "sidepanel_title_wallpapers": {
+    "translation": "",
+    "defaultMessage": "Wallpapers",
+    "description": "Sidepanel title for WallpapersView.",
+    "missing": true,
+    "obsolete": true
+  },
+  "button_restore": {
+    "translation": "",
+    "defaultMessage": "Restore default",
+    "description": "Reset setting to default",
+    "missing": true,
+    "obsolete": false
+  },
+  "wallpapers": {
+    "translation": "",
+    "defaultMessage": "Wallpapers",
+    "description": "Link or title for working with wallpapers.",
+    "missing": true,
+    "obsolete": false
+  },
+  "label_blur_wallpaper": {
+    "translation": "",
+    "defaultMessage": "Blur:",
+    "description": "Label adjusting blur amount",
+    "missing": true,
+    "obsolete": false
  }
 }
@@ -1864,5 +1864,54 @@
    "description": "Count of group topic members",
    "missing": false,
    "obsolete": false
+  },
+  "label_wallpapers": {
+    "translation": "",
+    "defaultMessage": "Wallpapers:",
+    "description": "Label for selecting wallpapers in Settings",
+    "missing": true,
+    "obsolete": true
+  },
+  "tabtitle_image": {
+    "translation": "",
+    "defaultMessage": "image",
+    "description": "Tab title Image",
+    "missing": true,
+    "obsolete": false
+  },
+  "tabtitle_pattern": {
+    "translation": "",
+    "defaultMessage": "pattern",
+    "description": "Tab title Pattern",
+    "missing": true,
+    "obsolete": false
+  },
+  "sidepanel_title_wallpapers": {
+    "translation": "",
+    "defaultMessage": "Wallpapers",
+    "description": "Sidepanel title for WallpapersView.",
+    "missing": true,
+    "obsolete": true
+  },
+  "button_restore": {
+    "translation": "",
+    "defaultMessage": "Restore default",
+    "description": "Reset setting to default",
+    "missing": true,
+    "obsolete": false
+  },
+  "wallpapers": {
+    "translation": "",
+    "defaultMessage": "Wallpapers",
+    "description": "Link or title for working with wallpapers.",
+    "missing": true,
+    "obsolete": false
+  },
+  "label_blur_wallpaper": {
+    "translation": "",
+    "defaultMessage": "Blur:",
+    "description": "Label adjusting blur amount",
+    "missing": true,
+    "obsolete": false
  }
 }
@@ -1864,5 +1864,54 @@
    "description": "Count of group topic members",
    "missing": false,
    "obsolete": false
+  },
+  "label_wallpapers": {
+    "translation": "",
+    "defaultMessage": "Wallpapers:",
+    "description": "Label for selecting wallpapers in Settings",
+    "missing": true,
+    "obsolete": true
+  },
+  "tabtitle_image": {
+    "translation": "",
+    "defaultMessage": "image",
+    "description": "Tab title Image",
+    "missing": true,
+    "obsolete": false
+  },
+  "tabtitle_pattern": {
+    "translation": "",
+    "defaultMessage": "pattern",
+    "description": "Tab title Pattern",
+    "missing": true,
+    "obsolete": false
+  },
+  "sidepanel_title_wallpapers": {
+    "translation": "",
+    "defaultMessage": "Wallpapers",
+    "description": "Sidepanel title for WallpapersView.",
+    "missing": true,
+    "obsolete": true
+  },
+  "button_restore": {
+    "translation": "",
+    "defaultMessage": "Restore default",
+    "description": "Reset setting to default",
+    "missing": true,
+    "obsolete": false
+  },
+  "wallpapers": {
+    "translation": "",
+    "defaultMessage": "Wallpapers",
+    "description": "Link or title for working with wallpapers.",
+    "missing": true,
+    "obsolete": false
+  },
+  "label_blur_wallpaper": {
+    "translation": "",
+    "defaultMessage": "Blur:",
+    "description": "Label adjusting blur amount",
+    "missing": true,
+    "obsolete": false
  }
 }
@@ -1864,5 +1864,54 @@
    "description": "Count of group topic members",
    "missing": false,
    "obsolete": false
+  },
+  "label_wallpapers": {
+    "translation": "",
+    "defaultMessage": "Wallpapers:",
+    "description": "Label for selecting wallpapers in Settings",
+    "missing": true,
+    "obsolete": true
+  },
+  "tabtitle_image": {
+    "translation": "",
+    "defaultMessage": "image",
+    "description": "Tab title Image",
+    "missing": true,
+    "obsolete": false
+  },
+  "tabtitle_pattern": {
+    "translation": "",
+    "defaultMessage": "pattern",
+    "description": "Tab title Pattern",
+    "missing": true,
+    "obsolete": false
+  },
+  "sidepanel_title_wallpapers": {
+    "translation": "",
+    "defaultMessage": "Wallpapers",
+    "description": "Sidepanel title for WallpapersView.",
+    "missing": true,
+    "obsolete": true
+  },
+  "button_restore": {
+    "translation": "",
+    "defaultMessage": "Restore default",
+    "description": "Reset setting to default",
+    "missing": true,
+    "obsolete": false
+  },
+  "wallpapers": {
+    "translation": "",
+    "defaultMessage": "Wallpapers",
+    "description": "Link or title for working with wallpapers.",
+    "missing": true,
+    "obsolete": false
+  },
+  "label_blur_wallpaper": {
+    "translation": "",
+    "defaultMessage": "Blur:",
+    "description": "Label adjusting blur amount",
+    "missing": true,
+    "obsolete": false
  }
 }
@@ -29,6 +29,7 @@ const messageLoader = {
  'en': _ => import('./i18n.min/en.json'),
  'es': _ => import('./i18n.min/es.json'),
  'fr': _ => import('./i18n.min/fr.json'),
+  'it': _ => import('./i18n.min/it.json'),
  'ko': _ => import('./i18n.min/ko.json'),
  'ro': _ => import('./i18n.min/ro.json'),
  'ru': _ => import('./i18n.min/ru.json'),
@@ -1,6 +1,7 @@
 // Odds and ends

 import { Tinode } from 'tinode-sdk';
+import { WALLPAPER_DEFAULTS } from '../config.js';

 // Make shortcut icon appear with a green dot + show unread count in title.
 export function updateFavicon(count) {
@@ -248,3 +249,8 @@ export function cancelablePromise(promise) {
  };
 };

+export function defaultWallpaper() {
+  const wallpaperIndex = require('../../img/bkg/index.json');
+  const wp = wallpaperIndex[WALLPAPER_DEFAULTS.type][WALLPAPER_DEFAULTS.index];
+  return {name: `../${WALLPAPER_DEFAULTS.path}${wp.name}`, size: wp.size};
+}
@@ -39,51 +39,61 @@ export default class AccGeneralView extends React.PureComponent {
  render() {
    return (
        <div id="settings-form" className="scrollable-panel">
-          <div className="panel-form-row">
-            <label className="small">
-              <FormattedMessage id="label_color_schema" defaultMessage="Theme:"
-                description="Label for selecting color scheme (dark, light) in Settings" />
-            </label>
-          </div>
-          <div className="panel-form-row">
-            <ul className="quoted">
-              <li key="system">
-                <input type="radio" id="system" name="color-scheme-select" value="light dark"
-                  checked={this.state.colorSchema == 'light dark'}
-                  onChange={this.handleColorSchemaSelected} />&nbsp;
-                <label htmlFor="system">
-                  <FormattedMessage id="color_schema_system" defaultMessage="System default" description="Name of the color schema"/>&nbsp;
-                  <img src="../img/routine.svg" style={{verticalAlign: 'top', width: '1.6rem', height: '1.6rem'}}/>
-                </label>
-              </li>
-              <li key="light">
-                <input type="radio" id="light" name="color-scheme-select" value="light"
-                  checked={this.state.colorSchema == 'light'}
-                  onChange={this.handleColorSchemaSelected} />&nbsp;
-                <label htmlFor="light">
-                  <FormattedMessage id="color_schema_light" defaultMessage="Light" description="Name of the color schema"/>&nbsp;
-                  <i className="material-icons orange large">light_mode</i>
-                </label>
-              </li>
-              <li key="dark">
-                <input type="radio" id="dark" name="color-scheme-select" value="dark"
-                  checked={this.state.colorSchema == 'dark'}
-                  onChange={this.handleColorSchemaSelected} />&nbsp;
-                <label htmlFor="dark">
-                  <FormattedMessage id="color_schema_dark" defaultMessage="Dark" description="Name of the color schema"/>&nbsp;
-                  <i className="material-icons blue large">dark_mode</i>
-                </label>
-              </li>
-            </ul>
+          <div className="panel-form-column">
+            <div className="panel-form-row">
+              <label className="small">
+                <FormattedMessage id="label_color_schema" defaultMessage="Theme:"
+                  description="Label for selecting color scheme (dark, light) in Settings" />
+              </label>
+            </div>
+            <div className="panel-form-row">
+              <ul className="quoted">
+                <li key="system">
+                  <input type="radio" id="system" name="color-scheme-select" value="light dark"
+                    checked={this.state.colorSchema == 'light dark'}
+                    onChange={this.handleColorSchemaSelected} />&nbsp;
+                  <label htmlFor="system">
+                    <FormattedMessage id="color_schema_system" defaultMessage="System default" description="Name of the color schema"/>&nbsp;
+                    <img src="img/routine.svg" style={{verticalAlign: 'top', width: '1.6rem', height: '1.6rem'}}/>
+                  </label>
+                </li>
+                <li key="light">
+                  <input type="radio" id="light" name="color-scheme-select" value="light"
+                    checked={this.state.colorSchema == 'light'}
+                    onChange={this.handleColorSchemaSelected} />&nbsp;
+                  <label htmlFor="light">
+                    <FormattedMessage id="color_schema_light" defaultMessage="Light" description="Name of the color schema"/>&nbsp;
+                    <i className="material-icons orange large">light_mode</i>
+                  </label>
+                </li>
+                <li key="dark">
+                  <input type="radio" id="dark" name="color-scheme-select" value="dark"
+                    checked={this.state.colorSchema == 'dark'}
+                    onChange={this.handleColorSchemaSelected} />&nbsp;
+                  <label htmlFor="dark">
+                    <FormattedMessage id="color_schema_dark" defaultMessage="Dark" description="Name of the color schema"/>&nbsp;
+                    <i className="material-icons blue large">dark_mode</i>
+                  </label>
+                </li>
+              </ul>
+            </div>
          </div>
          <div className="hr" />
-          <div className="panel-form-row">
-            <label className="small">
-              <FormattedMessage id="label_text_size" defaultMessage="Text size:"
-                description="Label adjusting text size" />
-            </label>
+          <div className="panel-form-row clean-clickable">
+            <a onClick={this.props.onSelectWallpapers} className="flat-button">
+              <i className="material-icons">wallpaper</i>&nbsp;
+              <FormattedMessage id="wallpapers" defaultMessage="Wallpapers"
+                  description="Link or title for working with wallpapers." />
+            </a>
          </div>
+          <div className="hr" />
          <div className="panel-form-column">
+            <div className="panel-form-row">
+              <label className="small">
+                <FormattedMessage id="label_text_size" defaultMessage="Text size:"
+                  description="Label adjusting text size" />
+              </label>
+            </div>
            <div className="panel-form-row">
              <input type="range" id="text_size" name="text_size" min="80" max="120" step="10"
                list="text_size_options" value={this.state.textSize} onChange={this.handleTextSizeChanged} />
@@ -601,8 +601,8 @@ class InfoView extends React.Component {
                  <FormattedMessage id="label_topic_name" defaultMessage="Name"
                    description="Label for editing topic name" />
                </label></div>
-                <div className="large ellipsized">{this.state.fullName}
-                {this.state.channel ? <img src="/img/channel.png" className="channel" alt="channel" /> : null}</div>
+                <div className="large ellipsized">{this.state.fullName}&nbsp;
+                {this.state.channel ? <i className="material-icons">podcasts</i> : null}</div>
              </div>
              {this.state.private ?
                <div className="group">
@@ -107,19 +107,19 @@ class NewTopicView extends React.Component {
    return (
      <div className="flex-column">
        <ul className="tabbar">
-          <li className={this.state.tabSelected === "find" ? "active" : null}>
+          <li className={this.state.tabSelected === 'find' ? 'active' : null}>
            <a href="#" data-id="find" onClick={this.handleTabClick}>
              <FormattedMessage id="tabtitle_find_user" defaultMessage="find"
                description="Tab title Find" />
            </a>
          </li>
-          <li className={this.state.tabSelected === "grp" ? "active" : null}>
+          <li className={this.state.tabSelected === 'grp' ? 'active' : null}>
            <a href="#" data-id="grp" onClick={this.handleTabClick}>
              <FormattedMessage id="tabtitle_new_group" defaultMessage="new group"
                description="Tab title New Group" />
            </a>
          </li>
-          <li className={this.state.tabSelected === "byid" ? "active" : null}>
+          <li className={this.state.tabSelected === 'byid' ? 'active' : null}>
            <a href="#" data-id="byid" onClick={this.handleTabClick}>
              <FormattedMessage id="tabtitle_group_by_id" defaultMessage="by id"
                description="Tab title Find topic by ID" />
@@ -18,6 +18,7 @@ import NewTopicView from './new-topic-view.jsx';
 const PasswordResetView = React.lazy(_ => import('./password-reset-view.jsx'));
 import SettingsView from './settings-view.jsx';
 import ValidationView from './validation-view.jsx';
+const WallpapersView = React.lazy(_ => import('./wallpapers.jsx'));

 // Panel titles for translation.
 const messages = defineMessages({
@@ -95,6 +96,11 @@ const messages = defineMessages({
    id: 'sidepanel_title_blocked',
    description: 'Sidepanel title for ContactsView-Blocked.',
    defaultMessage: 'Blocked Chats'
+  },
+  wallpapers: {
+    id: 'wallpapers',
+    description: 'Link or title for working with wallpapers.',
+    defaultMessage: 'Wallpapers'
  }
 });

@@ -209,6 +215,7 @@ class SidepanelView extends React.PureComponent {
          view === 'acc_general' ?
          <AccGeneralView
            colorSchema={this.props.colorSchema}
+            onSelectWallpapers={this.props.onSelectWallpapers}
            textSize={this.props.textSize}
            sendOnEnter={this.props.sendOnEnter}
            onChangeColorSchema={this.props.onChangeColorSchema}
@@ -243,6 +250,14 @@ class SidepanelView extends React.PureComponent {
            serverAddress={this.props.serverAddress}
            serverVersion={this.props.serverVersion} /> :

+          view === 'wallpapers' ?
+          <Suspense fallback={<div className="panel-form-row"><FormattedMessage id="loading_note"
+            defaultMessage="Loading..." description="Message shown when component is loading"/></div>}>
+            <WallpapersView
+              onWallpaperSelected={this.props.onWallpaperSelected}
+            />
+          </Suspense> :
+
          (view === 'contacts' || view == 'archive' || view == 'blocked') ?
          <ContactsView
            tinode={this.props.tinode}
@@ -29,7 +29,7 @@ import { detectServerAddress, isLocalHost, isSecureConnection } from '../lib/hos
 import LocalStorageUtil from '../lib/local-storage.js';
 import HashNavigation from '../lib/navigation.js';
 import { secondsToTime } from '../lib/strformat.js'
-import { updateFavicon } from '../lib/utils.js';
+import { defaultWallpaper, updateFavicon } from '../lib/utils.js';

 // Sound to play on message received.
 const POP_SOUND = new Audio('audio/msg.m4a');
@@ -108,6 +108,7 @@ class TinodeWeb extends React.Component {
    this.handleResize = this.handleResize.bind(this);
    this.handleHashRoute = this.handleHashRoute.bind(this);
    this.handleOnline = this.handleOnline.bind(this);
+    this.handleColorSchemeChange = this.handleColorSchemeChange.bind(this);
    this.checkForAppUpdate = this.checkForAppUpdate.bind(this);
    this.handleVisibilityEvent = this.handleVisibilityEvent.bind(this);
    this.handleError = this.handleError.bind(this);
@@ -137,6 +138,8 @@ class TinodeWeb extends React.Component {
    this.handleChangeColorSchema = this.handleChangeColorSchema.bind(this);
    this.handleChangeTextSize = this.handleChangeTextSize.bind(this);
    this.handleSendOnEnter = this.handleSendOnEnter.bind(this);
+    this.handleSelectWallpapers = this.handleSelectWallpapers.bind(this);
+    this.handleWallpaperSelected = this.handleWallpaperSelected.bind(this);
    this.handleSettings = this.handleSettings.bind(this);
    this.handleGlobalSettings = this.handleGlobalSettings.bind(this);
    this.handleShowArchive = this.handleShowArchive.bind(this);
@@ -298,10 +301,23 @@ class TinodeWeb extends React.Component {
    this.handleOnlineOff = _ => { this.handleOnline(false); }
    window.addEventListener('offline', this.handleOnlineOff);
    window.addEventListener('hashchange', this.handleHashRoute);
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', this.handleColorSchemeChange);
+
+    // Window/tab visible or invisible for pausing timers.
+    document.addEventListener('visibilitychange', this.handleVisibilityEvent);

    document.documentElement.style.colorScheme = this.state.colorSchema;
    document.documentElement.style.setProperty('--message-text-size', `${this.state.textSize}pt`);

+    const settings = LocalStorageUtil.getObject('settings') || {};
+    if (!settings.wallpaper) {
+      const wallpaper = defaultWallpaper();
+      settings.wallpaper = wallpaper.name || '';
+      settings.wallpaperSize = wallpaper.size || 0;
+      settings.wallpaperBlur = 0;
+    }
+    this.applyWallpaperSettings(settings.wallpaper, settings.wallpaperSize, settings.wallpaperBlur);
+
    // Process background notifications from the service worker.
    if (typeof BroadcastChannel == 'function') {
      const serviceWorkerChannel = new BroadcastChannel('tinode-sw');
@@ -323,9 +339,6 @@ class TinodeWeb extends React.Component {
      this.lastWakeUpCheck = now;
    }, WAKE_UP_TICK);

-    // Window/tab visible or invisible for pausing timers.
-    document.addEventListener('visibilitychange', this.handleVisibilityEvent);
-
    this.setState({
      viewportWidth: document.documentElement.clientWidth,
      viewportHeight: document.documentElement.clientHeight
@@ -385,6 +398,7 @@ class TinodeWeb extends React.Component {
    window.removeEventListener('hashchange', this.handleHashRoute);
    window.removeEventListener('online', this.handleOnlineOn);
    window.removeEventListener('offline', this.handleOnlineOff);
+    window.matchMedia('(prefers-color-scheme: dark)').removeEventListener('change', this.handleColorSchemeChange);
    document.removeEventListener('visibilitychange', this.handleVisibilityEvent);

    clearInterval(this.wakeUpTicker);
@@ -526,8 +540,9 @@ class TinodeWeb extends React.Component {

    if (hash.path && hash.path.length > 0) {
      // Left-side panel selector.
-      if (['register','settings','edit','notif','acc_general','security','support','general','crop',
-          'cred','reset','newtpk','archive','blocked','contacts',''].includes(hash.path[0])) {
+      if (['acc_general','archive','blocked','contacts','cred','crop','edit','general',
+          'newtpk','notif','register','reset','security','settings','support','wallpapers',
+          ''].includes(hash.path[0])) {
        newState.sidePanelSelected = hash.path[0];
      } else {
        console.warn("Unknown sidepanel view", hash.path[0]);
@@ -1235,12 +1250,40 @@ class TinodeWeb extends React.Component {
    });
  }

+  // Manual change of color scheme.
  handleChangeColorSchema(scheme) {
    this.setState({colorSchema: scheme});
    LocalStorageUtil.updateObject('settings', {colorSchema: scheme});
    document.documentElement.style.colorScheme = scheme;
  }

+  // System color scheme has changed.
+  handleColorSchemeChange(event) {
+    console.log("Color scheme change:", event.matches ? 'dark' : 'not dark');
+    // this.setState({colorSchema: event.matches ? 'dark' : 'light'});
+    // document.documentElement.style.setProperty('--wallpaper-invert', '0');
+  }
+
+  handleSelectWallpapers() {
+    this.handleError();
+    HashNavigation.navigateTo(HashNavigation.setUrlSidePanel(window.location.hash, 'wallpapers'));
+  }
+
+  applyWallpaperSettings(wallpaper, size, blur) {
+    console.log("Applying wallpaper settings:", wallpaper, size, blur);
+    document.documentElement.style.setProperty('--wallpaper-url', `url('${wallpaper}')`);
+    document.documentElement.style.setProperty('--wallpaper-repeat', size ? 'repeat' : 'no-repeat');
+    document.documentElement.style.setProperty('--wallpaper-blur', size ? '0px' : `${blur}px`);
+    document.documentElement.style.setProperty('--wallpaper-size', size ? `${size}px` : 'cover');
+    document.documentElement.style.setProperty('--wallpaper-position', size ? 'unset' : 'center');
+  }
+
+  handleWallpaperSelected(wallpaper, size, blur) {
+    this.handleError();
+    LocalStorageUtil.updateObject('settings', {wallpaper: wallpaper, wallpaperSize: size, wallpaperBlur: blur});
+    this.applyWallpaperSettings(wallpaper, size, blur);
+  }
+
  handleChangeTextSize(size) {
    this.setState({textSize: size | 0});
    LocalStorageUtil.updateObject('settings', {textSize: size});
@@ -1370,6 +1413,8 @@ class TinodeWeb extends React.Component {
      path = 'general';
    } else if ('blocked' == parsed.path[0]) {
      path = 'security';
+    } else if ('wallpapers' == parsed.path[0]) {
+      path = 'acc_general';
    } else if (this.state.myUserId) {
      path = 'contacts';
    }
@@ -2134,6 +2179,8 @@ class TinodeWeb extends React.Component {
            onChangeColorSchema={this.handleChangeColorSchema}
            onTextSizeChanged={this.handleChangeTextSize}
            onSendOnEnterChanged={this.handleSendOnEnter}
+            onSelectWallpapers={this.handleSelectWallpapers}
+            onWallpaperSelected={this.handleWallpaperSelected}
            onCredAdd={this.handleCredAdd}
            onCredDelete={this.handleCredDelete}
            onCredConfirm={this.handleCredConfirm}
@@ -2177,6 +2224,8 @@ class TinodeWeb extends React.Component {
            applicationVisible={this.state.applicationVisible}
            colorSchema={this.state.colorSchema}
            sendOnEnter={this.state.sendOnEnter}
+            wallpaper={this.state.wallpaper}
+
            forwardMessage={this.state.forwardMessage}
            onCancelForwardMessage={this.handleHideForwardDialog}

@@ -0,0 +1,120 @@
+// Edit account parameters.
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import HashNavigation from '../lib/navigation.js';
+import { WALLPAPER_DEFAULTS } from '../config.js';
+import imageIndex from '../../img/bkg/index.json';
+
+export default class WallpapersView extends React.PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      tab: WALLPAPER_DEFAULTS.type, // 'patt' | 'img'
+      wallpaper: imageIndex[WALLPAPER_DEFAULTS.type][WALLPAPER_DEFAULTS.index].name,
+      blur: 0,
+    };
+
+    this.blurValues = [0, 1, 2, 4, 8, 16];
+
+    this.handleTabClick = this.handleTabClick.bind(this);
+    this.handleWallpaperSelected = this.handleWallpaperSelected.bind(this);
+    this.handleBlurChanged = this.handleBlurChanged.bind(this);
+  }
+
+  handleTabClick(e) {
+    e.preventDefault();
+    HashNavigation.navigateTo(HashNavigation.addUrlParam(window.location.hash, 'tab', e.currentTarget.dataset.id));
+    this.setState({tab: e.currentTarget.dataset.id});
+  }
+
+  handleWallpaperSelected(e) {
+    let index, type, blur
+    if (!e) {
+      // Restore default.
+      type = WALLPAPER_DEFAULTS.type;
+      index = WALLPAPER_DEFAULTS.index;
+      blur = 0;
+    } else {
+      e.preventDefault();
+      type = this.state.tab;
+      index = e.currentTarget.dataset.id;
+      blur = this.state.blur;
+    }
+    const fname = imageIndex[type][index].name;
+    const size = type == 'patt' ? imageIndex[type][index].size : 0;
+    this.setState({tab: type, wallpaper: fname, blur: 0});
+    this.props.onWallpaperSelected(`../${WALLPAPER_DEFAULTS.path}${fname}`, size, this.blurValues[blur]);
+  }
+
+  handleBlurChanged(e) {
+    e.preventDefault();
+    const blur = e.currentTarget.value;
+    this.setState({blur: blur});
+    // Path relative to CSS file.
+    this.props.onWallpaperSelected(`../${WALLPAPER_DEFAULTS.path}${this.state.wallpaper}`, 0, this.blurValues[blur]);
+  }
+
+  render() {
+    return (
+      <div className="flex-column">
+        <div className="panel-form-row clean-clickable">
+          <a className="flat-button" onClick={() => this.handleWallpaperSelected(null)}>
+            <i className="material-icons">undo</i>&nbsp;
+            <FormattedMessage id="button_restore" defaultMessage="Restore default" description="Reset setting to default"/>
+          </a>
+        </div>
+        <ul className="tabbar">
+          <li className={this.state.tab === 'patt' ? 'active' : null}>
+            <a href="#" data-id="patt" onClick={this.handleTabClick}>
+              <FormattedMessage id="tabtitle_pattern" defaultMessage="pattern"
+                description="Tab title Pattern" />
+            </a>
+          </li>
+          <li className={this.state.tab === 'img' ? 'active' : null}>
+            <a href="#" data-id="img" onClick={this.handleTabClick}>
+              <FormattedMessage id="tabtitle_image" defaultMessage="image"
+                description="Tab title Image" />
+            </a>
+          </li>
+        </ul>
+        <div id="settings-form" className="scrollable-panel">
+        {this.state.tab === 'patt' ?
+          <div className="image-grid">
+            {imageIndex.patt.map((img, idx) => {
+              const selected = this.state.wallpaper === img.name ? ' selected' : '';
+              return <div key={idx} data-id={idx} className={`image-grid-cell${selected}`}
+                onClick={this.handleWallpaperSelected}>
+                <img src={WALLPAPER_DEFAULTS.path + img.name} alt={img.name}
+                  style={{ width: `${img.size}px`, height: `${img.size}px` }}/>
+              </div>
+            })}
+          </div> :
+          <>
+            <div className="panel-form-column">
+              <div className="panel-form-row">
+                <label className="small">
+                  <FormattedMessage id="label_blur_wallpaper" defaultMessage="Blur:"
+                    description="Label adjusting blur amount" />
+                </label>
+              </div>
+              <div className="panel-form-row">
+                <input type="range" id="blur" name="blur" min="0" max="5" step="1"
+                  value={this.state.blur} onChange={this.handleBlurChanged} />
+              </div>
+            </div>
+            <div className="image-grid">
+              {imageIndex.img.map((img, idx) => {
+                const selected = this.state.wallpaper === img.name ? ' selected' : '';
+                return <div key={idx} data-id={idx} className={`image-grid-cell${selected}`}
+                  onClick={this.handleWallpaperSelected}>
+                  <img src={WALLPAPER_DEFAULTS.path + img.pr} alt={img.name} style={{ width: '100%', height: '100%' }}/>
+                </div>
+              })}
+            </div>
+          </>
+        }</div>
+      </div>
+    );
+  }
+}
@@ -136,7 +136,7 @@ class Contact extends React.Component {
        <div className="text-box">
          <div><span className={titleClass}>{title}</span>
            {this.props.isGroup ? <i className="material-icons as-badge">group</i> : null}
-            {this.props.isChannel ? <img src="/img/channel.png" className="channel" alt="channel" /> : null}
+            {this.props.isChannel ? <i className="material-icons as-badge">podcasts</i> : null}
            {!self ? <ContactBadges badges={icon_badges} /> : null}
            {!this.props.deleted ? <UnreadBadge count={this.props.unread} /> : null}
          </div>
@@ -31,7 +31,7 @@ export default class LetterTile extends React.PureComponent {
      // If avatar image is invalid, show a placeholder.
      const className = 'avatar' + (this.props.deleted ? ' deleted' : '');
      avatar = <img className={className} alt="avatar" src={url}
-        onError={e=>{e.target.onerror = null; e.target.src="../img/broken_image.png"}} />;
+        onError={e=>{e.target.onerror = null; e.target.src="img/broken_image.png"}} />;
    } else {
      avatar = null;
    }
@@ -0,0 +1,2 @@
+"use strict";(self.webpackChunktinode_webapp=self.webpackChunktinode_webapp||[]).push([[827],{3827:function(e,a,t){t.r(a),t.d(a,{default:function(){return d}});var l=t(1594),s=t.n(l),r=t(8181),n=t(7151),i=t(9027),c=t(1781);class d extends s().PureComponent{constructor(e){super(e),this.state={tab:i.S.type,wallpaper:c[i.S.type][i.S.index].name,blur:0},this.blurValues=[0,1,2,4,8,16],this.handleTabClick=this.handleTabClick.bind(this),this.handleWallpaperSelected=this.handleWallpaperSelected.bind(this),this.handleBlurChanged=this.handleBlurChanged.bind(this)}handleTabClick(e){e.preventDefault(),n.A.navigateTo(n.A.addUrlParam(window.location.hash,"tab",e.currentTarget.dataset.id)),this.setState({tab:e.currentTarget.dataset.id})}handleWallpaperSelected(e){let a,t,l;e?(e.preventDefault(),t=this.state.tab,a=e.currentTarget.dataset.id,l=this.state.blur):(t=i.S.type,a=i.S.index,l=0);const s=c[t][a].name,r="patt"==t?c[t][a].size:0;this.setState({tab:t,wallpaper:s,blur:0}),this.props.onWallpaperSelected(`../${i.S.path}${s}`,r,this.blurValues[l])}handleBlurChanged(e){e.preventDefault();const a=e.currentTarget.value;this.setState({blur:a}),this.props.onWallpaperSelected(`../${i.S.path}${this.state.wallpaper}`,0,this.blurValues[a])}render(){return s().createElement("div",{className:"flex-column"},s().createElement("div",{className:"panel-form-row clean-clickable"},s().createElement("a",{className:"flat-button",onClick:()=>this.handleWallpaperSelected(null)},s().createElement("i",{className:"material-icons"},"undo")," ",s().createElement(r.FormattedMessage,{id:"button_restore",defaultMessage:[{type:0,value:"Restore default"}]}))),s().createElement("ul",{className:"tabbar"},s().createElement("li",{className:"patt"===this.state.tab?"active":null},s().createElement("a",{href:"#","data-id":"patt",onClick:this.handleTabClick},s().createElement(r.FormattedMessage,{id:"tabtitle_pattern",defaultMessage:[{type:0,value:"pattern"}]}))),s().createElement("li",{className:"img"===this.state.tab?"active":null},s().createElement("a",{href:"#","data-id":"img",onClick:this.handleTabClick},s().createElement(r.FormattedMessage,{id:"tabtitle_image",defaultMessage:[{type:0,value:"image"}]})))),s().createElement("div",{id:"settings-form",className:"scrollable-panel"},"patt"===this.state.tab?s().createElement("div",{className:"image-grid"},c.patt.map((e,a)=>{const t=this.state.wallpaper===e.name?" selected":"";return s().createElement("div",{key:a,"data-id":a,className:`image-grid-cell${t}`,onClick:this.handleWallpaperSelected},s().createElement("img",{src:i.S.path+e.name,alt:e.name,style:{width:`${e.size}px`,height:`${e.size}px`}}))})):s().createElement(s().Fragment,null,s().createElement("div",{className:"panel-form-column"},s().createElement("div",{className:"panel-form-row"},s().createElement("label",{className:"small"},s().createElement(r.FormattedMessage,{id:"label_blur_wallpaper",defaultMessage:[{type:0,value:"Blur:"}]}))),s().createElement("div",{className:"panel-form-row"},s().createElement("input",{type:"range",id:"blur",name:"blur",min:"0",max:"5",step:"1",value:this.state.blur,onChange:this.handleBlurChanged}))),s().createElement("div",{className:"image-grid"},c.img.map((e,a)=>{const t=this.state.wallpaper===e.name?" selected":"";return s().createElement("div",{key:a,"data-id":a,className:`image-grid-cell${t}`,onClick:this.handleWallpaperSelected},s().createElement("img",{src:i.S.path+e.pr,alt:e.name,style:{width:"100%",height:"100%"}}))})))))}}}}]);
+//# sourceMappingURL=827.prod.js.map
@@ -0,0 +1,2 @@
+"use strict";(self.webpackChunktinode_webapp=self.webpackChunktinode_webapp||[]).push([[978],{3978:function(e,a,t){t.r(a),t.d(a,{default:function(){return m}});var l=t(1594),p=t.n(l),n=t(8181),r=t(7151),s=t(9027),i=JSON.parse('{"patt":[{"name":"a00.png","size":200},{"name":"a01.jpg","size":384},{"name":"a02.jpg","size":384},{"name":"a03.jpg","size":384},{"name":"a04.png","size":400},{"name":"a05.jpg","size":400},{"name":"a06.jpg","size":256},{"name":"a07.jpg","size":384},{"name":"a08.jpg","size":384},{"name":"a09.jpg","size":400},{"name":"a10.jpg","size":256},{"name":"a11.png","size":200}],"img":[{"name":"w01.jpg","pr":"p01.jpg"},{"name":"w02.jpg","pr":"p02.jpg"},{"name":"w03.jpg","pr":"p03.jpg"},{"name":"w04.jpg","pr":"p04.jpg"},{"name":"w05.jpg","pr":"p05.jpg"},{"name":"w06.jpg","pr":"p06.jpg"},{"name":"w07.jpg","pr":"p07.jpg"},{"name":"w08.jpg","pr":"p08.jpg"},{"name":"w09.jpg","pr":"p09.jpg"},{"name":"w10.jpg","pr":"p10.jpg"},{"name":"w11.jpg","pr":"p11.jpg"},{"name":"w12.jpg","pr":"p12.jpg"},{"name":"w13.jpg","pr":"p13.jpg"},{"name":"w14.jpg","pr":"p14.jpg"},{"name":"w15.jpg","pr":"p15.jpg"},{"name":"w16.jpg","pr":"p16.jpg"},{"name":"w17.jpg","pr":"p17.jpg"},{"name":"w18.jpg","pr":"p18.jpg"},{"name":"w19.jpg","pr":"p19.jpg"},{"name":"w20.jpg","pr":"p20.jpg"},{"name":"w21.jpg","pr":"p21.jpg"},{"name":"w22.jpg","pr":"p22.jpg"},{"name":"w23.jpg","pr":"p23.jpg"},{"name":"w24.jpg","pr":"p24.jpg"}]}');class m extends p().PureComponent{constructor(e){super(e),this.state={tab:s.Vn.type,wallpaper:i[s.Vn.type][s.Vn.index].name,blur:0},this.blurValues=[0,1,2,4,8,16],this.handleTabClick=this.handleTabClick.bind(this),this.handleWallpaperSelected=this.handleWallpaperSelected.bind(this),this.handleBlurChanged=this.handleBlurChanged.bind(this)}handleTabClick(e){e.preventDefault(),r.A.navigateTo(r.A.addUrlParam(window.location.hash,"tab",e.currentTarget.dataset.id)),this.setState({tab:e.currentTarget.dataset.id})}handleWallpaperSelected(e){let a,t,l;e?(e.preventDefault(),t=this.state.tab,a=e.currentTarget.dataset.id,l=this.state.blur):(t=s.Vn.type,a=s.Vn.index,l=0);const p=i[t][a].name,n="patt"==t?i[t][a].size:0;this.setState({tab:t,wallpaper:p,blur:0}),this.props.onWallpaperSelected(`../${s.nH}${p}`,n,this.blurValues[l])}handleBlurChanged(e){e.preventDefault();const a=e.currentTarget.value;this.setState({blur:a}),this.props.onWallpaperSelected(`../${s.nH}${this.state.wallpaper}`,0,this.blurValues[a])}render(){return p().createElement("div",{className:"flex-column"},p().createElement("div",{className:"panel-form-row clean-clickable"},p().createElement("a",{className:"flat-button",onClick:()=>this.handleWallpaperSelected(null)},p().createElement("i",{className:"material-icons"},"undo")," ",p().createElement(n.FormattedMessage,{id:"button_restore",defaultMessage:[{type:0,value:"Restore default"}]}))),p().createElement("ul",{className:"tabbar"},p().createElement("li",{className:"patt"===this.state.tab?"active":null},p().createElement("a",{href:"#","data-id":"patt",onClick:this.handleTabClick},p().createElement(n.FormattedMessage,{id:"tabtitle_pattern",defaultMessage:[{type:0,value:"pattern"}]}))),p().createElement("li",{className:"img"===this.state.tab?"active":null},p().createElement("a",{href:"#","data-id":"img",onClick:this.handleTabClick},p().createElement(n.FormattedMessage,{id:"tabtitle_image",defaultMessage:[{type:0,value:"image"}]})))),p().createElement("div",{id:"settings-form",className:"scrollable-panel"},"patt"===this.state.tab?p().createElement("div",{className:"image-grid"},i.patt.map((e,a)=>{const t=this.state.wallpaper===e.name?" selected":"";return p().createElement("div",{key:a,"data-id":a,className:`image-grid-cell${t}`,onClick:this.handleWallpaperSelected},p().createElement("img",{src:s.nH+e.name,alt:e.name,style:{width:`${e.size}px`,height:`${e.size}px`}}))})):p().createElement(p().Fragment,null,p().createElement("div",{className:"panel-form-column"},p().createElement("div",{className:"panel-form-row"},p().createElement("label",{className:"small"},p().createElement(n.FormattedMessage,{id:"label_blur_wallpaper",defaultMessage:[{type:0,value:"Blur:"}]}))),p().createElement("div",{className:"panel-form-row"},p().createElement("input",{type:"range",id:"blur",name:"blur",min:"0",max:"5",step:"1",value:this.state.blur,onChange:this.handleBlurChanged}))),p().createElement("div",{className:"image-grid"},i.img.map((e,a)=>{const t=this.state.wallpaper===e.name?" selected":"";return p().createElement("div",{key:a,"data-id":a,className:`image-grid-cell${t}`,onClick:this.handleWallpaperSelected},p().createElement("img",{src:s.nH+e.pr,alt:e.name,style:{width:"100%",height:"100%"}}))})))))}}}}]);
+//# sourceMappingURL=978.prod.js.map
@@ -2,6 +2,16 @@
 /******/ 	"use strict";
 /******/ 	var __webpack_modules__ = ({

+/***/ "./img/bkg/index.json":
+/*!****************************!*\
+  !*** ./img/bkg/index.json ***!
+  \****************************/
+/***/ (function(module) {
+
+module.exports = /*#__PURE__*/JSON.parse('{"patt":[{"name":"a00.png","size":200},{"name":"a01.jpg","size":384},{"name":"a02.jpg","size":384},{"name":"a03.jpg","size":384},{"name":"a04.png","size":400},{"name":"a05.jpg","size":400},{"name":"a06.jpg","size":256},{"name":"a07.jpg","size":384},{"name":"a08.jpg","size":384},{"name":"a09.jpg","size":400},{"name":"a10.jpg","size":256},{"name":"a11.png","size":200}],"img":[{"name":"w01.jpg","pr":"p01.jpg"},{"name":"w02.jpg","pr":"p02.jpg"},{"name":"w03.jpg","pr":"p03.jpg"},{"name":"w04.jpg","pr":"p04.jpg"},{"name":"w05.jpg","pr":"p05.jpg"},{"name":"w06.jpg","pr":"p06.jpg"},{"name":"w07.jpg","pr":"p07.jpg"},{"name":"w08.jpg","pr":"p08.jpg"},{"name":"w09.jpg","pr":"p09.jpg"},{"name":"w10.jpg","pr":"p10.jpg"},{"name":"w11.jpg","pr":"p11.jpg"},{"name":"w12.jpg","pr":"p12.jpg"},{"name":"w13.jpg","pr":"p13.jpg"},{"name":"w14.jpg","pr":"p14.jpg"},{"name":"w15.jpg","pr":"p15.jpg"},{"name":"w16.jpg","pr":"p16.jpg"},{"name":"w17.jpg","pr":"p17.jpg"},{"name":"w18.jpg","pr":"p18.jpg"},{"name":"w19.jpg","pr":"p19.jpg"},{"name":"w20.jpg","pr":"p20.jpg"},{"name":"w21.jpg","pr":"p21.jpg"},{"name":"w22.jpg","pr":"p22.jpg"},{"name":"w23.jpg","pr":"p23.jpg"},{"name":"w24.jpg","pr":"p24.jpg"}]}');
+
+/***/ }),
+
 /***/ "./node_modules/@firebase/app/dist/esm/index.esm2017.js":
 /*!**************************************************************!*\
  !*** ./node_modules/@firebase/app/dist/esm/index.esm2017.js ***!
@@ -7273,7 +7283,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   VIDEO_PREVIEW_DIM: function() { return /* binding */ VIDEO_PREVIEW_DIM; },
 /* harmony export */   VIDEO_THUMBNAIL_WIDTH: function() { return /* binding */ VIDEO_THUMBNAIL_WIDTH; },
 /* harmony export */   WAKE_UP_TICK: function() { return /* binding */ WAKE_UP_TICK; },
-/* harmony export */   WAKE_UP_TIMEOUT: function() { return /* binding */ WAKE_UP_TIMEOUT; }
+/* harmony export */   WAKE_UP_TIMEOUT: function() { return /* binding */ WAKE_UP_TIMEOUT; },
+/* harmony export */   WALLPAPER_DEFAULTS: function() { return /* binding */ WALLPAPER_DEFAULTS; }
 /* harmony export */ });
 /* harmony import */ var _version_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./version.js */ "./src/version.js");

@@ -7332,6 +7343,11 @@ const TOAST_DURATION = 3_000;
 const DEFAULT_COLOR_SCHEME = 'light dark';
 const DEFAULT_TEXT_SIZE = 10;
 const DRAFTY_FR_MIME_TYPE_LEGACY = 'application/json';
+const WALLPAPER_DEFAULTS = {
+  type: 'patt',
+  index: 0,
+  path: 'img/bkg/'
+};

 /***/ }),

@@ -8463,6 +8479,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   asEmail: function() { return /* binding */ asEmail; },
 /* harmony export */   asPhone: function() { return /* binding */ asPhone; },
 /* harmony export */   cancelablePromise: function() { return /* binding */ cancelablePromise; },
+/* harmony export */   defaultWallpaper: function() { return /* binding */ defaultWallpaper; },
 /* harmony export */   deliveryMarker: function() { return /* binding */ deliveryMarker; },
 /* harmony export */   isUrlRelative: function() { return /* binding */ isUrlRelative; },
 /* harmony export */   sanitizeUrl: function() { return /* binding */ sanitizeUrl; },
@@ -8473,6 +8490,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ });
 /* harmony import */ var tinode_sdk__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tinode-sdk */ "tinode-sdk");
 /* harmony import */ var tinode_sdk__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(tinode_sdk__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _config_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../config.js */ "./src/config.js");
+

 function updateFavicon(count) {
  const oldIcon = document.getElementById('shortcut-icon');
@@ -8655,6 +8674,14 @@ function cancelablePromise(promise) {
  };
 }
 ;
+function defaultWallpaper() {
+  const wallpaperIndex = __webpack_require__(/*! ../../img/bkg/index.json */ "./img/bkg/index.json");
+  const wp = wallpaperIndex[_config_js__WEBPACK_IMPORTED_MODULE_1__.WALLPAPER_DEFAULTS.type][_config_js__WEBPACK_IMPORTED_MODULE_1__.WALLPAPER_DEFAULTS.index];
+  return {
+    name: `../${_config_js__WEBPACK_IMPORTED_MODULE_1__.WALLPAPER_DEFAULTS.path}${wp.name}`,
+    size: wp.size
+  };
+}

 /***/ }),

@@ -8723,6 +8750,8 @@ class AccGeneralView extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureC
    return react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
      id: "settings-form",
      className: "scrollable-panel"
+    }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+      className: "panel-form-column"
    }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
      className: "panel-form-row"
    }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("label", {
@@ -8755,7 +8784,7 @@ class AccGeneralView extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureC
        "value": "System default"
      }]
    }), "\xA0", react__WEBPACK_IMPORTED_MODULE_0___default().createElement("img", {
-      src: "../img/routine.svg",
+      src: "img/routine.svg",
      style: {
        verticalAlign: 'top',
        width: '1.6rem',
@@ -8799,9 +8828,26 @@ class AccGeneralView extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureC
      }]
    }), "\xA0", react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
      className: "material-icons blue large"
-    }, "dark_mode"))))), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    }, "dark_mode")))))), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
      className: "hr"
    }), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+      className: "panel-form-row clean-clickable"
+    }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+      onClick: this.props.onSelectWallpapers,
+      className: "flat-button"
+    }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
+      className: "material-icons"
+    }, "wallpaper"), "\xA0", react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_intl__WEBPACK_IMPORTED_MODULE_1__.FormattedMessage, {
+      id: "wallpapers",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Wallpapers"
+      }]
+    }))), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+      className: "hr"
+    }), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+      className: "panel-form-column"
+    }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
      className: "panel-form-row"
    }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("label", {
      className: "small"
@@ -8812,8 +8858,6 @@ class AccGeneralView extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureC
        "value": "Text size:"
      }]
    }))), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
-      className: "panel-form-column"
-    }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
      className: "panel-form-row"
    }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("input", {
      type: "range",
@@ -11398,7 +11442,7 @@ class NewTopicView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
    }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", {
      className: "tabbar"
    }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", {
-      className: this.state.tabSelected === "find" ? "active" : null
+      className: this.state.tabSelected === 'find' ? 'active' : null
    }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
      href: "#",
      "data-id": "find",
@@ -11410,7 +11454,7 @@ class NewTopicView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
        "value": "find"
      }]
    }))), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", {
-      className: this.state.tabSelected === "grp" ? "active" : null
+      className: this.state.tabSelected === 'grp' ? 'active' : null
    }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
      href: "#",
      "data-id": "grp",
@@ -11422,7 +11466,7 @@ class NewTopicView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
        "value": "new group"
      }]
    }))), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", {
-      className: this.state.tabSelected === "byid" ? "active" : null
+      className: this.state.tabSelected === 'byid' ? 'active' : null
    }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
      href: "#",
      "data-id": "byid",
@@ -11649,6 +11693,7 @@ const AccSecurityView = react__WEBPACK_IMPORTED_MODULE_0___default().lazy(_ => _
 const PasswordResetView = react__WEBPACK_IMPORTED_MODULE_0___default().lazy(_ => Promise.all(/*! import() */[__webpack_require__.e("vendors-node_modules_libphonenumber-js_examples_mobile_json_js-node_modules_libphonenumber-js-7e28c7"), __webpack_require__.e("src_views_password-reset-view_jsx")]).then(__webpack_require__.bind(__webpack_require__, /*! ./password-reset-view.jsx */ "./src/views/password-reset-view.jsx")));


+const WallpapersView = react__WEBPACK_IMPORTED_MODULE_0___default().lazy(_ => __webpack_require__.e(/*! import() */ "src_views_wallpapers_jsx").then(__webpack_require__.bind(__webpack_require__, /*! ./wallpapers.jsx */ "./src/views/wallpapers.jsx")));
 const messages = (0,react_intl__WEBPACK_IMPORTED_MODULE_1__.defineMessages)({
  login: {
    id: "sidepanel_title_login",
@@ -11754,6 +11799,13 @@ const messages = (0,react_intl__WEBPACK_IMPORTED_MODULE_1__.defineMessages)({
      "type": 0,
      "value": "Blocked Chats"
    }]
+  },
+  wallpapers: {
+    id: "wallpapers",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Wallpapers"
+    }]
  }
 });
 class SidepanelView extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureComponent) {
@@ -11864,6 +11916,7 @@ class SidepanelView extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCo
      onError: this.props.onError
    }) : view === 'acc_general' ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_acc_general_view_jsx__WEBPACK_IMPORTED_MODULE_7__["default"], {
      colorSchema: this.props.colorSchema,
+      onSelectWallpapers: this.props.onSelectWallpapers,
      textSize: this.props.textSize,
      sendOnEnter: this.props.sendOnEnter,
      onChangeColorSchema: this.props.onChangeColorSchema,
@@ -11898,7 +11951,19 @@ class SidepanelView extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCo
    })) : view === 'support' ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_acc_support_view_jsx__WEBPACK_IMPORTED_MODULE_9__["default"], {
      serverAddress: this.props.serverAddress,
      serverVersion: this.props.serverVersion
-    }) : view === 'contacts' || view == 'archive' || view == 'blocked' ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_contacts_view_jsx__WEBPACK_IMPORTED_MODULE_6__["default"], {
+    }) : view === 'wallpapers' ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react__WEBPACK_IMPORTED_MODULE_0__.Suspense, {
+      fallback: react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+        className: "panel-form-row"
+      }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_intl__WEBPACK_IMPORTED_MODULE_1__.FormattedMessage, {
+        id: "loading_note",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Loading..."
+        }]
+      }))
+    }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement(WallpapersView, {
+      onWallpaperSelected: this.props.onWallpaperSelected
+    })) : view === 'contacts' || view == 'archive' || view == 'blocked' ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_contacts_view_jsx__WEBPACK_IMPORTED_MODULE_6__["default"], {
      tinode: this.props.tinode,
      myUserId: this.props.myUserId,
      connected: this.props.connected,
@@ -12101,6 +12166,7 @@ class TinodeWeb extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
    this.handleResize = this.handleResize.bind(this);
    this.handleHashRoute = this.handleHashRoute.bind(this);
    this.handleOnline = this.handleOnline.bind(this);
+    this.handleColorSchemeChange = this.handleColorSchemeChange.bind(this);
    this.checkForAppUpdate = this.checkForAppUpdate.bind(this);
    this.handleVisibilityEvent = this.handleVisibilityEvent.bind(this);
    this.handleError = this.handleError.bind(this);
@@ -12130,6 +12196,8 @@ class TinodeWeb extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
    this.handleChangeColorSchema = this.handleChangeColorSchema.bind(this);
    this.handleChangeTextSize = this.handleChangeTextSize.bind(this);
    this.handleSendOnEnter = this.handleSendOnEnter.bind(this);
+    this.handleSelectWallpapers = this.handleSelectWallpapers.bind(this);
+    this.handleWallpaperSelected = this.handleWallpaperSelected.bind(this);
    this.handleSettings = this.handleSettings.bind(this);
    this.handleGlobalSettings = this.handleGlobalSettings.bind(this);
    this.handleShowArchive = this.handleShowArchive.bind(this);
@@ -12259,8 +12327,18 @@ class TinodeWeb extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
    };
    window.addEventListener('offline', this.handleOnlineOff);
    window.addEventListener('hashchange', this.handleHashRoute);
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', this.handleColorSchemeChange);
+    document.addEventListener('visibilitychange', this.handleVisibilityEvent);
    document.documentElement.style.colorScheme = this.state.colorSchema;
    document.documentElement.style.setProperty('--message-text-size', `${this.state.textSize}pt`);
+    const settings = _lib_local_storage_js__WEBPACK_IMPORTED_MODULE_16__["default"].getObject('settings') || {};
+    if (!settings.wallpaper) {
+      const wallpaper = (0,_lib_utils_js__WEBPACK_IMPORTED_MODULE_19__.defaultWallpaper)();
+      settings.wallpaper = wallpaper.name || '';
+      settings.wallpaperSize = wallpaper.size || 0;
+      settings.wallpaperBlur = 0;
+    }
+    this.applyWallpaperSettings(settings.wallpaper, settings.wallpaperSize, settings.wallpaperBlur);
    if (typeof BroadcastChannel == 'function') {
      const serviceWorkerChannel = new BroadcastChannel('tinode-sw');
      serviceWorkerChannel.addEventListener('message', this.handlePushMessage);
@@ -12275,7 +12353,6 @@ class TinodeWeb extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
      }
      this.lastWakeUpCheck = now;
    }, _config_js__WEBPACK_IMPORTED_MODULE_11__.WAKE_UP_TICK);
-    document.addEventListener('visibilitychange', this.handleVisibilityEvent);
    this.setState({
      viewportWidth: document.documentElement.clientWidth,
      viewportHeight: document.documentElement.clientHeight
@@ -12320,6 +12397,7 @@ class TinodeWeb extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
    window.removeEventListener('hashchange', this.handleHashRoute);
    window.removeEventListener('online', this.handleOnlineOn);
    window.removeEventListener('offline', this.handleOnlineOff);
+    window.matchMedia('(prefers-color-scheme: dark)').removeEventListener('change', this.handleColorSchemeChange);
    document.removeEventListener('visibilitychange', this.handleVisibilityEvent);
    clearInterval(this.wakeUpTicker);
  }
@@ -12468,7 +12546,7 @@ class TinodeWeb extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
      newTopicTabSelected: hash.params.tab
    };
    if (hash.path && hash.path.length > 0) {
-      if (['register', 'settings', 'edit', 'notif', 'acc_general', 'security', 'support', 'general', 'crop', 'cred', 'reset', 'newtpk', 'archive', 'blocked', 'contacts', ''].includes(hash.path[0])) {
+      if (['acc_general', 'archive', 'blocked', 'contacts', 'cred', 'crop', 'edit', 'general', 'newtpk', 'notif', 'register', 'reset', 'security', 'settings', 'support', 'wallpapers', ''].includes(hash.path[0])) {
        newState.sidePanelSelected = hash.path[0];
      } else {
        console.warn("Unknown sidepanel view", hash.path[0]);
@@ -13067,6 +13145,30 @@ class TinodeWeb extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
    });
    document.documentElement.style.colorScheme = scheme;
  }
+  handleColorSchemeChange(event) {
+    console.log("Color scheme change:", event.matches ? 'dark' : 'not dark');
+  }
+  handleSelectWallpapers() {
+    this.handleError();
+    _lib_navigation_js__WEBPACK_IMPORTED_MODULE_17__["default"].navigateTo(_lib_navigation_js__WEBPACK_IMPORTED_MODULE_17__["default"].setUrlSidePanel(window.location.hash, 'wallpapers'));
+  }
+  applyWallpaperSettings(wallpaper, size, blur) {
+    console.log("Applying wallpaper settings:", wallpaper, size, blur);
+    document.documentElement.style.setProperty('--wallpaper-url', `url('${wallpaper}')`);
+    document.documentElement.style.setProperty('--wallpaper-repeat', size ? 'repeat' : 'no-repeat');
+    document.documentElement.style.setProperty('--wallpaper-blur', size ? '0px' : `${blur}px`);
+    document.documentElement.style.setProperty('--wallpaper-size', size ? `${size}px` : 'cover');
+    document.documentElement.style.setProperty('--wallpaper-position', size ? 'unset' : 'center');
+  }
+  handleWallpaperSelected(wallpaper, size, blur) {
+    this.handleError();
+    _lib_local_storage_js__WEBPACK_IMPORTED_MODULE_16__["default"].updateObject('settings', {
+      wallpaper: wallpaper,
+      wallpaperSize: size,
+      wallpaperBlur: blur
+    });
+    this.applyWallpaperSettings(wallpaper, size, blur);
+  }
  handleChangeTextSize(size) {
    this.setState({
      textSize: size | 0
@@ -13203,6 +13305,8 @@ class TinodeWeb extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
      path = 'general';
    } else if ('blocked' == parsed.path[0]) {
      path = 'security';
+    } else if ('wallpapers' == parsed.path[0]) {
+      path = 'acc_general';
    } else if (this.state.myUserId) {
      path = 'contacts';
    }
@@ -13887,6 +13991,8 @@ class TinodeWeb extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
      onChangeColorSchema: this.handleChangeColorSchema,
      onTextSizeChanged: this.handleChangeTextSize,
      onSendOnEnterChanged: this.handleSendOnEnter,
+      onSelectWallpapers: this.handleSelectWallpapers,
+      onWallpaperSelected: this.handleWallpaperSelected,
      onCredAdd: this.handleCredAdd,
      onCredDelete: this.handleCredDelete,
      onCredConfirm: this.handleCredConfirm,
@@ -13924,6 +14030,7 @@ class TinodeWeb extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
      applicationVisible: this.state.applicationVisible,
      colorSchema: this.state.colorSchema,
      sendOnEnter: this.state.sendOnEnter,
+      wallpaper: this.state.wallpaper,
      forwardMessage: this.state.forwardMessage,
      onCancelForwardMessage: this.handleHideForwardDialog,
      callTopic: this.state.callTopic,
@@ -16857,11 +16964,9 @@ class Contact extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component) {
      className: titleClass
    }, title), this.props.isGroup ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
      className: "material-icons as-badge"
-    }, "group") : null, this.props.isChannel ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement("img", {
-      src: "/img/channel.png",
-      className: "channel",
-      alt: "channel"
-    }) : null, !self ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_contact_badges_jsx__WEBPACK_IMPORTED_MODULE_3__["default"], {
+    }, "group") : null, this.props.isChannel ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
+      className: "material-icons as-badge"
+    }, "podcasts") : null, !self ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_contact_badges_jsx__WEBPACK_IMPORTED_MODULE_3__["default"], {
      badges: icon_badges
    }) : null, !this.props.deleted ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_unread_badge_jsx__WEBPACK_IMPORTED_MODULE_5__["default"], {
      count: this.props.unread
@@ -18746,7 +18851,7 @@ class LetterTile extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCompo
        src: url,
        onError: e => {
          e.target.onerror = null;
-          e.target.src = "../img/broken_image.png";
+          e.target.src = "img/broken_image.png";
        }
      });
    } else {
@@ -21405,6 +21510,7 @@ const messageLoader = {
  'en': _ => __webpack_require__.e(/*! import() */ "src_i18n_min_en_json").then(__webpack_require__.t.bind(__webpack_require__, /*! ./i18n.min/en.json */ "./src/i18n.min/en.json", 19)),
  'es': _ => __webpack_require__.e(/*! import() */ "src_i18n_min_es_json").then(__webpack_require__.t.bind(__webpack_require__, /*! ./i18n.min/es.json */ "./src/i18n.min/es.json", 19)),
  'fr': _ => __webpack_require__.e(/*! import() */ "src_i18n_min_fr_json").then(__webpack_require__.t.bind(__webpack_require__, /*! ./i18n.min/fr.json */ "./src/i18n.min/fr.json", 19)),
+  'it': _ => __webpack_require__.e(/*! import() */ "src_i18n_min_it_json").then(__webpack_require__.t.bind(__webpack_require__, /*! ./i18n.min/it.json */ "./src/i18n.min/it.json", 19)),
  'ko': _ => __webpack_require__.e(/*! import() */ "src_i18n_min_ko_json").then(__webpack_require__.t.bind(__webpack_require__, /*! ./i18n.min/ko.json */ "./src/i18n.min/ko.json", 19)),
  'ro': _ => __webpack_require__.e(/*! import() */ "src_i18n_min_ro_json").then(__webpack_require__.t.bind(__webpack_require__, /*! ./i18n.min/ro.json */ "./src/i18n.min/ro.json", 19)),
  'ru': _ => __webpack_require__.e(/*! import() */ "src_i18n_min_ru_json").then(__webpack_require__.t.bind(__webpack_require__, /*! ./i18n.min/ru.json */ "./src/i18n.min/ru.json", 19)),
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
dev	b794302731	chore: seed migration objects batch 17	2026-10-18 14:11:45 +08:00
dev	ef03998b29	chore: seed migration objects batch 16	2026-10-18 14:11:41 +08:00
dev	06837f7d5c	chore: seed migration objects batch 15	2026-10-18 14:11:37 +08:00
dev	00965c074f	chore: seed migration objects batch 14	2026-10-18 14:11:33 +08:00
dev	7b0110d2fd	chore: seed migration objects batch 13	2026-10-18 14:11:28 +08:00
dev	8454ae6972	chore: seed migration objects batch 12	2026-10-18 14:11:21 +08:00
dev	26493939a9	chore: seed migration objects batch 11	2026-10-18 14:11:14 +08:00
dev	8399a36098	chore: seed migration objects batch 10	2026-10-18 14:11:06 +08:00
dev	f6c842502a	chore: seed migration objects batch 9	2026-10-18 14:10:59 +08:00
dev	54f31a1993	chore: seed migration objects batch 8	2026-10-18 14:10:51 +08:00
dev	9530227c9c	chore: seed migration objects batch 7	2026-10-18 14:10:44 +08:00
dev	a5da009512	chore: seed migration objects batch 6	2026-10-18 14:10:37 +08:00
dev	bf33a59ac9	chore: seed migration objects batch 5	2026-10-18 14:10:30 +08:00
dev	2feb1a2b1d	chore: seed migration objects batch 4	2026-10-18 14:10:23 +08:00
dev	9d425d6704	chore: seed migration objects batch 3	2026-10-18 14:10:16 +08:00
dev	b2ca4d4976	chore: seed migration objects batch 2	2026-10-18 14:10:10 +08:00
dev	1c7f386195	chore: seed migration objects batch 1	2026-10-18 14:09:45 +08:00