Skip to content

Commit

Permalink
feat: responsive layout
Browse files Browse the repository at this point in the history
  • Loading branch information
shaikzeeshan committed Feb 22, 2025
1 parent 754eed7 commit 6c94f1b
Show file tree
Hide file tree
Showing 3 changed files with 45 additions and 48 deletions.
67 changes: 33 additions & 34 deletions screenpipe-app-tauri/components/pipe-store.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,23 +42,23 @@ export const PipeStore: React.FC = () => {
const [searchQuery, setSearchQuery] = useState("");
const [showInstalledOnly, setShowInstalledOnly] = useState(false);
const [purchaseHistory, setPurchaseHistory] = useState<PurchaseHistoryItem[]>(
[]
[],
);
const { checkLogin } = useLoginDialog();
const { open: openStatusDialog } = useStatusDialog();
const [loadingPurchases, setLoadingPurchases] = useState<Set<string>>(
new Set()
new Set(),
);
const [loadingInstalls, setLoadingInstalls] = useState<Set<string>>(
new Set()
new Set(),
);

const filteredPipes = pipes
.filter(
(pipe) =>
pipe.id.toLowerCase().includes(searchQuery.toLowerCase()) &&
(!showInstalledOnly || pipe.is_installed) &&
!pipe.is_installing
!pipe.is_installing,
)
.sort((a, b) => Number(b.is_paid) - Number(a.is_paid));

Expand Down Expand Up @@ -111,21 +111,21 @@ export const PipeStore: React.FC = () => {
is_installed: !!installedPipe,
installed_config: installedPipe?.config,
has_purchased: purchaseHistory.some(
(p) => p.plugin_id === plugin.id
(p) => p.plugin_id === plugin.id,
),
is_core_pipe: corePipes.includes(plugin.name),
is_enabled: installedPipe?.config?.enabled ?? false,
has_update: false,
};
})
}),
);

const customPipes = installedPipes
.filter(
(p) =>
!plugins.find(
(plugin) => plugin.name === p.id?.replace("._temp", "")
)
(plugin) => plugin.name === p.id?.replace("._temp", ""),
),
)
.map((p) => {
const pluginName = p.config?.source?.split("/").pop();
Expand Down Expand Up @@ -166,7 +166,7 @@ export const PipeStore: React.FC = () => {

const handlePurchasePipe = async (
pipe: PipeWithStatus,
onComplete?: () => void
onComplete?: () => void,
) => {
try {
if (!checkLogin(settings.user)) return;
Expand Down Expand Up @@ -293,16 +293,16 @@ export const PipeStore: React.FC = () => {

const handleInstallPipe = async (
pipe: PipeWithStatus,
onComplete?: () => void
onComplete?: () => void,
) => {
try {
if (!checkLogin(settings.user)) return;

// Keep the pipe in its current position by updating its status
setPipes((prevPipes) =>
prevPipes.map((p) =>
p.id === pipe.id ? { ...p, is_installing: true } : p
)
p.id === pipe.id ? { ...p, is_installing: true } : p,
),
);

setLoadingInstalls((prev) => new Set(prev).add(pipe.id));
Expand Down Expand Up @@ -333,7 +333,7 @@ export const PipeStore: React.FC = () => {
pipe_id: pipe.id,
url: response.download_url,
}),
}
},
);

const data = await downloadResponse.json();
Expand All @@ -352,8 +352,8 @@ export const PipeStore: React.FC = () => {
is_installed: true,
is_installing: false,
}
: p
)
: p,
),
);

onComplete?.();
Expand All @@ -362,8 +362,8 @@ export const PipeStore: React.FC = () => {
// Reset the pipe's status on error
setPipes((prevPipes) =>
prevPipes.map((p) =>
p.id === pipe.id ? { ...p, is_installing: false } : p
)
p.id === pipe.id ? { ...p, is_installing: false } : p,
),
);
if ((error as Error).cause === PipeDownloadError.PURCHASE_REQUIRED) {
return toast({
Expand Down Expand Up @@ -479,7 +479,7 @@ export const PipeStore: React.FC = () => {

// Filter installed pipes that have updates available
const pipesToUpdate = pipes.filter(
(pipe) => pipe.is_installed && pipe.has_update
(pipe) => pipe.is_installed && pipe.has_update,
);

if (pipesToUpdate.length === 0) {
Expand Down Expand Up @@ -563,7 +563,7 @@ export const PipeStore: React.FC = () => {

const handleTogglePipe = async (
pipe: PipeWithStatus,
onComplete: () => void
onComplete: () => void,
) => {
try {
const t = toast({
Expand Down Expand Up @@ -620,7 +620,7 @@ export const PipeStore: React.FC = () => {
`Failed to ${
pipe.installed_config?.enabled ? "disable" : "enable"
} pipe:`,
error
error,
);
toast({
title: "error toggling pipe",
Expand All @@ -631,7 +631,7 @@ export const PipeStore: React.FC = () => {
};

const handleLoadFromLocalFolder = async (
setNewRepoUrl: (url: string) => void
setNewRepoUrl: (url: string) => void,
) => {
try {
const selectedFolder = await open({
Expand Down Expand Up @@ -834,7 +834,7 @@ export const PipeStore: React.FC = () => {
pipe_id: pipe.name,
source: responseDownload.download_url,
}),
}
},
);

const data = await response.json();
Expand Down Expand Up @@ -893,9 +893,8 @@ export const PipeStore: React.FC = () => {
return;
}
// Get last check time from local storage
const lastCheckTime = await localforage.getItem<number>(
"lastUpdateCheck"
);
const lastCheckTime =
await localforage.getItem<number>("lastUpdateCheck");
const now = Date.now();

// Check if 5 minutes have passed since last check
Expand All @@ -912,7 +911,7 @@ export const PipeStore: React.FC = () => {
for (const pipe of installedPipes) {
const update = await storeApi.checkUpdate(
pipe.id,
pipe.installed_config?.version!
pipe.installed_config?.version!,
);
if (update.has_update) {
await handleUpdatePipe(pipe);
Expand Down Expand Up @@ -1016,11 +1015,11 @@ export const PipeStore: React.FC = () => {
}

return (
<div className="overflow-hidden flex flex-col space-y-4 min-w-[800px]">
<div className="flex flex-col flex-1 overflow-hidden space-y-4 p-4 min-w-[800px]">
<div className="space-y-4 min-w-[800px]">
<div className="flex flex-col gap-4 w-[50%]">
<div className="flex-1 relative">
<div className="overflow-hidden flex flex-col space-y-4">
<div className="flex flex-col flex-1 overflow-hidden space-y-4 p-4">
<div className="space-y-4">
<div className="flex flex-col gap-4 md:w-[50%] w-full">
<div className="flex-1 relative py-2">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
<Input
placeholder="search community pipes..."
Expand Down Expand Up @@ -1064,7 +1063,7 @@ export const PipeStore: React.FC = () => {
className="flex items-center gap-2"
disabled={
!pipes.some(
(pipe) => pipe.is_installed && pipe.has_update
(pipe) => pipe.is_installed && pipe.has_update,
)
}
>
Expand All @@ -1081,15 +1080,15 @@ export const PipeStore: React.FC = () => {
</div>

<div className="flex-1 overflow-y-auto">
<div className="grid grid-cols-2 gap-4">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
{filteredPipes.map((pipe) => (
<PipeCard
key={pipe.id}
pipe={pipe}
setPipe={(updatedPipe) => {
setPipes((prevPipes) => {
return prevPipes.map((p) =>
p.id === updatedPipe.id ? updatedPipe : p
p.id === updatedPipe.id ? updatedPipe : p,
);
});
}}
Expand Down
24 changes: 12 additions & 12 deletions screenpipe-app-tauri/components/pipe-store/add-pipe-form.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import React, { useState } from 'react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Plus, FolderOpen, Puzzle } from 'lucide-react';
import { open } from '@tauri-apps/plugin-dialog';
import { PublishDialog } from '../publish-dialog';
import { PipeStorePlugin } from '@/lib/api/store';
import React, { useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Plus, FolderOpen, Puzzle } from "lucide-react";
import { open } from "@tauri-apps/plugin-dialog";
import { PublishDialog } from "../publish-dialog";
import { PipeStorePlugin } from "@/lib/api/store";

interface AddPipeFormProps {
onAddPipe: (url: string) => Promise<any>;
Expand All @@ -17,18 +17,18 @@ export const AddPipeForm: React.FC<AddPipeFormProps> = ({
onLoadFromLocalFolder,
isHealthy,
}) => {
const [newRepoUrl, setNewRepoUrl] = useState('');
const [newRepoUrl, setNewRepoUrl] = useState("");

return (
<div className="border rounded-lg p-4 space-y-3 w-[50%] mx-auto">
<div className="border rounded-lg p-4 space-y-3 md:w-[50%] w-full mx-auto">
<div className="flex gap-2">
<div className="flex-1 relative">
<Input
type="url"
placeholder={
!isHealthy
? 'screenpipe not running...'
: 'enter github url or local path'
? "screenpipe not running..."
: "enter github url or local path"
}
value={newRepoUrl}
onChange={(e) => setNewRepoUrl(e.target.value)}
Expand Down Expand Up @@ -68,4 +68,4 @@ export const AddPipeForm: React.FC<AddPipeFormProps> = ({
</div>
</div>
);
};
};
2 changes: 0 additions & 2 deletions screenpipe-app-tauri/src-tauri/tauri.conf.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,8 +85,6 @@
"title": "screenpipe",
"width": 1200,
"height": 850,
"minWidth": 850,
"minHeight": 800,
"resizable": true
}
],
Expand Down

0 comments on commit 6c94f1b

Please sign in to comment.