Merge pull request #109 from githubnext/hazy-anchor/github-row-actions

feat(app): open GitHub items on GitHub or in a new channel

Author: iamnbutler

apps/app/src/app.tsx

@@ -28,7 +28,6 @@ import { Channel, ChannelDetails, type ChannelDraft } from "./channel";
 import { Dashboard } from "./dashboard";
 import { Github, GithubSidebar } from "./github";
 import { useGithubRefresh } from "./github-cache";
-import { GithubLinks, type GithubTarget } from "./github-link";
 import { desktop, titlebar } from "./desktop";
 import { host } from "./host";
 import { Rename } from "./layout/rename";
@@ -38,6 +37,9 @@ import { projectId, projects } from "./projects";
 import { Settings } from "./settings";
 import { UpdateNotice } from "./updates";
 
+// Older versions saved an inline GitHub item per project; Ace now opens items on GitHub.
+localStorage.removeItem(`ace:github-targets:${host.url}`);
+
 /**
  * On a phone the channel list is a drawer over the channel: open while no channel is chosen, and
  * out of the way once one is.
@@ -135,9 +137,6 @@ export function App() {
 	const [settings, setSettings] = useState<boolean | "updates">(false);
 	const [draft, setDraft] = useState<ChannelDraft>();
 	const [renaming, setRenaming] = useState<{ id: string; name: string }>();
-	const [github, setGithub] = useLocalStorage<
-		Record<string, Partial<Record<"issues" | "prs", GithubTarget>>>
-	>(`ace:github-targets:${host.url}`, {});
 	const [left, setLeft] = useLocalStorage("panel:left", true);
 	const [width, setWidth] = useLocalStorage("panel:left:width", 200);
 	const [collapsed, setCollapsed] = useState<Record<SessionSidebarGroupId, boolean>>({
@@ -279,23 +278,9 @@ export function App() {
 		setRenaming(undefined);
 	}
 
-	function setTarget(kind: "issues" | "prs", target?: GithubTarget) {
-		if (!current) return;
-		setGithub((value) => ({
-			...value,
-			[current.id]: { ...value[current.id], [kind]: target },
-		}));
-	}
-
-	function openGithub(target: GithubTarget) {
-		setTarget(target.kind, target);
-		setPage(target.kind);
-	}
-
 	return (
 		<ThemeProvider storageKey="ace-theme">
 			<TooltipProvider>
-				{current && <GithubLinks onOpen={openGithub} />}
 				<Layout
 					appearance={desktop ? "native" : "web"}
 					defaultNavOpen={false}
@@ -375,7 +360,6 @@ export function App() {
 										connected={connected}
 										onProject={setProject}
 										onOpen={() => void choose()}
-										onTarget={(target) => setTarget(page, target)}
 									/>
 								)}
 						</Sidebar>
@@ -421,8 +405,8 @@ export function App() {
 									key={`${current.id}:${page}`}
 									kind={page}
 									project={current}
-									target={github[current.id]?.[page]}
-									onTarget={(target) => setTarget(page, target)}
+									connected={connected}
+									onCreate={local ? create : undefined}
 								/>
 							)
 							: channel

apps/app/src/github-cache.ts

@@ -5,10 +5,7 @@ import type { HostRequest } from "@ace/host/protocol";
 import { host, onOpen } from "./host";
 import type { AppProject } from "./projects";
 
-type Request = Extract<
-	HostRequest,
-	{ op: "project-repo" | "github-list" | "github-detail" | "github-files" }
->;
+type Request = Extract<HostRequest, { op: "project-repo" | "github-list" }>;
 type Snapshot = { value?: unknown; error?: string; loading: boolean };
 type Saved = { key: string; request: Request; value: unknown };
 type Entry = {
@@ -28,11 +25,22 @@ const INTERVAL = 3 * 60 * 60 * 1000;
 const EMPTY: Snapshot = { loading: true };
 const cache = new Map<string, Entry>();
 const database = new Promise<IDBDatabase>((resolve, reject) => {
-	const request = indexedDB.open(`ace:github:${host.url}`, 1);
-	request.addEventListener(
-		"upgradeneeded",
-		() => request.result.createObjectStore("queries", { keyPath: "key" }),
-	);
+	const request = indexedDB.open(`ace:github:${host.url}`, 2);
+	request.addEventListener("upgradeneeded", (event) => {
+		if (event.oldVersion < 1) {
+			return request.result.createObjectStore("queries", { keyPath: "key" });
+		}
+		// Version 1 also saved inline item details, which background refresh would keep requesting.
+		const cursor = request.transaction!.objectStore("queries").openCursor();
+		cursor.addEventListener("success", () => {
+			const saved = cursor.result;
+			if (!saved) return;
+			if (!["project-repo", "github-list"].includes((saved.value as Saved).request.op)) {
+				saved.delete();
+			}
+			saved.continue();
+		});
+	});
 	request.addEventListener("success", () => {
 		request.result.addEventListener("versionchange", () => request.result.close());
 		resolve(request.result);