config centralized

src/components/Bars.tsx

@@ -18,6 +18,7 @@ import { DarkModeToggle } from "./DarkModeToggle";
 import { SkeletonBox, SkeletonText } from "./SkeletonLoader";
 import { env } from "~/env/client";
 import { A, useNavigate, useLocation } from "@solidjs/router";
+import { BREAKPOINTS } from "~/config";
 
 function formatDomainName(url: string): string {
   const domain = url.split("://")[1]?.split(":")[0] ?? url;
@@ -67,7 +68,10 @@ export function RightBarContent() {
   const [loading, setLoading] = createSignal(true);
 
   const handleLinkClick = () => {
-    if (typeof window !== "undefined" && window.innerWidth < 768) {
+    if (
+      typeof window !== "undefined" &&
+      window.innerWidth < BREAKPOINTS.MOBILE
+    ) {
       setLeftBarVisible(false);
     }
   };
@@ -210,7 +214,10 @@ export function LeftBar() {
   const [getLostVisible, setGetLostVisible] = createSignal(false);
 
   const handleLinkClick = () => {
-    if (typeof window !== "undefined" && window.innerWidth < 768) {
+    if (
+      typeof window !== "undefined" &&
+      window.innerWidth < BREAKPOINTS.MOBILE
+    ) {
       setLeftBarVisible(false);
     }
   };
@@ -311,7 +318,7 @@ export function LeftBar() {
     if (ref) {
       // Focus trap for accessibility on mobile
       const handleKeyDown = (e: KeyboardEvent) => {
-        const isMobile = window.innerWidth < 768;
+        const isMobile = window.innerWidth < BREAKPOINTS.MOBILE;
 
         if (!isMobile || !leftBarVisible()) return;
 

src/components/Btop.tsx

@@ -1,4 +1,5 @@
 import { createSignal, onMount, onCleanup, Show } from "solid-js";
+import { BREAKPOINTS } from "~/config";
 
 interface BtopProps {
   onClose: () => void;
@@ -39,10 +40,10 @@ export function Btop(props: BtopProps) {
   onMount(() => {
     // Check if mobile
     if (typeof window !== "undefined") {
-      setIsMobile(window.innerWidth < 768);
+      setIsMobile(window.innerWidth < BREAKPOINTS.MOBILE);
 
       const handleResize = () => {
-        setIsMobile(window.innerWidth < 768);
+        setIsMobile(window.innerWidth < BREAKPOINTS.MOBILE);
       };
       window.addEventListener("resize", handleResize);
       onCleanup(() => window.removeEventListener("resize", handleResize));

src/components/TerminalErrorPage.tsx

@@ -164,14 +164,6 @@ export function TerminalErrorPage(props: TerminalErrorPageProps) {
       {/* Main content */}
       <div class="relative z-10 flex min-h-screen flex-col items-start justify-start px-4 py-16 lg:px-16">
         {/* Terminal header */}
-        <div class="mb-8 w-full max-w-4xl">
-          <div class="border-surface0 text-subtext0 flex items-center gap-2 border-b pb-2 font-mono text-sm">
-            <span class="text-green">freno@terminal</span>
-            <span class="text-subtext1">:</span>
-            <span class="text-blue">~</span>
-            <span class="text-subtext1">$</span>
-          </div>
-        </div>
 
         {/* Error Content - passed as prop */}
         {props.errorContent}

src/components/blog/TextEditor.tsx

@@ -54,6 +54,7 @@ import ruby from "highlight.js/lib/languages/ruby";
 import swift from "highlight.js/lib/languages/swift";
 import kotlin from "highlight.js/lib/languages/kotlin";
 import dockerfile from "highlight.js/lib/languages/dockerfile";
+import { BREAKPOINTS } from "~/config";
 
 const lowlight = createLowlight(common);
 
@@ -1648,7 +1649,7 @@ export default function TextEditor(props: TextEditorProps) {
             !hasSuggestion() ||
             !isFullscreen() ||
             typeof window === "undefined" ||
-            window.innerWidth >= 768
+            window.innerWidth >= BREAKPOINTS.MOBILE
           ) {
             return false;
           }
@@ -1663,7 +1664,7 @@ export default function TextEditor(props: TextEditorProps) {
             !hasSuggestion() ||
             !isFullscreen() ||
             typeof window === "undefined" ||
-            window.innerWidth >= 768
+            window.innerWidth >= BREAKPOINTS.MOBILE
           ) {
             return false;
           }
@@ -1737,7 +1738,7 @@ export default function TextEditor(props: TextEditorProps) {
         if (infillConfig() && !isInitialLoad && infillEnabled()) {
           const isMobileNotFullscreen =
             typeof window !== "undefined" &&
-            window.innerWidth < 768 &&
+            window.innerWidth < BREAKPOINTS.MOBILE &&
             !isFullscreen();
 
           // Skip auto-infill on mobile when not in fullscreen
@@ -4108,7 +4109,7 @@ export default function TextEditor(props: TextEditorProps) {
                     title={
                       infillEnabled()
                         ? typeof window !== "undefined" &&
-                          window.innerWidth < 768
+                          window.innerWidth < BREAKPOINTS.MOBILE
                           ? "AI Autocomplete: ON (swipe right to accept full)"
                           : "AI Autocomplete: ON (Ctrl/Cmd+Space to trigger manually)"
                         : "AI Autocomplete: OFF (Click to enable)"