feat: set as homepage

jirikuchta · Sep 2, 2024 · 4184530 · 4184530
1 parent 8d75fe5
commit 4184530
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 5 deletions.
diff --git a/static/ts/app.ts b/static/ts/app.ts
@@ -62,4 +62,4 @@ export function dispatchEvent(name: string) {
 
 const app = document.querySelector<App>("rr-app") || new App();
 
-export default app;
+export default app;
diff --git a/static/ts/data/settings.ts b/static/ts/data/settings.ts
@@ -8,7 +8,8 @@ const DEFAULTS: Settings = {
 	markAsReadOnScroll: true,
 	showImages: true,
 	theme: "system",
-	detailFontSize: 14
+	detailFontSize: 14,
+	homepage: "all"
 }
 
 export function init() {

diff --git a/static/ts/data/types.ts b/static/ts/data/types.ts
@@ -62,4 +62,5 @@ export interface Settings {
 	showImages: boolean;
 	theme: "system" | "light" | "dark";
 	detailFontSize: number;
+	homepage: string;
 }
diff --git a/static/ts/ui/feeds.ts b/static/ts/ui/feeds.ts
@@ -27,7 +27,9 @@ export default class Feeds extends HTMLElement {
 
 	connectedCallback() {
 		this.replaceChildren(...buildItems());
-		this.items[0].active = true;
+
+		let homepage = settings.getItem("homepage");
+		(this.items.find(i => i.homepageId == homepage) || this.items[0]).active = true;
 
 		this.addEventListener("click", this);
 		this.addEventListener("contextmenu", this);
@@ -117,14 +119,23 @@ function buildTitle(title: string) {
 function showContextMenu(item: Item, e: PointerEvent) {
 	let menu = new PopupMenu();
 
+	const { homepageId } = item;
+	let isHomepage = settings.getItem("homepage") == homepageId;
+
 	if (item.type == "all") {
 		menu.addItem("Mark as read", "check-all", () => articles.markRead());
+		!isHomepage && menu.addItem("Set as homepage", "house-door", () => settings.setItem("homepage", homepageId));
+	}
+
+	if (item.type == "bookmarked") {
+		!isHomepage && menu.addItem("Set as homepage", "house-door", () => settings.setItem("homepage", homepageId));
 	}
 
 	if (item.type == "category") {
 		let data = item.data as types.Category;
 		menu.addItem("Mark as read", "check-all", () => categories.markRead(data.id));
 		menu.addItem("Edit category", "pencil", () => openCategoryForm(data));
+		!isHomepage && menu.addItem("Set as homepage", "house-door", () => settings.setItem("homepage", homepageId));
 		menu.addItem("Delete category", "trash", () => deleteCategory(data));
 	}
 
@@ -133,6 +144,7 @@ function showContextMenu(item: Item, e: PointerEvent) {
 		menu.addItem("Mark as read", "check-all", () => subscriptions.markRead(data.id));
 		menu.addItem(`${data.favorite ? "Remove from" : "Add to"} favorites`, data.favorite ? "heart-fill" : "heart", () => subscriptions.edit(data.id, {favorite: !data.favorite}))
 		menu.addItem("Edit subscription", "pencil", () => openSubscriptionForm(data));
+		!isHomepage && menu.addItem("Set as homepage", "house-door", () => settings.setItem("homepage", homepageId));
 		menu.addItem("Unsubscribe", "trash", () => deleteSubscription(data));
 	}
 
@@ -216,6 +228,13 @@ class Item extends HTMLElement {
 		return counters.get(itemId) || 0;;
 
 	}
+
+	get homepageId() {
+		const { type, itemId } = this;
+		if (type == "category") { return `c-${itemId}`; }
+		if (type == "subscription") { return `s-${itemId}`; }
+		return type;
+	}
 }
 
 customElements.define("rr-item-feeds", Item);

diff --git a/static/ts/ui/icon.ts b/static/ts/ui/icon.ts
@@ -26,7 +26,8 @@ const ICONS = {
 	"sort-down": '<svg viewBox="0 0 16 16"><path d="M3.5 2.5a.5.5 0 0 0-1 0v8.793l-1.146-1.147a.5.5 0 0 0-.708.708l2 1.999.007.007a.497.497 0 0 0 .7-.006l2-2a.5.5 0 0 0-.707-.708L3.5 11.293zm3.5 1a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5M7.5 6a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1zm0 3a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1zm0 3a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1z"/></svg>',
 	"sort-up": '<svg viewBox="0 0 16 16"><path d="M3.5 12.5a.5.5 0 0 1-1 0V3.707L1.354 4.854a.5.5 0 1 1-.708-.708l2-1.999.007-.007a.5.5 0 0 1 .7.006l2 2a.5.5 0 1 1-.707.708L3.5 3.707zm3.5-9a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5M7.5 6a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1zm0 3a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1zm0 3a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1z"/></svg>',
 	"eye": '<svg viewBox="0 0 16 16"><path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8M1.173 8a13 13 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5s3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5s-3.879-1.168-5.168-2.457A13 13 0 0 1 1.172 8z"/><path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5M4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0"/></svg>',
-	"eye-fill": '<svg viewBox="0 0 16 16"><path d="M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0"/><path d="M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8m8 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7"/></svg>'
+	"eye-fill": '<svg viewBox="0 0 16 16"><path d="M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0"/><path d="M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8m8 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7"/></svg>',
+	"house-door": '<svg viewBox="0 0 16 16"><path d="M8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4.5a.5.5 0 0 0 .5-.5v-4h2v4a.5.5 0 0 0 .5.5H14a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293zM2.5 14V7.707l5.5-5.5 5.5 5.5V14H10v-4a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v4z"/></svg>'
 }
 
 export type IconName = keyof typeof ICONS;
@@ -40,4 +41,4 @@ export default class Icon extends HTMLElement {
 	}
 }
 
-customElements.define("rr-icon", Icon);
+customElements.define("rr-icon", Icon);