mirror of
https://github.com/snapotter-hq/SnapOtter.git
synced 2026-08-03 07:46:42 +02:00
refactor: remove lite variant, fix release workflow
- Remove all lite/full variant logic from frontend, API, shared constants, docs, and tests (single unified Docker image only) - Replace single QEMU multi-arch Docker build with per-architecture native builds (amd64 + arm64) and manifest merge to fix disk space exhaustion - Add disk cleanup step and per-platform build cache scopes - Switch release trigger from push to workflow_dispatch - Add GitHub issue templates and PR template
This commit is contained in:
@@ -1,58 +1,17 @@
|
||||
import type { Tool } from "@stirling-image/shared";
|
||||
import * as icons from "lucide-react";
|
||||
import { FileImage, Sparkles, Star } from "lucide-react";
|
||||
import { FileImage, Star } from "lucide-react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { toast } from "sonner";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface ToolCardProps {
|
||||
tool: Tool;
|
||||
variantUnavailable?: boolean;
|
||||
}
|
||||
|
||||
export function ToolCard({ tool, variantUnavailable }: ToolCardProps) {
|
||||
export function ToolCard({ tool }: ToolCardProps) {
|
||||
const iconsMap = icons as unknown as Record<string, React.ComponentType<{ className?: string }>>;
|
||||
const IconComponent = iconsMap[tool.icon] || FileImage;
|
||||
|
||||
if (variantUnavailable) {
|
||||
return (
|
||||
<div className="group flex items-center gap-3 relative">
|
||||
<button
|
||||
type="button"
|
||||
className="opacity-0 group-hover:opacity-100 transition-opacity absolute -left-5"
|
||||
title="Add to favourites"
|
||||
>
|
||||
<Star className="h-3 w-3 text-muted-foreground hover:text-yellow-500" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() =>
|
||||
toast("This tool requires the full image.", {
|
||||
description:
|
||||
"Pull stirlingimage/stirling-image:latest for all features including AI tools.",
|
||||
action: {
|
||||
label: "Learn more",
|
||||
onClick: () =>
|
||||
window.open(
|
||||
"https://stirling-image.github.io/stirling-image/guide/docker-tags",
|
||||
"_blank",
|
||||
),
|
||||
},
|
||||
})
|
||||
}
|
||||
className="flex items-center gap-3 py-2 px-3 rounded-lg w-full transition-colors hover:bg-muted/50 opacity-50 cursor-pointer"
|
||||
>
|
||||
<IconComponent className="h-5 w-5 text-muted-foreground" />
|
||||
<span className="text-sm font-medium text-foreground">{tool.name}</span>
|
||||
<span className="flex items-center gap-0.5 text-[10px] px-1.5 py-0.5 rounded bg-amber-100 text-amber-700 font-medium">
|
||||
<Sparkles className="h-2.5 w-2.5" />
|
||||
AI
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="group flex items-center gap-3 relative">
|
||||
<button
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { CATEGORIES, TOOLS } from "@stirling-image/shared";
|
||||
import { Info } from "lucide-react";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { useSettingsStore } from "@/stores/settings-store";
|
||||
import { SearchBar } from "../common/search-bar";
|
||||
@@ -7,15 +6,12 @@ import { ToolCard } from "../common/tool-card";
|
||||
|
||||
export function ToolPanel() {
|
||||
const [search, setSearch] = useState("");
|
||||
const { variant, disabledTools, experimentalEnabled, variantUnavailableTools, loaded, fetch } =
|
||||
useSettingsStore();
|
||||
const { disabledTools, experimentalEnabled, loaded, fetch } = useSettingsStore();
|
||||
|
||||
useEffect(() => {
|
||||
fetch();
|
||||
}, [fetch]);
|
||||
|
||||
const unavailableSet = useMemo(() => new Set(variantUnavailableTools), [variantUnavailableTools]);
|
||||
|
||||
const visibleTools = useMemo(() => {
|
||||
if (!loaded) return [];
|
||||
return TOOLS.filter((t) => {
|
||||
@@ -49,27 +45,6 @@ export function ToolPanel() {
|
||||
<SearchBar value={search} onChange={setSearch} />
|
||||
</div>
|
||||
<div className="px-3 pb-4 flex-1">
|
||||
{variant === "lite" && (
|
||||
<div className="mb-3 p-2.5 rounded-lg bg-amber-50 dark:bg-amber-950/30 border border-amber-200 dark:border-amber-800 text-amber-800 dark:text-amber-300">
|
||||
<div className="flex items-start gap-2">
|
||||
<Info className="h-4 w-4 mt-0.5 shrink-0" />
|
||||
<div className="text-xs leading-relaxed">
|
||||
<p className="font-medium">Lite mode</p>
|
||||
<p className="mt-0.5 text-amber-700 dark:text-amber-400">
|
||||
AI tools are unavailable. Use the{" "}
|
||||
<code className="font-mono text-[10px] bg-amber-100 dark:bg-amber-900/50 px-1 py-0.5 rounded">
|
||||
latest
|
||||
</code>{" "}
|
||||
or{" "}
|
||||
<code className="font-mono text-[10px] bg-amber-100 dark:bg-amber-900/50 px-1 py-0.5 rounded">
|
||||
full
|
||||
</code>{" "}
|
||||
tag for all features.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{CATEGORIES.filter((cat) => groupedTools.has(cat.id)).map((category) => (
|
||||
<div key={category.id} className="mb-4">
|
||||
<h3 className="text-xs font-semibold uppercase text-muted-foreground tracking-wider mb-2">
|
||||
@@ -77,11 +52,7 @@ export function ToolPanel() {
|
||||
</h3>
|
||||
<div className="space-y-0.5">
|
||||
{groupedTools.get(category.id)?.map((tool) => (
|
||||
<ToolCard
|
||||
key={tool.id}
|
||||
tool={tool}
|
||||
variantUnavailable={unavailableSet.has(tool.id)}
|
||||
/>
|
||||
<ToolCard key={tool.id} tool={tool} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,12 +1,10 @@
|
||||
import { CATEGORIES, TOOLS } from "@stirling-image/shared";
|
||||
import * as icons from "lucide-react";
|
||||
import { useCallback, useEffect, useMemo } from "react";
|
||||
import { useCallback, useEffect } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { toast } from "sonner";
|
||||
import { ImageViewer } from "@/components/common/image-viewer";
|
||||
import { MultiImageViewer } from "@/components/common/multi-image-viewer";
|
||||
import { AppLayout } from "@/components/layout/app-layout";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { useFileStore } from "@/stores/file-store";
|
||||
import { useSettingsStore } from "@/stores/settings-store";
|
||||
|
||||
@@ -17,14 +15,12 @@ export function HomePage() {
|
||||
const { setFiles, files, reset, originalBlobUrl, selectedFileName, selectedFileSize } =
|
||||
useFileStore();
|
||||
const navigate = useNavigate();
|
||||
const { variantUnavailableTools, fetch: fetchSettings } = useSettingsStore();
|
||||
const { fetch: fetchSettings } = useSettingsStore();
|
||||
|
||||
useEffect(() => {
|
||||
fetchSettings();
|
||||
}, [fetchSettings]);
|
||||
|
||||
const unavailableSet = useMemo(() => new Set(variantUnavailableTools), [variantUnavailableTools]);
|
||||
|
||||
const handleFiles = useCallback(
|
||||
(newFiles: File[]) => {
|
||||
reset();
|
||||
@@ -33,25 +29,6 @@ export function HomePage() {
|
||||
[setFiles, reset],
|
||||
);
|
||||
|
||||
const handleToolClick = (route: string, toolId: string) => {
|
||||
if (unavailableSet.has(toolId)) {
|
||||
toast("This tool requires the full image.", {
|
||||
description:
|
||||
"Pull stirlingimage/stirling-image:latest for all features including AI tools.",
|
||||
action: {
|
||||
label: "Learn more",
|
||||
onClick: () =>
|
||||
window.open(
|
||||
"https://stirling-image.github.io/stirling-image/guide/docker-tags",
|
||||
"_blank",
|
||||
),
|
||||
},
|
||||
});
|
||||
return;
|
||||
}
|
||||
navigate(route);
|
||||
};
|
||||
|
||||
const hasFile = files.length > 0;
|
||||
|
||||
// If no file uploaded, show default layout (tool panel + dropzone)
|
||||
@@ -103,11 +80,8 @@ export function HomePage() {
|
||||
<button
|
||||
key={id}
|
||||
type="button"
|
||||
onClick={() => handleToolClick(tool.route, tool.id)}
|
||||
className={cn(
|
||||
"flex items-center gap-2 p-3 rounded-xl border border-border hover:border-primary hover:bg-primary/5 transition-colors text-left",
|
||||
unavailableSet.has(id) && "opacity-50",
|
||||
)}
|
||||
onClick={() => navigate(tool.route)}
|
||||
className="flex items-center gap-2 p-3 rounded-xl border border-border hover:border-primary hover:bg-primary/5 transition-colors text-left"
|
||||
>
|
||||
<div className="p-1.5 rounded-lg bg-primary/10 text-primary">
|
||||
<Icon className="h-4 w-4" />
|
||||
@@ -148,13 +122,8 @@ export function HomePage() {
|
||||
<button
|
||||
key={tool.id}
|
||||
type="button"
|
||||
onClick={() => handleToolClick(tool.route, tool.id)}
|
||||
className={cn(
|
||||
"flex items-center gap-2.5 w-full py-1.5 px-2 rounded-lg text-left transition-colors",
|
||||
unavailableSet.has(tool.id)
|
||||
? "opacity-50 hover:bg-muted/50"
|
||||
: "hover:bg-muted text-foreground",
|
||||
)}
|
||||
onClick={() => navigate(tool.route)}
|
||||
className="flex items-center gap-2.5 w-full py-1.5 px-2 rounded-lg text-left transition-colors hover:bg-muted text-foreground"
|
||||
>
|
||||
<Icon className="h-4 w-4 text-muted-foreground shrink-0" />
|
||||
<span className="text-sm">{tool.name}</span>
|
||||
|
||||
@@ -2,8 +2,6 @@ import { create } from "zustand";
|
||||
import { apiGet } from "@/lib/api";
|
||||
|
||||
interface SettingsState {
|
||||
variant: "full" | "lite";
|
||||
variantUnavailableTools: string[];
|
||||
disabledTools: string[];
|
||||
experimentalEnabled: boolean;
|
||||
loaded: boolean;
|
||||
@@ -11,8 +9,6 @@ interface SettingsState {
|
||||
}
|
||||
|
||||
export const useSettingsStore = create<SettingsState>((set, get) => ({
|
||||
variant: "full",
|
||||
variantUnavailableTools: [],
|
||||
disabledTools: [],
|
||||
experimentalEnabled: false,
|
||||
loaded: false,
|
||||
@@ -22,19 +18,15 @@ export const useSettingsStore = create<SettingsState>((set, get) => ({
|
||||
try {
|
||||
const data = await apiGet<{
|
||||
settings: Record<string, string>;
|
||||
variant: "full" | "lite";
|
||||
variantUnavailableTools: string[];
|
||||
}>("/v1/settings");
|
||||
|
||||
set({
|
||||
variant: data.variant ?? "full",
|
||||
variantUnavailableTools: data.variantUnavailableTools ?? [],
|
||||
disabledTools: data.settings.disabledTools ? JSON.parse(data.settings.disabledTools) : [],
|
||||
experimentalEnabled: data.settings.enableExperimentalTools === "true",
|
||||
loaded: true,
|
||||
});
|
||||
} catch {
|
||||
// Settings fetch failed - default to full with no disabled tools
|
||||
// Settings fetch failed - default to no disabled tools
|
||||
set({ loaded: true });
|
||||
}
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user