fix: Link, Pages, Topic, Hook and Others (#178)

* chore: remove useKeyDownListener

* chore: remove react-use, update jazz version and add query string

* chore: update jazz version

* chore: use simple mac or win utils code

* feat(util): add isTextInput

* feat(hooks): all needed hooks

* fix: link bunch stuff

* fix: page bunch stuff

* chore: bunch update for custom component

* chore: use throttle from internal hook

* chore: topic bunch stuff

* chore: update layout

* fix: truncate content header of topic detail

web/components/routes/topics/detail/Header.tsx

@@ -8,6 +8,7 @@ import { useAccountOrGuest } from "@/lib/providers/jazz-provider"
 import { LearningStateValue } from "@/lib/constants"
 import { useClerk } from "@clerk/nextjs"
 import { usePathname } from "next/navigation"
+import { useMedia } from "@/hooks/use-media"
 
 interface TopicDetailHeaderProps {
 	topic: Topic
@@ -16,6 +17,7 @@ interface TopicDetailHeaderProps {
 export const TopicDetailHeader = React.memo(function TopicDetailHeader({ topic }: TopicDetailHeaderProps) {
 	const clerk = useClerk()
 	const pathname = usePathname()
+	const isMobile = useMedia("(max-width: 770px)")
 	const { me } = useAccountOrGuest({
 		root: {
 			topicsWantToLearn: [],
@@ -90,20 +92,19 @@ export const TopicDetailHeader = React.memo(function TopicDetailHeader({ topic }
 
 	return (
 		<ContentHeader className="px-6 py-5 max-lg:px-4">
-			<div className="flex min-w-0 shrink-0 items-center gap-1.5">
+			<div className="flex min-w-0 flex-1 items-center gap-1.5">
 				<SidebarToggleButton />
-				<div className="flex min-h-0 items-center">
-					<span className="truncate text-left font-bold lg:text-xl">{topic.prettyName}</span>
+				<div className="flex min-h-0 min-w-0 flex-1 items-center">
+					<h1 className="truncate text-left font-bold lg:text-xl">{topic.prettyName}</h1>
 				</div>
 			</div>
 
-			<div className="flex flex-auto"></div>
-
 			<LearningStateSelector
 				showSearch={false}
 				value={p?.learningState || ""}
 				onChange={handleAddToProfile}
-				defaultLabel="Add to my profile"
+				defaultLabel={isMobile ? "" : "Add to profile"}
+				defaultIcon="Circle"
 			/>
 		</ContentHeader>
 	)

web/components/routes/topics/detail/partials/link-item.tsx

@@ -151,12 +151,7 @@ export const LinkItem = React.memo(
 										)}
 									</Button>
 								</PopoverTrigger>
-								<PopoverContent
-									className="w-52 rounded-lg p-0"
-									side="bottom"
-									align="start"
-									onCloseAutoFocus={e => e.preventDefault()}
-								>
+								<PopoverContent className="w-52 rounded-lg p-0" side="bottom" align="start">
 									<LearningStateSelectorContent
 										showSearch={false}
 										searchPlaceholder="Search state..."

web/components/routes/topics/hooks/use-column-styles.ts

@@ -1,4 +1,4 @@
-import { useMedia } from "react-use"
+import { useMedia } from "@/hooks/use-media"
 
 export const useColumnStyles = () => {
 	const isTablet = useMedia("(max-width: 640px)")

web/components/routes/topics/list.tsx

@@ -4,7 +4,7 @@ import { useAccount } from "@/lib/providers/jazz-provider"
 import { atom, useAtom } from "jotai"
 import { commandPaletteOpenAtom } from "@/components/custom/command-palette/command-palette"
 import { TopicItem } from "./partials/topic-item"
-import { useMedia } from "react-use"
+import { useMedia } from "@/hooks/use-media"
 import { useRouter } from "next/navigation"
 import { useActiveItemScroll } from "@/hooks/use-active-item-scroll"
 import { Column } from "@/components/custom/column"

web/components/routes/topics/partials/topic-item.tsx

@@ -139,7 +139,6 @@ export const TopicItem = React.forwardRef<HTMLDivElement, TopicItemProps>(({ top
 							side="bottom"
 							align="end"
 							onClick={e => e.stopPropagation()}
-							onCloseAutoFocus={e => e.preventDefault()}
 						>
 							<LearningStateSelectorContent
 								showSearch={false}