12 | {keys.map((key) => (
13 |
21 | );
22 | };
23 |
--------------------------------------------------------------------------------
/apps/linearlite/src/lib/livestore/schema/scroll-state.ts:
--------------------------------------------------------------------------------
1 | import { State, Schema } from "@livestore/livestore";
2 |
3 | export const ScrollState = Schema.Struct({
4 | list: Schema.Number,
5 | backlog: Schema.optional(Schema.Number),
6 | todo: Schema.optional(Schema.Number),
7 | in_progress: Schema.optional(Schema.Number),
8 | done: Schema.optional(Schema.Number),
9 | canceled: Schema.optional(Schema.Number)
10 | });
11 |
12 | export type ScrollState = typeof ScrollState.Type;
13 |
14 | export const scrollState = State.SQLite.clientDocument({
15 | name: "scroll_state",
16 | schema: ScrollState,
17 | default: { value: { list: 0 } }
18 | });
19 |
--------------------------------------------------------------------------------
/apps/linearlite/src/hooks/useDebounce.ts:
--------------------------------------------------------------------------------
1 | import { useEffect, useRef } from "react";
2 |
3 | type Timer = ReturnType
17 | {key}
18 |
19 | ))}
20 |
11 |
19 | );
20 | };
21 |
--------------------------------------------------------------------------------
/apps/linearlite/src/components/icons/sidebar.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | export const SidebarIcon = ({ className }: { className?: string }) => {
4 | return (
5 |
18 | );
19 | };
20 |
--------------------------------------------------------------------------------
/apps/linearlite/src/lib/livestore/schema/frontend-state.ts:
--------------------------------------------------------------------------------
1 | import { State, Schema, SessionIdSymbol } from "@livestore/livestore";
2 |
3 | const Theme = Schema.Literal("dark", "light", "system").annotations({
4 | title: "Theme"
5 | });
6 | export type Theme = typeof Theme.Type;
7 |
8 | export const FrontendState = Schema.Struct({
9 | theme: Theme,
10 | user: Schema.String,
11 | showToolbar: Schema.Boolean
12 | });
13 | export type FrontendState = typeof FrontendState.Type;
14 |
15 | export const defaultFrontendState: FrontendState = {
16 | theme: "system",
17 | user: "John Doe",
18 | showToolbar: true
19 | };
20 |
21 | export const frontendState = State.SQLite.clientDocument({
22 | name: "frontend_state",
23 | schema: FrontendState,
24 | default: { value: defaultFrontendState, id: SessionIdSymbol }
25 | });
26 |
--------------------------------------------------------------------------------
/apps/linearlite/src/components/icons/todo.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | export const TodoIcon = ({ className }: { className?: string }) => {
4 | return (
5 |
31 | );
32 | };
33 |
--------------------------------------------------------------------------------
/apps/linearlite/src/components/icons/backlog.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | export const BacklogIcon = ({ className }: { className?: string }) => {
4 | return (
5 |
31 | );
32 | };
33 |
--------------------------------------------------------------------------------
/apps/linearlite/src/components/icons/done.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | export const DoneIcon = ({ className }: { className?: string }) => {
4 | return (
5 |
17 | );
18 | };
19 |
--------------------------------------------------------------------------------
/apps/linearlite/src/components/common/menu-button.tsx:
--------------------------------------------------------------------------------
1 | import { MenuContext } from "@/app/contexts";
2 | import { Icon } from "@/components/icons";
3 | import React, { useContext } from "react";
4 | import { Button } from "react-aria-components";
5 |
6 | export const MenuButton = ({ className }: { className?: string }) => {
7 | const { setShowMenu } = useContext(MenuContext)!;
8 |
9 | return (
10 |
17 | );
18 | };
19 |
--------------------------------------------------------------------------------
/apps/linearlite/src/components/icons/in-progress.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | export const InProgressIcon = ({ className }: { className?: string }) => {
4 | return (
5 |
31 | );
32 | };
33 |
--------------------------------------------------------------------------------
/apps/linearlite/src/components/layout/filters/header.tsx:
--------------------------------------------------------------------------------
1 | import { MenuButton } from "@/components/common/menu-button";
2 | import React from "react";
3 |
4 | export const Header = ({
5 | totalCount,
6 | filteredCount,
7 | heading
8 | }: {
9 | totalCount: number;
10 | filteredCount: number;
11 | heading: string;
12 | }) => {
13 | return (
14 |
14 | {children}
15 |
16 | {frontendState.showToolbar &&
15 |
23 | );
24 | };
25 |
--------------------------------------------------------------------------------
/apps/react-router/.react-router/types/+server-build.d.ts:
--------------------------------------------------------------------------------
1 | // Generated by React Router
2 |
3 | declare module "virtual:react-router/server-build" {
4 | import { ServerBuild } from "react-router";
5 | export const assets: ServerBuild["assets"];
6 | export const assetsBuildDirectory: ServerBuild["assetsBuildDirectory"];
7 | export const basename: ServerBuild["basename"];
8 | export const entry: ServerBuild["entry"];
9 | export const future: ServerBuild["future"];
10 | export const isSpaMode: ServerBuild["isSpaMode"];
11 | export const prerender: ServerBuild["prerender"];
12 | export const publicPath: ServerBuild["publicPath"];
13 | export const routeDiscovery: ServerBuild["routeDiscovery"];
14 | export const routes: ServerBuild["routes"];
15 | export const ssr: ServerBuild["ssr"];
16 | export const unstable_getCriticalCss: ServerBuild["unstable_getCriticalCss"];
17 | }
--------------------------------------------------------------------------------
/apps/react-router/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "livestore-react-router",
3 | "version": "0.0.0",
4 | "scripts": {
5 | "typecheck": "react-router typegen && tsc -b",
6 | "build": "VITE_LIVESTORE_SYNC_URL=http://livestore-react-router.threepointone.workers.dev react-router build",
7 | "start": "VITE_LIVESTORE_SYNC_URL=http://localhost:5173 react-router dev",
8 | "deploy": "npm run build && wrangler deploy",
9 | "clean": "rm -rf node_modules/.vite .wrangler .react-router"
10 | },
11 | "keywords": [],
12 | "author": "",
13 | "license": "ISC",
14 | "type": "module",
15 | "dependencies": {
16 | "isbot": "^5.1.28",
17 | "react-router": "^7.6.1"
18 | },
19 | "devDependencies": {
20 | "@react-router/dev": "^7.6.1",
21 | "@tailwindcss/vite": "^4.1.8",
22 | "tailwindcss": "^4.1.8",
23 | "vite-tsconfig-paths": "^5.1.4"
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/apps/chat/wrangler.jsonc:
--------------------------------------------------------------------------------
1 | {
2 | "name": "livestore-chat",
3 | "main": "./src/server.ts",
4 | "compatibility_date": "2025-05-08",
5 | "compatibility_flags": ["nodejs_compat"],
6 | "durable_objects": {
7 | "bindings": [
8 | {
9 | "name": "WEBSOCKET_SERVER",
10 | "class_name": "WebSocketServer"
11 | }
12 | ]
13 | },
14 | "migrations": [
15 | {
16 | "tag": "v1",
17 | "new_sqlite_classes": ["WebSocketServer"]
18 | }
19 | ],
20 | // "d1_databases": [
21 | // {
22 | // "binding": "DB",
23 | // "database_name": "livestore-todomvc",
24 | // "database_id": "1c9b5dae-f1fa-49d8-83fa-7bd5b39c4121"
25 | // // "database_id": "${LIVESTORE_CF_SYNC_DATABASE_ID}"
26 | // }
27 | // ],
28 | "vars": {
29 | // should be set via CF dashboard (as secret)
30 | // "ADMIN_SECRET": "..."
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/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 {heading}
17 |
18 | {filteredCount}
19 | {filteredCount !== totalCount && of {totalCount}}
20 | {heading !== "Issues" && issues}
21 |
22 |
14 |
22 |
23 | );
24 | };
25 |
--------------------------------------------------------------------------------
/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/sidebar/search-button.tsx:
--------------------------------------------------------------------------------
1 | import { MenuContext } from "@/app/contexts";
2 | import { useFilterState } from "@/lib/livestore/queries";
3 | import { MagnifyingGlassIcon } from "@heroicons/react/16/solid";
4 | import React from "react";
5 | import { Link } from "react-router-dom";
6 |
7 | export const SearchButton = () => {
8 | const [, setFilterState] = useFilterState();
9 | const { setShowMenu } = React.useContext(MenuContext)!;
10 |
11 | return (
12 | {
16 | setFilterState({ query: null });
17 | setShowMenu(false);
18 | }}
19 | className="rounded-lg size-8 flex items-center justify-center hover:bg-neutral-100 dark:hover:bg-neutral-800 focus:outline-none focus:bg-neutral-100 dark:focus:bg-neutral-800"
20 | >
21 | TodoMVC
23 | updatedNewTodoText(e.target.value)} 29 | onKeyDown={(e) => { 30 | if (e.key === "Enter") { 31 | todoCreated(); 32 | } 33 | }} 34 | > 35 |
23 |
31 |
32 | );
33 | };
34 |
--------------------------------------------------------------------------------
/apps/linearlite/src/components/layout/toolbar/devtools-button.tsx:
--------------------------------------------------------------------------------
1 | import { CodeBracketIcon } from "@heroicons/react/16/solid";
2 | import { useStore } from "@livestore/react";
3 | import React from "react";
4 |
5 | export const DevtoolsButton = ({ className }: { className?: string }) => {
6 | const { store } = useStore();
7 | const devtoolsUrl = React.useMemo(() => {
8 | const searchParams = new URLSearchParams();
9 | searchParams.set("storeId", store.storeId);
10 | searchParams.set("sessionId", store.sessionId);
11 | searchParams.set("clientId", store.clientId);
12 | return `${location.origin}/_livestore?${searchParams.toString()}`;
13 | }, [store.storeId, store.sessionId, store.clientId]);
14 |
15 | return (
16 |
17 |
23 |
27 | );
28 | };
29 |
--------------------------------------------------------------------------------
/apps/linearlite/src/components/layout/list/filtered-list.tsx:
--------------------------------------------------------------------------------
1 | import { VirtualRow } from "@/components/layout/list/virtual-row";
2 | import { useDebouncedScrollState } from "@/lib/livestore/queries";
3 | import React from "react";
4 | import AutoSizer from "react-virtualized-auto-sizer";
5 | import { FixedSizeList } from "react-window";
6 |
7 | export const FilteredList = ({
8 | filteredIssueIds
9 | }: {
10 | filteredIssueIds: readonly number[];
11 | }) => {
12 | const [scrollState, setScrollState] =
13 | useDebouncedScrollState("filtered-list");
14 |
15 | return (
16 |
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/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 |
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/components/layout/toolbar/sync-toggle.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Switch } from "react-aria-components";
3 |
4 | export const SyncToggle = ({ className }: { className?: string }) => {
5 | // TODO hook up actual sync/network state
6 | const [sync, setSync] = React.useState(false);
7 |
8 | return (
9 |
10 | {/* TODO add disabled tooltip for now */}
11 |
18 |
25 |
26 | );
27 | };
28 |
--------------------------------------------------------------------------------
/apps/linearlite/src/components/icons/new-issue.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | export const NewIssueIcon = ({ className }: { className?: string }) => {
4 | return (
5 |
22 | );
23 | };
24 |
--------------------------------------------------------------------------------
/apps/linearlite/src/components/layout/sidebar/new-issue-button.tsx:
--------------------------------------------------------------------------------
1 | import { MenuContext, NewIssueModalContext } from "@/app/contexts";
2 | import { Icon } from "@/components/icons";
3 | import { Status } from "@/types/status";
4 | import { PlusIcon } from "@heroicons/react/20/solid";
5 | import React from "react";
6 | import { Button } from "react-aria-components";
7 |
8 | export const NewIssueButton = ({ status }: { status?: Status }) => {
9 | const { setNewIssueModalStatus } = React.useContext(NewIssueModalContext)!;
10 | const { setShowMenu } = React.useContext(MenuContext)!;
11 |
12 | return (
13 |
27 | );
28 | };
29 |
--------------------------------------------------------------------------------
/apps/linearlite/src/components/layout/sidebar/about-modal.tsx:
--------------------------------------------------------------------------------
1 | import { Modal } from "@/components/common/modal";
2 | import React from "react";
3 | import { Link } from "react-router-dom";
4 |
5 | export const AboutModal = ({
6 | show,
7 | setShow
8 | }: {
9 | show: boolean;
10 | setShow: (show: boolean) => void;
11 | }) => {
12 | return (
13 |
19 |
20 |
21 |
22 | Sync/Network
23 |
24 |
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 |
22 |
38 | );
39 | }
40 | );
41 |
--------------------------------------------------------------------------------
/apps/chat/src/app.tsx:
--------------------------------------------------------------------------------
1 | import { makePersistedAdapter } from "@livestore/adapter-web";
2 | import LiveStoreSharedWorker from "@livestore/adapter-web/shared-worker?sharedworker";
3 | import { LiveStoreProvider } from "@livestore/react";
4 | import { FPSMeter } from "@overengineering/fps-meter";
5 | import type React from "react";
6 | import { unstable_batchedUpdates as batchUpdates } from "react-dom";
7 |
8 | import LiveStoreWorker from "./livestore.worker?worker";
9 | import { schema } from "./livestore/schema.js";
10 | import { getStoreId } from "./util/store-id.js";
11 |
12 | const AppBody: React.FC = () => (
13 |
23 |
30 | {() => (
31 |
36 |
37 |
26 |
27 |
28 | )}
29 |
32 |
34 | )}
35 |
14 |
16 | );
17 |
18 | const storeId = getStoreId();
19 |
20 | const adapter = makePersistedAdapter({
21 | storage: { type: "opfs" },
22 | worker: LiveStoreWorker,
23 | sharedWorker: LiveStoreSharedWorker
24 | });
25 |
26 | export const App: React.FC = () => (
27 | Chat
15 |Loading LiveStore ({_.stage})...
}
31 | batchUpdates={batchUpdates}
32 | storeId={storeId}
33 | syncPayload={{ authToken: "insecure-token-change-me" }}
34 | >
35 |
36 |
38 |
28 |
29 | {router}
30 |
31 |
32 |
16 |
36 | Counter: {counter}
17 |
18 |
26 |
34 |
35 |
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 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "livestore-cf-examples",
3 | "private": true,
4 | "version": "0.0.0",
5 | "description": "Examples of using livestore with cloudflare workers",
6 | "keywords": [],
7 | "author": "Sunil Pai Loading LiveStore ({_.stage})...
}
36 | batchUpdates={batchUpdates}
37 | storeId={storeId}
38 | syncPayload={{ authToken: "insecure-token-change-me" }}
39 | >
40 |
41 |
43 |
36 |
47 |
48 | );
49 | };
50 |
--------------------------------------------------------------------------------
/apps/linearlite/src/components/layout/issue/delete-button.tsx:
--------------------------------------------------------------------------------
1 | import { events } from "@/lib/livestore/schema";
2 | import { TrashIcon } from "@heroicons/react/16/solid";
3 | import { useStore } from "@livestore/react";
4 | import React from "react";
5 | import { Button } from "react-aria-components";
6 |
7 | export const DeleteButton = ({
8 | issueId,
9 | close,
10 | className
11 | }: {
12 | issueId: number;
13 | close: () => void;
14 | className?: string;
15 | }) => {
16 | const { store } = useStore();
17 | const [confirm, setConfirm] = React.useState(false);
18 |
19 | const onClick = () => {
20 | if (confirm) {
21 | const deleted = new Date();
22 | store.commit(
23 | events.deleteIssue({ id: issueId, deleted }),
24 | events.deleteDescription({ id: issueId, deleted }),
25 | events.deleteCommentsByIssueId({ issueId, deleted })
26 | );
27 | setConfirm(false);
28 | close();
29 | }
30 | setConfirm(true);
31 | setTimeout(() => {
32 | setConfirm(false);
33 | }, 2000);
34 | };
35 |
36 | return (
37 |
49 | );
50 | };
51 |
--------------------------------------------------------------------------------
/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 |
37 | {statusOptions.map((statusDetails, statusOption) => (
38 |
46 | -
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 |
16 |
40 | );
41 | };
42 |
--------------------------------------------------------------------------------
/apps/linearlite/src/components/icons/index.tsx:
--------------------------------------------------------------------------------
1 | import { BacklogIcon } from "@/components/icons/backlog";
2 | import { CanceledIcon } from "@/components/icons/canceled";
3 | import { DoneIcon } from "@/components/icons/done";
4 | import { FilterIcon } from "@/components/icons/filter";
5 | import { InProgressIcon } from "@/components/icons/in-progress";
6 | import { LinearLiteIcon } from "@/components/icons/linear-lite";
7 | import { LivestoreIcon } from "@/components/icons/livestore";
8 | import { NewIssueIcon } from "@/components/icons/new-issue";
9 | import { PriorityHighIcon } from "@/components/icons/priority-high";
10 | import { PriorityLowIcon } from "@/components/icons/priority-low";
11 | import { PriorityMediumIcon } from "@/components/icons/priority-medium";
12 | import { PriorityNoneIcon } from "@/components/icons/priority-none";
13 | import { PriorityUrgentIcon } from "@/components/icons/priority-urgent";
14 | import { SidebarIcon } from "@/components/icons/sidebar";
15 | import { TodoIcon } from "@/components/icons/todo";
16 | import React from "react";
17 |
18 | const icons = {
19 | backlog: BacklogIcon,
20 | canceled: CanceledIcon,
21 | done: DoneIcon,
22 | filter: FilterIcon,
23 | "in-progress": InProgressIcon,
24 | linearlite: LinearLiteIcon,
25 | livestore: LivestoreIcon,
26 | "new-issue": NewIssueIcon,
27 | "priority-none": PriorityNoneIcon,
28 | "priority-low": PriorityLowIcon,
29 | "priority-medium": PriorityMediumIcon,
30 | "priority-high": PriorityHighIcon,
31 | "priority-urgent": PriorityUrgentIcon,
32 | sidebar: SidebarIcon,
33 | todo: TodoIcon
34 | };
35 |
36 | export type IconName = keyof typeof icons;
37 |
38 | export const Icon = ({
39 | name,
40 | className
41 | }: {
42 | name: IconName;
43 | className?: string;
44 | }) => {
45 | const Component = icons[name];
46 | return
17 |
22 |
27 |
28 |
31 |
32 | Database:
33 |
38 |
20 |
41 | );
42 | };
43 |
--------------------------------------------------------------------------------
/apps/linearlite/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "livestore-linearlite",
3 | "version": "0.0.0",
4 | "type": "module",
5 | "dependencies": {
6 | "@headlessui/react": "2.2.4",
7 | "@heroicons/react": "2.2.0",
8 | "@tailwindcss/forms": "0.5.10",
9 | "@tiptap/core": "2.12.0",
10 | "@tiptap/extension-placeholder": "2.12.0",
11 | "@tiptap/extension-table": "2.12.0",
12 | "@tiptap/extension-table-cell": "2.12.0",
13 | "@tiptap/extension-table-header": "2.12.0",
14 | "@tiptap/extension-table-row": "2.12.0",
15 | "@tiptap/pm": "2.12.0",
16 | "@tiptap/react": "2.12.0",
17 | "@tiptap/starter-kit": "2.12.0",
18 | "animate.css": "4.1.1",
19 | "classnames": "2.5.1",
20 | "fractional-indexing": "3.2.0",
21 | "react-aria": "3.40.0",
22 | "react-aria-components": "1.9.0",
23 | "react-beautiful-dnd": "13.1.1",
24 | "react-icons": "5.5.0",
25 | "react-markdown": "10.1.0",
26 | "react-router-dom": "7.6.1",
27 | "react-virtualized-auto-sizer": "1.0.26",
28 | "react-window": "1.8.11",
29 | "tiptap-markdown": "0.8.10"
30 | },
31 | "devDependencies": {
32 | "@svgr/plugin-jsx": "^8.1.0",
33 | "@svgr/plugin-svgo": "^8.1.0",
34 | "@tailwindcss/typography": "^0.5.16",
35 | "@tailwindcss/vite": "^4.1.7",
36 | "@types/react-beautiful-dnd": "^13.1.8",
37 | "@types/react-router-dom": "^5.3.3",
38 | "@types/react-window": "^1.8.8",
39 | "prompt": "^1.3.0",
40 | "tailwindcss": "^4.1.7",
41 | "typescript": "^5.8.3",
42 | "vite-plugin-svgr": "^4.3.0"
43 | },
44 | "engines": {
45 | "node": ">=23.0.0"
46 | },
47 | "scripts": {
48 | "start": "VITE_LIVESTORE_SYNC_URL=http://localhost:5173 vite dev",
49 | "deploy": "VITE_LIVESTORE_SYNC_URL=http://livestore-linearlite.threepointone.workers.dev vite build && wrangler deploy",
50 | "clean": "rm -rf node_modules/.vite .wrangler"
51 | }
52 | }
53 |
--------------------------------------------------------------------------------
/apps/linearlite/src/app/style.css:
--------------------------------------------------------------------------------
1 | @import "tailwindcss";
2 |
3 | @config "../../tailwind.config.cjs";
4 |
5 | body {
6 | @apply bg-white text-xs text-neutral-600 dark:bg-neutral-900 dark:text-neutral-200 antialiased;
7 | }
8 |
9 | @font-face {
10 | font-family: "Inter UI";
11 | font-style: normal;
12 | font-weight: 400;
13 | font-display: swap;
14 | src:
15 | url("/fonts/inter-regular.woff2") format("woff2"),
16 | url("/fonts/inter-regular.woff") format("woff");
17 | }
18 |
19 | @font-face {
20 | font-family: "Inter UI";
21 | font-style: normal;
22 | font-weight: 500;
23 | font-display: swap;
24 | src:
25 | url("/fonts/inter-medium.woff2") format("woff2"),
26 | url("/fonts/inter-medium.woff") format("woff");
27 | }
28 |
29 | @font-face {
30 | font-family: "Inter UI";
31 | font-style: normal;
32 | font-weight: 600;
33 | font-display: swap;
34 | src:
35 | url("/fonts/inter-semibold.woff2") format("woff2"),
36 | url("/fonts/inter-semibold.woff") format("woff");
37 | }
38 |
39 | @font-face {
40 | font-family: "Inter UI";
41 | font-style: normal;
42 | font-weight: 800;
43 | font-display: swap;
44 | src:
45 | url("/fonts/inter-extrabold.woff2") format("woff2"),
46 | url("/fonts/inter-extrabold.woff") format("woff");
47 | }
48 |
49 | .modal {
50 | max-width: calc(100vw - 32px);
51 | max-height: calc(100vh - 32px);
52 | }
53 |
54 | #root,
55 | body,
56 | html {
57 | height: 100%;
58 | }
59 |
60 | .tiptap p.is-editor-empty:first-child::before {
61 | @apply text-neutral-400 dark:text-neutral-500;
62 | content: attr(data-placeholder);
63 | float: left;
64 | height: 0;
65 | pointer-events: none;
66 | }
67 |
68 | input::-webkit-outer-spin-button,
69 | input::-webkit-inner-spin-button {
70 | -webkit-appearance: none;
71 | margin: 0;
72 | }
73 |
74 | /* Firefox */
75 | input[type="number"] {
76 | -moz-appearance: textfield;
77 | }
78 |
--------------------------------------------------------------------------------
/apps/todomvc/src/components/MainSection.tsx:
--------------------------------------------------------------------------------
1 | import { queryDb } from "@livestore/livestore";
2 | import { useStore } from "@livestore/react";
3 | import React from "react";
4 |
5 | import { uiState$ } from "../livestore/queries.js";
6 | import { events, tables } from "../livestore/schema.js";
7 |
8 | const visibleTodos$ = queryDb(
9 | (get) => {
10 | const { filter } = get(uiState$);
11 | return tables.todos.where({
12 | deletedAt: null,
13 | completed: filter === "all" ? undefined : filter === "completed"
14 | });
15 | },
16 | { label: "visibleTodos" }
17 | );
18 |
19 | export const MainSection: React.FC = () => {
20 | const { store } = useStore();
21 |
22 | const toggleTodo = React.useCallback(
23 | ({ id, completed }: typeof tables.todos.Type) =>
24 | store.commit(
25 | completed
26 | ? events.todoUncompleted({ id })
27 | : events.todoCompleted({ id })
28 | ),
29 | [store]
30 | );
31 |
32 | const visibleTodos = store.useQuery(visibleTodos$);
33 |
34 | return (
35 | -
37 | {visibleTodos.map((todo) => (
38 |
-
39 | 40 | toggleTodo(todo)} 45 | /> 46 | 47 | 55 |56 |
57 | ))}
58 |
39 |
40 | {title}
41 |
42 |
43 | )}
44 | {children}
45 |
52 |
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 |
18 |
19 |
26 |
30 |
31 |
42 |
43 |
44 |
45 | );
46 | };
47 |
--------------------------------------------------------------------------------
/apps/todomvc/src/components/Footer.tsx:
--------------------------------------------------------------------------------
1 | import { queryDb } from "@livestore/livestore";
2 | import { useStore } from "@livestore/react";
3 | import React from "react";
4 |
5 | import { uiState$ } from "../livestore/queries.js";
6 | import { events, tables } from "../livestore/schema.js";
7 |
8 | const incompleteCount$ = queryDb(
9 | tables.todos.count().where({ completed: false, deletedAt: null }),
10 | {
11 | label: "incompleteCount"
12 | }
13 | );
14 |
15 | export const Footer: React.FC = () => {
16 | const { store } = useStore();
17 | const { filter } = store.useQuery(uiState$);
18 | const incompleteCount = store.useQuery(incompleteCount$);
19 | const setFilter = (filter: (typeof tables.uiState.Value)["filter"]) =>
20 | store.commit(events.uiStateSet({ filter }));
21 |
22 | return (
23 |
63 | );
64 | };
65 |
--------------------------------------------------------------------------------
/apps/react-router/.react-router/types/app/routes/+types/home.ts:
--------------------------------------------------------------------------------
1 | // Generated by React Router
2 |
3 | import type { GetInfo, GetAnnotations } from "react-router/internal";
4 |
5 | type Module = typeof import("../home.js")
6 |
7 | type Info = GetInfo<{
8 | file: "routes/home.tsx",
9 | module: Module
10 | }>
11 |
12 | type Matches = [{
13 | id: "root";
14 | module: typeof import("../../root.js");
15 | }, {
16 | id: "routes/home";
17 | module: typeof import("../home.js");
18 | }];
19 |
20 | type Annotations = GetAnnotations
32 |
41 |
33 | Please use the desktop version to access all LiveStore tools!
34 |
35 | navigate(`/issue/${issue.id}`)}
41 | >
42 |
43 |
59 | );
60 | };
61 |
--------------------------------------------------------------------------------
/apps/linearlite/src/components/icons/livestore.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | export const LivestoreIcon = ({ className }: { className?: string }) => {
4 | return (
5 |
31 | );
32 | };
33 |
--------------------------------------------------------------------------------
/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
44 |
49 |
45 | {getIssueTag(issue.id)}
46 |
47 |
50 |
53 | {issue.title}
52 |
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/common/editor.tsx:
--------------------------------------------------------------------------------
1 | import EditorMenu from "@/components/common/editor-menu";
2 | import Placeholder from "@tiptap/extension-placeholder";
3 | import Table from "@tiptap/extension-table";
4 | import TableCell from "@tiptap/extension-table-cell";
5 | import TableHeader from "@tiptap/extension-table-header";
6 | import TableRow from "@tiptap/extension-table-row";
7 | import {
8 | BubbleMenu,
9 | EditorContent,
10 | useEditor,
11 | type Extensions
12 | } from "@tiptap/react";
13 | import StarterKit from "@tiptap/starter-kit";
14 | import React, { useEffect, useRef } from "react";
15 | import { Markdown } from "tiptap-markdown";
16 |
17 | const Editor = ({
18 | value,
19 | onBlur,
20 | onChange,
21 | className = "",
22 | placeholder
23 | }: {
24 | value: string;
25 | onBlur?: (value: string) => void;
26 | onChange?: (value: string) => void;
27 | className?: string;
28 | placeholder?: string;
29 | }) => {
30 | const markdownValue = useRef
18 |
25 |
43 |
44 |
50 |
51 | );
52 | };
53 |
--------------------------------------------------------------------------------
/apps/linearlite/src/components/layout/filters/status-filter.tsx:
--------------------------------------------------------------------------------
1 | import { Icon, IconName } from "@/components/icons";
2 | import { FilterMenu } from "@/components/layout/filters/filter-menu";
3 | import { statusOptions } from "@/data/status-options";
4 | import { useFilterState } from "@/lib/livestore/queries";
5 | import { Status } from "@/types/status";
6 | import { XMarkIcon } from "@heroicons/react/16/solid";
7 | import React from "react";
8 | import { Button } from "react-aria-components";
9 |
10 | export const StatusFilter = () => {
11 | const [filterState, setFilterState] = useFilterState();
12 | if (!filterState.status) return null;
13 |
14 | return (
15 |
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/list/row.tsx:
--------------------------------------------------------------------------------
1 | import { Avatar } from "@/components/common/avatar";
2 | import { PriorityMenu } from "@/components/common/priority-menu";
3 | import { StatusMenu } from "@/components/common/status-menu";
4 | import { events } from "@/lib/livestore/schema";
5 | import { Issue } from "@/types/issue";
6 | import { Priority } from "@/types/priority";
7 | import { Status } from "@/types/status";
8 | import { formatDate } from "@/utils/format-date";
9 | import { getIssueTag } from "@/utils/get-issue-tag";
10 | import { useStore } from "@livestore/react";
11 | import type { CSSProperties } from "react";
12 | import React, { memo } from "react";
13 | import { useNavigate } from "react-router-dom";
14 |
15 | export const Row = memo(
16 | ({ issue, style }: { issue: Issue; style: CSSProperties }) => {
17 | const navigate = useNavigate();
18 | const { store } = useStore();
19 |
20 | const handleChangeStatus = (status: Status) =>
21 | store.commit(
22 | events.updateIssueStatus({ id: issue.id, status, modified: new Date() })
23 | );
24 |
25 | const handleChangePriority = (priority: Priority) =>
26 | store.commit(
27 | events.updateIssuePriority({
28 | id: issue.id,
29 | priority,
30 | modified: new Date()
31 | })
32 | );
33 |
34 | return (
35 |
17 |
18 | Status
19 |
20 | {filterState.status.length > 1 ? "is any of" : "is"}
21 |
22 | navigate(`/issue/${issue.id}`)}
40 | style={style}
41 | >
42 |
65 | );
66 | }
67 | );
68 |
--------------------------------------------------------------------------------
/apps/linearlite/src/components/layout/sidebar/index.tsx:
--------------------------------------------------------------------------------
1 | import { MenuContext } from "@/app/contexts";
2 | import { AboutMenu } from "@/components/layout/sidebar/about-menu";
3 | import { NewIssueButton } from "@/components/layout/sidebar/new-issue-button";
4 | import { SearchButton } from "@/components/layout/sidebar/search-button";
5 | import { ThemeButton } from "@/components/layout/sidebar/theme-button";
6 | import { ToolbarButton } from "@/components/layout/toolbar/toolbar-button";
7 | import { useFilterState } from "@/lib/livestore/queries";
8 | import { Bars4Icon, ViewColumnsIcon } from "@heroicons/react/24/outline";
9 | import React from "react";
10 | import { Link } from "react-router-dom";
11 |
12 | export const Sidebar = ({ className }: { className?: string }) => {
13 | const [, setFilterState] = useFilterState();
14 | const { setShowMenu } = React.useContext(MenuContext)!;
15 |
16 | const navItems = [
17 | {
18 | title: "List view",
19 | icon: Bars4Icon,
20 | href: "/",
21 | onClick: () => setFilterState({ status: null })
22 | },
23 | {
24 | title: "Board view",
25 | icon: ViewColumnsIcon,
26 | href: "/board",
27 | onClick: () => setFilterState({ status: null })
28 | }
29 | ];
30 |
31 | return (
32 |
68 | );
69 | };
70 |
--------------------------------------------------------------------------------
/apps/chat/src/livestore/schema.ts:
--------------------------------------------------------------------------------
1 | import {
2 | Events,
3 | makeSchema,
4 | Schema,
5 | SessionIdSymbol,
6 | State
7 | } from "@livestore/livestore";
8 |
9 | // You can model your state as SQLite tables (https://docs.livestore.dev/reference/state/sqlite-schema)
10 | export const tables = {
11 | messages: State.SQLite.table({
12 | name: "messages",
13 | columns: {
14 | id: State.SQLite.text({ primaryKey: true }),
15 | content: State.SQLite.text({ default: "" }),
16 | role: State.SQLite.text({ default: "user" }), // 'user' or 'assistant'
17 | timestamp: State.SQLite.integer({
18 | default: new Date(),
19 | schema: Schema.DateFromNumber
20 | }),
21 | deletedAt: State.SQLite.integer({
22 | nullable: true,
23 | schema: Schema.DateFromNumber
24 | })
25 | }
26 | }),
27 | // Client documents can be used for local-only state (e.g. form inputs)
28 | uiState: State.SQLite.clientDocument({
29 | name: "uiState",
30 | schema: Schema.Struct({
31 | inputText: Schema.String,
32 | isTyping: Schema.Boolean,
33 | selectedModel: Schema.String
34 | }),
35 | default: {
36 | id: SessionIdSymbol,
37 | value: {
38 | inputText: "",
39 | isTyping: false,
40 | selectedModel: "gpt-3.5-turbo"
41 | }
42 | }
43 | })
44 | };
45 |
46 | // Events describe data changes (https://docs.livestore.dev/reference/events)
47 | export const events = {
48 | messageCreated: Events.synced({
49 | name: "v1.MessageCreated",
50 | schema: Schema.Struct({
51 | id: Schema.String,
52 | content: Schema.String,
53 | role: Schema.String,
54 | timestamp: Schema.Date
55 | })
56 | }),
57 | messageDeleted: Events.synced({
58 | name: "v1.MessageDeleted",
59 | schema: Schema.Struct({
60 | id: Schema.String,
61 | deletedAt: Schema.Date
62 | })
63 | }),
64 | conversationCleared: Events.synced({
65 | name: "v1.ConversationCleared",
66 | schema: Schema.Struct({
67 | deletedAt: Schema.Date
68 | })
69 | }),
70 | uiStateSet: tables.uiState.set
71 | };
72 |
73 | // Materializers are used to map events to state (https://docs.livestore.dev/reference/state/materializers)
74 | const materializers = State.SQLite.materializers(events, {
75 | "v1.MessageCreated": ({ id, content, role, timestamp }) =>
76 | tables.messages.insert({ id, content, role, timestamp }),
77 | "v1.MessageDeleted": ({ id, deletedAt }) =>
78 | tables.messages.update({ deletedAt }).where({ id }),
79 | "v1.ConversationCleared": ({ deletedAt }) =>
80 | tables.messages.update({ deletedAt }).where({ deletedAt: null })
81 | });
82 |
83 | const state = State.SQLite.makeState({ tables, materializers });
84 |
85 | export const schema = makeSchema({ events, state });
86 |
--------------------------------------------------------------------------------
/apps/todomvc/src/livestore/schema.ts:
--------------------------------------------------------------------------------
1 | import {
2 | Events,
3 | makeSchema,
4 | Schema,
5 | SessionIdSymbol,
6 | State
7 | } from "@livestore/livestore";
8 |
9 | // You can model your state as SQLite tables (https://docs.livestore.dev/reference/state/sqlite-schema)
10 | export const tables = {
11 | todos: State.SQLite.table({
12 | name: "todos",
13 | columns: {
14 | id: State.SQLite.text({ primaryKey: true }),
15 | text: State.SQLite.text({ default: "" }),
16 | completed: State.SQLite.boolean({ default: false }),
17 | deletedAt: State.SQLite.integer({
18 | nullable: true,
19 | schema: Schema.DateFromNumber
20 | })
21 | }
22 | }),
23 | // Client documents can be used for local-only state (e.g. form inputs)
24 | uiState: State.SQLite.clientDocument({
25 | name: "uiState",
26 | schema: Schema.Struct({
27 | newTodoText: Schema.String,
28 | filter: Schema.Literal("all", "active", "completed")
29 | }),
30 | default: { id: SessionIdSymbol, value: { newTodoText: "", filter: "all" } }
31 | })
32 | };
33 |
34 | // Events describe data changes (https://docs.livestore.dev/reference/events)
35 | export const events = {
36 | todoCreated: Events.synced({
37 | name: "v1.TodoCreated",
38 | schema: Schema.Struct({ id: Schema.String, text: Schema.String })
39 | }),
40 | todoCompleted: Events.synced({
41 | name: "v1.TodoCompleted",
42 | schema: Schema.Struct({ id: Schema.String })
43 | }),
44 | todoUncompleted: Events.synced({
45 | name: "v1.TodoUncompleted",
46 | schema: Schema.Struct({ id: Schema.String })
47 | }),
48 | todoDeleted: Events.synced({
49 | name: "v1.TodoDeleted",
50 | schema: Schema.Struct({ id: Schema.String, deletedAt: Schema.Date })
51 | }),
52 | todoClearedCompleted: Events.synced({
53 | name: "v1.TodoClearedCompleted",
54 | schema: Schema.Struct({ deletedAt: Schema.Date })
55 | }),
56 | uiStateSet: tables.uiState.set
57 | };
58 |
59 | // Materializers are used to map events to state (https://docs.livestore.dev/reference/state/materializers)
60 | const materializers = State.SQLite.materializers(events, {
61 | "v1.TodoCreated": ({ id, text }) =>
62 | tables.todos.insert({ id, text, completed: false }),
63 | "v1.TodoCompleted": ({ id }) =>
64 | tables.todos.update({ completed: true }).where({ id }),
65 | "v1.TodoUncompleted": ({ id }) =>
66 | tables.todos.update({ completed: false }).where({ id }),
67 | "v1.TodoDeleted": ({ id, deletedAt }) =>
68 | tables.todos.update({ deletedAt }).where({ id }),
69 | "v1.TodoClearedCompleted": ({ deletedAt }) =>
70 | tables.todos.update({ deletedAt }).where({ completed: true })
71 | });
72 |
73 | const state = State.SQLite.makeState({ tables, materializers });
74 |
75 | export const schema = makeSchema({ events, state });
76 |
--------------------------------------------------------------------------------
/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 |
43 |
58 |
48 | {getIssueTag(issue.id)}
49 |
50 |
55 | {issue.title}
56 |
57 |
59 |
64 |
60 | {formatDate(new Date(issue.created))}
61 |
62 |
27 | Workspace:
28 |
50 |
57 |
58 |
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/react-router/app/root.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | isRouteErrorResponse,
3 | Links,
4 | Meta,
5 | Outlet,
6 | Scripts,
7 | ScrollRestoration,
8 | } from "react-router";
9 | import { makePersistedAdapter } from "@livestore/adapter-web";
10 | import LiveStoreSharedWorker from "@livestore/adapter-web/shared-worker?sharedworker";
11 | import { LiveStoreProvider } from "@livestore/react";
12 | import type React from "react";
13 | import { unstable_batchedUpdates as batchUpdates } from "react-dom";
14 |
15 | import LiveStoreWorker from "./livestore/livestore.worker?worker";
16 | import { schema } from "./livestore/schema";
17 |
18 | import type { Route } from "./+types/root";
19 | import "./app.css";
20 |
21 | export const getStoreId = () => {
22 | if (typeof window === "undefined") return "unused";
23 |
24 | const searchParams = new URLSearchParams(window.location.search);
25 | const storeId = searchParams.get("storeId");
26 | if (storeId !== null) return storeId;
27 |
28 | const newAppId = crypto.randomUUID();
29 | searchParams.set("storeId", newAppId);
30 |
31 | window.location.search = searchParams.toString();
32 | };
33 |
34 | export const links: Route.LinksFunction = () => [
35 | { rel: "preconnect", href: "https://fonts.googleapis.com" },
36 | {
37 | rel: "preconnect",
38 | href: "https://fonts.gstatic.com",
39 | crossOrigin: "anonymous",
40 | },
41 | {
42 | rel: "stylesheet",
43 | href: "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap",
44 | },
45 | ];
46 |
47 | // const storeId = getStoreId();
48 | // let's just use a sample store id for now
49 | const storeId = "sample-store";
50 |
51 | const adapter = makePersistedAdapter({
52 | storage: { type: "opfs" },
53 | worker: LiveStoreWorker,
54 | sharedWorker: LiveStoreSharedWorker,
55 | });
56 |
57 | export function Layout({ children }: { children: React.ReactNode }) {
58 | return (
59 |
60 |
61 |
62 |
63 |
64 |
82 | {!hideStatusFilter &&
86 | 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 |
67 |
105 | 68 | New issue 69 |
70 |
82 |
104 |
21 |
75 | );
76 | };
77 |
78 | export default EditorMenu;
79 |
--------------------------------------------------------------------------------
/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 |
22 |
29 |
36 |
43 |
50 |
51 |
52 |
59 |
66 |
73 |
74 |