[feature] Make instance thumbnail configurable via admin panel (#973)

* [feature] Make instance thumbnail configurable via admin panel

* log db errors in InstanceToAPIInstance

* only update instance in db if necessary

* start adding tests

* finish test

3 files changed, 22 insertions, 25 deletions

diff --git a/web/source/settings/admin/settings.js b/web/source/settings/admin/settings.js
index eb6e8b267..88f32624a 100644
--- a/web/source/settings/admin/settings.js
+++ b/web/source/settings/admin/settings.js
@@ -36,6 +36,7 @@ const {
 
 module.exports = function AdminSettings() {
 	const dispatch = Redux.useDispatch();
+	const instance = Redux.useSelector(state => state.instances.adminSettings);
 
 	const [errorMsg, setError] = React.useState("");
 	const [statusMsg, setStatus] = React.useState("");
@@ -54,6 +55,23 @@ module.exports = function AdminSettings() {
 				placeHolder="My GoToSocial instance"
 			/>
 
+			<div className="file-upload">
+				<h3>Instance thumbnail</h3>
+				<div>
+					<img className="preview avatar" src={instance.thumbnail} alt={instance.thumbnail ? `Thumbnail image for the instance` : "No instance thumbnail image set"} />
+					<File 
+						id="thumbnail"
+						fileType="image/*"
+					/>
+				</div>
+			</div>
+
+			<TextInput
+				id="thumbnail_description"
+				name="Instance thumbnail description"
+				placeHolder="A cute little picture of a smiling sloth."
+			/>
+
 			<TextArea
 				id="short_description"
 				name="Short description"
@@ -82,27 +100,6 @@ module.exports = function AdminSettings() {
 				placeHolder=""
 			/>
 
-			{/* <div className="file-upload">
-				<h3>Instance avatar</h3>
-				<div>
-					<img className="preview avatar" src={instance.avatar} alt={instance.avatar ? `Avatar image for the instance` : "No instance avatar image set"} />
-					<File 
-						id="avatar"
-						fileType="image/*"
-					/>
-				</div>
-			</div>
-
-			<div className="file-upload">
-				<h3>Instance header</h3>
-				<div>
-					<img className="preview header" src={instance.header} alt={instance.header ? `Header image for the instance` : "No instance header image set"} />
-					<File 
-						id="header"
-						fileType="image/*"
-					/>
-				</div>
-			</div> */}
 			<Submit onClick={updateSettings} label="Save" errorMsg={errorMsg} statusMsg={statusMsg} />
 		</div>
 	);
diff --git a/web/source/settings/lib/api/admin.js b/web/source/settings/lib/api/admin.js
index 5f4fa1d1f..4ac17ee6a 100644
--- a/web/source/settings/lib/api/admin.js
+++ b/web/source/settings/lib/api/admin.js
@@ -32,9 +32,9 @@ module.exports = function ({ apiCall, getChanges }) {
 					const state = getState().instances.adminSettings;
 
 					const update = getChanges(state, {
-						formKeys: ["title", "short_description", "description", "contact_account.username", "email", "terms"],
+						formKeys: ["title", "short_description", "description", "contact_account.username", "email", "terms", "thumbnail_description"],
 						renamedKeys: {"contact_account.username": "contact_username"},
-						// fileKeys: ["avatar", "header"]
+						fileKeys: ["thumbnail"]
 					});
 
 					return dispatch(apiCall("PATCH", "/api/v1/instance", update, "form"));
diff --git a/web/template/header.tmpl b/web/template/header.tmpl
index f1cfec026..2fd25e292 100644
--- a/web/template/header.tmpl
+++ b/web/template/header.tmpl
@@ -20,7 +20,7 @@
 	{{ end }}<meta name="og:image" content="{{ .ogMeta.Image }}">
 	{{ if .ogMeta.ImageWidth }}<meta name="og:image:width" content="{{ .ogMeta.ImageWidth }}">
 	<meta name="og:image:height" content="{{ .ogMeta.ImageHeight }}">
-	{{ end }}{{ end }}<link rel="shortcut icon" href="/assets/logo.png" type="image/png">
+	{{ end }}{{ end }}<link rel="shortcut icon" href="{{ .instance.Thumbnail }}" type="{{ if .instance.ThumbnailType }}{{ .instance.ThumbnailType }}{{ else }}image/png{{ end }}">
 	<link rel="stylesheet" href="/assets/dist/_colors.css">
 	<link rel="stylesheet" href="/assets/dist/base.css">
 	{{range .stylesheets}}<link rel="stylesheet" href="{{.}}">
@@ -30,7 +30,7 @@
 	<div class="page">
 		<header>
 			<a aria-label="instance homepage" href="/" class="nounderline header">
-				<img src="/assets/logo.png" alt="Instance Logo"/>
+				<img src="{{ .instance.Thumbnail }}" alt="{{ if .instance.ThumbnailDescription }}{{ .instance.ThumbnailDescription }}{{ else }}Instance Logo{{ end }}"/>
 				<div>
 					<h1>
 						{{.instance.Title}}