Skip to content

Commit aedd242

Browse files
vuvincentvuvincent
authored
desktop v2 (#5)
* desktop v2 basics complete * rich text task builder * original build text to retrieve text + trim title text * add icons on mark * sort the tasks by default and refetches after actions * command center + more shortcuts + desktop icons * fixed the cursor not showing up * fix small error on delete task dialog + slight UI fixes
1 parent 016b820 commit aedd242

45 files changed

Lines changed: 7564 additions & 87 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎apps/desktop-v2/.eslintrc.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"extends": "next/core-web-vitals"
3+
}

‎apps/desktop-v2/.gitignore‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
8+
# testing
9+
/coverage
10+
11+
# next.js
12+
/.next/
13+
/out/
14+
15+
# production
16+
/build
17+
18+
# misc
19+
.DS_Store
20+
*.pem
21+
22+
# debug
23+
npm-debug.log*
24+
yarn-debug.log*
25+
yarn-error.log*
26+
27+
# local env files
28+
.env*.local
29+
30+
# vercel
31+
.vercel
32+
33+
# typescript
34+
*.tsbuildinfo
35+
next-env.d.ts

‎apps/desktop-v2/README.md‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
2+
3+
## Getting Started
4+
5+
First, run the development server:
6+
7+
```bash
8+
npm run dev
9+
# or
10+
yarn dev
11+
# or
12+
pnpm dev
13+
```
14+
15+
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
16+
17+
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
18+
19+
This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
20+
21+
## Learn More
22+
23+
To learn more about Next.js, take a look at the following resources:
24+
25+
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
26+
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
27+
28+
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
29+
30+
## Deploy on Vercel
31+
32+
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
33+
34+
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

‎apps/desktop-v2/app/alert-dialog.tsx‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import React, { ReactNode, useEffect } from "react";
2+
import * as Dialog from "@radix-ui/react-dialog";
3+
import { Button } from "../components/button";
4+
import { Kbd } from "../components/kbd";
5+
import Mousetrap from "mousetrap";
6+
7+
export const AlertDialog = ({
8+
description,
9+
open,
10+
setOpen,
11+
handleSubmit,
12+
}: {
13+
open: boolean;
14+
setOpen: (open: boolean) => void;
15+
description: ReactNode;
16+
handleSubmit: () => void;
17+
}) => {
18+
useEffect(() => {
19+
Mousetrap.bind("enter", (e) => {
20+
e.preventDefault();
21+
handleSubmit();
22+
setOpen(false);
23+
});
24+
return () => {
25+
Mousetrap.unbind("enter");
26+
};
27+
}, [handleSubmit, setOpen]);
28+
29+
return (
30+
<Dialog.Root open={open} onOpenChange={setOpen}>
31+
<Dialog.Portal>
32+
<Dialog.Overlay className={`bg-gray-400 opacity-50 fixed inset-0`} />
33+
<Dialog.Content
34+
className={`bg-white p-3 data-[state=open]:animate-contentShow fixed top-[50%] left-[50%] max-h-[85vh] w-[90vw] max-w-[450px] translate-x-[-50%] translate-y-[-50%] rounded-[6px] shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] focus:outline-none`}
35+
>
36+
<div className="flex flex-col">{description}</div>
37+
<div className="flex justify-end">
38+
<Button className="gap-1 pb-2 bg-red-600" onClick={handleSubmit}>
39+
Submit
40+
<Kbd>↵</Kbd>
41+
</Button>
42+
</div>
43+
</Dialog.Content>
44+
</Dialog.Portal>
45+
</Dialog.Root>
46+
);
47+
};

‎apps/desktop-v2/app/command-center.tsx‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
import * as Dialog from "@radix-ui/react-dialog";
2+
import { Command } from "cmdk";
3+
import Mousetrap from "mousetrap";
4+
import Image from "next/image";
5+
import React from "react";
6+
import { Kbd } from "../components/kbd";
7+
import { SupernovaCommand } from "../types/command";
8+
import { ISupernovaTask } from "../types/supernova-task";
9+
import { twMerge } from "tailwind-merge";
10+
import { ibmPlexMono } from "../components/fonts";
11+
12+
export const SupernovaCommandCenter = ({
13+
commands,
14+
context,
15+
}: {
16+
commands: SupernovaCommand[];
17+
context: {
18+
chosenTask: ISupernovaTask | null;
19+
};
20+
}) => {
21+
const [open, setOpen] = React.useState(false);
22+
23+
React.useEffect(() => {
24+
// open the menu when ⌘K is pressed
25+
const down = (e: Mousetrap.ExtendedKeyboardEvent) => {
26+
e.preventDefault();
27+
setOpen((open) => !open);
28+
};
29+
30+
Mousetrap.bind("mod+k", down);
31+
return () => {
32+
Mousetrap.unbind("mod+k");
33+
};
34+
}, []);
35+
36+
return (
37+
<Dialog.Root open={open} onOpenChange={setOpen}>
38+
<Dialog.Portal>
39+
<Dialog.Overlay className={`bg-gray-400 opacity-50 fixed inset-0`} />
40+
<Dialog.Content
41+
className={`data-[state=open]:animate-contentShow fixed top-[50%] left-[50%] max-h-[85vh] w-[90vw] max-w-[450px] translate-x-[-50%] translate-y-[-50%] rounded-[6px] shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] focus:outline-none`}
42+
>
43+
<Command className="bg-white rounded-lg p-4 flex flex-col gap-2">
44+
{context.chosenTask !== null && (
45+
<div>
46+
<p
47+
className={twMerge(
48+
"text-xs text-slate-300",
49+
ibmPlexMono.className
50+
)}
51+
>
52+
{">"}{" "}
53+
{context.chosenTask !== null
54+
? '"' + context.chosenTask.title + '"'
55+
: "No task selected"}
56+
</p>
57+
</div>
58+
)}
59+
<div className="flex items-center gap-2">
60+
<Image
61+
src={"/supernova-globe.svg"}
62+
width={20}
63+
height={20}
64+
alt="Supernova's logo"
65+
priority
66+
/>
67+
<Command.Input
68+
placeholder="Find a command..."
69+
className="outline-none"
70+
autoFocus
71+
/>
72+
</div>
73+
<Command.Separator alwaysRender className="h-[1px] bg-gray-300" />
74+
<Command.List className="flex flex-col gap-2">
75+
<Command.Empty className="text-slate-300 text-center">
76+
No results found.
77+
</Command.Empty>
78+
79+
{commands.map((command) => (
80+
<Command.Item
81+
key={command.label}
82+
className=" data-[selected='true']:bg-slate-100 flex items-center gap-2 justify-between hover:bg-slate-200 rounded-md px-2 py-1"
83+
onSelect={() => {
84+
setOpen(false);
85+
command.cb();
86+
}}
87+
>
88+
<p>{command.label}</p>
89+
{Array.isArray(command.shortcut) ? (
90+
<div className="flex items-center gap-2">
91+
{command.shortcut.map((key) => (
92+
<Kbd key={key}>{key}</Kbd>
93+
))}
94+
</div>
95+
) : (
96+
<Kbd>{command.shortcut}</Kbd>
97+
)}
98+
</Command.Item>
99+
))}
100+
</Command.List>
101+
</Command>
102+
</Dialog.Content>
103+
</Dialog.Portal>
104+
</Dialog.Root>
105+
);
106+
};

‎apps/desktop-v2/app/favicon.ico‎

25.3 KB
Binary file not shown.

‎apps/desktop-v2/app/globals.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;
4+
5+
body {
6+
background-color: white;
7+
}

‎apps/desktop-v2/app/icons.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import Image from "next/image";
2+
3+
export const arrowRightPath = "/icons/arrow-right.svg";
4+
5+
export const ArrowRightIcon = () => (
6+
<Image src={arrowRightPath} width={20} height={20} alt="Arrow Right" />
7+
);

‎apps/desktop-v2/app/layout.tsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import "./globals.css";
2+
import type { Metadata } from "next";
3+
import { Manrope } from "next/font/google";
4+
5+
const manrope = Manrope({ subsets: ["latin"] });
6+
7+
export const metadata: Metadata = {
8+
title: "Supernova",
9+
};
10+
11+
export default function RootLayout({
12+
children,
13+
}: {
14+
children: React.ReactNode;
15+
}) {
16+
return (
17+
<html lang="en">
18+
<body className={manrope.className}>
19+
{/* drag region because titlebar is overlay */}
20+
<div data-tauri-drag-region="self" className="h-5" />
21+
{children}
22+
</body>
23+
</html>
24+
);
25+
}

‎apps/desktop-v2/app/meta.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export const homeRoute = "/";

0 commit comments

Comments
 (0)