dvelo/mhsf-dev
1
0
Fork 0
mirror of https://github.com/DeveloLongScript/MHSF.git synced 2026-05-07 16:05:00 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: misc

Browse Source
This commit is contained in:
dvelo 2025-05-16 19:44:00 -05:00
parent 2a58192a14
commit 88e703625c
6 changed files with 223 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/www/src/components/feat/server-page/motd/motd-row.tsx
View File

@ -150,7 +150,7 @@ export const CodeHighlight = ({
const language = match ? match[1] : undefined;
return (
<ShikiHighlighter language={language} theme="poimandres" {...props}>
<ShikiHighlighter language={language?.toLocaleLowerCase()} theme="poimandres" {...props}>
{String(children)}
</ShikiHighlighter>
);

148
apps/www/src/components/feat/server-page/server-editor/customizations/server-color-mode-box.tsx
View File

@ -1,13 +1,13 @@
import { Input } from "@/components/ui/input";
import { Material } from "@/components/ui/material";
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectLabel,
SelectTrigger,
SelectValue,
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectLabel,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { Switch } from "@/components/ui/switch";
import { useMHSFServer } from "@/lib/hooks/use-mhsf-server";
@ -17,78 +17,82 @@ import { Moon, Sun } from "lucide-react";
import { useEffect, useState } from "react";
export function ServerColorModeBox({
serverData,
minehutData,
serverData,
minehutData,
}: {
serverData: ReturnType<typeof useMHSFServer>;
minehutData: ServerResponse;
serverData: ReturnType<typeof useMHSFServer>;
minehutData: ServerResponse;
}) {
const [colorModeEnabled, setColorModeEnabled] = useState(false);
const [colorMode, setColorMode] = useState("light");
const [colorModeEnabled, setColorModeEnabled] = useState(false);
const [colorMode, setColorMode] = useState("light");
useEffect(() => {
setColorModeEnabled(serverData.server?.customizationData.colorMode !== undefined);
setColorMode(serverData.server?.customizationData.colorMode ?? "light");
}, [serverData])
useEffect(() => {
setColorModeEnabled(
serverData.server?.customizationData.colorMode !== null,
);
setColorMode(serverData.server?.customizationData.colorMode ?? "light");
}, [serverData]);
useEffect(() => {
if (colorMode === "idc") {
setColorModeEnabled(false);
setColorMode("light");
}
if (colorMode === "dark")
window.dispatchEvent(new Event("force-dark-mode"));
useEffect(() => {
if (colorMode === "idc") {
setColorModeEnabled(false);
setColorMode("light");
}
if (colorModeEnabled) {
if (colorMode === "dark")
window.dispatchEvent(new Event("force-dark-mode"));
if (colorMode === "light")
window.dispatchEvent(new Event("force-light-mode"));
}, [colorMode]);
if (colorMode === "light")
window.dispatchEvent(new Event("force-light-mode"));
} else window.dispatchEvent(new Event("force-no-mode"));
}, [colorMode, colorModeEnabled]);
useEffect(() => {
update();
}, [colorMode, colorModeEnabled]);
useEffect(() => {
update();
}, [colorMode, colorModeEnabled]);
const update = debounce(async () => {
await fetch(
`/api/v1/server/get/${minehutData._id}/settings/change-color-mode${colorModeEnabled !== false ? `?colorMode=${colorMode}` : ""}`
);
}, 500);
const update = debounce(async () => {
await fetch(
`/api/v1/server/get/${minehutData._id}/settings/change-color-mode${colorModeEnabled !== false ? `?colorMode=${colorMode}` : ""}`,
);
}, 500);
return (
<Material className="flex justify-between items-center p-2 mt-2">
<div className="flex items-center font-bold gap-4">
<Switch
checked={colorModeEnabled}
onCheckedChange={setColorModeEnabled}
/>{" "}
Enforce color mode
</div>
return (
<Material className="flex justify-between items-center p-2 mt-2">
<div className="flex items-center font-bold gap-4">
<Switch
checked={colorModeEnabled}
onCheckedChange={setColorModeEnabled}
/>{" "}
Enforce color mode
</div>
<Select
disabled={!colorModeEnabled}
onValueChange={setColorMode}
value={colorMode}
>
<SelectTrigger className="w-[180px] disabled:hidden">
<SelectValue placeholder="Select mode" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectItem value="dark">
<div className="flex items-center gap-2">
<Moon size={16} />
Dark
</div>
</SelectItem>
<SelectItem value="light">
<div className="flex items-center gap-2">
<Sun size={16} />
Light
</div>
</SelectItem>
<SelectItem value="idc">I couldn't care less</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
</Material>
);
<Select
disabled={!colorModeEnabled}
onValueChange={setColorMode}
value={colorMode}
>
<SelectTrigger className="w-[180px] disabled:hidden">
<SelectValue placeholder="Select mode" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectItem value="dark">
<div className="flex items-center gap-2">
<Moon size={16} />
Dark
</div>
</SelectItem>
<SelectItem value="light">
<div className="flex items-center gap-2">
<Sun size={16} />
Light
</div>
</SelectItem>
<SelectItem value="idc">I couldn't care less</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
</Material>
);
}

114
apps/www/src/components/feat/server-page/server-page.tsx
View File

@ -8,61 +8,71 @@ import { ServerPageButtons } from "./server-page-buttons";
import type { useMHSFServer } from "@/lib/hooks/use-mhsf-server";
import { cn } from "@/lib/utils";
import { useEffect } from "react";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
export function ServerMainPage({
server,
mhsfData,
server,
mhsfData,
}: {
server: ServerResponse;
mhsfData: ReturnType<typeof useMHSFServer>;
server: ServerResponse;
mhsfData: ReturnType<typeof useMHSFServer>;
}) {
useEffect(() => {
if (mhsfData.server?.customizationData.colorMode !== undefined) {
if (mhsfData.server?.customizationData.colorMode === "dark")
window.dispatchEvent(new Event("force-dark-mode"));
if (mhsfData.server?.customizationData.colorMode === "light")
window.dispatchEvent(new Event("force-light-mode"));
}
});
useEffect(() => {
if (mhsfData.server?.customizationData.colorMode !== null) {
if (mhsfData.server?.customizationData.colorMode === "dark")
window.dispatchEvent(new Event("force-dark-mode"));
if (mhsfData.server?.customizationData.colorMode === "light")
window.dispatchEvent(new Event("force-light-mode"));
}
});
return (
<div
className={cn(
"xl:px-[100px]",
mhsfData.server?.customizationData.banner === undefined
? "pt-[150px]"
: "pt-[300px]"
)}
>
{mhsfData.server?.customizationData.banner && (
<img
src={mhsfData.server?.customizationData.banner}
alt="User provided banner for server"
className="rounded align-middle block ml-auto mr-auto absolute left-0 z-0 w-full object-fill"
style={{
maskImage: "linear-gradient(to top, transparent, black)",
top: "0",
}}
/>
)}
<span className="flex items-center gap-2 w-full relative">
<div className="bg-secondary p-4 rounded-lg lg:ml-4">
<IconDisplay server={server} />
</div>
<p className="w-full">
<div className="lg:flex justify-between w-full">
<h1 className="text-2xl font-bold">{server.name}</h1>
<span>
<ServerPageButtons server={server} mhsfData={mhsfData} />
</span>
</div>
<span className="flex items-center gap-2 flex-wrap">
<ServerPageTags server={server} className="mt-1" />
</span>
</p>
</span>
<Separator className="my-6" />
<ServerRows server={server} mhsfData={mhsfData} />
</div>
);
return (
<div
className={cn(
"xl:px-[100px]",
mhsfData.server?.customizationData.banner === undefined
? "pt-[150px]"
: "pt-[300px]",
)}
>
{mhsfData.server?.customizationData.banner && (
<img
src={mhsfData.server?.customizationData.banner}
alt="User provided banner for server"
className="rounded align-middle block ml-auto mr-auto absolute left-0 z-0 w-full object-fill"
style={{
maskImage: "linear-gradient(to top, transparent, black)",
top: "0",
}}
/>
)}
<span className="flex items-center gap-2 w-full relative">
<div className="bg-secondary p-4 rounded-lg lg:ml-4">
<IconDisplay server={server} />
</div>
<p className="w-full">
<div className="lg:flex justify-between w-full">
<h1 className="text-2xl font-bold flex items-center gap-1 ml-2">
<Avatar className="h-[32px] w-[32px]">
<AvatarImage
src={mhsfData.server?.customizationData.userProfilePicture ?? ""}
alt="Server Owner Image"
/>
<AvatarFallback>{server.name[0]}</AvatarFallback>
</Avatar>
{server.name}
</h1>
<span>
<ServerPageButtons server={server} mhsfData={mhsfData} />
</span>
</div>
<span className="flex items-center gap-2 flex-wrap">
<ServerPageTags server={server} className="mt-1" />
</span>
</p>
</span>
<Separator className="my-6" />
<ServerRows server={server} mhsfData={mhsfData} />
</div>
);
}

79
apps/www/src/components/ui/avatar.tsx Normal file
View File

@ -0,0 +1,79 @@
/*
* MHSF, Minehut Server List
* All external content is rather licensed under the ECA Agreement
* located here: https://mhsf.app/docs/legal/external-content-agreement
*
* All code under MHSF is licensed under the MIT License
* by open source contributors
*
* Copyright (c) 2025 dvelo
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to
* deal in the Software without restriction, including without limitation the
* rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
* sell copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
* OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
* WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
* OTHER DEALINGS IN THE SOFTWARE.
*/
"use client"
import * as React from "react"
import * as AvatarPrimitive from "@radix-ui/react-avatar"
import { cn } from "@/lib/utils"
const Avatar = React.forwardRef<
React.ElementRef<typeof AvatarPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
>(({ className, ...props }, ref) => (
<AvatarPrimitive.Root
ref={ref}
className={cn(
"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
className
)}
{...props}
/>
))
Avatar.displayName = AvatarPrimitive.Root.displayName
const AvatarImage = React.forwardRef<
React.ElementRef<typeof AvatarPrimitive.Image>,
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
>(({ className, ...props }, ref) => (
<AvatarPrimitive.Image
ref={ref}
className={cn("aspect-square h-full w-full", className)}
{...props}
/>
))
AvatarImage.displayName = AvatarPrimitive.Image.displayName
const AvatarFallback = React.forwardRef<
React.ElementRef<typeof AvatarPrimitive.Fallback>,
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
>(({ className, ...props }, ref) => (
<AvatarPrimitive.Fallback
ref={ref}
className={cn(
"flex h-full w-full items-center justify-center rounded-full bg-muted",
className
)}
{...props}
/>
))
AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
export { Avatar, AvatarImage, AvatarFallback }

3
apps/www/src/components/util/theme-provider.tsx
View File

@ -49,6 +49,9 @@ export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
window.addEventListener("force-light-mode", () => {
setForcedTheme('light');
});
window.addEventListener("force-no-mode", () => {
setForcedTheme(undefined);
});
});
React.useEffect(() => {

2
apps/www/src/lib/types/data.ts
View File

@ -36,7 +36,7 @@ export type ActualCustomization = {
/** @version 1 @deprecated Use `colorMode` instead */
colorScheme: string | undefined;
/** @version 2 */
colorMode: "dark" | "light" | undefined;
colorMode: "dark" | "light" | null;
customizationVersion: number | undefined;
} & (
| {