lint fixes

src/components/common/SidebarLayout.tsx

@@ -14,16 +14,10 @@ const SidebarLayout: Component<ParentProps<SidebarLayoutProps>> = (props) => {
   return (
     <div class="w-full h-full bg-gray-900 flex flex-col">
       {/* header */}
-      {props.header && (
+      {props.header && <div class="shrink-0">{props.header}</div>}
-        <div class="shrink-0">
-          {props.header}
-        </div>
-      )}
 
       {/* body */}
-      <div class="flex-1 overflow-y-auto">
+      <div class="flex-1 overflow-y-auto">{props.children}</div>
-        {props.children}
-      </div>
 
       {/* voice controls or other content above the user footer */}
       {props.beforeFooter}

src/components/layout/ChannelList.tsx

@@ -7,7 +7,18 @@ import {
   createSortable,
   closestCenter,
 } from "@thisbeyond/solid-dnd";
-import { Hash, Volume2, Plus, ChevronDown, FolderPlus, Mic, MicOff, Headphones, HeadphoneOff, PhoneOff } from "lucide-solid";
+import {
+  Hash,
+  Volume2,
+  Plus,
+  ChevronDown,
+  FolderPlus,
+  Mic,
+  MicOff,
+  Headphones,
+  HeadphoneOff,
+  PhoneOff,
+} from "lucide-solid";
 import {
   channels,
   categories,
@@ -297,14 +308,22 @@ const ChannelList: Component = () => {
               <>
                 <SortableChannel
                   channel={channel}
-                  isActive={channel.kind !== "Voice" && activeChannelId() === channel.id}
+                  isActive={
+                    channel.kind !== "Voice" && activeChannelId() === channel.id
+                  }
                   isInVoiceChannel={voiceChannelId() === channel.id}
                   icon={channel.kind === "Voice" ? Volume2 : Hash}
                   onClick={() => handleChannelClick(channel)}
                   ghost={getGhost(channel.id, props.channelList)}
                 />
                 {/* discord-style participant list under active voice channels */}
-                <Show when={channel.kind === "Voice" && voiceChannelId() === channel.id && voiceConnectionState() === "connected"}>
+                <Show
+                  when={
+                    channel.kind === "Voice" &&
+                    voiceChannelId() === channel.id &&
+                    voiceConnectionState() === "connected"
+                  }
+                >
                   <div class="pl-7 py-0.5">
                     <For each={voiceChannelParticipants()}>
                       {(participant) => (
@@ -496,7 +515,10 @@ const ChannelList: Component = () => {
             onClick={() => toggleDeafen()}
             title={localMediaState().deafened ? "Undeafen" : "Deafen"}
           >
-            <Show when={localMediaState().deafened} fallback={<Headphones size={16} />}>
+            <Show
+              when={localMediaState().deafened}
+              fallback={<Headphones size={16} />}
+            >
               <HeadphoneOff size={16} />
             </Show>
           </button>

src/components/layout/ChatArea.tsx

@@ -26,7 +26,9 @@ const ChatArea: Component<ChatAreaProps> = (props) => {
           <div class="flex-1 flex items-center justify-center">
             <div class="text-center text-white/30">
               <p class="text-[32px] font-bold mb-2">welcome to dusk</p>
-              <p class="text-[16px]">select a community and channel to start chatting</p>
+              <p class="text-[16px]">
+                select a community and channel to start chatting
+              </p>
             </div>
           </div>
         }