+
{!isDragActive && (
-
- Drag some files here, or to select
- files
+
+ Drag and drop files here, or click to select
)}
{isDragActive &&
Release to drop the files here
}
diff --git a/src/app/(drift)/(posts)/new/components/edit-document-list/edit-document/document.module.css b/src/app/(drift)/(posts)/new/components/edit-document-list/edit-document/document.module.css
index 7ade9f44..389e3cce 100644
--- a/src/app/(drift)/(posts)/new/components/edit-document-list/edit-document/document.module.css
+++ b/src/app/(drift)/(posts)/new/components/edit-document-list/edit-document/document.module.css
@@ -1,6 +1,5 @@
.card {
padding: var(--gap);
- border: 1px solid var(--lighter-gray);
border-radius: var(--radius);
}
diff --git a/src/app/(drift)/(posts)/new/components/edit-document-list/edit-document/formatting-icons/index.tsx b/src/app/(drift)/(posts)/new/components/edit-document-list/edit-document/formatting-icons/index.tsx
index 225bdcc9..f46476a8 100644
--- a/src/app/(drift)/(posts)/new/components/edit-document-list/edit-document/formatting-icons/index.tsx
+++ b/src/app/(drift)/(posts)/new/components/edit-document-list/edit-document/formatting-icons/index.tsx
@@ -9,9 +9,10 @@ import {
import { RefObject, useMemo } from "react"
import styles from "./formatting-icons.module.css"
import { TextareaMarkdownRef } from "textarea-markdown-editor"
-import Tooltip from "@components/tooltip"
-import Button from "@components/button"
+import { Tooltip } from "@components/tooltip"
+import { Button } from "@components/button"
import clsx from "clsx"
+import React from "react"
// TODO: clean up
function FormattingIcons({
@@ -69,22 +70,18 @@ function FormattingIcons({
))}
diff --git a/src/app/(drift)/(posts)/new/components/edit-document-list/edit-document/index.tsx b/src/app/(drift)/(posts)/new/components/edit-document-list/edit-document/index.tsx
index 44b13542..d091f47d 100644
--- a/src/app/(drift)/(posts)/new/components/edit-document-list/edit-document/index.tsx
+++ b/src/app/(drift)/(posts)/new/components/edit-document-list/edit-document/index.tsx
@@ -1,9 +1,10 @@
import { ChangeEvent, ClipboardEvent, useCallback } from "react"
import styles from "./document.module.css"
-import Button from "@components/button"
-import Input from "@components/input"
-import DocumentTabs from "src/app/(drift)/(posts)/components/tabs"
+import { Button } from "@components/button"
+import { Input } from "@components/input"
+import DocumentTabs from "src/app/(drift)/(posts)/components/document-tabs"
import { Trash } from "react-feather"
+import { Card, CardContent, CardHeader } from "@components/card"
type Props = {
title?: string
@@ -49,8 +50,8 @@ function Document({
)
return (
- <>
-
+
+
{remove && (
+ // no left border
}
- height={"39px"}
- width={"48px"}
- padding={0}
- margin={0}
onClick={() => removeFile(remove)}
- style={{
- borderTopLeftRadius: 0,
- borderBottomLeftRadius: 0
- }}
- />
+ variant="outline"
+ className="border-color-[var(--border)] rounded-l-none border-l-0"
+ >
+
+
)}
-
-
- {content}
-
-
-
-
+
+
+
+ {content}
+
+
+
)
}
diff --git a/src/app/(drift)/(posts)/new/components/new.tsx b/src/app/(drift)/(posts)/new/components/new.tsx
index f7196f30..4a1b5bfd 100644
--- a/src/app/(drift)/(posts)/new/components/new.tsx
+++ b/src/app/(drift)/(posts)/new/components/new.tsx
@@ -3,26 +3,42 @@
import { useRouter } from "next/navigation"
import { useCallback, useState, ClipboardEvent } from "react"
import generateUUID from "@lib/generate-uuid"
-import styles from "./post.module.css"
import EditDocumentList from "./edit-document-list"
import { ChangeEvent } from "react"
import getTitleForPostCopy from "src/app/lib/get-title-for-post-copy"
-import Description from "./description"
+// import Description from "./description"
import { PostWithFiles } from "@lib/server/prisma"
import PasswordModal from "../../../../components/password-modal"
import Title from "./title"
import FileDropzone from "./drag-and-drop"
-import Button from "@components/button"
-import Input from "@components/input"
-import ButtonDropdown from "@components/button-dropdown"
+import { Button, buttonVariants } from "@components/button"
import { useToasts } from "@components/toasts"
import { fetchWithUser } from "src/app/lib/fetch-with-user"
import dynamic from "next/dynamic"
+import ButtonDropdown from "@components/button-dropdown"
+import clsx from "clsx"
+import { Spinner } from "@components/spinner"
+import { cn } from "@lib/cn"
+import { Calendar as CalendarIcon } from "react-feather"
-const DatePicker = dynamic(() => import("react-datepicker"), {
- ssr: false,
- loading: () =>
-})
+const DatePicker = dynamic(
+ () => import("@components/date-picker").then((m) => m.DatePicker),
+ {
+ ssr: false,
+ loading: () => (
+
+ )
+ }
+)
const emptyDoc = {
title: "",
@@ -48,7 +64,9 @@ function Post({
const [title, setTitle] = useState(
getTitleForPostCopy(initialPost?.title) || ""
)
- const [description, setDescription] = useState(initialPost?.description || "")
+ const [description /*, setDescription */] = useState(
+ initialPost?.description || ""
+ )
const [expiresAt, setExpiresAt] = useState
()
const defaultDocs: Document[] = initialPost
@@ -131,7 +149,7 @@ function Post({
if (!docs.length) {
setToast({
- message: "Please add at least one document",
+ message: "Please add at least one file",
type: "error"
})
hasErrored = true
@@ -170,13 +188,13 @@ function Post({
setTitle(e.target.value)
}, [])
- const onChangeDescription = useCallback(
- (e: ChangeEvent) => {
- e.preventDefault()
- setDescription(e.target.value)
- },
- []
- )
+ // const onChangeDescription = useCallback(
+ // (e: ChangeEvent) => {
+ // e.preventDefault()
+ // setDescription(e.target.value)
+ // },
+ // []
+ // )
function onClosePasswordModal() {
setPasswordModalVisible(false)
@@ -187,10 +205,6 @@ function Post({
return onSubmit("protected", password)
}
- function onChangeExpiration(date: Date) {
- return setExpiresAt(date)
- }
-
function updateDocTitle(i: number) {
return (title: string) => {
setDocs((docs) =>
@@ -241,10 +255,9 @@ function Post({
}
return (
-
-
-
-
+
+
+ {/*
*/}
-
-
-
-
- }
- placeholderText="Won't expire"
- selected={expiresAt}
- showTimeInput={true}
- // @ts-expect-error fix time input type
- customTimeInput={}
- timeInputLabel="Time:"
- dateFormat="MM/dd/yyyy h:mm aa"
- className={styles.datePicker}
- clearButtonTitle={"Clear"}
- // TODO: investigate why this causes margin shift if true
- enableTabLoop={false}
- minDate={new Date()}
- />
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+ onSubmit("unlisted")}
+ >
+ {isSubmitting ? : null}
+ Create Unlisted
+
+ onSubmit("private")}
+ >
+ Create Private
+
+ onSubmit("public")}
+ >
+ Create Public
+
+ onSubmit("protected")}
+ >
+ Create with Password
+
+
void
-}) {
- return (
- {
- if (!isNaN(date.getTime())) {
- onChange(e.target.value || date.toISOString().slice(11, 16))
- }
- }}
- style={{
- backgroundColor: "var(--bg)",
- border: "1px solid var(--light-gray)",
- borderRadius: "var(--radius)"
- }}
- required
- />
- )
-}
+// function CustomTimeInput({
+// date,
+// value,
+// onChange
+// }: {
+// date: Date
+// value: string
+// onChange: (date: string) => void
+// }) {
+// return (
+// {
+// if (!isNaN(date.getTime())) {
+// onChange(e.target.value || date.toISOString().slice(11, 16))
+// }
+// }}
+// style={{
+// backgroundColor: "var(--bg)",
+// border: "1px solid var(--light-gray)",
+// borderRadius: "var(--radius)"
+// }}
+// required
+// />
+// )
+// }
diff --git a/src/app/(drift)/(posts)/new/components/post.module.css b/src/app/(drift)/(posts)/new/components/post.module.css
index 4d7758c0..4568e5ce 100644
--- a/src/app/(drift)/(posts)/new/components/post.module.css
+++ b/src/app/(drift)/(posts)/new/components/post.module.css
@@ -2,7 +2,7 @@
padding-bottom: 200px;
display: flex;
flex-direction: column;
- gap: var(--gap);
+ gap: var(--gap-half);
}
.buttons {
@@ -19,9 +19,6 @@
align-items: center;
}
-.datePicker {
- flex: 1;
-}
.description {
width: 100%;
diff --git a/src/app/(drift)/(posts)/new/components/react-datepicker.css b/src/app/(drift)/(posts)/new/components/react-datepicker.css
deleted file mode 100644
index 97949a9c..00000000
--- a/src/app/(drift)/(posts)/new/components/react-datepicker.css
+++ /dev/null
@@ -1,372 +0,0 @@
-.react-datepicker__year-read-view--down-arrow,
-.react-datepicker__month-read-view--down-arrow,
-.react-datepicker__month-year-read-view--down-arrow,
-.react-datepicker__navigation-icon::before {
- border-color: var(--light-gray);
- border-style: solid;
- border-width: 3px 3px 0 0;
- content: "";
- display: block;
- height: 9px;
- position: absolute;
- top: 6px;
- width: 9px;
-}
-.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle,
-.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle {
- margin-left: -4px;
- position: absolute;
- width: 0;
-}
-
-.react-datepicker-wrapper {
- display: inline-block;
- padding: 0;
- border: 0;
-}
-
-.react-datepicker {
- font-family: var(--font-sans);
- font-size: 0.8rem;
- background-color: var(--bg);
- color: var(--fg);
- border: 1px solid var(--gray);
- border-radius: var(--radius);
- display: inline-block;
- position: relative;
-}
-
-.react-datepicker--time-only .react-datepicker__triangle {
- left: 35px;
-}
-.react-datepicker--time-only .react-datepicker__time-container {
- border-left: 0;
-}
-.react-datepicker--time-only .react-datepicker__time,
-.react-datepicker--time-only .react-datepicker__time-box {
- border-radius: var(--radius);
- border-radius: var(--radius);
-}
-
-.react-datepicker__triangle {
- position: absolute;
- left: 50px;
-}
-
-.react-datepicker-popper {
- z-index: 1;
-}
-.react-datepicker-popper[data-placement^="bottom"] {
- padding-top: 10px;
-}
-.react-datepicker-popper[data-placement="bottom-end"]
- .react-datepicker__triangle,
-.react-datepicker-popper[data-placement="top-end"] .react-datepicker__triangle {
- left: auto;
- right: 50px;
-}
-.react-datepicker-popper[data-placement^="top"] {
- padding-bottom: 10px;
-}
-.react-datepicker-popper[data-placement^="right"] {
- padding-left: 8px;
-}
-.react-datepicker-popper[data-placement^="right"] .react-datepicker__triangle {
- left: auto;
- right: 42px;
-}
-.react-datepicker-popper[data-placement^="left"] {
- padding-right: 8px;
-}
-.react-datepicker-popper[data-placement^="left"] .react-datepicker__triangle {
- left: 42px;
- right: auto;
-}
-
-.react-datepicker__header {
- text-align: center;
- background-color: var(--bg);
- border-bottom: 1px solid var(--gray);
- border-top-left-radius: var(--radius);
- border-top-right-radius: var(--radius);
- padding: 8px 0;
- position: relative;
-}
-
-.react-datepicker__header--time {
- padding-bottom: 8px;
- padding-left: 5px;
- padding-right: 5px;
-}
-
-.react-datepicker__year-dropdown-container--select,
-.react-datepicker__month-dropdown-container--select,
-.react-datepicker__month-year-dropdown-container--select,
-.react-datepicker__year-dropdown-container--scroll,
-.react-datepicker__month-dropdown-container--scroll,
-.react-datepicker__month-year-dropdown-container--scroll {
- display: inline-block;
- margin: 0 2px;
-}
-
-.react-datepicker__current-month,
-.react-datepicker-time__header,
-.react-datepicker-year-header {
- margin-top: 0;
- font-weight: bold;
- font-size: 0.944rem;
-}
-
-.react-datepicker-time__header {
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
-}
-
-.react-datepicker__navigation {
- align-items: center;
- background: none;
- display: flex;
- justify-content: center;
- text-align: center;
- cursor: pointer;
- position: absolute;
- top: 2px;
- padding: 0;
- border: none;
- z-index: 1;
- height: 32px;
- width: 32px;
- text-indent: -999em;
- overflow: hidden;
-}
-.react-datepicker__navigation--previous {
- left: 2px;
-}
-.react-datepicker__navigation--next {
- right: 2px;
-}
-.react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
- right: 85px;
-}
-.react-datepicker__navigation--years {
- position: relative;
- top: 0;
- display: block;
- margin-left: auto;
- margin-right: auto;
-}
-.react-datepicker__navigation--years-previous {
- top: 4px;
-}
-.react-datepicker__navigation--years-upcoming {
- top: -4px;
-}
-.react-datepicker__navigation:hover *::before {
- border-color: var(--lighter-gray);
-}
-
-.react-datepicker__navigation-icon {
- position: relative;
- top: -1px;
- font-size: 20px;
- width: 0;
-}
-.react-datepicker__navigation-icon--next {
- left: -2px;
-}
-.react-datepicker__navigation-icon--next::before {
- transform: rotate(45deg);
- left: -7px;
-}
-.react-datepicker__navigation-icon--previous {
- right: -2px;
-}
-.react-datepicker__navigation-icon--previous::before {
- transform: rotate(225deg);
- right: -7px;
-}
-
-.react-datepicker__month-container {
- float: left;
-}
-
-.react-datepicker__year {
- margin: 0.4rem;
- text-align: center;
-}
-.react-datepicker__year-wrapper {
- display: flex;
- flex-wrap: wrap;
- max-width: 180px;
-}
-.react-datepicker__year .react-datepicker__year-text {
- display: inline-block;
- width: 4rem;
- margin: 2px;
-}
-
-.react-datepicker__month {
- margin: 0.4rem;
- text-align: center;
-}
-.react-datepicker__month .react-datepicker__month-text,
-.react-datepicker__month .react-datepicker__quarter-text {
- display: inline-block;
- width: 4rem;
- margin: 2px;
-}
-
-.react-datepicker__input-time-container {
- clear: both;
- width: 100%;
- float: left;
- margin: 5px 0 10px 15px;
- text-align: left;
-}
-.react-datepicker__input-time-container .react-datepicker-time__caption {
- display: inline-block;
-}
-.react-datepicker__input-time-container
- .react-datepicker-time__input-container {
- display: inline-block;
-}
-.react-datepicker__input-time-container
- .react-datepicker-time__input-container
- .react-datepicker-time__input {
- display: inline-block;
- margin-left: 10px;
-}
-.react-datepicker__input-time-container
- .react-datepicker-time__input-container
- .react-datepicker-time__input
- input {
- width: auto;
-}
-.react-datepicker__input-time-container
- .react-datepicker-time__input-container
- .react-datepicker-time__input
- input[type="time"]::-webkit-inner-spin-button,
-.react-datepicker__input-time-container
- .react-datepicker-time__input-container
- .react-datepicker-time__input
- input[type="time"]::-webkit-outer-spin-button {
- -webkit-appearance: none;
- margin: 0;
-}
-.react-datepicker__input-time-container
- .react-datepicker-time__input-container
- .react-datepicker-time__input
- input[type="time"] {
- -moz-appearance: textfield;
-}
-.react-datepicker__input-time-container
- .react-datepicker-time__input-container
- .react-datepicker-time__delimiter {
- margin-left: 5px;
- display: inline-block;
-}
-
-.react-datepicker__day-names,
-.react-datepicker__week {
- white-space: nowrap;
-}
-
-.react-datepicker__day-names {
- margin-bottom: -8px;
-}
-
-.react-datepicker__day-name,
-.react-datepicker__day,
-.react-datepicker__time-name {
- color: var(--fg);
- display: inline-block;
- width: 1.7rem;
- line-height: 1.7rem;
- text-align: center;
- margin: 0.166rem;
-}
-.react-datepicker__day,
-.react-datepicker__month-text,
-.react-datepicker__quarter-text,
-.react-datepicker__year-text {
- cursor: pointer;
-}
-.react-datepicker__day:hover,
-.react-datepicker__month-text:hover,
-.react-datepicker__quarter-text:hover,
-.react-datepicker__year-text:hover {
- border-radius: 0.3rem;
- background-color: var(--light-gray);
-}
-.react-datepicker__day--today,
-.react-datepicker__month-text--today,
-.react-datepicker__quarter-text--today,
-.react-datepicker__year-text--today {
- font-weight: bold;
-}
-.react-datepicker__day--highlighted,
-.react-datepicker__month-text--highlighted,
-.react-datepicker__quarter-text--highlighted,
-.react-datepicker__year-text--highlighted {
- border-radius: 0.3rem;
- background-color: #3dcc4a;
- color: var(--fg);
-}
-.react-datepicker__day--highlighted:hover,
-.react-datepicker__month-text--highlighted:hover,
-.react-datepicker__quarter-text--highlighted:hover,
-.react-datepicker__year-text--highlighted:hover {
- background-color: #32be3f;
-}
-
-.react-datepicker__day--selected,
-.react-datepicker__day--in-selecting-range,
-.react-datepicker__day--in-range,
-.react-datepicker__month-text--selected,
-.react-datepicker__month-text--in-selecting-range,
-.react-datepicker__month-text--in-range,
-.react-datepicker__quarter-text--selected,
-.react-datepicker__quarter-text--in-selecting-range,
-.react-datepicker__quarter-text--in-range,
-.react-datepicker__year-text--selected,
-.react-datepicker__year-text--in-selecting-range,
-.react-datepicker__year-text--in-range {
- border-radius: 0.3rem;
- background-color: var(--light-gray);
- color: var(--fg);
-}
-.react-datepicker__day--selected:hover {
- background-color: var(--gray);
-}
-
-.react-datepicker__day--keyboard-selected,
-.react-datepicker__month-text--keyboard-selected,
-.react-datepicker__quarter-text--keyboard-selected,
-.react-datepicker__year-text--keyboard-selected {
- border-radius: 0.3rem;
- background-color: var(--light-gray);
- color: var(--fg);
-}
-.react-datepicker__day--keyboard-selected:hover {
- background-color: var(--gray);
-}
-
-.react-datepicker__month--selecting-range
- .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range, .react-datepicker__month-text--in-selecting-range, .react-datepicker__quarter-text--in-selecting-range, .react-datepicker__year-text--in-selecting-range) {
- background-color: var(--bg);
- color: var(--fg);
-}
-
-.react-datepicker {
- transform: scale(1.15) translateY(-12px);
-}
-
-.react-datepicker__day--disabled {
- color: var(--darker-gray);
-}
-
-.react-datepicker__day--disabled:hover {
- background-color: transparent;
- cursor: not-allowed;
-}
diff --git a/src/app/(drift)/(posts)/new/components/title/index.tsx b/src/app/(drift)/(posts)/new/components/title/index.tsx
index 13fa0a51..c1d33562 100644
--- a/src/app/(drift)/(posts)/new/components/title/index.tsx
+++ b/src/app/(drift)/(posts)/new/components/title/index.tsx
@@ -1,7 +1,6 @@
import { ChangeEvent, memo } from "react"
-import Input from "@components/input"
-import styles from "./title.module.css"
+import { Input } from "@components/input"
const titlePlaceholders = [
"How to...",
@@ -18,20 +17,17 @@ const placeholder = titlePlaceholders[3]
type props = {
onChange: (e: ChangeEvent) => void
title?: string
+ className?: string
}
-function Title({ onChange, title }: props) {
+function Title({ onChange, title, className }: props) {
return (
-
-
Drift
+
)
diff --git a/src/app/(drift)/(posts)/new/page.tsx b/src/app/(drift)/(posts)/new/page.tsx
index 9d6beb96..74661e7a 100644
--- a/src/app/(drift)/(posts)/new/page.tsx
+++ b/src/app/(drift)/(posts)/new/page.tsx
@@ -1,9 +1,17 @@
import { getMetadata } from "src/app/lib/metadata"
import NewPost from "src/app/(drift)/(posts)/new/components/new"
-import "./components/react-datepicker.css"
+import { PageTitle } from "@components/page-title"
+import { PageWrapper } from "@components/page-wrapper"
export default function New() {
- return
+ return (
+ <>
+
New Post
+
+
+
+
+ )
}
export const metadata = getMetadata({
diff --git a/src/app/(drift)/(posts)/post/[id]/components/header/post-buttons/index.tsx b/src/app/(drift)/(posts)/post/[id]/components/header/post-buttons/index.tsx
index 9d43d702..efce08c9 100644
--- a/src/app/(drift)/(posts)/post/[id]/components/header/post-buttons/index.tsx
+++ b/src/app/(drift)/(posts)/post/[id]/components/header/post-buttons/index.tsx
@@ -1,9 +1,8 @@
"use client"
-import Button from "@components/button"
+import { Button } from "@components/button"
import ButtonGroup from "@components/button-group"
import FileDropdown from "src/app/(drift)/(posts)/components/file-dropdown"
-import { Edit, ArrowUpCircle, Archive } from "react-feather"
import styles from "./post-buttons.module.css"
import { useRouter } from "next/navigation"
import { PostWithFiles } from "@lib/server/prisma"
@@ -48,15 +47,19 @@ export const PostButtons = ({
return (
- } onClick={editACopy}>
+
{parentId && (
- } onClick={viewParentClick}>
+
)}
- }>
+
diff --git a/src/app/(drift)/(posts)/post/[id]/components/header/title/index.tsx b/src/app/(drift)/(posts)/post/[id]/components/header/title/index.tsx
index f10e29e0..dcf490db 100644
--- a/src/app/(drift)/(posts)/post/[id]/components/header/title/index.tsx
+++ b/src/app/(drift)/(posts)/post/[id]/components/header/title/index.tsx
@@ -17,13 +17,9 @@ export const PostTitle = ({ post, loading }: TitleProps) => {
const displayName = author?.displayName
return (
-
+
{title}{" "}
-
+
by {/* */}
{displayName || "anonymous"}
{/* */}
diff --git a/src/app/(drift)/(posts)/post/[id]/components/post-files/view-document/document.module.css b/src/app/(drift)/(posts)/post/[id]/components/post-files/view-document/document.module.css
index f2f82db1..f2c3515e 100644
--- a/src/app/(drift)/(posts)/post/[id]/components/post-files/view-document/document.module.css
+++ b/src/app/(drift)/(posts)/post/[id]/components/post-files/view-document/document.module.css
@@ -1,4 +1,4 @@
-.card header {
+/* .card header {
display: flex;
align-items: center;
flex-direction: row;
@@ -18,7 +18,7 @@
border: 1px solid var(--lighter-gray);
border-top: none;
border-radius: 0px 0px 8px 8px;
-}
+} */
.textarea {
height: 100%;
diff --git a/src/app/(drift)/(posts)/post/[id]/components/post-files/view-document/index.tsx b/src/app/(drift)/(posts)/post/[id]/components/post-files/view-document/index.tsx
index 844ca1ee..2cd0df95 100644
--- a/src/app/(drift)/(posts)/post/[id]/components/post-files/view-document/index.tsx
+++ b/src/app/(drift)/(posts)/post/[id]/components/post-files/view-document/index.tsx
@@ -1,8 +1,8 @@
-import Button from "@components/button"
+import { Button } from "@components/button"
import ButtonGroup from "@components/button-group"
import Skeleton from "@components/skeleton"
-import Tooltip from "@components/tooltip"
-import DocumentTabs from "src/app/(drift)/(posts)/components/tabs"
+import { Tooltip } from "@components/tooltip"
+import DocumentTabs from "src/app/(drift)/(posts)/components/document-tabs"
import Link from "next/link"
import { memo } from "react"
import { Download, ExternalLink, Globe } from "react-feather"
@@ -10,7 +10,7 @@ import styles from "./document.module.css"
import { getURLFriendlyTitle } from "src/app/lib/get-url-friendly-title"
import { PostWithFiles, ServerPost } from "@lib/server/prisma"
import { isAllowedVisibilityForWebpage } from "@lib/constants"
-
+import { Card, CardContent, CardHeader } from "@components/card"
type SharedProps = {
initialTab: "edit" | "preview"
file?: PostWithFiles["files"][0]
@@ -36,38 +36,50 @@ const DownloadButtons = ({
}) => {
return (
-
+
}
aria-label="Download"
- style={{ border: "none", background: "transparent" }}
- />
+ size="sm"
+ className="bg-transparent border-none"
+ variant={"ghost"}
+ >
+
+ Download
+
{rawLink ? (
-
+
}
aria-label="Open raw file in new tab"
- style={{ border: "none", background: "transparent" }}
- />
+ className="bg-transparent border-none"
+ size="sm"
+ variant={"ghost"}
+ >
+
+ Open raw file in new tab
+
) : null}
{siteLink ? (
-
+
}
aria-label="Open as webpage"
- style={{ border: "none", background: "transparent" }}
- />
+ className="bg-transparent border-none"
+ size="sm"
+ variant={"ghost"}
+ >
+
+ Open as webpage
+
) : null}
@@ -109,18 +121,39 @@ const Document = ({ skeleton, ...props }: Props) => {
}
}
}
+ /* .card header {
+ display: flex;
+ align-items: center;
+ flex-direction: row;
+ justify-content: space-between;
+ height: 40px;
+ line-height: 40px;
+ padding: 0 16px;
+ background: var(--lighter-gray);
+ border-radius: 8px 8px 0px 0px;
+}
+.documentContainer {
+ display: flex;
+ flex-direction: column;
+ overflow: auto;
+ padding: var(--gap);
+ border: 1px solid var(--lighter-gray);
+ border-top: none;
+ border-radius: 0px 0px 8px 8px;
+} */
return (
<>
-
-
+
+
{file?.title}
@@ -134,8 +167,8 @@ const Document = ({ skeleton, ...props }: Props) => {
: undefined
}
/>
-
-
+
+
{
>
{file?.content || ""}
-
-
{post.description}
} */}
{children}
diff --git a/src/app/(drift)/(posts)/post/[id]/page.tsx b/src/app/(drift)/(posts)/post/[id]/page.tsx
index 17d7e667..873afcf3 100644
--- a/src/app/(drift)/(posts)/post/[id]/page.tsx
+++ b/src/app/(drift)/(posts)/post/[id]/page.tsx
@@ -21,11 +21,13 @@ export default async function PostPage({
return (
<>
-
+
+
+
)
}
diff --git a/src/app/(drift)/admin/components/table.module.css b/src/app/(drift)/admin/components/table.module.css
index 2bdc29de..16c8d4f9 100644
--- a/src/app/(drift)/admin/components/table.module.css
+++ b/src/app/(drift)/admin/components/table.module.css
@@ -1,13 +1,3 @@
-.table {
- width: 100%;
- display: block;
- white-space: nowrap;
-
- thead th {
- font-weight: bold;
- }
-}
-
.id {
width: 130px;
white-space: nowrap;
diff --git a/src/app/(drift)/admin/components/tables.tsx b/src/app/(drift)/admin/components/tables.tsx
index 9c922763..4d2d3996 100644
--- a/src/app/(drift)/admin/components/tables.tsx
+++ b/src/app/(drift)/admin/components/tables.tsx
@@ -1,6 +1,6 @@
"use client"
-import Button from "@components/button"
+import { Button } from "@components/button"
import { Spinner } from "@components/spinner"
import { useToasts } from "@components/toasts"
import { ServerPostWithFilesAndAuthor, UserWithPosts } from "@lib/server/prisma"
@@ -18,7 +18,7 @@ export function UserTable({
id: string
email: string | null
role: string | null
- displayName: string | null
+ username: string | null
}[]
}) {
const { setToast } = useToasts()
@@ -26,6 +26,14 @@ export function UserTable({
const deleteUser = async (id: string) => {
try {
+ const confirmed = confirm("Are you sure you want to delete this user?")
+ if (!confirmed) {
+ setToast({
+ message: "User not deleted",
+ type: "default"
+ })
+ return
+ }
const res = await fetchWithUser("/api/admin?action=delete-user", {
method: "DELETE",
headers: {
@@ -53,8 +61,8 @@ export function UserTable({
}
return (
-
-
+
+
| Name |
Email |
@@ -73,14 +81,20 @@ export function UserTable({
) : null}
{users?.map((user) => (
- | {user.displayName ? user.displayName : "no name"} |
+ {user.username ? user.username : "no name"} |
{user.email} |
{user.role} |
{user.id}
|
-
+
|
))}
@@ -90,7 +104,7 @@ export function UserTable({
}
export function PostTable({
- posts
+ posts: initialPosts
}: {
posts?: {
createdAt: string
@@ -100,15 +114,54 @@ export function PostTable({
visibility: string
}[]
}) {
+ const [posts, setPosts] = useState(initialPosts)
+ const { setToast } = useToasts()
+ const deletePost = async (id: string) => {
+ try {
+ const confirmed = confirm("Are you sure you want to delete this post?")
+ if (!confirmed) {
+ setToast({
+ message: "Post not deleted",
+ type: "default"
+ })
+ return
+ }
+ const res = await fetchWithUser("/api/admin?action=delete-post", {
+ method: "DELETE",
+ headers: {
+ "Content-Type": "application/json"
+ },
+ body: JSON.stringify({
+ postId: id
+ })
+ })
+
+ if (res.status === 200) {
+ setToast({
+ message: "Post deleted",
+ type: "success"
+ })
+ setPosts(posts?.filter((post) => post.id !== id))
+ }
+ } catch (err) {
+ console.error(err)
+ setToast({
+ message: "Error deleting user",
+ type: "error"
+ })
+ }
+ }
+
return (
-
-
+
+
| Title |
Author |
Created |
Visibility |
Post ID |
+ Actions |
@@ -130,6 +183,15 @@ export function PostTable({
{new Date(post.createdAt).toLocaleDateString()} |
{post.visibility} |
{post.id} |
+
+
+ |
))}
diff --git a/src/app/(drift)/admin/loading.tsx b/src/app/(drift)/admin/loading.tsx
index 98042fcf..8125aef9 100644
--- a/src/app/(drift)/admin/loading.tsx
+++ b/src/app/(drift)/admin/loading.tsx
@@ -1,12 +1,13 @@
+import { TypographyH1, TypographyH2 } from "@components/typography"
import { PostTable, UserTable } from "./components/tables"
export default function AdminLoading() {
return (
-
Admin
-
Users
+
Admin
+
Users
-
Posts
+
Posts
-
Admin
-
Users
- {/* @ts-expect-error Type 'unknown' is not assignable to type */}
-
-
Posts
-
-
Users
+ {/* @ts-expect-error Type 'unknown' is not assignable to type */}
+
+ Posts
+
+
+
)
}
diff --git a/src/app/(drift)/author/[username]/page.tsx b/src/app/(drift)/author/[username]/page.tsx
index 7ea192db..b286ee34 100644
--- a/src/app/(drift)/author/[username]/page.tsx
+++ b/src/app/(drift)/author/[username]/page.tsx
@@ -1,4 +1,5 @@
import PostList from "@components/post-list"
+import { TypographyH1 } from "@components/typography"
import {
getPostsByUser,
getUserById,
@@ -59,7 +60,9 @@ export default async function UserPage({
justifyContent: "space-between"
}}
>
- Public posts by {user?.displayName || "Anonymous"}
+
+ Public posts by {user?.displayName || "Anonymous"}
+
}>
diff --git a/src/app/(drift)/layout.tsx b/src/app/(drift)/layout.tsx
index ae1269fd..58e40a89 100644
--- a/src/app/(drift)/layout.tsx
+++ b/src/app/(drift)/layout.tsx
@@ -6,6 +6,8 @@ import Header from "@components/header"
import { Inter } from "next/font/google"
import { getMetadata } from "src/app/lib/metadata"
import dynamic from "next/dynamic"
+import clsx from "clsx"
+import Link from "@components/link"
const inter = Inter({ subsets: ["latin"], variable: "--inter-font" })
const CmdK = dynamic(() => import("@components/cmdk"), { ssr: false })
@@ -17,14 +19,18 @@ export default async function RootLayout({
}) {
return (
// suppressHydrationWarning is required because of next-themes
-
+
- {children}
+ {children}
diff --git a/src/app/(drift)/mine/loading.tsx b/src/app/(drift)/mine/loading.tsx
index d9c9b9e1..a9a09200 100644
--- a/src/app/(drift)/mine/loading.tsx
+++ b/src/app/(drift)/mine/loading.tsx
@@ -1,7 +1,15 @@
"use client"
+import { PageTitle } from "@components/page-title"
+import { PageWrapper } from "@components/page-wrapper"
import PostList from "@components/post-list"
export default function Loading() {
- return
+ return (
+ <>
+ Your Posts
+
+
+
+ )
}
diff --git a/src/app/(drift)/mine/page.tsx b/src/app/(drift)/mine/page.tsx
index 23bdad70..0699300c 100644
--- a/src/app/(drift)/mine/page.tsx
+++ b/src/app/(drift)/mine/page.tsx
@@ -5,6 +5,8 @@ import { Suspense } from "react"
import ErrorBoundary from "@components/error/fallback"
import { getMetadata } from "src/app/lib/metadata"
import { redirect } from "next/navigation"
+import { PageTitle } from "@components/page-title"
+import { PageWrapper } from "@components/page-wrapper"
export default async function Mine() {
const userId = (await getCurrentUser())?.id
@@ -16,16 +18,21 @@ export default async function Mine() {
const posts = (await getPostsByUser(userId, true)).map(serverPostToClientPost)
return (
-
- }>
-
-
-
+ <>
+ Your Posts
+
+
+ }>
+
+
+
+
+
)
}
diff --git a/src/app/(drift)/page.tsx b/src/app/(drift)/page.tsx
index af4e9580..9260f457 100644
--- a/src/app/(drift)/page.tsx
+++ b/src/app/(drift)/page.tsx
@@ -1,7 +1,5 @@
-import Image from "next/image"
-import Card from "@components/card"
+import { Card, CardContent } from "@components/card"
import { getWelcomeContent } from "src/pages/api/welcome"
-import DocumentTabs from "./(posts)/components/tabs"
import {
getAllPosts,
serverPostToClientPost,
@@ -10,8 +8,8 @@ import {
import PostList, { NoPostsFound } from "@components/post-list"
import { cache, Suspense } from "react"
import ErrorBoundary from "@components/error/fallback"
-import { Stack } from "@components/stack"
-
+import DocumentTabs from "src/app/(drift)/(posts)/components/document-tabs"
+import { PageWrapper } from "@components/page-wrapper"
export const revalidate = 300
const getWelcomeData = cache(async () => {
@@ -20,23 +18,11 @@ const getWelcomeData = cache(async () => {
})
export default async function Page() {
- const { title } = await getWelcomeData()
-
return (
-
-
-
- {title}
-
+
{/* @ts-expect-error because of async RSC */}
- Recent public posts
+ Recent Public Posts
-
+
)
}
async function WelcomePost() {
const { content, rendered, title } = await getWelcomeData()
return (
-
-
- {content}
-
+
+
+
+ {content}
+
+
)
}
@@ -79,6 +67,7 @@ async function PublicPostList() {
}
},
visibility: true,
+ expiresAt: true,
files: {
select: {
id: true,
diff --git a/src/app/(drift)/providers.tsx b/src/app/(drift)/providers.tsx
index bb2e73f2..33f82a12 100644
--- a/src/app/(drift)/providers.tsx
+++ b/src/app/(drift)/providers.tsx
@@ -10,7 +10,12 @@ export function Providers({ children }: PropsWithChildren) {
return (
-
+
{children}
diff --git a/src/app/(drift)/settings/components/sections/api-keys.tsx b/src/app/(drift)/settings/components/sections/api-keys.tsx
index d49da72e..a7795dff 100644
--- a/src/app/(drift)/settings/components/sections/api-keys.tsx
+++ b/src/app/(drift)/settings/components/sections/api-keys.tsx
@@ -1,7 +1,7 @@
"use client"
-import Button from "@components/button"
-import Input from "@components/input"
+import { Button } from "@components/button"
+import { Input } from "@components/input"
import Note from "@components/note"
import { Spinner } from "@components/spinner"
import { useToasts } from "@components/toasts"
@@ -13,6 +13,7 @@ import { copyToClipboard } from "src/app/lib/copy-to-clipboard"
import { useState } from "react"
import styles from "./api-keys.module.css"
import { useSessionSWR } from "@lib/use-session-swr"
+import { TypographyH4 } from "@components/typography"
// need to pass in the accessToken
const APIKeys = ({
@@ -75,7 +76,7 @@ const APIKeys = ({
)}
{hasError && {error?.message}}
) : (
- You have no API keys.
+
+ No API keys found.
+
)
) : (
diff --git a/src/app/(drift)/settings/components/sections/profile.tsx b/src/app/(drift)/settings/components/sections/profile.tsx
index 55ffb8ac..3757b10e 100644
--- a/src/app/(drift)/settings/components/sections/profile.tsx
+++ b/src/app/(drift)/settings/components/sections/profile.tsx
@@ -1,7 +1,7 @@
"use client"
-import Button from "@components/button"
-import Input from "@components/input"
+import { Button } from "@components/button"
+import { Input } from "@components/input"
import Note from "@components/note"
import { useToasts } from "@components/toasts"
import { useSessionSWR } from "@lib/use-session-swr"
@@ -142,8 +142,7 @@ function Profile() {
*/}
-
-
)
} else {
return (
-
-