diff --git a/packages/frontend/src/layouts/MainLayout.tsx b/packages/frontend/src/layouts/MainLayout.tsx
new file mode 100644
index 0000000..b683e89
--- /dev/null
+++ b/packages/frontend/src/layouts/MainLayout.tsx
@@ -0,0 +1,36 @@
+import { View } from "@adobe/react-spectrum";
+import { PropsWithChildren } from "react";
+
+export default function MainLayout({ children }: PropsWithChildren) {
+ return (
+ <>
+ {children}
+ {/* footer */}
+
+
+ sauce
+ {" "}
+ •{" "}
+
+ code license
+ {" "}
+ •{" "}
+
+ template license
+
+
+
+ );
+}
diff --git a/packages/frontend/src/layouts/StickerEditLayout.tsx b/packages/frontend/src/layouts/StickerEditLayout.tsx
new file mode 100644
index 0000000..ef24dea
--- /dev/null
+++ b/packages/frontend/src/layouts/StickerEditLayout.tsx
@@ -0,0 +1,72 @@
+import SpectrumLink from "@/modules/editor/SpectrumLink";
+import { useApiSettings } from "@/modules/stickers/useApiSettings";
+import { useSticker } from "@/modules/stickers/useSticker";
+import { Button, Meter, Text, View } from "@adobe/react-spectrum";
+import ArrowLeft from "@spectrum-icons/workflow/ArrowLeft";
+import ArrowRight from "@spectrum-icons/workflow/ArrowRight";
+import Head from "next/head";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { PropsWithChildren } from "react";
+
+export default function StickerEditLayout({ children }: PropsWithChildren) {
+ const router = useRouter();
+ const step = Number(router.asPath.match(/step\/(\d)/)?.[1]);
+ const prev = step == 1 ? null : step - 1;
+ const next = step == 4 ? null : step + 1;
+ const stickerId = String(router.query.stickerId);
+ const { sticker } = useSticker(stickerId);
+ const configString = router.query.config
+ ? `?config=${router.query.config}`
+ : "";
+
+ useApiSettings();
+
+ return (
+ <>
+
+
+ {sticker.displayName} Telegram Sticker Template - Avoo's Sticker Stash
+
+
+
+
+
+ {prev && (
+
+ )}
+
+ {children}
+
+
+ {next ? (
+
+ ) : (
+
+ )}
+
+ );
+}
diff --git a/packages/frontend/src/modules/editor/SpectrumLink.tsx b/packages/frontend/src/modules/editor/SpectrumLink.tsx
new file mode 100644
index 0000000..300dc13
--- /dev/null
+++ b/packages/frontend/src/modules/editor/SpectrumLink.tsx
@@ -0,0 +1,23 @@
+import Link from "next/link";
+import { AnchorHTMLAttributes, FC, PropsWithChildren } from "react";
+
+interface Props
+ extends PropsWithChildren,
+ AnchorHTMLAttributes {
+ href: string;
+}
+
+/**
+ * Link that is compatible with spectrum buttons
+ */
+const SpectrumLink: FC = ({ href, children, ...rest }) => {
+ return (
+
+
+ {children}
+
+
+ );
+};
+
+export default SpectrumLink;
diff --git a/packages/frontend/src/modules/editor/StepDescription.tsx b/packages/frontend/src/modules/editor/StepDescription.tsx
new file mode 100644
index 0000000..2537a6b
--- /dev/null
+++ b/packages/frontend/src/modules/editor/StepDescription.tsx
@@ -0,0 +1,10 @@
+import { Well } from "@react-spectrum/well";
+import { FC, PropsWithChildren } from "react";
+
+interface Props extends PropsWithChildren {}
+
+const StepDescription: FC = (props) => {
+ return {props.children};
+};
+
+export default StepDescription;
diff --git a/packages/frontend/src/modules/editor/StepStickerView.tsx b/packages/frontend/src/modules/editor/StepStickerView.tsx
new file mode 100644
index 0000000..d34d83c
--- /dev/null
+++ b/packages/frontend/src/modules/editor/StepStickerView.tsx
@@ -0,0 +1,48 @@
+import StickerRenderer from "@/modules/editor/StickerRenderer";
+import { View } from "@adobe/react-spectrum";
+import { FC } from "react";
+import { InView } from "react-intersection-observer";
+import { Lottie } from "tg-sticker-creator";
+
+interface Props {
+ lottie: Lottie | null;
+ sticky: boolean;
+}
+
+const StepStickerView: FC = (props) => {
+ return (
+
+
+
+ {({ inView, ref, entry }) => (
+
+ {inView ? (
+
+ ) : (
+
+ )}
+
+
-
-
-
-
-
-
-
- {({ inView, ref, entry }) => (
-
- {inView ? (
-
- ) : (
-
- )}
-
-
+ When you're done, continue to the next step with the button at the
+ bottom. You can go back to this step later if you need to.
+
+
+ {auth.type !== "web-app" && }
+
+
+
+
+
+
+ );
+}
+
+Home.getLayout = function getLayout(page: any) {
+ return (
+
+ {page}
+
+ );
+};
+
+export const getStaticProps: GetStaticProps = async (context) => {
+ const stickerId = context.params?.stickerId;
+ const stickers = await getSummary();
+ if (typeof stickerId !== "string") throw new Error("invalid id");
+ return {
+ props: {
+ stickerId,
+ stickers: Object.entries(stickers).map(
+ ([id, { displayName, emojis }]) => ({
+ id,
+ name: `${displayName} - ${emojis.map((e) => e.emoji).join("")}`,
+ }),
+ ),
+ },
+ };
+};
+
+export const getStaticPaths: GetStaticPaths = async () => {
+ const stickers = await getSummary();
+ return {
+ paths: Object.keys(stickers).flatMap((stickerId) => [
+ {
+ params: { stickerId },
+ },
+ ]),
+ fallback: false,
+ };
+};
diff --git a/packages/frontend/src/pages/edit/[stickerId]/step/2.tsx b/packages/frontend/src/pages/edit/[stickerId]/step/2.tsx
new file mode 100644
index 0000000..7f52e4c
--- /dev/null
+++ b/packages/frontend/src/pages/edit/[stickerId]/step/2.tsx
@@ -0,0 +1,94 @@
+import MainLayout from "@/layouts/MainLayout";
+import StickerEditLayout from "@/layouts/StickerEditLayout";
+import StickerBreadcrumb from "@/modules/breadcrumb/StickerBreadcrumb";
+import { animateAtom } from "@/modules/editor/animate";
+import StepDescription from "@/modules/editor/StepDescription";
+import StepGroups from "@/modules/editor/StepGroups";
+import StepStickerView from "@/modules/editor/StepStickerView";
+import StepTemplateChanger from "@/modules/editor/StepTemplateChanger";
+import StepToolbarContainer from "@/modules/editor/StepToolbarContainer";
+import { authAtom } from "@/modules/export/auth";
+import { getSummary } from "@/modules/stickers";
+import { useGeneratedSticker, useSticker } from "@/modules/stickers/useSticker";
+import { Heading, Switch } from "@adobe/react-spectrum";
+import { useAtom } from "jotai";
+import { GetStaticPaths, GetStaticProps } from "next";
+import { useRouter } from "next/router";
+
+interface Props {
+ stickerId: string;
+ stickers: {
+ id: string;
+ name: string;
+ }[];
+}
+
+export default function Home(props: Props) {
+ const router = useRouter();
+ const step = Number(router.query.step || 2);
+ const { sticker } = useSticker();
+ const { lottie } = useGeneratedSticker();
+ const [auth] = useAtom(authAtom);
+
+ const [animatePreviews, setAnimatePreviews] = useAtom(animateAtom);
+
+ return (
+
+ Edit Sticker
+
+ Step 2: Edit the patterns and colors to match your character. Make sure
+ that you switch through all templates via "Change Template" to ensure
+ everything is colored correctly - different templates reveal different
+ body parts.
+
+ Click the button at the bottom to continue.
+
+
+
+ Animate Previews
+
+
+
+
+
+
+
+ );
+}
+
+Home.getLayout = function getLayout(page: any) {
+ return (
+
+ {page}
+
+ );
+};
+
+export const getStaticProps: GetStaticProps = async (context) => {
+ const stickerId = context.params?.stickerId;
+ const stickers = await getSummary();
+ if (typeof stickerId !== "string") throw new Error("invalid id");
+ return {
+ props: {
+ stickerId,
+ stickers: Object.entries(stickers).map(
+ ([id, { displayName, emojis }]) => ({
+ id,
+ name: `${displayName} - ${emojis.map((e) => e.emoji).join("")}`,
+ }),
+ ),
+ },
+ };
+};
+
+export const getStaticPaths: GetStaticPaths = async () => {
+ const stickers = await getSummary();
+ return {
+ paths: Object.keys(stickers).flatMap((stickerId) => [
+ {
+ params: { stickerId },
+ },
+ ]),
+ fallback: false,
+ };
+};
diff --git a/packages/frontend/src/pages/edit/[stickerId]/step/3.tsx b/packages/frontend/src/pages/edit/[stickerId]/step/3.tsx
new file mode 100644
index 0000000..ee5dbbe
--- /dev/null
+++ b/packages/frontend/src/pages/edit/[stickerId]/step/3.tsx
@@ -0,0 +1,94 @@
+import MainLayout from "@/layouts/MainLayout";
+import StickerEditLayout from "@/layouts/StickerEditLayout";
+import StickerBreadcrumb from "@/modules/breadcrumb/StickerBreadcrumb";
+import { animateAtom } from "@/modules/editor/animate";
+import StepDescription from "@/modules/editor/StepDescription";
+import StepStickerView from "@/modules/editor/StepStickerView";
+import StepToolbarContainer from "@/modules/editor/StepToolbarContainer";
+import AddToSetButton from "@/modules/export/AddToSetButton";
+import { authAtom } from "@/modules/export/auth";
+import ExportButton from "@/modules/export/ExportButton";
+import { getSummary } from "@/modules/stickers";
+import { useGeneratedSticker, useSticker } from "@/modules/stickers/useSticker";
+import { Heading } from "@adobe/react-spectrum";
+import { useAtom } from "jotai";
+import { GetStaticPaths, GetStaticProps } from "next";
+import { useRouter } from "next/router";
+
+interface Props {
+ stickerId: string;
+ stickers: {
+ id: string;
+ name: string;
+ }[];
+}
+
+export default function Home(props: Props) {
+ const router = useRouter();
+ const step = Number(router.query.step || 3);
+ const { sticker } = useSticker();
+ const { lottie } = useGeneratedSticker();
+ const [auth] = useAtom(authAtom);
+
+ return (
+
+ Save
+
+ Step 3: Export your character to a file that you can use in step 1 to
+ restore your character, or save your character to your account if you're
+ signed in via the bot.
+
+
+ {auth.type !== "web-app" && }
+ {lottie && (
+ <>
+ {auth.data && (
+
+ Save Configuration to Your Account
+
+ )}
+
+ )}
+
+
+
+
+ );
+}
+
+Home.getLayout = function getLayout(page: any) {
+ return (
+
+ {page}
+
+ );
+};
+
+export const getStaticProps: GetStaticProps = async (context) => {
+ const stickerId = context.params?.stickerId;
+ const stickers = await getSummary();
+ if (typeof stickerId !== "string") throw new Error("invalid id");
+ return {
+ props: {
+ stickerId,
+ stickers: Object.entries(stickers).map(
+ ([id, { displayName, emojis }]) => ({
+ id,
+ name: `${displayName} - ${emojis.map((e) => e.emoji).join("")}`,
+ }),
+ ),
+ },
+ };
+};
+
+export const getStaticPaths: GetStaticPaths = async () => {
+ const stickers = await getSummary();
+ return {
+ paths: Object.keys(stickers).flatMap((stickerId) => [
+ {
+ params: { stickerId },
+ },
+ ]),
+ fallback: false,
+ };
+};
diff --git a/packages/frontend/src/pages/edit/[stickerId]/step/4.tsx b/packages/frontend/src/pages/edit/[stickerId]/step/4.tsx
new file mode 100644
index 0000000..e9d10e5
--- /dev/null
+++ b/packages/frontend/src/pages/edit/[stickerId]/step/4.tsx
@@ -0,0 +1,107 @@
+import MainLayout from "@/layouts/MainLayout";
+import StickerEditLayout from "@/layouts/StickerEditLayout";
+import StickerBreadcrumb from "@/modules/breadcrumb/StickerBreadcrumb";
+import { animateAtom } from "@/modules/editor/animate";
+import StepDescription from "@/modules/editor/StepDescription";
+import StepGroups from "@/modules/editor/StepGroups";
+import StepStickerView from "@/modules/editor/StepStickerView";
+import StepTemplateChanger from "@/modules/editor/StepTemplateChanger";
+import StepToolbarContainer from "@/modules/editor/StepToolbarContainer";
+import AddToSetButton from "@/modules/export/AddToSetButton";
+import { authAtom } from "@/modules/export/auth";
+import ExportMenu from "@/modules/export/ExportMenu";
+import ColorList from "@/modules/palette/ColorList";
+import { getSummary } from "@/modules/stickers";
+import { useGeneratedSticker, useSticker } from "@/modules/stickers/useSticker";
+import { Heading, Switch } from "@adobe/react-spectrum";
+import { useAtom } from "jotai";
+import { GetStaticPaths, GetStaticProps } from "next";
+import { useRouter } from "next/router";
+
+interface Props {
+ stickerId: string;
+ stickers: {
+ id: string;
+ name: string;
+ }[];
+}
+
+export default function Home(props: Props) {
+ const router = useRouter();
+ const step = Number(router.query.step || 4);
+ const { sticker } = useSticker();
+ const { lottie } = useGeneratedSticker();
+ const [auth] = useAtom(authAtom);
+
+ const [animatePreviews, setAnimatePreviews] = useAtom(animateAtom);
+
+ return (
+
+ Export
+
+ Step 4: Export your stickers! If you're logged in, you can add them to
+ your set directly; otherwise export them to .tgs files that you can send
+ to the @Stickers Telegram bot to create the set by yourself.
+
+ You can also export multiple versions of a sticker, like skirt and
+ non-skirt variants by toggling the relevant options.
+
+
+
+ Animate Previews
+
+ {auth.type !== "web-app" && lottie && }
+
+ {lottie && (
+ <>
+ {auth.data && (
+
+ Add to Your Set
+
+ )}
+
+ )}
+
+
+
+
+
+ );
+}
+
+Home.getLayout = function getLayout(page: any) {
+ return (
+
+ {page}
+
+ );
+};
+
+export const getStaticProps: GetStaticProps = async (context) => {
+ const stickerId = context.params?.stickerId;
+ const stickers = await getSummary();
+ if (typeof stickerId !== "string") throw new Error("invalid id");
+ return {
+ props: {
+ stickerId,
+ stickers: Object.entries(stickers).map(
+ ([id, { displayName, emojis }]) => ({
+ id,
+ name: `${displayName} - ${emojis.map((e) => e.emoji).join("")}`,
+ }),
+ ),
+ },
+ };
+};
+
+export const getStaticPaths: GetStaticPaths = async () => {
+ const stickers = await getSummary();
+ return {
+ paths: Object.keys(stickers).flatMap((stickerId) => [
+ {
+ params: { stickerId },
+ },
+ ]),
+ fallback: false,
+ };
+};