Setup (#112)

* wip

* wip

* wip3

* chore: utils

* feat: add command

* wip

* fix: key duplicate

* fix: move and check

* fix: use react-use instead

* fix: sidebar

* chore: make dynamic

* chore: tablet mode

* chore: fix padding

* chore: link instead of inbox

* fix: use dnd kit

* feat: add select component

* chore: use atom

* refactor: remove dnd provider

* feat: disabled drag when sort is not manual

* search route

* .

* feat: accessibility

* fix: search

* .

* .

* .

* fix: sidebar collapsed

* ai search layout

* .

* .

* .

* .

* ai responsible content

* .

* .

* .

* .

* .

* global topic route

* global topic correct route

* topic buttons

* sidebar search navigation

* ai

* Update jazz

* .

* .

* .

* .

* .

* learning status

* .

* .

* chore: content header

* fix: pointer none when dragging. prevent auto click after drag end

* fix: confirm

* fix: prevent drag when editing

* chore: remove unused fn

* fix: check propagation

* chore: list

* chore: tweak sonner

* chore: update stuff

* feat: add badge

* chore: close edit when create

* chore: escape on manage form

* refactor: remove learn path

* css: responsive item

* chore: separate pages and topic

* reafactor: remove new-schema

* feat(types): extend jazz type so it can be nullable

* chore: use new types

* fix: missing deps

* fix: link

* fix: sidebar in layout

* fix: quotes

* css: use medium instead semi

* Actual streaming and rendering markdown response

* .

* .

* .

* .

* .

* .

* .

* .

* .

* .

* .

* .

* .

* .

* .

* .

* .

* .

* .

* .

* .

* chore: metadata

* feat: la-editor

* .

* fix: editor and page

* .

* .

* .

* .

* .

* .

* fix: remove link

* chore: page sidebar

* fix: remove 'replace with learning status'

* fix: link

* fix: link

* chore: update schema

* chore: use new schema

* fix: instead of showing error, just do unique slug

* feat: create slug

* refactor apply

* update package json

* fix: schema personal page

* chore: editor

* feat: pages

* fix: metadata

* fix: jazz provider

* feat: handling data

* feat: page detail

* chore: server page to id

* chore: use id instead of slug

* chore: update content header

* chore: update link header implementation

* refactor: global.css

* fix: la editor use animation frame

* fix: editor export ref

* refactor: page detail

* chore: tidy up schema

* chore: adapt to new schema

* fix: wrap using settimeout

* fix: wrap using settimeout

* .

* .

---------

Co-authored-by: marshennikovaolga <marshennikova@gmail.com>
Co-authored-by: Nikita <github@nikiv.dev>
Co-authored-by: Anselm <anselm.eickhoff@gmail.com>
Co-authored-by: Damian Tarnawski <gthetarnav@gmail.com>

web/components/la-editor/styles/index.css

@@ -0,0 +1,140 @@
+:root {
+	--la-font-size-regular: 0.9375rem;
+
+	--la-code-background: rgba(8, 43, 120, 0.047);
+	--la-code-color: rgb(212, 212, 212);
+	--la-secondary: rgb(157, 157, 159);
+	--la-pre-background: rgb(236, 236, 236);
+	--la-pre-border: rgb(224, 224, 224);
+	--la-pre-color: rgb(47, 47, 49);
+	--la-hr: rgb(220, 220, 220);
+	--la-drag-handle-hover: rgb(92, 92, 94);
+
+	--hljs-string: rgb(170, 67, 15);
+	--hljs-title: rgb(176, 136, 54);
+	--hljs-comment: rgb(153, 153, 153);
+	--hljs-keyword: rgb(12, 94, 177);
+	--hljs-attr: rgb(58, 146, 188);
+	--hljs-literal: rgb(200, 43, 15);
+	--hljs-name: rgb(37, 151, 146);
+	--hljs-selector-tag: rgb(200, 80, 15);
+	--hljs-number: rgb(61, 160, 103);
+}
+
+.dark .ProseMirror {
+	--la-code-background: rgba(255, 255, 255, 0.075);
+	--la-code-color: rgb(44, 46, 51);
+	--la-secondary: rgb(89, 90, 92);
+	--la-pre-background: rgb(8, 8, 8);
+	--la-pre-border: rgb(35, 37, 42);
+	--la-pre-color: rgb(227, 228, 230);
+	--la-hr: rgb(38, 40, 45);
+	--la-drag-handle-hover: rgb(150, 151, 153);
+
+	--hljs-string: rgb(218, 147, 107);
+	--hljs-title: rgb(241, 213, 157);
+	--hljs-comment: rgb(170, 170, 170);
+	--hljs-keyword: rgb(102, 153, 204);
+	--hljs-attr: rgb(144, 202, 232);
+	--hljs-literal: rgb(242, 119, 122);
+	--hljs-name: rgb(95, 192, 160);
+	--hljs-selector-tag: rgb(232, 199, 133);
+	--hljs-number: rgb(182, 231, 182);
+}
+
+.la-editor .ProseMirror {
+	@apply flex max-w-full flex-1 cursor-text flex-col;
+	@apply z-0 outline-0;
+}
+
+.la-editor .ProseMirror > div.editor {
+	@apply block flex-1 whitespace-pre-wrap;
+}
+
+.la-editor .ProseMirror .block-node:not(:last-child),
+.la-editor .ProseMirror .list-node:not(:last-child),
+.la-editor .ProseMirror .text-node:not(:last-child) {
+	@apply mb-2.5;
+}
+
+.la-editor .ProseMirror ol,
+.la-editor .ProseMirror ul {
+	@apply pl-6;
+}
+
+.la-editor .ProseMirror blockquote,
+.la-editor .ProseMirror dl,
+.la-editor .ProseMirror ol,
+.la-editor .ProseMirror p,
+.la-editor .ProseMirror pre,
+.la-editor .ProseMirror ul {
+	@apply m-0;
+}
+
+.la-editor .ProseMirror li {
+	@apply leading-7;
+}
+
+.la-editor .ProseMirror p {
+	@apply break-words;
+}
+
+.la-editor .ProseMirror li .text-node:has(+ .list-node),
+.la-editor .ProseMirror li > .list-node,
+.la-editor .ProseMirror li > .text-node,
+.la-editor .ProseMirror li p {
+	@apply mb-0;
+}
+
+.la-editor .ProseMirror blockquote {
+	@apply relative pl-3.5;
+}
+
+.la-editor .ProseMirror blockquote::before,
+.la-editor .ProseMirror blockquote.is-empty::before {
+	@apply bg-accent absolute bottom-0 left-0 top-0 h-full w-1 rounded-sm content-[''];
+}
+
+.la-editor .ProseMirror hr {
+	@apply my-3 h-0.5 w-full border-none bg-[var(--la-hr)];
+}
+
+.la-editor .ProseMirror-focused hr.ProseMirror-selectednode {
+	@apply outline-muted-foreground rounded-full outline outline-2 outline-offset-1;
+}
+
+.la-editor .ProseMirror .ProseMirror-gapcursor {
+	@apply pointer-events-none absolute hidden;
+}
+
+.la-editor .ProseMirror .ProseMirror-hideselection {
+	@apply caret-transparent;
+}
+
+.la-editor .ProseMirror.resize-cursor {
+	@apply cursor-col-resize;
+}
+
+.la-editor .ProseMirror .selection {
+	@apply inline-block;
+}
+
+.la-editor .ProseMirror .selection,
+.la-editor .ProseMirror *::selection,
+::selection {
+	@apply bg-primary/40;
+}
+
+/* Override native selection when custom selection is present */
+.la-editor .ProseMirror .selection::selection {
+	background: transparent;
+}
+
+[data-theme="slash-command"] {
+	width: 1000vw;
+}
+
+@import "./partials/code.css";
+@import "./partials/placeholder.css";
+@import "./partials/lists.css";
+@import "./partials/typography.css";

web/components/la-editor/styles/partials/code.css

@@ -0,0 +1,86 @@
+.la-editor .ProseMirror code.inline {
+	@apply rounded border border-[var(--la-code-color)] bg-[var(--la-code-background)] px-1 py-0.5 text-sm;
+}
+
+.la-editor .ProseMirror pre {
+	@apply relative overflow-auto rounded border font-mono text-sm;
+	@apply border-[var(--la-pre-border)] bg-[var(--la-pre-background)] text-[var(--la-pre-color)];
+	@apply hyphens-none whitespace-pre text-left;
+}
+
+.la-editor .ProseMirror code {
+	@apply break-words leading-[1.7em];
+}
+
+.la-editor .ProseMirror pre code {
+	@apply block overflow-x-auto p-3.5;
+}
+
+.la-editor .ProseMirror pre {
+	.hljs-keyword,
+	.hljs-operator,
+	.hljs-function,
+	.hljs-built_in,
+	.hljs-builtin-name {
+		color: var(--hljs-keyword);
+	}
+
+	.hljs-attr,
+	.hljs-symbol,
+	.hljs-property,
+	.hljs-attribute,
+	.hljs-variable,
+	.hljs-template-variable,
+	.hljs-params {
+		color: var(--hljs-attr);
+	}
+
+	.hljs-name,
+	.hljs-regexp,
+	.hljs-link,
+	.hljs-type,
+	.hljs-addition {
+		color: var(--hljs-name);
+	}
+
+	.hljs-string,
+	.hljs-bullet {
+		color: var(--hljs-string);
+	}
+
+	.hljs-title,
+	.hljs-subst,
+	.hljs-section {
+		color: var(--hljs-title);
+	}
+
+	.hljs-literal,
+	.hljs-type,
+	.hljs-deletion {
+		color: var(--hljs-literal);
+	}
+
+	.hljs-selector-tag,
+	.hljs-selector-id,
+	.hljs-selector-class {
+		color: var(--hljs-selector-tag);
+	}
+
+	.hljs-number {
+		color: var(--hljs-number);
+	}
+
+	.hljs-comment,
+	.hljs-meta,
+	.hljs-quote {
+		color: var(--hljs-comment);
+	}
+
+	.hljs-emphasis {
+		@apply italic;
+	}
+
+	.hljs-strong {
+		@apply font-bold;
+	}
+}

web/components/la-editor/styles/partials/lists.css

@@ -0,0 +1,82 @@
+.la-editor div.tiptap p {
+	@apply text-[var(--la-font-size-regular)];
+}
+
+.la-editor .ProseMirror ol {
+	@apply list-decimal;
+}
+
+.la-editor .ProseMirror ol ol {
+	list-style: lower-alpha;
+}
+
+.la-editor .ProseMirror ol ol ol {
+	list-style: lower-roman;
+}
+
+.la-editor .ProseMirror ul {
+	list-style: disc;
+}
+
+.la-editor .ProseMirror ul ul {
+	list-style: circle;
+}
+
+.la-editor .ProseMirror ul ul ul {
+	list-style: square;
+}
+
+.la-editor .ProseMirror ul[data-type="taskList"] {
+	@apply list-none pl-1;
+}
+
+.la-editor .ProseMirror ul[data-type="taskList"] p {
+	@apply m-0;
+}
+
+.la-editor .ProseMirror ul[data-type="taskList"] li > label {
+	@apply mr-2 mt-0.5 flex-none select-none;
+}
+
+.la-editor .ProseMirror li[data-type="taskItem"] {
+	@apply flex flex-row items-start;
+}
+
+.la-editor .ProseMirror li[data-type="taskItem"] .taskItem-checkbox-container {
+	@apply relative pr-2;
+}
+
+.la-editor .ProseMirror .taskItem-drag-handle {
+	@apply absolute -left-5 top-1.5 h-[18px] w-[18px] cursor-move pl-0.5 text-[var(--la-secondary)] opacity-0;
+}
+
+.la-editor
+	.ProseMirror
+	li[data-type="taskItem"]:hover:not(:has(li:hover))
+	> .taskItem-checkbox-container
+	> .taskItem-drag-handle {
+	@apply opacity-100;
+}
+
+.la-editor .ProseMirror .taskItem-drag-handle:hover {
+	@apply text-[var(--la-drag-handle-hover)];
+}
+
+.la-editor .ProseMirror .taskItem-checkbox {
+	fill-opacity: 0;
+	@apply h-3.5 w-3.5 flex-shrink-0 cursor-pointer select-none appearance-none rounded border border-solid border-[var(--la-secondary)] bg-transparent bg-[1px_2px] p-0.5 align-middle transition-colors duration-75 ease-out;
+}
+
+.la-editor .ProseMirror .taskItem-checkbox:checked {
+	@apply border-primary bg-primary bg-no-repeat;
+	background-image: url("data:image/svg+xml;utf8,%3Csvg%20width=%2210%22%20height=%229%22%20viewBox=%220%200%2010%208%22%20xmlns=%22http://www.w3.org/2000/svg%22%20fill=%22%23fbfbfb%22%3E%3Cpath%20d=%22M3.46975%205.70757L1.88358%204.1225C1.65832%203.8974%201.29423%203.8974%201.06897%204.1225C0.843675%204.34765%200.843675%204.7116%201.06897%204.93674L3.0648%206.93117C3.29006%207.15628%203.65414%207.15628%203.8794%206.93117L8.93103%201.88306C9.15633%201.65792%209.15633%201.29397%208.93103%201.06883C8.70578%200.843736%208.34172%200.843724%208.11646%201.06879C8.11645%201.0688%208.11643%201.06882%208.11642%201.06883L3.46975%205.70757Z%22%20stroke-width=%220.2%22%20/%3E%3C/svg%3E");
+}
+
+.la-editor .ProseMirror .taskItem-content {
+	@apply min-w-0 flex-1;
+}
+
+.la-editor .ProseMirror li[data-checked="true"] .taskItem-content > :not([data-type="taskList"]),
+.la-editor .ProseMirror li[data-checked="true"] .taskItem-content .taskItem-checkbox {
+	@apply opacity-75;
+}

web/components/la-editor/styles/partials/placeholder.css

@@ -0,0 +1,12 @@
+.la-editor .ProseMirror .is-empty::before {
+	@apply pointer-events-none float-left h-0 w-full text-[var(--la-secondary)];
+}
+
+.la-editor .ProseMirror.ProseMirror-focused > p.has-focus.is-empty::before {
+	content: "Type / for commands...";
+}
+
+.la-editor .ProseMirror > p.is-editor-empty::before {
+	content: attr(data-placeholder);
+	@apply pointer-events-none float-left h-0 text-[var(--la-secondary)];
+}

web/components/la-editor/styles/partials/typography.css

@@ -0,0 +1,27 @@
+.la-editor .ProseMirror .heading-node {
+	@apply relative font-semibold;
+}
+
+.la-editor .ProseMirror .heading-node:first-child {
+	@apply mt-0;
+}
+
+.la-editor .ProseMirror h1 {
+	@apply mb-4 mt-[46px] text-[1.375rem] leading-7 tracking-[-0.004375rem];
+}
+
+.la-editor .ProseMirror h2 {
+	@apply mb-3.5 mt-8 text-[1.1875rem] leading-7 tracking-[0.003125rem];
+}
+
+.la-editor .ProseMirror h3 {
+	@apply mb-3 mt-6 text-[1.0625rem] leading-6 tracking-[0.00625rem];
+}
+
+.la-editor .ProseMirror a.link {
+	@apply text-primary cursor-pointer;
+}
+
+.la-editor .ProseMirror a.link:hover {
+	@apply underline;
+}