onChange?.(true)}
className={clsx(classes.option, value === true && classes.selected)}
>
- on
+ {t("common.on")}
onChange?.(false)}
className={clsx(classes.option, value === false && classes.selected)}
>
- off
+ {t("common.off")}
{selectedIndex >= 0 && (
diff --git a/src/components/lift/LiftContext.tsx b/src/components/lift/LiftContext.tsx
new file mode 100644
index 0000000..5af1a42
--- /dev/null
+++ b/src/components/lift/LiftContext.tsx
@@ -0,0 +1,57 @@
+import { createContext, useCallback, useContext, useRef, useState } from "react";
+import type { ReactNode } from "react";
+
+type LiftContextValue = {
+ liftedIds: Set
;
+ alwaysLiftedIds: Set;
+ setLiftedIds: (ids: string[]) => void;
+ registerAlways: (id: string) => void;
+ unregisterAlways: (id: string) => void;
+ portalContainer: HTMLElement | null;
+ setPortalContainer: (el: HTMLElement | null) => void;
+};
+
+const LiftContext = createContext(null);
+
+export function useLift(): LiftContextValue {
+ const ctx = useContext(LiftContext);
+ if (!ctx) throw new Error("useLift must be used within LiftProvider");
+ return ctx;
+}
+
+export function LiftProvider({ children }: { children: ReactNode }) {
+ const [liftedIds, setLiftedIdsRaw] = useState>(new Set());
+ const [alwaysLiftedIds, setAlwaysLiftedIds] = useState>(new Set());
+ const [portalContainer, setPortalContainer] = useState(null);
+ const alwaysRef = useRef>(new Set());
+
+ const setLiftedIds = useCallback((ids: string[]) => {
+ setLiftedIdsRaw(new Set(ids));
+ }, []);
+
+ const registerAlways = useCallback((id: string) => {
+ alwaysRef.current.add(id);
+ setAlwaysLiftedIds(new Set(alwaysRef.current));
+ }, []);
+
+ const unregisterAlways = useCallback((id: string) => {
+ alwaysRef.current.delete(id);
+ setAlwaysLiftedIds(new Set(alwaysRef.current));
+ }, []);
+
+ return (
+
+ {children}
+
+ );
+}
diff --git a/src/components/lift/LiftLayer.module.css b/src/components/lift/LiftLayer.module.css
new file mode 100644
index 0000000..614196e
--- /dev/null
+++ b/src/components/lift/LiftLayer.module.css
@@ -0,0 +1,8 @@
+@layer base {
+ .liftLayer {
+ position: fixed;
+ inset: 0;
+ z-index: 103;
+ pointer-events: none;
+ }
+}
diff --git a/src/components/lift/LiftLayer.tsx b/src/components/lift/LiftLayer.tsx
new file mode 100644
index 0000000..fad673e
--- /dev/null
+++ b/src/components/lift/LiftLayer.tsx
@@ -0,0 +1,16 @@
+import { useCallback } from "react";
+import { useLift } from "./LiftContext";
+import classes from "./LiftLayer.module.css";
+
+export function LiftLayer() {
+ const { setPortalContainer } = useLift();
+
+ const refCallback = useCallback(
+ (node: HTMLDivElement | null) => {
+ setPortalContainer(node);
+ },
+ [setPortalContainer],
+ );
+
+ return ;
+}
diff --git a/src/components/lift/Liftable.tsx b/src/components/lift/Liftable.tsx
new file mode 100644
index 0000000..da60d80
--- /dev/null
+++ b/src/components/lift/Liftable.tsx
@@ -0,0 +1,121 @@
+import { useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import type { ReactNode } from "react";
+import { createPortal } from "react-dom";
+import { useLift } from "./LiftContext";
+
+type LiftableProps = {
+ id?: string;
+ always?: boolean;
+};
+
+type Props = LiftableProps & {
+ children: ReactNode;
+};
+
+export function useLiftable = Record>(
+ render: (props: { isLifted: boolean } & T) => ReactNode,
+ options?: LiftableProps & T,
+): { id: string; element: ReactNode } {
+ const autoId = useId();
+ const {
+ id: idProp,
+ always,
+ ...extraProps
+ } = (options ?? {}) as LiftableProps & Record;
+ const id = idProp ?? autoId;
+ const { liftedIds, alwaysLiftedIds, registerAlways, unregisterAlways } = useLift();
+
+ useEffect(() => {
+ if (always) {
+ registerAlways(id);
+ return () => unregisterAlways(id);
+ }
+ }, [always, id, registerAlways, unregisterAlways]);
+
+ const isLifted = liftedIds.has(id) || alwaysLiftedIds.has(id);
+
+ const element = (
+ {render({ isLifted, ...extraProps } as { isLifted: boolean } & T)}
+ );
+
+ return { id, element };
+}
+
+export function Liftable({ id: idProp, always, children }: Props) {
+ const autoId = useId();
+ const id = idProp ?? autoId;
+ const { liftedIds, alwaysLiftedIds, registerAlways, unregisterAlways, portalContainer } =
+ useLift();
+ const wrapperRef = useRef(null);
+ const [rect, setRect] = useState(null);
+
+ useEffect(() => {
+ if (always) {
+ registerAlways(id);
+ return () => unregisterAlways(id);
+ }
+ }, [always, id, registerAlways, unregisterAlways]);
+
+ const isLifted = liftedIds.has(id) || alwaysLiftedIds.has(id);
+
+ useLayoutEffect(() => {
+ if (isLifted && wrapperRef.current) {
+ setRect(wrapperRef.current.getBoundingClientRect());
+ }
+ if (!isLifted) {
+ setRect(null);
+ }
+ }, [isLifted]);
+
+ // Re-measure on resize while lifted
+ useEffect(() => {
+ if (!isLifted || !wrapperRef.current) return;
+
+ const measure = () => {
+ if (wrapperRef.current) {
+ setRect(wrapperRef.current.getBoundingClientRect());
+ }
+ };
+
+ const observer = new ResizeObserver(measure);
+ observer.observe(wrapperRef.current);
+ window.addEventListener("resize", measure);
+
+ return () => {
+ observer.disconnect();
+ window.removeEventListener("resize", measure);
+ };
+ }, [isLifted]);
+
+ // When lifted and we have measurements + portal target, render in portal
+ if (isLifted && rect && portalContainer) {
+ return (
+ <>
+ {/* Placeholder preserves layout space */}
+
+ {/* Portal children above blur */}
+ {createPortal(
+
+ {children}
+
,
+ portalContainer,
+ )}
+
+ );
+ }
+
+ // Normal inline rendering
+ return {children}
;
+}
diff --git a/src/components/lift/index.ts b/src/components/lift/index.ts
new file mode 100644
index 0000000..f61a3e8
--- /dev/null
+++ b/src/components/lift/index.ts
@@ -0,0 +1,3 @@
+export { LiftProvider, useLift } from "./LiftContext";
+export { LiftLayer } from "./LiftLayer";
+export { Liftable, useLiftable } from "./Liftable";
diff --git a/src/components/modals/Modal/Modal.module.css b/src/components/modals/Modal/Modal.module.css
index b79986c..ebd24a8 100644
--- a/src/components/modals/Modal/Modal.module.css
+++ b/src/components/modals/Modal/Modal.module.css
@@ -1,11 +1,27 @@
@layer base {
.overlay {
+ position: fixed;
+ inset: 0;
+ z-index: 100;
+ }
+
+ .modalContainer {
+ width: 100%;
position: fixed;
inset: 0;
display: flex;
+ flex-direction: column;
align-items: center;
justify-content: center;
- z-index: 100;
+ z-index: 102;
+ }
+
+ .modalInner {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: 100%;
+ max-width: 320px;
}
.modal {
@@ -13,7 +29,19 @@
flex-direction: column;
gap: 6px;
width: 100%;
- max-width: 320px;
+ max-height: calc(
+ var(--safe-area-height) - var(--header-total) - var(--navigation-total) - 70px
+ );
+ overflow: auto;
padding: 13px;
}
+
+ .title {
+ color: #ffffff;
+ -webkit-text-stroke: 0.7px #331b01;
+ font-weight: 700;
+ font-size: 24px;
+ margin-bottom: 12px;
+ text-align: center;
+ }
}
diff --git a/src/components/modals/Modal/Modal.tsx b/src/components/modals/Modal/Modal.tsx
index b93c62a..f09ad01 100644
--- a/src/components/modals/Modal/Modal.tsx
+++ b/src/components/modals/Modal/Modal.tsx
@@ -1,36 +1,85 @@
+import { useEffect, useRef } from "react";
import type { ReactNode } from "react";
import { AnimatePresence, motion } from "motion/react";
-import SectionSurface from "../../surface/SectionSurface/SectionSurface";
+import SectionSurface from "@components/surface/SectionSurface";
+import { useLift } from "@components/lift";
import classes from "./Modal.module.css";
+import { clsx, type ClassValue } from "clsx";
type Props = {
open: boolean;
children: ReactNode;
onClose: () => void;
+ liftIds?: string[];
+ title?: ReactNode;
+ className?: ClassValue;
};
-export default function Modal({ open, children, onClose }: Props) {
+export default function Modal({ open, children, onClose, liftIds, title, className }: Props) {
+ const { setLiftedIds } = useLift();
+ const prevLiftIdsRef = useRef("");
+
+ useEffect(() => {
+ const key = liftIds?.join(",") ?? "";
+
+ if (open && key) {
+ if (key !== prevLiftIdsRef.current) {
+ prevLiftIdsRef.current = key;
+ setLiftedIds(liftIds!);
+ }
+ }
+
+ if (!open && prevLiftIdsRef.current) {
+ prevLiftIdsRef.current = "";
+ setLiftedIds([]);
+ }
+ }, [open, liftIds, setLiftedIds]);
+
+ useEffect(() => {
+ return () => {
+ if (prevLiftIdsRef.current) {
+ setLiftedIds([]);
+ }
+ };
+ }, [setLiftedIds]);
+
return (
{open && (
-
- e.stopPropagation()}
+ <>
+
+
- {children}
-
-
+ {/* oxlint-disable-next-line jsx_a11y/no-static-element-interactions*/}
+ e.stopPropagation()}
+ >
+ {title &&
{title}
}
+
+ {children}
+
+
);
}
diff --git a/src/routes/-/RootLayout/components/Header/Header.module.css b/src/routes/-/RootLayout/components/Header/Header.module.css
index d661c2e..f6fb56f 100644
--- a/src/routes/-/RootLayout/components/Header/Header.module.css
+++ b/src/routes/-/RootLayout/components/Header/Header.module.css
@@ -10,7 +10,7 @@
top: 0;
right: 0;
left: 0;
- z-index: 10;
+ z-index: 20;
padding-top: var(--header-padding);
padding-left: var(--safe-left);
diff --git a/src/routes/-/RootLayout/components/Header/components/Profile/Profile.module.css b/src/routes/-/RootLayout/components/Header/components/Profile/Profile.module.css
index 43664d5..41173cd 100644
--- a/src/routes/-/RootLayout/components/Header/components/Profile/Profile.module.css
+++ b/src/routes/-/RootLayout/components/Header/components/Profile/Profile.module.css
@@ -8,12 +8,51 @@
background-repeat: no-repeat;
background-size: cover;
display: flex;
+ align-items: center;
gap: 2px;
}
.left {
}
+ .avatar {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ }
+
+ .avatarBorder {
+ width: 68px;
+ height: 68px;
+ border-radius: 50%;
+ background: linear-gradient(180deg, #eed074 0%, #a5602c 100%);
+ border: 1px solid #401e08;
+ box-shadow:
+ 4px 0px 1px -2px #00000040,
+ 0px 2px 0px 0px #ffefd1 inset,
+ 0px -2px 0px 0px #7a451c inset;
+ padding: 5px;
+ }
+
+ .avatarInner {
+ width: 100%;
+ height: 100%;
+ border-radius: 50%;
+ background: linear-gradient(180deg, #9e6025 0%, #feeea1 100%);
+ box-shadow:
+ 0px -1px 0px 0px #ffffffa6 inset,
+ 0px 1px 0px 0px #00000040 inset;
+ padding: 3px;
+ overflow: hidden;
+ }
+
+ .avatarImage {
+ width: 100%;
+ height: 100%;
+ border-radius: 50%;
+ object-fit: cover;
+ }
+
.right {
display: flex;
flex-direction: column;
diff --git a/src/routes/-/RootLayout/components/Header/components/Profile/Profile.tsx b/src/routes/-/RootLayout/components/Header/components/Profile/Profile.tsx
index 1d27c91..1391555 100644
--- a/src/routes/-/RootLayout/components/Header/components/Profile/Profile.tsx
+++ b/src/routes/-/RootLayout/components/Header/components/Profile/Profile.tsx
@@ -1,19 +1,30 @@
import classes from "./Profile.module.css";
import { motion } from "motion/react";
+import { Liftable } from "@components/lift";
+import { useTelegramUser } from "@/tg";
export default function Profile() {
+ const user = useTelegramUser();
return (
- 
}
+ 
+ 
+