feat: pannels (#232)

Author: pivanov

packages/scan/src/core/index.ts

@@ -13,10 +13,10 @@ import type { RenderData } from 'src/core/utils';
 import { initReactScanInstrumentation } from 'src/new-outlines';
 import styles from '~web/assets/css/styles.css';
 import { ICONS } from '~web/assets/svgs/svgs';
-import type { States } from '~web/components/inspector/utils';
 import { createToolbar, scriptLevelToolbar } from '~web/toolbar';
 import { readLocalStorage, saveLocalStorage } from '~web/utils/helpers';
 import type { Outline } from '~web/utils/outline';
+import type { States } from '~web/views/inspector/utils';
 import type {
   ChangeReason,
   Render,

packages/scan/src/core/instrumentation.ts

@@ -21,15 +21,15 @@ import {
 } from 'bippy';
 import { isValidElement } from 'preact';
 import { isEqual } from '~core/utils';
-import {
-  collectContextChanges,
-  collectPropsChanges,
-  collectStateChanges,
-} from '~web/components/inspector/timeline/utils';
 import {
   RENDER_PHASE_STRING_TO_ENUM,
   type RenderPhase,
 } from '~web/utils/outline';
+import {
+  collectContextChanges,
+  collectPropsChanges,
+  collectStateChanges,
+} from '~web/views/inspector/timeline/utils';
 import {
   type Change,
   type ContextChange,

packages/scan/src/core/monitor/performance.ts

@@ -1,5 +1,5 @@
 import { type Fiber, getDisplayName } from 'bippy';
-import { getCompositeComponentFromElement } from '~web/components/inspector/utils';
+import { getCompositeComponentFromElement } from '~web/views/inspector/utils';
 import { Store } from '..';
 import type {
   PerformanceInteraction,

packages/scan/src/new-outlines/index.ts

@@ -8,9 +8,9 @@ import {
 } from 'bippy';
 import { ReactScanInternals, Store, ignoredProps } from '~core/index';
 import { createInstrumentation } from '~core/instrumentation';
-import { inspectorUpdateSignal } from '~web/components/inspector/states';
 import { readLocalStorage, removeLocalStorage } from '~web/utils/helpers';
 import { log, logIntro } from '~web/utils/log';
+import { inspectorUpdateSignal } from '~web/views/inspector/states';
 import {
   OUTLINE_ARRAY_SIZE,
   drawCanvas,

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

@@ -620,3 +620,52 @@ svg {
     @apply rounded-sm mx-[1px];
   }
 }
+
+.react-scan-toolbar-notification {
+  @apply absolute inset-x-0;
+  @apply flex items-center gap-x-2;
+  @apply p-1 pl-2 text-[10px];
+  @apply text-neutral-300;
+  @apply bg-black/90;
+  @apply transition-transform;
+
+  &:before {
+    @apply content-[''];
+    @apply absolute inset-x-0;
+    @apply bg-black;
+    @apply h-2;
+  }
+
+  &.position-top {
+    @apply top-full -translate-y-full;
+    @apply rounded-b-lg;
+
+    &::before {
+      @apply top-0 -translate-y-full;
+    }
+  }
+
+  &.position-bottom {
+    @apply bottom-full translate-y-full;
+    @apply rounded-t-lg;
+
+    &::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;
+
+  &.is-visible {
+    @apply translate-y-0;
+  }
+}

packages/scan/src/web/assets/svgs/svgs.ts

@@ -98,5 +98,12 @@ export const ICONS = `
     <rect width="18" height="11" x="3" y="11" rx="2" ry="2"/>
     <path d="M7 11V7a5 5 0 0 1 9.9-1"/>
   </symbol>
+
+  <symbol id="icon-sanil" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M2 13a6 6 0 1 0 12 0 4 4 0 1 0-8 0 2 2 0 0 0 4 0"/>
+    <circle cx="10" cy="13" r="8"/>
+    <path d="M2 21h12c4.4 0 8-3.6 8-8V7a2 2 0 1 0-4 0v6"/>
+    <path d="M18 3 19.1 5.2"/>
+  </symbol>
 </svg>
 `;