brickwise 0.1.0 → 0.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "brickwise",
-  "version": "0.1.0",
+  "version": "0.1.5",
   "description": "App local para analizar la rentabilidad de alquiler de inmuebles de Property Finder UAE con el histórico real de transacciones DLD.",
   "license": "MIT",
   "author": "eljommys",

package/public/fonts/Stack_Sans_Notch/OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2025 The Stack Sans Project Authors (https://github.com/DylanYoungKoto/Stack-Sans)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/public/fonts/Stack_Sans_Notch/README.txt

@@ -0,0 +1,68 @@
+Stack Sans Notch Variable Font
+==============================
+
+This download contains Stack Sans Notch as both a variable font and static fonts.
+
+Stack Sans Notch is a variable font with this axis:
+  wght
+
+This means all the styles are contained in a single file:
+  Stack_Sans_Notch/StackSansNotch-VariableFont_wght.ttf
+
+If your app fully supports variable fonts, you can now pick intermediate styles
+that aren’t available as static fonts. Not all apps support variable fonts, and
+in those cases you can use the static font files for Stack Sans Notch:
+  Stack_Sans_Notch/static/StackSansNotch-ExtraLight.ttf
+  Stack_Sans_Notch/static/StackSansNotch-Light.ttf
+  Stack_Sans_Notch/static/StackSansNotch-Regular.ttf
+  Stack_Sans_Notch/static/StackSansNotch-Medium.ttf
+  Stack_Sans_Notch/static/StackSansNotch-SemiBold.ttf
+  Stack_Sans_Notch/static/StackSansNotch-Bold.ttf
+
+Get started
+-----------
+
+1. Install the font files you want to use
+
+2. Use your app's font picker to view the font family and all the
+available styles
+
+Learn more about variable fonts
+-------------------------------
+
+  https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts
+  https://variablefonts.typenetwork.com
+  https://medium.com/variable-fonts
+
+In desktop apps
+
+  https://theblog.adobe.com/can-variable-fonts-illustrator-cc
+  https://helpx.adobe.com/nz/photoshop/using/fonts.html#variable_fonts
+
+Online
+
+  https://developers.google.com/fonts/docs/getting_started
+  https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide
+  https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts
+
+Installing fonts
+
+  MacOS: https://support.apple.com/en-us/HT201749
+  Linux: https://www.google.com/search?q=how+to+install+a+font+on+gnu%2Blinux
+  Windows: https://support.microsoft.com/en-us/help/314960/how-to-install-or-remove-a-font-in-windows
+
+Android Apps
+
+  https://developers.google.com/fonts/docs/android
+  https://developer.android.com/guide/topics/ui/look-and-feel/downloadable-fonts
+
+License
+-------
+Please read the full license text (OFL.txt) to understand the permissions,
+restrictions and requirements for usage, redistribution, and modification.
+
+You can use them in your products & projects – print or digital,
+commercial or otherwise.
+
+This isn't legal advice, please consider consulting a lawyer and see the full
+license for all details.

package/src/app/favorites/page.tsx

@@ -34,6 +34,10 @@ interface FavRow {
 
 const GYM_SVG = `<svg viewBox="0 0 24 24" width="14" height="14" fill="#fff" xmlns="http://www.w3.org/2000/svg"><path d="M2 10h2v4H2zM5 8h2v8H5zM17 8h2v8h-2zM20 10h2v4h-2zM8 11h8v2H8z"/></svg>`;
 
+function matchesBedFilter(r: { bedrooms: number | null }, bedFilter: number[]): boolean {
+  return bedFilter.length === 0 || (r.bedrooms != null && bedFilter.includes(r.bedrooms));
+}
+
 function yieldColor(y: number | null): string {
   if (y == null) return "#737373";
   if (y >= 0.07) return "#059669";
@@ -88,6 +92,8 @@ export default function FavoritesMapPage() {
   const [gymsVisible, setGymsVisible] = useState(false);
   const [gymsLoading, setGymsLoading] = useState(false);
   const [gymCount, setGymCount] = useState<number | null>(null);
+  const [sortBy, setSortBy] = useState<"yield" | "price">("yield");
+  const [bedFilter, setBedFilter] = useState<number[]>([]);
 
   const mapRef = useRef<LeafletMap | null>(null);
   const leafletRef = useRef<typeof import("leaflet") | null>(null);
@@ -223,6 +229,16 @@ export default function FavoritesMapPage() {
     }
   }, [hoveredId]);
 
+  // --- Filter: dim (darker + transparent) the markers that don't match -----
+  useEffect(() => {
+    const byId = new Map((rows ?? []).map((r) => [r.id, r]));
+    for (const [id, m] of Object.entries(markersRef.current)) {
+      const r = byId.get(id);
+      const dim = !!r && !matchesBedFilter(r, bedFilter);
+      m.getElement()?.querySelector(".bw-pin")?.classList.toggle("bw-pin--dim", dim);
+    }
+  }, [bedFilter, rows, mapReady]);
+
   // --- Add-by-URL queue ----------------------------------------------------
   useEffect(() => {
     if (processing.current || queue.length === 0) return;
@@ -327,7 +343,7 @@ export default function FavoritesMapPage() {
         const mapsUrl = `https://www.google.com/maps/search/?api=1&query=${g.lat}%2C${g.lon}`;
         L.marker([g.lat, g.lon], { icon })
           .bindPopup(
-            `<b>🏋️ ${safeName}</b><br><a href="${mapsUrl}" target="_blank" rel="noopener noreferrer" style="font-size:12px">Ver en Google Maps ↗</a>`,
+            `<b>${safeName}</b><br><a href="${mapsUrl}" target="_blank" rel="noopener noreferrer" style="font-size:12px">Ver en Google Maps ↗</a>`,
             { offset: [0, -16] }
           )
           .addTo(layer);
@@ -368,6 +384,104 @@ export default function FavoritesMapPage() {
 
   const busy = queue.length > 0;
 
+  const sorted = [...(rows ?? [])].sort((a, b) =>
+    sortBy === "price"
+      ? a.price - b.price
+      : (b.gross_yield ?? -1) - (a.gross_yield ?? -1)
+  );
+  const visible = sorted.filter((r) => matchesBedFilter(r, bedFilter));
+  const dimmed = sorted.filter((r) => !matchesBedFilter(r, bedFilter));
+  const bedOptions = Array.from(
+    new Set((rows ?? []).map((r) => r.bedrooms).filter((b): b is number => b != null))
+  ).sort((a, b) => a - b);
+  const bedLabel = (b: number) => (b === 0 ? "Studio" : String(b));
+  const toggleBed = (b: number) =>
+    setBedFilter((prev) => (prev.includes(b) ? prev.filter((x) => x !== b) : [...prev, b]));
+
+  const renderCard = (r: FavRow, dim = false) => (
+    <div
+      key={r.id}
+      id={`fav-${r.id}`}
+      onMouseEnter={() => setHoveredId(r.id)}
+      onMouseLeave={() => setHoveredId(null)}
+      className={`border-b border-neutral-100 p-3 transition-colors dark:border-neutral-800 ${
+        hoveredId === r.id ? "bg-blue-50 dark:bg-neutral-800" : ""
+      } ${dim ? "opacity-40 grayscale" : ""}`}
+    >
+      <div className="flex gap-3">
+        {r.images?.[0] && (
+          // eslint-disable-next-line @next/next/no-img-element
+          <img
+            src={r.images[0].small}
+            alt=""
+            onClick={() => focus(r)}
+            className="h-16 w-24 shrink-0 cursor-pointer rounded-lg object-cover"
+            loading="lazy"
+          />
+        )}
+        <div className="min-w-0 flex-1">
+          <div className="flex items-start justify-between gap-2">
+            <button
+              onClick={() => focus(r)}
+              className="line-clamp-1 text-left font-sans text-sm font-semibold normal-case tracking-normal hover:underline"
+              title="Centrar en el mapa"
+            >
+              {r.title}
+            </button>
+            <button
+              onClick={() => remove(r.id)}
+              title="Quitar de favoritos"
+              className="shrink-0 rounded-md px-1.5 text-xs text-neutral-400 hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-950"
+            >
+              ✕
+            </button>
+          </div>
+          <div className="truncate text-xs text-neutral-500">
+            {r.tower_name} · {r.bedrooms === 0 ? "Studio" : `${r.bedrooms ?? "?"} hab`} / {r.bathrooms ?? "?"} baños ·{" "}
+            {fmtSqft(r.size_sqft)}
+          </div>
+          <div className="mt-1 flex items-center gap-2">
+            <YieldBadge value={r.gross_yield} n={r.rent_n ?? undefined} />
+            {r.asking_yield != null && (
+              <span className="text-xs text-neutral-500">s/ anuncio: {(r.asking_yield * 100).toFixed(1)} %</span>
+            )}
+          </div>
+        </div>
+      </div>
+
+      <div className="mt-2 grid grid-cols-2 gap-x-4 gap-y-0.5 text-xs text-neutral-600 dark:text-neutral-400">
+        <span>
+          Precio: <b className="text-neutral-900 dark:text-neutral-100">{fmtAED(r.price)}</b>
+        </span>
+        <span>AED/sqft: {r.price_per_sqft ? Math.round(r.price_per_sqft) : "—"}</span>
+        <span>
+          Renta mediana: {fmtAED(r.median_rent)}
+          {r.rent_n ? ` (${r.rent_n})` : ""}
+        </span>
+        <span>
+          Venta mediana: {fmtAED(r.median_sale_price)}
+          {r.buy_n ? ` (${r.buy_n})` : ""}
+        </span>
+        <span title={r.gym_name ?? undefined}>Gym: {fmtDist(r.gym_distance_m)}</span>
+        <span className="flex gap-2">
+          <Link href={`/listing/${r.id}`} className="font-medium text-blue-600 hover:underline dark:text-blue-400">
+            Ver análisis
+          </Link>
+          <a href={r.url} target="_blank" rel="noopener noreferrer" className="font-medium text-blue-600 hover:underline dark:text-blue-400">
+            PF ↗
+          </a>
+        </span>
+      </div>
+
+      <textarea
+        className="mt-2 h-9 w-full resize-none rounded-md border border-transparent bg-neutral-50 px-2 py-1 text-xs outline-none focus:border-neutral-300 dark:bg-neutral-950 dark:focus:border-neutral-700"
+        defaultValue={r.notes}
+        placeholder="notas…"
+        onBlur={(e) => saveNotes(r.id, e.target.value)}
+      />
+    </div>
+  );
+
   return (
     <div className="fixed inset-0 flex overflow-hidden">
       {/* ------------------------------------------------ sidebar */}
@@ -377,15 +491,12 @@ export default function FavoritesMapPage() {
         className="flex min-h-0 shrink-0 flex-col border-r border-neutral-200 bg-white dark:border-neutral-800 dark:bg-neutral-900"
       >
         <div className="flex items-center gap-3 border-b border-neutral-200 px-3 py-2 dark:border-neutral-800">
-          <Link href="/" className="text-sm font-bold tracking-tight">
-            🧱 Brickwise
+          <Link href="/" className="font-brand text-sm font-bold tracking-tight">
+            Brickwise
           </Link>
           <span className="ml-auto flex items-center gap-1 text-xs">
-            <Link href="/search" className="rounded-full px-2.5 py-1 font-medium text-neutral-600 hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-800">
-              🔍 Buscar
-            </Link>
-            <Link href="/" className="rounded-full px-2.5 py-1 font-medium text-neutral-600 hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-800">
-              📊 Analizados
+            <Link href="/" className="btn-font rounded-full px-2.5 py-1 font-medium text-neutral-600 hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-800">
+              Analizados
             </Link>
           </span>
         </div>
@@ -403,7 +514,7 @@ export default function FavoritesMapPage() {
                 disabled={!input.trim() || busy}
                 className="rounded-lg bg-blue-600 px-4 py-1.5 text-xs font-bold text-white hover:bg-blue-500 disabled:opacity-50"
               >
-                {busy ? `Analizando ${queue.length}…` : "＋ Añadir y analizar"}
+                {busy ? `Analizando ${queue.length}…` : "Añadir y analizar"}
               </button>
               <button
                 type="button"
@@ -415,9 +526,9 @@ export default function FavoritesMapPage() {
                   ? "Buscando…"
                   : gymCount != null
                     ? gymsVisible
-                      ? `🏋️ Ocultar (${gymCount})`
-                      : `🏋️ Mostrar (${gymCount})`
-                    : "🏋️ Gimnasios"}
+                      ? `Ocultar gyms (${gymCount})`
+                      : `Mostrar gyms (${gymCount})`
+                    : "Gimnasios"}
               </button>
               <button
                 type="button"
@@ -428,7 +539,7 @@ export default function FavoritesMapPage() {
                     : "border-neutral-300 hover:bg-neutral-100 dark:border-neutral-700 dark:hover:bg-neutral-800"
                 }`}
               >
-                ⟳ Sincronizar con PF
+                Sincronizar con PF
               </button>
             </div>
             {errors.length > 0 && (
@@ -454,7 +565,7 @@ export default function FavoritesMapPage() {
                     className="mx-0.5 inline-block cursor-grab rounded bg-neutral-900 px-2 py-0.5 font-bold text-white dark:bg-white dark:text-neutral-900"
                     draggable
                   >
-                    📌 Guardados → Brickwise
+                    Guardados a Brickwise
                   </a>
                 </li>
                 <li>
@@ -471,7 +582,7 @@ export default function FavoritesMapPage() {
                     onClick={pasteFromPf}
                     className="rounded bg-blue-600 px-2 py-0.5 font-bold text-white hover:bg-blue-500"
                   >
-                    📋 Pegar de Property Finder
+                    Pegar de Property Finder
                   </button>
                 </li>
               </ol>
@@ -488,103 +599,62 @@ export default function FavoritesMapPage() {
             <p className="animate-pulse p-4 text-sm text-neutral-500">Cargando…</p>
           ) : rows.length === 0 ? (
             <p className="p-4 text-sm text-neutral-500">
-              No hay favoritos aún. Pega arriba un enlace de Property Finder o guarda inmuebles desde{" "}
-              <Link href="/search" className="font-semibold text-blue-600 hover:underline dark:text-blue-400">
-                Buscar
-              </Link>
-              .
+              No hay favoritos aún. Pega arriba un enlace de Property Finder o usa Sincronizar con PF.
             </p>
           ) : (
-            rows.map((r) => (
-              <div
-                key={r.id}
-                id={`fav-${r.id}`}
-                onMouseEnter={() => setHoveredId(r.id)}
-                onMouseLeave={() => setHoveredId(null)}
-                className={`border-b border-neutral-100 p-3 transition-colors dark:border-neutral-800 ${
-                  hoveredId === r.id ? "bg-blue-50 dark:bg-neutral-800" : ""
-                }`}
-              >
-                <div className="flex gap-3">
-                  {r.images?.[0] && (
-                    // eslint-disable-next-line @next/next/no-img-element
-                    <img
-                      src={r.images[0].small}
-                      alt=""
-                      onClick={() => focus(r)}
-                      className="h-16 w-24 shrink-0 cursor-pointer rounded-lg object-cover"
-                      loading="lazy"
-                    />
-                  )}
-                  <div className="min-w-0 flex-1">
-                    <div className="flex items-start justify-between gap-2">
+            <>
+              {/* sort + bedroom filter */}
+              <div className="sticky top-0 z-10 flex flex-wrap items-center gap-1.5 border-b border-neutral-200 bg-white/95 px-3 py-2 backdrop-blur dark:border-neutral-800 dark:bg-neutral-900/95">
+                <span className="btn-font text-[10px] text-neutral-500">Ordenar</span>
+                {(["yield", "price"] as const).map((k) => (
+                  <button
+                    key={k}
+                    onClick={() => setSortBy(k)}
+                    className={`rounded px-2 py-0.5 text-[11px] ${
+                      sortBy === k
+                        ? "bg-neutral-900 text-white dark:bg-white dark:text-neutral-900"
+                        : "border border-neutral-300 text-neutral-600 dark:border-neutral-700 dark:text-neutral-300"
+                    }`}
+                  >
+                    {k === "yield" ? "Rentabilidad" : "Precio"}
+                  </button>
+                ))}
+                {bedOptions.length > 0 && (
+                  <>
+                    <span className="btn-font ml-2 text-[10px] text-neutral-500">Hab</span>
+                    {bedOptions.map((b) => (
                       <button
-                        onClick={() => focus(r)}
-                        className="line-clamp-1 text-left text-sm font-semibold hover:underline"
-                        title="Centrar en el mapa"
+                        key={b}
+                        onClick={() => toggleBed(b)}
+                        className={`rounded px-2 py-0.5 text-[11px] ${
+                          bedFilter.includes(b)
+                            ? "bg-blue-600 text-white"
+                            : "border border-neutral-300 text-neutral-600 dark:border-neutral-700 dark:text-neutral-300"
+                        }`}
                       >
-                        {r.title}
+                        {bedLabel(b)}
                       </button>
-                      <button
-                        onClick={() => remove(r.id)}
-                        title="Quitar de favoritos"
-                        className="shrink-0 rounded-md px-1.5 text-xs text-neutral-400 hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-950"
-                      >
-                        ✕
+                    ))}
+                    {bedFilter.length > 0 && (
+                      <button onClick={() => setBedFilter([])} className="px-1 text-[11px] text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-200">
+                        Limpiar
                       </button>
-                    </div>
-                    <div className="truncate text-xs text-neutral-500">
-                      {r.tower_name} · {r.bedrooms === 0 ? "Studio" : `${r.bedrooms ?? "?"} hab`} / {r.bathrooms ?? "?"} baños ·{" "}
-                      {fmtSqft(r.size_sqft)}
-                    </div>
-                    <div className="mt-1 flex items-center gap-2">
-                      <YieldBadge value={r.gross_yield} n={r.rent_n ?? undefined} />
-                      {r.asking_yield != null && (
-                        <span className="text-xs text-neutral-500">
-                          s/ anuncio: {(r.asking_yield * 100).toFixed(1)} %
-                        </span>
-                      )}
-                    </div>
-                  </div>
-                </div>
-
-                <div className="mt-2 grid grid-cols-2 gap-x-4 gap-y-0.5 text-xs text-neutral-600 dark:text-neutral-400">
-                  <span>
-                    Precio: <b className="text-neutral-900 dark:text-neutral-100">{fmtAED(r.price)}</b>
-                  </span>
-                  <span>AED/sqft: {r.price_per_sqft ? Math.round(r.price_per_sqft) : "—"}</span>
-                  <span>
-                    Renta mediana: {fmtAED(r.median_rent)}
-                    {r.rent_n ? ` (${r.rent_n})` : ""}
-                  </span>
-                  <span>
-                    Venta mediana: {fmtAED(r.median_sale_price)}
-                    {r.buy_n ? ` (${r.buy_n})` : ""}
-                  </span>
-                  <span title={r.gym_name ?? undefined}>Gym: {fmtDist(r.gym_distance_m)}</span>
-                  <span className="flex gap-2">
-                    <Link href={`/listing/${r.id}`} className="font-medium text-blue-600 hover:underline dark:text-blue-400">
-                      Ver análisis
-                    </Link>
-                    <a
-                      href={r.url}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="font-medium text-blue-600 hover:underline dark:text-blue-400"
-                    >
-                      PF ↗
-                    </a>
-                  </span>
-                </div>
-
-                <textarea
-                  className="mt-2 h-9 w-full resize-none rounded-md border border-transparent bg-neutral-50 px-2 py-1 text-xs outline-none focus:border-neutral-300 dark:bg-neutral-950 dark:focus:border-neutral-700"
-                  defaultValue={r.notes}
-                  placeholder="notas…"
-                  onBlur={(e) => saveNotes(r.id, e.target.value)}
-                />
+                    )}
+                  </>
+                )}
               </div>
-            ))
+
+              {visible.map((r) => renderCard(r))}
+
+              {bedFilter.length > 0 && dimmed.length > 0 && (
+                <>
+                  <div className="btn-font border-y border-neutral-200 bg-neutral-100 px-3 py-1.5 text-[10px] text-neutral-500 dark:border-neutral-800 dark:bg-neutral-950">
+                    No coinciden con el filtro ({dimmed.length})
+                  </div>
+                  {dimmed.map((r) => renderCard(r, true))}
+                </>
+              )}
+            </>
           )}
         </div>
       </aside>