lightnet 3.10.8 → 3.12.0

package/src/pages/details-page/utils/create-content-metadata.ts

@@ -18,6 +18,7 @@ const KNOWN_EXTENSIONS: Record<
   php: { type: "link", canBeOpened: true },
   json: { type: "source", canBeOpened: true },
   xml: { type: "source", canBeOpened: true },
+  md: { type: "source", canBeOpened: true },
   svg: { type: "image", canBeOpened: true },
   jpg: { type: "image", canBeOpened: true },
   jpeg: { type: "image", canBeOpened: true },
@@ -62,7 +63,7 @@ export function createContentMetadata({
   const fileName = hasExtension
     ? lastPathSegment.slice(0, -(extension.length + 1))
     : undefined
-  const label = customLabel ?? fileName ?? linkName
+  const label = customLabel || fileName || linkName
   const type = KNOWN_EXTENSIONS[extension]?.type ?? "link"
   const canBeOpened =
     !hasExtension || !!KNOWN_EXTENSIONS[extension]?.canBeOpened

package/src/pages/search-page/components/LoadingSkeleton.tsx

@@ -4,18 +4,25 @@ import { useI18n } from "../../../i18n/react/use-i18n"
 export default function LoadingSkeleton() {
   const { direction } = useI18n()
   return (
-    <div className="flex h-52 animate-pulse items-center overflow-hidden py-2 sm:h-64">
-      <div className="h-36 w-36 shrink-0 rounded-md bg-gray-200"></div>
-      <div className="ms-5 flex grow flex-col gap-3">
-        <div className="h-4 w-1/2 rounded-md bg-gray-200 md:h-6"></div>
-        <div className="h-4 w-3/4 rounded-md bg-gray-200 md:h-6"></div>
-        <div className="h-4 w-5/6 rounded-md bg-gray-200 md:h-6"></div>
-      </div>
-      <Icon
-        className="my-auto me-4 ms-2 hidden shrink-0 text-2xl text-gray-300 mdi--chevron-right sm:block"
-        flipIcon={direction === "rtl"}
-        ariaLabel=""
-      />
-    </div>
+    <ul>
+      {Array.from({ length: 8 }, (_, index) => (
+        <li
+          key={index}
+          className="flex h-52 animate-pulse items-center overflow-hidden py-2 sm:h-64"
+        >
+          <div className="h-36 w-36 shrink-0 rounded-md bg-gray-200"></div>
+          <div className="ms-5 flex grow flex-col gap-3">
+            <div className="h-4 w-1/2 rounded-md bg-gray-200 md:h-6"></div>
+            <div className="h-4 w-3/4 rounded-md bg-gray-200 md:h-6"></div>
+            <div className="h-4 w-5/6 rounded-md bg-gray-200 md:h-6"></div>
+          </div>
+          <Icon
+            className="my-auto me-4 ms-2 hidden shrink-0 text-2xl text-gray-300 mdi--chevron-right sm:block"
+            flipIcon={direction === "rtl"}
+            ariaLabel=""
+          />
+        </li>
+      ))}
+    </ul>
   )
 }

package/src/pages/search-page/components/SearchFilter.tsx

@@ -45,10 +45,10 @@ export default function SearchFilter({
 
   return (
     <>
-      <label className="dy-input dy-input-bordered mb-2 flex items-center gap-2 rounded-2xl">
+      <label className="mb-2 flex items-center gap-2 rounded-2xl border border-gray-300 bg-white px-4 py-3 shadow-inner outline outline-2 outline-offset-2 outline-transparent transition-all ease-in-out focus-within:outline-gray-300">
         <input
           type="search"
-          className="grow placeholder-gray-500"
+          className="grow placeholder-gray-500 focus:outline-none"
           name="search"
           ref={searchInput}
           placeholder={t("ln.search.placeholder")}

package/src/pages/search-page/components/SearchList.tsx

@@ -1,5 +1,5 @@
 import { useWindowVirtualizer } from "@tanstack/react-virtual"
-import { useEffect, useRef, useState } from "react"
+import { useCallback, useEffect, useRef, useState } from "react"
 
 import {
   createI18n,
@@ -38,11 +38,15 @@ export default function SearchList({
     mediaTypes,
   })
   const count = isLoading ? mediaItemsTotal : results.length
+  const getItemKey = useCallback(
+    (index: number) => (isLoading ? index : results[index].id),
+    [isLoading, results],
+  )
 
   const virtualizer = useWindowVirtualizer({
     count,
     estimateSize: () => rowHeight,
-    getItemKey: (index) => (isLoading ? index : results[index].id),
+    getItemKey,
     overscan: 2,
     scrollMargin: listRef.current?.offsetTop ?? 0,
   })
@@ -68,28 +72,28 @@ export default function SearchList({
   return (
     <I18nContext.Provider value={i18n}>
       <div ref={listRef} className="px-4 md:px-8">
-        <ol
-          className="relative w-full divide-y divide-gray-200"
-          style={{
-            height: `${virtualizer.getTotalSize()}px`,
-          }}
-        >
-          {virtualizer.getVirtualItems().map((virtualRow) => {
-            const item = results[virtualRow.index]
-            return (
-              <li
-                key={virtualRow.key}
-                className="absolute left-0 top-0 block w-full"
-                style={{
-                  height: `${virtualRow.size}px`,
-                  transform: `translateY(${
-                    virtualRow.start - virtualizer.options.scrollMargin
-                  }px)`,
-                }}
-              >
-                {isLoading ? (
-                  <LoadingSkeleton />
-                ) : (
+        {isLoading ? (
+          <LoadingSkeleton />
+        ) : (
+          <ol
+            className="relative w-full divide-y divide-gray-200"
+            style={{
+              height: `${virtualizer.getTotalSize()}px`,
+            }}
+          >
+            {virtualizer.getVirtualItems().map((virtualRow) => {
+              const item = results[virtualRow.index]
+              return (
+                <li
+                  key={virtualRow.key}
+                  className="absolute left-0 top-0 block w-full"
+                  style={{
+                    height: `${virtualRow.size}px`,
+                    transform: `translateY(${
+                      virtualRow.start - virtualizer.options.scrollMargin
+                    }px)`,
+                  }}
+                >
                   <SearchListItem
                     item={item}
                     showLanguage={showLanguage}
@@ -97,11 +101,11 @@ export default function SearchList({
                     languages={languages}
                     mediaTypes={mediaTypes}
                   />
-                )}
-              </li>
-            )
-          })}
-        </ol>
+                </li>
+              )
+            })}
+          </ol>
+        )}
       </div>
       {!results.length && !isLoading && (
         <div className="mt-24 text-center font-bold text-gray-500">

package/src/pages/search-page/components/Select.tsx

@@ -12,21 +12,23 @@ export default function Select({
   options,
 }: Props) {
   return (
-    <label className="dy-form-control">
-      <span className="my-2 block text-xs font-bold uppercase text-gray-500">
+    <label>
+      <span className="mb-1 mt-2 block text-xs font-bold uppercase text-gray-600">
         {label}
       </span>
-      <select
-        className="dy-select dy-select-bordered w-full rounded-xl sm:dy-select-sm"
-        value={initialValue}
-        onChange={(e) => valueChange(e.currentTarget.value)}
-      >
-        {options.map(({ id, labelText }) => (
-          <option key={id} value={id}>
-            {labelText}
-          </option>
-        ))}
-      </select>
+      <div className="rounded-2xl border border-gray-300 bg-white px-4 py-3 shadow-sm outline outline-2 outline-offset-2 outline-transparent transition-all ease-in-out focus-within:outline-gray-300 sm:p-2">
+        <select
+          className="w-full bg-white focus:outline-none sm:text-sm"
+          value={initialValue}
+          onChange={(e) => valueChange(e.currentTarget.value)}
+        >
+          {options.map(({ id, labelText }) => (
+            <option key={id} value={id}>
+              {labelText}
+            </option>
+          ))}
+        </select>
+      </div>
     </label>
   )
 }

package/src/layouts/components/PreloadReact.tsx

@@ -1,3 +0,0 @@
-export default function PreloadReact() {
-  return <></>
-}