feat: add help modal and fix saved snippet state bug

cmgriffing · Nov 4, 2024 · f1e2532 · f1e2532
1 parent 0209fec
commit f1e2532
Show file tree

Hide file tree

Showing 4 changed files with 144 additions and 92 deletions.
diff --git a/playgrounds/app/src/components/Editor.tsx b/playgrounds/app/src/components/Editor.tsx
@@ -696,7 +696,11 @@ export default function Editor(props: EditorProps) {
                   onChange={newCodeLeft => props.setSnippetSettings('codeLeft', newCodeLeft)}
                 >
                   <TextFieldLabel>Start Code</TextFieldLabel>
-                  <TextFieldTextArea class="h-[400px]" placeholder="Type your message here." />
+                  <TextFieldTextArea
+                    value={props.snippetSettings.codeLeft}
+                    class="h-[400px]"
+                    placeholder="Type your message here."
+                  />
                 </TextField>
 
                 <TextField
@@ -705,7 +709,11 @@ export default function Editor(props: EditorProps) {
                   onChange={newEndCode => props.setSnippetSettings('codeRight', newEndCode)}
                 >
                   <TextFieldLabel>End Code</TextFieldLabel>
-                  <TextFieldTextArea class="h-[400px]" placeholder="Type your message here." />
+                  <TextFieldTextArea
+                    value={props.snippetSettings.codeRight}
+                    class="h-[400px]"
+                    placeholder="Type your message here."
+                  />
                 </TextField>
               </div>
             </TabsContent>

diff --git a/playgrounds/app/src/components/Header.tsx b/playgrounds/app/src/components/Header.tsx
@@ -1,113 +1,158 @@
 import { A } from '@solidjs/router'
 import { Button } from './ui/button'
-import { OcMarkgithub2 } from 'solid-icons/oc'
+import { OcMarkgithub2, OcQuestion2 } from 'solid-icons/oc'
 import { FaSolidSun, FaSolidMoon } from 'solid-icons/fa'
 import { createThemeSwitcher } from '~/components/theme-switcher'
 import { authToken } from '~/lib/store'
-import { Show } from 'solid-js'
+import { createSignal, Show } from 'solid-js'
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '~/components/ui/dropdown-menu'
 import { user } from '~/lib/store'
-import { TbCode, TbDoorExit } from 'solid-icons/tb'
+import { TbCode, TbDoorExit, TbQuestionMark } from 'solid-icons/tb'
 import { linkStyles } from '~/lib/styles'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '~/components/ui/dialog'
+import { makePersisted } from '@solid-primitives/storage'
 
 export default function Header() {
+  const [isShowingHelpDialog, setIsShowingHelpDialog] = makePersisted(createSignal(true), {
+    name: 'isShowingHelpDialog',
+  })
   const [isDarkMode, toggleDarkMode] = createThemeSwitcher()
 
   const handleToggle = () => {
     toggleDarkMode() // Call without arguments
   }
 
   return (
-    <header class="flex flex-col">
-      <nav class="flex flex-row gap-2 justify-between p-4">
-        <div class="flex flex-row items-center gap-8">
-          <div class="flex flex-col items-center justify-center">
-            <a href="/">
-              <h1 class="text-3xl font-title text-sky-500">Giffium</h1>
-            </a>
-            <p class="text-left mt-[-10px]">
-              by{' '}
-              <a href="https://cmgriffing.com" rel="dofollow" target="_blank" class={linkStyles}>
-                cmgriffing
+    <>
+      <header class="flex flex-col">
+        <nav class="flex flex-row gap-2 justify-between p-4">
+          <div class="flex flex-row items-center gap-8">
+            <div class="flex flex-col items-center justify-center">
+              <a href="/">
+                <h1 class="text-3xl font-title text-sky-500">Giffium</h1>
               </a>
-            </p>
-          </div>
+              <p class="text-left mt-[-10px]">
+                by{' '}
+                <a href="https://cmgriffing.com" rel="dofollow" target="_blank" class={linkStyles}>
+                  cmgriffing
+                </a>
+              </p>
+            </div>
 
-          <ul class="flex flex-row gap-4">
-            <li class="">
-              <A href="/about" class={linkStyles}>
-                About
-              </A>
-            </li>
-            <li class="">
-              <a
-                href="https://github.com/cmgriffing/giffium"
-                target="_blank"
-                rel="noreferrer"
-                class={linkStyles}
-              >
-                Source
-              </a>
-            </li>
-          </ul>
-        </div>
-        <div class="flex flex-row items-center gap-2">
-          <button
-            onClick={handleToggle}
-            class="flex items-center justify-center cursor-pointer w-10 h-10 bg-neutral-100 hover:bg-neutral-200 dark:bg-neutral-600 dark:hover:bg-neutral-600/80 rounded transition"
-            aria-label="Toggle dark mode"
-          >
-            {isDarkMode() ? (
-              <FaSolidMoon class="w-4 h-4 text-neutral-200" />
-            ) : (
-              <FaSolidSun class="w-4 h-4 text-neutral-500" />
-            )}
-          </button>
-          <Show when={!authToken()}>
+            <ul class="flex flex-row gap-4">
+              <li class="">
+                <A href="/about" class={linkStyles}>
+                  About
+                </A>
+              </li>
+              <li class="">
+                <a
+                  href="https://github.com/cmgriffing/giffium"
+                  target="_blank"
+                  rel="noreferrer"
+                  class={linkStyles}
+                >
+                  Source
+                </a>
+              </li>
+            </ul>
+          </div>
+          <div class="flex flex-row items-center gap-2">
             <Button
-              as="a"
-              href={`https://github.com/login/oauth/authorize?client_id=${
-                import.meta.env.VITE_GITHUB_CLIENT_ID
-              }&redirect_uri=${window.location.origin}/oauth`}
+              variant={'ghost'}
+              class="flex flex-row items-center px-2"
+              onClick={() => setIsShowingHelpDialog(true)}
             >
-              <OcMarkgithub2 size={24} class="mr-4" />
-              Login/Signup
+              <OcQuestion2 size={24} />
             </Button>
-          </Show>
-          <Show when={Boolean(authToken())}>
-            <DropdownMenu>
-              <DropdownMenuTrigger>
-                <Button class="flex flex-row items-center gap-2">
-                  <img
-                    src={user()?.githubAvatarUrl}
-                    alt={user()?.githubUsername}
-                    class="w-6 h-6 rounded-full"
-                  />
-                  {user()?.githubUsername}
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent>
-                <DropdownMenuItem>
-                  <A href="/snippets" class="flex flex-row items-center gap-2">
-                    <TbCode /> Snippets
-                  </A>
-                </DropdownMenuItem>
-                <DropdownMenuItem>
-                  <A href="/logged-out" class="flex flex-row items-center gap-2">
-                    <TbDoorExit />
-                    Log out
-                  </A>
-                </DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          </Show>
-        </div>
-      </nav>
-    </header>
+            <Button
+              variant={'ghost'}
+              class="flex flex-row items-center px-2"
+              onClick={handleToggle}
+              aria-label="Toggle dark mode"
+            >
+              {isDarkMode() ? (
+                <FaSolidMoon size={24} class="text-white" />
+              ) : (
+                <FaSolidSun size={24} class="text-black" />
+              )}
+            </Button>
+            <Show when={!authToken()}>
+              <Button
+                as="a"
+                class="ml-4"
+                href={`https://github.com/login/oauth/authorize?client_id=${
+                  import.meta.env.VITE_GITHUB_CLIENT_ID
+                }&redirect_uri=${window.location.origin}/oauth`}
+              >
+                <OcMarkgithub2 size={24} class="mr-4" />
+                Login/Signup
+              </Button>
+            </Show>
+            <Show when={Boolean(authToken())}>
+              <DropdownMenu>
+                <DropdownMenuTrigger>
+                  <Button class="flex flex-row items-center gap-2 ml-4">
+                    <img
+                      src={user()?.githubAvatarUrl}
+                      alt={user()?.githubUsername}
+                      class="w-6 h-6 rounded-full"
+                    />
+                    {user()?.githubUsername}
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent>
+                  <DropdownMenuItem>
+                    <A href="/snippets" class="flex flex-row items-center gap-2">
+                      <TbCode /> Snippets
+                    </A>
+                  </DropdownMenuItem>
+                  <DropdownMenuItem>
+                    <A href="/logged-out" class="flex flex-row items-center gap-2">
+                      <TbDoorExit />
+                      Log out
+                    </A>
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </Show>
+          </div>
+        </nav>
+      </header>
+      <Dialog open={isShowingHelpDialog()} onOpenChange={setIsShowingHelpDialog} modal>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Welcome to Giffium</DialogTitle>
+            <DialogDescription>
+              <p class="mb-8 text-center font-bold text-lg text-white">
+                Create and share beautiful gifs of your source code diffs.
+              </p>
+              <p class="text-white">Get started by following these steps.</p>
+              <ol class="list-disc list-inside pl-8 text-white">
+                <li>Enter your start and end code snippets.</li>
+                <li>Select the theme and language.</li>
+                <li>Click the Next button to preview your snippet animation.</li>
+                <li>Click the Generate button to generate a gif.</li>
+              </ol>
+
+              <p class="text-white mt-8">You can also log in with GitHub to save your snippets.</p>
+            </DialogDescription>
+          </DialogHeader>
+        </DialogContent>
+      </Dialog>
+    </>
   )
 }
diff --git a/playgrounds/app/src/routes/index.tsx b/playgrounds/app/src/routes/index.tsx
@@ -56,9 +56,6 @@ export default function Home() {
 
   return (
     <main class="mx-auto text-gray-700 dark:text-gray-100 px-4 min-h-full">
-      {/* <p class="mb-16 text-center font-bold text-lg">
-        Create and share beautiful gifs of your source code diffs.
-      </p> */}
       <Editor snippetSettings={snippetSettings} setSnippetSettings={setSnippetSettings} />
     </main>
   )

diff --git a/playgrounds/app/src/routes/snippets/[snippetId].tsx b/playgrounds/app/src/routes/snippets/[snippetId].tsx
@@ -10,18 +10,20 @@ export default function ViewSnippet({ params }: { params: { snippetId: string }
     if (!response.ok) {
       return undefined
     }
+
     const data = await response.json()
     return data
   })
 
   const [snippetSettings, setSnippetSettings] = createStore<SnippetSettings>({ ...snippet()! })
 
-  createEffect(() => {
-    console.log('snippet in effect', snippet())
+  createEffect(value => {
+    // console.log('snippet in effect', snippet())
     const updatedSnippetSettings = snippet()
-    if (updatedSnippetSettings) {
+    if (value !== updatedSnippetSettings && updatedSnippetSettings) {
       setSnippetSettings(updatedSnippetSettings)
     }
+    return updatedSnippetSettings
   })
 
   return (