fix: detail topic (#117)

* feat: keyboard nav

* fix: link update

* feat: reusable learning state

* chore: use new learning state

* feat: add to my profile

* .

* .

* feat: on enter open the link

* fix: lint

* fix: use eslint v8 instead of v9

* fix: add to my profile

* chore: update personal link schema

* chore: update personal page schema

* fix: update detail wrapper

* fix: update page section

* removing option for learning status

* removing option for learning status for topic

* feat: add createdAt and updatedAt for personal Page

* chore: update page section component

* chore: remove chevron from sub menu

* fix: sidebar

* chore: add focus and disable toast

* feat: la editor add execption for no command class

* fix: la editor style and fix page detail

* fix: title

* fix: topic learning state

* chore: add showSearch for learning state

* fix: bunch stuff

* chore: link list and item handle learning state

* chore: set expand to false

* feat: personal link for topic detail

* chore: hook use topic data

* chore: go to list

* fix: link and topic

* feat(utils): new keyboard utils

* feat(store): add linkOpenPopoverForIdAtom for link

* chore: using memo for use topic data

* fix: remove duplicate component

* chore: performance for topic detail lint item

* refactor: remove LinkOptions component

* chore: improve performance for list

* feat: added LinkRoute copmonent

* chore: link manage

* feat: bottom bar

* fix: link

* fix: page wrapper

* fix: import thing

* chore: added a displayname

* refactor: page detail

* refactor: page detail

* fix: add topic to personal link form link

* fix: only show page count if more than zero

* fix: sidebar topic section

---------

Co-authored-by: Nikita <github@nikiv.dev>
Co-authored-by: marshennikovaolga <marshennikova@gmail.com>

web/lib/utils/index.ts

@@ -11,3 +11,4 @@ export const randomId = () => {
 
 export * from "./urls"
 export * from "./slug"
+export * from "./keyboard"

web/lib/utils/keyboard.ts

@@ -0,0 +1,88 @@
+let isMac: boolean | undefined
+
+interface Navigator {
+	userAgentData?: {
+		brands: { brand: string; version: string }[]
+		mobile: boolean
+		platform: string
+		getHighEntropyValues: (hints: string[]) => Promise<{
+			platform: string
+			platformVersion: string
+			uaFullVersion: string
+		}>
+	}
+}
+
+function getPlatform(): string {
+	const nav = navigator as Navigator
+
+	if (nav.userAgentData) {
+		if (nav.userAgentData.platform) {
+			return nav.userAgentData.platform
+		}
+
+		nav.userAgentData.getHighEntropyValues(["platform"]).then(highEntropyValues => {
+			if (highEntropyValues.platform) {
+				return highEntropyValues.platform
+			}
+		})
+	}
+
+	if (typeof navigator.platform === "string") {
+		return navigator.platform
+	}
+
+	return ""
+}
+
+export function isMacOS() {
+	if (isMac === undefined) {
+		isMac = getPlatform().toLowerCase().includes("mac")
+	}
+
+	return isMac
+}
+
+interface ShortcutKeyResult {
+	symbol: string
+	readable: string
+}
+
+export function getShortcutKey(key: string): ShortcutKeyResult {
+	const lowercaseKey = key.toLowerCase()
+	if (lowercaseKey === "mod") {
+		return isMacOS() ? { symbol: "⌘", readable: "Command" } : { symbol: "Ctrl", readable: "Control" }
+	} else if (lowercaseKey === "alt") {
+		return isMacOS() ? { symbol: "⌥", readable: "Option" } : { symbol: "Alt", readable: "Alt" }
+	} else if (lowercaseKey === "shift") {
+		return { symbol: "⇧", readable: "Shift" }
+	} else if (lowercaseKey === "control") {
+		return { symbol: "⌃", readable: "Control" }
+	} else if (lowercaseKey === "windows" && !isMacOS()) {
+		return { symbol: "Win", readable: "Windows" }
+	} else {
+		return { symbol: key.toUpperCase(), readable: key }
+	}
+}
+
+export function getShortcutKeys(keys: string[]): ShortcutKeyResult[] {
+	return keys.map(key => getShortcutKey(key))
+}
+
+export function getSpecialShortcut(shortcutName: string): ShortcutKeyResult[] {
+	if (shortcutName === "expandToolbar") {
+		return isMacOS()
+			? [getShortcutKey("control"), getShortcutKey("mod"), getShortcutKey("n")]
+			: [getShortcutKey("mod"), getShortcutKey("windows"), getShortcutKey("n")]
+	}
+
+	return []
+}
+
+export function formatShortcut(shortcutKeys: ShortcutKeyResult[]): string {
+	return shortcutKeys.map(key => key.symbol).join("")
+}
+
+export function formatReadableShortcut(shortcutKeys: ShortcutKeyResult[]): string {
+	return shortcutKeys.map(key => key.readable).join(" + ")
+}