mirror of
https://github.com/Termix-SSH/Termix.git
synced 2026-10-30 15:15:24 +00:00
feat: port the demo redesign with Manage and Settings tabs
This commit is contained in:
LukeGus committed
1 parent
f8151cb885
commit
35c954b79a
128 files changed
+13262
-8143
No files matched your search
@@ -1,12 +1,6 @@
|
||||
import { InlineView } from "@/components/surface/surface-scope";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Rows3, SquareStack } from "lucide-react";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/dialog";
|
||||
import { SectionCard, SettingRow, FakeSwitch } from "@/components/section-card";
|
||||
import type {
|
||||
CredentialDensity,
|
||||
@@ -32,108 +26,104 @@ export function CustomizeCredentialsSidebarPanel({
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="sm:max-w-md max-h-[85vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-lg font-bold">
|
||||
{t("credentials.customizeSidebar")}
|
||||
</DialogTitle>
|
||||
<DialogDescription className="text-xs text-muted-foreground">
|
||||
{t("credentials.customizeSidebarDescription")}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="flex flex-col gap-4 mt-1">
|
||||
<SectionCard
|
||||
title={t("credentials.customizeDensityTitle")}
|
||||
icon={<Rows3 className="size-3.5" />}
|
||||
<InlineView
|
||||
open={open}
|
||||
onOpenChange={onOpenChange}
|
||||
title={t("credentials.customizeSidebar")}
|
||||
>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{t("credentials.customizeSidebarDescription")}
|
||||
</p>
|
||||
<div className="flex flex-col gap-4 mt-1">
|
||||
<SectionCard
|
||||
title={t("credentials.customizeDensityTitle")}
|
||||
icon={<Rows3 className="size-3.5" />}
|
||||
>
|
||||
<SettingRow
|
||||
label={t("credentials.customizeDensityTitle")}
|
||||
description={
|
||||
preferences.display.density === "comfortable"
|
||||
? t("credentials.densityComfortableDesc")
|
||||
: t("credentials.densityCompactDesc")
|
||||
}
|
||||
>
|
||||
<SettingRow
|
||||
label={t("credentials.customizeDensityTitle")}
|
||||
description={
|
||||
preferences.display.density === "comfortable"
|
||||
? t("credentials.densityComfortableDesc")
|
||||
: t("credentials.densityCompactDesc")
|
||||
<select
|
||||
value={preferences.display.density}
|
||||
onChange={(e) =>
|
||||
update((prev) => ({
|
||||
...prev,
|
||||
display: {
|
||||
...prev.display,
|
||||
density: e.target.value as CredentialDensity,
|
||||
},
|
||||
}))
|
||||
}
|
||||
className="h-8 border border-border bg-background px-2 text-xs outline-none focus:ring-1 focus:ring-ring"
|
||||
>
|
||||
<select
|
||||
value={preferences.display.density}
|
||||
onChange={(e) =>
|
||||
update((prev) => ({
|
||||
...prev,
|
||||
display: {
|
||||
...prev.display,
|
||||
density: e.target.value as CredentialDensity,
|
||||
},
|
||||
}))
|
||||
}
|
||||
className="h-8 border border-border bg-background px-2 text-xs outline-none focus:ring-1 focus:ring-ring"
|
||||
>
|
||||
<option value="comfortable">
|
||||
{t("credentials.displayDensityComfortable")}
|
||||
</option>
|
||||
<option value="compact">
|
||||
{t("credentials.displayDensityCompact")}
|
||||
</option>
|
||||
</select>
|
||||
</SettingRow>
|
||||
</SectionCard>
|
||||
<option value="comfortable">
|
||||
{t("credentials.displayDensityComfortable")}
|
||||
</option>
|
||||
<option value="compact">
|
||||
{t("credentials.displayDensityCompact")}
|
||||
</option>
|
||||
</select>
|
||||
</SettingRow>
|
||||
</SectionCard>
|
||||
|
||||
<SectionCard
|
||||
title={t("credentials.customizeBehaviorTitle")}
|
||||
icon={<SquareStack className="size-3.5" />}
|
||||
<SectionCard
|
||||
title={t("credentials.customizeBehaviorTitle")}
|
||||
icon={<SquareStack className="size-3.5" />}
|
||||
>
|
||||
<SettingRow
|
||||
label={t("credentials.showCredentialTags")}
|
||||
description={t("credentials.showCredentialTagsDesc")}
|
||||
>
|
||||
<SettingRow
|
||||
label={t("credentials.showCredentialTags")}
|
||||
description={t("credentials.showCredentialTagsDesc")}
|
||||
>
|
||||
<FakeSwitch
|
||||
checked={preferences.display.showTags}
|
||||
onChange={(v) =>
|
||||
update((prev) => ({
|
||||
...prev,
|
||||
display: { ...prev.display, showTags: v },
|
||||
}))
|
||||
}
|
||||
/>
|
||||
</SettingRow>
|
||||
<div className="flex flex-col gap-1.5 py-3 border-b border-border last:border-0">
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<span className="text-sm font-medium leading-snug">
|
||||
{t("credentials.actionsVisibility")}
|
||||
</span>
|
||||
<span className="text-xs text-muted-foreground leading-snug">
|
||||
{t("credentials.actionsVisibilityDesc")}
|
||||
</span>
|
||||
</div>
|
||||
<select
|
||||
value={preferences.display.trayTrigger}
|
||||
onChange={(e) =>
|
||||
update((prev) => ({
|
||||
...prev,
|
||||
display: {
|
||||
...prev.display,
|
||||
trayTrigger: e.target.value as CredentialTrayTrigger,
|
||||
},
|
||||
}))
|
||||
}
|
||||
className="h-8 w-full border border-border bg-background px-2 text-xs outline-none focus:ring-1 focus:ring-ring"
|
||||
>
|
||||
<option value="always">{t("credentials.actionsAlways")}</option>
|
||||
<option value="actionsOnly">
|
||||
{t("credentials.actionsOnly")}
|
||||
</option>
|
||||
<option value="hover">{t("credentials.actionsHover")}</option>
|
||||
<option value="click">{t("credentials.actionsClick")}</option>
|
||||
</select>
|
||||
<FakeSwitch
|
||||
checked={preferences.display.showTags}
|
||||
onChange={(v) =>
|
||||
update((prev) => ({
|
||||
...prev,
|
||||
display: { ...prev.display, showTags: v },
|
||||
}))
|
||||
}
|
||||
/>
|
||||
</SettingRow>
|
||||
<div className="flex flex-col gap-1.5 py-3 border-b border-border last:border-0">
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<span className="text-sm font-medium leading-snug">
|
||||
{t("credentials.actionsVisibility")}
|
||||
</span>
|
||||
<span className="text-xs text-muted-foreground leading-snug">
|
||||
{t("credentials.actionsVisibilityDesc")}
|
||||
</span>
|
||||
</div>
|
||||
</SectionCard>
|
||||
<select
|
||||
value={preferences.display.trayTrigger}
|
||||
onChange={(e) =>
|
||||
update((prev) => ({
|
||||
...prev,
|
||||
display: {
|
||||
...prev.display,
|
||||
trayTrigger: e.target.value as CredentialTrayTrigger,
|
||||
},
|
||||
}))
|
||||
}
|
||||
className="h-8 w-full border border-border bg-background px-2 text-xs outline-none focus:ring-1 focus:ring-ring"
|
||||
>
|
||||
<option value="always">{t("credentials.actionsAlways")}</option>
|
||||
<option value="actionsOnly">
|
||||
{t("credentials.actionsOnly")}
|
||||
</option>
|
||||
<option value="hover">{t("credentials.actionsHover")}</option>
|
||||
<option value="click">{t("credentials.actionsClick")}</option>
|
||||
</select>
|
||||
</div>
|
||||
</SectionCard>
|
||||
|
||||
<p className="text-[11px] text-muted-foreground/70 leading-snug">
|
||||
{t("credentials.customizeSortHint")}
|
||||
</p>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
<p className="text-[11px] text-muted-foreground/70 leading-snug">
|
||||
{t("credentials.customizeSortHint")}
|
||||
</p>
|
||||
</div>
|
||||
</InlineView>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user