Allow all lists to be public (#259)

cmintey · web-flow · commit 0e91c9aa5097 · 2025-03-13T20:54:44.000-05:00
* Add setting to allow public lists

* allow setting list to public

* update pages to support public lists in wishlist mode

* return public value and fix create
diff --git a/src/ambient.d.ts b/src/ambient.d.ts
@@ -65,6 +65,7 @@ type Config = {
     };
     defaultGroup?: string | null;
     enableDefaultListCreation: boolean;
+    allowPublicLists: boolean;
 };
 
 type Option = {
diff --git a/src/app.postcss b/src/app.postcss
@@ -118,6 +118,10 @@ label:not(.unstyled) {
     @apply space-y-2;
 }
 
+input[type="checkbox"] {
+    @apply disabled:checked:bg-surface-400-500-token disabled:cursor-not-allowed;
+}
+
 /*! purgecss start ignore */
 .ptr--icon,
 .ptr--text {
diff --git a/src/i18n/en.json b/src/i18n/en.json
@@ -31,6 +31,8 @@
         "add-remove-manager-title": "{isManager, select, true {Add} other {Remove}} Manager",
         "admin": "Admin",
         "administration": "Administration",
+        "allow-public-lists": "Allow Public Lists",
+        "allow-public-lists-tooltip": "Allow users to make a list public. Has no effect if the group is in 'Registry' mode.",
         "build": "Build: <a href=\"https://github.com/cmintey/wishlist/commit/{sha}\">{sha}</a>",
         "build-date": "Build Date: {buildDate}",
         "claims": "Claims",
@@ -49,7 +51,7 @@
         "group-settings": "Group Settings",
         "groups": "Groups",
         "id-field": "User Id: {id}",
-        "list-creation": "List Creation",
+        "list-creation": "List Settings",
         "make-admin": "Make Admin",
         "manager": "Manager",
         "members": "Members",
@@ -177,6 +179,7 @@
         "price-must-have-a-currency": "Price must have a currency",
         "product-information-not-available": "Product information not available",
         "public-list-not-found": "Public list not found",
+        "public-lists-not-allowed": "Public lists are not allowed in this group",
         "reset-token-not-found": "Reset token not found",
         "something-went-wrong": "Something went wrong",
         "suggestions-are-disabled": "Suggestions are disabled",
@@ -331,6 +334,7 @@
         "price": "Price",
         "price-high-to-low": "Price: High to Low",
         "price-low-to-high": "Price: Low to High",
+        "public": "Public",
         "public-url": "Public URL",
         "purchased": "Purchased",
         "reorder": "Reorder",
diff --git a/src/lib/components/admin/SettingsForm/Claims.svelte b/src/lib/components/admin/SettingsForm/Claims.svelte
@@ -10,7 +10,7 @@
 </script>
 
 <BaseSetting title={$t("admin.claims")}>
-    <label class="unstyled flex flex-row space-x-2">
+    <label class="unstyled flex flex-row items-center space-x-2">
         <input id="claimsShowName" name="claimsShowName" class="checkbox" type="checkbox" bind:checked={enabled} />
         <span>{$t("admin.show-name")}</span>
     </label>
diff --git a/src/lib/components/admin/SettingsForm/List.svelte b/src/lib/components/admin/SettingsForm/List.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+    import BaseSetting from "./BaseSetting.svelte";
+    import { t } from "svelte-i18n";
+
+    interface Props {
+        creationEnabled: boolean;
+        allowPublic: boolean;
+        listMode: ListMode;
+    }
+
+    let { creationEnabled = $bindable(), allowPublic = $bindable(), listMode }: Props = $props();
+</script>
+
+<BaseSetting title={$t("admin.list-creation")}>
+    <span>{$t("admin.enable-default-list-creation-tooltip")}</span>
+    <label class="unstyled flex flex-row items-center space-x-2">
+        <input
+            id="enableDefaultListCreation"
+            name="enableDefaultListCreation"
+            class="checkbox"
+            type="checkbox"
+            bind:checked={creationEnabled}
+        />
+        <span>{$t("admin.enable-default-list-creation")}</span>
+    </label>
+
+    <span>{$t("admin.allow-public-lists-tooltip")}</span>
+    <label class="unstyled flex flex-row items-center space-x-2">
+        <input
+            id="allowPublicLists"
+            name="allowPublicLists"
+            class="checkbox"
+            class:disabled={listMode === "registry"}
+            checked={allowPublic || listMode === "registry"}
+            disabled={listMode === "registry"}
+            onchange={(e) => (allowPublic = e.currentTarget.checked)}
+            type="checkbox"
+        />
+        <span>{$t("admin.allow-public-lists")}</span>
+    </label>
+</BaseSetting>
diff --git a/src/lib/components/admin/SettingsForm/PublicSignup.svelte b/src/lib/components/admin/SettingsForm/PublicSignup.svelte
@@ -11,7 +11,7 @@
 </script>
 
 <BaseSetting title={$t("admin.public-signup")}>
-    <label class="unstyled flex flex-row space-x-2">
+    <label class="unstyled flex flex-row items-center space-x-2">
         <input id="enableSignup" name="enableSignup" class="checkbox" type="checkbox" bind:checked={enabled} />
         <span>{$t("general.enable")}</span>
     </label>
diff --git a/src/lib/components/admin/SettingsForm/SMTP.svelte b/src/lib/components/admin/SettingsForm/SMTP.svelte
@@ -25,7 +25,7 @@
 </script>
 
 <BaseSetting title={$t("admin.smtp")}>
-    <label class="unstyled flex flex-row space-x-2">
+    <label class="unstyled flex flex-row items-center space-x-2">
         <input id="enableSMTP" name="enableSMTP" class="checkbox" type="checkbox" bind:checked={enabled} />
         <span>{$t("general.enable")}</span>
     </label>
diff --git a/src/lib/components/admin/SettingsForm/Suggestions.svelte b/src/lib/components/admin/SettingsForm/Suggestions.svelte
@@ -11,7 +11,7 @@
 </script>
 
 <BaseSetting title={$t("admin.suggestions")}>
-    <label class="unstyled flex flex-row space-x-2">
+    <label class="unstyled flex flex-row items-center space-x-2">
         <input
             id="enableSuggestions"
             name="enableSuggestions"
diff --git a/src/lib/components/admin/SettingsForm/index.svelte b/src/lib/components/admin/SettingsForm/index.svelte
@@ -8,6 +8,7 @@
     import DefaultGroup from "./DefaultGroup.svelte";
     import Smtp from "./SMTP.svelte";
     import { t } from "svelte-i18n";
+    import List from "./List.svelte";
 
     type Group = {
         id: string;
@@ -52,6 +53,13 @@
     <div class="col-span-1">
         <DefaultGroup {groups} bind:groupId={config.defaultGroup} />
     </div>
+    <div class="col-span-1">
+        <List
+            listMode={config.listMode}
+            bind:creationEnabled={config.enableDefaultListCreation}
+            bind:allowPublic={config.allowPublicLists}
+        />
+    </div>
 
     <div class="col-span-1 md:col-span-2">
         <Smtp
diff --git a/src/lib/components/wishlists/ItemForm.svelte b/src/lib/components/wishlists/ItemForm.svelte
@@ -273,7 +273,7 @@
                     <input
                         id={list.id}
                         name="list"
-                        class="checkbox disabled:checked:bg-surface-400-500-token disabled:cursor-not-allowed"
+                        class="checkbox"
                         checked={listsHavingItem[list.id] !== undefined}
                         disabled={listsHavingItem[list.id] === false}
                         type="checkbox"
diff --git a/src/lib/components/wishlists/ManageListForm.svelte b/src/lib/components/wishlists/ManageListForm.svelte
@@ -8,7 +8,7 @@
     import type { List, User } from "@prisma/client";
     import { getModalStore } from "@skeletonlabs/skeleton";
 
-    interface ListProps extends Partial<Pick<List, "id" | "icon" | "iconColor" | "name">> {
+    interface ListProps extends Partial<Pick<List, "id" | "icon" | "iconColor" | "name" | "public">> {
         owner: Pick<User, "name" | "username" | "picture">;
     }
 
@@ -17,10 +17,12 @@
             list: ListProps;
         };
         persistButtonName: string;
+        listMode: ListMode;
+        allowsPublicLists: boolean;
         editing?: boolean;
     }
 
-    const { data, persistButtonName, editing = false }: Props = $props();
+    const { data, persistButtonName, listMode, allowsPublicLists, editing = false }: Props = $props();
     const modalStore = getModalStore();
 
     let list = $state(data.list);
@@ -71,24 +73,40 @@
         }
     }}
 >
-    <div class="grid grid-cols-1 gap-4 pb-4 md:grid-cols-2">
-        <label class="col-span-1 md:col-span-2" for="name">
-            <span>{$t("auth.name")}</span>
-            <ClearableInput
-                id="name"
-                name="name"
-                class="input"
-                autocomplete="off"
-                clearButtonLabel={$t("a11y.clear-name-field")}
-                onValueClear={() => (list.name = null)}
-                placeholder={$t("wishes.wishes-for", { values: { listOwner: list.owner.name } })}
-                showClearButton={() => list.name !== null}
-                type="text"
-                bind:value={list.name}
-            />
-        </label>
+    <div class="grid grid-cols-12 gap-4 pb-4">
+        <div class="col-span-full flex w-full flex-row flex-wrap gap-4">
+            <label class="flex-grow" for="name">
+                <span>{$t("auth.name")}</span>
+                <ClearableInput
+                    id="name"
+                    name="name"
+                    class="input"
+                    autocomplete="off"
+                    clearButtonLabel={$t("a11y.clear-name-field")}
+                    onValueClear={() => (list.name = null)}
+                    placeholder={$t("wishes.wishes-for", { values: { listOwner: list.owner.name } })}
+                    showClearButton={() => list.name !== null}
+                    type="text"
+                    bind:value={list.name}
+                />
+            </label>
+
+            {#if allowsPublicLists || listMode === "registry"}
+                <label class="unstyled mt-8 flex flex-row items-center space-x-2" for="public">
+                    <input
+                        id="public"
+                        name="public"
+                        class="checkbox"
+                        checked={list.public || listMode === "registry"}
+                        disabled={listMode === "registry"}
+                        type="checkbox"
+                    />
+                    <span>{$t("wishes.public")}</span>
+                </label>
+            {/if}
+        </div>
 
-        <label class="col-span-1 flex flex-col" for="name">
+        <label class="col-span-full flex flex-col md:col-span-4" for="name">
             <span>{$t("general.icon-bg-color")}</span>
             <div class="grid grid-cols-[auto_1fr] gap-2">
                 <input
@@ -114,19 +132,19 @@
                 />
             </div>
         </label>
-        <div class="col-span-1">
+        <div class="col-span-full md:col-span-8">
             <IconSelector id="icon" icon={list.icon} onIconSelected={(icon) => (list.icon = icon)} />
         </div>
 
-        <div class="col-span-1 md:col-span-2">
+        <div class="col-span-full">
             <div class="flex flex-col space-y-2">
                 <span>{$t("wishes.preview")}</span>
                 <ListCard hideCount {list} preventNavigate />
             </div>
         </div>
     </div>
 
-    <div class="flex flex-row justify-between">
+    <div class="flex flex-row flex-wrap justify-between gap-4">
         <button class="variant-ghost-secondary btn w-min" onclick={() => history.back()} type="button">
             {$t("general.cancel")}
         </button>
diff --git a/src/lib/server/config.ts b/src/lib/server/config.ts
@@ -17,7 +17,8 @@ enum ConfigKey {
     LIST_MODE = "listMode",
     SECURITY_PASSWORD_STRENGTH = "security.passwordStrength",
     DEFAULT_GROUP = "defaultGroup",
-    ENABLE_DEFAULT_LIST_CREATION = "enableDefaultListCreation"
+    ENABLE_DEFAULT_LIST_CREATION = "enableDefaultListCreation",
+    ALLOW_PUBLIC_LISTS = "allowPublicLists"
 }
 
 export const getConfig = async (groupId?: string, includeSensitive = false): Promise<Config> => {
@@ -83,7 +84,8 @@ export const getConfig = async (groupId?: string, includeSensitive = false): Pro
             passwordStrength: Number(configMap[ConfigKey.SECURITY_PASSWORD_STRENGTH] || 2)
         },
         defaultGroup: configMap[ConfigKey.DEFAULT_GROUP]!,
-        enableDefaultListCreation: configMap[ConfigKey.ENABLE_DEFAULT_LIST_CREATION] !== "false" // do it this way since we want it to be defaulted to true
+        enableDefaultListCreation: configMap[ConfigKey.ENABLE_DEFAULT_LIST_CREATION] !== "false", // do it this way since we want it to be defaulted to true
+        allowPublicLists: configMap[ConfigKey.ALLOW_PUBLIC_LISTS] === "true"
     };
 
     return config;
@@ -121,7 +123,8 @@ const createDefaultConfig = async (): Promise<void> => {
         security: {
             passwordStrength: 2
         },
-        enableDefaultListCreation: true
+        enableDefaultListCreation: true,
+        allowPublicLists: false
     };
 
     await writeConfig(defaultConfig);
@@ -148,6 +151,7 @@ export const writeConfig = async (config: Partial<Config>, groupId = GLOBAL) =>
     configMap[ConfigKey.SECURITY_PASSWORD_STRENGTH] = config?.security?.passwordStrength.toString();
     configMap[ConfigKey.DEFAULT_GROUP] = config?.defaultGroup;
     configMap[ConfigKey.ENABLE_DEFAULT_LIST_CREATION] = config?.enableDefaultListCreation?.toString();
+    configMap[ConfigKey.ALLOW_PUBLIC_LISTS] = config?.allowPublicLists?.toString();
 
     for (const [key, value] of Object.entries(configMap)) {
         await client.systemConfig.upsert({
diff --git a/src/lib/server/list.ts b/src/lib/server/list.ts
@@ -19,6 +19,7 @@ export interface ListProperties {
     name?: string | null;
     icon?: string | null;
     iconColor?: string | null;
+    public?: boolean;
 }
 
 export const create = async (ownerId: string, groupId: string, otherData?: ListProperties) => {
diff --git a/src/lib/validations.ts b/src/lib/validations.ts
@@ -60,7 +60,8 @@ export const settingSchema = z.object({
     listMode: z.enum(["standard", "registry"]).default("standard"),
     passwordStrength: z.coerce.number().min(-1).max(5).default(2),
     defaultGroup: z.string().optional(),
-    enableDefaultListCreation: z.coerce.boolean().default(true)
+    enableDefaultListCreation: z.coerce.boolean().default(true),
+    allowPublicLists: z.coerce.boolean().default(false)
 });
 
 export const publicListCreateSchema = z.object({
@@ -71,7 +72,8 @@ export const getListPropertiesSchema = () => {
     return z.object({
         name: z.string().trim().nullable(),
         icon: z.string().trim().nullable(),
-        iconColor: z.string().trim().nullable()
+        iconColor: z.string().trim().nullable(),
+        public: z.coerce.boolean().default(false)
     });
 };
 
diff --git a/src/routes/admin/groups/[groupId]/settings/+page.server.ts b/src/routes/admin/groups/[groupId]/settings/+page.server.ts
@@ -58,7 +58,8 @@ export const actions: Actions = {
             enableSuggestions: true,
             claimsShowName: true,
             listMode: true,
-            enableDefaultListCreation: true
+            enableDefaultListCreation: true,
+            allowPublicLists: true
         });
 
         const configData = groupSettingSchema.safeParse(formData);
@@ -82,7 +83,8 @@ export const actions: Actions = {
                 showName: configData.data.claimsShowName
             },
             listMode: configData.data.listMode,
-            enableDefaultListCreation: configData.data.enableDefaultListCreation
+            enableDefaultListCreation: configData.data.enableDefaultListCreation,
+            allowPublicLists: configData.data.allowPublicLists
         };
         await writeConfig(newConfig, params.groupId);
 
diff --git a/src/routes/admin/groups/[groupId]/settings/+page.svelte b/src/routes/admin/groups/[groupId]/settings/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { enhance } from "$app/forms";
     import Claims from "$lib/components/admin/SettingsForm/Claims.svelte";
-    import ListCreation from "$lib/components/admin/SettingsForm/ListCreation.svelte";
+    import List from "$lib/components/admin/SettingsForm/List.svelte";
     import ListMode from "$lib/components/admin/SettingsForm/ListMode.svelte";
     import Suggestions from "$lib/components/admin/SettingsForm/Suggestions.svelte";
     import type { PageData } from "./$types";
@@ -42,7 +42,11 @@
             <Claims bind:enabled={config.claims.showName} />
         </div>
         <div class="col-span-1">
-            <ListCreation bind:enabled={config.enableDefaultListCreation} />
+            <List
+                listMode={config.listMode}
+                bind:creationEnabled={config.enableDefaultListCreation}
+                bind:allowPublic={config.allowPublicLists}
+            />
         </div>
     </div>
 
diff --git a/src/routes/admin/settings/+page.server.ts b/src/routes/admin/settings/+page.server.ts
@@ -95,7 +95,8 @@ const generateConfig = (configData: z.infer<typeof settingSchema>) => {
             passwordStrength: configData.passwordStrength
         },
         defaultGroup: configData.defaultGroup,
-        enableDefaultListCreation: configData.enableDefaultListCreation
+        enableDefaultListCreation: configData.enableDefaultListCreation,
+        allowPublicLists: configData.allowPublicLists
     };
 
     return newConfig;
diff --git a/src/routes/lists/[id]/+page.server.ts b/src/routes/lists/[id]/+page.server.ts
diff --git a/src/routes/lists/[id]/+page.svelte b/src/routes/lists/[id]/+page.svelte
diff --git a/src/routes/lists/[id]/events/+server.ts b/src/routes/lists/[id]/events/+server.ts
diff --git a/src/routes/lists/[id]/manage/+page.server.ts b/src/routes/lists/[id]/manage/+page.server.ts
diff --git a/src/routes/lists/[id]/manage/+page.svelte b/src/routes/lists/[id]/manage/+page.svelte
diff --git a/src/routes/lists/create/+page.server.ts b/src/routes/lists/create/+page.server.ts
diff --git a/src/routes/lists/create/+page.svelte b/src/routes/lists/create/+page.svelte
