Skip to content

Commit

Permalink
feat: populate widgets table on widget pack page
Browse files Browse the repository at this point in the history
  • Loading branch information
@lars-berger
lars-berger committed Feb 19, 2025
1 parent 4b1ef4e commit 4f3110f
Show file tree
Hide file tree
Showing 5 changed files with 110 additions and 97 deletions.
1 change: 1 addition & 0 deletions packages/client-api/src/config/widget-config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import type { WidgetPreset } from './widget-preset';
import type { WidgetPrivileges } from './widget-privileges';

export type WidgetConfig = {
name: string;
htmlPath: string;
zOrder: 'normal' | 'top_most' | 'bottom_most';
shownInTaskbar: boolean;
Expand Down
26 changes: 21 additions & 5 deletions packages/settings-ui/src/common/desktop/MarketplacePacksContext.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {
import { createResource } from 'solid-js';

import { WidgetPack } from './UserPacksContext';
import { WidgetConfig } from 'zebar';

const marketplacePacksMock = [
{
Expand All @@ -24,9 +25,18 @@ const marketplacePacksMock = [
version: '1.0.0',
tags: ['system', 'monitor', 'cpu', 'memory', 'disk'],
widgets: [
{ id: 'cpu-usage', name: 'CPU Usage' },
{ id: 'memory-usage', name: 'Memory Usage' },
{ id: 'disk-space', name: 'Disk Space' },
{
name: 'CPU Usage',
htmlPath: 'cpu-usage.html',
} as any as WidgetConfig,
{
name: 'Memory Usage',
htmlPath: 'memory-usage.html',
} as any as WidgetConfig,
{
name: 'Disk Space',
htmlPath: 'disk-space.html',
} as any as WidgetConfig,
],
versions: [
{
Expand Down Expand Up @@ -65,8 +75,14 @@ const marketplacePacksMock = [
version: '2.1.0',
tags: ['weather', 'forecast', 'current'],
widgets: [
{ id: 'current-weather', name: 'Current Weather' },
{ id: 'forecast', name: 'Weekly Forecast' },
{
name: 'Current Weather',
htmlPath: 'current-weather.html',
} as any as WidgetConfig,
{
name: 'Weekly Forecast',
htmlPath: 'weekly-forecast.html',
} as any as WidgetConfig,
],
versions: [
{
Expand Down
40 changes: 33 additions & 7 deletions packages/settings-ui/src/common/desktop/UserPacksContext.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,18 @@ const communityPacksMock = [
version: '1.0.0',
tags: ['system', 'monitor', 'cpu', 'memory', 'disk'],
widgets: [
{ id: 'cpu-usage', name: 'CPU Usage' },
{ id: 'memory-usage', name: 'Memory Usage' },
{ id: 'disk-space', name: 'Disk Space' },
{
name: 'CPU Usage',
htmlPath: 'cpu-usage.html',
} as any as WidgetConfig,
{
name: 'Memory Usage',
htmlPath: 'memory-usage.html',
} as any as WidgetConfig,
{
name: 'Disk Space',
htmlPath: 'disk-space.html',
} as any as WidgetConfig,
],
previewUrls: [],
excludeFiles: '',
Expand All @@ -35,8 +44,14 @@ const communityPacksMock = [
version: '2.1.0',
tags: ['weather', 'forecast', 'current'],
widgets: [
{ id: 'current-weather', name: 'Current Weather' },
{ id: 'forecast', name: 'Weekly Forecast' },
{
name: 'Current Weather',
htmlPath: 'current-weather.html',
} as any as WidgetConfig,
{
name: 'Weekly Forecast',
htmlPath: 'weekly-forecast.html',
} as any as WidgetConfig,
],
previewUrls: [],
excludeFiles: '',
Expand All @@ -50,7 +65,12 @@ const localPacksMock = [
author: 'me',
description: 'Personal collection of widgets',
version: '0.1.0',
widgets: [{ id: 'todo-list', name: 'Todo List' }],
widgets: [
{
name: 'Todo List',
htmlPath: 'todo-list.html',
} as any as WidgetConfig,
],
tags: ['todo', 'list', 'custom'],
previewUrls: [],
excludeFiles: '',
Expand All @@ -66,7 +86,7 @@ export type WidgetPack = {
versions?: WidgetPackVersion[];
description: string;
version: string;
widgets: { id: string; name: string }[];
widgets: WidgetConfig[];
tags: string[];
};

Expand Down Expand Up @@ -96,6 +116,7 @@ type UserPacksContextState = {
createPack: (pack: CreateWidgetPackForm) => Promise<void>;
createWidget: (widget: CreateWidgetArgs) => Promise<void>;
deletePack: (packId: string) => Promise<void>;
deleteWidget: (widgetName: string) => Promise<void>;
updateWidgetConfig: (
configPath: string,
newConfig: WidgetConfig,
Expand Down Expand Up @@ -196,6 +217,10 @@ export function UserPacksProvider(props: { children: JSX.Element }) {
return invoke<void>('delete_widget_pack', { packId });
}

async function deleteWidget(widgetName: string) {
return invoke<void>('delete_widget', { widgetName });
}

const store: UserPacksContextState = {
communityPacks,
localPacks,
Expand All @@ -207,6 +232,7 @@ export function UserPacksProvider(props: { children: JSX.Element }) {
createPack,
createWidget,
deletePack,
deleteWidget,
};

return (
Expand Down
130 changes: 50 additions & 80 deletions packages/settings-ui/src/user-packs/WidgetPackPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,15 +12,22 @@ import {
ChipField,
FormLabel,
TextAreaField,
TableBody,
TableCell,
AlertDialogTrigger,
AlertDialog,
} from '@glzr/components';
import { IconPlus } from '@tabler/icons-solidjs';
import { IconPlus, IconTrash } from '@tabler/icons-solidjs';
import { createForm, Field } from 'smorf';
import { createEffect, createMemo, createSignal, Show } from 'solid-js';
import { createEffect, createMemo, Show } from 'solid-js';
import * as z from 'zod';
import { Widget } from 'zebar';

import { AppBreadcrumbs, useUserPacks, ImageSelector } from '~/common';
import { CreateWidgetDialog } from './dialogs';
import {
CreateWidgetDialog,
DeleteWidgetDialog,
DeleteWidgetPackDialog,
} from './dialogs';
import { useParams } from '@solidjs/router';

const formSchema = z.object({
Expand Down Expand Up @@ -117,7 +124,7 @@ export function WidgetPackPage() {
</Field>

<div>
<FormLabel>Preview Images</FormLabel>
<FormLabel>Preview images</FormLabel>
<ImageSelector
images={form.value.previewImages}
onChange={images =>
Expand All @@ -129,7 +136,7 @@ export function WidgetPackPage() {
<Field of={form} path="excludeFiles">
{inputProps => (
<TextAreaField
label="Exclude Files"
label="Exclude files"
description="A list of file patterns to exclude from the pack separated by new lines."
{...inputProps()}
/>
Expand All @@ -148,7 +155,7 @@ export function WidgetPackPage() {
<DialogTrigger>
<Button variant="outline">
<IconPlus class="mr-2 h-4 w-4" />
Add Widget
Add widget
</Button>
</DialogTrigger>
<CreateWidgetDialog onSubmit={userPacks.createWidget} />
Expand All @@ -159,84 +166,47 @@ export function WidgetPackPage() {
<TableHeader>
<TableRow>
<TableHead>Name</TableHead>
<TableHead>Template</TableHead>
<TableHead>HTML Path</TableHead>
<TableHead class="w-[100px]">Actions</TableHead>
</TableRow>
</TableHeader>

{/* <TableBody>
{widgets().map(widget => (
<TableRow>
<TableCell>{widget.name}</TableCell>
<TableCell>{widget.template}</TableCell>
<TableCell>
<AlertDialog
open={deleteWidgetId === widget.id}
onOpenChange={open =>
setDeleteWidgetId(open ? widget.id : null)
}
>
<Button
variant="ghost"
size="icon"
class="text-destructive"
onClick={() => setDeleteWidgetId(widget.id)}
>
<IconTrash class="h-4 w-4" />
</Button>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>
Delete Widget: {widget.name}
</AlertDialogTitle>
<AlertDialogDescription>
<div class="flex flex-col gap-4">
<div class="flex items-center gap-2 text-destructive">
<IconAlertTriangle class="h-5 w-5" />
<span>
This action cannot be undone. The
following files will be deleted:
</span>
</div>
<ul class="list-disc list-inside space-y-1 text-muted-foreground">
<li>zebar-widget.json</li>
<li>
/
{widget.name
.toLowerCase()
.replace(/\s+/g, '-')}
/
</li>
</ul>
</div>
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogClose>Cancel</AlertDialogClose>
<AlertDialogAction
onClick={() => handleDeleteWidget(widget.id)}
class="bg-destructive text-destructive-foreground hover:bg-destructive/90"
<TableBody>
{selectedPack()?.widgets.map(widget => (
<TableRow>
<TableCell>{widget.name}</TableCell>
<TableCell>{widget.htmlPath}</TableCell>
<TableCell>
<AlertDialog>
<AlertDialogTrigger>
<Button
variant="outline"
size="icon"
class="text-red-500 hover:text-red-600"
>
Delete Widget
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
</TableCell>
</TableRow>
))}
{widgets().length === 0 && (
<TableRow>
<TableCell
colSpan={3}
class="text-center text-muted-foreground"
>
No widgets added yet
</TableCell>
</TableRow>
)}
</TableBody> */}
<IconTrash class="h-4 w-4" />
</Button>
</AlertDialogTrigger>
<DeleteWidgetDialog
widget={widget}
onDelete={userPacks.deleteWidget}
/>
</AlertDialog>
</TableCell>
</TableRow>
))}

{selectedPack()?.widgets.length === 0 && (
<TableRow>
<TableCell
colSpan={3}
class="text-center text-muted-foreground"
>
No widgets added yet
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
</CardContent>
</Card>
Expand Down
10 changes: 5 additions & 5 deletions packages/settings-ui/src/user-packs/dialogs/DeleteWidgetDialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,11 @@ import {
AlertDialogClose,
AlertDialogAction,
} from '@glzr/components';
import { Widget } from 'zebar';
import { WidgetConfig } from 'zebar';

export interface DeleteWidgetDialogProps {
widget: Widget;
onDelete: (widgetId: string) => void;
widget: WidgetConfig;
onDelete: (widgetName: string) => void;
}

export function DeleteWidgetDialog(props: DeleteWidgetDialogProps) {
Expand All @@ -20,14 +20,14 @@ export function DeleteWidgetDialog(props: DeleteWidgetDialogProps) {
<AlertDialogHeader>
<AlertDialogTitle>Delete Widget</AlertDialogTitle>
<AlertDialogDescription>
Are you sure you want to delete "{props.widget.configPath}"? This
Are you sure you want to delete "{props.widget.name}"? This
action cannot be undone.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogClose>Cancel</AlertDialogClose>
<AlertDialogAction
onClick={() => props.onDelete(props.widget.id)}
onClick={() => props.onDelete(props.widget.name)}
class="bg-red-500 hover:bg-red-600"
>
Delete
Expand Down

0 comments on commit 4f3110f

Please sign in to comment.