Moved to ReactJS
This commit is contained in:
parent
c8ef2b248f
commit
1d0ebeb2b7
100 changed files with 1909 additions and 6056 deletions
|
|
@ -18,23 +18,17 @@
|
|||
"@tensamin/core-user": "workspace:*",
|
||||
"@tensamin/shared": "workspace:*",
|
||||
"@tensamin/ui": "workspace:*",
|
||||
"@ark-ui/solid": "^5.34.1",
|
||||
"@corvu/drawer": "^0.2.4",
|
||||
"@corvu/otp-field": "^0.1.4",
|
||||
"@corvu/resizable": "^0.2.5",
|
||||
"@kobalte/core": "^0.13.11",
|
||||
"@noble/curves": "^2.0.1",
|
||||
"@solidjs/router": "^0.15.4",
|
||||
"@tailwindcss/vite": "^4.2.1",
|
||||
"@tanstack/solid-virtual": "^3.13.21",
|
||||
"@tanstack/react-router": "^1.0.0",
|
||||
"@tanstack/react-virtual": "^3.0.0",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"cmdk-solid": "^1.1.2",
|
||||
"comlink": "^4.4.2",
|
||||
"embla-carousel-solid": "^8.6.0",
|
||||
"lucide-solid": "^0.564.0",
|
||||
"solid-js": "^1.9.11",
|
||||
"solid-sonner": "^0.2.8",
|
||||
"lucide-react": "^0.564.0",
|
||||
"react": "^19.2.0",
|
||||
"react-dom": "^19.2.0",
|
||||
"sonner": "^1.0.0",
|
||||
"tailwind-merge": "^3.5.0",
|
||||
"tailwind-scrollbar-hide": "^4.0.0",
|
||||
"tailwindcss": "^4.2.1",
|
||||
|
|
@ -43,14 +37,14 @@
|
|||
"zod": "^4.3.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^19.2.2",
|
||||
"@types/react-dom": "^19.2.2",
|
||||
"@vitejs/plugin-react": "^5.0.4",
|
||||
"@eslint/js": "^10.0.1",
|
||||
"eslint": "^10.0.3",
|
||||
"eslint-plugin-solid": "^0.14.5",
|
||||
"globals": "^17.4.0",
|
||||
"typescript": "~5.9.3",
|
||||
"typescript-eslint": "^8.57.0",
|
||||
"vite": "^7.3.1",
|
||||
"vite-plugin-lucide-preprocess": "^1.4.8",
|
||||
"vite-plugin-solid": "^2.11.10"
|
||||
"vite": "^7.3.1"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,13 +5,13 @@ import { Card, CardHeader } from "@tensamin/ui/card";
|
|||
|
||||
export default function Basic(props: { user: User }) {
|
||||
return (
|
||||
<Card class="animate-in fade-in duration-300 rounded-2xl">
|
||||
<CardHeader class="flex flex-row gap-2.5 items-center justify-start p-2">
|
||||
<Card className="animate-in fade-in duration-300 rounded-2xl">
|
||||
<CardHeader className="flex flex-row gap-2.5 items-center justify-start p-2">
|
||||
<Avatar
|
||||
img={props.user.avatar}
|
||||
fallback={reduceDisplay(props.user.display)}
|
||||
/>
|
||||
<div class="flex flex-col gap-1 w-full items-start justify-center text-[15px]">
|
||||
<div className="flex flex-col gap-1 w-full items-start justify-center text-[15px]">
|
||||
<p>{props.user.display}</p>
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
|
|
|||
|
|
@ -1,42 +1,45 @@
|
|||
import { Button } from "@tensamin/ui/button";
|
||||
import { House } from "lucide-solid";
|
||||
import { useNavigate, useSearchParams } from "@solidjs/router";
|
||||
import { createEffect, createSignal } from "solid-js";
|
||||
import { House } from "lucide-react";
|
||||
import { useNavigate, useRouterState } from "@tanstack/react-router";
|
||||
import * as React from "react";
|
||||
import { useUser, type User } from "@tensamin/core-user/context";
|
||||
|
||||
export default function Navbar() {
|
||||
const navigate = useNavigate();
|
||||
const { get } = useUser();
|
||||
const search = useRouterState({ select: (state) => state.location.search });
|
||||
|
||||
const [user, setUser] = createSignal<User | null>(null);
|
||||
const [user, setUser] = React.useState<User | null>(null);
|
||||
|
||||
createEffect(() => {
|
||||
const [searchParams] = useSearchParams();
|
||||
const id = Number(searchParams.id);
|
||||
const currentId = React.useMemo(
|
||||
() => Number((search as Record<string, unknown>).id ?? Number.NaN),
|
||||
[search],
|
||||
);
|
||||
|
||||
if (isNaN(id)) {
|
||||
React.useEffect(() => {
|
||||
if (Number.isNaN(currentId)) {
|
||||
setUser(null);
|
||||
return;
|
||||
}
|
||||
|
||||
get(id)
|
||||
get(currentId)
|
||||
.then(setUser)
|
||||
.catch(() => setUser(null));
|
||||
});
|
||||
}, [currentId, get]);
|
||||
|
||||
return (
|
||||
<div class="w-full h-13.5 flex items-center justify-center">
|
||||
<div className="w-full h-13.5 flex items-center justify-center">
|
||||
<Button
|
||||
onClick={() => {
|
||||
navigate("/");
|
||||
void navigate({ to: "/" });
|
||||
}}
|
||||
class="w-9 h-9 aspect-square p-0 rounded-lg"
|
||||
className="w-9 h-9 aspect-square p-0 rounded-lg"
|
||||
variant="outline"
|
||||
>
|
||||
<House size={18} />
|
||||
</Button>
|
||||
<p class="font-medium pl-3 text-md">{user()?.display}</p>
|
||||
<div class="w-full" />
|
||||
<p className="font-medium pl-3 text-md">{user?.display}</p>
|
||||
<div className="w-full" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,8 +4,9 @@ import { Input } from "@tensamin/ui/input";
|
|||
import { Label } from "@tensamin/ui/label";
|
||||
import { useStorage } from "@tensamin/core-storage/context";
|
||||
import { log, toast } from "@tensamin/shared/log";
|
||||
import { useNavigate } from "@solidjs/router";
|
||||
import { Upload } from "lucide-solid";
|
||||
import { useNavigate } from "@tanstack/react-router";
|
||||
import { Upload } from "lucide-react";
|
||||
import * as React from "react";
|
||||
import { z } from "zod";
|
||||
|
||||
const fetchedUser = z.object({
|
||||
|
|
@ -27,25 +28,22 @@ const formSchema = z.object({
|
|||
});
|
||||
|
||||
export default function Form() {
|
||||
let uploadRef: HTMLInputElement | undefined = undefined;
|
||||
const setUploadRef = (el: HTMLInputElement) => {
|
||||
uploadRef = el;
|
||||
};
|
||||
const uploadRef = React.useRef<HTMLInputElement | null>(null);
|
||||
const { save } = useStorage();
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<div class="flex gap-5">
|
||||
<Card class="w-75 h-80">
|
||||
<div className="flex gap-5">
|
||||
<Card className="w-75 h-80">
|
||||
<CardHeader>
|
||||
<CardTitle>Use .tu file</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent class="h-full flex items-center justify-center">
|
||||
<CardContent className="h-full flex items-center justify-center">
|
||||
<div
|
||||
onClick={() => uploadRef?.click()}
|
||||
class="cursor-pointer w-60 aspect-square mb-17 bg-input/13 hover:bg-input/30 transition-all duration-300 ease-in-out border-dotted border-input/75 border-3 flex items-center justify-center rounded-lg"
|
||||
onClick={() => uploadRef.current?.click()}
|
||||
className="cursor-pointer w-60 aspect-square mb-17 bg-input/13 hover:bg-input/30 transition-all duration-300 ease-in-out border-dotted border-input/75 border-3 flex items-center justify-center rounded-lg"
|
||||
>
|
||||
<Upload class="text-input/75" size={34} />
|
||||
<Upload className="text-input/75" size={34} />
|
||||
</div>
|
||||
<input
|
||||
onChange={async (e) => {
|
||||
|
|
@ -62,7 +60,7 @@ export default function Form() {
|
|||
save("user_id", userId);
|
||||
save("private_key", privateKey);
|
||||
|
||||
navigate("/");
|
||||
void navigate({ to: "/" });
|
||||
} else {
|
||||
throw new Error("No file selected");
|
||||
}
|
||||
|
|
@ -72,18 +70,18 @@ export default function Form() {
|
|||
}
|
||||
}}
|
||||
type="file"
|
||||
ref={setUploadRef}
|
||||
class="hidden"
|
||||
ref={uploadRef}
|
||||
className="hidden"
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card class="w-75 h-auto">
|
||||
<Card className="w-75 h-auto">
|
||||
<CardHeader>
|
||||
<CardTitle>Use credentials</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form
|
||||
class="flex flex-col gap-5 h-full"
|
||||
className="flex flex-col gap-5 h-full"
|
||||
onSubmit={async (e) => {
|
||||
e.preventDefault();
|
||||
const formData = new FormData(e.currentTarget);
|
||||
|
|
@ -111,7 +109,7 @@ export default function Form() {
|
|||
save("user_id", user.data.user_id);
|
||||
save("private_key", inputParse.data.private_key);
|
||||
|
||||
navigate("/");
|
||||
void navigate({ to: "/" });
|
||||
} else {
|
||||
log(0, "Login", "red", "Invalid response from server");
|
||||
toast("error", "Invalid response from server");
|
||||
|
|
@ -123,13 +121,13 @@ export default function Form() {
|
|||
});
|
||||
}}
|
||||
>
|
||||
<div class="flex flex-col gap-2">
|
||||
<Label for="username">Username</Label>
|
||||
<Input type="text" id="username" />
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label htmlFor="username">Username</Label>
|
||||
<Input type="text" id="username" name="username" />
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<Label for="private_key">Private Key</Label>
|
||||
<Input type="password" id="private_key" />
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label htmlFor="private_key">Private Key</Label>
|
||||
<Input type="password" id="private_key" name="private_key" />
|
||||
</div>
|
||||
<Button type="submit">Login</Button>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -1,26 +1,26 @@
|
|||
import { useStorage } from "@tensamin/core-storage/context";
|
||||
import Wrapper from "@tensamin/core-user/wrapper";
|
||||
import { createEffect, createSignal } from "solid-js";
|
||||
import * as React from "react";
|
||||
import Basic from "./modals/basic";
|
||||
import List from "@/features/conversation/list/body";
|
||||
|
||||
export default function Sidebar() {
|
||||
const [userId, setUserId] = createSignal(0);
|
||||
const [userId, setUserId] = React.useState(0);
|
||||
const { load } = useStorage();
|
||||
|
||||
createEffect(() => {
|
||||
React.useEffect(() => {
|
||||
load("user_id").then(setUserId);
|
||||
});
|
||||
}, [load]);
|
||||
|
||||
return (
|
||||
<div class="w-75 h-full flex flex-col gap-3 p-2">
|
||||
{userId() !== 0 && (
|
||||
<div className="w-75 h-full flex flex-col gap-3 p-2">
|
||||
{userId !== 0 && (
|
||||
<Wrapper
|
||||
userId={userId()}
|
||||
userId={userId}
|
||||
component={(user) => <Basic user={user} />}
|
||||
/>
|
||||
)}
|
||||
<div class="h-full">
|
||||
<div className="h-full">
|
||||
<List />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,4 @@
|
|||
import {
|
||||
createContext,
|
||||
createEffect,
|
||||
useContext,
|
||||
type ParentProps,
|
||||
} from "solid-js";
|
||||
import { createStore } from "solid-js/store";
|
||||
import * as React from "react";
|
||||
import { useSocket } from "@tensamin/ttp/context";
|
||||
|
||||
import { toast } from "@tensamin/shared/log";
|
||||
|
|
@ -18,44 +12,64 @@ interface contextValue {
|
|||
communities: Community[];
|
||||
}
|
||||
|
||||
const ConversationContext = createContext<contextValue>();
|
||||
const ConversationContext = React.createContext<contextValue | undefined>(
|
||||
undefined,
|
||||
);
|
||||
|
||||
export default function ConversationProvider(props: ParentProps) {
|
||||
const [conversations, setConversations] = createStore<Conversation[]>([]);
|
||||
const [communities, setCommunities] = createStore<Community[]>([]);
|
||||
export default function ConversationProvider(props: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
const [conversations, setConversations] = React.useState<Conversation[]>([]);
|
||||
const [communities, setCommunities] = React.useState<Community[]>([]);
|
||||
|
||||
const { send } = useSocket();
|
||||
|
||||
createEffect(() => {
|
||||
React.useEffect(() => {
|
||||
let active = true;
|
||||
|
||||
send("get_chats", {})
|
||||
.then((data) => {
|
||||
setConversations(data.data.user_ids);
|
||||
if (active) {
|
||||
setConversations(data.data.user_ids);
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
toast("error", "Failed to load conversations");
|
||||
});
|
||||
|
||||
send("get_communities", {})
|
||||
.then((data) => {
|
||||
setCommunities(data.data.communities);
|
||||
if (active) {
|
||||
setCommunities(data.data.communities);
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
toast("error", "Failed to load communities");
|
||||
});
|
||||
});
|
||||
|
||||
return () => {
|
||||
active = false;
|
||||
};
|
||||
}, [send]);
|
||||
|
||||
const value = React.useMemo(
|
||||
() => ({ conversations, communities }),
|
||||
[communities, conversations],
|
||||
);
|
||||
|
||||
return (
|
||||
<ConversationContext.Provider value={{ conversations, communities }}>
|
||||
<ConversationContext.Provider value={value}>
|
||||
{props.children}
|
||||
</ConversationContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export function useConversation(): contextValue {
|
||||
const context = useContext(ConversationContext);
|
||||
const context = React.useContext(ConversationContext);
|
||||
if (!context) {
|
||||
throw new Error(
|
||||
"useConversation must be used within a ConversationProvider",
|
||||
);
|
||||
}
|
||||
return context;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,65 +1,64 @@
|
|||
import { createSignal, For, Show } from "solid-js";
|
||||
import * as React from "react";
|
||||
import { useVirtualizer } from "@tanstack/react-virtual";
|
||||
import { useConversation } from "../context";
|
||||
import { createVirtualizer } from "@tanstack/solid-virtual";
|
||||
|
||||
import Switch from "./switch";
|
||||
import ConversationModal from "../modal/conversation";
|
||||
import CommunityModal from "../modal/community";
|
||||
|
||||
export default function List() {
|
||||
const [category, setCategory] = createSignal<"conversations" | "communities">(
|
||||
"conversations",
|
||||
);
|
||||
const [category, setCategory] = React.useState<
|
||||
"conversations" | "communities"
|
||||
>("conversations");
|
||||
|
||||
const { conversations, communities } = useConversation();
|
||||
|
||||
// eslint-disable-next-line no-unassigned-vars
|
||||
let scrollRef!: HTMLDivElement;
|
||||
const scrollRef = React.useRef<HTMLDivElement | null>(null);
|
||||
|
||||
const virtualizer = createVirtualizer({
|
||||
get count() {
|
||||
return category() === "conversations"
|
||||
? conversations.length
|
||||
: communities.length;
|
||||
},
|
||||
const virtualizer = useVirtualizer({
|
||||
count: category === "conversations" ? conversations.length : communities.length,
|
||||
estimateSize: () => 80,
|
||||
getScrollElement: () => scrollRef,
|
||||
getScrollElement: () => scrollRef.current,
|
||||
});
|
||||
|
||||
return (
|
||||
<div class="flex flex-col gap-3">
|
||||
<Switch category={category()} setCategory={setCategory} />
|
||||
<div
|
||||
ref={scrollRef}
|
||||
id="conversation-list"
|
||||
class="overflow-y-auto flex-1"
|
||||
>
|
||||
<div className="flex flex-col gap-3">
|
||||
<Switch category={category} setCategory={setCategory} />
|
||||
<div ref={scrollRef} id="conversation-list" className="overflow-y-auto flex-1">
|
||||
<div
|
||||
class="relative w-full flex flex-col gap-2"
|
||||
className="relative w-full flex flex-col gap-2"
|
||||
style={{
|
||||
height: `${virtualizer.getTotalSize()}px`,
|
||||
}}
|
||||
>
|
||||
<For each={virtualizer.getVirtualItems()}>
|
||||
{(virtualItem) => {
|
||||
return (
|
||||
<Show
|
||||
when={category() === "conversations"}
|
||||
fallback={
|
||||
<CommunityModal
|
||||
community={communities[virtualItem.index]}
|
||||
{virtualizer.getVirtualItems().map((virtualItem) => {
|
||||
const itemKey = `${category}-${virtualItem.index}`;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={itemKey}
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: "100%",
|
||||
transform: `translateY(${virtualItem.start}px)`,
|
||||
}}
|
||||
>
|
||||
{category === "conversations" ? (
|
||||
conversations[virtualItem.index] ? (
|
||||
<ConversationModal
|
||||
userId={conversations[virtualItem.index].user_id}
|
||||
/>
|
||||
}
|
||||
>
|
||||
<ConversationModal
|
||||
userId={conversations[virtualItem.index].user_id}
|
||||
/>
|
||||
</Show>
|
||||
);
|
||||
}}
|
||||
</For>
|
||||
) : null
|
||||
) : communities[virtualItem.index] ? (
|
||||
<CommunityModal community={communities[virtualItem.index]} />
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import { createEffect, createSignal, onMount } from "solid-js";
|
||||
import * as React from "react";
|
||||
|
||||
type Category = "conversations" | "communities";
|
||||
|
||||
|
|
@ -6,24 +6,27 @@ export default function Switch(props: {
|
|||
category: Category;
|
||||
setCategory: (category: Category) => void;
|
||||
}) {
|
||||
let conversationsRef: HTMLButtonElement | undefined;
|
||||
let communitiesRef: HTMLButtonElement | undefined;
|
||||
const conversationsRef = React.useRef<HTMLButtonElement | null>(null);
|
||||
const communitiesRef = React.useRef<HTMLButtonElement | null>(null);
|
||||
|
||||
const [indicator, setIndicator] = createSignal({ left: 0, width: 0 });
|
||||
const [indicator, setIndicator] = React.useState({ left: 0, width: 0 });
|
||||
|
||||
function updateIndicator() {
|
||||
const updateIndicator = React.useCallback(() => {
|
||||
const active =
|
||||
props.category === "conversations" ? conversationsRef : communitiesRef;
|
||||
props.category === "conversations"
|
||||
? conversationsRef.current
|
||||
: communitiesRef.current;
|
||||
if (!active) return;
|
||||
|
||||
setIndicator({
|
||||
left: active.offsetLeft,
|
||||
width: active.offsetWidth,
|
||||
});
|
||||
}
|
||||
}, [props.category]);
|
||||
|
||||
onMount(updateIndicator);
|
||||
createEffect(updateIndicator);
|
||||
React.useLayoutEffect(() => {
|
||||
updateIndicator();
|
||||
}, [updateIndicator]);
|
||||
|
||||
function toggleCategory() {
|
||||
props.setCategory(
|
||||
|
|
@ -34,20 +37,20 @@ export default function Switch(props: {
|
|||
return (
|
||||
<div
|
||||
role="tablist"
|
||||
class="border relative inline-flex rounded-full bg-card p-1 select-none"
|
||||
className="border relative inline-flex rounded-full bg-card p-1 select-none"
|
||||
>
|
||||
<div
|
||||
class="absolute top-1 bottom-1 rounded-full bg-input shadow-sm transition-all duration-300 ease-in-out"
|
||||
className="absolute top-1 bottom-1 rounded-full bg-input shadow-sm transition-all duration-300 ease-in-out"
|
||||
style={{
|
||||
left: `${indicator().left}px`,
|
||||
width: `${indicator().width}px`,
|
||||
left: `${indicator.left}px`,
|
||||
width: `${indicator.width}px`,
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
ref={(el) => (conversationsRef = el)}
|
||||
ref={conversationsRef}
|
||||
role="tab"
|
||||
aria-selected={props.category === "conversations"}
|
||||
class={`relative z-10 cursor-pointer px-2.5 py-1.5 rounded-full text-sm font-medium transition-colors duration-300 ${
|
||||
className={`relative z-10 cursor-pointer px-2.5 py-1.5 rounded-full text-sm font-medium transition-colors duration-300 ${
|
||||
props.category === "conversations"
|
||||
? "text-foreground"
|
||||
: "text-ring/50 hover:text-ring"
|
||||
|
|
@ -57,10 +60,10 @@ export default function Switch(props: {
|
|||
Conversations
|
||||
</button>
|
||||
<button
|
||||
ref={(el) => (communitiesRef = el)}
|
||||
ref={communitiesRef}
|
||||
role="tab"
|
||||
aria-selected={props.category === "communities"}
|
||||
class={`relative z-10 cursor-pointer px-2.5 py-1.5 rounded-full text-sm font-medium transition-colors duration-300 ${
|
||||
className={`relative z-10 cursor-pointer px-2.5 py-1.5 rounded-full text-sm font-medium transition-colors duration-300 ${
|
||||
props.category === "communities"
|
||||
? "text-foreground"
|
||||
: "text-ring/50 hover:text-ring"
|
||||
|
|
@ -71,4 +74,4 @@ export default function Switch(props: {
|
|||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -7,7 +7,7 @@ import {
|
|||
ContextMenuItem,
|
||||
ContextMenuTrigger,
|
||||
} from "@tensamin/ui/context-menu";
|
||||
import { useNavigate } from "@solidjs/router";
|
||||
import { useNavigate } from "@tanstack/react-router";
|
||||
|
||||
export default function ConversationModal(props: { userId: number }) {
|
||||
const navigate = useNavigate();
|
||||
|
|
@ -16,9 +16,9 @@ export default function ConversationModal(props: { userId: number }) {
|
|||
<ContextMenu>
|
||||
<ContextMenuTrigger>
|
||||
<div
|
||||
class="select-none cursor-pointer"
|
||||
className="select-none cursor-pointer"
|
||||
onClick={() => {
|
||||
navigate("/chat?id=" + props.userId);
|
||||
void navigate({ to: "/chat", search: { id: props.userId } });
|
||||
}}
|
||||
>
|
||||
<Wrapper
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import * as React from "react";
|
||||
import { useStorage } from "@tensamin/core-storage/context";
|
||||
import { Button } from "@tensamin/ui/button";
|
||||
import {
|
||||
|
|
@ -5,7 +6,6 @@ import {
|
|||
CheckboxLabel,
|
||||
CheckboxControl,
|
||||
} from "@tensamin/ui/checkbox";
|
||||
import { createEffect, createSignal, type JSX, Show } from "solid-js";
|
||||
import { z } from "zod";
|
||||
|
||||
import ErrorScreen from "@tensamin/ui/screens/error";
|
||||
|
|
@ -14,20 +14,34 @@ import { legalDocsSchema } from "@tensamin/shared/features/legal/schema";
|
|||
import { log } from "@tensamin/shared/log";
|
||||
import Link from "@tensamin/ui/link";
|
||||
|
||||
export default function Screen(props: { children: JSX.Element }) {
|
||||
export default function Screen(props: { children: React.ReactNode }) {
|
||||
const { load, save } = useStorage();
|
||||
|
||||
const [error, setError] = createSignal("");
|
||||
const [errorDescription, setErrorDescription] = createSignal("");
|
||||
const [error, setError] = React.useState("");
|
||||
const [errorDescription, setErrorDescription] = React.useState("");
|
||||
|
||||
const [remoteDocs, setRemoteDocs] =
|
||||
createSignal<z.infer<typeof legalDocsSchema>>();
|
||||
const [remoteDocs, setRemoteDocs] = React.useState<
|
||||
z.infer<typeof legalDocsSchema> | undefined
|
||||
>(undefined);
|
||||
|
||||
const [loading, setLoading] = createSignal(true);
|
||||
const [loading, setLoading] = React.useState(true);
|
||||
|
||||
const [PPandToSDone, setPPandToSDone] = React.useState(false);
|
||||
const [acceptedPP, acceptPP] = React.useState(false);
|
||||
const [acceptedTOS, acceptTOS] = React.useState(false);
|
||||
|
||||
const [doneWithAnalytics, setDoneWithAnalytics] = React.useState(false);
|
||||
const [crashReports, setCrashReports] = React.useState(false);
|
||||
const [usageData, setUsageData] = React.useState(false);
|
||||
|
||||
React.useEffect(() => {
|
||||
let active = true;
|
||||
|
||||
void load("user_id").then(async (id) => {
|
||||
if (!active) {
|
||||
return;
|
||||
}
|
||||
|
||||
createEffect(() => {
|
||||
load("user_id").then(async (id) => {
|
||||
// For non-logged in users
|
||||
if (id === 0) {
|
||||
setPPandToSDone(true);
|
||||
setDoneWithAnalytics(true);
|
||||
|
|
@ -38,42 +52,63 @@ export default function Screen(props: { children: JSX.Element }) {
|
|||
const current = await fetch("https://legal.tensamin.net/api/current")
|
||||
.then((res) => res.json())
|
||||
.catch((err) => {
|
||||
if (!active) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
setError("Failed to load legal documents");
|
||||
setErrorDescription(
|
||||
"An error occurred while fetching the legal documents from the server. Please try again later.",
|
||||
);
|
||||
log(0, "Legal", "red", "Failed to fetch legal documents", err);
|
||||
return undefined;
|
||||
});
|
||||
|
||||
const safeCurrent = legalDocsSchema.safeParse(current);
|
||||
setRemoteDocs(safeCurrent.data);
|
||||
if (!active || current === undefined) {
|
||||
return;
|
||||
}
|
||||
|
||||
const safeCurrent = legalDocsSchema.safeParse(current);
|
||||
if (!safeCurrent.success) {
|
||||
setError("Failed to load legal documents");
|
||||
setErrorDescription(
|
||||
"The legal documents data received from the server is invalid. Please try again later.",
|
||||
);
|
||||
log(
|
||||
0,
|
||||
"Legal",
|
||||
"red",
|
||||
"Invalid legal documents data",
|
||||
safeCurrent.error,
|
||||
);
|
||||
log(0, "Legal", "red", "Invalid legal documents data", safeCurrent.error);
|
||||
return;
|
||||
}
|
||||
|
||||
setRemoteDocs(safeCurrent.data);
|
||||
|
||||
const localDocs = await load("legal_docs");
|
||||
|
||||
await Promise.all([
|
||||
load("ppandtos_done").then(setPPandToSDone),
|
||||
load("accepted_privacy_policy").then(acceptPP),
|
||||
load("accepted_terms_of_service").then(acceptTOS),
|
||||
load("analytics_done").then(setDoneWithAnalytics),
|
||||
load("analytics_crash_reports").then(setCrashReports),
|
||||
load("analytics_usage_data").then(setUsageData),
|
||||
const [
|
||||
loadedPPAndTOS,
|
||||
loadedAcceptedPP,
|
||||
loadedAcceptedTOS,
|
||||
loadedAnalyticsDone,
|
||||
loadedCrashReports,
|
||||
loadedUsageData,
|
||||
] = await Promise.all([
|
||||
load("ppandtos_done"),
|
||||
load("accepted_privacy_policy"),
|
||||
load("accepted_terms_of_service"),
|
||||
load("analytics_done"),
|
||||
load("analytics_crash_reports"),
|
||||
load("analytics_usage_data"),
|
||||
]);
|
||||
|
||||
if (!active) {
|
||||
return;
|
||||
}
|
||||
|
||||
setPPandToSDone(loadedPPAndTOS);
|
||||
acceptPP(loadedAcceptedPP);
|
||||
acceptTOS(loadedAcceptedTOS);
|
||||
setDoneWithAnalytics(loadedAnalyticsDone);
|
||||
setCrashReports(loadedCrashReports);
|
||||
setUsageData(loadedUsageData);
|
||||
|
||||
if (localDocs.pp.hash !== safeCurrent.data.pp.hash) {
|
||||
acceptPP(false);
|
||||
setPPandToSDone(false);
|
||||
|
|
@ -86,132 +121,122 @@ export default function Screen(props: { children: JSX.Element }) {
|
|||
|
||||
setLoading(false);
|
||||
});
|
||||
});
|
||||
|
||||
const [PPandToSDone, setPPandToSDone] = createSignal(false);
|
||||
const [acceptedPP, acceptPP] = createSignal(false);
|
||||
const [acceptedTOS, acceptTOS] = createSignal(false);
|
||||
return () => {
|
||||
active = false;
|
||||
};
|
||||
}, [load]);
|
||||
|
||||
const [doneWithAnalytics, setDoneWithAnalytics] = createSignal(false);
|
||||
const [crashReports, setCrashReports] = createSignal(false);
|
||||
const [usageData, setUsageData] = createSignal(false);
|
||||
if (error !== "" && errorDescription !== "") {
|
||||
return <ErrorScreen error={error} description={errorDescription} />;
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (PPandToSDone && doneWithAnalytics) {
|
||||
return <>{props.children}</>;
|
||||
}
|
||||
|
||||
return (
|
||||
<Show
|
||||
when={error() !== "" && errorDescription() !== ""}
|
||||
fallback={
|
||||
<Show when={!loading()} fallback={null}>
|
||||
<Show
|
||||
when={!PPandToSDone() || !doneWithAnalytics()}
|
||||
fallback={props.children}
|
||||
>
|
||||
<div class="w-full h-full flex items-center justify-center">
|
||||
<div class="h-full flex flex-col gap-15 p-10 md:p-40 w-full lg:w-2/3">
|
||||
{!PPandToSDone() ? (
|
||||
<>
|
||||
<h1 class="text-3xl md:text-4xl font-bold">
|
||||
Privacy Policy & ToS
|
||||
<p class="text-muted-foreground text-[20px] font-normal pt-3">
|
||||
{remoteDocs()?.pp.version} / {remoteDocs()?.tos.version}
|
||||
</p>
|
||||
</h1>
|
||||
<div class="w-full h-full flex flex-col items-center justify-center gap-5">
|
||||
<div class="justify-start items-start flex flex-col gap-2">
|
||||
<BigCheckbox
|
||||
checked={acceptedPP()}
|
||||
onChange={acceptPP}
|
||||
label="I agree to the Privacy Policy"
|
||||
/>
|
||||
<BigCheckbox
|
||||
checked={acceptedTOS()}
|
||||
onChange={acceptTOS}
|
||||
label="I agree to the Terms of Service"
|
||||
/>
|
||||
<div class="w-full border-t-2" />
|
||||
<Link
|
||||
label="Privacy Policy"
|
||||
link={`https://legal.tensamin.net/pp/${remoteDocs()?.pp.version}`}
|
||||
/>
|
||||
<Link
|
||||
label="Terms of Service"
|
||||
link={`https://legal.tensamin.net/tos/${remoteDocs()?.tos.version}`}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<ContinueButton
|
||||
disabled={!acceptedPP() || !acceptedTOS()}
|
||||
onClick={() => {
|
||||
const currentDocs = remoteDocs()!;
|
||||
|
||||
save("accepted_privacy_policy", true).then(() =>
|
||||
save("accepted_terms_of_service", true).then(() =>
|
||||
save("ppandtos_done", true).then(() =>
|
||||
save("legal_docs", currentDocs).then(() =>
|
||||
setPPandToSDone(true),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
) : !doneWithAnalytics() ? (
|
||||
<>
|
||||
<h1 class="text-3xl md:text-4xl font-bold">Analytics</h1>
|
||||
<div class="w-full h-full flex justify-center items-center">
|
||||
<div class="justify-start flex flex-col gap-2">
|
||||
<BigCheckbox
|
||||
checked={crashReports()}
|
||||
onChange={setCrashReports}
|
||||
label="Send anonymous crash reports"
|
||||
/>
|
||||
<BigCheckbox
|
||||
checked={usageData()}
|
||||
onChange={setUsageData}
|
||||
label="Send anonymous usage data"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<ContinueButton
|
||||
onClick={() => {
|
||||
const currentCrashReports = crashReports();
|
||||
const currentUsageData = usageData();
|
||||
|
||||
save(
|
||||
"analytics_crash_reports",
|
||||
currentCrashReports,
|
||||
).then(() => {
|
||||
setCrashReports(currentCrashReports);
|
||||
});
|
||||
save("analytics_usage_data", currentUsageData).then(
|
||||
() => {
|
||||
setUsageData(currentUsageData);
|
||||
},
|
||||
);
|
||||
save("analytics_done", true).then(() => {
|
||||
setDoneWithAnalytics(true);
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
) : null}
|
||||
<div className="w-full h-full flex items-center justify-center">
|
||||
<div className="h-full flex flex-col gap-15 p-10 md:p-40 w-full lg:w-2/3">
|
||||
{!PPandToSDone ? (
|
||||
<>
|
||||
<h1 className="text-3xl md:text-4xl font-bold">
|
||||
Privacy Policy & ToS
|
||||
<p className="text-muted-foreground text-[20px] font-normal pt-3">
|
||||
{remoteDocs?.pp.version} / {remoteDocs?.tos.version}
|
||||
</p>
|
||||
</h1>
|
||||
<div className="w-full h-full flex flex-col items-center justify-center gap-5">
|
||||
<div className="justify-start items-start flex flex-col gap-2">
|
||||
<BigCheckbox
|
||||
checked={acceptedPP}
|
||||
onChange={acceptPP}
|
||||
label="I agree to the Privacy Policy"
|
||||
/>
|
||||
<BigCheckbox
|
||||
checked={acceptedTOS}
|
||||
onChange={acceptTOS}
|
||||
label="I agree to the Terms of Service"
|
||||
/>
|
||||
<div className="w-full border-t-2" />
|
||||
<Link
|
||||
label="Privacy Policy"
|
||||
link={`https://legal.tensamin.net/pp/${remoteDocs?.pp.version}`}
|
||||
/>
|
||||
<Link
|
||||
label="Terms of Service"
|
||||
link={`https://legal.tensamin.net/tos/${remoteDocs?.tos.version}`}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Show>
|
||||
</Show>
|
||||
}
|
||||
>
|
||||
<ErrorScreen error={error()} description={errorDescription()} />
|
||||
</Show>
|
||||
<ContinueButton
|
||||
disabled={!acceptedPP || !acceptedTOS}
|
||||
onClick={() => {
|
||||
const currentDocs = remoteDocs;
|
||||
if (!currentDocs) {
|
||||
return;
|
||||
}
|
||||
|
||||
void (async () => {
|
||||
await save("accepted_privacy_policy", true);
|
||||
await save("accepted_terms_of_service", true);
|
||||
await save("ppandtos_done", true);
|
||||
await save("legal_docs", currentDocs);
|
||||
setPPandToSDone(true);
|
||||
})();
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<h1 className="text-3xl md:text-4xl font-bold">Analytics</h1>
|
||||
<div className="w-full h-full flex justify-center items-center">
|
||||
<div className="justify-start flex flex-col gap-2">
|
||||
<BigCheckbox
|
||||
checked={crashReports}
|
||||
onChange={setCrashReports}
|
||||
label="Send anonymous crash reports"
|
||||
/>
|
||||
<BigCheckbox
|
||||
checked={usageData}
|
||||
onChange={setUsageData}
|
||||
label="Send anonymous usage data"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<ContinueButton
|
||||
onClick={() => {
|
||||
const currentCrashReports = crashReports;
|
||||
const currentUsageData = usageData;
|
||||
|
||||
void save("analytics_crash_reports", currentCrashReports).then(() => {
|
||||
setCrashReports(currentCrashReports);
|
||||
});
|
||||
void save("analytics_usage_data", currentUsageData).then(() => {
|
||||
setUsageData(currentUsageData);
|
||||
});
|
||||
void save("analytics_done", true).then(() => {
|
||||
setDoneWithAnalytics(true);
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ContinueButton(props: { onClick: () => void; disabled?: boolean }) {
|
||||
return (
|
||||
<div class="w-full flex justify-end">
|
||||
<div className="w-full flex justify-end">
|
||||
<Button
|
||||
size="lg"
|
||||
class="text-lg w-full md:w-auto"
|
||||
className="text-lg w-full md:w-auto"
|
||||
onClick={props.onClick}
|
||||
disabled={props.disabled}
|
||||
>
|
||||
|
|
@ -230,10 +255,10 @@ export function BigCheckbox(props: {
|
|||
<Checkbox
|
||||
checked={props.checked}
|
||||
onChange={props.onChange}
|
||||
class="flex items-center space-x-2"
|
||||
className="flex items-center space-x-2"
|
||||
>
|
||||
<CheckboxControl class="size-5.5 rounded-md flex items-center justify-center" />
|
||||
<CheckboxLabel class="text-lg">{props.label}</CheckboxLabel>
|
||||
<CheckboxControl className="size-5.5 rounded-md flex items-center justify-center" />
|
||||
<CheckboxLabel className="text-lg">{props.label}</CheckboxLabel>
|
||||
</Checkbox>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,25 +1,30 @@
|
|||
import { createEffect } from "solid-js";
|
||||
import { render } from "solid-js/web";
|
||||
import { Route, Router } from "@solidjs/router";
|
||||
import * as React from "react";
|
||||
import { createRoot } from "react-dom/client";
|
||||
import {
|
||||
Outlet,
|
||||
RouterProvider,
|
||||
createRootRoute,
|
||||
createRoute,
|
||||
createRouter,
|
||||
} from "@tanstack/react-router";
|
||||
import "./index.css";
|
||||
|
||||
import NotFound from "@/routes/404";
|
||||
|
||||
// Layouts
|
||||
import RootLayout from "./routes/layout";
|
||||
import AppLayout from "./routes/app/layout";
|
||||
|
||||
// Pages
|
||||
import Home from "@/routes/app/home";
|
||||
import ChatScreen from "@tensamin/chat/screen";
|
||||
import ChatContext from "@tensamin/chat/context";
|
||||
import Login from "@/routes/screens/login";
|
||||
import Signup from "@/routes/screens/signup";
|
||||
|
||||
import { getMessages } from "@tensamin/chat/behaviour-conversation";
|
||||
const wrapper = document.getElementById("root");
|
||||
|
||||
// Render
|
||||
const wrapper = document.getElementById("root")!;
|
||||
if (!wrapper) {
|
||||
throw new Error("Missing root element");
|
||||
}
|
||||
|
||||
// @ts-expect-error Declare global function
|
||||
window.setLogLevelToMax = () => {
|
||||
|
|
@ -27,67 +32,101 @@ window.setLogLevelToMax = () => {
|
|||
location.reload();
|
||||
};
|
||||
|
||||
render(
|
||||
() => (
|
||||
<Router
|
||||
root={(props) => {
|
||||
// Theme Detection
|
||||
createEffect(() => {
|
||||
try {
|
||||
const mediaQuery = window.matchMedia(
|
||||
"(prefers-color-scheme: dark)",
|
||||
);
|
||||
function RootShell() {
|
||||
React.useEffect(() => {
|
||||
try {
|
||||
const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
|
||||
|
||||
// Initial check
|
||||
document.documentElement.classList.toggle(
|
||||
"dark",
|
||||
mediaQuery.matches,
|
||||
);
|
||||
document.documentElement.classList.toggle("dark", mediaQuery.matches);
|
||||
|
||||
// Listen to changes
|
||||
const handleChange = (e: MediaQueryListEvent) => {
|
||||
document.documentElement.classList.toggle("dark", e.matches);
|
||||
};
|
||||
const handleChange = (event: MediaQueryListEvent) => {
|
||||
document.documentElement.classList.toggle("dark", event.matches);
|
||||
};
|
||||
|
||||
mediaQuery.addEventListener("change", handleChange);
|
||||
mediaQuery.addEventListener("change", handleChange);
|
||||
|
||||
// Cleanup
|
||||
return () => mediaQuery.removeEventListener("change", handleChange);
|
||||
} catch {
|
||||
/* theme detection not supported */
|
||||
}
|
||||
});
|
||||
return () => {
|
||||
mediaQuery.removeEventListener("change", handleChange);
|
||||
};
|
||||
} catch {
|
||||
return;
|
||||
}
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div class="w-screen h-screen overflow-hidden">{props.children}</div>
|
||||
);
|
||||
}}
|
||||
>
|
||||
<Route path="/" component={RootLayout}>
|
||||
{/* App */}
|
||||
<Route path="/" component={AppLayout}>
|
||||
<Route path="/" component={Home} />
|
||||
<Route path="/chat" component={Chat} />
|
||||
</Route>
|
||||
return (
|
||||
<div className="w-screen h-screen overflow-hidden">
|
||||
<RootLayout>
|
||||
<Outlet />
|
||||
</RootLayout>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
{/* Screens */}
|
||||
<Route path="/">
|
||||
<Route path="/login" component={Login} />
|
||||
<Route path="/signup" component={Signup} />
|
||||
</Route>
|
||||
</Route>
|
||||
|
||||
{/* 404 */}
|
||||
<Route path="*" component={NotFound} />
|
||||
</Router>
|
||||
),
|
||||
wrapper,
|
||||
);
|
||||
function AppShell() {
|
||||
return (
|
||||
<AppLayout>
|
||||
<Outlet />
|
||||
</AppLayout>
|
||||
);
|
||||
}
|
||||
|
||||
function Chat() {
|
||||
return (
|
||||
<ChatContext getMessages={getMessages}>
|
||||
<ChatContext>
|
||||
<ChatScreen />
|
||||
</ChatContext>
|
||||
);
|
||||
}
|
||||
|
||||
const rootRoute = createRootRoute({
|
||||
component: RootShell,
|
||||
});
|
||||
|
||||
const appRoute = createRoute({
|
||||
getParentRoute: () => rootRoute,
|
||||
id: "app",
|
||||
component: AppShell,
|
||||
});
|
||||
|
||||
const homeRoute = createRoute({
|
||||
getParentRoute: () => appRoute,
|
||||
path: "/",
|
||||
component: Home,
|
||||
});
|
||||
|
||||
const chatRoute = createRoute({
|
||||
getParentRoute: () => appRoute,
|
||||
path: "chat",
|
||||
component: Chat,
|
||||
});
|
||||
|
||||
const loginRoute = createRoute({
|
||||
getParentRoute: () => rootRoute,
|
||||
path: "login",
|
||||
component: Login,
|
||||
});
|
||||
|
||||
const signupRoute = createRoute({
|
||||
getParentRoute: () => rootRoute,
|
||||
path: "signup",
|
||||
component: Signup,
|
||||
});
|
||||
|
||||
const routeTree = rootRoute.addChildren([
|
||||
appRoute.addChildren([homeRoute, chatRoute]),
|
||||
loginRoute,
|
||||
signupRoute,
|
||||
]);
|
||||
|
||||
const router = createRouter({
|
||||
routeTree,
|
||||
defaultNotFoundComponent: NotFound,
|
||||
});
|
||||
|
||||
declare module "@tanstack/react-router" {
|
||||
interface Register {
|
||||
router: typeof router;
|
||||
}
|
||||
}
|
||||
|
||||
createRoot(wrapper).render(<RouterProvider router={router} />);
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
export default function Page() {
|
||||
return (
|
||||
<div class="w-full h-full flex items-center justify-center text-4xl font-bold">
|
||||
<div className="w-full h-full flex items-center justify-center text-4xl font-bold">
|
||||
Page not found (404)
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,21 +1,21 @@
|
|||
import Socket from "@tensamin/ttp/context";
|
||||
import User from "@tensamin/core-user/context";
|
||||
import type { RouteSectionProps } from "@solidjs/router";
|
||||
import type { ReactNode } from "react";
|
||||
|
||||
import Sidebar from "@/components/sidebar";
|
||||
import Conversation from "@/features/conversation/context";
|
||||
import Navbar from "@/components/navbar";
|
||||
|
||||
export default function Layout(props: RouteSectionProps) {
|
||||
export default function Layout(props: { children: ReactNode }) {
|
||||
return (
|
||||
<Socket>
|
||||
<User>
|
||||
<Conversation>
|
||||
<div class="w-full h-full flex bg-sidebar">
|
||||
<div className="w-full h-full flex bg-sidebar">
|
||||
<Sidebar />
|
||||
<div class="w-full h-full flex flex-col">
|
||||
<div className="w-full h-full flex flex-col">
|
||||
<Navbar />
|
||||
<div class="bg-background h-full w-full rounded-tl-3xl border-t border-l">
|
||||
<div className="bg-background h-full w-full rounded-tl-3xl border-t border-l">
|
||||
{props.children}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import type { RouteSectionProps } from "@solidjs/router";
|
||||
import type { ReactNode } from "react";
|
||||
|
||||
import Storage from "@tensamin/core-storage/context";
|
||||
import Crypto from "@tensamin/core-crypto/context";
|
||||
|
|
@ -7,7 +7,7 @@ import LegalWrapper from "@/features/legal/screen";
|
|||
|
||||
import { Toaster } from "@tensamin/ui/sonner";
|
||||
|
||||
export default function Layout(props: RouteSectionProps) {
|
||||
export default function Layout(props: { children: ReactNode }) {
|
||||
return (
|
||||
<>
|
||||
<Toaster />
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
import Form from "@/components/screens/login/form";
|
||||
import { Button } from "@tensamin/ui/button";
|
||||
import { A } from "@solidjs/router";
|
||||
import { Link } from "@tanstack/react-router";
|
||||
|
||||
export default function Page() {
|
||||
return (
|
||||
<div class="w-full h-full flex flex-col gap-10 items-center justify-center">
|
||||
<div className="w-full h-full flex flex-col gap-10 items-center justify-center">
|
||||
<Form />
|
||||
<div class="flex">
|
||||
<A href="/signup">
|
||||
<div className="flex">
|
||||
<Link to="/signup">
|
||||
<Button variant="outline">Sign up</Button>
|
||||
</A>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -14,8 +14,7 @@
|
|||
"verbatimModuleSyntax": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
"jsx": "preserve",
|
||||
"jsxImportSource": "solid-js",
|
||||
"jsx": "react-jsx",
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
|
|
|
|||
|
|
@ -1,11 +1,10 @@
|
|||
import { defineConfig } from "vite";
|
||||
import solid from "vite-plugin-solid";
|
||||
import react from "@vitejs/plugin-react";
|
||||
import tsconfigPaths from "vite-tsconfig-paths";
|
||||
import tailwindcss from "@tailwindcss/vite";
|
||||
import lucidePreprocess from "vite-plugin-lucide-preprocess";
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [solid(), tsconfigPaths(), tailwindcss(), lucidePreprocess()],
|
||||
plugins: [react(), tsconfigPaths(), tailwindcss()],
|
||||
worker: {
|
||||
format: "es",
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in a new issue