39 |
40 | {title}
41 |
42 |
43 | )}
44 | {children}
45 |
52 |
12 | {keys.map((key) => (
13 |
21 | );
22 | };
23 |
--------------------------------------------------------------------------------
/apps/linearlite/src/components/common/status-menu.tsx:
--------------------------------------------------------------------------------
1 | import { Shortcut } from "@/components/common/shortcut";
2 | import { Icon, IconName } from "@/components/icons";
3 | import { statusOptions } from "@/data/status-options";
4 | import { Status } from "@/types/status";
5 | import { CheckIcon } from "@heroicons/react/16/solid";
6 | import React from "react";
7 | import { useKeyboard } from "react-aria";
8 | import {
9 | Button,
10 | Menu,
11 | MenuItem,
12 | MenuTrigger,
13 | Popover
14 | } from "react-aria-components";
15 |
16 | export const StatusMenu = ({
17 | status,
18 | onStatusChange,
19 | showLabel = false
20 | }: {
21 | status: Status;
22 | onStatusChange: (status: Status) => void;
23 | showLabel?: boolean;
24 | }) => {
25 | const [isOpen, setIsOpen] = React.useState(false);
26 |
27 | const { keyboardProps } = useKeyboard({
28 | onKeyDown: (e) => {
29 | if (e.key === "Escape") {
30 | setIsOpen(false);
31 | return;
32 | }
33 | statusOptions.forEach(({ shortcut }, statusOption) => {
34 | if (e.key === shortcut) {
35 | onStatusChange(statusOption as Status);
36 | setIsOpen(false);
37 | return;
38 | }
39 | });
40 | }
41 | });
42 |
43 | return (
44 |
17 | {key}
18 |
19 | ))}
20 | navigate(`/issue/${issue.id}`)}
41 | >
42 |
43 |
59 | );
60 | };
61 |
--------------------------------------------------------------------------------
/apps/linearlite/src/components/layout/board/draggable.tsx:
--------------------------------------------------------------------------------
1 | import { Issue } from "@/lib/livestore/schema";
2 | import type { CSSProperties } from "react";
3 | import React, { memo } from "react";
4 | import { DragPreview, useDrag } from "react-aria";
5 | import { Card } from "./card";
6 |
7 | export const Draggable = memo(
8 | ({ issue, style }: { issue: Issue; style: CSSProperties }) => {
9 | const preview = React.useRef(null);
10 | const { dragProps, isDragging } = useDrag({
11 | preview,
12 | getItems: () => [{ "text/plain": issue.id.toString() }]
13 | });
14 |
15 | return (
16 |
44 |
49 |
45 | {getIssueTag(issue.id)}
46 |
47 |
50 |
53 | {issue.title}
52 |
22 |
38 | );
39 | }
40 | );
41 |
--------------------------------------------------------------------------------
/apps/linearlite/src/components/layout/board/index.tsx:
--------------------------------------------------------------------------------
1 | import { Column } from "@/components/layout/board/column";
2 | import { Filters } from "@/components/layout/filters";
3 | import { statusOptions } from "@/data/status-options";
4 | import { filterState$ } from "@/lib/livestore/queries";
5 | import { tables } from "@/lib/livestore/schema";
6 | import {
7 | filterStateToOrderBy,
8 | filterStateToWhere
9 | } from "@/lib/livestore/utils";
10 | import { Status } from "@/types/status";
11 | import { queryDb } from "@livestore/livestore";
12 | import { useStore } from "@livestore/react";
13 | import React from "react";
14 |
15 | const filteredIssueIds$ = queryDb(
16 | (get) =>
17 | tables.issue
18 | .select("id")
19 | .where({ ...filterStateToWhere(get(filterState$)), deleted: null })
20 | .orderBy(filterStateToOrderBy(get(filterState$))),
21 | { label: "Board.visibleIssueIds" }
22 | );
23 |
24 | export const Board = () => {
25 | const { store } = useStore();
26 | const filteredIssueIds = store.useQuery(filteredIssueIds$);
27 |
28 | return (
29 | <>
30 |
23 |
30 | {() => (
31 |
36 |
37 |
26 |
27 |
28 | )}
29 |
32 |
34 | )}
35 |
36 |
47 |
48 | );
49 | };
50 |
--------------------------------------------------------------------------------
/apps/linearlite/src/components/layout/filters/filter-menu.tsx:
--------------------------------------------------------------------------------
1 | import { Icon, IconName } from "@/components/icons";
2 | import { priorityOptions } from "@/data/priority-options";
3 | import { statusOptions } from "@/data/status-options";
4 | import { useFilterState } from "@/lib/livestore/queries";
5 | import { Priority } from "@/types/priority";
6 | import { Status } from "@/types/status";
7 | import { CheckIcon } from "@heroicons/react/16/solid";
8 | import React from "react";
9 | import {
10 | Header,
11 | Menu,
12 | MenuItem,
13 | MenuSection,
14 | MenuTrigger,
15 | Popover,
16 | Separator
17 | } from "react-aria-components";
18 |
19 | export const FilterMenu = ({
20 | type,
21 | children
22 | }: {
23 | type?: "status" | "priority";
24 | children?: React.ReactNode;
25 | }) => {
26 | const [filterState, setFilterState] = useFilterState();
27 |
28 | const toggleFilter = ({
29 | type,
30 | value
31 | }:
32 | | { type: "status"; value: Status }
33 | | { type: "priority"; value: Priority }) => {
34 | let filters: (Status | Priority)[] | undefined = [
35 | ...(filterState[type] ?? [])
36 | ];
37 | if (filters.includes(value)) filters.splice(filters.indexOf(value), 1);
38 | else filters.push(value);
39 | if (!filters.length) filters = undefined;
40 | setFilterState({ [type]: filters });
41 | };
42 |
43 | return (
44 |
37 | {statusOptions.map((statusDetails, statusOption) => (
38 |
46 |
15 |
23 | );
24 | };
25 |
--------------------------------------------------------------------------------
/apps/linearlite/src/components/layout/filters/index.tsx:
--------------------------------------------------------------------------------
1 | import { Icon } from "@/components/icons";
2 | import { FilterMenu } from "@/components/layout/filters/filter-menu";
3 | import { Header } from "@/components/layout/filters/header";
4 | import { PriorityFilter } from "@/components/layout/filters/priority-filter";
5 | import { SortMenu } from "@/components/layout/filters/sort-menu";
6 | import { StatusFilter } from "@/components/layout/filters/status-filter";
7 | import { SearchBar } from "@/components/layout/search/search-bar";
8 | import { statusOptions } from "@/data/status-options";
9 | import { issueCount$, useFilterState } from "@/lib/livestore/queries";
10 | import { Status } from "@/types/status";
11 | import { useStore } from "@livestore/react";
12 | import React from "react";
13 | import { Button } from "react-aria-components";
14 |
15 | export const Filters = ({
16 | filteredCount,
17 | hideStatusFilter,
18 | hideSorting,
19 | search
20 | }: {
21 | filteredCount: number;
22 | hideStatusFilter?: boolean;
23 | hideSorting?: boolean;
24 | search?: boolean;
25 | }) => {
26 | const { store } = useStore();
27 | const totalCount = store.useQuery(issueCount$);
28 | const [filterState] = useFilterState();
29 |
30 | return (
31 | <>
32 | {search ? (
33 | {heading}
17 |
18 | {filteredCount}
19 | {filteredCount !== totalCount && of {totalCount}}
20 | {heading !== "Issues" && issues}
21 |
22 |
46 |
79 | {filterState.status?.length || filterState.priority?.length ? (
80 |
47 | {search && (
48 |
55 |
70 |
71 |
76 | {/* TODO add clear filters/sorting button */}
77 | {!hideSorting &&
49 | {filteredCount}
50 | {filteredCount !== totalCount && of {totalCount}}
51 | Issues
52 |
53 | )}
54 |
72 | {!hideStatusFilter &&
75 |
81 |
87 | ) : null}
88 |
89 | );
90 | };
91 |
--------------------------------------------------------------------------------
/apps/linearlite/src/components/layout/filters/priority-filter.tsx:
--------------------------------------------------------------------------------
1 | import { IconName } from "@/components/icons";
2 |
3 | import { Icon } from "@/components/icons";
4 | import { FilterMenu } from "@/components/layout/filters/filter-menu";
5 | import { priorityOptions } from "@/data/priority-options";
6 | import { useFilterState } from "@/lib/livestore/queries";
7 | import { Priority } from "@/types/priority";
8 | import { XMarkIcon } from "@heroicons/react/16/solid";
9 | import React from "react";
10 | import { Button } from "react-aria-components";
11 |
12 | export const PriorityFilter = () => {
13 | const [filterState, setFilterState] = useFilterState();
14 | if (!filterState.priority) return null;
15 |
16 | return (
17 |
82 | {!hideStatusFilter &&
86 |
18 |
25 |
43 |
44 |
50 |
51 | );
52 | };
53 |
--------------------------------------------------------------------------------
/apps/linearlite/src/components/layout/filters/sort-menu.tsx:
--------------------------------------------------------------------------------
1 | import { Shortcut } from "@/components/common/shortcut";
2 | import {
3 | SortingDirection,
4 | SortingOption,
5 | sortingOptions
6 | } from "@/data/sorting-options";
7 | import { useFilterState } from "@/lib/livestore/queries";
8 | import {
9 | ArrowsUpDownIcon,
10 | BarsArrowDownIcon,
11 | BarsArrowUpIcon
12 | } from "@heroicons/react/20/solid";
13 | import React from "react";
14 | import { useKeyboard } from "react-aria";
15 | import {
16 | Button,
17 | Header,
18 | Menu,
19 | MenuItem,
20 | MenuSection,
21 | MenuTrigger,
22 | Popover
23 | } from "react-aria-components";
24 |
25 | export const SortMenu = ({ type }: { type?: "status" | "priority" }) => {
26 | const [filterState, setFilterState] = useFilterState();
27 | const [isOpen, setIsOpen] = React.useState(false);
28 |
29 | const toggleSorting = (sortingOption: SortingOption) => {
30 | const currentSorting = filterState.orderBy;
31 | const currentDirection = filterState.orderDirection;
32 | if (currentSorting === sortingOption)
33 | setFilterState({
34 | orderDirection: currentDirection === "asc" ? "desc" : "asc"
35 | });
36 | else
37 | setFilterState({
38 | orderBy: sortingOption,
39 | orderDirection: sortingOptions[sortingOption as SortingOption]
40 | .defaultDirection as SortingDirection
41 | });
42 | };
43 |
44 | const { keyboardProps } = useKeyboard({
45 | onKeyDown: (e) => {
46 | if (e.key === "Escape") {
47 | setIsOpen(false);
48 | return;
49 | }
50 | Object.entries(sortingOptions).forEach(
51 | ([sortingOption, { shortcut }]) => {
52 | if (e.key === shortcut) {
53 | toggleSorting(sortingOption as SortingOption);
54 | return;
55 | }
56 | }
57 | );
58 | }
59 | });
60 |
61 | return (
62 |
19 |
20 | Priority
21 |
22 | {filterState.priority.length > 1 ? "is any of" : "is"}
23 |
24 |
16 |
23 |
43 |
44 |
50 |
51 | );
52 | };
53 |
--------------------------------------------------------------------------------
/apps/linearlite/src/components/layout/index.tsx:
--------------------------------------------------------------------------------
1 | import { MobileMenu } from "@/components/layout/sidebar/mobile-menu";
2 | import { Toolbar } from "@/components/layout/toolbar";
3 | import { useFrontendState } from "@/lib/livestore/queries";
4 | import React from "react";
5 |
6 | export const Layout = ({ children }: { children: React.ReactNode }) => {
7 | const [frontendState] = useFrontendState();
8 |
9 | return (
10 |
17 |
18 | Status
19 |
20 | {filterState.status.length > 1 ? "is any of" : "is"}
21 |
22 |
11 |
19 | );
20 | };
21 |
--------------------------------------------------------------------------------
/apps/linearlite/src/components/layout/issue/back-button.tsx:
--------------------------------------------------------------------------------
1 | import { XMarkIcon } from "@heroicons/react/20/solid";
2 | import React from "react";
3 | import { Button } from "react-aria-components";
4 |
5 | export const BackButton = ({ close }: { close: () => void }) => {
6 | React.useEffect(() => {
7 | const handleKeyDown = (e: KeyboardEvent) => {
8 | if (e.key === "Escape") close();
9 | };
10 | window.addEventListener("keydown", handleKeyDown);
11 | return () => window.removeEventListener("keydown", handleKeyDown);
12 | }, [close]);
13 |
14 | return (
15 |
22 | );
23 | };
24 |
--------------------------------------------------------------------------------
/apps/linearlite/src/components/layout/issue/comment-input.tsx:
--------------------------------------------------------------------------------
1 | import Editor from "@/components/common/editor";
2 | import { useFrontendState } from "@/lib/livestore/queries";
3 | import { events } from "@/lib/livestore/schema";
4 | import { ArrowUpIcon } from "@heroicons/react/20/solid";
5 | import { useStore } from "@livestore/react";
6 | import React from "react";
7 | import { useKeyboard } from "react-aria";
8 | import { Button } from "react-aria-components";
9 |
10 | export const CommentInput = ({
11 | issueId,
12 | className
13 | }: {
14 | issueId: number;
15 | className?: string;
16 | }) => {
17 | // TODO move this into LiveStore
18 | const [commentDraft, setCommentDraft] = React.useState
14 | {children}
15 |
16 | {frontendState.showToolbar &&
49 | setCommentDraft(value)}
53 | placeholder="Leave a comment..."
54 | />
55 | {/* TODO add tooltip for submit shortcut */}
56 |
63 |
64 | );
65 | };
66 |
--------------------------------------------------------------------------------
/apps/linearlite/src/components/layout/issue/comments.tsx:
--------------------------------------------------------------------------------
1 | import { Avatar } from "@/components/common/avatar";
2 | import { tables } from "@/lib/livestore/schema";
3 | import { formatDate } from "@/utils/format-date";
4 | import { queryDb } from "@livestore/livestore";
5 | import { useStore } from "@livestore/react";
6 | import React from "react";
7 | import ReactMarkdown from "react-markdown";
8 |
9 | export const Comments = ({ issueId }: { issueId: number }) => {
10 | const { store } = useStore();
11 | const comments = store.useQuery(
12 | queryDb(
13 | tables.comment.where("issueId", issueId).orderBy("created", "desc"),
14 | { deps: [issueId] }
15 | )
16 | );
17 |
18 | return (
19 | -
20 | {comments.map(({ id, body, creator, created }) => (
21 |
-
25 | 26 |33 |
27 | {creator}28 | {/* TODO: make this a relative date */} 29 |30 | {formatDate(new Date(created))} 31 |32 |34 |36 |{body} 35 |
37 | ))}
38 |
67 |
105 | 68 | New issue 69 |
70 |
82 |
104 |
17 |
18 | {({ height, width }: { width: number; height: number }) => (
19 | setScrollState({ list: e.scrollOffset })}
27 | initialScrollOffset={scrollState.list ?? 0}
28 | >
29 | {VirtualRow}
30 |
31 | )}
32 |
33 |
34 | );
35 | };
36 |
--------------------------------------------------------------------------------
/apps/linearlite/src/components/layout/list/index.tsx:
--------------------------------------------------------------------------------
1 | import { Filters } from "@/components/layout/filters";
2 | import { FilteredList } from "@/components/layout/list/filtered-list";
3 | import { filterState$ } from "@/lib/livestore/queries";
4 | import { tables } from "@/lib/livestore/schema";
5 | import {
6 | filterStateToOrderBy,
7 | filterStateToWhere
8 | } from "@/lib/livestore/utils";
9 | import { queryDb } from "@livestore/livestore";
10 | import { useStore } from "@livestore/react";
11 | import React from "react";
12 |
13 | const filteredIssueIds$ = queryDb(
14 | (get) =>
15 | tables.issue
16 | .select("id")
17 | .where({ ...filterStateToWhere(get(filterState$)), deleted: null })
18 | .orderBy(filterStateToOrderBy(get(filterState$))),
19 | { label: "List.visibleIssueIds" }
20 | );
21 |
22 | export const List = () => {
23 | const { store } = useStore();
24 | const filteredIssueIds = store.useQuery(filteredIssueIds$);
25 |
26 | return (
27 | <>
28 | navigate(`/issue/${issue.id}`)}
40 | style={style}
41 | >
42 |
65 | );
66 | }
67 | );
68 |
--------------------------------------------------------------------------------
/apps/linearlite/src/components/layout/list/virtual-row.tsx:
--------------------------------------------------------------------------------
1 | import { Row } from "@/components/layout/list/row";
2 | import { tables } from "@/lib/livestore/schema";
3 | import { useStore } from "@livestore/react";
4 | import { queryDb } from "@livestore/livestore";
5 | import React, { memo, type CSSProperties } from "react";
6 | import { areEqual } from "react-window";
7 |
8 | export const VirtualRow = memo(
9 | ({
10 | data,
11 | index,
12 | style
13 | }: {
14 | data: readonly number[];
15 | index: number;
16 | style: CSSProperties;
17 | }) => {
18 | const { store } = useStore();
19 | const issue = store.useQuery(
20 | queryDb(tables.issue.where({ id: data[index]! }).first(), {
21 | deps: [data[index]]
22 | })
23 | );
24 | return
43 |
58 |
48 | {getIssueTag(issue.id)}
49 |
50 |
55 | {issue.title}
56 |
57 |
59 |
64 |
60 | {formatDate(new Date(issue.created))}
61 |
62 |
20 |
41 | );
42 | };
43 |
--------------------------------------------------------------------------------
/apps/linearlite/src/components/layout/sidebar/about-menu.tsx:
--------------------------------------------------------------------------------
1 | import { Icon } from "@/components/icons";
2 | import { AboutModal } from "@/components/layout/sidebar/about-modal";
3 | import { ChevronDownIcon } from "@heroicons/react/16/solid";
4 | import React from "react";
5 | import {
6 | Button,
7 | Header,
8 | Menu,
9 | MenuItem,
10 | MenuSection,
11 | MenuTrigger,
12 | Popover,
13 | Separator
14 | } from "react-aria-components";
15 |
16 | export const AboutMenu = () => {
17 | const [showAboutModal, setShowAboutModal] = React.useState(false);
18 |
19 | return (
20 | <>
21 |
15 |
39 | 16 | LinearLite is an example of a collaboration application using a 17 | local-first approach, obviously inspired by{" "} 18 | 23 | Linear 24 | 25 | . 26 |
27 |28 | It's built using{" "} 29 | 34 | LiveStore 35 | 36 | , a local-first sync layer for web and mobile apps. 37 |
38 |
17 |
23 |
27 | );
28 | };
29 |
--------------------------------------------------------------------------------
/apps/linearlite/src/components/layout/toolbar/download-button.tsx:
--------------------------------------------------------------------------------
1 | import { ArrowDownIcon } from "@heroicons/react/16/solid";
2 | import { useStore } from "@livestore/react";
3 | import React from "react";
4 | import { Button } from "react-aria-components";
5 |
6 | export const DownloadButton = ({ className }: { className?: string }) => {
7 | const { store } = useStore();
8 | const onClick = () => {
9 | (store as any)._dev.downloadDb();
10 | };
11 |
12 | return (
13 |
14 |
22 |
23 | );
24 | };
25 |
--------------------------------------------------------------------------------
/apps/linearlite/src/components/layout/toolbar/index.tsx:
--------------------------------------------------------------------------------
1 | import { Icon } from "@/components/icons";
2 | import { DownloadButton } from "@/components/layout/toolbar/download-button";
3 | import { ResetButton } from "@/components/layout/toolbar/reset-button";
4 | import { SeedInput } from "@/components/layout/toolbar/seed-input";
5 | import { ShareButton } from "@/components/layout/toolbar/share-button";
6 | import { UserInput } from "@/components/layout/toolbar/user-input";
7 | import { FPSMeter } from "@overengineering/fps-meter";
8 | import React from "react";
9 | import { Link } from "react-router-dom";
10 | import { DevtoolsButton } from "./devtools-button";
11 | import { SyncToggle } from "./sync-toggle";
12 |
13 | export const Toolbar = () => {
14 | return (
15 |
16 |
40 | );
41 | };
42 |
--------------------------------------------------------------------------------
/apps/linearlite/src/components/layout/toolbar/mobile-menu.tsx:
--------------------------------------------------------------------------------
1 | import { ResetButton } from "@/components/layout/toolbar/reset-button";
2 | import { SeedInput } from "@/components/layout/toolbar/seed-input";
3 | import { UserInput } from "@/components/layout/toolbar/user-input";
4 | import { ChevronUpIcon } from "@heroicons/react/16/solid";
5 | import React from "react";
6 | import {
7 | Button,
8 | DialogTrigger,
9 | ModalOverlay,
10 | Modal as ReactAriaModal
11 | } from "react-aria-components";
12 | import { ShareButton } from "./share-button";
13 | import { SyncToggle } from "./sync-toggle";
14 |
15 | export const MobileMenu = () => {
16 | return (
17 |
17 |
22 |
27 |
28 |
31 |
32 | Database:
33 |
38 |
18 |
19 |
26 |
30 |
31 |
42 |
43 |
44 |
45 | );
46 | };
47 |
--------------------------------------------------------------------------------
/apps/linearlite/src/components/layout/toolbar/reset-button.tsx:
--------------------------------------------------------------------------------
1 | import { TrashIcon } from "@heroicons/react/16/solid";
2 | import React from "react";
3 | import { Button } from "react-aria-components";
4 | import { useNavigate } from "react-router-dom";
5 |
6 | export const ResetButton = ({ className }: { className?: string }) => {
7 | const [confirm, setConfirm] = React.useState(false);
8 | const navigate = useNavigate();
9 |
10 | const onClick = () => {
11 | if (confirm) {
12 | navigate("/?reset");
13 | window.location.reload();
14 | }
15 | setConfirm(true);
16 | setTimeout(() => {
17 | setConfirm(false);
18 | }, 2000);
19 | };
20 |
21 | return (
22 |
32 |
41 |
33 | Please use the desktop version to access all LiveStore tools!
34 |
35 |
23 |
31 |
32 | );
33 | };
34 |
--------------------------------------------------------------------------------
/apps/linearlite/src/components/layout/toolbar/seed-input.tsx:
--------------------------------------------------------------------------------
1 | import { seed } from "@/lib/livestore/seed";
2 | import { PlusIcon } from "@heroicons/react/16/solid";
3 | import { useStore } from "@livestore/react";
4 | import React from "react";
5 | import { Button, Input } from "react-aria-components";
6 |
7 | export const SeedInput = ({ className }: { className?: string }) => {
8 | const [count, setCount] = React.useState(50);
9 | const { store } = useStore();
10 |
11 | const onClick = () => {
12 | if (count === 0) return;
13 | seed(store, count);
14 | };
15 |
16 | return (
17 |
18 | setCount(Number(e.target.value))}
25 | className="h-6 px-1.5 border-none rounded-l text-xs bg-neutral-800 placeholder:text-neutral-500 text-neutral-300 w-12 focus:outline-none focus:ring-0 focus:border-none hover:bg-neutral-700 focus:bg-neutral-700"
26 | />
27 |
35 |
36 | );
37 | };
38 |
--------------------------------------------------------------------------------
/apps/linearlite/src/components/layout/toolbar/share-button.tsx:
--------------------------------------------------------------------------------
1 | import { CheckIcon, LinkIcon, QrCodeIcon } from "@heroicons/react/16/solid";
2 | import React from "react";
3 | import {
4 | Button,
5 | ModalOverlay,
6 | Modal as ReactAriaModal
7 | } from "react-aria-components";
8 |
9 | // This uses a public QR code API: https://goqr.me/api/doc/create-qr-code/
10 |
11 | export const ShareButton = ({ className }: { className?: string }) => {
12 | const [copied, setCopied] = React.useState(false);
13 | const [showQR, setShowQR] = React.useState(false);
14 |
15 | // TODO build sharable workspace feature
16 | const copyUrl = () => {
17 | navigator.clipboard.writeText(window.location.href);
18 | setCopied(true);
19 | setTimeout(() => {
20 | setCopied(false);
21 | }, 2000);
22 | };
23 |
24 | return (
25 | <>
26 |
27 | Workspace:
28 |
50 |
57 |
58 |
10 | {/* TODO add disabled tooltip for now */}
11 |
18 |
25 |
26 | );
27 | };
28 |
--------------------------------------------------------------------------------
/apps/linearlite/src/components/layout/toolbar/toolbar-button.tsx:
--------------------------------------------------------------------------------
1 | import { Icon } from "@/components/icons";
2 | import { useFrontendState } from "@/lib/livestore/queries";
3 | import React from "react";
4 | import { Button } from "react-aria-components";
5 |
6 | export const ToolbarButton = () => {
7 | const [frontendState, setFrontendState] = useFrontendState();
8 | const onClick = () => {
9 | setFrontendState({
10 | ...frontendState,
11 | showToolbar: !frontendState.showToolbar
12 | });
13 | };
14 |
15 | return (
16 |
27 | );
28 | };
29 |
--------------------------------------------------------------------------------
/apps/linearlite/src/components/layout/toolbar/user-input.tsx:
--------------------------------------------------------------------------------
1 | import { useFrontendState } from "@/lib/livestore/queries";
2 | import React from "react";
3 | import { Input } from "react-aria-components";
4 |
5 | export const UserInput = ({ className }: { className?: string }) => {
6 | const [frontendState, setFrontendState] = useFrontendState();
7 |
8 | return (
9 |
19 |
20 |
21 |
22 | Sync/Network
23 |
24 |
10 | User:
11 |
18 | setFrontendState({ ...frontendState, user: e.target.value })
19 | }
20 | onBlur={() =>
21 | setFrontendState({
22 | ...frontendState,
23 | user: frontendState.user || "John Doe"
24 | })
25 | }
26 | className="h-6 px-1.5 bg-transparent bg-neutral-800 hover:bg-neutral-700 border-none text-xs rounded placeholder:text-neutral-500 text-neutral-300 grow lg:grow-0 lg:w-28 focus:outline-none focus:ring-0 focus:border-none focus:bg-neutral-700"
27 | />
28 |
29 | );
30 | };
31 |
--------------------------------------------------------------------------------
/apps/linearlite/src/data/priority-options.ts:
--------------------------------------------------------------------------------
1 | import { IconName } from "@/components/icons";
2 |
3 | export const priorityOptions: {
4 | name: string;
5 | icon: IconName;
6 | style: string;
7 | shortcut: string;
8 | }[] = [
9 | {
10 | name: "None",
11 | icon: "priority-none",
12 | style:
13 | "text-neutral-500 group-hover:text-neutral-700 dark:text-neutral-400 dark:group-hover:text-neutral-300",
14 | shortcut: "0"
15 | },
16 | {
17 | name: "Low",
18 | icon: "priority-low",
19 | style:
20 | "text-neutral-500 group-hover:text-neutral-700 dark:text-neutral-400 dark:group-hover:text-neutral-300",
21 | shortcut: "1"
22 | },
23 | {
24 | name: "Medium",
25 | icon: "priority-medium",
26 | style:
27 | "text-neutral-500 group-hover:text-neutral-700 dark:text-neutral-400 dark:group-hover:text-neutral-300",
28 | shortcut: "2"
29 | },
30 | {
31 | name: "High",
32 | icon: "priority-high",
33 | style:
34 | "text-neutral-500 group-hover:text-neutral-700 dark:text-neutral-400 dark:group-hover:text-neutral-300",
35 | shortcut: "3"
36 | },
37 | {
38 | name: "Urgent",
39 | icon: "priority-urgent",
40 | style:
41 | "text-neutral-500 group-hover:text-neutral-700 dark:text-neutral-400 dark:group-hover:text-neutral-300",
42 | shortcut: "4"
43 | }
44 | ];
45 |
--------------------------------------------------------------------------------
/apps/linearlite/src/data/sorting-options.ts:
--------------------------------------------------------------------------------
1 | export const sortingOptions = {
2 | priority: { name: "Priority", shortcut: "p", defaultDirection: "desc" },
3 | status: { name: "Status", shortcut: "s", defaultDirection: "asc" },
4 | created: { name: "Created", shortcut: "c", defaultDirection: "desc" },
5 | modified: { name: "Updated", shortcut: "u", defaultDirection: "desc" }
6 | };
7 |
8 | export type SortingOption = keyof typeof sortingOptions;
9 |
10 | export type SortingDirection = "asc" | "desc";
11 |
--------------------------------------------------------------------------------
/apps/linearlite/src/data/status-options.ts:
--------------------------------------------------------------------------------
1 | import { IconName } from "@/components/icons";
2 |
3 | export type StatusId = "backlog" | "todo" | "in_progress" | "done" | "canceled";
4 |
5 | export type StatusDetails = {
6 | name: string;
7 | id: StatusId;
8 | icon: IconName;
9 | style: string;
10 | shortcut: string;
11 | };
12 |
13 | export const statusOptions: StatusDetails[] = [
14 | {
15 | name: "Backlog",
16 | id: "backlog",
17 | icon: "backlog",
18 | style:
19 | "text-neutral-400 group-hover:text-neutral-600 dark:group-hover:text-neutral-200",
20 | shortcut: "1"
21 | },
22 | {
23 | name: "Todo",
24 | id: "todo",
25 | icon: "todo",
26 | style:
27 | "text-neutral-400 group-hover:text-neutral-600 dark:group-hover:text-neutral-200",
28 | shortcut: "2"
29 | },
30 | {
31 | name: "In Progress",
32 | id: "in_progress",
33 | icon: "in-progress",
34 | style:
35 | "text-yellow-500 group-hover:text-yellow-700 dark:text-yellow-400 dark:group-hover:text-yellow-300",
36 | shortcut: "3"
37 | },
38 | {
39 | name: "Done",
40 | id: "done",
41 | icon: "done",
42 | style:
43 | "text-indigo-500 group-hover:text-indigo-700 dark:text-indigo-400 dark:group-hover:text-indigo-300",
44 | shortcut: "4"
45 | },
46 | {
47 | name: "Canceled",
48 | id: "canceled",
49 | icon: "canceled",
50 | style:
51 | "text-neutral-500 group-hover:text-neutral-700 dark:text-neutral-300 dark:group-hover:text-neutral-200",
52 | shortcut: "5"
53 | }
54 | ];
55 |
--------------------------------------------------------------------------------
/apps/linearlite/src/data/theme-options.ts:
--------------------------------------------------------------------------------
1 | export type ThemeOption = {
2 | id: string;
3 | label: string;
4 | };
5 |
6 | export type Theme = "light" | "dark" | "system";
7 |
8 | export const themeOptions: { id: Theme; label: string; shortcut: string }[] = [
9 | { id: "light", label: "Light", shortcut: "l" },
10 | { id: "dark", label: "Dark", shortcut: "d" },
11 | { id: "system", label: "System", shortcut: "s" }
12 | ];
13 |
--------------------------------------------------------------------------------
/apps/linearlite/src/hooks/useClickOutside.ts:
--------------------------------------------------------------------------------
1 | import { RefObject, useCallback, useEffect } from "react";
2 |
3 | export const useClickOutside = (
4 | ref: RefObject
9 |
33 | );
34 | };
35 |
36 | export const filterStateToWhere = (filterState: FilterState) => {
37 | const { status, priority, query } = filterState;
38 |
39 | return {
40 | status: status ? { op: "IN", value: status } : undefined,
41 | priority: priority ? { op: "IN", value: priority } : undefined,
42 | // TODO treat query as `OR` in
43 | title: query ? { op: "LIKE", value: `%${query}%` } : undefined
44 | } satisfies QueryBuilder.WhereParams
10 |
13 | {bootStatus.stage === "loading" && Loading...
}
14 | {bootStatus.stage === "migrating" && (
15 |
16 | Migrating tables ({bootStatus.progress.done}/
17 | {bootStatus.progress.total})
18 |
19 | )}
20 | {bootStatus.stage === "rehydrating" && (
21 |
22 | Rehydrating state ({bootStatus.progress.done}/
23 | {bootStatus.progress.total})
24 |
25 | )}
26 | {bootStatus.stage === "syncing" && (
27 |
28 | Syncing state ({bootStatus.progress.done}/{bootStatus.progress.total})
29 |
30 | )}
31 | {bootStatus.stage === "done" && Ready
}
32 |
16 |
36 | Counter: {counter}
17 |
18 |
26 |
34 |
35 | Loading LiveStore ({_.stage})...
}
71 | batchUpdates={batchUpdates}
72 | storeId={storeId}
73 | syncPayload={{ authToken: "insecure-token-change-me" }}
74 | >
75 | {children}
76 | {message}
107 |{details}
108 | {stack && ( 109 |
110 | {stack}
111 |
112 | )}
113 | Loading LiveStore ({_.stage})...
}
36 | batchUpdates={batchUpdates}
37 | storeId={storeId}
38 | syncPayload={{ authToken: "insecure-token-change-me" }}
39 | >
40 |
41 |
43 | TodoMVC
23 | updatedNewTodoText(e.target.value)} 29 | onKeyDown={(e) => { 30 | if (e.key === "Enter") { 31 | todoCreated(); 32 | } 33 | }} 34 | > 35 |-
37 | {visibleTodos.map((todo) => (
38 |
-
39 | 40 | toggleTodo(todo)} 45 | /> 46 | 47 | 55 |56 |
57 | ))}
58 |