diff --git a/app/(home-pages)/home/Actions/CreateNewButton.tsx b/app/(home-pages)/home/Actions/CreateNewButton.tsx index 2052af7c..bfd7dfe7 100644 --- a/app/(home-pages)/home/Actions/CreateNewButton.tsx +++ b/app/(home-pages)/home/Actions/CreateNewButton.tsx @@ -1,46 +1,15 @@ "use client"; import { createNewLeaflet } from "actions/createNewLeaflet"; -import { createNewLeafletFromTemplate } from "actions/createNewLeafletFromTemplate"; import { ActionButton } from "components/ActionBar/ActionButton"; import { AddTiny } from "components/Icons/AddTiny"; import { BlockCanvasPageSmall } from "components/Icons/BlockCanvasPageSmall"; import { BlockDocPageSmall } from "components/Icons/BlockDocPageSmall"; -import { TemplateSmall } from "components/Icons/TemplateSmall"; import { Menu, MenuItem } from "components/Layout"; import { useIsMobile } from "src/hooks/isMobile"; -import { create } from "zustand"; -import { combine, createJSONStorage, persist } from "zustand/middleware"; -export const useTemplateState = create( - persist( - combine( - { - templates: [] as { id: string; name: string }[], - }, - (set) => ({ - removeTemplate: (template: { id: string }) => - set((state) => { - return { - templates: state.templates.filter((t) => t.id !== template.id), - }; - }), - addTemplate: (template: { id: string; name: string }) => - set((state) => { - if (state.templates.find((t) => t.id === template.id)) return state; - return { templates: [...state.templates, template] }; - }), - }), - ), - { - name: "home-templates", - storage: createJSONStorage(() => localStorage), - }, - ), -); export const CreateNewLeafletButton = (props: {}) => { let isMobile = useIsMobile(); - let templates = useTemplateState((s) => s.templates); let openNewLeaflet = (id: string) => { if (isMobile) { window.location.href = `/${id}?focusFirstBlock`; @@ -96,23 +65,6 @@ export const CreateNewLeafletButton = (props: {}) => { - {templates.length > 0 && ( -
- )} - {templates.map((t) => { - return ( - { - let id = await createNewLeafletFromTemplate(t.id, false); - if (!id.error) openNewLeaflet(id.id); - }} - > - - New {t.name} - - ); - })} ); }; diff --git a/app/(home-pages)/home/HomeLayout.tsx b/app/(home-pages)/home/HomeLayout.tsx index fcd5f6e9..f1f84e4f 100644 --- a/app/(home-pages)/home/HomeLayout.tsx +++ b/app/(home-pages)/home/HomeLayout.tsx @@ -21,7 +21,6 @@ import { } from "components/PageLayouts/DashboardLayout"; import { Actions } from "./Actions/Actions"; import { useCardBorderHidden } from "components/Pages/useCardBorderHidden"; -import { useTemplateState } from "./Actions/CreateNewButton"; import { GetLeafletDataReturnType } from "app/api/rpc/[command]/get_leaflet_data"; import { useState } from "react"; import { useDebouncedEffect } from "src/hooks/useDebouncedEffect"; @@ -69,8 +68,6 @@ export const HomeLayout = (props: { let { identity } = useIdentityData(); let hasPubs = !identity || identity.publications.length === 0 ? false : true; - let hasTemplates = - useTemplateState((s) => s.templates).length === 0 ? false : true; let hasArchived = identity && identity.permission_token_on_homepage.filter( @@ -93,7 +90,6 @@ export const HomeLayout = (props: { setSearchValueAction={setSearchValue} hasBackgroundImage={hasBackgroundImage} hasPubs={hasPubs} - hasTemplates={hasTemplates} hasArchived={!!hasArchived} /> ), @@ -294,19 +290,16 @@ function useSearchedLeaflets( } }); - let allTemplates = useTemplateState((s) => s.templates); let filteredLeaflets = sortedLeaflets.filter( ({ token: leaflet, archived: archived }) => { let published = !!leaflet.leaflets_in_publications?.find((l) => l.doc); let drafts = !!leaflet.leaflets_in_publications?.length && !published; let docs = !leaflet.leaflets_in_publications?.length && !archived; - let templates = !!allTemplates.find((t) => t.id === leaflet.id); // If no filters are active, show all if ( !filter.drafts && !filter.published && !filter.docs && - !filter.templates && !filter.archived ) return archived === false || archived === null || archived == undefined; @@ -315,7 +308,6 @@ function useSearchedLeaflets( (filter.drafts && drafts) || (filter.published && published) || (filter.docs && docs) || - (filter.templates && templates) || (filter.archived && archived) ); }, diff --git a/app/(home-pages)/home/LeafletList/LeafletInfo.tsx b/app/(home-pages)/home/LeafletList/LeafletInfo.tsx index bebdaa44..478f853c 100644 --- a/app/(home-pages)/home/LeafletList/LeafletInfo.tsx +++ b/app/(home-pages)/home/LeafletList/LeafletInfo.tsx @@ -3,8 +3,6 @@ import { PermissionToken, useEntity } from "src/replicache"; import { LeafletOptions } from "./LeafletOptions"; import Link from "next/link"; import { use, useState } from "react"; -import { theme } from "tailwind.config"; -import { TemplateSmall } from "components/Icons/TemplateSmall"; import { timeAgo } from "src/utils/timeAgo"; import { usePublishLink } from "components/ShareOptions"; import { Separator } from "components/Layout"; @@ -17,7 +15,6 @@ export const LeafletInfo = (props: { token: PermissionToken; leaflet_id: string; loggedIn: boolean; - isTemplate: boolean; className?: string; display: "grid" | "list"; added_at: string; @@ -45,15 +42,8 @@ export const LeafletInfo = (props: { {title}
- {props.isTemplate && props.display === "list" ? ( - - ) : null} )}
- {props.isTemplate && props.display === "grid" ? ( -
- -
- ) : null} ); }; diff --git a/app/(home-pages)/home/LeafletList/LeafletListItem.tsx b/app/(home-pages)/home/LeafletList/LeafletListItem.tsx index 1d80e760..9537f81b 100644 --- a/app/(home-pages)/home/LeafletList/LeafletListItem.tsx +++ b/app/(home-pages)/home/LeafletList/LeafletListItem.tsx @@ -1,6 +1,5 @@ "use client"; import { PermissionToken } from "src/replicache"; -import { useTemplateState } from "../Actions/CreateNewButton"; import { LeafletListPreview, LeafletGridPreview } from "./LeafletPreview"; import { LeafletInfo } from "./LeafletInfo"; import { useState, useRef, useEffect } from "react"; @@ -23,10 +22,6 @@ export const LeafletListItem = (props: { isHidden: boolean; showPreview?: boolean; }) => { - let isTemplate = useTemplateState( - (s) => !!s.templates.find((t) => t.id === props.token.id), - ); - let [isOnScreen, setIsOnScreen] = useState(props.index < 16 ? true : false); let previewRef = useRef(null); @@ -69,7 +64,7 @@ export const LeafletListItem = (props: { {props.showPreview && ( )} - + {props.cardBorderHidden && (
diff --git a/app/(home-pages)/home/LeafletList/LeafletOptions.tsx b/app/(home-pages)/home/LeafletList/LeafletOptions.tsx index 1760afde..6b810d58 100644 --- a/app/(home-pages)/home/LeafletList/LeafletOptions.tsx +++ b/app/(home-pages)/home/LeafletList/LeafletOptions.tsx @@ -3,10 +3,7 @@ import { Menu, MenuItem } from "components/Layout"; import { useState } from "react"; import { ButtonPrimary, ButtonTertiary } from "components/Buttons"; -import { useTemplateState } from "../Actions/CreateNewButton"; -import { useSmoker, useToaster } from "components/Toast"; -import { TemplateRemoveSmall } from "components/Icons/TemplateRemoveSmall"; -import { TemplateSmall } from "components/Icons/TemplateSmall"; +import { useToaster } from "components/Toast"; import { MoreOptionsVerticalTiny } from "components/Icons/MoreOptionsVerticalTiny"; import { DeleteSmall } from "components/Icons/DeleteSmall"; import { @@ -37,14 +34,13 @@ import { export const LeafletOptions = (props: { leaflet: PermissionToken; - isTemplate?: boolean; draftInPublication?: string; document_uri?: string; shareLink: string; archived?: boolean | null; loggedIn?: boolean; }) => { - let [state, setState] = useState<"normal" | "template" | "areYouSure">( + let [state, setState] = useState<"normal" | "areYouSure">( "normal", ); let [open, setOpen] = useState(false); @@ -76,7 +72,6 @@ export const LeafletOptions = (props: { !props.loggedIn ? ( @@ -88,16 +83,10 @@ export const LeafletOptions = (props: { /> ) : ( ) - ) : state === "template" ? ( - setOpen(false)} - /> ) : state === "areYouSure" ? ( setState("normal")} @@ -112,10 +101,9 @@ export const LeafletOptions = (props: { }; const DefaultOptions = (props: { - setState: (s: "areYouSure" | "template") => void; + setState: (s: "areYouSure") => void; draftInPublication?: string; leaflet: PermissionToken; - isTemplate: boolean | undefined; shareLink: string; archived?: boolean | null; }) => { @@ -136,12 +124,6 @@ const DefaultOptions = (props: { id="get-link" link={`/${props.shareLink}`} /> - -
{ @@ -236,8 +218,7 @@ const DefaultOptions = (props: { const LoggedOutOptions = (props: { leaflet: PermissionToken; - isTemplate?: boolean; - setState: (s: "template" | "areYouSure") => void; + setState: (s: "areYouSure") => void; shareLink: string; }) => { let toaster = useToaster(); @@ -255,11 +236,6 @@ const LoggedOutOptions = (props: { id="get-link" link={`/${props.shareLink}`} /> -
{ @@ -407,86 +383,3 @@ const DeleteAreYouSureForm = (props: { ); }; -const AddTemplateForm = (props: { - leaflet: PermissionToken; - close: () => void; -}) => { - let [name, setName] = useState(""); - let smoker = useSmoker(); - return ( -
- - - { - useTemplateState.getState().addTemplate({ - name, - id: props.leaflet.id, - }); - let newLeafletButton = document.getElementById("new-leaflet-button"); - if (!newLeafletButton) return; - let rect = newLeafletButton.getBoundingClientRect(); - smoker({ - static: true, - text: Added {name}!, - position: { - y: rect.top, - x: rect.right + 5, - }, - }); - props.close(); - }} - className="place-self-end" - > - Add Template - -
- ); -}; - -const TemplateOptions = (props: { - leaflet: PermissionToken; - isTemplate: boolean | undefined; - setState: (s: "template") => void; -}) => { - let smoker = useSmoker(); - if (props.isTemplate) - return ( - { - useTemplateState.getState().removeTemplate(props.leaflet); - let newLeafletButton = document.getElementById("new-leaflet-button"); - if (!newLeafletButton) return; - let rect = newLeafletButton.getBoundingClientRect(); - smoker({ - static: true, - text: Removed template!, - position: { - y: rect.top, - x: rect.right + 5, - }, - }); - }} - > - Remove from Templates - - ); - return ( - { - e.preventDefault(); - props.setState("template"); - }} - > - Use as Template - - ); -}; diff --git a/app/templates/TemplateList.tsx b/app/templates/TemplateList.tsx deleted file mode 100644 index a6eadd41..00000000 --- a/app/templates/TemplateList.tsx +++ /dev/null @@ -1,159 +0,0 @@ -"use client"; - -import { ButtonPrimary } from "components/Buttons"; -import Image from "next/image"; -import Link from "next/link"; -import { createNewLeafletFromTemplate } from "actions/createNewLeafletFromTemplate"; -import { AddTiny } from "components/Icons/AddTiny"; - -export function LeafletTemplate(props: { - title: string; - description?: string; - image: string; - alt: string; - templateID: string; // readonly id for the leaflet that will be duplicated -}) { - return ( -
-
-
- {props.alt} -
-
-
-
-

- {props.title} -

- {props.description && ( -
- {props.description} -
- )} -
-
- - - Preview - - - { - let id = await createNewLeafletFromTemplate( - props.templateID, - false, - ); - window.open(`/${id}`, "_blank"); - }} - > - Create - - -
-
-
- ); -} - -export function TemplateList(props: { - name: string; - description?: string; - children: React.ReactNode; -}) { - return ( -
-
-

{props.name}

-

{props.description}

-
-
- {props.children} -
-
- ); -} - -export function TemplateListThemes() { - return ( - <> - - - - - - - - ); -} - -export function TemplateListExamples() { - return ( - - - - - - - ); -} diff --git a/app/templates/icon.tsx b/app/templates/icon.tsx deleted file mode 100644 index e9f2c3f4..00000000 --- a/app/templates/icon.tsx +++ /dev/null @@ -1,108 +0,0 @@ -// NOTE: duplicated from home/icon.tsx -// we could make it different so it's clear it's not your personal colors? - -import { ImageResponse } from "next/og"; -import type { Fact } from "src/replicache"; -import type { Attribute } from "src/replicache/attributes"; -import { Database } from "../../supabase/database.types"; -import { createServerClient } from "@supabase/ssr"; -import { parseHSBToRGB } from "src/utils/parseHSB"; -import { cookies } from "next/headers"; - -// Route segment config -export const revalidate = 0; -export const preferredRegion = ["sfo1"]; -export const dynamic = "force-dynamic"; -export const fetchCache = "force-no-store"; - -// Image metadata -export const size = { - width: 32, - height: 32, -}; -export const contentType = "image/png"; - -// Image generation -let supabase = createServerClient( - process.env.NEXT_PUBLIC_SUPABASE_API_URL as string, - process.env.SUPABASE_SERVICE_ROLE_KEY as string, - { cookies: {} }, -); -export default async function Icon() { - let cookieStore = await cookies(); - let identity = cookieStore.get("identity"); - let rootEntity: string | null = null; - if (identity) { - let res = await supabase - .from("identities") - .select( - `*, - permission_tokens!identities_home_page_fkey(*, permission_token_rights(*)), - permission_token_on_homepage( - *, permission_tokens(*, permission_token_rights(*)) - ) - `, - ) - .eq("id", identity?.value) - .single(); - rootEntity = res.data?.permission_tokens?.root_entity || null; - } - let outlineColor, fillColor; - if (rootEntity) { - let { data } = await supabase.rpc("get_facts", { - root: rootEntity, - }); - let initialFacts = (data as unknown as Fact[]) || []; - let themePageBG = initialFacts.find( - (f) => f.attribute === "theme/card-background", - ) as Fact<"theme/card-background"> | undefined; - - let themePrimary = initialFacts.find( - (f) => f.attribute === "theme/primary", - ) as Fact<"theme/primary"> | undefined; - - outlineColor = parseHSBToRGB(`hsba(${themePageBG?.data.value})`); - - fillColor = parseHSBToRGB(`hsba(${themePrimary?.data.value})`); - } - - return new ImageResponse( - ( - // ImageResponse JSX element -
- - {/* outline */} - - - {/* fill */} - - -
- ), - // ImageResponse options - { - // For convenience, we can re-use the exported icons size metadata - // config to also set the ImageResponse's width and height. - ...size, - headers: { - "Cache-Control": "no-cache", - }, - }, - ); -} diff --git a/app/templates/page.tsx b/app/templates/page.tsx deleted file mode 100644 index ea8f6de4..00000000 --- a/app/templates/page.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import Link from "next/link"; -import { TemplateListExamples, TemplateListThemes } from "./TemplateList"; -import { ActionButton } from "components/ActionBar/ActionButton"; -import { HomeSmall } from "components/Icons/HomeSmall"; - -export const metadata = { - title: "Leaflet Templates", - description: "example themes and documents you can use!", -}; - -export default function Templates() { - return ( -
-
-
- {/* NOT using b/c it does a permission check we don't need */} - - } label="Go Home" /> - -
-
-

Template Library

- - -
-
-
- ); -} diff --git a/components/Icons/TemplateRemoveSmall.tsx b/components/Icons/TemplateRemoveSmall.tsx deleted file mode 100644 index 9768bec3..00000000 --- a/components/Icons/TemplateRemoveSmall.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { Props } from "./Props"; - -export const TemplateRemoveSmall = (props: Props) => { - return ( - - - - ); -}; diff --git a/components/Icons/TemplateSmall.tsx b/components/Icons/TemplateSmall.tsx deleted file mode 100644 index 93f27c7b..00000000 --- a/components/Icons/TemplateSmall.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { Props } from "./Props"; - -export const TemplateSmall = (props: Props & { fill?: string }) => { - return ( - - - - - ); -}; diff --git a/components/PageLayouts/DashboardLayout.tsx b/components/PageLayouts/DashboardLayout.tsx index d44d3eb6..9fcd52df 100644 --- a/components/PageLayouts/DashboardLayout.tsx +++ b/components/PageLayouts/DashboardLayout.tsx @@ -33,7 +33,6 @@ export type DashboardState = { drafts: boolean; published: boolean; docs: boolean; - templates: boolean; archived: boolean; }; }; @@ -50,7 +49,6 @@ const defaultDashboardState: DashboardState = { drafts: false, published: false, docs: false, - templates: false, archived: false, }, }; @@ -262,7 +260,6 @@ export const HomeDashboardControls = (props: { hasBackgroundImage: boolean; defaultDisplay: Exclude; hasPubs: boolean; - hasTemplates: boolean; hasArchived: boolean; }) => { let { display, sort } = useDashboardState(); @@ -284,13 +281,10 @@ export const HomeDashboardControls = (props: { - {props.hasPubs || props.hasTemplates ? ( + {props.hasPubs ? ( <> - {props.hasPubs} - {props.hasTemplates} {" "} @@ -380,7 +374,6 @@ function Tab(props: { const FilterOptions = (props: { hasPubs: boolean; - hasTemplates: boolean; hasArchived: boolean; }) => { let { filter } = useDashboardState(); @@ -419,22 +412,6 @@ const FilterOptions = (props: { )} - {props.hasTemplates && ( - <> - - setState({ - filter: { ...filter, templates: !!e.target.checked }, - }) - } - > - Templates - - - )} - {props.hasArchived && ( !!s.templates.find((t) => t.id === permission_token.id), - ); - return ( <> - {isTemplate && ( - <> - -
- - )} - /// -import "./.next/dev/types/routes.d.ts"; +/// // NOTE: This file should not be edited // see https://nextjs.org/docs/app/api-reference/config/typescript for more information. diff --git a/tsconfig.json b/tsconfig.json index 43324c37..ba4b959c 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -21,7 +21,7 @@ "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, - "jsx": "react-jsx", + "jsx": "preserve", "plugins": [ { "name": "next"