feat: tiny list view!

PluralKit · Oct 3, 2024 · 954e667 · 954e667
1 parent 41336e0
commit 954e667
Show file tree

Hide file tree

Showing 9 changed files with 191 additions and 20 deletions.
diff --git a/src/components/dash/groups/GroupControls.svelte b/src/components/dash/groups/GroupControls.svelte
@@ -74,10 +74,15 @@
     onclick={() => {
       toggleSetting(dash, "display", "keepOpen")
 
-      if (list.settings.view.type === ViewType.COLLAPSE && dash.settings.display?.keepOpen === true)
-        list.settings.changeView(ViewType.OPEN)
-      else if (list.settings.view.type === ViewType.OPEN && !dash.settings.display?.keepOpen)
-        list.settings.changeView(ViewType.COLLAPSE)
+      if (
+        list.settings.view.type === ViewType.COLLAPSE &&
+        dash.settings.display?.keepOpen === true
+      ) {
+        list.settings.viewType = ViewType.OPEN
+      } else if (list.settings.view.type === ViewType.OPEN && !dash.settings.display?.keepOpen) {
+        list.settings.viewType = ViewType.COLLAPSE
+      }
+      list.settings.changeView()
 
       list.paginate()
     }}
@@ -114,8 +119,9 @@
     <select
       class="input input-sm input-bordered join-item flex-1"
       id="member-list-view"
-      onchange={(e: Event) => {
-        list.settings.changeView((e.target as HTMLSelectElement).value as ViewType)
+      bind:value={list.settings.viewType}
+      onchange={() => {
+        list.settings.changeView()
         list.paginate()
       }}
     >

diff --git a/src/components/dash/groups/GroupList.svelte b/src/components/dash/groups/GroupList.svelte
@@ -5,17 +5,20 @@
   import ItemCollapse from "../ItemCollapse.svelte"
   import Pagination from "../Pagination.svelte"
   import GroupCreate from "./create/GroupCreate.svelte"
+  import GroupTiny from "./GroupTiny.svelte"
 
   let {
     list,
     memberList,
     privacyMode,
     initialMembers,
+    wide = dash.settings.display?.forceControlsAtTop === true,
   }: {
     list: DashList<Group>
     memberList: DashList<Member>
     privacyMode: PrivacyMode
     initialMembers?: Member[]
+    wide?: boolean
   } = $props()
 
   let fetching = $state(false)
@@ -59,6 +62,16 @@
       forceOpen={list.settings.view.type === ViewType.OPEN}
     />
   {/each}
+{:else if list.settings.view.type === ViewType.TINY}
+  <div class="flex justify-center">
+    <div
+      class={`grid justify-start mx-auto w-full gap-3 grid-cols-2 max-w-96 sm:max-w-none sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 ${!wide ? "xl:grid-cols-4" : ""}`}
+    >
+      {#each list.list.paginated as group (group.uuid)}
+        <GroupTiny {group} asPage={false} />
+      {/each}
+    </div>
+  </div>
 {/if}
 {#if list.list.processed.length === 0}
   <div class="alert bg-info/20 flex flex-col text-center">No groups found.</div>

diff --git a/src/components/dash/groups/GroupTiny.svelte b/src/components/dash/groups/GroupTiny.svelte
@@ -0,0 +1,57 @@
+<script lang="ts">
+  import type { Group } from "$api/types"
+  import { page } from "$app/stores"
+  import { IconLock, IconShare, IconUser } from "@tabler/icons-svelte"
+
+  let {
+    group,
+    asPage,
+  }: {
+    group: Group
+    asPage: boolean
+  } = $props()
+
+  let params = $page.url.searchParams
+  if (!asPage) params.delete("tab")
+  else params.append("tab", "groups")
+
+  const link = () => {
+    if (!asPage)
+      return `/dash/g/${group.id}${params.toString().length > 0 ? `?${params.toString()}` : ""}`
+    else
+      return `/dash/${group.system}${params.toString().length > 0 ? `?${params.toString()}` : ""}`
+  }
+</script>
+
+<a
+  class={`max-w-32 self-stretch flex flex-col`}
+  href={link()}
+  aria-label={asPage ? "View group list" : "View group page"}
+>
+  <div
+    class="box rounded-lg flex flex-col gap-2 p-0 transition-all hover:scale-105 h-full"
+    style={group.color ? `border: 4px solid #${group.color}` : ""}
+  >
+    {#if group.icon}
+      <img class="rounded-t-md" src={group.icon} alt="Default avatar" />
+    {:else}
+      <img class="rounded-t-md" src="/discord_icon.svg" alt="Default avatar" />
+    {/if}
+    <div class="text-sm relative">
+      <div class="absolute -top-4 left-0 right-0 w-full flex">
+        <button class="btn btn-neutral btn-sm btn-circle mx-auto">
+          {#if !group.privacy || !group.privacy.visibility}
+            <IconUser size={20} />
+          {:else if group.privacy.visibility === "private"}
+            <IconLock size={20} />
+          {:else}
+            <IconShare size={20} />
+          {/if}
+        </button>
+      </div>
+      <div class="text-center pt-5 pb-2 px-2">
+        <span class="font-bold break-words">{group.name}</span><br />({group.id})
+      </div>
+    </div>
+  </div>
+</a>
diff --git a/src/components/dash/members/MemberControls.svelte b/src/components/dash/members/MemberControls.svelte
@@ -74,10 +74,15 @@
     onclick={() => {
       toggleSetting(dash, "display", "keepOpen")
 
-      if (list.settings.view.type === ViewType.COLLAPSE && dash.settings.display?.keepOpen === true)
-        list.settings.changeView(ViewType.OPEN)
-      else if (list.settings.view.type === ViewType.OPEN && !dash.settings.display?.keepOpen)
-        list.settings.changeView(ViewType.COLLAPSE)
+      if (
+        list.settings.view.type === ViewType.COLLAPSE &&
+        dash.settings.display?.keepOpen === true
+      ) {
+        list.settings.viewType = ViewType.OPEN
+      } else if (list.settings.view.type === ViewType.OPEN && !dash.settings.display?.keepOpen) {
+        list.settings.viewType = ViewType.COLLAPSE
+      }
+      list.settings.changeView()
 
       list.paginate()
     }}
@@ -114,8 +119,9 @@
     <select
       class="input input-sm input-bordered join-item flex-1"
       id="member-list-view"
-      onchange={(e: Event) => {
-        list.settings.changeView((e.target as HTMLSelectElement).value as ViewType)
+      bind:value={list.settings.viewType}
+      onchange={() => {
+        list.settings.changeView()
         list.paginate()
       }}
     >

diff --git a/src/components/dash/members/MemberList.svelte b/src/components/dash/members/MemberList.svelte
@@ -5,17 +5,20 @@
   import ItemCollapse from "../ItemCollapse.svelte"
   import Pagination from "../Pagination.svelte"
   import MemberCreate from "./create/MemberCreate.svelte"
+  import MemberTiny from "./MemberTiny.svelte"
 
   let {
     list,
     groupList,
     privacyMode,
     initialGroups = [],
+    wide = dash.settings.display?.forceControlsAtTop === true,
   }: {
     list: DashList<Member>
     groupList: DashList<Group>
     privacyMode: PrivacyMode
     initialGroups?: Group[]
+    wide?: boolean
   } = $props()
 
   let fetching = $state(false)
@@ -57,6 +60,16 @@
       forceOpen={list.settings.view.type === ViewType.OPEN}
     />
   {/each}
+{:else if list.settings.view.type === ViewType.TINY}
+  <div class="flex justify-center">
+    <div
+      class={`grid justify-start mx-auto w-full gap-3 grid-cols-2 max-w-96 sm:max-w-none sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 ${!wide ? "xl:grid-cols-4" : ""}`}
+    >
+      {#each list.list.paginated as member (member.uuid)}
+        <MemberTiny {member} asPage={false} />
+      {/each}
+    </div>
+  </div>
 {/if}
 {#if list.list.processed.length === 0}
   <div class="alert bg-info/20 flex flex-col text-center">No members found.</div>

diff --git a/src/components/dash/members/MemberTiny.svelte b/src/components/dash/members/MemberTiny.svelte
@@ -0,0 +1,61 @@
+<script lang="ts">
+  import type { Member } from "$api/types"
+  import { page } from "$app/stores"
+  import { IconLock, IconShare, IconUser } from "@tabler/icons-svelte"
+
+  let {
+    member,
+    asPage,
+  }: {
+    member: Member
+    asPage: boolean
+  } = $props()
+
+  let params = $page.url.searchParams
+  if (!asPage) params.delete("tab")
+  else params.append("tab", "members")
+
+  const link = () => {
+    if (!asPage)
+      return `/dash/m/${member.id}${params.toString().length > 0 ? `?${params.toString()}` : ""}`
+    else
+      return `/dash/${(member as Member).system}${params.toString().length > 0 ? `?${params.toString()}` : ""}`
+  }
+</script>
+
+<a
+  class={`self-stretch flex flex-col`}
+  href={link()}
+  aria-label={asPage ? "View member list" : "View member page"}
+>
+  <div
+    class="box rounded-lg flex flex-col gap-2 p-0 transition-all hover:scale-105 h-full"
+    style={member.color ? `border: 4px solid #${member.color}` : ""}
+  >
+    {#if member.avatar_url || member.webhook_avatar_url}
+      <img
+        class="rounded-t-md"
+        src={member.webhook_avatar_url ?? member.avatar_url}
+        alt="Default avatar"
+      />
+    {:else}
+      <img class="rounded-t-md" src="/discord_icon.svg" alt="Default avatar" />
+    {/if}
+    <div class="text-sm relative">
+      <div class="absolute -top-4 left-0 right-0 w-full flex">
+        <button class="btn btn-neutral btn-sm btn-circle mx-auto">
+          {#if !member.privacy || !member.privacy.visibility}
+            <IconUser size={20} />
+          {:else if member.privacy.visibility === "private"}
+            <IconLock size={20} />
+          {:else}
+            <IconShare size={20} />
+          {/if}
+        </button>
+      </div>
+      <div class="text-center pt-5 pb-2 px-2">
+        <span class="font-bold break-words">{member.name}</span><br />({member.id})
+      </div>
+    </div>
+  </div>
+</a>
diff --git a/src/lib/dash/settings.svelte.ts b/src/lib/dash/settings.svelte.ts
@@ -1,3 +1,5 @@
+import { dash } from "./dash.svelte"
+
 export enum ViewType {
   COLLAPSE = "collapse",
   OPEN = "open",
@@ -31,8 +33,8 @@ let availableViews: View[] = [
   },
   {
     type: ViewType.TINY,
-    itemsPerPageSelection: [24, 36, 48, 60],
-    defaultItemsPerPage: 36,
+    itemsPerPageSelection: [20, 30, 60],
+    defaultItemsPerPage: 30,
   },
   {
     type: ViewType.TEXT,
@@ -48,15 +50,21 @@ let availableViews: View[] = [
 
 export interface ListSettings {
   readonly view: View
-  changeView: (type: ViewType) => void
+  viewType: ViewType
+  changeView: () => void
   itemsPerPage: number
   currentPage: number
   filterMode: "simple" | "advanced"
   extraFields: boolean
 }
 
 export function createListSettings(): ListSettings {
-  let view: View = $state(availableViews[0])
+  let viewType: ViewType = $state(ViewType.COLLAPSE)
+  let view: View = $derived.by(() => {
+    const vv = availableViews.find((v) => v.type === viewType)
+    if (!vv) return dash?.settings.display?.keepOpen ? availableViews[1] : availableViews[0]
+    else return vv
+  })
   let itemsPerPage: number = $state(view.defaultItemsPerPage)
   let currentPage: number = $state(1)
 
@@ -67,8 +75,13 @@ export function createListSettings(): ListSettings {
     get view() {
       return view
     },
-    changeView: (type: ViewType) => {
-      view = availableViews.find((v) => v.type === type) || availableViews[0]
+    get viewType() {
+      return viewType
+    },
+    set viewType(type: ViewType) {
+      viewType = type
+    },
+    changeView: () => {
       itemsPerPage = view.defaultItemsPerPage
       currentPage = 1
     },

diff --git a/src/routes/dash/g/[gid]/+page.svelte b/src/routes/dash/g/[gid]/+page.svelte
@@ -32,6 +32,7 @@
       groupList={dash.group.groups}
       privacyMode={dash.group.privacyMode}
       initialGroups={dash.group.group ? [dash.group.group] : undefined}
+      wide={true}
     />
   </div>
 </div>
diff --git a/src/routes/dash/m/[mid]/+page.svelte b/src/routes/dash/m/[mid]/+page.svelte
@@ -20,8 +20,8 @@
     <GroupControls
       wide={true}
       simpleOnly={true}
-      list={dash.group.members}
-      privacyMode={dash.group.privacyMode}
+      list={dash.member.groups}
+      privacyMode={dash.member.privacyMode}
     />
   </div>
 
@@ -31,6 +31,7 @@
       memberList={dash.member.members}
       privacyMode={dash.member.privacyMode}
       initialMembers={dash.member.member ? [dash.member.member] : undefined}
+      wide={true}
     />
   </div>
 </div>