feat(metadata): Viewport (#169)

* chore: remove sliding menu

* feat(ui): sheet

* feat: shortcut component

* chore: register new shortcut component to layout

* fix: react attr naming

* fix: set default to false for shortcut

* feat: viewport

web/app/(pages)/layout.tsx

@@ -1,27 +1,25 @@
-"use client"
-
+import type { Viewport } from "next"
 import { Sidebar } from "@/components/custom/sidebar/sidebar"
 import { CommandPalette } from "@/components/custom/command-palette/command-palette"
-import { useAccountOrGuest } from "@/lib/providers/jazz-provider"
 import { LearnAnythingOnboarding } from "@/components/custom/learn-anything-onboarding"
 import { Shortcut } from "@/components/custom/Shortcut/shortcut"
 import { GlobalKeydownHandler } from "@/components/custom/global-keydown-handler"
 
-export default function PageLayout({ children }: { children: React.ReactNode }) {
-	const { me } = useAccountOrGuest()
+export const viewport: Viewport = {
+	width: "device-width, shrink-to-fit=no",
+	maximumScale: 1,
+	userScalable: false
+}
 
+export default function PageLayout({ children }: { children: React.ReactNode }) {
 	return (
 		<div className="flex h-full min-h-full w-full flex-row items-stretch overflow-hidden">
 			<Sidebar />
 			<LearnAnythingOnboarding />
 			<GlobalKeydownHandler />
 
-			{me._type !== "Anonymous" && (
-				<>
-					<CommandPalette />
-					<Shortcut />
-				</>
-			)}
+			<CommandPalette />
+			<Shortcut />
 
 			<div className="relative flex min-w-0 flex-1 flex-col">
 				<main className="relative flex flex-auto flex-col place-items-stretch overflow-auto lg:my-2 lg:mr-2 lg:rounded-md lg:border">

web/app/layout.tsx

@@ -1,4 +1,4 @@
-import type { Metadata } from "next"
+import type { Metadata, Viewport } from "next"
 import { cn } from "@/lib/utils"
 import { ThemeProvider } from "@/lib/providers/theme-provider"
 import "./globals.css"
@@ -11,6 +11,13 @@ import { GeistMono, GeistSans } from "./fonts"
 import { JazzAndAuth } from "@/lib/providers/jazz-provider"
 import { TooltipProvider } from "@/components/ui/tooltip"
 
+export const viewport: Viewport = {
+	width: "device-width",
+	height: "device-height",
+	initialScale: 1,
+	viewportFit: "cover"
+}
+
 export const metadata: Metadata = {
 	title: "Learn Anything",
 	description: "Organize world's knowledge, explore connections and curate learning paths"

web/components/custom/command-palette/command-palette.tsx

@@ -1,10 +1,12 @@
+"use client"
+
 import * as React from "react"
 import * as DialogPrimitive from "@radix-ui/react-dialog"
 import { Command } from "cmdk"
 import { Dialog, DialogPortal, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog"
 import { CommandGroup } from "./command-items"
 import { CommandAction, CommandItemType, createCommandGroups } from "./command-data"
-import { useAccount } from "@/lib/providers/jazz-provider"
+import { useAccount, useAccountOrGuest } from "@/lib/providers/jazz-provider"
 import { searchSafeRegExp } from "@/lib/utils"
 import { GraphNode } from "@/components/routes/public/PublicHomeRoute"
 import { useCommandActions } from "./hooks/use-command-actions"
@@ -19,6 +21,14 @@ const filterItems = (items: CommandItemType[], searchRegex: RegExp) =>
 export const commandPaletteOpenAtom = atom(false)
 
 export function CommandPalette() {
+	const { me } = useAccountOrGuest()
+
+	if (me._type === "Anonymous") return null
+
+	return <RealCommandPalette />
+}
+
+export function RealCommandPalette() {
 	const { me } = useAccount({ root: { personalLinks: [], personalPages: [] } })
 	const dialogRef = React.useRef<HTMLDivElement | null>(null)
 	const [inputValue, setInputValue] = React.useState("")