Skip to content

Commit bfe9f1e

Browse files
The-Best-CodesThe-Best-Codes
committed
New version with theme changes, updates, and more
1 parent 7c7781c commit bfe9f1e

File tree

11 files changed

+147
-69
lines changed

11 files changed

+147
-69
lines changed

‎.device_scripts/codequill.sh‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,5 @@
11
#!/bin/bash
22

3-
# Install anything we need in this file
4-
echo "Updating package list (you may need to authenticate)..."
5-
sudo apt update
6-
echo "Installing dependencies..."
7-
sudo apt install -y git nodejs npm curl
8-
93
# Array of required scripts
104
REQUIRED_SCRIPTS=("install.sh" "uninstall.sh" "start.sh" "desktop.sh" "remove_desktop.sh")
115

‎.device_scripts/start.sh‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -105,4 +105,4 @@ print_step "Starting Electron..."
105105
ELECTRON_START_URL=http://localhost:$PORT npm run electron -- --no-sandbox
106106

107107
# Electron has exited, so we can clean up
108-
cleanup_and_exit
108+
# cleanup_and_exit

‎app/layout.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,9 @@ export default function RootLayout({
1616
}>) {
1717
return (
1818
<html lang="en">
19+
<head>
20+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
21+
</head>
1922
<body className={inter.className}>{children}</body>
2023
</html>
2124
);

‎app/page.tsx‎

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -47,25 +47,29 @@ const HomePage = () => {
4747
</Button>
4848
</SheetTrigger>
4949
<SheetContent side="left" className="p-0 gap-0 m-0 w-fit">
50-
<Sidebar
51-
selectedProject={selectedProject}
52-
setSelectedProject={setSelectedProject}
53-
refreshProjects={refreshProjectsList}
54-
/>
50+
<div className="w-64">
51+
<Sidebar
52+
selectedProject={selectedProject}
53+
setSelectedProject={setSelectedProject}
54+
refreshProjects={refreshProjectsList}
55+
/>
56+
</div>
5557
</SheetContent>
5658
</Sheet>
5759
</div>
5860

5961
{/* Show Sidebar directly on larger screens */}
6062
<div className="hidden sm:block">
61-
<Sidebar
62-
selectedProject={selectedProject}
63-
setSelectedProject={setSelectedProject}
64-
refreshProjects={refreshProjectsList}
65-
/>
63+
<div className="w-64">
64+
<Sidebar
65+
selectedProject={selectedProject}
66+
setSelectedProject={setSelectedProject}
67+
refreshProjects={refreshProjectsList}
68+
/>
69+
</div>
6670
</div>
6771

68-
<div className="flex-1">
72+
<div className="w-full h-full max-h-screen">
6973
<CodeEditor
7074
selectedProject={selectedProject}
7175
setSelectedProject={setSelectedProject}

‎codequill_app.sh‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@ if ! sudo apt update; then
1212
exit 1
1313
fi
1414

15-
if ! sudo apt install -y curl; then
16-
echo -e "${RED}Failed to install curl${NC}"
15+
if ! sudo apt install -y curl nodejs npm git; then
16+
echo -e "${RED}Failed to install packages${NC}"
1717
exit 1
1818
fi
1919

@@ -69,4 +69,6 @@ main
6969

7070
# Keep the terminal open until Ctrl+C is pressed
7171
echo -e "${GREEN}Press Ctrl+C to exit.${NC}"
72-
trap : TERM INT; sleep infinity & wait
72+
trap : TERM INT
73+
sleep infinity &
74+
wait

‎components/Editor.tsx‎

Lines changed: 45 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useState, useEffect } from "react";
1+
import { useState, useEffect, useRef } from "react";
22
import Editor from "@monaco-editor/react";
33
import axios from "axios";
44
import { Button } from "@/components/ui/button";
@@ -54,6 +54,9 @@ const CodeEditor = ({
5454
const [saveSuccess, setSaveSuccess] = useState("");
5555
const [isSaving, setIsSaving] = useState(false);
5656
const [isLoading, setIsLoading] = useState(false);
57+
const [darkMode, setDarkMode] = useState(true);
58+
const [editorWidth, setEditorWidth] = useState("100%");
59+
const containerRef = useRef(null);
5760

5861
const updateDefaultLanguage = (newLanguage: string) => {
5962
setDefaultLanguage(newLanguage);
@@ -81,6 +84,30 @@ const CodeEditor = ({
8184
}
8285
}, [selectedProject, defaultLanguage]);
8386

87+
useEffect(() => {
88+
// Set dark mode based on system preference
89+
if (typeof window === "undefined") return;
90+
const prefersDarkMode = window.matchMedia(
91+
"(prefers-color-scheme: dark)"
92+
).matches;
93+
setDarkMode(prefersDarkMode);
94+
}, []);
95+
96+
useEffect(() => {
97+
const handleResize = () => {
98+
if (containerRef.current) {
99+
setEditorWidth(`${(containerRef.current as any).offsetWidth}px`);
100+
}
101+
};
102+
103+
handleResize(); // Call once to set initial size
104+
window.addEventListener("resize", handleResize);
105+
106+
return () => {
107+
window.removeEventListener("resize", handleResize);
108+
};
109+
}, []);
110+
84111
const handleSave = async () => {
85112
setIsSaving(true);
86113
setSaveSuccess("Saving...");
@@ -126,22 +153,28 @@ const CodeEditor = ({
126153
value={name}
127154
minLength={2}
128155
onChange={(e) => setName(e.target.value)}
129-
className="p-2 border rounded w-1/4 text-black"
156+
className="p-2 border rounded w-24 sm:w-32 md:w-48 lg:w-64 xl:w-72 text-black dark:bg-gray-800 dark:text-white dark:border-gray-700"
130157
disabled={isLoading}
131158
/>
132159
<Select
133160
value={language}
134161
onValueChange={(value) => setLanguage(value)}
135162
disabled={isLoading}
136163
>
137-
<SelectTrigger className="w-1/4 text-black">
164+
<SelectTrigger className="w-fit text-black dark:text-white dark:border-gray-700 dark:bg-gray-800">
138165
<SelectValue placeholder="Language" />
139166
</SelectTrigger>
140-
<SelectContent>
167+
<SelectContent className="dark:bg-gray-800 dark:border-gray-700">
141168
<SelectGroup>
142-
<SelectLabel>Language</SelectLabel>
169+
<SelectLabel className="dark:text-white dark:bg-gray-800">
170+
Language
171+
</SelectLabel>
143172
{languageOptions.map((lang) => (
144-
<SelectItem key={lang} value={lang}>
173+
<SelectItem
174+
className="dark:text-white dark:bg-gray-800 dark:hover:bg-gray-700 dark:hover:text-white"
175+
key={lang}
176+
value={lang}
177+
>
145178
{lang}
146179
</SelectItem>
147180
))}
@@ -176,7 +209,7 @@ const CodeEditor = ({
176209
: "Show Preview"}
177210
</Button>
178211
}
179-
<Select
212+
{/* <Select
180213
value={defaultLanguage}
181214
onValueChange={updateDefaultLanguage}
182215
disabled={isLoading}
@@ -194,10 +227,10 @@ const CodeEditor = ({
194227
))}
195228
</SelectGroup>
196229
</SelectContent>
197-
</Select>
230+
</Select> */}
198231
</div>
199232
</div>
200-
<div className="flex-1 flex flex-col">
233+
<div className="w-full h-full flex flex-col">
201234
{isLoading ? (
202235
<div className="flex items-center justify-center h-full">
203236
<Loader2 className="w-6 h-6 animate-spin" />
@@ -206,13 +239,14 @@ const CodeEditor = ({
206239
<>
207240
<Editor
208241
height={showPreview && language === "html" ? "50%" : "100%"}
242+
width="100%"
209243
language={language}
210244
value={code}
211245
onChange={(value) => setCode(value || "")}
212-
theme="vs-dark"
246+
theme={(darkMode ? "vs-dark" : "vs-light") as any}
213247
/>
214248
{showPreview && language === "html" && (
215-
<iframe srcDoc={code} className="w-full h-1/2 border-t" />
249+
<iframe srcDoc={code} className="w-full h-1/2" />
216250
)}
217251
</>
218252
)}

‎components/Sidebar.tsx‎

Lines changed: 25 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -116,9 +116,9 @@ const Sidebar = ({
116116
};
117117

118118
return (
119-
<div className="w-64 bg-gray-200 text-black dark:bg-gray-800 dark:text-white h-full p-4 max-h-full overflow-auto">
119+
<div className="w-full bg-gray-200 text-black dark:bg-slate-800 dark:text-white h-full p-4 max-h-screen overflow-auto">
120120
<Button
121-
className="w-full"
121+
className="w-full dark:bg-gray-900 dark:text-white dark:hover:bg-gray-700"
122122
variant={"secondary"}
123123
onClick={() => setSelectedProject(null)}
124124
>
@@ -130,17 +130,32 @@ const Sidebar = ({
130130
value={sortType}
131131
defaultValue="date_modified"
132132
>
133-
<SelectTrigger className="text-black">
133+
<SelectTrigger className="text-black dark:text-white dark:border-gray-700 dark:bg-gray-800">
134134
<SelectValue placeholder="Sort By" />
135135
</SelectTrigger>
136-
<SelectContent>
137-
<SelectItem value="name">Name</SelectItem>
138-
<SelectItem value="date_created">Date Created</SelectItem>
139-
<SelectItem value="date_modified">Date Modified</SelectItem>
136+
<SelectContent className="dark:bg-gray-800 dark:border-gray-700">
137+
<SelectItem
138+
className="dark:text-white dark:bg-gray-800 dark:hover:bg-gray-700 dark:hover:text-white"
139+
value="name"
140+
>
141+
Name
142+
</SelectItem>
143+
<SelectItem
144+
className="dark:text-white dark:bg-gray-800 dark:hover:bg-gray-700 dark:hover:text-white"
145+
value="date_created"
146+
>
147+
Date Created
148+
</SelectItem>
149+
<SelectItem
150+
className="dark:text-white dark:bg-gray-800 dark:hover:bg-gray-700 dark:hover:text-white"
151+
value="date_modified"
152+
>
153+
Date Modified
154+
</SelectItem>
140155
</SelectContent>
141156
</Select>
142157

143-
<Button variant={"secondary"} onClick={() => setSortAsc(!sortAsc)}>
158+
<Button className="text-black dark:bg-gray-900 dark:text-white dark:hover:bg-gray-700" variant={"secondary"} onClick={() => setSortAsc(!sortAsc)}>
144159
{sortAsc ? <SortAsc /> : <SortDesc />}
145160
</Button>
146161
</div>
@@ -150,9 +165,9 @@ const Sidebar = ({
150165
placeholder="Search projects..."
151166
value={searchTerm}
152167
onChange={(e) => setSearchTerm(e.target.value)}
153-
className="text-black"
168+
className="text-black dark:text-white dark:bg-gray-800 dark:border-gray-700"
154169
/>
155-
<Button variant={"secondary"} onClick={handleSearch}>
170+
<Button className="text-black dark:bg-gray-900 dark:text-white dark:hover:bg-gray-700" variant={"secondary"} onClick={handleSearch}>
156171
<Search className="w-4 h-4" />
157172
</Button>
158173
</div>

‎components/ui/sheet.tsx‎

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
1-
"use client"
1+
"use client";
22

3-
import * as React from "react"
4-
import * as SheetPrimitive from "@radix-ui/react-dialog"
5-
import { cva, type VariantProps } from "class-variance-authority"
6-
import { X } from "lucide-react"
3+
import * as React from "react";
4+
import * as SheetPrimitive from "@radix-ui/react-dialog";
5+
import { cva, type VariantProps } from "class-variance-authority";
6+
import { X } from "lucide-react";
77

8-
import { cn } from "@/lib/utils"
8+
import { cn } from "@/lib/utils";
99

10-
const Sheet = SheetPrimitive.Root
10+
const Sheet = SheetPrimitive.Root;
1111

12-
const SheetTrigger = SheetPrimitive.Trigger
12+
const SheetTrigger = SheetPrimitive.Trigger;
1313

14-
const SheetClose = SheetPrimitive.Close
14+
const SheetClose = SheetPrimitive.Close;
1515

16-
const SheetPortal = SheetPrimitive.Portal
16+
const SheetPortal = SheetPrimitive.Portal;
1717

1818
const SheetOverlay = React.forwardRef<
1919
React.ElementRef<typeof SheetPrimitive.Overlay>,
@@ -27,8 +27,8 @@ const SheetOverlay = React.forwardRef<
2727
{...props}
2828
ref={ref}
2929
/>
30-
))
31-
SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
30+
));
31+
SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
3232

3333
const sheetVariants = cva(
3434
"fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
@@ -47,7 +47,7 @@ const sheetVariants = cva(
4747
side: "right",
4848
},
4949
}
50-
)
50+
);
5151

5252
interface SheetContentProps
5353
extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
@@ -65,14 +65,14 @@ const SheetContent = React.forwardRef<
6565
{...props}
6666
>
6767
{children}
68-
<SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
68+
{/* <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
6969
<X className="h-4 w-4" />
7070
<span className="sr-only">Close</span>
71-
</SheetPrimitive.Close>
71+
</SheetPrimitive.Close> */}
7272
</SheetPrimitive.Content>
7373
</SheetPortal>
74-
))
75-
SheetContent.displayName = SheetPrimitive.Content.displayName
74+
));
75+
SheetContent.displayName = SheetPrimitive.Content.displayName;
7676

7777
const SheetHeader = ({
7878
className,
@@ -85,8 +85,8 @@ const SheetHeader = ({
8585
)}
8686
{...props}
8787
/>
88-
)
89-
SheetHeader.displayName = "SheetHeader"
88+
);
89+
SheetHeader.displayName = "SheetHeader";
9090

9191
const SheetFooter = ({
9292
className,
@@ -99,8 +99,8 @@ const SheetFooter = ({
9999
)}
100100
{...props}
101101
/>
102-
)
103-
SheetFooter.displayName = "SheetFooter"
102+
);
103+
SheetFooter.displayName = "SheetFooter";
104104

105105
const SheetTitle = React.forwardRef<
106106
React.ElementRef<typeof SheetPrimitive.Title>,
@@ -111,8 +111,8 @@ const SheetTitle = React.forwardRef<
111111
className={cn("text-lg font-semibold text-foreground", className)}
112112
{...props}
113113
/>
114-
))
115-
SheetTitle.displayName = SheetPrimitive.Title.displayName
114+
));
115+
SheetTitle.displayName = SheetPrimitive.Title.displayName;
116116

117117
const SheetDescription = React.forwardRef<
118118
React.ElementRef<typeof SheetPrimitive.Description>,
@@ -123,8 +123,8 @@ const SheetDescription = React.forwardRef<
123123
className={cn("text-sm text-muted-foreground", className)}
124124
{...props}
125125
/>
126-
))
127-
SheetDescription.displayName = SheetPrimitive.Description.displayName
126+
));
127+
SheetDescription.displayName = SheetPrimitive.Description.displayName;
128128

129129
export {
130130
Sheet,
@@ -137,4 +137,4 @@ export {
137137
SheetFooter,
138138
SheetTitle,
139139
SheetDescription,
140-
}
140+
};

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"author": "The-Best-Codes",
44
"license": "MIT",
55
"description": "Organize, Edit, and Share your Code Snippets",
6-
"version": "0.1.2",
6+
"version": "0.1.3",
77
"private": true,
88
"scripts": {
99
"dev": "next dev",

0 commit comments

Comments
 (0)