added bookmark size setting

db.go

@@ -20,8 +20,8 @@ var (
 	GetBookmarksBySessionIdOrdered = advsql.QueryMany(Database, "SELECT * FROM bookmarks WHERE session_id = ? ORDER BY order_priority", ScanBookmarkPkFirst)
 	DeleteBookmarksBySessionID     = advsql.Delete(Database, "DELETE FROM bookmarks WHERE session_id = ?")
 
-	InsertSettings         = advsql.Insert(Database, "INSERT INTO settings VALUES (?, ?, ?, ?, ?)", ScanSettingsPkFirst)
-	UpdateSettings         = advsql.Update(Database, "UPDATE settings SET background_color = ?, foreground_color = ?, search_query = ?, border_radius = ? WHERE session_id = ?", ScanSettingsPkLast)
+	InsertSettings         = advsql.Insert(Database, "INSERT INTO settings VALUES (?, ?, ?, ?, ?, ?)", ScanSettingsPkFirst)
+	UpdateSettings         = advsql.Update(Database, "UPDATE settings SET background_color = ?, foreground_color = ?, search_query = ?, border_radius = ?, bookmark_size = ? WHERE session_id = ?", ScanSettingsPkLast)
 	GetSettingsBySessionID = advsql.QueryOne(Database, "SELECT * FROM settings WHERE session_id = ?", ScanSettingsPkFirst)
 )
 
@@ -83,9 +83,9 @@ func ScanBookmarkPkLast(u *Bookmark, encode advsql.ScanFunc) error {
 }
 
 func ScanSettingsPkFirst(u *Settings, encode advsql.ScanFunc) error {
-	return encode(&u.SessionID, &u.Background, &u.Foreground, &u.Search, &u.BorderRadius)
+	return encode(&u.SessionID, &u.Background, &u.Foreground, &u.Search, &u.BorderRadius, &u.BookmarkSize)
 }
 
 func ScanSettingsPkLast(u *Settings, encode advsql.ScanFunc) error {
-	return encode(&u.Background, &u.Foreground, &u.Search, &u.BorderRadius, &u.SessionID)
+	return encode(&u.Background, &u.Foreground, &u.Search, &u.BorderRadius, &u.BookmarkSize, &u.SessionID)
 }

settings.go

@@ -7,6 +7,7 @@ type Settings struct {
 	Foreground   string `json:"foreground_color"`
 	Search       string `json:"search_query"`
 	BorderRadius string `json:"border_radius"`
+	BookmarkSize string `json:"bookmark_size"`
 }
 
 func DefaultSettings() *Settings {
@@ -15,5 +16,6 @@ func DefaultSettings() *Settings {
 		Foreground:   "#ffffff",
 		Search:       "https://duckduckgo.com/?q=%s",
 		BorderRadius: "1.5%",
+		BookmarkSize: "10em",
 	}
 }

static/customize.js

@@ -4,10 +4,15 @@ function main() {
 	const bgColor = document.querySelector("#bg-color");
 	const fgColor = document.querySelector("#fg-color");
 	const borderRadius = document.querySelector("#border-radius");
+	const bookmarkSize = document.querySelector("#bookmark-size");
 
 	bgColor.addEventListener("change", () => document.body.style.backgroundColor = bgColor.value);
 	fgColor.addEventListener("change", () => document.body.style.color = fgColor.value);
 	borderRadius.addEventListener("change", () => document.querySelector(":root").style.setProperty("--bookmark-border-radius", borderRadius.value));
+	bookmarkSize.addEventListener("change", () => {
+		document.querySelector(":root").style.setProperty("--bookmark-width", bookmarkSize.value);
+		document.querySelector(":root").style.setProperty("--bookmark-height", bookmarkSize.value);
+	});
 
 	const save = document.querySelector("#button");
 	save.addEventListener("click", saveChanges);
@@ -37,7 +42,8 @@ function saveChanges() {
 		background_color: document.querySelector("#bg-color").value,
 		foreground_color: document.querySelector("#fg-color").value,
 		search_query: document.querySelector("#search-string").value,
-		border_radius: document.querySelector("#border-radius").value
+		border_radius: document.querySelector("#border-radius").value,
+		bookmark_size: document.querySelector("#bookmark-size").value
 	};
 
 	const data = { bookmarks, settings }

templates/customize.html

@@ -11,6 +11,8 @@
 	<style>
 		:root {
 			--bookmark-border-radius: {{ .Settings.BorderRadius }};
+			--bookmark-width: {{ .Settings.BookmarkSize }};
+			--bookmark-height: {{ .Settings.BookmarkSize }};
 		}
 		body {
 			background-color: {{ .Settings.Background }};
@@ -25,6 +27,13 @@
 		<option value="100%">100%</option>
 		<option value="0px">0px</option>
 	</datalist>
+	<datalist id="bookmark-sizes">
+		<option value="200px">200px</option>
+		<option value="10em">10em</option>
+		<option value="5cm">5cm</option>
+		<option value="50mm">50mm</option>
+		<option value="2in">2in</option>
+	</datalist>
 	<datalist id="image-paddings">
 		<option value="10%">10%</option>
 		<option value="0px">0px</option>
@@ -54,6 +63,9 @@
 				<label for="fg-color">{{ .Translate "Foreground color" }}</label>
 				<input type="color" id="fg-color" name="fg-color" value="{{ .Settings.Foreground }}" />
 
+				<label for="bookmark-size">{{ .Translate "Bookmark size" }}</label>
+				<input list="bookmark-sizes" id="bookmark-size" name="bookmark-size" value="{{ .Settings.BookmarkSize }}" />
+
 				<label for="border-radius">{{ .Translate "Border radius" }}</label>
 				<input type="text" id="border-radius" name="border-radius" value="{{ .Settings.BorderRadius }}" />
 			</form>

templates/index.html

@@ -11,6 +11,8 @@
 		<style>
 			:root {
 				--bookmark-border-radius: {{ .Settings.BorderRadius }};
+				--bookmark-width: {{ .Settings.BookmarkSize }};
+				--bookmark-height: {{ .Settings.BookmarkSize }};
 			}
 			body {
 				background-color: {{ .Settings.Background }};

text.go

@@ -29,6 +29,7 @@ var (
 				"Background color": "Background color",
 				"Foreground color": "Foreground color",
 				"Border radius":    "Border radius",
+				"Bookmark size":    "Size",
 			},
 		},
 
@@ -41,6 +42,7 @@ var (
 				"Background color": "Hintergrundfarbe",
 				"Foreground color": "Textfarbe",
 				"Border radius":    "Randradius",
+				"Bookmark size":    "Größe",
 			},
 		},
 
@@ -53,6 +55,7 @@ var (
 				"Background color": "背景色",
 				"Foreground color": "描画色",
 				"Border radius":    "境界半径",
+				"Bookmark size":    "大小",
 			},
 		},
 	}