feat(web): connect quick share flow

Signed-off-by: JustMe <mr.toing@outlook.com>

web/src/app/navigation.ts

@@ -0,0 +1,50 @@
+import { useSyncExternalStore } from 'react';
+import { isSheetEntry } from '@/lib/useBackToClose';
+
+export type Route = { name: 'home' } | { name: 'channel'; id: string } | { name: 'share'; id: string };
+
+const CHANNEL_RE = /^\/c\/([A-Za-z0-9_-]{22})\/?$/;
+const SHARE_RE = /^\/s\/([A-Za-z0-9_-]{22})\/?$/;
+
+export function parseRoute(pathname: string): Route {
+  const c = CHANNEL_RE.exec(pathname);
+  if (c?.[1]) return { name: 'channel', id: c[1] };
+  const s = SHARE_RE.exec(pathname);
+  return s?.[1] ? { name: 'share', id: s[1] } : { name: 'home' };
+}
+
+let current: Route = parseRoute(location.pathname);
+const listeners = new Set<() => void>();
+
+const same = (a: Route, b: Route) => a.name === b.name && (a.name === 'home' || ('id' in b && a.id === b.id));
+
+function set(route: Route) {
+  if (same(current, route)) return;
+  current = route;
+  for (const l of listeners) l();
+}
+
+window.addEventListener('popstate', () => set(parseRoute(location.pathname)));
+
+/**
+ * 所有页面跳转的唯一入口。
+ * 从弹层里跳转时替换掉弹层压入的那条历史,避免返回键多退一步(lib/useBackToClose.ts)。
+ */
+export function navigate(path: string): void {
+  if (isSheetEntry()) history.replaceState(null, '', path);
+  else history.pushState(null, '', path);
+  set(parseRoute(path));
+}
+
+export function useRoute(): Route {
+  return useSyncExternalStore(
+    (cb) => {
+      listeners.add(cb);
+      return () => listeners.delete(cb);
+    },
+    () => current,
+  );
+}
+
+export const channelPath = (id: string) => `/c/${id}`;
+export const sharePath = (id: string) => `/s/${id}`;