Add a tooltip function

front/apps/web/src/pages/_app.tsx

@@ -29,7 +29,7 @@ import { Hydrate, QueryClientProvider } from "@tanstack/react-query";
 import { createQueryClient, fetchQuery, QueryIdentifier, QueryPage } from "@kyoo/models";
 import superjson from "superjson";
 import Head from "next/head";
-import { ThemeSelector as KThemeSelector } from "@kyoo/primitives";
+import { ThemeSelector as KThemeSelector, WebTooltip } from "@kyoo/primitives";
 
 const ThemeSelector = ({ children }: { children?: ReactNode | ReactNode[] }) => {
 	// TODO: Handle user selected mode (light, dark, auto)
@@ -45,27 +45,30 @@ const GlobalCssTheme = () => {
 	const theme = useTheme();
 
 	return (
-		<style jsx global>{`
+		<>
-			body {
+			<style jsx global>{`
-				margin: 0px;
+				body {
-				padding: 0px;
+					margin: 0px;
-				background-color: ${theme.background};
+					padding: 0px;
-			}
+					background-color: ${theme.background};
+				}
 
-			*::-webkit-scrollbar {
+				*::-webkit-scrollbar {
-				height: 6px;
+					height: 6px;
-				width: 6px;
+					width: 6px;
-				background: transparent;
+					background: transparent;
-			}
+				}
 
-			*::-webkit-scrollbar-thumb {
+				*::-webkit-scrollbar-thumb {
-				background-color: #999;
+					background-color: #999;
-				border-radius: 90px;
+					border-radius: 90px;
-			}
+				}
-			*:hover::-webkit-scrollbar-thumb {
+				*:hover::-webkit-scrollbar-thumb {
-				background-color: rgb(134, 127, 127);
+					background-color: rgb(134, 127, 127);
-			}
+				}
-		`}</style>
+			`}</style>
+			<WebTooltip theme={theme} />
+		</>
 	);
 };
 

front/packages/primitives/src/index.ts

@@ -26,6 +26,7 @@ export * from "./links";
 export * from "./avatar";
 export * from "./image";
 export * from "./skeleton";
+export * from "./tooltip";
 
 import { px } from "yoshiki/native";
 

front/packages/primitives/src/tooltip.tsx

@@ -0,0 +1,69 @@
+/*
+ * Kyoo - A portable and vast media library solution.
+ * Copyright (c) Kyoo.
+ *
+ * See AUTHORS.md and LICENSE file in the project root for full license information.
+ *
+ * Kyoo is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * any later version.
+ *
+ * Kyoo is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import { ToastAndroid, PressableProps } from "react-native";
+import { Theme } from "yoshiki/native";
+
+export const tooltip = (tooltip: string) =>
+	({
+		dataSet: { tooltip },
+		onLongPress: () => {
+			// TODO handle IOS.
+			ToastAndroid.show(tooltip, ToastAndroid.SHORT);
+		},
+	} satisfies PressableProps);
+
+export const WebTooltip = ({ theme }: { theme: Theme }) => {
+	const background = `${theme.colors.black}CC`;
+
+	return (
+		<style jsx global>{`
+			[data-tooltip] {
+				position: relative;
+			}
+
+			[data-tooltip]::after {
+				content: attr(data-tooltip);
+
+				position: absolute;
+				top: 100%;
+				left: 50%;
+				transform: translate(-50%);
+
+				margin-top: 8px;
+				border-radius: 5px;
+				padding: 6px;
+				font-size: 0.8rem;
+				color: ${theme.colors.white};
+				background-color: ${background};
+				font-family: ${theme.fonts.paragraph};
+
+				opacity: 0;
+				visibility: hidden;
+				transition: opacity 0.3s ease-in-out;
+			}
+
+			[data-tooltip]:hover::after {
+				opacity: 1;
+				visibility: visible;
+			}
+		`}</style>
+	);
+};

front/packages/primitives/src/types.d.ts

@@ -0,0 +1,35 @@
+/*
+ * Kyoo - A portable and vast media library solution.
+ * Copyright (c) Kyoo.
+ *
+ * See AUTHORS.md and LICENSE file in the project root for full license information.
+ *
+ * Kyoo is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * any later version.
+ *
+ * Kyoo is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import React from "react";
+import "react-native";
+
+declare module "react-native" {
+	interface ViewProps {
+		dataSet?: Record<string, string>;
+	}
+}
+
+declare module "react" {
+	interface StyleHTMLAttributes<T> extends HTMLAttributes<T> {
+		jsx?: boolean;
+		global?: boolean;
+	}
+}

front/packages/ui/src/navbar/index.tsx

@@ -21,13 +21,11 @@
 import useTranslation from "next-translate/useTranslation";
 import { Library, LibraryP, Page, Paged, QueryIdentifier } from "@kyoo/models";
 import { rem, useYoshiki } from "yoshiki/native";
-import { IconButton, Header, Avatar, A, Skeleton, ts } from "@kyoo/primitives";
+import { IconButton, Header, Avatar, A, Skeleton, tooltip, ts } from "@kyoo/primitives";
-import { Text, View } from "react-native";
+import { View } from "react-native";
 import { Fetch } from "../fetch";
 import { KyooLongLogo } from "./icon";
 
-const tooltip = (tooltip: string): object => ({});
-
 export const NavbarTitle = KyooLongLogo;
 
 export const Navbar = () => {