feat: add skeleton for line inspector

src/components/app/inspector/inspector.css

@@ -0,0 +1,181 @@
+@keyframes modal-appear {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: var(--alpha-80);
+  }
+}
+
+@keyframes fade-in-and-up {
+  0% {
+    opacity: 0.4;
+    transform: translateY(24px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fade-in-and-left {
+  0% {
+    opacity: 0.4;
+    transform: translateX(24px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes text-fades-in {
+  0% {
+    color: var(--fg-muted);
+  }
+  100% {
+    color: var(--fg);
+  }
+}
+
+.modal-bg {
+  z-index: 2;
+  overscroll-behavior: contain;
+  width: 100vw;
+  height: 100vh;
+  background-color: var(--bg);
+  position: fixed;
+  max-width: none;
+  animation: modal-appear 0.125s ease;
+  animation-fill-mode: forwards;
+}
+
+.modal {
+  position: fixed;
+  background-color: var(--bg-base);
+  z-index: 3;
+  color: var(--fg-muted);
+  font-size: 16px;
+  max-width: 100vw;
+}
+
+.modal__header {
+  display: flex;
+  padding: 16px 24px;
+  align-items: center;
+  flex-direction: row;
+  justify-content: space-between;
+  border-bottom: 0.5px solid var(--toner);
+}
+
+.modal__title {
+  margin: 0;
+}
+
+.modal__article {
+  overscroll-behavior: contain;
+  overflow-y: scroll;
+}
+
+.modal__article::-webkit-scrollbar {
+  display: none;
+}
+
+.modal__article > * {
+  margin-bottom: 20px;
+}
+
+.modal__article > *:last-child {
+  margin-bottom: 0;
+}
+
+.modal__article > h2 {
+  line-height: 1.1;
+}
+
+.modal__close {
+  width: 24px;
+  height: 24px;
+  border-radius: 24px;
+  line-height: 1;
+  background-color: var(--toner);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+  border: 0.5px solid var(--toner);
+  transition:
+    background-color 0.25s ease,
+    color 0.25s ease;
+}
+
+:global(body[dir='rtl'] .modal__close) {
+  right: auto;
+  left: 2.25em;
+}
+
+.modal__close:hover {
+  background-color: var(--toner);
+  outline: 2.25px solid var(--ui);
+  outline-offset: 2.25px;
+}
+
+@media (pointer: fine) {
+  .modal {
+    width: 400px;
+    top: 6em;
+    border-radius: 1em;
+    height: calc(100vh - 8.5em);
+    margin: 0 auto;
+    animation:
+      fade-in-and-left 0.125s ease,
+      text-fades-in 0.125s ease;
+    animation-fill-mode: forwards;
+  }
+  .modal__article {
+    max-height: calc(100vh - 8.5em - 4.25em - 0.5px);
+  }
+}
+
+@media (pointer: coarse) {
+  .modal {
+    animation:
+      fade-in-and-up 0.125s ease,
+      text-fades-in 0.125s ease;
+    animation-fill-mode: forwards;
+  }
+  .modal__article {
+    max-height: 60vh;
+  }
+  .modal__close {
+    width: 35px;
+    height: 35px;
+    border-radius: 35px;
+  }
+  .modal__article > * {
+    margin-bottom: 24px;
+  }
+  @media (max-device-width: 480px) {
+    .modal {
+      width: 100%;
+      left: 0;
+      bottom: 0;
+      border-radius: 1em 1em 0 0;
+      padding-bottom: 24px;
+    }
+  }
+  @media (min-device-width: 481px) {
+    .modal {
+      width: 352px;
+      right: 24px;
+      top: 5em;
+      border-radius: 1em;
+    }
+  }
+  @media (min-device-width: 850px) {
+    .modal__article {
+      max-height: calc(100vh - 6.5em - 4.25em);
+    }
+  }
+}

src/components/app/inspector/inspector.tsx

@@ -0,0 +1,55 @@
+import {
+  component$,
+  Resource,
+  useContext,
+  useResource$,
+  useStylesScoped$,
+} from '@builder.io/qwik';
+import X from '~/components/icons/ui/x';
+import { UiContext } from '~/routes/layout-app';
+import styles from './inspector.css?inline';
+
+interface InspectorProps {
+  id: string;
+}
+
+export default component$<InspectorProps>(({ id }) => {
+  useStylesScoped$(styles);
+  const uiStore = useContext(UiContext);
+  const resource = useResource$<string>(async () => {
+    console.log(`https://shabados.com/api/l/${id}`);
+    // const res = await fetch(`https://shabados.com/api/l/${id}`, {
+    const res = await fetch(`https://shabados.com/api/f/sggs`, {
+      mode: 'no-cors',
+    });
+    const data = await res.json();
+    console.log(data);
+    return data.id as string;
+  });
+
+  return (
+    <>
+      <div class='modal-bg' onClick$={() => (uiStore.inspector = false)} />
+      <div class='modal'>
+        <article class='modal__header'>
+          <h2 class='modal__title'>{id}</h2>
+          <span
+            dir='rtl'
+            class='modal__close'
+            onClick$={() => (uiStore.inspector = false)}
+          >
+            <X />
+          </span>
+        </article>
+        <article class='modal__article'>
+          <Resource
+            value={resource}
+            onPending={() => <p>Hanji...</p>}
+            onRejected={(error) => <>Error: {error.message}</>}
+            onResolved={(asdf) => <p>{asdf}</p>}
+          />
+        </article>
+      </div>
+    </>
+  );
+});