update: data fetching, fixed some bugs about navigation rail

packages/solid/bun.lock

@@ -4,7 +4,7 @@
     "": {
       "name": "example-basic",
       "dependencies": {
-        "@m3-components/solid": "0.1.4",
+        "@m3-components/solid": "0.1.7",
         "@solidjs/meta": "^0.29.4",
         "@solidjs/router": "^0.15.0",
         "@solidjs/start": "^1.1.0",
@@ -182,7 +182,7 @@
 
     "@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.25", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ=="],
 
-    "@m3-components/solid": ["@m3-components/solid@0.1.4", "", { "dependencies": { "animejs": "^4.0.2", "solid-js": "^1.9.5", "tailwind-variants": "^1.0.0" } }, "sha512-pAq1v8bx2WZoc2AsbcoAgKrfCgMTmQskCM9KbnJZdw9RcaDBu23uNAyhPqmrxxuPi177Rnd2ZVfFAfXi8+NvnQ=="],
+    "@m3-components/solid": ["@m3-components/solid@0.1.7", "", { "dependencies": { "animejs": "^4.0.2", "solid-js": "^1.9.5", "tailwind-variants": "^1.0.0" } }, "sha512-15BNlsxMoH7RnV6vBH2DSr/SYuxpPznr+bwtqbpWlq3D54ZODhFUT3/zhIXCE1L1wXG7/xu158wvuWfmhr8ZSQ=="],
 
     "@mapbox/node-pre-gyp": ["@mapbox/node-pre-gyp@2.0.0", "", { "dependencies": { "consola": "^3.2.3", "detect-libc": "^2.0.0", "https-proxy-agent": "^7.0.5", "node-fetch": "^2.6.7", "nopt": "^8.0.0", "semver": "^7.5.3", "tar": "^7.4.0" }, "bin": { "node-pre-gyp": "bin/node-pre-gyp" } }, "sha512-llMXd39jtP0HpQLVI37Bf1m2ADlEb35GYSh1SDSLsBhR+5iCxiNGlT31yqbNtVHygHAtMy6dWFERpU2JgufhPg=="],
 

packages/solid/package.json

@@ -8,7 +8,7 @@
 		"version": "vinxi version"
 	},
 	"dependencies": {
-		"@m3-components/solid": "0.1.4",
+		"@m3-components/solid": "0.1.7",
 		"@solidjs/meta": "^0.29.4",
 		"@solidjs/router": "^0.15.0",
 		"@solidjs/start": "^1.1.0",

packages/solid/src/app.tsx

@@ -15,14 +15,20 @@ const tabMap = {
 	"/album/**/*": 2
 };
 
+export const refreshTab = (path: string) => {
+	for (const [key, value] of Object.entries(tabMap)) {
+		if (!minimatch(path, key)) continue;
+		setActiveTab(value);
+		break;
+	}
+}
+
 export default function App() {
 	onMount(() => {
-		const path = window.location.pathname;
-		for (const [key, value] of Object.entries(tabMap)) {
-			if (!minimatch(path, key)) continue;
-			setActiveTab(value);
-			break;
-		}
+		refreshTab(location.pathname);
+		window.addEventListener('popstate', (event) => {
+			refreshTab(location.pathname);
+		});
 	});
 
 	return (

packages/solid/src/components/icons/Search.tsx

@@ -0,0 +1,10 @@
+import { SVGIconComponent } from "~/components/icons/types";
+
+export const SearchIcon: SVGIconComponent = (props) => {
+	return (
+		<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" {...props}>
+			<path fill="currentColor"
+				  d="m19.6 21l-6.3-6.3q-.75.6-1.725.95T9.5 16q-2.725 0-4.612-1.888T3 9.5t1.888-4.612T9.5 3t4.613 1.888T16 9.5q0 1.1-.35 2.075T14.7 13.3l6.3 6.3zM9.5 14q1.875 0 3.188-1.312T14 9.5t-1.312-3.187T9.5 5T6.313 6.313T5 9.5t1.313 3.188T9.5 14" />
+		</svg>
+	);
+};

packages/solid/src/components/shell/Layout.tsx

@@ -2,14 +2,16 @@ import { tv } from "tailwind-variants";
 import { navigationExpanded, NavigationRegion } from "./Navigation";
 import { DivProps } from "../common";
 import { Component } from "solid-js";
+import { BeforeLeaveEventArgs, useBeforeLeave } from "@solidjs/router";
+import { refreshTab } from "~/app";
 
 export const BodyRegion: Component<DivProps> = (props) => {
 	const bodyStyle = tv({
 		base: "relative",
 		variants: {
 			open: {
-				true: "left-90",
-				false: "left-24"
+				true: "left-55 pr-55",
+				false: "left-24 pr-24"
 			}
 		}
 	});
@@ -22,10 +24,21 @@ export const BodyRegion: Component<DivProps> = (props) => {
 };
 
 export const Layout: Component<DivProps> = (props) => {
+	useBeforeLeave((e: BeforeLeaveEventArgs) => {
+		if (typeof e.to === "number") {
+			refreshTab(e.to.toString());
+			return;
+		}
+		refreshTab(e.to);
+	});
 	return (
 		<div class="relatve w-screen min-h-screen">
 			<NavigationRegion />
-			<BodyRegion>{props.children}</BodyRegion>
+			<BodyRegion>
+				<main class="w-full px-6 lg:max-w-4xl lg:mx-auto pt-20">
+					{props.children}
+				</main>
+			</BodyRegion>
 		</div>
 	);
 };

packages/solid/src/components/shell/Navigation.tsx

@@ -1,9 +1,16 @@
 import { createSignal, For } from "solid-js";
 import { HomeIcon } from "../icons/Home";
 import { MusicIcon } from "../icons/Music";
-import { NavigationRail, NavigationRailAction, NavigationRailActions, NavigationRailMenu } from "@m3-components/solid";
+import {
+	NavigationRailFAB,
+	NavigationRail,
+	NavigationRailAction,
+	NavigationRailActions,
+	NavigationRailMenu
+} from "@m3-components/solid";
 import { A } from "@solidjs/router";
 import { AlbumIcon } from "~/components/icons/Album";
+import { SearchIcon } from "../icons/Search";
 
 export const [activeTab, setActiveTab] = createSignal(-1);
 export const [navigationExpanded, setNavigationExpanded] = createSignal(false);
@@ -29,6 +36,9 @@ export const NavigationRegion = () => {
 	return (
 		<NavigationRail class="top-0 bg-surface-container" width={220} expanded={navigationExpanded()}>
 			<NavigationRailMenu onClick={() => setNavigationExpanded(!navigationExpanded())} />
+			<NavigationRailFAB text="搜索" color="primary">
+				<SearchIcon />
+			</NavigationRailFAB>
 			<NavigationRailActions>
 				<For each={actions}>
 					{(action, index) => (

packages/solid/src/routes/index.tsx

@@ -1,5 +1,36 @@
 import { Layout } from "~/components/shell/Layout";
+import { dbMain } from "~/drizzle";
+import { bilibiliMetadata, latestVideoSnapshot } from "~db/main/schema";
+import { and, desc, eq, gte, lt } from "drizzle-orm";
+import { createAsync, query } from "@solidjs/router";
+import { For, Suspense } from "solid-js";
+
+const getVideoCloseTo1M = query(async () => {
+	"use server";
+	return dbMain
+		.select()
+		.from(bilibiliMetadata)
+		.leftJoin(latestVideoSnapshot, eq(latestVideoSnapshot.aid, bilibiliMetadata.aid))
+		.where(and(gte(latestVideoSnapshot.views, 900000), lt(latestVideoSnapshot.views, 1000000)))
+		.orderBy(desc(latestVideoSnapshot.views))
+		.limit(20);
+}, "data");
 
 export default function Home() {
-	return <Layout></Layout>;
+	const videos = createAsync(() => getVideoCloseTo1M());
+	return (
+		<Layout>
+			<title>中V档案馆</title>
+			<main>
+				<h1 class="text-5xl mb-8">中 V 档案馆</h1>
+				<h2 class="text-3xl font-normal">传说助攻</h2>
+
+				<div>
+					<Suspense fallback={<div>Loading...</div>}>
+						<For each={videos()}>{(video) => <li>{video.bilibili_metadata.aid}</li>}</For>
+					</Suspense>
+				</div>
+			</main>
+		</Layout>
+	);
 }

packages/solid/src/routes/songs/index.tsx

@@ -3,9 +3,7 @@ import { Layout } from "~/components/shell/Layout";
 export default function SongsHome() {
 	return (
 		<Layout>
-			<main class="w-full px-6 lg:max-w-4xl lg:mx-auto pt-12">
-				<h1 class="text-4xl font-light">歌曲</h1>
-			</main>
+			<h1 class="text-5xl">歌曲</h1>
 		</Layout>
 	);
 }