add collapsable toolbar

Author: RobPruzan

packages/scan/src/auto.ts

@@ -6,7 +6,9 @@ import { IS_CLIENT } from '~web/utils/constants';
 import { scan } from './index';
 
 if (IS_CLIENT) {
-  scan();
+  scan({
+    dangerouslyForceRunInProduction: true
+  });
   window.reactScan = scan;
 }
 

packages/scan/src/web/assets/css/styles.tailwind.css

@@ -26,7 +26,7 @@
   }
 
   &::-webkit-scrollbar-thumb:hover {
-    background: rgba(255, 255, 255, .4);
+    background: rgba(255, 255, 255, 0.4);
   }
 
   &::-webkit-scrollbar-corner {
@@ -42,7 +42,6 @@
   }
 }
 
-
 button {
   @apply hover:bg-none;
   @apply outline-none;
@@ -112,9 +111,13 @@ svg {
    * text rendering. The new properties work together to force proper
    * GPU acceleration without z-index side effects:
    */
-  transform: translate3d(0, 0, 0);      /* Forces GPU acceleration without causing stacking issues */
-  backface-visibility: hidden;          /* Prevents blurry text during transforms */
-  perspective: 1000;                    /* Creates proper 3D context for crisp text */
+  transform: translate3d(
+    0,
+    0,
+    0
+  ); /* Forces GPU acceleration without causing stacking issues */
+  backface-visibility: hidden; /* Prevents blurry text during transforms */
+  perspective: 1000; /* Creates proper 3D context for crisp text */
   -webkit-transform-style: preserve-3d; /* Ensures consistent text rendering across browsers */
   transform-style: preserve-3d;
 }
@@ -263,15 +266,17 @@ svg {
   }
 
   &:before {
-    content: '';
+    content: "";
     @apply absolute;
     @apply inset-0;
     @apply -translate-x-full;
     animation: shimmer 2s infinite;
-    background: linear-gradient(to right,
+    background: linear-gradient(
+      to right,
       transparent,
       rgba(142, 97, 227, 0.3),
-      transparent);
+      transparent
+    );
   }
 }
 
@@ -348,8 +353,12 @@ svg {
 }
 
 @keyframes blink {
-  from { @apply opacity-100; }
-  to { @apply opacity-0; }
+  from {
+    @apply opacity-100;
+  }
+  to {
+    @apply opacity-0;
+  }
 }
 
 .react-scan-arrow {
@@ -380,7 +389,7 @@ svg {
   @apply overflow-hidden;
 
   &:before {
-    content: '';
+    content: "";
     @apply absolute top-0 left-0;
     @apply w-[1px] h-full;
     @apply bg-gray-500/30;
@@ -393,7 +402,7 @@ svg {
   @apply py-2 px-4;
   @apply text-[#888];
 
-  >div {
+  > div {
     @apply flex items-center justify-between;
     @apply transition-colors duration-300;
   }
@@ -427,7 +436,7 @@ svg {
   }
 
   input:checked {
-    +div {
+    + div {
       @apply bg-[#5f3f9a];
 
       &::before {
@@ -438,7 +447,7 @@ svg {
     }
   }
 
-  >div {
+  > div {
     @apply absolute inset-1;
     @apply bg-neutral-700;
     @apply rounded-full;
@@ -602,7 +611,6 @@ svg {
   }
 }
 
-
 .tree-node-search-highlight {
   @apply truncate;
 
@@ -663,15 +671,13 @@ svg {
     &::before {
       @apply bottom-0 translate-y-full;
     }
-
   }
 
   &.is-open {
     @apply translate-y-0;
   }
 }
 
-
 .react-scan-header-item {
   @apply absolute inset-0 -translate-y-[200%];
   @apply transition-transform duration-300;
@@ -681,12 +687,11 @@ svg {
   }
 }
 
-.react-scan-components-tree:has(.resize-v-line:hover, .resize-v-line:active) .tree {
+.react-scan-components-tree:has(.resize-v-line:hover, .resize-v-line:active)
+  .tree {
   overflow: hidden;
 }
 
-
-
 .react-scan-expandable {
   display: grid;
   grid-template-rows: 0fr;
@@ -702,4 +707,4 @@ svg {
     grid-template-rows: 1fr;
     transition-duration: 100ms;
   }
-}
+}

packages/scan/src/web/constants.ts

@@ -7,4 +7,5 @@ export const MIN_SIZE = {
 
 export const MIN_CONTAINER_WIDTH = 240;
 
-export const LOCALSTORAGE_KEY = 'react-scan-widget-settings-v2';
+export const LOCALSTORAGE_KEY = "react-scan-widget-settings-v2";
+export const LOCALSTORAGE_COLLAPSED_KEY = "react-scan-widget-collapsed-v1";

packages/scan/src/web/state.ts

@@ -1,21 +1,23 @@
-import { signal } from '@preact/signals';
+import { signal } from "@preact/signals";
 import {
   LOCALSTORAGE_KEY,
   MIN_CONTAINER_WIDTH,
   MIN_SIZE,
   SAFE_AREA,
-} from './constants';
-import { IS_CLIENT } from './utils/constants';
-import { readLocalStorage, saveLocalStorage } from './utils/helpers';
-import type { Corner, WidgetConfig, WidgetSettings } from './widget/types';
+  LOCALSTORAGE_COLLAPSED_KEY,
+} from "./constants";
+import { IS_CLIENT } from "./utils/constants";
+import { readLocalStorage, saveLocalStorage } from "./utils/helpers";
+import type { Corner, WidgetConfig, WidgetSettings } from "./widget/types";
+import type { CollapsedPosition } from "./widget/types";
 
 export const signalIsSettingsOpen = /* @__PURE__ */ signal(false);
 export const signalRefWidget = /* @__PURE__ */ signal<HTMLDivElement | null>(
-  null,
+  null
 );
 
 export const defaultWidgetConfig = {
-  corner: 'bottom-right' as Corner,
+  corner: "bottom-right" as Corner,
   dimensions: {
     isFullWidth: false,
     isFullHeight: false,
@@ -90,24 +92,30 @@ export interface SlowDowns {
 
 export type WidgetStates =
   | {
-      view: 'none';
+      view: "none";
     }
   | {
-      view: 'inspector';
+      view: "inspector";
       // extra params
     }
   // | {
   //     view: 'settings';
   //     // extra params
   //   }
   | {
-      view: 'notifications';
+      view: "notifications";
       // extra params
     };
 // | {
 //     view: 'summary';
 //     // extra params
 //   };
 export const signalWidgetViews = signal<WidgetStates>({
-  view: 'none',
+  view: "none",
 });
+
+const storedCollapsed = readLocalStorage<CollapsedPosition | null>(
+  LOCALSTORAGE_COLLAPSED_KEY
+);
+export const signalWidgetCollapsed =
+  /* @__PURE__ */ signal<CollapsedPosition | null>(storedCollapsed ?? null);