misc: misc optimizations

Xyphyn · Sep 18, 2023 · 68bd45b · 68bd45b
1 parent fe262c1
commit 68bd45b
Show file tree

Hide file tree

Showing 10 changed files with 154 additions and 96 deletions.
diff --git a/package.json b/package.json
@@ -26,6 +26,7 @@
     "markdown-it-sup": "^1.0.0",
     "nprogress": "^0.2.0",
     "postcss": "^8.4.24",
+    "rollup-plugin-visualizer": "^5.9.2",
     "svelte": "^4.2.0",
     "svelte-check": "^3.0.1",
     "svelte-hero-icons": "^5.0.0",

diff --git a/src/lib/components/lemmy/community/CommunityLink.svelte b/src/lib/components/lemmy/community/CommunityLink.svelte
@@ -7,17 +7,12 @@
   export let avatar: boolean = false
   export let name: boolean = true
   export let avatarSize: number = 24
-  export let showInstance: boolean | undefined = undefined
-
-  function linkFromCommunity(community: Community) {
-    const domain = new URL(community.actor_id).hostname
-    return `/c/${community.name}@${domain}`
-  }
+  export let showInstance: boolean = $userSettings.showInstances.community
 </script>
 
 <a
   class="items-center flex flex-row gap-2 hover:underline"
-  href={linkFromCommunity(community)}
+  href="/c/{community.name}@{new URL(community.actor_id).hostname}"
 >
   {#if avatar}
     <Avatar
@@ -30,7 +25,7 @@
 
   {#if name}
     <span class="flex gap-0">
-      {#if showInstance != undefined ? showInstance : $userSettings.showInstances.community}
+      {#if showInstance}
         <span class="font-medium">{community.title}</span>
         <span class="text-slate-500 dark:text-zinc-500 font-normal">
           @{new URL(community.actor_id).hostname}

diff --git a/src/lib/components/lemmy/inbox/PrivateMessage.svelte b/src/lib/components/lemmy/inbox/PrivateMessage.svelte
@@ -3,7 +3,6 @@
   import UserLink from '$lib/components/lemmy/user/UserLink.svelte'
   import Markdown from '$lib/components/markdown/Markdown.svelte'
   import type { PrivateMessageView } from 'lemmy-js-client'
-  import { Icon, PaperAirplane } from 'svelte-hero-icons'
 
   export let message: PrivateMessageView
 </script>
@@ -16,12 +15,6 @@
       user={message.creator}
       avatar
       avatarSize={20}
-      shownBadges={{
-        admin: true,
-        banned: true,
-        bot: true,
-        you: $profile?.user?.local_user_view.person.id == message.creator.id,
-      }}
     />
     {#if $profile?.user?.local_user_view.person.id != message.recipient.id}
       to
@@ -30,13 +23,6 @@
         user={message.recipient}
         avatar
         avatarSize={20}
-        shownBadges={{
-          admin: true,
-          banned: true,
-          bot: true,
-          you:
-            $profile?.user?.local_user_view.person.id == message.recipient.id,
-        }}
       />
     {/if}
   </div>

diff --git a/src/lib/components/lemmy/post/Post.svelte b/src/lib/components/lemmy/post/Post.svelte
@@ -11,24 +11,13 @@
   import ExpandableImage from '$lib/components/ui/ExpandableImage.svelte'
   import { bestImageURL, postLink } from '$lib/components/lemmy/post/helpers.js'
   import Empty from '$lib/components/helper/Empty.svelte'
-  import { goto } from '$app/navigation'
 
   export let post: PostView
   export let actions: boolean = true
   export let hideCommunity = false
   export let view: 'card' | 'list' | 'compact' = $userSettings.view
 
   let loaded = false
-
-  // hack because you cant use typescript types in svelte markup
-  const onclick = (
-    e: MouseEvent & {
-      currentTarget: EventTarget & HTMLDivElement
-      target: any
-    }
-  ) => {
-    if (e.target.id == post.post.id.toString()) goto(postLink(post.post))
-  }
 </script>
 
 <Material
@@ -41,17 +30,7 @@
 >
   <!-- svelte-ignore a11y-no-static-element-interactions -->
   <!-- svelte-ignore a11y-click-events-have-key-events -->
-  <div
-    id={post.post.id.toString()}
-    on:click={onclick}
-    class="relative flex flex-col gap-2.5"
-  >
-    <!-- {#if view == 'list' || view == 'compact'}
-      <div
-        class="absolute -inset-0.5 group-hover:-inset-2 group-hover:-inset-y-3 group-hover:md:-inset-4
-      transition-all rounded-xl group-hover:bg-slate-50 group-hover:dark:bg-zinc-900"
-      />
-    {/if} -->
+  <div id={post.post.id.toString()} class="relative flex flex-col gap-2.5">
     <div
       class="flex {$userSettings.leftAlign
         ? 'flex-row-reverse'

diff --git a/src/lib/components/lemmy/post/PostActions.svelte b/src/lib/components/lemmy/post/PostActions.svelte
@@ -89,13 +89,7 @@
     href="/post/{getInstance()}/{post.post.id}"
     class="!text-inherit h-8 px-3"
   >
-    <Icon
-      slot="prefix"
-      src={ChatBubbleOvalLeftEllipsis}
-      mini
-      width={16}
-      height={16}
-    />
+    <Icon slot="prefix" src={ChatBubbleOvalLeftEllipsis} mini size="16" />
     <FormattedNumber number={post.counts.comments} />
   </Button>
   <div class="ml-auto" />

diff --git a/src/lib/components/lemmy/post/PostLink.svelte b/src/lib/components/lemmy/post/PostLink.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
   import Link from '$lib/components/input/Link.svelte'
-  import { Icon, Link as LinkIcon } from 'svelte-hero-icons'
 
   export let url: string
   export let thumbnail_url: string | undefined = undefined
@@ -10,14 +9,14 @@
 <Link href={url} highlight nowrap />
 
 {#if thumbnail_url}
-<a href={url}>
-  <img
-    src={thumbnail_url}
-    class="rounded-md max-w-[300px] w-full h-auto aspect-video object-cover bg-slate-200 dark:bg-zinc-800"
-    width={600}
-    height={400}
-    alt=""
-    class:blur-3xl={nsfw}
-  />
-</a>
+  <a href={url}>
+    <img
+      src={thumbnail_url}
+      class="rounded-md max-w-[300px] w-full h-auto aspect-video object-cover bg-slate-200 dark:bg-zinc-800"
+      width={600}
+      height={400}
+      alt=""
+      class:blur-3xl={nsfw}
+    />
+  </a>
 {/if}
diff --git a/src/lib/components/lemmy/post/PostMeta.svelte b/src/lib/components/lemmy/post/PostMeta.svelte
@@ -6,16 +6,13 @@
   import RelativeDate from '$lib/components/util/RelativeDate.svelte'
   import type { Community, Person } from 'lemmy-js-client'
   import {
-    ArrowTrendingDown,
     Bookmark,
     Icon,
-    InformationCircle,
     LockClosed,
     Megaphone,
     Trash,
   } from 'svelte-hero-icons'
   import { getInstance } from '$lib/lemmy.js'
-  import { userSettings } from '$lib/settings.js'
 
   export let community: Community | undefined = undefined
   export let user: Person | undefined = undefined

diff --git a/src/lib/components/lemmy/user/UserLink.svelte b/src/lib/components/lemmy/user/UserLink.svelte
@@ -1,34 +1,23 @@
 <script lang="ts">
-  import { profile } from '$lib/auth.js'
   import ShieldIcon from '$lib/components/lemmy/moderation/ShieldIcon.svelte'
   import Avatar from '$lib/components/ui/Avatar.svelte'
   import { userSettings } from '$lib/settings.js'
   import type { Person } from 'lemmy-js-client'
-  import { Badge } from 'mono-svelte'
   import { Icon, NoSymbol } from 'svelte-hero-icons'
 
   export let user: Person
   export let avatar: boolean = false
   export let avatarSize: number = 24
   export let badges: boolean = true
   export let inComment: boolean = false
-  export let showInstance: boolean = false
-  export let shownBadges = {
-    admin: true,
-    you: false,
-    bot: true,
-    banned: true,
-  }
-
-  function linkFromCommunity(user: Person) {
-    const domain = new URL(user.actor_id).hostname
-    return `/u/${user.name}@${domain}`
-  }
+  export let showInstance: boolean =
+    $userSettings.showInstances.user ||
+    ($userSettings.showInstances.comments && inComment)
 </script>
 
 <a
   class="items-center inline-flex flex-row gap-1 hover:underline"
-  href={linkFromCommunity(user)}
+  href="/u/${user.name}@${new URL(user.actor_id).hostname}"
 >
   {#if avatar}
     <Avatar url={user.avatar} alt={user.name} width={avatarSize} />
@@ -39,36 +28,27 @@
     class:text-red-500={user.admin}
     class:font-bold={user.admin}
   >
-    <span
-      class:font-medium={($userSettings.showInstances.comments && inComment) ||
-        $userSettings.showInstances.user ||
-        showInstance}
-    >
-      {$userSettings.displayNames ? user.display_name ?? user.name : user.name}
+    <span class:font-medium={showInstance}>
+      {user.name}
     </span>
-    {#if $userSettings.showInstances.user || ($userSettings.showInstances.comments && inComment) || showInstance}
+    {#if showInstance}
       <span class="text-slate-500 dark:text-zinc-500 font-normal">
         @{new URL(user.actor_id).hostname}
       </span>
     {/if}
   </span>
   {#if badges}
-    {#if shownBadges.you}
-      <Badge color="green-subtle" label="You" class="text-[10px] px-1 py-[1px]">
-        You
-      </Badge>
-    {/if}
-    {#if shownBadges.admin && user.admin}
+    {#if user.admin}
       <div class="text-red-500" title="Admin">
         <ShieldIcon width={12} filled />
       </div>
     {/if}
-    {#if shownBadges.banned && user.banned}
+    {#if user.banned}
       <div class="text-red-500" title="Banned">
         <Icon src={NoSymbol} mini size="12" />
       </div>
     {/if}
-    {#if shownBadges.bot && user.bot_account}
+    {#if user.bot_account}
       <div class="text-blue-500 font-bold" title="Bot">BOT</div>
     {/if}
   {/if}

diff --git a/vite.config.ts b/vite.config.ts
@@ -1,6 +1,7 @@
 import { sveltekit } from '@sveltejs/kit/vite'
 import { defineConfig, type PluginOption } from 'vite'
 import { SvelteKitPWA } from '@vite-pwa/sveltekit'
+import { visualizer } from 'rollup-plugin-visualizer'
 
 export default defineConfig({
   plugins: [
@@ -30,6 +31,9 @@ export default defineConfig({
         start_url: '/',
       },
     }),
+    visualizer({
+      template: 'network',
+    }) as PluginOption,
   ],
 
   define: {