home sidebar revamp + quick actions base

AdaptChat · Jul 18, 2024 · dba2f99 · dba2f99
1 parent c57b884
commit dba2f99
Show file tree

Hide file tree

Showing 10 changed files with 266 additions and 111 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -64,7 +64,7 @@ import {ModalId, useModal} from "./components/ui/Modal";
 
 void tooltip
 
-export enum Tab { Quick, Conversations, Servers, Discover }
+export enum Tab { Quick, Conversations, Servers }
 
 function SidebarNavButton(props: {
   isActive: () => boolean,
@@ -129,25 +129,39 @@ function SidebarTopPageButton(props: {
   href: string,
   label: string,
   icon: IconElement,
-  tooltip?: boolean,
   check?: (pathname: string) => boolean,
+  expand?: (pathname: string) => boolean,
+  indicator?: number,
 }) {
   const route = useLocation()
   const navigate = useNavigate()
+  const active = () => props.check ? props.check(route.pathname) : route.pathname === props.href
+  const expand = () => props.expand ? props.expand(route.pathname) : active()
 
   return (
     <button
+      class="flex items-center justify-center gap-2 p-4 hover:bg-bg-3/80 transition-all duration-200 indicator"
       classList={{
-        "flex items-center justify-center gap-2 flex-grow px-4 py-3 rounded-lg bg-bg-2/80 hover:bg-bg-3/80 transition duration-200": true,
-        "bg-fg/10": props.check ? props.check(route.pathname) : route.pathname === props.href,
-        "flex-grow": !props.tooltip,
-        "flex-grow-0": props.tooltip,
+        "bg-fg/10": active(),
+        "bg-bg-2/80": !active(),
+        "flex-grow rounded-xl": expand(),
+        "flex-grow-0 rounded-[24px]": !expand(),
       }}
       onClick={() => navigate(props.href)}
-      use:tooltip={props.tooltip ? { content: props.label, placement: 'bottom' } : undefined}
+      use:tooltip={!expand() ? { content: props.label, placement: 'bottom' } : undefined}
     >
+      <Show when={props.indicator}>
+        <span
+          class="indicator-item indicator-bottom bg-red-600 inline-flex text-xs font-medium items-center rounded-full
+                 min-w-[18px] h-[18px] m-1.5 ring-bg-0/80 ring-[3px]"
+        >
+          <span class="min-w-[18px] text-center text-white px-1.5 py-2 font-sans">
+            {humanizePings(props.indicator!)}
+          </span>
+        </span>
+      </Show>
       <Icon icon={props.icon} title={props.label} class="w-4 h-4 fill-fg/80" />
-      {!props.tooltip && <span class="font-bold font-title text-fg/80 text-sm">{props.label}</span>}
+      {expand() && <span class="font-bold font-title text-fg/80 text-sm">{props.label}</span>}
     </button>
   )
 }
@@ -435,26 +449,21 @@ function HomeSidebar(props: { tabSignal: Signal<Tab> }) {
       <div classList={{
         "flex gap-2 transition-all": true,
         "h-0 opacity-0 p-1": searchQuery().length > 0,
-        "h-14 opacity-100 p-2": searchQuery().length <= 0,
+        "h-16 opacity-100 p-2": searchQuery().length <= 0,
       }}>
-        <SidebarTopPageButton href="/" label="Home" icon={HomeIcon} />
-        <div class="indicator">
-          <Show when={incomingFriends()?.length}>
-            <span
-              class="indicator-item indicator-bottom bg-red-600 inline-flex text-xs font-medium items-center rounded-full
-                     min-w-[18px] h-[18px] m-1.5 ring-bg-0/80 ring-[3px]"
-            >
-              <span class="min-w-[18px] text-center text-white px-1.5 py-2">
-                {humanizePings(incomingFriends()!.length)}
-              </span>
-            </span>
-          </Show>
-          <SidebarTopPageButton
-            href="/friends" label="Friends" icon={UserGroup}
-            check={(path) => path.startsWith('/friends')}
-            tooltip
-          />
-        </div>
+        <SidebarTopPageButton
+          href="/" label="Home" icon={HomeIcon}
+          expand={(path) => !path.startsWith('/friends') && !path.startsWith('/discover')}
+        />
+        <SidebarTopPageButton
+          href="/friends" label="Friends" icon={UserGroup}
+          check={(path) => path.startsWith('/friends')}
+          indicator={incomingFriends()?.length}
+        />
+        <SidebarTopPageButton
+          href="/discover" label="Discover" icon={Compass}
+          check={(path) => path.startsWith('/discover')}
+        />
       </div>
       <div class="flex mx-2 bg-bg-2/80 rounded-lg">
         <Icon icon={MagnifyingGlass} class="w-4 h-4 fill-fg/50 my-3 ml-3" />
@@ -487,7 +496,6 @@ function HomeSidebar(props: { tabSignal: Signal<Tab> }) {
           tab={Tab.Servers} icon={ServerIcon} label="All Servers" signal={props.tabSignal}
           unread={anyGuildsUnread()} pings={totalGuildMentions()}
         />
-        <SidebarTopNavButton tab={Tab.Discover} icon={Compass} label="Discover" signal={props.tabSignal} />
       </div>
       <Switch>
         <Match when={tab() === Tab.Quick}>

diff --git a/src/api/Api.ts b/src/api/Api.ts
@@ -204,6 +204,10 @@ export default class Api {
     }
     return response
   }
+
+  deleteMessage(channelId: bigint, messageId: bigint) {
+    return this.request('DELETE', `/channels/${channelId}/messages/${messageId}`)
+  }
 }
 
 export const [getApi, setApi] = createRoot(() => {

diff --git a/src/api/MessageGrouper.ts b/src/api/MessageGrouper.ts
@@ -30,6 +30,15 @@ function last<T>(array: T[]): T | undefined {
 
 const MESSAGE_HISTORY_LIMIT = 100
 
+export function authorDefault(): User {
+  return {
+    id: BigInt(0),
+    username: 'Unknown User',
+    display_name: null,
+    flags: 0,
+  }
+}
+
 /**
  * Groups messages by their author and timestamp.
  */
@@ -227,15 +236,6 @@ export default class MessageGrouper {
     }
   }
 
-  get authorDefault(): User {
-    return {
-      id: BigInt(0),
-      username: 'Unknown User',
-      display_name: null,
-      flags: 0,
-    }
-  }
-
   editMessage(id: bigint, message: Message) {
     const [groupIndex, messageIndex] = this.findCloseMessageIndex(id)
     if (groupIndex < 0) return

diff --git a/src/components/channels/ConfirmMessageDeleteModal.tsx b/src/components/channels/ConfirmMessageDeleteModal.tsx
@@ -0,0 +1,52 @@
+import {ModalTemplate, useModal} from "../ui/Modal";
+import {createSignal} from "solid-js";
+import {getApi} from "../../api/Api";
+import Icon from "../icons/Icon";
+import Trash from "../icons/svg/Trash";
+import {Message} from "../../types/message";
+import {MessagePreview} from "../messaging/Chat";
+
+type Props = {
+  message: Message,
+}
+
+export default function ConfirmMessageDeleteModal(props: Props) {
+  const api = getApi()!
+  const {hideModal} = useModal()
+
+  const [isDeleting, setIsDeleting] = createSignal<boolean>(false)
+
+  return (
+    <ModalTemplate title="Delete Message">
+      <p class="text-fg/70 text-sm mt-4 text-center">
+        Are you sure you want to delete this message?
+      </p>
+      <div class="rounded-xl overflow-y-auto max-h-[50lvh] bg-bg-3/50 mt-2 py-2">
+        <MessagePreview message={props.message} noHoverEffects />
+      </div>
+      <form
+        class="flex flex-wrap justify-end mt-4 gap-x-4"
+        onSubmit={async (event) => {
+          event.preventDefault()
+          setIsDeleting(true)
+          try {
+            await api.deleteMessage(props.message.channel_id, props.message.id)
+          } catch (err) {
+            setIsDeleting(false)
+            throw err
+          }
+          setIsDeleting(false)
+          hideModal()
+        }}
+      >
+        <button type="button" class="btn border-none btn-ghost" onClick={hideModal}>
+          Cancel
+        </button>
+        <button type="submit" class="btn btn-danger border-none" disabled={isDeleting()}>
+          <Icon icon={Trash} class="fill-fg w-4 h-4 mr-2" />
+          Delete Message
+        </button>
+      </form>
+    </ModalTemplate>
+  )
+}
diff --git a/src/components/icons/svg/EllipsisVertical.tsx b/src/components/icons/svg/EllipsisVertical.tsx
@@ -0,0 +1,10 @@
+import {JSX} from "solid-js";
+
+export default function EllipsisVertical(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 512" {...props}>      
+      {/*Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.*/}
+      <path d="M64 360a56 56 0 1 0 0 112 56 56 0 1 0 0-112zm0-160a56 56 0 1 0 0 112 56 56 0 1 0 0-112zM120 96A56 56 0 1 0 8 96a56 56 0 1 0 112 0z"/>
+    </svg>
+  )
+}
diff --git a/src/components/icons/svg/Reply.tsx b/src/components/icons/svg/Reply.tsx
@@ -0,0 +1,10 @@
+import {JSX} from "solid-js";
+
+export default function Reply(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" {...props}>      
+      {/*Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.*/}
+      <path d="M205 34.8c11.5 5.1 19 16.6 19 29.2l0 64 112 0c97.2 0 176 78.8 176 176c0 113.3-81.5 163.9-100.2 174.1c-2.5 1.4-5.3 1.9-8.1 1.9c-10.9 0-19.7-8.9-19.7-19.7c0-7.5 4.3-14.4 9.8-19.5c9.4-8.8 22.2-26.4 22.2-56.7c0-53-43-96-96-96l-96 0 0 64c0 12.6-7.4 24.1-19 29.2s-25 3-34.4-5.4l-160-144C3.9 225.7 0 217.1 0 208s3.9-17.7 10.6-23.8l160-144c9.4-8.5 22.9-10.6 34.4-5.4z"/>
+    </svg>
+  )
+}