less padding for list view

components/LinkViews/LinkComponents/LinkIcon.tsx

@@ -16,8 +16,8 @@ export default function LinkIcon({
   hideBackground?: boolean;
 }) {
   let iconClasses: string = clsx(
-    "rounded-md flex item-center justify-center select-none z-10 w-12 h-12",
+    "rounded flex item-center justify-center select-none z-10 w-12 h-12",
-    !hideBackground && "bg-white backdrop-blur-lg bg-opacity-50 p-1",
+    !hideBackground && "rounded-md bg-white backdrop-blur-lg bg-opacity-50 p-1",
     className
   );
 
@@ -50,23 +50,17 @@ export default function LinkIcon({
             }}
           />
         ) : (
-          <LinkPlaceholderIcon
+          <LinkPlaceholderIcon iconClasses={iconClasses} icon="bi-link-45deg" />
-            iconClasses={iconClasses}
-            icon="bi-link-45deg"
-            hideBackground={hideBackground}
-          />
         )
       ) : link.type === "pdf" ? (
         <LinkPlaceholderIcon
           iconClasses={iconClasses}
           icon="bi-file-earmark-pdf"
-          hideBackground={hideBackground}
         />
       ) : link.type === "image" ? (
         <LinkPlaceholderIcon
           iconClasses={iconClasses}
           icon="bi-file-earmark-image"
-          hideBackground={hideBackground}
         />
       ) : // : link.type === "monolith" ? (
       //   <LinkPlaceholderIcon
@@ -83,11 +77,9 @@ export default function LinkIcon({
 const LinkPlaceholderIcon = ({
   iconClasses,
   icon,
-  hideBackground,
 }: {
   iconClasses: string;
   icon: string;
-  hideBackground?: boolean;
 }) => {
   return (
     <div className={clsx(iconClasses, "aspect-square text-4xl text-[#0ea5e9]")}>

components/LinkViews/LinkComponents/LinkList.tsx

@@ -93,9 +93,9 @@ export default function LinkCardCompact({
   return (
     <>
       <div
-        className={`${selectedStyle} border relative items-center flex ${
+        className={`${selectedStyle} rounded-md border relative items-center flex ${
-          !isPWA() ? "hover:bg-base-300 p-3" : "py-3"
+          !isPWA() ? "hover:bg-base-300 px-2 py-1" : "py-1"
-        } duration-200 rounded-lg w-full`}
+        } duration-200 w-full`}
         onClick={() =>
           selectable
             ? handleCheckboxClick(link)
@@ -143,12 +143,7 @@ export default function LinkCardCompact({
           flipDropdown={flipDropdown}
         />
       </div>
-      <div
+      <div className="last:hidden rounded-none my-0 mx-1 border-t border-base-300 h-[1px]"></div>
-        className="last:hidden rounded-none"
-        style={{
-          borderTop: "1px solid var(--fallback-bc,oklch(var(--bc)/0.1))",
-        }}
-      ></div>
     </>
   );
 }

components/LinkViews/Links.tsx

@@ -142,7 +142,7 @@ export function ListView({
   placeHolderRef?: any;
 }) {
   return (
-    <div className="flex gap-1 flex-col">
+    <div className="flex flex-col">
       {links?.map((e, i) => {
         return (
           <LinkList
@@ -161,13 +161,13 @@ export function ListView({
             <div
               ref={e === 1 ? placeHolderRef : undefined}
               key={i}
-              className="flex gap-4 p-4"
+              className="flex gap-2 py-2 px-1"
             >
-              <div className="skeleton h-16 w-16"></div>
+              <div className="skeleton h-12 w-12"></div>
-              <div className="flex flex-col gap-4 w-full">
+              <div className="flex flex-col gap-3 w-full">
-                <div className="skeleton h-3 w-2/3"></div>
+                <div className="skeleton h-2 w-2/3"></div>
-                <div className="skeleton h-3 w-full"></div>
+                <div className="skeleton h-2 w-full"></div>
-                <div className="skeleton h-3 w-1/3"></div>
+                <div className="skeleton h-2 w-1/3"></div>
               </div>
             </div>
           );

components/ToggleDarkMode.tsx

@@ -1,12 +1,14 @@
 import useLocalSettingsStore from "@/store/localSettings";
 import { useEffect, useState, ChangeEvent } from "react";
 import { useTranslation } from "next-i18next";
+import clsx from "clsx";
 
 type Props = {
   className?: string;
+  align?: "left" | "right";
 };
 
-export default function ToggleDarkMode({ className }: Props) {
+export default function ToggleDarkMode({ className, align }: Props) {
   const { t } = useTranslation();
   const { settings, updateSettings } = useLocalSettingsStore();
 
@@ -26,7 +28,7 @@ export default function ToggleDarkMode({ className }: Props) {
 
   return (
     <div
-      className="tooltip tooltip-bottom"
+      className={clsx("tooltip", align ? `tooltip-${align}` : "tooltip-bottom")}
       data-tip={t("switch_to", {
         theme: settings.theme === "light" ? "Dark" : "Light",
       })}

pages/public/links/[id].tsx

@@ -1,15 +1,13 @@
 import LinkDetails from "@/components/LinkDetails";
 import { useGetLink } from "@/hooks/store/links";
 import { useRouter } from "next/router";
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import getServerSideProps from "@/lib/client/getServerSideProps";
 
 const Index = () => {
   const router = useRouter();
   const { id } = router.query;
 
-  useState;
-
   const getLink = useGetLink();
 
   useEffect(() => {