login fixes

2025-12-22 10:55:08 -05:00
parent 281654081d
commit 1dd852795e
5 changed files with 204 additions and 97 deletions
--- a/src/components/Bars.tsx
+++ b/src/components/Bars.tsx
@@ -39,6 +39,7 @@ interface ContributionDay {
 }

 export function RightBarContent() {
+  const { setLeftBarVisible } = useBars();
  const [githubCommits, setGithubCommits] = createSignal<GitCommit[]>([]);
  const [giteaCommits, setGiteaCommits] = createSignal<GitCommit[]>([]);
  const [githubActivity, setGithubActivity] = createSignal<ContributionDay[]>(
@@ -47,6 +48,12 @@ export function RightBarContent() {
  const [giteaActivity, setGiteaActivity] = createSignal<ContributionDay[]>([]);
  const [loading, setLoading] = createSignal(true);

+  const handleLinkClick = () => {
+    if (typeof window !== "undefined" && window.innerWidth < 768) {
+      setLeftBarVisible(false);
+    }
+  };
+
  onMount(() => {
    // Fetch all data client-side only to avoid hydration mismatch
    const fetchData = async () => {
@@ -83,7 +90,9 @@ export function RightBarContent() {
      <Typewriter keepAlive={false} class="z-50 px-4 md:pt-4">
        <ul class="flex flex-col gap-4">
          <li class="hover:text-subtext0 w-fit transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-110 hover:font-bold">
-            <a href="/contact">Contact Me</a>
+            <a href="/contact" onClick={handleLinkClick}>
+              Contact Me
+            </a>
          </li>
          <li>
            <a
@@ -114,6 +123,7 @@ export function RightBarContent() {
          <li>
            <a
              href="/resume"
+              onClick={handleLinkClick}
              class="hover:text-subtext0 flex items-center gap-3 transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-105"
            >
              <span class="shaker rounded-full p-2">
@@ -177,6 +187,12 @@ export function LeftBar() {
  const [isMounted, setIsMounted] = createSignal(false);
  const [signOutLoading, setSignOutLoading] = createSignal(false);

+  const handleLinkClick = () => {
+    if (typeof window !== "undefined" && window.innerWidth < 768) {
+      setLeftBarVisible(false);
+    }
+  };
+
  const handleSignOut = async () => {
    setSignOutLoading(true);
    try {
@@ -337,7 +353,9 @@ export function LeftBar() {
      <div class="flex h-full flex-col overflow-y-auto">
        <Typewriter speed={10} keepAlive={10000} class="z-50 pr-8 pl-4">
          <h3 class="hover:text-subtext0 w-fit pt-6 text-center text-3xl underline transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-105">
-            <a href="/">{formatDomainName(env.VITE_DOMAIN)}</a>
+            <a href="/" onClick={handleLinkClick}>
+              {formatDomainName(env.VITE_DOMAIN)}
+            </a>
          </h3>
        </Typewriter>

@@ -368,6 +386,7 @@ export function LeftBar() {
                  {(post) => (
                    <a
                      href={`/blog/${post.title}`}
+                      onClick={handleLinkClick}
                      class="hover:text-subtext0 block transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-105 hover:font-bold"
                    >
                      <Typewriter class="flex flex-col" keepAlive={false}>
@@ -402,17 +421,25 @@ export function LeftBar() {
            <Typewriter keepAlive={false}>
              <ul class="flex flex-col gap-4 py-6">
                <li class="hover:text-subtext0 w-fit transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-110 hover:font-bold">
-                  <a href="/">Home</a>
+                  <a href="/" onClick={handleLinkClick}>
+                    Home
+                  </a>
                </li>
                <li class="hover:text-subtext0 w-fit transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-110 hover:font-bold">
-                  <a href="/blog">Blog</a>
+                  <a href="/blog" onClick={handleLinkClick}>
+                    Blog
+                  </a>
                </li>
                <li class="hover:text-subtext0 w-fit transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-110 hover:font-bold">
                  <Show
                    when={isMounted() && userInfo()?.isAuthenticated}
-                    fallback={<a href="/login">Login</a>}
+                    fallback={
+                      <a href="/login" onClick={handleLinkClick}>
+                        Login
+                      </a>
+                    }
                  >
-                    <a href="/account">
+                    <a href="/account" onClick={handleLinkClick}>
                      Account
                      <Show when={userInfo()?.email}>
                        <span class="text-subtext0 text-sm font-normal">
--- a/src/components/blog/PostForm.tsx
+++ b/src/components/blog/PostForm.tsx
@@ -52,6 +52,9 @@ export default function PostForm(props: PostFormProps) {
    props.initialData?.body
  );
  const [hasSaved, setHasSaved] = createSignal(props.mode === "edit");
+  const [createdPostId, setCreatedPostId] = createSignal<number | undefined>(
+    props.postId
+  );

  // Mark initial load as complete after data is loaded (for edit mode)
  createEffect(() => {
@@ -75,12 +78,13 @@ export default function PostForm(props: PostFormProps) {
          )) as string;
        }

-        if (props.mode === "edit") {
+        if (props.mode === "edit" || createdPostId()) {
+          // Update existing post (either in edit mode or if already created)
          await api.database.updatePost.mutate({
-            id: props.postId!,
+            id: createdPostId() || props.postId!,
            title: titleVal.replaceAll(" ", "_"),
            subtitle: subtitle() || "",
-            body: body() || "",
+            body: body() || "Hello, World!",
            banner_photo:
              bannerImageKey !== ""
                ? bannerImageKey
@@ -92,20 +96,19 @@ export default function PostForm(props: PostFormProps) {
            author_id: props.userID
          });
        } else {
-          // Create mode: only save once
-          if (!hasSaved()) {
-            await api.database.createPost.mutate({
-              category: "blog",
-              title: titleVal.replaceAll(" ", "_"),
-              subtitle: subtitle() || null,
-              body: body() || null,
-              banner_photo: bannerImageKey !== "" ? bannerImageKey : null,
-              published: published(),
-              tags: tags().length > 0 ? tags() : null,
-              author_id: props.userID
-            });
-            setHasSaved(true);
-          }
+          // Create mode: only save once (first autosave)
+          const result = await api.database.createPost.mutate({
+            category: "blog",
+            title: titleVal.replaceAll(" ", "_"),
+            subtitle: subtitle() || null,
+            body: body() || "Hello, World!",
+            banner_photo: bannerImageKey !== "" ? bannerImageKey : null,
+            published: published(),
+            tags: tags().length > 0 ? tags() : null,
+            author_id: props.userID
+          });
+          setCreatedPostId(result.data as number);
+          setHasSaved(true);
        }

        showAutoSaveTrigger();
@@ -216,12 +219,13 @@ export default function PostForm(props: PostFormProps) {
        )) as string;
      }

-      if (props.mode === "edit") {
+      if (props.mode === "edit" || createdPostId()) {
+        // Update existing post (either in edit mode or if autosave created it)
        await api.database.updatePost.mutate({
-          id: props.postId!,
+          id: createdPostId() || props.postId!,
          title: title().replaceAll(" ", "_"),
          subtitle: subtitle() || null,
-          body: body() || null,
+          body: body() || "Hello, World!",
          banner_photo:
            bannerImageKey !== ""
              ? bannerImageKey
@@ -233,16 +237,18 @@ export default function PostForm(props: PostFormProps) {
          author_id: props.userID
        });
      } else {
-        await api.database.createPost.mutate({
+        // Create new post
+        const result = await api.database.createPost.mutate({
          category: "blog",
          title: title().replaceAll(" ", "_"),
          subtitle: subtitle() || null,
-          body: body() || null,
+          body: body() || "Hello, World!",
          banner_photo: bannerImageKey !== "" ? bannerImageKey : null,
          published: published(),
          tags: tags().length > 0 ? tags() : null,
          author_id: props.userID
        });
+        setCreatedPostId(result.data as number);
      }

      navigate(`/blog/${encodeURIComponent(title().replaceAll(" ", "_"))}`);
--- a/src/components/blog/TextEditor.tsx
+++ b/src/components/blog/TextEditor.tsx
@@ -1382,7 +1382,7 @@ export default function TextEditor(props: TextEditorProps) {
            {/* Language Selector Dropdown */}
            <Show when={showLanguageSelector()}>
              <div
-                class="language-selector bg-mantle text-text border-surface2 fixed z-[110] max-h-64 w-48 overflow-y-auto rounded border shadow-lg"
+                class="language-selector bg-mantle text-text border-surface2 fixed z-110 max-h-64 w-48 overflow-y-auto rounded border shadow-lg"
                style={{
                  top: `${languageSelectorPosition().top}px`,
                  left: `${languageSelectorPosition().left}px`
@@ -1405,7 +1405,7 @@ export default function TextEditor(props: TextEditorProps) {
            {/* Table Grid Selector */}
            <Show when={showTableMenu()}>
              <div
-                class="table-menu fixed z-[110]"
+                class="table-menu fixed z-110"
                style={{
                  top: `${tableMenuPosition().top}px`,
                  left: `${tableMenuPosition().left}px`
@@ -1418,7 +1418,7 @@ export default function TextEditor(props: TextEditorProps) {
            {/* Mermaid Template Selector */}
            <Show when={showMermaidTemplates()}>
              <div
-                class="mermaid-menu bg-mantle text-text border-surface2 fixed z-[110] max-h-96 w-56 overflow-y-auto rounded border shadow-lg"
+                class="mermaid-menu bg-mantle text-text border-surface2 fixed z-110 max-h-96 w-56 overflow-y-auto rounded border shadow-lg"
                style={{
                  top: `${mermaidMenuPosition().top}px`,
                  left: `${mermaidMenuPosition().left}px`
@@ -1897,11 +1897,11 @@ export default function TextEditor(props: TextEditorProps) {
      {/* Keyboard Help Modal */}
      <Show when={showKeyboardHelp()}>
        <div
-          class="bg-opacity-50 fixed inset-0 z-[110] flex items-center justify-center bg-black"
+          class="bg-opacity-50 fixed inset-0 z-110 flex items-center justify-center bg-black"
          onClick={() => setShowKeyboardHelp(false)}
        >
          <div
-            class="bg-base border-surface2 max-h-[80vh] w-full max-w-2xl overflow-y-auto rounded-lg border p-6 shadow-2xl"
+            class="bg-base border-surface2 max-h-[80dvh] w-full max-w-2xl overflow-y-auto rounded-lg border p-6 shadow-2xl"
            onClick={(e) => e.stopPropagation()}
          >
            {/* Header */}