refactor(dashboard): re-organize dashboard files

dashboard/src/routes/Dash/Dash.svelte

@@ -0,0 +1,105 @@
+<script lang="ts">
+    import { Container, Col, Row, TabContent, TabPane } from 'sveltestrap';
+    import { navigate, useLocation } from "svelte-navigator";
+    import { currentUser, loggedIn } from '../../stores';
+    
+    import SystemMain from '../../components/system/Main.svelte';
+    import List from '../../components/list/List.svelte';
+
+    import { System } from '../../api/types';
+    import api from '../../api';
+
+    // get the state from the navigator so that we know which tab to start on
+    let location = useLocation();
+    let params = $location.search && new URLSearchParams($location.search);
+    
+    let tabPane: string|number = params && params.get("tab") || "system";
+    let listView: string = params && params.get("view") || "list";
+
+    // change the URL when changing tabs
+    function navigateTo(tab: string|number, view: string) {
+        let url = "./dash";
+        if (tab || view) url += "?";
+        if (tab) url += `tab=${tab}`
+        if (tab && view) url += "&";
+        if (view) url += `view=${view}`
+
+        navigate(url);
+        tabPane = tab;
+    }
+
+    // subscribe to the cached user in the store
+    let current;
+    currentUser.subscribe(value => {
+        current = value;
+    });
+    
+    // if there is no cached user, get the user from localstorage
+    let user: System = current ?? JSON.parse(localStorage.getItem("pk-user"));
+    // since the user in localstorage can be outdated, fetch the user from the api again
+    if (!current) {
+        login(localStorage.getItem("pk-token"));
+    }
+
+    // if there's no user, and there's no token, assume the login failed and send us back to the homepage.
+    if (!localStorage.getItem("pk-token") && !user) {
+        navigate("/");
+    }
+
+    let settings = JSON.parse(localStorage.getItem("pk-settings"));
+
+    // just the login function
+    async function login(token: string) {
+        try {
+            if (!token) {
+                throw new Error("Token cannot be empty.")
+            }
+            const res: System = await api().systems("@me").get({ token });
+            localStorage.setItem("pk-token", token);
+            localStorage.setItem("pk-user", JSON.stringify(res));
+            loggedIn.update(() => true);
+            currentUser.update(() => res);
+            user = res;
+        } catch (error) {
+            console.log(error);
+            // localStorage.removeItem("pk-token");
+            // localStorage.removeItem("pk-user");
+            // currentUser.update(() => null);
+            navigate("/");
+        }
+    }
+    
+    // some values that get passed from the member to the group components and vice versa
+    let members = [];
+    let groups = [];
+
+</script>
+
+<!-- display the banner if there's a banner set, and if the current settings allow for it-->
+{#if user && user.banner && ((settings && settings.appearance.banner_top) || !settings)}
+<div class="banner" style="background-image: url({user.banner})" />
+{/if}
+{#if user}
+<Container>
+    <Row>
+        <Col class="mx-auto" xs={12} lg={11} xl={10}>
+            <h2 class="visually-hidden">Viewing your own system</h2>
+            <TabContent class="mt-3" on:tab={(e) => navigateTo(e.detail, listView)}>
+                <TabPane tabId="system" tab="System" active={tabPane === "system"}>
+                        <SystemMain bind:user={user} isPublic={false} />
+                </TabPane>
+                <TabPane tabId="members" tab="Members" active={tabPane === "members"}>
+                        <List on:viewChange={(e) => navigateTo("members", e.detail)} bind:groups={groups} bind:members={members} isPublic={false} itemType={"member"} bind:view={listView} isDash={true} />
+                </TabPane>
+                <TabPane tabId="groups" tab="Groups" active={tabPane === "groups"}>
+                    <List on:viewChange={(e) => navigateTo("members", e.detail)} bind:members={members} bind:groups={groups} isPublic={false} itemType={"group"} bind:view={listView} isDash={true} />
+            </TabPane> 
+            </TabContent>
+        </Col>
+    </Row>
+</Container>
+{/if}
+
+<svelte:head>
+    <title>PluralKit | dash</title>
+</svelte:head>

dashboard/src/routes/Dash/Group/Group.svelte

@@ -0,0 +1,212 @@
+<script lang="ts">
+    import { Container, Row, Col, Alert, Spinner, Card, CardHeader, CardBody, CardTitle, Tooltip } from "sveltestrap";
+    import Body from '../../../components/group/Body.svelte';
+    import { useParams, Link, navigate, useLocation } from 'svelte-navigator';
+    import { onMount } from 'svelte';
+    import api from "../../../api";
+    import { Member, Group } from "../../../api/types";
+    import CardsHeader from "../../../components/common/CardsHeader.svelte";
+    import FaUsers from 'svelte-icons/fa/FaUsers.svelte';
+    import FaList from 'svelte-icons/fa/FaList.svelte';
+    import ListPagination from '../../../components/common/ListPagination.svelte';
+    import ListView from '../../../components/list/ListView.svelte';
+    import CardView from '../../../components/list/CardView.svelte';
+
+    // get the state from the navigator so that we know which tab to start on
+    let location = useLocation();
+    let urlParams = $location.search && new URLSearchParams($location.search);
+    
+    let listView: string = urlParams && urlParams.get("view") || "list";
+
+    let loading = true;
+    let memberLoading = false;
+    let params = useParams();
+    let err = "";
+    let memberErr = "";
+    let group: Group;
+    let members: Member[] = [];
+    let systemMembers: Group[] = [];
+    let isDeleted = false;
+    let notOwnSystem = false;
+    let copied = false;
+
+    const isPage = true;
+    export let isPublic = true;
+    let settings = JSON.parse(localStorage.getItem("pk-settings"));
+
+    let currentPage = 1;
+    let itemsPerPage = listView === "card" ? 12 : settings && settings.accessibility && settings.accessibility.expandedcards ? 5 : 10;
+
+    $: indexOfLastItem = currentPage * itemsPerPage;
+    $: indexOfFirstItem = indexOfLastItem - itemsPerPage;
+    $: pageAmount = Math.ceil(members.length / itemsPerPage);
+
+    $: orderedMembers = members.sort((a, b) => a.name.localeCompare(b.name));
+    $: slicedMembers = orderedMembers.slice(indexOfFirstItem, indexOfLastItem);
+
+    if (!isPublic && isPage) {
+        let user = localStorage.getItem("pk-user");
+        if (!user) navigate("/");
+    }
+
+    onMount(() => {
+        fetchGroup();
+    });
+
+    let title = isPublic ? "group" : "group (dash)";
+
+    async function fetchGroup() {
+        try {
+            group = await api().groups($params.id).get({auth: !isPublic});
+            if (!isPublic && !group.privacy) {
+                notOwnSystem = true;
+                throw new Error("Group is not from own system.");
+            }
+            err = "";
+            loading = false;
+            if (group.name) {
+                title = isPublic ? group.name : `${group.name} (dash)`;
+            }
+            memberLoading = true;
+            await new Promise(resolve => setTimeout(resolve, 1000));
+            fetchMembers();
+        } catch (error) {
+            console.log(error);
+            err = error.message;
+            loading = false;
+        }
+    }
+
+    async function fetchMembers() {
+        try {
+            members = await api().groups($params.id).members().get({auth: !isPublic});
+            group.members = members.map(function(member) {return member.uuid});
+            if (!isPublic) {
+                await new Promise(resolve => setTimeout(resolve, 1000));
+                systemMembers = await api().systems("@me").members.get({ auth: true });
+            }
+            memberErr = "";
+            memberLoading = false;
+        } catch (error) {
+            console.log(error);
+            memberErr = error.message;
+            memberLoading = false;
+        }
+    }
+
+    async function updateMembers() {
+      memberLoading = true;
+      await new Promise(resolve => setTimeout(resolve, 500));
+      fetchMembers();
+    }
+
+    function updateDelete() {
+        isDeleted = true;
+    }
+    
+    function updateMemberList(event: any) {
+        members = members.map(member => member.id !== event.detail.id ? member : event.detail);
+        systemMembers = systemMembers.map(member => member.id !== event.detail.id ? member : event.detail);
+    }
+
+    function deleteMemberFromList(event: any) {
+        members = members.filter(member => member.id !== event.detail);
+        systemMembers = systemMembers.filter(member => member.id !== event.detail);
+  }
+
+    async function copyShortLink(event?) {
+        if (event) {
+            let ctrlDown = event.ctrlKey||event.metaKey; // mac support
+            if (!(ctrlDown && event.key === "c") && event.key !== "Enter") return;
+        }
+        try {
+            await navigator.clipboard.writeText(`https://pk.mt/g/${group.id}`);
+            copied = true;
+            await new Promise(resolve => setTimeout(resolve, 2000));
+            copied = false;
+        } catch (error) {
+            console.log(error);
+        }
+    }
+</script>
+
+{#if settings && settings.appearance.color_background && !notOwnSystem}
+    <div class="background" style="background-color: {group && `#${group.color}`}"></div>
+{/if}
+{#if group && group.banner && settings && settings.appearance.banner_top && !notOwnSystem}
+<div class="banner" style="background-image: url({group.banner})" />
+{/if}
+<Container>
+    <Row>
+        <Col class="mx-auto" xs={12} lg={11} xl={10}>
+            <h2 class="visually-hidden">Viewing {isPublic ? "a public" : "your own"} group</h2>
+            {#if isDeleted}
+                <Alert color="success">Group has been successfully deleted. <Link to="/dash">Return to dash</Link></Alert>
+            {:else}
+            {#if isPublic}
+                <Alert color="info" aria-hidden>You are currently <b>viewing</b> a group.</Alert>
+            {/if}
+            {#if notOwnSystem}
+                <Alert color="danger">This group does not belong to your system, did you mean to look up <Link to={`/profile/g/${group.id}`}>it's public page</Link>?</Alert>
+            {:else if err}
+                <Alert color="danger">{@html err}</Alert>
+            {:else if loading}
+                <Spinner/>
+            {:else if group && group.id}
+                <Card class="mb-4">
+                    <CardHeader>
+                        <CardsHeader bind:item={group}>
+                            <div slot="icon" style="cursor: pointer;" id={`group-copy-${group.id}`} on:click|stopPropagation={() => copyShortLink()} on:keydown={(e) => copyShortLink(e)} tabindex={0} >
+                                <FaUsers slot="icon" />
+                            </div>
+                        </CardsHeader>
+                        <Tooltip placement="top" target={`group-copy-${group.id}`}>{copied ? "Copied!" : "Copy public link"}</Tooltip>
+                    </CardHeader>
+                    <CardBody>
+                        <Body on:deletion={updateDelete} on:updateMembers={updateMembers} bind:members={systemMembers} bind:group={group} isPage={isPage} isPublic={isPublic}/>
+                    </CardBody>
+                </Card>
+            {/if}
+            {#if memberLoading}
+                <Alert color="primary"><Spinner size="sm" /> Fetching members...</Alert>
+            {:else if memberErr}
+                <Alert color="danger">{memberErr}</Alert>
+            {:else if members && members.length > 0}
+            <Card class="mb-2">
+                <CardHeader>
+                    <CardTitle style="margin-top: 8px; outline: none;">
+                        <div class="icon d-inline-block">
+                            <FaList />
+                        </div> Group list
+                    </CardTitle>
+                </CardHeader>
+            </Card>
+            <ListPagination bind:currentPage bind:pageAmount />
+                {#if listView === "card"}
+                <CardView list={slicedMembers} {isPublic} itemType="member" isDash={false} />
+                {:else}
+                <ListView on:deletion={(e) => deleteMemberFromList(e)} bind:list={slicedMembers} isPublic={isPublic} itemType="member" itemsPerPage={itemsPerPage} currentPage={currentPage} fullLength={members.length} />
+                <ListPagination bind:currentPage bind:pageAmount />
+                {/if}
+            {/if}
+            {/if}
+        </Col>
+    </Row>
+</Container>
+
+<style>
+    .background {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        flex: 1;
+        min-height: 100%;
+        z-index: -30;
+    }
+</style>
+
+<svelte:head>
+    <title>PluralKit | {title}</title>
+</svelte:head>
+

dashboard/src/routes/Dash/Member/Member.svelte

@@ -0,0 +1,212 @@
+<script lang="ts">
+    import { Container, Row, Col, Alert, Spinner, Card, CardHeader, CardBody, CardTitle, Tooltip } from "sveltestrap";
+    import Body from '../../../components/member/Body.svelte';
+    import ListView from '../../../components/list/ListView.svelte';
+    import { useParams, Link, navigate, useLocation } from 'svelte-navigator';
+    import { onMount } from 'svelte';
+    import api from "../../../api";
+    import { Member, Group } from "../../../api/types";
+    import CardsHeader from "../../../components/common/CardsHeader.svelte";
+    import FaAddressCard from 'svelte-icons/fa/FaAddressCard.svelte'
+    import FaList from 'svelte-icons/fa/FaList.svelte'
+    import ListPagination from '../../../components/common/ListPagination.svelte';
+    import CardView from '../../../components/list/CardView.svelte';
+
+    // get the state from the navigator so that we know which tab to start on
+    let location = useLocation();
+    let urlParams = $location.search && new URLSearchParams($location.search);
+    
+    let listView: string = urlParams && urlParams.get("view") || "list";
+
+    let loading = true;
+    let groupLoading = false;
+    let params = useParams();
+    let err = "";
+    let groupErr = "";
+    let member: Member;
+    let groups: Group[] = [];
+    let systemGroups: Group[] = [];
+    let systemMembers: Member[] = [];
+    let isDeleted = false;
+    let notOwnSystem = false;
+    let copied = false;
+
+    const isPage = true;
+    export let isPublic = true;
+    let settings = JSON.parse(localStorage.getItem("pk-settings"));
+
+    let currentPage = 1;
+    let itemsPerPage = listView === "card" ? 12 : settings && settings.accessibility && settings.accessibility.expandedcards ? 5 : 10;
+
+    $: indexOfLastItem = currentPage * itemsPerPage;
+    $: indexOfFirstItem = indexOfLastItem - itemsPerPage;
+    $: pageAmount = Math.ceil(groups.length / itemsPerPage);
+
+    $: orderedGroups = groups.sort((a, b) => a.name.localeCompare(b.name));
+    $: slicedGroups = orderedGroups.slice(indexOfFirstItem, indexOfLastItem);
+
+    if (!isPublic && isPage) {
+        let user = localStorage.getItem("pk-user");
+        if (!user) navigate("/");
+    }
+
+    onMount(() => {
+        fetchMember();
+    });
+
+    let title = isPublic ? "member" : "member (dash)";
+
+    async function fetchMember() {
+        try {
+            member = await api().members($params.id).get({auth: !isPublic});
+            if (!isPublic && !member.privacy) {
+                notOwnSystem = true;
+                throw new Error("Member is not from own system.");
+            }
+            err = "";
+            loading = false;
+            if (member.name) {
+                title = isPublic ? member.name : `${member.name} (dash)`;
+            }
+            groupLoading = true;
+            await new Promise(resolve => setTimeout(resolve, 1000));
+            fetchGroups();
+        } catch (error) {
+            console.log(error);
+            err = error.message;
+            loading = false;
+        }
+    }
+
+    async function fetchGroups() {
+        try {
+            groups = await api().members($params.id).groups().get({auth: !isPublic, query: { with_members: !isPublic } });
+            if (!isPublic) {
+                await new Promise(resolve => setTimeout(resolve, 1000));
+                systemGroups = await api().systems("@me").groups.get({ auth: true, query: { with_members: true } });
+            }
+            groupErr = "";
+            groupLoading = false;
+            // we can't use with_members from a group list from a member endpoint yet, but I'm leaving this in in case we do
+            // (this is needed for editing a group member list from the member page)
+            /* if (!isPublic) {
+                await new Promise(resolve => setTimeout(resolve, 1000));
+                systemMembers = await api().systems("@me").members.get({auth: true});
+            } */
+        } catch (error) {
+            console.log(error);
+            groupErr = error.message;
+            groupLoading = false;
+        }
+    }
+
+    async function updateGroups() {
+      groupLoading = true;
+      await new Promise(resolve => setTimeout(resolve, 500));
+      fetchGroups();
+    }
+
+    function updateDelete() {
+        isDeleted = true;
+    }
+    
+    function deleteGroupFromList(event: any) {
+        groups = groups.filter(group => group.id !== event.detail);
+        systemGroups = systemGroups.filter(group => group.id !== event.detail);
+  }
+
+    async function copyShortLink(event?) {
+        if (event) {
+            let ctrlDown = event.ctrlKey||event.metaKey; // mac support
+            if (!(ctrlDown && event.key === "c") && event.key !== "Enter") return;
+        }
+        try {
+            await navigator.clipboard.writeText(`https://pk.mt/m/${member.id}`);
+            copied = true;
+            await new Promise(resolve => setTimeout(resolve, 2000));
+            copied = false;
+        } catch (error) {
+            console.log(error);
+        }
+    }
+</script>
+
+{#if settings && settings.appearance.color_background && !notOwnSystem}
+    <div class="background" style="background-color: {member && `#${member.color}`}"></div>
+{/if}
+{#if member && member.banner && settings && settings.appearance.banner_top && !notOwnSystem}
+<div class="banner" style="background-image: url({member.banner})" />
+{/if}
+<Container>
+    <Row>
+        <Col class="mx-auto" xs={12} lg={11} xl={10}>
+            <h2 class="visually-hidden">Viewing {isPublic ? "a public" : "your own"} member</h2>
+            {#if isDeleted}
+                <Alert color="success">Member has been successfully deleted. <Link to="/dash">Return to dash</Link></Alert>
+            {:else}
+            {#if isPublic}
+                <Alert color="info" aria-hidden>You are currently <b>viewing</b> a member.</Alert>
+            {/if}
+            {#if notOwnSystem}
+                <Alert color="danger">This member does not belong to your system, did you mean to look up <Link to={`/profile/m/${member.id}`}>their public page</Link>?</Alert>
+            {:else if err}
+                <Alert color="danger">{@html err}</Alert>
+            {:else if loading}
+                <Spinner/>
+            {:else if member && member.id}
+                <Card class="mb-4">
+                    <CardHeader>
+                        <CardsHeader bind:item={member}>
+                            <div slot="icon" style="cursor: pointer;" id={`member-copy-${member.id}`} on:click|stopPropagation={() => copyShortLink()} on:keydown={(e) => copyShortLink(e)} tabindex={0} >
+                                <FaAddressCard slot="icon" />
+                            </div>
+                        </CardsHeader>
+                        <Tooltip placement="top" target={`member-copy-${member.id}`}>{copied ? "Copied!" : "Copy public link"}</Tooltip>
+                    </CardHeader>
+                    <CardBody>
+                        <Body on:deletion={updateDelete} on:updateGroups={updateGroups} bind:groups={systemGroups} bind:member={member} isPage={isPage} isPublic={isPublic}/>
+                    </CardBody>
+                </Card>
+            {/if}
+            {#if groupLoading}
+                <Alert color="primary"><Spinner size="sm" /> Fetching groups...</Alert>
+            {:else if groupErr}
+                <Alert color="danger">{groupErr}</Alert>
+            {:else if groups && groups.length > 0}
+            <Card class="mb-2">
+                <CardHeader>
+                    <CardTitle style="margin-top: 8px; outline: none;">
+                        <div class="icon d-inline-block">
+                            <FaList />
+                        </div> Member groups
+                    </CardTitle>
+                </CardHeader>
+            </Card>
+            <ListPagination bind:currentPage bind:pageAmount />
+                {#if listView === "card"}
+                <CardView list={slicedGroups} {isPublic} itemType="group" isDash={false} />
+                {:else}
+                <ListView on:deletion={(e) => deleteGroupFromList(e)} bind:list={slicedGroups} isPublic={isPublic} itemType="group" itemsPerPage={itemsPerPage} currentPage={currentPage} fullLength={groups.length} />
+                <ListPagination bind:currentPage bind:pageAmount />
+                {/if}
+            {/if}
+            {/if}
+        </Col>
+    </Row>
+</Container>
+
+<style>
+    .background {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        flex: 1;
+        min-height: 100%;
+        z-index: -30;
+    }
+</style>
+
+<svelte:head>
+    <title>PluralKit | {title}</title>
+</svelte:head>

dashboard/src/routes/Dash/Profile.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+    import { Container, Col, Row, TabContent, TabPane, Alert, Spinner } from 'sveltestrap';
+    import { useParams, useLocation, navigate } from "svelte-navigator";
+    import { onMount } from 'svelte';
+    
+    import SystemMain from '../../components/system/Main.svelte';
+    import List from '../../components/list/List.svelte';
+    
+    import { System } from '../../api/types';
+    import api from '../../api';
+
+    let user: System = {};
+    let settings = JSON.parse(localStorage.getItem("pk-settings"));
+
+    let members = [];
+    let groups = [];
+
+    let params = useParams();
+    $: id = $params.id;
+    
+    let location = useLocation();
+    let urlParams = $location.search && new URLSearchParams($location.search);
+    
+    let tabPane: string|number = urlParams && urlParams.get("tab") || "system";
+    let listView: string = urlParams && urlParams.get("view") || "list";
+
+    // change the URL when changing tabs
+    function navigateTo(tab: string|number, view: string) {
+        let url = `./${id}`;
+        if (tab || view) url += "?";
+        if (tab) url += `tab=${tab}`
+        if (tab && view) url += "&";
+        if (view) url += `view=${view}`
+
+        navigate(url);
+        tabPane = tab;
+    }
+    
+    let err: string;
+    
+    let title = "system"
+
+    onMount(() => {
+        getSystem();
+    })
+
+    async function getSystem() {
+        try {
+            let res: System = await api().systems(id).get();
+            user = res;
+            title = user.name ? user.name : "system";
+        } catch (error) {
+            console.log(error);
+            err = error.message;
+        }
+    }
+
+</script>
+
+<!-- display the banner if there's a banner set, and if the current settings allow for it-->
+{#if user && user.banner && ((settings && settings.appearance.banner_top) || !settings)}
+<div class="banner" style="background-image: url({user.banner})" />
+{/if}
+<Container>
+    <Row>
+        <h1 class="visually-hidden">Viewing a public system</h1>
+        <Col class="mx-auto" xs={12} lg={11} xl={10}>
+            {#if !user.id && !err}
+            <div class="mx-auto text-center">
+                <Spinner class="d-inline-block" />
+            </div>
+            {:else if err}
+                <Alert color="danger">{err}</Alert>
+            {:else}
+            <Alert color="info" aria-hidden>You are currently <b>viewing</b> a system.</Alert>
+            <TabContent class="mt-3" on:tab={(e) => navigateTo(e.detail, listView)}>
+                <TabPane tabId="system" tab="System" active={tabPane === "system"}>
+                        <SystemMain bind:user isPublic={true} />
+                </TabPane>
+                <TabPane tabId="members" tab="Members" active={tabPane === "members"}>
+                        <List on:viewChange={(e) => navigateTo("members", e.detail)} members={members} groups={groups} isPublic={true} itemType={"member"} bind:view={listView} isDash={false}/>
+                </TabPane>
+                <TabPane tabId="groups" tab="Groups" active={tabPane === "groups"}>
+                    <List on:viewChange={(e) => navigateTo("groups", e.detail)} members={members} groups={groups} isPublic={true} itemType={"group"} bind:view={listView} isDash={false} />
+            </TabPane> 
+            </TabContent>
+            {/if}
+        </Col>
+    </Row>
+</Container>
+
+<svelte:head>
+    <title>PluralKit | {title}</title>
+</svelte:head>

dashboard/src/routes/Dash/Random.svelte

@@ -0,0 +1,213 @@
+<script lang="ts">
+    import { onMount } from 'svelte';
+    import { Link, useLocation, useParams, navigate } from 'svelte-navigator';
+    import { Alert, Col, Container, Row, Card, CardBody, CardHeader, CardTitle, Input, Label, Button, Accordion, AccordionHeader, AccordionItem } from 'sveltestrap';
+    import FaRandom from 'svelte-icons/fa/FaRandom.svelte'
+    
+    import CardsList from '../../components/list/ListView.svelte';
+    import api from '../../api';
+    import { Group, Member } from '../../api/types';
+
+    export let isPublic: boolean = false;
+    export let type: string = "member";
+    export let pickFromGroup: boolean = false;
+
+    let list: Member[]|Group[] = [];
+    let randomList: Member[]|Group[] = [];
+    
+    let loading = true;
+    let err: string;
+
+    let params = useParams();
+    $: id = $params.id;
+    $: groupId = $params.groupId;
+
+    let location = useLocation();
+    let searchParams = $location.search && new URLSearchParams($location.search);
+
+    let path = $location.pathname;
+
+    let amount: number = 1;
+
+    if (searchParams && searchParams.get("amount")) {
+        amount = parseInt(searchParams.get("amount"));
+        if (amount === NaN) amount = 1;
+        else if (amount > 5) amount = 5;
+    }
+
+    let usePrivateItems = false;
+
+    if (searchParams && searchParams.get("all") === "true") usePrivateItems = true;
+
+    let allowDoubles = false;
+    if (searchParams && searchParams.get("doubles") === "true") allowDoubles = true;
+
+    // just a hidden option to expand the cards by default regardless of your global settings
+    let openByDefault = false;
+    if (searchParams && searchParams.get("open") === "true") openByDefault = true;
+    
+    let rollCounter = 1;
+
+    onMount(async () => {
+        await fetchList(amount, usePrivateItems);
+    });
+
+    async function fetchList(amount: number, usePrivateMembers?: boolean|string) {
+        err = "";
+        loading = true;
+        try {
+            if (type === "member") { 
+                if (pickFromGroup) {
+                    const res: Member[] = await api().groups(groupId).members.get({auth: !isPublic});
+                    list = res;
+                } else {
+                    const res: Member[] = await api().systems(isPublic ? id : "@me").members.get({ auth: !isPublic });
+                    list = res;
+                }
+            }
+            else if (type === "group") {
+                const res: Group[] = await api().systems(isPublic ? id : "@me").groups.get({ auth: !isPublic });
+                list = res;
+            }
+            else throw new Error(`Unknown list type ${type}`);
+            randomList = randomizeList(amount, usePrivateMembers, allowDoubles);
+        } catch (error) {
+            console.log(error);
+            err = error.message;
+        }
+        loading = false;
+    }
+
+    function randomizeList(amount: number, usePrivateMembers?: boolean|string, allowDoubles?: boolean|string) {
+        err = "";
+        let filteredList = [...list];
+        if (!isPublic && (!usePrivateMembers || usePrivateMembers === "false")) filteredList = (list as Member[]).filter(item => item.privacy && item.privacy.visibility === "public" ? true : false);
+
+        let cappedAmount = amount;
+        if (amount > filteredList.length) cappedAmount = filteredList.length;
+
+        if (cappedAmount === 0) err = `No valid ${type}s could be randomized. ${!isPublic ? `If every ${type} is privated, roll again with private ${type}s included.` : ""}`;
+
+        let tempList = [];
+        for (let i = 0; i < cappedAmount; i++) {
+            let index = Math.floor(Math.random() * filteredList.length);
+            tempList.push(filteredList[index]);
+           
+            if (!allowDoubles || allowDoubles === "false") {
+                filteredList.splice(index, 1);
+            }
+        }
+        return tempList;
+    }
+
+    function rerollList() {
+        let amount = parseInt(optionAmount);
+        let paramArray = [];
+        if (amount > 1) paramArray.push(`amount=${amount}`);
+        if (optionAllowDoubles === "true") paramArray.push("doubles=true");
+        if (optionUsePrivateItems === "true") paramArray.push("all=true");
+        if (openByDefault === true) paramArray.push("open=true");
+        
+        randomList = randomizeList(parseInt(optionAmount), optionUsePrivateItems, optionAllowDoubles);
+        navigate(`${path}${paramArray.length > 0 ? `?${paramArray.join('&')}` : ""}`);
+        rollCounter ++;
+    }
+
+    function capitalizeFirstLetter(string: string) {
+        return string.charAt(0).toUpperCase() + string.slice(1);
+    }
+    
+    let optionAmount = amount.toString();
+    
+    let optionUsePrivateItems = "false";
+    if (usePrivateItems === true) optionUsePrivateItems = "true";
+
+    let optionAllowDoubles = "false";
+    if (allowDoubles === true) optionAllowDoubles = "true";
+
+    function getItemLink(item: Member | Group): string {
+        let url: string;
+
+        if (isPublic) url = "/dash/";
+        else url = "/profile/";
+        
+        if (type === "member") url += "m/";
+        else if (type === "group") url += "g/";
+
+        url += item.id;
+
+        return url;
+    }
+
+    function getBackUrl() {
+        let str: string;
+        if (isPublic)  { 
+            str = "/profile";
+            if (!pickFromGroup) str += `/s/${id}`;
+        } else str = "/dash"
+        
+        if (pickFromGroup) str += `/g/${groupId}`;
+
+        return str;
+    }
+</script>
+
+<Container>
+    <Row>
+        <Col class="mx-auto" xs={12} lg={11} xl={10}>
+            <Card class="mb-4">
+                <CardHeader>
+                    <CardTitle style="margin-top: 8px; outline: none;">
+                    <div class="icon d-inline-block">
+                        <FaRandom />
+                    </div>Randomize {capitalizeFirstLetter(type)}s {isPublic && id ? `(${id})` : pickFromGroup ? `(${groupId})` : ""}</CardTitle>
+                </CardHeader>
+                <CardBody>
+                    <Row>
+                        <Col xs={12} lg={4} class="mb-2">
+                            <Label>Amount:</Label>
+                            <Input bind:value={optionAmount} type="select" aria-label="amount">
+                                <option default={amount === 1}>1</option>
+                                <option default={amount === 2}>2</option>
+                                <option default={amount === 3}>3</option>
+                                <option default={amount === 4}>4</option>
+                                <option default={amount === 5}>5</option>
+                            </Input>
+                        </Col>
+                        <Col xs={12} lg={4} class="mb-2">
+                            <Label>Allow duplicates:</Label>
+                            <Input bind:value={optionAllowDoubles} type="select" aria-label="allow duplicates">
+                                <option value="false" default={allowDoubles === false}>no</option>
+                                <option value="true" default={allowDoubles === true}>yes</option>
+                            </Input>
+                        </Col>
+                        {#if !isPublic}
+                        <Col xs={12} lg={4} class="mb-2">
+                            <Label>Use all {type}s:</Label>
+                            <Input bind:value={optionUsePrivateItems} type="select" aria-label="include private members">
+                                <option value="false" default={usePrivateItems === false}>no (only public {type}s)</option>
+                                <option value="true" default={usePrivateItems === true}>yes (include private {type}s)</option>
+                            </Input>
+                        </Col>
+                        {/if}
+                    </Row>
+                    <Button color="primary" on:click={() => {rerollList()}}>
+                        Reroll list
+                    </Button>
+                    <Link to={getBackUrl()}>
+                        <Button color="secondary" tabindex={-1} aria-label={`back to ${pickFromGroup ? "group" : "system"}`}>
+                            Back to {pickFromGroup ? "group" : "system"}
+                        </Button>
+                    </Link>
+                </CardBody>
+            </Card>
+            {#if loading}
+                <span>loading...</span>
+            {:else if err}
+                <Alert color="danger">{err}</Alert>
+            {:else}
+                <CardsList openByDefault={openByDefault} bind:list={randomList} isPublic={true} itemType={type} itemsPerPage={5} currentPage={rollCounter} fullLength={5 * rollCounter - (5 - randomList.length)} />
+            {/if}
+        </Col>
+    </Row>
+</Container>

dashboard/src/routes/Dash/System/BulkGroupPrivacy.svelte

@@ -0,0 +1,109 @@
+<script lang="ts">
+    import { Container, Row, Col, Card, CardHeader, CardBody, CardTitle, Alert, Label, Input, Button, Spinner } from 'sveltestrap';
+    import { navigate } from 'svelte-navigator';
+	import FaUserLock from 'svelte-icons/fa/FaUserLock.svelte';
+
+	import api from '../../../api';
+    import { GroupPrivacy, System } from '../../../api/types';
+	const user: System = JSON.parse(localStorage.getItem("pk-user"));
+
+	if (!user) navigate('/');
+
+	// const capitalize = (str: string) => str[0].toUpperCase() + str.substr(1);
+
+	let loading = false;
+	let err = "";
+	let success = false;
+
+	// kinda hacked together from typescript's Required<T> type
+	const privacy: { [P in keyof GroupPrivacy]-?: string; } = {
+		description_privacy:  "no change",
+		name_privacy: "no change",
+		list_privacy: "no change",
+		icon_privacy: "no change",
+		visibility: "no change",
+		metadata_privacy: "no change",
+	};
+
+	const privacyNames: { [P in keyof GroupPrivacy]-?: string; } = {
+		name_privacy: "Name",
+		description_privacy:  "Description",
+		icon_privacy: "Icon",
+		list_privacy: "Member list",
+		metadata_privacy: "Metadata",
+		visibility: "Visbility",
+	};
+
+	async function submit() {
+		success = false;
+		loading = true;
+		const dataArray = Object.entries(privacy).filter(([, value]) => value === "no change" ? false : true);
+		const data = Object.fromEntries(dataArray);
+		try {
+			await api().private.bulk_privacy.group.post({ data });
+			success = true;
+		} catch (error) {
+			console.log(error);
+			err = error.message;
+		}
+		loading = false;
+	}
+
+	function changeAll(e: Event) {
+		const target = e.target as HTMLInputElement;
+		Object.keys(privacy).forEach(x => privacy[x] = target.value);
+	}
+</script>
+
+{#if user}
+<Container>
+    <Row>
+        <Col class="mx-auto" xs={12} lg={11} xl={10}>
+			<Card class="mb-4">
+				<CardHeader>
+					<CardTitle style="margin-top: 8px; outline: none;">
+						<div class="icon d-inline-block">
+							<FaUserLock />
+						</div> Bulk group privacy
+					</CardTitle>
+				</CardHeader>
+				<CardBody style="border-left: 4px solid #{user.color}">
+					{#if err}
+					<Alert color="danger">{err}</Alert>
+					{/if}
+					{#if success}
+					<Alert color="success">Group privacy updated!</Alert>
+					{/if}
+					<Label><b>Set all to:</b></Label>
+					<Input type="select" on:change={(e) => changeAll(e)} aria-label="set all to">
+						<option>no change</option>
+						<option>public</option>
+						<option>private</option>
+					</Input>
+					<hr/>
+					<Row>
+						{#each Object.keys(privacy) as x}
+						<Col xs={12} lg={6} class="mb-3">
+							<Label>{privacyNames[x]}:</Label>
+							<Input type="select" bind:value={privacy[x]} aria-label={`group ${privacyNames[x]} privacy`}>
+								<option default>no change</option>
+								<option>public</option>
+								<option>private</option>
+							</Input>
+						</Col>
+						{/each}
+					</Row>
+
+					<Button color="primary" on:click={submit} bind:disabled={loading} aria-label="submit bulk group privacy">
+						{#if loading}
+						<Spinner />
+						{:else}
+						Submit
+						{/if}
+					</Button>
+				</CardBody>
+			</Card>
+		</Col>
+	</Row>
+</Container>
+{/if}

dashboard/src/routes/Dash/System/BulkMemberPrivacy.svelte

@@ -0,0 +1,110 @@
+<script lang="ts">
+    import { Container, Row, Col, Card, CardHeader, CardBody, CardTitle, Label, Input, Button, Spinner, Alert } from 'sveltestrap';
+    import { navigate } from 'svelte-navigator';
+	import FaUserLock from 'svelte-icons/fa/FaUserLock.svelte';
+
+	import api from '../../../api';
+    import { MemberPrivacy, System } from '../../../api/types';
+	const user: System = JSON.parse(localStorage.getItem("pk-user"));
+
+	if (!user) navigate('/');
+
+	// const capitalize = (str: string) => str[0].toUpperCase() + str.substr(1);
+
+	let loading = false;
+	let err = "";
+	let success = false;
+
+	const privacy: { [P in keyof MemberPrivacy]-?: string; } = {
+		description_privacy: "no change",
+		name_privacy: "no change",
+		avatar_privacy: "no change",
+		birthday_privacy: "no change",
+		pronoun_privacy: "no change",
+		visibility: "no change",
+		metadata_privacy: "no change",
+	};
+
+	const privacyNames: { [P in keyof MemberPrivacy]-?: string; } = {
+		avatar_privacy: "Avatar",
+		birthday_privacy: "Birthday",
+		description_privacy: "Description",
+		metadata_privacy: "Metadata",
+		name_privacy: "Name",
+		pronoun_privacy: "Pronouns",
+		visibility: "Visibility",
+	};
+
+	async function submit() {
+		success = false;
+		loading = true;
+		const dataArray = Object.entries(privacy).filter(([, value]) => value === "no change" ? false : true);
+		const data = Object.fromEntries(dataArray);
+		try {
+			await api().private.bulk_privacy.member.post({ data });
+			success = true;
+		} catch (error) {
+			console.log(error);
+			err = error.message;
+		}
+		loading = false;
+	}
+	
+	function changeAll(e: Event) {
+		const target = e.target as HTMLInputElement;
+		Object.keys(privacy).forEach(x => privacy[x] = target.value);
+	}
+</script>
+
+{#if user}
+<Container>
+    <Row>
+        <Col class="mx-auto" xs={12} lg={11} xl={10}>
+			<Card class="mb-4">
+				<CardHeader>
+					<CardTitle style="margin-top: 8px; outline: none;">
+						<div class="icon d-inline-block">
+							<FaUserLock />
+						</div> Bulk member privacy
+					</CardTitle>
+				</CardHeader>
+				<CardBody style="border-left: 4px solid #{user.color}">
+					{#if err}
+					<Alert color="danger">{err}</Alert>
+					{/if}
+					{#if success}
+					<Alert color="success">Member privacy updated!</Alert>
+					{/if}
+					<Label><b>Set all to:</b></Label>
+					<Input type="select" on:change={(e) => changeAll(e)} aria-label="set all to">
+						<option>no change</option>
+						<option>public</option>
+						<option>private</option>
+					</Input>
+					<hr/>
+					<Row>
+						{#each Object.keys(privacy) as x}
+						<Col xs={12} lg={6} class="mb-3">
+							<Label>{privacyNames[x]}:</Label>
+							<Input type="select" bind:value={privacy[x]} aria-label={`member ${privacyNames[x]} privacy`}>
+								<option default>no change</option>
+								<option>public</option>
+								<option>private</option>
+							</Input>
+						</Col>
+						{/each}
+					</Row>
+
+					<Button color="primary" on:click={submit} bind:disabled={loading} aria-label="submit bulk member privacy">
+						{#if loading}
+						<Spinner />
+						{:else}
+						Submit
+						{/if}
+					</Button>
+				</CardBody>
+			</Card>
+		</Col>
+	</Row>
+</Container>
+{/if}