bug reports

Author: jaimegh-es

components/main/bugs-report.tsx

@@ -0,0 +1,157 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Bug, Github, AlertCircle } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useResolvedLanguage } from "@/store";
+import { cn } from "@/lib/utils";
+
+interface BugItem {
+  title: string;
+  phase: string;
+  avoid: string;
+  description: string;
+}
+
+/**
+ * BugsReport Component
+ * Displays a list of known issues and their status, loaded from a localized markdown file.
+ * Includes a link to report new issues on GitHub.
+ */
+export function BugsReport() {
+  const t = useTranslations();
+  const locale = useResolvedLanguage();
+  const [bugs, setBugs] = useState<BugItem[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    // Determine which file to fetch based on locale
+    const fileLocale = locale.startsWith("es") ? "es" : "en";
+    
+    setIsLoading(true);
+    fetch(`/data/known-bugs.${fileLocale}.md`)
+      .then((res) => {
+        if (!res.ok) throw new Error("Failed to load bugs");
+        return res.text();
+      })
+      .then((text) => {
+        const parsedBugs = parseMarkdown(text);
+        setBugs(parsedBugs);
+      })
+      .catch((err) => {
+        console.error("Error loading bugs:", err);
+        // If localized version fails, try English as fallback
+        if (fileLocale !== "en") {
+          fetch("/data/known-bugs.en.md")
+            .then(res => res.text())
+            .then(text => setBugs(parseMarkdown(text)))
+            .catch(e => console.error("Fallback error:", e));
+        }
+      })
+      .finally(() => setIsLoading(false));
+  }, [locale]);
+
+  /**
+   * Parses the markdown content into a list of BugItem objects.
+   * Expected format:
+   * ### Title
+   * - **Phase**: status
+   * - **Avoid**: tip
+   * - **Description**: details
+   */
+  const parseMarkdown = (text: string): BugItem[] => {
+    const sections = text.split("###").slice(1);
+    return sections.map((section) => {
+      const lines = section.split("\n");
+      const title = lines[0].trim();
+      
+      const getValue = (key: string) => {
+        const line = lines.find(l => l.includes(`**${key}**:`) || l.includes(`**${key}**: `));
+        if (!line) return "";
+        return line.split(`**${key}**:`)[1]?.trim() || "";
+      };
+
+      return {
+        title,
+        phase: getValue("Phase"),
+        avoid: getValue("Avoid"),
+        description: getValue("Description")
+      };
+    });
+  };
+
+  if (!isLoading && bugs.length === 0) return null;
+
+  return (
+    <section className="mt-12 p-8 bg-muted/20 dark:bg-white/5 border border-border rounded-2xl animate-in fade-in slide-in-from-bottom-2 duration-700">
+      <div className="flex flex-col md:flex-row md:items-center justify-between gap-6 mb-8">
+        <div>
+          <h2 className="text-xl font-bold flex items-center gap-2.5">
+            <Bug className="w-6 h-6 text-primary" />
+            {t("knownBugsTitle")}
+          </h2>
+          <p className="text-sm text-text-secondary mt-1.5 max-w-lg">
+            {t("knownBugsDesc")}
+          </p>
+        </div>
+        <a
+          href="https://github.com/InledGroup/office/issues"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="flex items-center justify-center gap-2.5 px-6 py-3 bg-zinc-900 dark:bg-white text-white dark:text-zinc-900 rounded-xl hover:opacity-90 transition-all font-bold text-sm shadow-sm"
+        >
+          <Github className="w-5 h-5" />
+          {t("reportOnGithub")}
+        </a>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
+        {isLoading ? (
+          Array.from({ length: 3 }).map((_, i) => (
+            <div key={i} className="h-40 bg-muted/40 animate-pulse rounded-xl" />
+          ))
+        ) : (
+          bugs.map((bug, i) => (
+            <div key={i} className="p-5 bg-background border border-border rounded-xl shadow-sm hover:border-primary/40 transition-all group flex flex-col h-full">
+              <h3 className="font-bold text-sm mb-4 flex items-start gap-2.5 leading-snug">
+                <AlertCircle className="w-4 h-4 text-amber-500 shrink-0 mt-0.5" />
+                {bug.title}
+              </h3>
+              
+              <div className="space-y-3.5 mt-auto">
+                <div className="flex items-center gap-2 text-[11px]">
+                  <span className="font-bold text-text-secondary uppercase tracking-wider w-24 shrink-0">{t("bugPhase")}:</span>
+                  <span className={cn(
+                    "px-2.5 py-0.5 rounded-full font-bold",
+                    bug.phase.toLowerCase().includes("solucionado") || bug.phase.toLowerCase().includes("fixed") 
+                      ? "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400"
+                      : bug.phase.toLowerCase().includes("progreso") || bug.phase.toLowerCase().includes("progress") || bug.phase.toLowerCase().includes("investigando") || bug.phase.toLowerCase().includes("investigating")
+                      ? "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400"
+                      : "bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400"
+                  )}>
+                    {bug.phase}
+                  </span>
+                </div>
+
+                <div className="flex items-start gap-2 text-[11px]">
+                  <span className="font-bold text-text-secondary uppercase tracking-wider w-24 shrink-0">{t("bugAvoid")}:</span>
+                  <p className="text-text-secondary font-medium leading-relaxed italic">
+                    "{bug.avoid}"
+                  </p>
+                </div>
+
+                {bug.description && (
+                  <div className="pt-3 border-t border-border/40">
+                    <p className="text-[11px] text-text-secondary/80 leading-relaxed italic">
+                      {bug.description}
+                    </p>
+                  </div>
+                )}
+              </div>
+            </div>
+          ))
+        )}
+      </div>
+    </section>
+  );
+}

components/main/open-view.tsx

@@ -11,6 +11,7 @@ import { FilePickerCard } from "@/components/file-picker-card";
 import { DocumentIcon } from "@/components/document-icon";
 import { getDocConfig } from "@/lib/document-types";
 import { useAppStore } from "@/store";
+import { BugsReport } from "./bugs-report";
 import {
   getRecentFiles,
   openRecentFile,
@@ -285,6 +286,9 @@ export function OpenView() {
           </div>
         )}
       </section>
+
+      {/* Known Bugs & Issues Section */}
+      <BugsReport />
     </div>
   );
 }

messages/en.json

@@ -142,5 +142,11 @@
   "W2sXxa": "Search for templates (e.g. 'Resume', 'Report', 'Pitch')...",
   "sc2DN9": "Use Template",
   "F03jGl": "No templates found matching your criteria.",
-  "jKKg2o": "Clear all filters"
+  "jKKg2o": "Clear all filters",
+  "knownBugsTitle": "Known Bugs & Issues",
+  "knownBugsDesc": "Tracking our progress and helping you avoid common pitfalls",
+  "reportOnGithub": "Report on GitHub",
+  "bugPhase": "Phase",
+  "bugAvoid": "How to avoid",
+  "bugDescription": "Description"
 }

messages/es.json

@@ -142,5 +142,11 @@
   "W2sXxa": "Buscar plantillas (ej. 'Currículum', 'Informe', 'Presentación')...",
   "sc2DN9": "Usar plantilla",
   "F03jGl": "No se encontraron plantillas que coincidan con tus criterios.",
-  "jKKg2o": "Limpiar todos los filtros"
+  "jKKg2o": "Limpiar todos los filtros",
+  "knownBugsTitle": "Errores Conocidos y Problemas",
+  "knownBugsDesc": "Rastreamos nuestro progreso y te ayudamos a evitar problemas comunes",
+  "reportOnGithub": "Reportar en GitHub",
+  "bugPhase": "Fase",
+  "bugAvoid": "Cómo evitar",
+  "bugDescription": "Descripción"
 }

pnpm-workspace.yaml

@@ -0,0 +1,8 @@
+allowBuilds:
+  '@parcel/watcher': set this to true or false
+  '@swc/core': set this to true or false
+  core-js: set this to true or false
+  electron: set this to true or false
+  electron-winstaller: set this to true or false
+  sharp: set this to true or false
+  unrs-resolver: set this to true or false

public/data/known-bugs.en.md

@@ -0,0 +1,16 @@
+### Cannot save files as PDFs from templates
+- **Phase**: Investigating
+- **Avoid**: Export to HTML or Word and use IlovePDF to convert to PDF
+- **Description**: ..
+
+### Infinite loading when pasting images from external sites
+- **Phase**: Fixed
+- **Avoid**: This is due to native browser restrictions called CORS. It is unavoidable if we want to maintain product privacy. To work around this, download the image you want to paste and upload it from the editor dialog.
+
+- **Description**: The image loads indefinitely.
+
+### Problems with custom fonts when exporting to PDF
+- **Phase**: Pending
+- **Avoid**: No solution at this time; we are working on it.
+
+- **Description**: The solution would be to import the fonts from Google Fonts.

public/data/known-bugs.es.md

@@ -0,0 +1,14 @@
+### No se pueden guardar como PDF archivos a partir de plantillas
+- **Phase**: Investigando
+- **Avoid**: Exporta en HTML o Word y usa IlovePDF para convertir a PDF
+- **Description**: ..
+
+### Carga infinita al pegar imagenes de sitios externos
+- **Phase**: Solucionado
+- **Avoid**: Esto se debe a restricciones nativas del navegador llamadas CORS. Es inevitable si queremos seguir manteniendo la privacidad de los productos. Para solucionarlo, descargue la imagen que desdea pegar y súbala desde el diálogo del editor .
+- **Description**: Se queda cargando de manera infinita la imagen.
+
+### Problemas con fuentes personalizadas en exportación a PDF
+- **Phase**: Pendiente
+- **Avoid**: No tiene solución por ahora, estamos trabajando en ello.
+- **Description**: La solución consistiría en importar las fuentes de Google Fonts.

public/fonts-ttf/.cache/pkg/282c93e4113a05841f827943c9f6cd6d4188bfda819ab562b27b278d2fcebfda/sharp/build/Release/sharp-linux-x64.node

@@ -0,0 +1,44 @@
+// Copyright 2013 Lovell Fuller and others.
+// SPDX-License-Identifier: Apache-2.0
+
+'use strict';
+
+const url = require('url');
+const tunnelAgent = require('tunnel-agent');
+
+const is = require('./is');
+
+const proxies = [
+  'HTTPS_PROXY',
+  'https_proxy',
+  'HTTP_PROXY',
+  'http_proxy',
+  'npm_config_https_proxy',
+  'npm_config_proxy'
+];
+
+function env (key) {
+  return process.env[key];
+}
+
+module.exports = function (log) {
+  try {
+    const proxy = new url.URL(proxies.map(env).find(is.string));
+    const tunnel = proxy.protocol === 'https:'
+      ? tunnelAgent.httpsOverHttps
+      : tunnelAgent.httpsOverHttp;
+    const proxyAuth = proxy.username && proxy.password
+      ? `${decodeURIComponent(proxy.username)}:${decodeURIComponent(proxy.password)}`
+      : null;
+    log(`Via proxy ${proxy.protocol}//${proxy.hostname}:${proxy.port} ${proxyAuth ? 'with' : 'no'} credentials`);
+    return tunnel({
+      proxy: {
+        port: Number(proxy.port),
+        host: proxy.hostname,
+        proxyAuth
+      }
+    });
+  } catch (err) {
+    return null;
+  }
+};