icons

README.md

@@ -17,63 +17,6 @@ Organize your movies by genre and sort by popularity, release date, runtime, or
 
 Cinematic prefers filenames like `Independence Day [1996].mp4` but will happily parse torrent-style `Movies.That.Look.Like.This.2015.HDRip.XviD.XXX-XXX.AVI`.
 
-## Features
-
-- 💬 App and System-wide Notifications
-- 🏃‍♂️ Auto Updater
-- 📦 Built-in Store
-- 🖱️ Context Menu
-- 🌙 Dark Mode
-- ❌ Error Handler
-- ⌨️ Keyboard Shortcut Manager
-- 📝 Logging
-- 🀱 Menu Bar for macOS, Windows, and Linux
-- 📂 Multi-Window
-- 🖥️ System Tray
-
-## Getting Started
-
-```bash
-
-# Clone this repository
-git clone https://github.com/lacymorrow/electron-hotplate.git
-
-# Go into the repository
-cd electron-hotplate
-
-# Install dependencies
-yarn
-
-# Run the app
-yarn start
-```
-
-## BuiltWith
-
-- [Electron](https://electronjs.org/)
-- [React](https://reactjs.org/)
-- [React Router](https://reacttraining.com/react-router/)
-- [Tailwind CSS](https://tailwindcss.com/)
-- [Shadcn](https://ui.shadcn.com/)
-- [TypeScript](https://www.typescriptlang.org/)
-
-## Development
-
-### Tailwind CSS
-
-We use Tailwind CSS for styling. See the [Tailwind CSS docs](https://tailwindcss.com/docs) for more information.
-
-Some Tailwind plugins have been added for convenience:
-
-- [Tailwind Animate](https://github.com/jamiebuilds/tailwindcss-animate) - `tailwindcss-animate`
-- [Tailwind Container Queries](https://github.com/tailwindlabs/tailwindcss-container-queries) - `@tailwindcss/container-queries`
-- Child selectors to target immediate children like `child:w-xl`
-- Don't forget group selectors too: `group` (Parent) `group-hover:bg-gray-100` (Child)
-
-### Shadcn
-
-Shadcn is a UI component library for React. See the [Shadcn docs](https://ui.shadcn.com/) for more information.
-Use `npx shadcn-ui@latest add accordion ...` to add a component to your project.
 
 ### Features
 

src/__tests__/App.test.tsx

@@ -1,6 +1,6 @@
 import '@testing-library/jest-dom';
 import { render } from '@testing-library/react';
-import App from '../renderer/App';
+import App from '../renderer/components/windows/main/App';
 
 describe('App', () => {
 	it('should render', () => {

src/config/settings.ts

@@ -11,7 +11,7 @@ export interface SettingsType {
 	allowSounds: boolean;
 	allowAutoUpdate: boolean;
 	allowNotifications: boolean;
-	notifcationType: NotificationType;
+	notificationType: NotificationType;
 	showDockIcon: boolean; // macOS only
 	showTrayIcon: boolean;
 	startMinimized: boolean;
@@ -54,7 +54,7 @@ export const DEFAULT_SETTINGS: SettingsType = {
 	allowAutoUpdate: true,
 	allowSounds: true,
 	allowNotifications: true,
-	notifcationType: 'all',
+	notificationType: 'all',
 	showDockIcon: true,
 	showTrayIcon: true,
 	startMinimized: false,

src/config/strings.ts

@@ -6,7 +6,9 @@ export const $settings = {
 	title: 'Settings',
 	description: 'Manage your account settings and application preferences',
 	app: {
-		githubUrl: 'https://github.com/lacymorrow/electron-hotplate',
+		githubUrl: 'https://github.com/lacymorrow/cinematic',
+		repo: 'lacymorrow/cinematic',
+		description: 'A boilerplate for Electron applications',
 	},
 	appearance: {
 		themeLabel: 'Theme',
@@ -59,6 +61,7 @@ export const $errors = {
 	prefix: 'Main> ',
 	blockedNavigation: 'Blocked navigation to: ',
 	invalidChannel: 'Invalid IPC channel',
+	github: 'Failed to fetch GitHub data',
 };
 
 export const $messages = {

src/main/notifications.ts

@@ -22,7 +22,7 @@ const rendererNotification = (options: NotificationOptions) => {
 export const notification = (options: NotificationOptions) => {
 	// Use either the system notification or the renderer notification
 	if (getSetting('allowNotifications')) {
-		const type = getSetting('notifcationType');
+		const type = getSetting('notificationType');
 		if (type === 'system' || type === 'all') {
 			mainNotification(options);
 		}

src/main/store.ts

@@ -3,9 +3,9 @@ import { CustomAcceleratorsType } from '@/types/keyboard';
 import { CollectionItemType } from '@/types/media';
 import Store from 'electron-store';
 import {
-	DEFAULT_KEYBINDS,
-	DEFAULT_SETTINGS,
-	SettingsType,
+    DEFAULT_KEYBINDS,
+    DEFAULT_SETTINGS,
+    SettingsType,
 } from '../config/settings';
 
 export interface CollectionStoreType {
@@ -113,7 +113,7 @@ const schema: Store.Schema<StoreType> = {
 			allowNotifications: {
 				type: 'boolean',
 			},
-			notifcationType: {
+			notificationType: {
 				type: 'string',
 				enum: ['system', 'app', 'all'],
 			},

src/renderer/child.tsx

@@ -1,5 +1,5 @@
 import { Layout } from '@/renderer/components/layout/Layout';
-import App from '@/renderer/windows/child/ChildApp';
+import App from '@/renderer/components/windows/child/ChildApp';
 import { createRoot } from 'react-dom/client';
 
 const container = document.getElementById('root') as HTMLElement;

src/renderer/components/pages/ErrorPage.tsx

@@ -0,0 +1,19 @@
+import { useRouteError } from 'react-router-dom';
+
+export default function ErrorPage() {
+	const error: any = useRouteError();
+	console.error(error);
+
+	return (
+		<div
+			className="align-items-center bg-white d-flex flex-column flex-grow-1 justify-content-center"
+			id="error-page"
+		>
+			<h1 className="mt-0">Oops!</h1>
+			<p>Sorry, an unexpected error has occurred.</p>
+			<p>
+				<i>{error.statusText || error.message}</i>
+			</p>
+		</div>
+	);
+}

src/renderer/components/pages/settings/about/CardGithub.tsx

@@ -1,4 +1,4 @@
-import { CircleIcon, StarIcon } from '@radix-ui/react-icons';
+import { CircleIcon, StarFilledIcon, StarIcon } from '@radix-ui/react-icons';
 
 import { Button } from '@/components/ui/button';
 import {
@@ -8,11 +8,35 @@ import {
 	CardHeader,
 	CardTitle,
 } from '@/components/ui/card';
-import { useCallback } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
-import { $settings } from '@/config/strings';
+import { $errors, $settings } from '@/config/strings';
 
 export function CardGithub() {
+	const [githubData, setGithubData] = useState<any>(null);
+
+	useEffect(() => {
+		// fetch star count
+		const fetchStarCount = async () => {
+			const response = await fetch(
+				`https://api.github.com/repos/${$settings.app.repo}`,
+			);
+			await response
+				.json()
+				.then((data: any) => {
+					setGithubData(data);
+				})
+				.catch((error) => {
+					window.electron.notify({
+						title: $errors.github,
+					});
+
+					console.error(error);
+				});
+		};
+		fetchStarCount();
+	}, []);
+
 	const handleClickStar = useCallback(() => {
 		window?.electron?.openUrl($settings.app.githubUrl);
 	}, []);
@@ -21,27 +45,36 @@ export function CardGithub() {
 		<Card>
 			<CardHeader className="grid grid-cols-[1fr_110px] items-start gap-4 space-y-0">
 				<div className="space-y-1">
-					<CardTitle>Electron-Hotplate</CardTitle>
+					<CardTitle>
+						{githubData?.full_name || githubData?.name || $settings.app.repo}
+					</CardTitle>
 					<CardDescription>
-						Beautifully designed organization for your digital media collection.
+						{githubData?.description || $settings.app.description}
 					</CardDescription>
 				</div>
 				<Button variant="secondary" onClick={handleClickStar}>
-					<StarIcon className="mr-2 h-4 w-4" />
+					<StarFilledIcon className="mr-2 h-4 w-4" />
 					Star
 				</Button>
 			</CardHeader>
 			<CardContent>
 				<div className="flex space-x-4 text-sm text-muted-foreground">
-					<div className="flex items-center">
-						<CircleIcon className="mr-1 h-3 w-3 fill-sky-400 text-sky-400" />
-						TypeScript
-					</div>
-					<div className="flex items-center">
-						<StarIcon className="mr-1 h-3 w-3" />
-						33
-					</div>
-					<div>Updated December 2024</div>
+					{githubData?.language && (
+						<div className="flex items-center">
+							<CircleIcon className="mr-1 h-3 w-3 fill-sky-400 text-sky-400" />
+							{githubData?.language || 'Unknown'}
+						</div>
+					)}
+					{githubData?.stargazers_count && (
+						<div className="flex items-center">
+							<StarIcon className="mr-1 h-3 w-3" />
+
+							{githubData.stargazers_count}
+						</div>
+					)}
+					{githubData?.updated_at && (
+						<div>Updated {new Date(githubData.updated_at).toDateString()}</div>
+					)}
 				</div>
 			</CardContent>
 		</Card>

src/renderer/components/pages/settings/notifications/CardNotifications.tsx

@@ -20,7 +20,7 @@ export function CardNotifications() {
 	const handleChange = (e: NotificationType | 'none') => {
 		setSettings({
 			allowNotifications: e !== 'none',
-			...(e !== 'none' ? { notifcationType: e } : {}),
+			...(e !== 'none' ? { notificationType: e } : {}),
 		});
 	};
 
@@ -39,7 +39,7 @@ export function CardNotifications() {
 					className={cn(
 						'-mx-2 flex items-start space-x-4 rounded-md p-2 transition-all',
 						settings.allowNotifications &&
-							settings.notifcationType === 'all' &&
+							settings.notificationType === 'all' &&
 							'bg-accent hover:text-accent-foreground',
 					)}
 				>
@@ -59,7 +59,7 @@ export function CardNotifications() {
 					className={cn(
 						'-mx-2 flex items-start space-x-4 rounded-md p-2 text-accent-foreground transition-all',
 						settings.allowNotifications &&
-							settings.notifcationType === 'system' &&
+							settings.notificationType === 'system' &&
 							'bg-accent hover:text-accent-foreground',
 					)}
 				>
@@ -79,7 +79,7 @@ export function CardNotifications() {
 					className={cn(
 						'-mx-2 flex items-start space-x-4 rounded-md p-2 text-accent-foreground transition-all',
 						settings.allowNotifications &&
-							settings.notifcationType === 'app' &&
+							settings.notificationType === 'app' &&
 							'bg-accent hover:text-accent-foreground',
 					)}
 				>