refactor(dashboard): re-organize dashboard files

dashboard/src/components/list/CardView.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+    import { Row, Tooltip } from 'sveltestrap';
+    import FaLock from 'svelte-icons/fa/FaLock.svelte';
+    import FaUserCircle from 'svelte-icons/fa/FaUserCircle.svelte';
+    import FaUsers from 'svelte-icons/fa/FaUsers.svelte'
+
+    import { Member, Group } from '../../api/types';
+    import MemberCard from '../member/CardView.svelte';
+    import GroupCard from '../group/CardView.svelte';
+
+    export let list: Member[]|Group[];
+    export let groups: Group[] = [];
+    export let members: Group[] = [];
+    
+    export let itemType: string;
+
+    export let searchBy = "name";
+    export let sortBy = "name";
+    export let isPublic = false;
+    export let isDash = false;
+
+    let copiedItems = {};
+
+    function getShortLink(id: string) {
+        let url = "https://pk.mt"
+
+        if (itemType === "member") url += "/m/"
+        else if (itemType === "group") url += "/g/"
+
+        url += id;
+
+        return url;
+    }
+
+    async function copyShortLink(index: string, id: string, event?) {
+        if (event) {
+            if (event.key !== "Tab") event.preventDefault();
+            event.stopPropagation();
+
+            let ctrlDown = event.ctrlKey||event.metaKey; // mac support
+            if (!(ctrlDown && event.key === "c") && event.key !== "Enter") return;
+        }
+        try {
+            await navigator.clipboard.writeText(getShortLink(id));
+            
+            copiedItems[index] = copiedItems[index] || false;
+            copiedItems[index] = true;
+            await new Promise(resolve => setTimeout(resolve, 2000));
+            copiedItems[index] = false;
+        } catch (error) {
+            console.log(error);
+        }
+    }
+</script>
+
+<Row>
+    {#if itemType === "member"}
+        {#each list as item (item.uuid)}
+        <div class="col-12 col-sm-6 col-md-4 col-lg-3 mx-auto mx-sm-0 dont-squish">
+            <MemberCard on:update member={item} {searchBy} {sortBy} {groups} {isPublic} {isDash}>
+                    <div slot="icon" style="width: auto; height: 1em; cursor: pointer;" id={`${itemType}-copy-${item.uuid}`} on:click|stopPropagation={() => copyShortLink(item.uuid, item.id)} on:keydown={(e) => copyShortLink(item.uuid, item.id, e)} tabindex={0} >
+                        {#if item.privacy && item.privacy.visibility === "private"}
+                            <FaLock />
+                        {:else}
+                            <FaUserCircle />
+                        {/if}
+                    </div>
+            </MemberCard>
+            <Tooltip placement="top" target={`${itemType}-copy-${item.uuid}`}>{copiedItems[item.uuid] ? "Copied!" : "Copy public link"}</Tooltip>
+        </div>
+        {/each}
+    {:else if itemType === "group"}
+    {#each list as item (item.uuid)}
+        <div class="col-12 col-sm-6 col-md-4 col-lg-3 mx-auto mx-sm-0 dont-squish">
+            <GroupCard group={item} {searchBy} {sortBy} {members} {isPublic} {isDash}>
+                <div slot="icon" style="width: auto; height: 1em; cursor: pointer;" id={`${itemType}-copy-${item.uuid}`} on:click|stopPropagation={() => copyShortLink(item.uuid, item.id)} on:keydown={(e) => copyShortLink(item.uuid, item.id, e)} tabindex={0} >
+                        {#if item.privacy && item.privacy.visibility === "private"}
+                            <FaLock />
+                        {:else}
+                            <FaUsers />
+                        {/if}
+                    </div>
+            </GroupCard>
+            <Tooltip placement="top" target={`${itemType}-copy-${item.uuid}`}>{copiedItems[item.uuid] ? "Copied!" : "Copy public link"}</Tooltip>
+        </div>
+        {/each}
+    {/if}
+</Row>
+
+<style>
+    @media (max-width: 576px) {
+        .dont-squish {
+            max-width: 24rem;
+        }
+    }
+</style>

dashboard/src/components/list/List.svelte

@@ -0,0 +1,168 @@
+<script lang="ts">
+    import { Alert, Row, Col, Spinner, Button } from 'sveltestrap';
+    import { onMount } from 'svelte';
+    import { useParams } from 'svelte-navigator';
+
+    import NewMember from '../member/NewMember.svelte';
+    import NewGroup from '../group/NewGroup.svelte';
+    import ListPagination from '../common/ListPagination.svelte';
+    import ListControl from './ListControl.svelte';
+    import ListSearch from './ListSearch.svelte';
+    import ListView from './ListView.svelte';
+    import CardView from './CardView.svelte';
+
+    import { Member, Group } from '../../api/types';
+    import api from '../../api';
+
+    export let members: Member[] = [];
+    export let groups: Group[] = [];
+    
+    export let view: string = "list";
+
+    export let isDash = false;
+
+    let list: Member[] | Group[] = [];
+    let processedList: Member[] | Group[] = [];
+
+    $: groupList = groups && groups.map(function(group) { return {name: group.name, shortid: group.id, id: group.uuid, members: group.members, display_name: group.display_name}; }).sort((a, b) => a.name.localeCompare(b.name));
+    $: memberList = members && members.map(function(member) { return {name: member.name, shortid: member.id, id: member.uuid, display_name: member.display_name}; }).sort((a, b) => a.name.localeCompare(b.name));
+
+    let token = localStorage.getItem("pk-token");
+    let listLoading = true;
+    let err: string;
+
+    let settings = JSON.parse(localStorage.getItem("pk-settings"));
+    
+    let pageAmount: number;
+    let currentPage: number = 1;
+
+    let itemsPerPageValue;
+    $: {
+        if (view === "card") itemsPerPageValue = "24";
+    
+        else if (settings && settings.accessibility && settings.accessibility.expandedcards) itemsPerPageValue = "10";
+        else itemsPerPageValue = "25";
+    }
+    
+    $: itemsPerPage = parseInt(itemsPerPageValue);
+
+    $: indexOfLastItem = currentPage * itemsPerPage;
+    $: indexOfFirstItem = indexOfLastItem - itemsPerPage;
+    $: pageAmount = Math.ceil(processedList.length / itemsPerPage);
+
+    $: slicedList = processedList.slice(indexOfFirstItem, indexOfLastItem);
+
+    export let isPublic: boolean;
+    export let itemType: string;
+
+    let searchValue: string = "";
+    let searchBy: string = "name";
+    let sortBy: string = "name";
+
+    let params = useParams();
+    $: id = $params.id;
+
+    onMount(() => {
+        if (token || isPublic) fetchList();
+    });
+
+    async function fetchList() {
+        err = "";
+        listLoading = true;
+        try {
+            if (itemType === "member") { 
+                const res: Member[] = await api().systems(isPublic ? id : "@me").members.get({ auth: !isPublic });
+                members = res;
+                list = res;
+            }
+            else if (itemType === "group") {
+                const res: Group[] = await api().systems(isPublic ? id : "@me").groups.get({ auth: !isPublic, query: { with_members: !isPublic } });
+                groups = res;
+                list = res;
+            }
+            else throw new Error(`Unknown list type ${itemType}`);
+        } catch (error) {
+            console.log(error);
+            err = error.message;
+        }
+        listLoading = false;
+    }
+
+    function addItemToList(event: any) {
+        if (itemType === "member") {
+            members.push(event.detail);
+            list = members;
+        } else if (itemType === "group") {
+            groups.push(event.detail);
+            list = groups;
+        }
+    }
+
+    function updateDelete(event: any) {
+        if (itemType === "member") {
+            members = members.filter(m => m.id !== event.detail);
+            list = members;
+        } else if (itemType === "group") {
+            groups = groups.filter(g => g.id !== event.detail);
+            list = groups;
+        }
+    }
+
+    function update(event: any) {
+        if (itemType === "member") {
+            members = members.map(m => m.id === event.detail.id ? m = event.detail : m);
+            list = members;
+        } else if (itemType === "group") {
+            groups = groups.map(g => g.id === event.detail.id ? g = event.detail : g);
+            list = groups;
+        }
+    }
+
+</script>
+
+<ListControl on:viewChange {itemType} {isPublic} {memberList} {groups} {groupList} {list} bind:finalList={processedList} bind:searchValue bind:searchBy bind:sortBy bind:itemsPerPageValue bind:currentPage bind:view />
+
+{#if listLoading && !err}
+    <div class="mx-auto text-center">
+        <Spinner class="d-inline-block" />
+    </div>
+{:else if err}
+<Row>
+    <Col xs={12} lg={10}>
+        <Alert color="danger">{err}</Alert>
+    </Col>
+    <Col xs={12} lg={2}>
+        <Button class="w-100 mb-3" color="primary" on:click={fetchList} aria-label="refresh member list">Refresh</Button>
+    </Col>
+</Row>
+{:else}
+<span class="itemcounter">{processedList.length} {itemType}s ({slicedList.length} shown)</span>
+<ListSearch bind:searchBy bind:searchValue on:refresh={fetchList} />
+
+<ListPagination bind:currentPage {pageAmount} />
+
+{#if !err && !isPublic}
+    {#if itemType === "member"}
+    <NewMember on:create={addItemToList} />
+    {:else if itemType === "group"}
+    <NewGroup on:create={addItemToList} />
+    {/if}
+{/if}
+{#if view === "card"}
+    <CardView on:update={update} list={slicedList} {groups} {members} {itemType} {sortBy} {searchBy} {isPublic} {isDash} />
+{:else if view === "tiny"}
+    tiny!
+{:else}
+<ListView on:update={update} on:deletion={updateDelete} list={slicedList} {groups} {members} {isPublic} {itemType} {itemsPerPage} {currentPage} {sortBy} {searchBy} fullLength={list.length} />
+{/if}
+<ListPagination bind:currentPage {pageAmount} />
+{/if}
+
+<style>
+    .itemcounter {
+        width: 100%;
+        text-align: center;
+        display: inline-block;
+        margin-bottom: 0.5rem;
+    }
+</style>

dashboard/src/components/list/ListControl.svelte

@@ -0,0 +1,365 @@
+<script lang="ts">
+import { createEventDispatcher } from 'svelte';
+import { Card, CardHeader, CardBody, CardTitle, Alert, Accordion, AccordionItem, InputGroupText, InputGroup, Input, Row, Col, Spinner, Button, Tooltip, Label } from 'sveltestrap';
+import FaSearch from 'svelte-icons/fa/FaSearch.svelte'
+import Svelecte, { addFormatter } from 'svelecte';
+import { Member, Group } from '../../api/types';
+import { Link, useParams } from 'svelte-navigator';
+import moment from 'moment';
+
+export let list: Member[] | Group[] = [];
+
+export let itemType: string;
+export let memberList: any = [];
+export let groups: Group[] = [];
+export let groupList: any = [];
+
+export let searchBy = "name";
+export let searchValue: string;
+export let itemsPerPageValue: string;
+export let view = "list";
+
+let itemsPerPageSelection = {
+    small: "10",
+    default: "25",
+    large: "50"
+}
+
+$: { if (view === "card") itemsPerPageSelection = {
+        small: "12",
+        default: "24",
+        large: "60"
+    }
+    else {
+        itemsPerPageSelection = {
+            small: "10",
+            default: "25",
+            large: "50"
+        }
+    }
+}
+
+const dispatch = createEventDispatcher();
+
+function onViewChange(e: any) {
+    dispatch("viewChange", e.target.value);
+}
+
+export let sortBy = "name";
+let sortOrder = "ascending";
+let privacyFilter = "all";
+let groupSearchMode = "include";
+let selectedGroups = [];
+
+export let currentPage: number;
+export let isPublic: boolean;
+
+let params = useParams();
+$: systemId = $params.id;
+
+$: {searchValue; privacyFilter; currentPage = 1};
+
+// converting list to any[] avoids a "this expression is not calleable" error
+$: searchedList = (list as any[]).filter((item: Member | Group) => {
+    if (!searchValue && searchBy !== "description" && searchBy !== "display name") return true;
+    
+    switch (searchBy) {
+        case "name": if (item.name.toLowerCase().includes(searchValue.toLowerCase())) return true;
+        break;
+        case "display name": if (!searchValue) {
+            if (!item.display_name) return true;
+            else return false;
+        }
+        if (item.display_name && item.display_name.toLowerCase().includes(searchValue.toLowerCase())) return true;
+        break;
+        case "description": if (!searchValue) {
+            if (!item.description) return true;
+            else return false;
+        }
+        else if (item.description && item.description.toLowerCase().includes(searchValue.toLowerCase())) return true;
+        break;
+        case "ID": if (item.id.toLowerCase().includes(searchValue.toLowerCase())) return true;
+        break;
+        default: if (item.name.toLowerCase().includes(searchValue.toLowerCase())) return true;
+        break;
+    }
+
+    return false;
+})
+
+$: filteredList = searchedList.filter((item) => {
+    if (privacyFilter === "all") return true;
+    if (privacyFilter === "public" && item.privacy.visibility === "public") return true;
+    if (privacyFilter === "private" && item.privacy.visibility === "private") return true;
+    return false;
+});
+
+let sortedList = [];
+
+$: if (filteredList) {
+    let alphabeticalList = filteredList.sort((a, b) => a.name.localeCompare(b.name));
+    switch (sortBy) {
+        case "name": sortedList = alphabeticalList;
+        break;
+        case "display name": sortedList = filteredList.sort((a, b) => {
+            if (a.display_name && b.display_name) return a.display_name.localeCompare(b.display_name);
+            else if (a.display_name && !b.display_name) return a.display_name.localeCompare(b.name);
+            else if (!a.display_name && b.display_name) return a.name.localeCompare(b.display_name);
+            else return a.name.localeCompare(b.name);
+        });
+        break;
+        case "creation date": sortedList = filteredList.sort((a, b) => {
+            if (a.created && b.created) return a.created.localeCompare(b.created);
+        });
+        break;
+        case "ID": sortedList = filteredList.sort((a, b) => a.id.localeCompare(b.id));
+        break;
+        case "avatar": sortedList = alphabeticalList.sort((a, b) => {
+                if (a.icon === null || a.avatar_url === null) {
+                    return 1;
+                };
+                if (b.icon === null || b.avatar_url === null) {
+                    return -1;
+                };
+                if (a.icon === b.icon || a.avatar_url === b.avatar_url) {
+                    return 0;
+                }
+            });
+        break;
+        case "color": sortedList = alphabeticalList.sort((a, b) => {
+                if (a.color === null) {
+                    return 1;
+                };
+                if (b.color === null) {
+                    return -1;
+                };
+                if (a.color === b.color) {
+                    return 0;
+                }
+            });
+        break;
+        case "birthday": sortedList = alphabeticalList.sort((a, b) => {
+            if (a.birthday === null) {
+                return 1;
+            }
+            if (b.birthday === null) {
+                return -1;
+            }
+            let aBirthday = moment(a.birthday.slice(5, a.birthday.length), "MM-DD", true);
+            let bBirthday = moment(b.birthday.slice(5, b.birthday.length), "MM-DD", true);
+            if (aBirthday.isBefore(bBirthday)) {
+                return -1;
+            }
+            if (aBirthday.isAfter(bBirthday)) {
+                return 1;
+            }
+            if (aBirthday === bBirthday) {
+                return 0;
+            }
+        });
+        break;
+        case "pronouns": sortedList = alphabeticalList.sort((a, b) => {
+            if (a.pronouns === null) {
+                    return 1;
+                };
+                if (b.pronouns === null) {
+                    return -1;
+                };
+                return 0;
+        })
+        break;
+        default: sortedList = filteredList.sort((a, b) => a.name.localeCompare(b.name));
+        break;
+    }
+}
+
+let memberFilteredList = [];
+$: memberFilteredList = sortedList.filter((item: Member | Group): boolean => { 
+    if (itemType === "member") {
+        if (groupSearchMode === "none") {
+            if (groups.some(group => group.members && group.members.includes(item.uuid))) return false;
+        }
+
+        if (selectedGroups.length < 1) return true;
+
+        switch (groupSearchMode) {
+            case "include": if (selectedGroups.some(group => group.members && group.members.includes(item.uuid))) return true;
+            break;
+            case "exclude": if (selectedGroups.every(group => group.members && !group.members.includes(item.uuid))) return true;
+            break;
+            case "match": if (selectedGroups.every(group => group.members && group.members.includes(item.uuid))) return true;
+            break;
+            default: return true;
+        }
+    } else if (itemType === "group") {
+        let group = (item as Group);
+
+        if (groupSearchMode === "none") {
+            if (group.members && group.members.length > 0) return false;
+        }
+
+        if (selectedGroups.length < 1) return true;
+
+        switch (groupSearchMode) {
+            case "include": if (group.members && selectedGroups.some(member => group.members.includes(member.id))) return true;
+            break;
+            case "exclude": if (group.members && selectedGroups.every(member => !group.members.includes(member.id))) return true;
+            break;
+            case "match": if (group.members && selectedGroups.every(member => group.members.includes(member.id))) return true;
+            break;
+            default: return true;
+        }
+    }
+    return false;
+})
+
+export let finalList = [];
+$:{sortOrder; if (sortOrder === "descending") finalList = memberFilteredList.reverse(); else finalList = memberFilteredList;}
+
+function groupListRenderer(item: any) {
+return `${item.name} (<code>${item.shortid}</code>)`;
+}
+
+addFormatter({
+    'group-list': groupListRenderer
+});
+
+function memberListRenderer(item: any) {
+    return `${item.name} (<code>${item.shortid}</code>)`;
+}
+
+addFormatter({
+    'member-list': memberListRenderer
+});
+
+function getRandomizerUrl(): string {
+    let str: string;
+    if (isPublic) str = `/profile/s/${systemId}/random`
+    else str = "/dash/random";
+    
+    if (itemType === "group") str += "/g";
+    return str;
+}
+
+function capitalizeFirstLetter(string: string) {
+    return string.charAt(0).toUpperCase() + string.slice(1);
+}
+</script>
+
+<Card class="mb-3">
+<CardHeader>
+    <CardTitle>
+        <CardTitle style="margin-top: 8px; outline: none;">
+            <div class="icon d-inline-block">
+                <FaSearch />
+            </div> Search {itemType === "member" ? "members" : "groups"}
+        </CardTitle>
+    </CardTitle>
+</CardHeader>
+<CardBody>
+    <Row>
+        <Col xs={12} lg={3} class="mb-2">
+            <InputGroup>
+                <InputGroupText>Page length</InputGroupText>
+                <Input bind:value={itemsPerPageValue} type="select" aria-label="page length">
+                    <option>{itemsPerPageSelection.small}</option>
+                    <option>{itemsPerPageSelection.default}</option>
+                    <option>{itemsPerPageSelection.large}</option>
+                </Input>
+            </InputGroup>
+        </Col>
+        <Col xs={12} lg={3} class="mb-2">
+            <InputGroup>
+                <InputGroupText>Search by</InputGroupText>
+                <Input bind:value={searchBy} type="select" aria-label="search by">
+                    <option>name</option>
+                    <option>display name</option>
+                    <option>description</option>
+                    <option>ID</option>
+                </Input>
+            </InputGroup>
+        </Col>
+        <Col xs={12} lg={3} class="mb-2">
+            <InputGroup>
+                <InputGroupText>Sort by</InputGroupText>
+                <Input bind:value={sortBy} type="select" aria-label="sort by">
+                    <option>name</option>
+                    <option>display name</option>
+                    {#if !isPublic}<option>creation date</option>{/if}
+                    <option>ID</option>
+                    <option>avatar</option>
+                    <option>color</option>
+                    {#if itemType === "member"}<option>birthday</option>{/if}
+                    {#if itemType === "member"}<option>pronouns</option>{/if}
+                </Input>
+            </InputGroup>
+        </Col>
+        <Col xs={12} lg={3} class="mb-2">
+            <InputGroup>
+                <InputGroupText>Sort order</InputGroupText>
+                <Input bind:value={sortOrder} type="select" aria-label="sort order">
+                    <option>ascending</option>
+                    <option>descending</option>
+                </Input>
+            </InputGroup>
+        </Col>
+        {#if !isPublic}
+        <Col xs={12} lg={3} class="mb-2">
+            <InputGroup>
+                <InputGroupText>Only show</InputGroupText>
+                <Input bind:value={privacyFilter} type="select" aria-label="only show">
+                    <option>all</option>
+                    <option>public</option>
+                    <option>private</option>
+                </Input>
+            </InputGroup>
+        </Col>
+        {/if}
+        <Col xs={12} lg={3} class="mb-2">
+            <InputGroup>
+                <InputGroupText>View mode</InputGroupText>
+                <Input bind:value={view} type="select" aria-label="view mode" on:change={(e) => onViewChange(e)} >
+                    <option>list</option>
+                    <option value="card">cards</option>
+                </Input>
+            </InputGroup>
+        </Col>
+        <Col xs={12} lg={3} class="mb-2">
+            <Link to={getRandomizerUrl()}><Button class="w-100" color="secondary" tabindex={-1} aria-label={`randomize ${itemType}s`}>Random {capitalizeFirstLetter(itemType)}</Button></Link>
+        </Col>
+    </Row>
+    {#if !isPublic}
+    <hr/>
+    <Label>Filter {itemType === "member" ? "member" : "group"} by {itemType === "member" ? "group" : "member"}</Label>
+    {#if itemType === "member"}
+    <Svelecte disableHighlight renderer="group-list" valueAsObject bind:value={selectedGroups} options={groupList} multiple style="margin-bottom: 0.5rem" />
+    {:else if itemType === "group"}
+    <Svelecte disableHighlight renderer="member-list" valueAsObject bind:value={selectedGroups} options={memberList} multiple style="margin-bottom: 0.5rem" />
+    {/if}
+
+    <div class="filter-mode-group">
+    <span class="filter-mode-label" id="m-include" on:click={() => groupSearchMode = "include"} on:keyup={e => e.key === "Enter" ? groupSearchMode = "include" : ""} tabindex={0}>{@html groupSearchMode === "include" ? "<b>include</b>" : "include"}</span>
+     | <span class="filter-mode-label" id="m-exclude" on:click={() => groupSearchMode = "exclude"} on:keyup={e => e.key === "Enter" ? groupSearchMode = "exclude" : ""} tabindex={0}>{@html groupSearchMode === "exclude" ? "<b>exclude</b>" : "exclude"}</span> 
+     | <span class="filter-mode-label" id="m-match" on:click={() => groupSearchMode = "match"} on:keyup={e => e.key === "Enter" ? groupSearchMode = "match" : ""} tabindex={0}>{@html groupSearchMode === "match" ? "<b>exact match</b>" : "exact match"}</span>
+     | <span class="filter-mode-label" id="m-none" on:click={() => groupSearchMode = "none"} on:keyup={e => e.key === "Enter" ? groupSearchMode = "none" : ""} tabindex={0}>{@html groupSearchMode === "none" ? "<b>none</b>" : "none"}</span>
+    </div>
+     <Tooltip placement="bottom" target="m-include">Includes every member who's a part of any of the groups.</Tooltip>
+    <Tooltip placement="bottom" target="m-exclude">Excludes every member who's a part of any of the groups, the opposite of include.</Tooltip>
+    <Tooltip placement="bottom" target="m-match">Only includes members who are a part of every group.</Tooltip>
+    <Tooltip placement="bottom" target="m-none">Only includes members that are in no groups.</Tooltip>
+    {/if}
+</CardBody>
+</Card>
+
+<style>
+    .filter-mode-label {
+        cursor: pointer;
+    }
+
+    .filter-mode-group {
+        line-height: 1.5em;
+        padding:0.375rem 0;
+        display: inline-block;
+        margin-bottom: 0.25em;
+    }
+</style>

dashboard/src/components/list/ListSearch.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+import { createEventDispatcher } from "svelte";
+import { Button, Col, Input, Row } from "sveltestrap";
+
+export let searchValue: string;
+export let searchBy: string;
+
+const dispatch = createEventDispatcher();
+
+function update() {
+    dispatch("refresh");
+}
+
+</script>
+
+<Row>
+    <Col xs={12} lg={10}>
+        <Input class="mb-3" bind:value={searchValue} placeholder="search by {searchBy}..."/>
+    </Col>
+    <Col xs={12} lg={2} class="mb-3 mb-lg-0">
+        <Button class="w-100 mb-3" color="primary" on:click={() => update()} aria-label="refresh member list">Refresh</Button>
+    </Col>
+</Row>

dashboard/src/components/list/ListView.svelte

@@ -0,0 +1,198 @@
+<script lang="ts">
+    import { Card, CardHeader, CardBody, Collapse, Tooltip } from 'sveltestrap';
+    import { Member, Group } from '../../api/types';
+    import { link } from 'svelte-navigator';
+
+    import FaLock from 'svelte-icons/fa/FaLock.svelte';
+    import FaUserCircle from 'svelte-icons/fa/FaUserCircle.svelte';
+    import FaUsers from 'svelte-icons/fa/FaUsers.svelte'
+
+    import MemberBody from '../member/Body.svelte';
+    import GroupBody from '../group/Body.svelte';
+    import CardsHeader from '../common/CardsHeader.svelte';
+
+    let settings = JSON.parse(localStorage.getItem("pk-settings"));
+    
+    export let list: Member[]|Group[];
+    export let members: Member[] = [];
+    export let groups: Group[] = [];
+    
+    export let isPublic: boolean;
+    export let itemType: string;
+    export let itemsPerPage: number;
+    export let currentPage: number;
+    export let fullLength: number;
+
+    export let openByDefault = false;
+
+    export let searchBy = "name";
+    export let sortBy = "name";
+
+    $: indexStart = itemsPerPage * (currentPage - 1);
+
+    function getItemLink(item: Member | Group): string {
+        let url: string;
+
+        if (!isPublic) url = "/dash/";
+        else url = "/profile/";
+        
+        if (itemType === "member") url += "m/";
+        else if (itemType === "group") url += "g/";
+
+        url += item.id;
+
+        return url;
+    }
+
+    function skipToNextItem(event, index: number) {
+        let el;
+
+        if (event.key === "ArrowDown") {
+            if (index + 1 < indexStart + itemsPerPage && index + 1 < fullLength) el = document.getElementById(`${itemType}-card-${index + 1}`);
+            else el = document.getElementById(`${itemType}-card-${indexStart}`);
+        }
+
+        if (event.key === "ArrowUp") {
+            if (index - 1 >= indexStart) el = document.getElementById(`${itemType}-card-${index - 1}`);
+            else if (fullLength <= indexStart + itemsPerPage) el = document.getElementById(`${itemType}-card-${fullLength - 1}`);
+            else el = document.getElementById(`${itemType}-card-${indexStart + itemsPerPage - 1}`);
+        }
+
+        if (el) {
+            event.preventDefault();
+            el.focus();
+        }
+    }
+
+    let isOpen = {};
+
+    function toggleCard(index: string) {
+        isOpen[index] = isOpen[index] || {};
+        if (isOpen[index] === true) {
+            isOpen[index] = false;
+        } else {
+            isOpen[index] = true;
+        }
+    }
+
+    function getShortLink(id: string) {
+        let url = "https://pk.mt"
+
+        if (itemType === "member") url += "/m/"
+        else if (itemType === "group") url += "/g/"
+
+        url += id;
+
+        return url;
+    }
+
+    let copiedArray = [];
+
+    async function copyShortLink(index: number, id: string, event?) {
+        if (event) {
+            if (event.key !== "Tab") event.preventDefault();
+            event.stopPropagation();
+
+            let ctrlDown = event.ctrlKey||event.metaKey; // mac support
+            if (!(ctrlDown && event.key === "c") && event.key !== "Enter") return;
+        }
+        try {
+            await navigator.clipboard.writeText(getShortLink(id));
+            
+            copiedArray[index] = true;
+            await new Promise(resolve => setTimeout(resolve, 2000));
+            copiedArray[index] = false;
+        } catch (error) {
+            console.log(error);
+        }
+    }
+</script>
+
+{#if !openByDefault && (settings && settings.accessibility ? (!settings.accessibility.expandedcards && !settings.accessibility.pagelinks) : true)}
+    <div class="mb-3">    
+    {#each list as item, index (item.uuid)}
+        <Card>
+            <h2 class="accordion-header">
+                <button class="w-100 accordion-button collapsed card-header" id={`${itemType}-card-${indexStart + index}`} on:click={() => toggleCard(item.uuid)} on:keydown={(e) => skipToNextItem(e, indexStart + index)}>
+                    <CardsHeader {item} {sortBy} {searchBy}>
+                        <div slot="icon" style="cursor: pointer;" id={`${itemType}-copy-${item.id}-${indexStart + index}`} on:click|stopPropagation={() => copyShortLink(indexStart + index, item.id)} on:keydown={(e) => copyShortLink(indexStart + index, item.id, e)} tabindex={0} >
+                            {#if isPublic || item.privacy.visibility === "public"}
+                            {#if itemType === "member"}
+                            <FaUserCircle />
+                            {:else if itemType === "group"}
+                            <FaUsers />
+                            {/if}
+                            {:else}
+                            <FaLock />
+                            {/if}
+                        </div>
+                    </CardsHeader>
+                    <Tooltip placement="top" target={`${itemType}-copy-${item.id}-${indexStart + index}`}>{copiedArray[indexStart + index] ? "Copied!" : "Copy public link"}</Tooltip>
+                </button>
+            </h2>
+            <Collapse isOpen={isOpen[item.uuid]}>
+                <CardBody>
+                    {#if itemType === "member"}
+                    <MemberBody on:update on:deletion bind:isPublic groups={groups} member={item} />
+                    {:else if itemType === "group"}
+                    <GroupBody on:update on:deletion bind:isPublic {members} group={item} />
+                    {/if}
+                </CardBody>
+            </Collapse>
+        </Card>
+    {/each}
+    </div>
+{:else if openByDefault || settings.accessibility.expandedcards}
+    {#each list as item, index (item.id + index)}
+    <Card class="mb-3">
+        <div class="accordion-button collapsed p-0" id={`${itemType}-card-${indexStart + index}`} on:keydown={(e) => skipToNextItem(e, indexStart + index)} tabindex={0}>
+            <CardHeader class="w-100">
+                <CardsHeader {item} {sortBy} {searchBy}>
+                    <div slot="icon" style="cursor: pointer;" id={`${itemType}-copy-${item.id}-${indexStart + index}`} on:click|stopPropagation={() => copyShortLink(indexStart + index, item.id)} on:keydown|stopPropagation={(e) => copyShortLink(indexStart + index, item.id, e)} tabindex={0} >
+                        {#if isPublic || item.privacy.visibility === "public"}
+                        {#if itemType === "member"}
+                        <FaUserCircle />
+                        {:else if itemType === "group"}
+                        <FaUsers />
+                        {/if}
+                        {:else}
+                        <FaLock />
+                        {/if}
+                    </div>
+                </CardsHeader>
+                <Tooltip placement="top" target={`${itemType}-copy-${item.id}-${indexStart + index}`}>{copiedArray[indexStart + index] ? "Copied!" : "Copy public link"}</Tooltip>
+            </CardHeader>
+        </div>
+        <CardBody>
+            {#if itemType === "member"}
+            <MemberBody on:update on:deletion bind:isPublic groups={groups} member={item} />
+            {:else if itemType === "group"}
+            <GroupBody on:update on:deletion bind:isPublic {members} group={item} />
+            {/if}
+        </CardBody>
+    </Card>
+    {/each}
+{:else}
+    <div class="my-3">
+    {#each list as item, index (item.id + index)}
+    <Card>
+        <a class="accordion-button collapsed" style="text-decoration: none;" href={getItemLink(item)} id={`${itemType}-card-${indexStart + index}`} on:keydown={(e) => skipToNextItem(e, indexStart + index)} use:link >
+            <CardsHeader {item}>
+                <div slot="icon" style="cursor: pointer;" id={`${itemType}-copy-${item.id}-${indexStart + index}`} on:click|stopPropagation={() => copyShortLink(indexStart + index, item.id)} on:keydown|stopPropagation={(e) => copyShortLink(indexStart + index, item.id, e)} tabindex={0} >
+                    {#if isPublic || item.privacy.visibility === "public"}
+                    {#if itemType === "member"}
+                    <FaUserCircle />
+                    {:else if itemType === "group"}
+                    <FaUsers />
+                    {/if}
+                    {:else}
+                    <FaLock />
+                    {/if}
+                </div>
+            </CardsHeader>
+            <Tooltip placement="top" target={`${itemType}-copy-${item.id}-${indexStart + index}`}>{copiedArray[indexStart + index] ? "Copied!" : "Copy public link"}</Tooltip>
+        </a>
+    </Card>
+    {/each}
+    </div>
+{/if}