From 00c55533ea2f07ef7756654cf2f97846b920e259 Mon Sep 17 00:00:00 2001
From: Jake Fulmine <jake.fulminated@gmail.com>
Date: Sun, 2 Oct 2022 22:09:13 +0200
Subject: [PATCH] feat(dashboard): card list view

---
 dashboard/src/lib/group/CardView.svelte       | 230 +++++++++++++++++
 dashboard/src/lib/list/CardView.svelte        |  96 +++++++
 dashboard/src/lib/list/List.svelte            |  26 +-
 dashboard/src/lib/list/ListControl.svelte     |  43 +++-
 .../{CardsList.svelte => ListView.svelte}     |   2 +-
 dashboard/src/lib/member/CardView.svelte      | 240 ++++++++++++++++++
 dashboard/src/pages/Dash.svelte               |  27 +-
 dashboard/src/pages/Group.svelte              |  21 +-
 dashboard/src/pages/Member.svelte             |  21 +-
 dashboard/src/pages/Profile.svelte            |  27 +-
 dashboard/src/pages/Random.svelte             |   2 +-
 11 files changed, 690 insertions(+), 45 deletions(-)
 create mode 100644 dashboard/src/lib/group/CardView.svelte
 create mode 100644 dashboard/src/lib/list/CardView.svelte
 rename dashboard/src/lib/list/{CardsList.svelte => ListView.svelte} (98%)
 create mode 100644 dashboard/src/lib/member/CardView.svelte

diff --git a/dashboard/src/lib/group/CardView.svelte b/dashboard/src/lib/group/CardView.svelte
new file mode 100644
index 00000000..c30edea9
--- /dev/null
+++ b/dashboard/src/lib/group/CardView.svelte
@@ -0,0 +1,230 @@
+<script lang="ts">
+    import { createEventDispatcher } from 'svelte';
+    import { Card, CardHeader, CardTitle, Modal, Button, ListGroup, ListGroupItem, Label, Input, Alert, Tooltip, Row, Col } from 'sveltestrap';
+    import { toHTML } from 'discord-markdown';
+    import twemoji from 'twemoji';
+    import { Link } from 'svelte-navigator';
+    import { autoresize } from 'svelte-textarea-autoresize';
+
+    import FaEdit from 'svelte-icons/fa/FaEdit.svelte'
+    import FaInfoCircle from 'svelte-icons/fa/FaInfoCircle.svelte'
+    import FaUserAlt from 'svelte-icons/fa/FaUserAlt.svelte'
+    import FaTimes from 'svelte-icons/fa/FaTimes.svelte'
+    import FaCheck from 'svelte-icons/fa/FaCheck.svelte'
+
+    import type { Group, Member} from '../../api/types';
+    import api from '../../api';
+    import default_avatar from '../../assets/default_avatar.png';
+    import resizeMedia from '../../api/resize-media';
+
+    export let group: Group;
+    export let searchBy: string;
+    export let sortBy: string;
+    export let members: Member[];
+    export let isPublic = false;
+    export let isDash = false;
+
+    let input: Group = JSON.parse(JSON.stringify(group));
+
+    let view = "card";
+    let err: string[] = [];
+    let loading = false;
+    let success = false;
+
+    let settings = JSON.parse(localStorage.getItem("pk-settings"));
+    
+    let htmlName: string;
+    $: htmlDesc = group.description && toHTML(group.description, { embed: true}) || "(no description)";
+    $: htmlDisplayName = group.display_name && toHTML(group.display_name);
+
+    let nameElement: any;
+    let descElement: any;
+    let dnElement: any;
+
+    $: if (group.name) {
+        if ((searchBy === "display name" || sortBy === "display name") && group.display_name) htmlName = toHTML(group.display_name);
+        else htmlName = toHTML(group.name);
+    }
+    if (settings && settings.appearance.twemoji) {
+        if (nameElement) twemoji.parse(nameElement);
+        if (descElement) twemoji.parse(descElement);
+        if (dnElement) twemoji.parse(dnElement);
+    }
+
+    let avatarOpen = false;
+    const toggleAvatarModal = () => (avatarOpen = !avatarOpen);
+
+    $: icon_url = group.icon ? group.icon : default_avatar;
+    $: icon_url_resized = resizeMedia(icon_url);
+
+    let altText = `member ${group.name} avatar`;
+
+    $: memberList = members && members.filter(m => group.members && group.members.includes(m.uuid) && true).sort((a, b) => a.name.localeCompare(b.name)) || [];
+    let listGroupElements = [];
+    
+    let pageLink = isPublic ? `/profile/g/${group.id}` : `/dash/g/${group.id}`;
+
+    const dispatch = createEventDispatcher();
+
+    function update(group: Group) {
+        dispatch('update', group);
+    }
+
+    async function submit() {
+        let data = input;
+        err = [];
+        success = false;
+
+        if (data.color && !/^#?[A-Fa-f0-9]{6}$/.test(input.color)) {
+            err.push(`"${data.color}" is not a valid color, the color must be a 6-digit hex code. (example: #ff0000)`);
+        } else if (data.color) {
+            if (data.color.startsWith("#")) {
+                data.color = input.color.slice(1, input.color.length);
+            }
+        }
+
+        // trim all string fields
+        Object.keys(data).forEach(k => data[k] = typeof data[k] == "string" ? data[k].trim() : data[k]);
+
+        err = err;
+        if (err.length > 0) return;
+
+        loading = true;
+        try {
+            let res = await api().groups(group.id).patch({data});
+            update({...group, ...res});
+            group = {...group, ...res};
+            err = [];
+            success = true;
+            loading = false;
+        } catch (error) {
+            console.log(error);
+            err.push(error.message);
+            err = err;
+            loading = false;
+        }
+    }
+</script>
+
+<Card class="mb-4 pb-3" style={`height: 27.5rem; ${group.color && `border-bottom: 4px solid #${group.color}`}`}>
+    <CardHeader>
+        <CardTitle class="d-flex justify-content-center align-middle w-100 mb-0">
+            <div class="icon d-inline-block">
+                <slot name="icon" />
+            </div>
+            <span bind:this={nameElement} style="vertical-align: middle; margin-bottom: 0;">{@html htmlName} ({group.id})</span>
+        </CardTitle>
+    </CardHeader>
+    <div class="card-body d-block hide-scrollbar" style="flex: 1; overflow: auto;">
+        {#if view === "card"}
+        <img style="cursor: pointer;" tabindex={0} on:keydown={(event) => {if (event.key === "Enter") {avatarOpen = true}}} on:click={toggleAvatarModal} class="rounded avatar mx-auto w-100 h-auto mb-2" src={icon_url_resized} alt={altText}/>
+        <Modal isOpen={avatarOpen} toggle={toggleAvatarModal}>
+            <div slot="external" on:click={toggleAvatarModal} style="height: 100%;  max-width: 640px; width: 100%; margin-left: auto; margin-right: auto; display: flex;">
+                <img class="d-block m-auto img-thumbnail" src={icon_url} alt="Member avatar" tabindex={0}/>
+            </div>
+        </Modal>
+        {#if group.display_name}
+        <div class="text-center" bind:this={dnElement}><b>{@html htmlDisplayName}</b></div>
+        {/if}
+        <hr style="min-height: 1px;"/>
+        <div bind:this={descElement}>
+            {@html htmlDesc}
+        </div>
+        <hr style="min-height: 1px;"/>
+        <Row>
+            <Col xs={4} class="align-items-center justify-content-center">
+                {#if !isPublic}<Button color="link" class="mt-2" on:click={() => {view = "edit"}} id={`group-${group.uuid}-edit-button-card`}><FaEdit/></Button>{/if}
+            </Col>
+            <Col xs={4} class="align-items-center justify-content-center">
+                {#if !isPublic && isDash}<Button color="link" class="mt-2 text-reset" on:click={() => {view = "groups"}} id={`group-${group.uuid}-groups-button-card`}><FaUserAlt/></Button>{/if}
+            </Col>
+            <Col xs={4} class="align-items-center justify-content-center">
+                <Link tabindex={-1} to={pageLink} class="text-reset"><Button color="link" class="mt-2 w-100 text-reset" id={`group-${group.uuid}-view-button-card`}><FaInfoCircle/></Button></Link> 
+            </Col>
+            {#if !isPublic}<Tooltip target={`group-${group.uuid}-edit-button-card`} placement="bottom">Edit group</Tooltip>{/if}
+            {#if !isPublic && isDash}<Tooltip target={`group-${group.uuid}-groups-button-card`} placement="bottom">View members</Tooltip>{/if}
+            <Tooltip target={`group-${group.uuid}-view-button-card`} placement="bottom">View page</Tooltip>
+        </Row>
+        {:else if view === "groups"}
+            {#if memberList.length > 0}
+            <b class="d-block text-center w-100">Members</b>
+            <hr style="min-height: 1px"/>
+            <ListGroup>
+                {#each memberList as member, index (member.id)}
+                <ListGroupItem class="d-flex"><span bind:this={listGroupElements[index]}><span><b>{@html toHTML(member.name)}</b> (<code>{member.id}</code>)</span></ListGroupItem>
+                {/each}
+            </ListGroup>
+            {:else}
+            <b class="d-block text-center w-100">This group has no members.</b>
+            {/if}
+            <hr style="min-height: 1px"/>
+            <Row>
+                <Col xs={4} class="align-items-center justify-content-center">
+                    <Button color="link" class="mt-2" on:click={() => {view = "edit"}} id={`group-${group.uuid}-edit-button-groups`}><FaEdit/></Button>
+                </Col>
+                <Col xs={4} class="align-items-center justify-content-center">
+                    <Button color="link" class="mt-2 text-reset" on:click={() => {view = "card"}} id={`group-${group.uuid}-back-button-groups`}><FaTimes/></Button>
+                </Col>
+                <Col xs={4} class="align-items-center justify-content-center">
+                    <Link tabindex={-1} to={`./m/${group.id}`} class="text-reset"><Button color="link" class="mt-2 w-100 text-reset" id={`group-${group.uuid}-view-button-groups`}><FaInfoCircle/></Button></Link> 
+                </Col>
+                <Tooltip target={`group-${group.uuid}-edit-button-groups`} placement="bottom">Edit group</Tooltip>
+                <Tooltip target={`group-${group.uuid}-back-button-groups`} placement="bottom">Back to info</Tooltip>
+                <Tooltip target={`group-${group.uuid}-view-button-groups`} placement="bottom">View page</Tooltip>
+            </Row>
+        {:else if view === "edit"}
+            <Label>Name:</Label>
+            <Input class="mb-2" bind:value={input.name} maxlength={100} type="text" placeholder={group.name} aria-label="group name"/>
+            <Label>Icon url:</Label>
+            <Input bind:value={input.icon} maxlength={256} type="url" placeholder={group.icon} aria-label="group avatar url"/>
+            <hr style="min-height: 1px" />
+            <Label>Display name:</Label>
+            <textarea class="form-control mb-2" style="resize: none; height: 1em" bind:value={input.display_name} maxlength={100} type="text" placeholder={group.display_name} aria-label="group display name" />
+            <hr style="min-height: 1px" />
+            <Label>Description:</Label>
+            <textarea class="form-control" style="resize: none; overflow: hidden;" bind:value={input.description} maxlength={1000} use:autoresize placeholder={group.description} aria-label="group description"/>
+            <hr style="min-height: 1px" />
+            <Label>Color:</Label>
+            <Row>
+                <Col xs={9}>
+                    <Input type="text" bind:value={input.color} aria-label="group color value"/>
+                </Col>
+                <Col class="p-0">
+                    <Input class="p-0" on:change={(e) => input.color = e.target.value.slice(1, 7)} type="color" aria-label="color picker" />
+                </Col>
+            </Row>
+            <hr style="min-height: 1px" />
+            {#if success}
+                <Alert class="m-0 mb-2" color="success">group edited!</Alert>
+            {/if}
+            {#if err}
+                {#each err as errorMessage}
+                    <Alert class="m-0 mb-2" color="danger">{@html errorMessage}</Alert>
+                {/each}
+            {/if}
+            <Row>
+                <Col xs={4} class="align-items-center justify-content-center">
+                    <Button disabled={loading} color="link" class="mt-2 text-danger" style="height: 3rem;" on:click={() => {view = "card"}} id={`group-${group.uuid}-back-button-edit`}><FaTimes/></Button>
+                </Col>
+                <Col xs={4}>
+                </Col>
+                <Col xs={4} class="align-items-center justify-content-center">
+                    <Button disabled={loading} color="link" class="mt-2 text-success" on:click={submit} id={`group-${group.uuid}-submit-button-edit`}><FaCheck/></Button>
+                </Col>
+                <Tooltip target={`group-${group.uuid}-back-button-edit`} placement="bottom">Go back</Tooltip>
+                <Tooltip target={`group-${group.uuid}-submit-button-edit`} placement="bottom">Submit edit</Tooltip>
+            </Row>
+        {/if}
+    </div>
+</Card>
+
+<style>
+    .hide-scrollbar::-webkit-scrollbar {
+        display: none;
+    }
+
+    .hide-scrollbar {
+        scrollbar-width: none;
+    }
+
+</style>
\ No newline at end of file
diff --git a/dashboard/src/lib/list/CardView.svelte b/dashboard/src/lib/list/CardView.svelte
new file mode 100644
index 00000000..fd4ad9cd
--- /dev/null
+++ b/dashboard/src/lib/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>
\ No newline at end of file
diff --git a/dashboard/src/lib/list/List.svelte b/dashboard/src/lib/list/List.svelte
index d3dae251..bd0dc577 100644
--- a/dashboard/src/lib/list/List.svelte
+++ b/dashboard/src/lib/list/List.svelte
@@ -8,13 +8,18 @@
     import ListPagination from '../ListPagination.svelte';
     import ListControl from './ListControl.svelte';
     import ListSearch from './ListSearch.svelte';
-    import CardsList from './CardsList.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[] = [];
@@ -31,7 +36,14 @@
     let pageAmount: number;
     let currentPage: number = 1;
 
-    let itemsPerPageValue = settings && settings.accessibility && settings.accessibility.expandedcards ? "10" : "25";
+    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;
@@ -108,7 +120,7 @@
 
 </script>
 
-<ListControl {itemType} {isPublic} {memberList} {groups} {groupList} {list} bind:finalList={processedList} bind:searchValue bind:searchBy bind:sortBy bind:itemsPerPageValue bind:currentPage />
+<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">
@@ -136,7 +148,13 @@
     <NewGroup on:create={addItemToList} />
     {/if}
 {/if}
-<CardsList on:update={update} on:deletion={updateDelete} list={slicedList} groups={groups} members={members} isPublic={isPublic} itemType={itemType} itemsPerPage={itemsPerPage} currentPage={currentPage} fullLength={list.length} {sortBy} {searchBy} />
+{#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}
 
diff --git a/dashboard/src/lib/list/ListControl.svelte b/dashboard/src/lib/list/ListControl.svelte
index 2950d5b7..a9a9c1e2 100644
--- a/dashboard/src/lib/list/ListControl.svelte
+++ b/dashboard/src/lib/list/ListControl.svelte
@@ -1,4 +1,5 @@
 <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';
@@ -16,6 +17,33 @@ 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";
@@ -234,9 +262,9 @@ function capitalizeFirstLetter(string: string) {
             <InputGroup>
                 <InputGroupText>Page length</InputGroupText>
                 <Input bind:value={itemsPerPageValue} type="select" aria-label="page length">
-                    <option>10</option>
-                    <option>25</option>
-                    <option>50</option>
+                    <option>{itemsPerPageSelection.small}</option>
+                    <option>{itemsPerPageSelection.default}</option>
+                    <option>{itemsPerPageSelection.large}</option>
                 </Input>
             </InputGroup>
         </Col>
@@ -287,6 +315,15 @@ function capitalizeFirstLetter(string: string) {
             </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>
diff --git a/dashboard/src/lib/list/CardsList.svelte b/dashboard/src/lib/list/ListView.svelte
similarity index 98%
rename from dashboard/src/lib/list/CardsList.svelte
rename to dashboard/src/lib/list/ListView.svelte
index d1196efd..f314b3d3 100644
--- a/dashboard/src/lib/list/CardsList.svelte
+++ b/dashboard/src/lib/list/ListView.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Card, CardHeader, CardBody, Alert, Collapse, Row, Col, Spinner, Button, Tooltip } from 'sveltestrap';
+    import { Card, CardHeader, CardBody, Collapse, Tooltip } from 'sveltestrap';
     import { Member, Group } from '../../api/types';
     import { link } from 'svelte-navigator';
 
diff --git a/dashboard/src/lib/member/CardView.svelte b/dashboard/src/lib/member/CardView.svelte
new file mode 100644
index 00000000..34fdbd67
--- /dev/null
+++ b/dashboard/src/lib/member/CardView.svelte
@@ -0,0 +1,240 @@
+<script lang="ts">
+    import { createEventDispatcher } from 'svelte';
+    import { Card, CardHeader, CardTitle, Modal, Button, ListGroup, ListGroupItem, Input, Alert, Label, Spinner, Row, Col, Tooltip } from 'sveltestrap';
+    import { toHTML } from 'discord-markdown';
+    import twemoji from 'twemoji';
+    import { Link } from 'svelte-navigator';
+    import { autoresize } from 'svelte-textarea-autoresize';
+
+    import FaEdit from 'svelte-icons/fa/FaEdit.svelte'
+    import FaInfoCircle from 'svelte-icons/fa/FaInfoCircle.svelte'
+    import FaUsers from 'svelte-icons/fa/FaUsers.svelte'
+    import FaTimes from 'svelte-icons/fa/FaTimes.svelte'
+    import FaCheck from 'svelte-icons/fa/FaCheck.svelte'
+
+    import type { Group, Member} from '../../api/types';
+    import api from '../../api';
+    import default_avatar from '../../assets/default_avatar.png';
+    import resizeMedia from '../../api/resize-media';
+
+
+    export let member: Member;
+    export let searchBy: string;
+    export let sortBy: string;
+    export let groups: Group[];
+    export let isPublic = false;
+    export let isDash = false;
+
+    let input: Member = JSON.parse(JSON.stringify(member));
+
+    let view = "card";
+    let err: string[] = [];
+    let loading = false;
+    let success = false;
+
+    let settings = JSON.parse(localStorage.getItem("pk-settings"));
+    
+    let htmlName: string;
+    $: htmlDesc = member.description && toHTML(member.description, { embed: true}) || "(no description)";
+    $: htmlDisplayName = member.display_name && toHTML(member.display_name);
+    $: htmlPronouns = member.pronouns && toHTML(member.pronouns, {embed: true});
+
+    let nameElement: any;
+    let descElement: any;
+    let dnElement: any;
+    let prnsElement: any;
+
+    $: if (member.name) {
+        if ((searchBy === "display name" || sortBy === "display name") && member.display_name) htmlName = toHTML(member.display_name);
+        else htmlName = toHTML(member.name);
+    }
+    if (settings && settings.appearance.twemoji) {
+        if (nameElement) twemoji.parse(nameElement);
+        if (descElement) twemoji.parse(descElement);
+        if (dnElement) twemoji.parse(dnElement);
+        if (prnsElement) twemoji.parse(prnsElement);
+    }
+
+    let avatarOpen = false;
+    const toggleAvatarModal = () => (avatarOpen = !avatarOpen);
+
+    $: icon_url = member.avatar_url ? member.avatar_url : default_avatar;
+    $: icon_url_resized = resizeMedia(icon_url);
+
+    let altText = `member ${member.name} avatar`;
+    
+    let pageLink = isPublic ? `/profile/m/${member.id}` : `/dash/m/${member.id}`;
+    
+    const dispatch = createEventDispatcher();
+
+    function update(member: Member) {
+        dispatch('update', member);
+    }
+
+    async function submit() {
+        let data = input;
+        err = [];
+
+        if (data.color && !/^#?[A-Fa-f0-9]{6}$/.test(input.color)) {
+            err.push(`"${data.color}" is not a valid color, the color must be a 6-digit hex code. (example: #ff0000)`);
+        } else if (data.color) {
+            if (data.color.startsWith("#")) {
+                data.color = input.color.slice(1, input.color.length);
+            }
+        }
+
+        // trim all string fields
+        Object.keys(data).forEach(k => data[k] = typeof data[k] == "string" ? data[k].trim() : data[k]);
+
+        err = err;
+        if (err.length > 0) return;
+
+        loading = true;
+        try {
+            let res = await api().members(member.id).patch({data});
+            update({...member, ...res});
+            success = true;
+        } catch (error) {
+            console.log(error);
+            err.push(error.message);
+            err = err;
+        }
+        loading = false;
+    }
+
+    $: groupList = groups && groups.filter(g => g.members && g.members.includes(member.uuid)).sort((a, b) => a.name.localeCompare(b.name)) || [];
+    let listGroupElements = [];
+
+    $: if (view !== "edit") {
+        err = [];
+        success = false;
+    }
+</script>
+
+<Card class="mb-4 pb-3" style={`height: 27.5rem; ${member.color && `border-bottom: 4px solid #${member.color}`}`}>
+    <CardHeader>
+        <CardTitle class="d-flex justify-content-center align-middle w-100 mb-0">
+            <div class="icon d-inline-block">
+                <slot name="icon" />
+            </div>
+            <span bind:this={nameElement} style="vertical-align: middle; margin-bottom: 0;">{@html htmlName} ({member.id})</span>
+        </CardTitle>
+    </CardHeader>
+    <div class="card-body d-block hide-scrollbar" style="flex: 1; overflow: auto;">
+        {#if view === "card"}
+        <img style="cursor: pointer;" tabindex={0} on:keydown={(event) => {if (event.key === "Enter") {avatarOpen = true}}} on:click={toggleAvatarModal} class="rounded avatar mx-auto w-100 h-auto mb-2" src={icon_url_resized} alt={altText}/>
+        <Modal isOpen={avatarOpen} toggle={toggleAvatarModal}>
+            <div slot="external" on:click={toggleAvatarModal} style="height: 100%;  max-width: 640px; width: 100%; margin-left: auto; margin-right: auto; display: flex;">
+                <img class="d-block m-auto img-thumbnail" src={icon_url} alt="Member avatar" tabindex={0}/>
+            </div>
+        </Modal>
+        {#if member.display_name}
+        <div class="text-center" bind:this={dnElement}><b>{@html htmlDisplayName}</b></div>
+        {/if}
+        {#if member.pronouns}
+        <div class="text-center" bind:this={prnsElement}>{@html htmlPronouns}</div>
+        {/if}
+        <hr style="min-height: 1px;"/>
+        <div bind:this={descElement}>
+            {@html htmlDesc}
+        </div>
+        <hr style="min-height: 1px;"/>
+        <Row>
+            <Col xs={4} class="align-items-center justify-content-center">
+                {#if !isPublic}<Button color="link" class="mt-2" on:click={() => {view = "edit"}} id={`member-${member.uuid}-edit-button-card`}><FaEdit/></Button>{/if}
+            </Col>
+            <Col xs={4} class="align-items-center justify-content-center">
+                {#if !isPublic && isDash}<Button color="link" class="mt-2 text-reset" on:click={() => {view = "groups"}} id={`member-${member.uuid}-groups-button-card`}><FaUsers/></Button>{/if}
+            </Col>
+            <Col xs={4} class="align-items-center justify-content-center">
+                <Link tabindex={-1} to={pageLink} class="text-reset"><Button color="link" class="mt-2 w-100 text-reset" id={`member-${member.uuid}-view-button-card`}><FaInfoCircle/></Button></Link> 
+            </Col>
+            {#if !isPublic}<Tooltip target={`member-${member.uuid}-edit-button-card`} placement="bottom">Edit member</Tooltip>{/if}
+            {#if !isPublic && isDash}<Tooltip target={`member-${member.uuid}-groups-button-card`} placement="bottom">View groups</Tooltip>{/if}
+            <Tooltip target={`member-${member.uuid}-view-button-card`} placement="bottom">View page</Tooltip>
+        </Row>
+        {:else if view === "groups"}
+        {#if groupList.length > 0}
+        <b class="d-block text-center w-100">Groups</b>
+        <hr style="min-height: 1px"/>
+        <ListGroup>
+            {#each groupList as group, index (group.id)}
+            <ListGroupItem class="d-flex"><span bind:this={listGroupElements[index]}><span><b>{@html toHTML(group.name)}</b> (<code>{group.id}</code>)</span></ListGroupItem>
+            {/each}
+        </ListGroup>
+        {:else}
+        <b class="d-block text-center w-100">This member is in no groups.</b>
+        {/if}
+        <hr style="min-height: 1px"/>
+        <Row>
+            <Col xs={4} class="align-items-center justify-content-center">
+                <Button color="link" class="mt-2" on:click={() => {view = "edit"}} id={`member-${member.uuid}-edit-button-groups`}><FaEdit/></Button>
+            </Col>
+            <Col xs={4} class="align-items-center justify-content-center">
+                <Button color="link" class="mt-2 text-reset" on:click={() => {view = "card"}} id={`member-${member.uuid}-back-button-groups`}><FaTimes/></Button>
+            </Col>
+            <Col xs={4} class="align-items-center justify-content-center">
+                <Link tabindex={-1} to={`./m/${member.id}`} class="text-reset"><Button color="link" class="mt-2 w-100 text-reset" id={`member-${member.uuid}-view-button-groups`}><FaInfoCircle/></Button></Link> 
+            </Col>
+            <Tooltip target={`member-${member.uuid}-edit-button-groups`} placement="bottom">Edit member</Tooltip>
+            <Tooltip target={`member-${member.uuid}-back-button-groups`} placement="bottom">Back to info</Tooltip>
+            <Tooltip target={`member-${member.uuid}-view-button-groups`} placement="bottom">View page</Tooltip>
+        </Row>
+        {:else if view === "edit"}
+            <Label>Name:</Label>
+            <Input class="mb-2" bind:value={input.name} maxlength={100} type="text" placeholder={member.name} aria-label="member name"/>
+            <Label>Avatar url:</Label>
+            <Input bind:value={input.avatar_url} maxlength={256} type="url" placeholder={member.avatar_url} aria-label="member avatar url"/>
+            <hr style="min-height: 1px" />
+            <Label>Display name:</Label>
+            <textarea class="form-control mb-2" style="resize: none; height: 1em" bind:value={input.display_name} maxlength={100} type="text" placeholder={member.display_name} aria-label="member display name" />
+            <Label>Pronouns:</Label>
+            <textarea class="form-control" style="resize: none; height: 1em" bind:value={input.pronouns} maxlength={100} type="text" placeholder={member.pronouns} aria-label="member pronouns" />
+            <hr style="min-height: 1px" />
+            <Label>Description:</Label>
+            <textarea class="form-control" style="resize: none; overflow: hidden;" bind:value={input.description} maxlength={1000} use:autoresize placeholder={member.description} aria-label="member description"/>
+            <hr style="min-height: 1px" />
+            <Label>Color:</Label>
+            <Row>
+                <Col xs={9}>
+                    <Input type="text" bind:value={input.color} aria-label="member color value"/>
+                </Col>
+                <Col class="p-0">
+                    <Input class="p-0" on:change={(e) => input.color = e.target.value.slice(1, 7)} type="color" aria-label="color picker" />
+                </Col>
+            </Row>
+            <hr style="min-height: 1px" />
+            {#if success}
+                <Alert class="m-0 mb-2" color="success">Member edited!</Alert>
+            {/if}
+            {#if err}
+                {#each err as errorMessage}
+                    <Alert class="m-0 mb-2" color="danger">{@html errorMessage}</Alert>
+                {/each}
+            {/if}
+            <Row>
+                <Col xs={4} class="align-items-center justify-content-center">
+                    <Button disabled={loading} color="link" class="mt-2 text-danger" style="height: 3rem;" on:click={() => {view = "card"}} id={`member-${member.uuid}-back-button-edit`}><FaTimes/></Button>
+                </Col>
+                <Col xs={4}>
+                </Col>
+                <Col xs={4} class="align-items-center justify-content-center">
+                    <Button disabled={loading} color="link" class="mt-2 text-success" on:click={submit} id={`member-${member.uuid}-submit-button-edit`}><FaCheck/></Button>
+                </Col>
+                <Tooltip target={`member-${member.uuid}-back-button-edit`} placement="bottom">Go back</Tooltip>
+                <Tooltip target={`member-${member.uuid}-submit-button-edit`} placement="bottom">Submit edit</Tooltip>
+            </Row>
+        {/if}
+    </div>
+</Card>
+
+<style>
+    .hide-scrollbar::-webkit-scrollbar {
+        display: none;
+    }
+
+    .hide-scrollbar {
+        scrollbar-width: none;
+    }
+
+</style>
\ No newline at end of file
diff --git a/dashboard/src/pages/Dash.svelte b/dashboard/src/pages/Dash.svelte
index ca3208d7..b69a96cc 100644
--- a/dashboard/src/pages/Dash.svelte
+++ b/dashboard/src/pages/Dash.svelte
@@ -12,20 +12,19 @@
     // 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;
-    if (params) {
-        tabPane = params.get("tab");
-    }
-    
-    if (!tabPane) {
-        tabPane = "system";
-    }
-
     
+    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) {
-        navigate(`./dash?tab=${tab}`);
+    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;
     }
 
@@ -85,15 +84,15 @@
     <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)}>
+            <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 bind:groups={groups} bind:members={members} isPublic={false} itemType={"member"}/>
+                        <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 bind:members={members} bind:groups={groups} isPublic={false} itemType={"group"}/>
+                    <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>
diff --git a/dashboard/src/pages/Group.svelte b/dashboard/src/pages/Group.svelte
index 34c455ab..02aeb3f8 100644
--- a/dashboard/src/pages/Group.svelte
+++ b/dashboard/src/pages/Group.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { Container, Row, Col, Alert, Spinner, Card, CardHeader, CardBody, CardTitle, Tooltip } from "sveltestrap";
     import Body from '../lib/group/Body.svelte';
-    import { useParams, Link, navigate } from 'svelte-navigator';
+    import { useParams, Link, navigate, useLocation } from 'svelte-navigator';
     import { onMount } from 'svelte';
     import api from "../api";
     import { Member, Group } from "../api/types";
@@ -9,7 +9,14 @@
     import FaUsers from 'svelte-icons/fa/FaUsers.svelte';
     import FaList from 'svelte-icons/fa/FaList.svelte';
     import ListPagination from '../lib/ListPagination.svelte';
-    import CardsList from '../lib/list/CardsList.svelte';
+    import ListView from '../lib/list/ListView.svelte';
+    import CardView from '../lib/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;
@@ -28,7 +35,7 @@
     let settings = JSON.parse(localStorage.getItem("pk-settings"));
 
     let currentPage = 1;
-    let itemsPerPage = settings && settings.accessibility && settings.accessibility.expandedcards ? 5 : 10;
+    let itemsPerPage = listView === "card" ? 12 : settings && settings.accessibility && settings.accessibility.expandedcards ? 5 : 10;
 
     $: indexOfLastItem = currentPage * itemsPerPage;
     $: indexOfFirstItem = indexOfLastItem - itemsPerPage;
@@ -175,8 +182,12 @@
                 </CardHeader>
             </Card>
             <ListPagination bind:currentPage bind:pageAmount />
-            <CardsList 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 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>
diff --git a/dashboard/src/pages/Member.svelte b/dashboard/src/pages/Member.svelte
index cff65d8b..4a667c1f 100644
--- a/dashboard/src/pages/Member.svelte
+++ b/dashboard/src/pages/Member.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
     import { Container, Row, Col, Alert, Spinner, Card, CardHeader, CardBody, CardTitle, Tooltip } from "sveltestrap";
     import Body from '../lib/member/Body.svelte';
-    import CardsList from '../lib/list/CardsList.svelte';
-    import { useParams, Link, navigate } from 'svelte-navigator';
+    import ListView from '../lib/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";
@@ -10,6 +10,13 @@
     import FaAddressCard from 'svelte-icons/fa/FaAddressCard.svelte'
     import FaList from 'svelte-icons/fa/FaList.svelte'
     import ListPagination from '../lib/ListPagination.svelte';
+    import CardView from '../lib/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;
@@ -29,7 +36,7 @@
     let settings = JSON.parse(localStorage.getItem("pk-settings"));
 
     let currentPage = 1;
-    let itemsPerPage = settings && settings.accessibility && settings.accessibility.expandedcards ? 5 : 10;
+    let itemsPerPage = listView === "card" ? 12 : settings && settings.accessibility && settings.accessibility.expandedcards ? 5 : 10;
 
     $: indexOfLastItem = currentPage * itemsPerPage;
     $: indexOfFirstItem = indexOfLastItem - itemsPerPage;
@@ -176,8 +183,12 @@
                 </CardHeader>
             </Card>
             <ListPagination bind:currentPage bind:pageAmount />
-            <CardsList 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 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>
diff --git a/dashboard/src/pages/Profile.svelte b/dashboard/src/pages/Profile.svelte
index dad974eb..6c38d10f 100644
--- a/dashboard/src/pages/Profile.svelte
+++ b/dashboard/src/pages/Profile.svelte
@@ -20,17 +20,20 @@
     
     let location = useLocation();
     let urlParams = $location.search && new URLSearchParams($location.search);
-    let tabPane: string;
-    if (urlParams) {
-        tabPane = urlParams.get("tab");
-    }
     
-    if (!tabPane) {
-        tabPane = "system";
-    }
+    let tabPane: string|number = urlParams && urlParams.get("tab") || "system";
+    let listView: string = urlParams && urlParams.get("view") || "list";
 
-    function navigateTo(tab: string|number) {
-        navigate(`./${id}?tab=${tab}`)
+    // 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;
@@ -70,15 +73,15 @@
                 <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)}>
+            <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 members={members} groups={groups} isPublic={true} itemType={"member"} />
+                        <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 members={members} groups={groups} isPublic={true} itemType={"group"} />
+                    <List on:viewChange={(e) => navigateTo("groups", e.detail)} members={members} groups={groups} isPublic={true} itemType={"group"} bind:view={listView} isDash={false} />
             </TabPane> 
             </TabContent>
             {/if}
diff --git a/dashboard/src/pages/Random.svelte b/dashboard/src/pages/Random.svelte
index e471faab..bd074418 100644
--- a/dashboard/src/pages/Random.svelte
+++ b/dashboard/src/pages/Random.svelte
@@ -4,7 +4,7 @@
     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 '../lib/list/CardsList.svelte';
+    import CardsList from '../lib/list/ListView.svelte';
     import api from '../api';
     import { Group, Member } from '../api/types';