feat: add head component

src/app/apps/files.tsx

@@ -15,6 +15,7 @@ import { Ionicons } from "@ui/Icons";
 import FileInlineViewer from "@/components/pages/files/FileInlineViewer";
 import { FilesContext } from "@/components/pages/files/FilesContext";
 import { FileItem } from "@/types/files";
+import Head from "@/components/utility/Head";
 
 const FilesPage = () => {
   const { isLoggedIn } = useAuth();
@@ -65,6 +66,7 @@ const FilesPage = () => {
 
   return (
     <FilesContext.Provider value={{ files: data, viewFile, setViewFile }}>
+      <Head title="Files" />
       <Stack.Screen
         options={{ headerLeft: () => <BackButton />, title: "Files" }}
       />

src/app/apps/terminal.tsx

@@ -11,6 +11,7 @@ import { BASEURL, WS_BASEURL } from "@/lib/constants";
 import { useAuth } from "@/stores/authStore";
 import { Stack } from "expo-router";
 import BackButton from "@ui/BackButton";
+import Head from "@/components/utility/Head";
 
 const isWeb = Platform.OS === "web";
 
@@ -82,6 +83,7 @@ const TerminalPage = () => {
 
   return (
     <>
+      <Head title="Terminal" />
       <Stack.Screen
         options={{ title: "Terminal", headerLeft: () => <BackButton /> }}
       />

src/app/apps/vnc.tsx

@@ -10,6 +10,7 @@ import React, { useEffect, useRef } from "react";
 import { Platform } from "react-native";
 import { VncScreen, VncScreenHandle } from "react-vnc";
 import { openFullscreen } from "./lib";
+import Head from "@/components/utility/Head";
 
 const VncPage = () => {
   const containerRef = useRef<HTMLDivElement>(null!);
@@ -26,6 +27,7 @@ const VncPage = () => {
 
   return (
     <>
+      <Head title="VNC" />
       <Stack.Screen
         options={{
           title: "VNC",

src/app/index.tsx

@@ -12,6 +12,7 @@ import Box from "@ui/Box";
 import Apps from "../components/pages/home/Apps";
 import { Stack } from "expo-router";
 import { useIsFocused } from "@/hooks/useIsFocused";
+import Head from "@/components/utility/Head";
 
 const HomePage = () => {
   const { isLoggedIn } = useAuth();
@@ -30,6 +31,7 @@ const HomePage = () => {
 
   return (
     <Container scrollable className="px-4 md:px-8 max-w-none py-8">
+      <Head />
       <Stack.Screen options={{ headerShown: false, title: "Home Lab" }} />
 
       <HStack className="items-start gap-8">

src/components/utility/Head.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { Platform } from "react-native";
+import Helmet from "react-helmet";
+import { APP_NAME } from "@/lib/constants";
+
+type HeadProps = {
+  title?: string;
+};
+
+const Head = ({ title }: HeadProps) => {
+  if (Platform.OS !== "web") {
+    return null;
+  }
+
+  return (
+    <Helmet>
+      <title>{title ? `${title} - ${APP_NAME}` : APP_NAME}</title>
+    </Helmet>
+  );
+};
+
+export default Head;

src/lib/constants.ts

@@ -7,3 +7,5 @@ export const WS_BASEURL = BASEURL.replace("https://", "wss://").replace(
   "http://",
   "ws://"
 );
+
+export const APP_NAME = "Home Lab";