feat: make snippet page way more usable

package.json

@@ -25,6 +25,7 @@
     "@tiptap/react": "^2.1.13",
     "@tiptap/starter-kit": "^2.1.13",
     "case": "^1.6.3",
+    "clsx": "^2.1.0",
     "dayjs": "^1.11.10",
     "debounce": "^2.0.0",
     "drizzle-orm": "^0.29.2",
@@ -52,6 +53,7 @@
     "postcss": "^8.4.32",
     "postcss-preset-mantine": "^1.12.2",
     "postcss-simple-vars": "^7.0.1",
+    "sass": "^1.70.0",
     "ts-node": "^10.9.2",
     "tsx": "^4.7.0",
     "typescript": "^5.2.2",

src/App.css

@@ -1,3 +1,7 @@
+body {
+  overflow: hidden;
+}
+
 #root {
   max-width: 1280px;
   margin: 0 auto;

src/App.tsx

@@ -82,7 +82,12 @@ export function App() {
                 hiddenFrom="sm"
                 size="sm"
               />
-              <Text>Orderly</Text>
+              <Flex>
+                <Text>Orderly</Text>
+                <Text c="red" ml={4}>
+                  ALPHA
+                </Text>
+              </Flex>
             </Group>
             <Group>
               <Button
@@ -259,8 +264,6 @@ export function App() {
             }}
           />
 
-          <div>{currentBook?.title}</div>
-
           <CreateOrUpdateModal
             opened={editBookModalOpened}
             inputLabel="Book Title"

src/components/SnippetForm.scss

@@ -0,0 +1,54 @@
+.snippet-form {
+  color: inherit;
+  position: relative;
+  &:hover {
+    color: inherit;
+  }
+
+  &.disabled {
+    padding: 1rem;
+    margin-top: -20%;
+
+    .contents {
+      opacity: 0.84;
+      transform: scale(0.9);
+      filter: blur(2px);
+      pointer-events: none;
+    }
+
+    .other-snippet-label-wrapper {
+      position: absolute;
+      bottom: 2rem;
+      left: 0;
+      right: 0;
+      display: none;
+
+      .other-snippet-label {
+        border-radius: 1rem;
+        background: gray;
+        margin: 0 auto;
+        padding: 0.5rem 1rem;
+        color: white;
+        width: 10rem;
+        text-align: center;
+      }
+    }
+
+    &.below {
+      margin-top: 0;
+      margin-bottom: -20%;
+
+      .other-snippet-label-wrapper {
+        bottom: auto;
+        top: 2rem;
+      }
+    }
+
+    &:hover,
+    &:focus {
+      .other-snippet-label-wrapper {
+        display: flex;
+      }
+    }
+  }
+}