icons, mobile menu, fixes, Filapps->Wochlife copy versions, fixing us…

…ers routes and leaving only new one available, users overview not accessible w/o admin permissions, and other changes

README.md

@@ -21,7 +21,9 @@
 #### Usage
 - Be Free to use this stack, or application as a whole, freely under the rules of MIT License.
 - !Disclaimer: This application is still in active development as of 02/02/2024.
-- showcase of this project: [https://wochlife-booking-system-v8.fly.dev/](https://wochlife-booking-system-v8.fly.dev/)
+- showcase of this project: 
+  - [https://wochlife-booking-system-v8.fly.dev/](https://wochlife-booking-system-v8.fly.dev/)
+  - [https://wochlife-booking-system-v8.fly.dev/admin](https://wochlife-booking-system-v8.fly.dev/admin)
   - username: woch
   - password: wochlife
 

app/components/footers/footer-base.tsx

@@ -11,7 +11,7 @@ export function FooterBase() {
                     <div className="bg-foreground text-background rounded-t-xl px-4 md:px-8 lg:px-10 xl:px-12 3xl:px-16">
                         <div className="flex justify-between py-32">
                             <div>interesting items here</div>
-                            <div className="font-bold capitalize">Filapps Hospitality System app</div>
+                            <div className="font-bold capitalize">Wochlife Accommodations app</div>
                             <div>footer right here</div>
                         </div>
                     </div>

app/components/headers/header-base.tsx

@@ -1,14 +1,21 @@
 import { Link, NavLink } from '@remix-run/react'
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from '#app/components/ui/tooltip.tsx'
 import { cn } from '#app/utils/misc.tsx'
 import { baseContainerWidthClassList } from '../classlists.tsx'
 import ThemeSwitcher from '../theme-switch.tsx'
 import { Button } from '../ui/button.tsx'
+import { Icon } from '../ui/icon.tsx'
 // import { useOptionalUser } from "#app/utils/user.ts"
 // import UserDropdown from "../dropdowns/dropdown-user.tsx"
 
 export function HeaderBase({ routeAdmin }: { routeAdmin?: boolean }) {
 	// const user = useOptionalUser()
-	const headerHeight = 'h-[60px]'
+	const headerHeight = 'md:h-[60px]'
 
 	return (
 		<header className={cn('max-md:absolute', routeAdmin && 'max-lg:hidden')}>
@@ -17,44 +24,85 @@ export function HeaderBase({ routeAdmin }: { routeAdmin?: boolean }) {
 					className={cn(
 						'bg-background max-md:mx-2 max-md:rounded-xl',
 						headerHeight,
-						'py-2 shadow-header-menu max-md:px-2 max-md:py-4',
+						'shadow-header-menu',
 					)}
 				>
-					<nav className={cn("space-between flex items-center justify-between", baseContainerWidthClassList)}>
-						<Link to="/">
-							<div className="font-light">Filapps</div>
-							<div>properties</div>
+					<nav
+						className={cn(
+							'space-between flex items-center justify-between max-md:p-3 py-2',
+							baseContainerWidthClassList,
+						)}
+					>
+						<Link to="/" className='max-md:hidden'>
+							<div className="font-light">Wochlife</div>
+							<div>Accommodations</div>
 						</Link>
 
 						<div className="md:absolute md:left-1/2 md:top-1/2 md:-translate-x-1/2 md:-translate-y-1/2">
-							<div className="flex justify-center gap-5">
+							<div className="flex justify-center gap-7 md:gap-5">
 								<NavLink to="rooms">
 									{({ isActive }) => (
-										<Button variant={isActive ? 'highlight' : 'secondary'}>
-											rooms
-										</Button>
+										<>
+											<Button
+												variant={isActive ? 'highlight' : 'secondary'}
+												className="max-md:hidden"
+											>
+												rooms
+											</Button>
+											<Icon size="lg" className={cn(isActive && "text-purple-500", "md:hidden")} name="home" />
+										</>
 									)}
 								</NavLink>
 
 								<NavLink to="pages">
 									{({ isActive }) => (
-										<Button variant={isActive ? 'highlight' : 'secondary'}>
-											pages
-										</Button>
+										<>
+											<Button
+												variant={isActive ? 'highlight' : 'secondary'}
+												className="max-md:hidden"
+											>
+												pages
+											</Button>
+
+											<Icon size="lg" className={cn(isActive && "text-purple-500", "md:hidden")} name="file-text" />
+										</>
 									)}
 								</NavLink>
 
 								<NavLink to="contact">
 									{({ isActive }) => (
-										<Button variant={isActive ? 'highlight' : 'secondary'}>
-											contact
-										</Button>
+										<>
+											<Button
+												variant={isActive ? 'highlight' : 'secondary'}
+												className="max-md:hidden"
+											>
+												contact
+											</Button>
+
+											<Icon size="lg" className={cn(isActive && "text-purple-500", "md:hidden")} name="envelope-closed" />
+										</>
 									)}
 								</NavLink>
 							</div>
 						</div>
 
-						<div className="flex items-center gap-10">
+						<div className="flex items-center gap-3">
+							<TooltipProvider>
+								<Tooltip>
+									<TooltipTrigger asChild>
+										<a
+											href="https://github.com/fcablik/wochlife-accomodations"
+											target="_blank"
+											rel="noreferrer"
+											className="mb-[.1rem] transition hover:text-highlight"
+										>
+											<Icon name="github-logo" size="lg" />
+										</a>
+									</TooltipTrigger>
+									<TooltipContent>GitHub Repository</TooltipContent>
+								</Tooltip>
+							</TooltipProvider>
+
 							<ThemeSwitcher />
 
 							{/* {user ? (

app/components/toaster.tsx

@@ -2,7 +2,7 @@ import { useEffect } from 'react'
 import { Toaster, toast as showToast } from 'sonner'
 import { type Toast } from '#app/utils/toast.server.ts'
 
-export function FilappsToaster({ toast }: { toast?: Toast | null }) {
+export function WochlifeToaster({ toast }: { toast?: Toast | null }) {
 	return (
 		<>
 			<Toaster duration={3000} richColors closeButton position="top-right" />

app/components/ui/icons/nameStrings.ts

@@ -22,6 +22,7 @@ export function IconNames(): string[] {
 		'envelope-closed',
 		'exit',
 		'file-text',
+		'github-logo copy',
 		'github-logo',
 		'home',
 		'image',

app/components/ui/icons/nameTypes.d.ts

@@ -21,6 +21,7 @@ export type IconName =
 	| 'envelope-closed'
 	| 'exit'
 	| 'file-text'
+	| 'github-logo copy'
 	| 'github-logo'
 	| 'home'
 	| 'image'

app/root.tsx

@@ -29,7 +29,7 @@ import { FooterBase } from './components/footers/footer-base.tsx'
 import { HeaderBase } from './components/headers/header-base.tsx'
 import { WochlifeProgress } from './components/progress-bar.tsx'
 import { useTheme } from './components/theme-switch.tsx'
-import { FilappsToaster } from './components/toaster.tsx'
+import { WochlifeToaster } from './components/toaster.tsx'
 import { href as iconsHref } from './components/ui/icon.tsx'
 import customComponentsStylesheetUrl from './styles/customComponents.css'
 import fontStyleSheetUrl from './styles/font.css'
@@ -79,7 +79,7 @@ export const links: LinksFunction = () => {
 
 export const meta: MetaFunction<typeof loader> = ({ data }) => {
 	return [
-		{ title: data ? 'Filapps Hospitality System' : 'Error | Filapps Hospitality System' },
+		{ title: data ? 'Wochlife Accommodations' : 'Error | Wochlife Accommodations' },
 		{ name: 'description', content: `Your own captain's log` },
 	]
 }
@@ -239,7 +239,7 @@ function App() {
 
 			{!routeAdmin && <FooterBase />}
 			<Confetti id={data.confettiId} />
-			<FilappsToaster toast={data.toast} />
+			<WochlifeToaster toast={data.toast} />
 			<WochlifeProgress />
 		</Document>
 	)

app/routes/_auth+/auth.$provider.callback.test.ts

@@ -1,7 +1,7 @@
 import { faker } from '@faker-js/faker'
 import { http } from 'msw'
 import { afterEach, expect, test } from 'vitest'
-import { twoFAVerificationType } from '#app/routes/user+/settings+/profile.two-factor.tsx'
+import { twoFAVerificationType } from '#app/routes/user+/profile+/two-factor.tsx'
 import { getSessionExpirationDate, sessionKey } from '#app/utils/auth.server.ts'
 import { connectionSessionStorage } from '#app/utils/connections.server.ts'
 import { GITHUB_PROVIDER_NAME } from '#app/utils/connections.tsx'
@@ -61,7 +61,7 @@ test('when a user is logged in, it creates the connection', async () => {
 		code: githubUser.code,
 	})
 	const response = await loader({ request, params: PARAMS, context: {} })
-	expect(response).toHaveRedirect('/user/settings/profile/connections')
+	expect(response).toHaveRedirect('/user/profile/connections')
 	await expect(response).toSendToast(
 		expect.objectContaining({
 			title: 'Connected',
@@ -97,7 +97,7 @@ test(`when a user is logged in and has already connected, it doesn't do anything
 		code: githubUser.code,
 	})
 	const response = await loader({ request, params: PARAMS, context: {} })
-	expect(response).toHaveRedirect('/user/settings/profile/connections')
+	expect(response).toHaveRedirect('/user/profile/connections')
 	expect(response).toSendToast(
 		expect.objectContaining({
 			title: 'Already Connected',
@@ -156,7 +156,7 @@ test('gives an error if the account is already connected to another user', async
 		code: githubUser.code,
 	})
 	const response = await loader({ request, params: PARAMS, context: {} })
-	expect(response).toHaveRedirect('/user/settings/profile/connections')
+	expect(response).toHaveRedirect('/user/profile/connections')
 	await expect(response).toSendToast(
 		expect.objectContaining({
 			title: 'Already Connected',

app/routes/_auth+/auth.$provider.callback.ts

@@ -66,7 +66,7 @@ export async function loader({ request, params }: DataFunctionArgs) {
 	if (existingConnection && userId) {
 		if (existingConnection.userId === userId) {
 			return redirectWithToast(
-				'/user/settings/profile/connections',
+				'/user/profile/connections',
 				{
 					title: 'Already Connected',
 					description: `Your "${profile.username}" ${label} account is already connected.`,
@@ -75,7 +75,7 @@ export async function loader({ request, params }: DataFunctionArgs) {
 			)
 		} else {
 			return redirectWithToast(
-				'/user/settings/profile/connections',
+				'/user/profile/connections',
 				{
 					title: 'Already Connected',
 					description: `The "${profile.username}" ${label} account is already connected to another account.`,
@@ -95,7 +95,7 @@ export async function loader({ request, params }: DataFunctionArgs) {
 			},
 		})
 		return redirectWithToast(
-			'/user/settings/profile/connections',
+			'/user/profile/connections',
 			{
 				title: 'Connected',
 				type: 'success',

app/routes/_auth+/forgot-password.tsx

@@ -73,8 +73,8 @@ export async function action({ request }: DataFunctionArgs) {
 
 	const response = await sendEmail({
 		to: user.email,
-		from: 'noreply@Filapps.com',
-		subject: `Filapps Accommodations System Password Reset`,
+		from: 'noreply@wochlife.com',
+		subject: `Wochlife Accommodations Password Reset`,
 		react: (
 			<ForgotPasswordEmail onboardingUrl={verifyUrl.toString()} otp={otp} />
 		),
@@ -99,7 +99,7 @@ function ForgotPasswordEmail({
 		<E.Html lang="en" dir="ltr">
 			<E.Container>
 				<h1>
-					<E.Text>Filapps Accommodations System Password Reset</E.Text>
+					<E.Text>Wochlife Accommodations Password Reset</E.Text>
 				</h1>
 				<p>
 					<E.Text>
@@ -116,7 +116,7 @@ function ForgotPasswordEmail({
 }
 
 export const meta: MetaFunction = () => {
-	return [{ title: 'Password Recovery for Filapps Accommodations System' }]
+	return [{ title: 'Password Recovery for Wochlife Accommodations' }]
 }
 
 export default function ForgotPasswordRoute() {

app/routes/_auth+/login.tsx

@@ -15,7 +15,7 @@ import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'
 import { CheckboxField, ErrorList, Field } from '#app/components/forms.tsx'
 import { Spacer } from '#app/components/spacer.tsx'
 import { StatusButton } from '#app/components/ui/status-button.tsx'
-import { twoFAVerificationType } from '#app/routes/user+/settings+/profile.two-factor.tsx'
+import { twoFAVerificationType } from '#app/routes/user+/profile+/two-factor.tsx'
 import {
 	getUserId,
 	login,
@@ -360,7 +360,7 @@ export default function LoginPage() {
 }
 
 export const meta: MetaFunction = () => {
-	return [{ title: 'Login to Filapps Accommodations System' }]
+	return [{ title: 'Login to Wochlife Accommodations' }]
 }
 
 export function ErrorBoundary() {

app/routes/_auth+/reset-password.tsx

@@ -87,7 +87,7 @@ export async function action({ request }: DataFunctionArgs) {
 }
 
 export const meta: MetaFunction = () => {
-	return [{ title: 'Reset Password | Filapps Accommodations System' }]
+	return [{ title: 'Reset Password | Wochlife Accommodations' }]
 }
 
 export default function ResetPasswordPage() {

app/routes/_auth+/verify.tsx

@@ -9,9 +9,9 @@ import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'
 import { ErrorList, Field } from '#app/components/forms.tsx'
 import { Spacer } from '#app/components/spacer.tsx'
 import { StatusButton } from '#app/components/ui/status-button.tsx'
-import { handleVerification as handleChangeEmailVerification } from '#app/routes/user+/settings+/profile.change-email.tsx'
-import { twoFAVerificationType } from '#app/routes/user+/settings+/profile.two-factor.tsx'
-import { type twoFAVerifyVerificationType } from '#app/routes/user+/settings+/profile.two-factor.verify.tsx'
+import { handleVerification as handleChangeEmailVerification } from '#app/routes/user+/profile+/change-email.tsx'
+import { twoFAVerificationType } from '#app/routes/user+/profile+/two-factor.tsx'
+import { type twoFAVerifyVerificationType } from '#app/routes/user+/profile+/two-factor.verify.tsx'
 import { requireUserId } from '#app/utils/auth.server.ts'
 import { validateCSRF } from '#app/utils/csrf.server.ts'
 import { prisma } from '#app/utils/db.server.ts'

app/routes/_base+/contact.tsx

@@ -52,7 +52,7 @@ export async function action({ request }: DataFunctionArgs) {
 	const { email, name, message, redirectTo } = submission.value
 
 	const response = await sendEmail({
-		from: "Contact Form from Filapps Hospitality System <noreply@Filapps.com>",
+		from: "Contact Form from Wochlife Accommodations <noreply@wochlife.com>",
 		to: '[email protected]', // mail of preference where the message should be delivered to (owner of web, admin, etc.)
 		reply_to: email,
 		subject: `Web Form message from ` + email,
@@ -80,7 +80,7 @@ export async function action({ request }: DataFunctionArgs) {
 }
 
 export const meta: MetaFunction = () => {
-	return [{ title: 'Contact Us | Filapps Hospitality System' }]
+	return [{ title: 'Contact Us | Wochlife Accommodations' }]
 }
 
 export default function ContactForm() {

app/routes/_base+/index.tsx

@@ -31,7 +31,7 @@ export default function Index() {
 
 	return (
 		<div className="mx-auto flex min-h-[90vh] my-24 flex-col justify-center text-center">
-			<h1 className="text-h2">Filapps Hospitality System</h1>
+			<h1 className="text-h2">Wochlife Accommodations</h1>
 
 			<div className="mt-24">
 				<h4 className="text-h4">Rooms</h4>
@@ -41,4 +41,4 @@ export default function Index() {
 	)
 }
 
-export const meta: MetaFunction = () => [{ title: 'Welcome To Filapps' }]
+export const meta: MetaFunction = () => [{ title: 'Welcome To Wochlife Accommodations' }]

app/routes/admin+/docs+/index.tsx

@@ -3,7 +3,7 @@ export default function AdminIndex() {
 		<div className="py-2 md:py-6">
 			<div className="mb-8 px-2 max-sm:text-center md:px-6">
 				<h2 className="mb-2 text-h2 capitalize text-foreground">
-					Filapps Documentation
+					Wochlife Accommodations Documentation
 				</h2>
 				<p className="text-xl">
 					Here, You will find all necessary information to operate this

app/routes/admin+/users+/$username.tsx

@@ -89,10 +89,10 @@ export default function ProfileRoute() {
 export const meta: MetaFunction<typeof loader> = ({ data, params }) => {
 	const displayName = data?.user.name ?? params.username
 	return [
-		{ title: `${displayName} | Filapps Hospitality System` },
+		{ title: `${displayName} | Wochlife Accommodations` },
 		{
 			name: 'description',
-			content: `Profile of ${displayName} on Filapps Hospitality System`,
+			content: `Profile of ${displayName} on Wochlife Accommodations`,
 		},
 	]
 }