fix: Allow setting demo mode creds when demo mode is enabled

7 files changed, 39 insertions, 23 deletions

diff --git a/apps/web/components/DemoModeBanner.tsx b/apps/web/components/DemoModeBanner.tsx
index 6250be87..8ab4dd0d 100644
--- a/apps/web/components/DemoModeBanner.tsx
+++ b/apps/web/components/DemoModeBanner.tsx
@@ -1,6 +1,6 @@
 export default function DemoModeBanner() {
   return (
-    <div className="h-min w-full rounded bg-yellow-100 px-4 py-2 text-center">
+    <div className="h-min w-full rounded bg-yellow-100 px-4 py-2 text-center text-black">
       Demo mode is on. All modifications are disabled.
     </div>
   );
diff --git a/apps/web/components/dashboard/bookmarks/AddToListModal.tsx b/apps/web/components/dashboard/bookmarks/AddToListModal.tsx
index b8cce66d..bfe6d53f 100644
--- a/apps/web/components/dashboard/bookmarks/AddToListModal.tsx
+++ b/apps/web/components/dashboard/bookmarks/AddToListModal.tsx
@@ -117,6 +117,11 @@ export default function AddToListModal({
                                     {l.icon} {l.name}
                                   </SelectItem>
                                 ))}
+                                {lists && lists.lists.length == 0 && (
+                                  <SelectItem value="nolist" disabled>
+                                    You don&apos;t currently have any lists.
+                                  </SelectItem>
+                                )}
                               </SelectGroup>
                             </SelectContent>
                           </Select>
diff --git a/apps/web/components/dashboard/bookmarks/BookmarkOptions.tsx b/apps/web/components/dashboard/bookmarks/BookmarkOptions.tsx
index 249946b4..a639b949 100644
--- a/apps/web/components/dashboard/bookmarks/BookmarkOptions.tsx
+++ b/apps/web/components/dashboard/bookmarks/BookmarkOptions.tsx
@@ -35,7 +35,7 @@ export default function BookmarkOptions({ bookmark }: { bookmark: ZBookmark }) {
   const { toast } = useToast();
   const linkId = bookmark.id;
 
-  const demoMode = useClientConfig().demoMode;
+  const demoMode = !!useClientConfig().demoMode;
 
   const { setOpen: setTagModalIsOpen, content: tagModal } =
     useTagModel(bookmark);
diff --git a/apps/web/components/dashboard/bookmarks/TagsEditor.tsx b/apps/web/components/dashboard/bookmarks/TagsEditor.tsx
index e11410b8..ecd6d29c 100644
--- a/apps/web/components/dashboard/bookmarks/TagsEditor.tsx
+++ b/apps/web/components/dashboard/bookmarks/TagsEditor.tsx
@@ -16,27 +16,26 @@ interface EditableTag {
 }
 
 export function TagsEditor({ bookmark }: { bookmark: ZBookmark }) {
-  const demoMode = useClientConfig().demoMode;
+  const demoMode = !!useClientConfig().demoMode;
   const bookmarkInvalidationFunction =
     api.useUtils().bookmarks.getBookmark.invalidate;
 
-  const { mutate, isPending: isMutating } =
-    api.bookmarks.updateTags.useMutation({
-      onSuccess: () => {
-        toast({
-          description: "Tags has been updated!",
-        });
-        bookmarkInvalidationFunction({ bookmarkId: bookmark.id });
-        // TODO(bug) Invalidate the tag views as well
-      },
-      onError: () => {
-        toast({
-          variant: "destructive",
-          title: "Something went wrong",
-          description: "There was a problem with your request.",
-        });
-      },
-    });
+  const { mutate } = api.bookmarks.updateTags.useMutation({
+    onSuccess: () => {
+      toast({
+        description: "Tags has been updated!",
+      });
+      bookmarkInvalidationFunction({ bookmarkId: bookmark.id });
+      // TODO(bug) Invalidate the tag views as well
+    },
+    onError: () => {
+      toast({
+        variant: "destructive",
+        title: "Something went wrong",
+        description: "There was a problem with your request.",
+      });
+    },
+  });
 
   const { data: existingTags, isLoading: isExistingTagsLoading } =
     api.tags.list.useQuery();
@@ -98,7 +97,7 @@ export function TagsEditor({ bookmark }: { bookmark: ZBookmark }) {
       isMulti
       closeMenuOnSelect={false}
       isClearable={false}
-      isLoading={isExistingTagsLoading || isMutating}
+      isLoading={isExistingTagsLoading}
       theme={(theme) => ({
         ...theme,
         // This color scheme doesn't support disabled options.
diff --git a/apps/web/components/signin/SignInForm.tsx b/apps/web/components/signin/SignInForm.tsx
index aa70e207..5991d2f2 100644
--- a/apps/web/components/signin/SignInForm.tsx
+++ b/apps/web/components/signin/SignInForm.tsx
@@ -1,5 +1,7 @@
 import { getProviders } from "next-auth/react";
 
+import serverConfig from "@hoarder/shared/config";
+
 import CredentialsForm from "./CredentialsForm";
 import SignInProviderButton from "./SignInProviderButton";
 
@@ -15,6 +17,13 @@ export default async function SignInForm() {
 
   return (
     <div className="flex flex-col items-center space-y-2">
+      {serverConfig.demoMode && (
+        <div className="mb-1 w-full items-start space-y-1 rounded bg-accent p-3">
+          <p className="text-center font-bold">Demo Mode</p>
+          <p>Email: {serverConfig.demoMode.email} </p>
+          <p>Password: {serverConfig.demoMode.password} </p>
+        </div>
+      )}
       <CredentialsForm />
 
       {providerValues && providerValues.length > 0 && (
diff --git a/apps/web/lib/clientConfig.tsx b/apps/web/lib/clientConfig.tsx
index 10ca1010..d63b169c 100644
--- a/apps/web/lib/clientConfig.tsx
+++ b/apps/web/lib/clientConfig.tsx
@@ -3,7 +3,7 @@ import { createContext, useContext } from "react";
 import type { ClientConfig } from "@hoarder/shared/config";
 
 export const ClientConfigCtx = createContext<ClientConfig>({
-  demoMode: false,
+  demoMode: undefined,
   auth: {
     disableSignups: false,
   },
diff --git a/packages/shared/config.ts b/packages/shared/config.ts
index e12c55c2..4bee1ccf 100644
--- a/packages/shared/config.ts
+++ b/packages/shared/config.ts
@@ -23,7 +23,10 @@ const serverConfig = {
       }
     : undefined,
   logLevel: process.env.LOG_LEVEL ?? "debug",
-  demoMode: (process.env.DEMO_MODE ?? "false") == "true",
+  demoMode: (process.env.DEMO_MODE ?? "false") == "true" ? {
+    email: process.env.DEMO_MODE_EMAIL,
+    password: process.env.DEMO_MODE_PASSWORD,
+  }: undefined,
   dataDir: process.env.DATA_DIR ?? "",
 };