|
| 1 | +import { Button } from "@opencode-ai/ui/button" |
| 2 | +import { Icon } from "@opencode-ai/ui/icon" |
| 3 | +import { RadioGroup } from "@opencode-ai/ui/radio-group" |
| 4 | +import { getFilename } from "@opencode-ai/util/path" |
| 5 | +import { Component, For, Show, createMemo, createResource, createSignal } from "solid-js" |
| 6 | +import { useParams } from "@solidjs/router" |
| 7 | +import { useGlobalSDK } from "@/context/global-sdk" |
| 8 | +import { useGlobalSync } from "@/context/global-sync" |
| 9 | +import { useLanguage } from "@/context/language" |
| 10 | +import { useLayout } from "@/context/layout" |
| 11 | +import { getRelativeTime } from "@/utils/time" |
| 12 | +import { decode64 } from "@/utils/base64" |
| 13 | +import type { Session } from "@opencode-ai/sdk/v2/client" |
| 14 | +import { SessionSkeleton } from "@/pages/layout/sidebar-items" |
| 15 | + |
| 16 | +type FilterScope = "all" | "current" |
| 17 | + |
| 18 | +type ScopeOption = { value: FilterScope; label: "settings.archive.scope.all" | "settings.archive.scope.current" } |
| 19 | + |
| 20 | +const scopeOptions: ScopeOption[] = [ |
| 21 | + { value: "all", label: "settings.archive.scope.all" }, |
| 22 | + { value: "current", label: "settings.archive.scope.current" }, |
| 23 | +] |
| 24 | + |
| 25 | +export const SettingsArchive: Component = () => { |
| 26 | + const language = useLanguage() |
| 27 | + const globalSDK = useGlobalSDK() |
| 28 | + const globalSync = useGlobalSync() |
| 29 | + const layout = useLayout() |
| 30 | + const params = useParams() |
| 31 | + const [removedIds, setRemovedIds] = createSignal<Set<string>>(new Set()) |
| 32 | + |
| 33 | + const projects = createMemo(() => globalSync.data.project) |
| 34 | + const layoutProjects = createMemo(() => layout.projects.list()) |
| 35 | + const hasMultipleProjects = createMemo(() => projects().length > 1) |
| 36 | + const homedir = createMemo(() => globalSync.data.path.home) |
| 37 | + |
| 38 | + const defaultScope = () => (hasMultipleProjects() ? "current" : "all") |
| 39 | + const [filterScope, setFilterScope] = createSignal<FilterScope>(defaultScope()) |
| 40 | + |
| 41 | + const currentDirectory = createMemo(() => decode64(params.dir) ?? "") |
| 42 | + |
| 43 | + const currentProject = createMemo(() => { |
| 44 | + const dir = currentDirectory() |
| 45 | + if (!dir) return null |
| 46 | + return layoutProjects().find((p) => p.worktree === dir || p.sandboxes?.includes(dir)) ?? null |
| 47 | + }) |
| 48 | + |
| 49 | + const filteredProjects = createMemo(() => { |
| 50 | + if (filterScope() === "current" && currentProject()) { |
| 51 | + return [currentProject()!] |
| 52 | + } |
| 53 | + return layoutProjects() |
| 54 | + }) |
| 55 | + |
| 56 | + const getSessionLabel = (session: Session) => { |
| 57 | + const directory = session.directory |
| 58 | + const home = homedir() |
| 59 | + const path = home ? directory.replace(home, "~") : directory |
| 60 | + |
| 61 | + if (filterScope() === "current" && currentProject()) { |
| 62 | + const current = currentProject() |
| 63 | + const kind = |
| 64 | + current && directory === current.worktree |
| 65 | + ? language.t("workspace.type.local") |
| 66 | + : language.t("workspace.type.sandbox") |
| 67 | + const [store] = globalSync.child(directory, { bootstrap: false }) |
| 68 | + const name = store.vcs?.branch ?? getFilename(directory) |
| 69 | + return `${kind} : ${name || path}` |
| 70 | + } |
| 71 | + |
| 72 | + return path |
| 73 | + } |
| 74 | + |
| 75 | + const [archivedSessions] = createResource( |
| 76 | + () => ({ scope: filterScope(), projects: filteredProjects() }), |
| 77 | + async ({ projects }) => { |
| 78 | + const allSessions: Session[] = [] |
| 79 | + for (const project of projects) { |
| 80 | + const directories = [project.worktree, ...(project.sandboxes ?? [])] |
| 81 | + for (const directory of directories) { |
| 82 | + const result = await globalSDK.client.experimental.session.list({ directory, archived: true }) |
| 83 | + const sessions = result.data ?? [] |
| 84 | + for (const session of sessions) { |
| 85 | + allSessions.push(session) |
| 86 | + } |
| 87 | + } |
| 88 | + } |
| 89 | + return allSessions.sort((a, b) => (b.time?.updated ?? 0) - (a.time?.updated ?? 0)) |
| 90 | + }, |
| 91 | + { initialValue: [] }, |
| 92 | + ) |
| 93 | + |
| 94 | + const displayedSessions = () => { |
| 95 | + const sessions = archivedSessions() ?? [] |
| 96 | + const removed = removedIds() |
| 97 | + return sessions.filter((s) => !removed.has(s.id)) |
| 98 | + } |
| 99 | + |
| 100 | + const currentScopeOption = () => scopeOptions.find((o) => o.value === filterScope()) |
| 101 | + |
| 102 | + const unarchiveSession = async (session: Session) => { |
| 103 | + setRemovedIds((prev) => new Set(prev).add(session.id)) |
| 104 | + await globalSDK.client.session.update({ |
| 105 | + directory: session.directory, |
| 106 | + sessionID: session.id, |
| 107 | + time: { archived: null as any }, |
| 108 | + }) |
| 109 | + } |
| 110 | + |
| 111 | + const handleScopeChange = (option: ScopeOption | undefined) => { |
| 112 | + if (!option) return |
| 113 | + setRemovedIds(new Set<string>()) |
| 114 | + setFilterScope(option.value) |
| 115 | + } |
| 116 | + |
| 117 | + return ( |
| 118 | + <div class="flex flex-col h-full overflow-y-auto no-scrollbar px-4 pb-10 sm:px-10 sm:pb-10"> |
| 119 | + <div class="sticky top-0 z-10 bg-[linear-gradient(to_bottom,var(--surface-stronger-non-alpha)_calc(100%_-_24px),transparent)]"> |
| 120 | + <div class="flex flex-col gap-1 pt-6 pb-8 max-w-[720px]"> |
| 121 | + <h2 class="text-16-medium text-text-strong">{language.t("settings.archive.title")}</h2> |
| 122 | + <p class="text-14-regular text-text-weak">{language.t("settings.archive.description")}</p> |
| 123 | + </div> |
| 124 | + </div> |
| 125 | + |
| 126 | + <div class="flex flex-col gap-4 max-w-[720px]"> |
| 127 | + <Show when={hasMultipleProjects()}> |
| 128 | + <RadioGroup |
| 129 | + options={scopeOptions} |
| 130 | + current={currentScopeOption() ?? undefined} |
| 131 | + value={(o) => o.value} |
| 132 | + size="small" |
| 133 | + label={(o) => language.t(o.label)} |
| 134 | + onSelect={handleScopeChange} |
| 135 | + /> |
| 136 | + </Show> |
| 137 | + <Show |
| 138 | + when={!archivedSessions.loading} |
| 139 | + fallback={ |
| 140 | + <div class="min-h-[700px]"> |
| 141 | + <SessionSkeleton count={4} /> |
| 142 | + </div> |
| 143 | + } |
| 144 | + > |
| 145 | + <Show |
| 146 | + when={displayedSessions().length} |
| 147 | + fallback={ |
| 148 | + <div class="min-h-[700px]"> |
| 149 | + <div class="text-14-regular text-text-weak">{language.t("settings.archive.none")}</div> |
| 150 | + </div> |
| 151 | + } |
| 152 | + > |
| 153 | + <div class="min-h-[700px] flex flex-col gap-2"> |
| 154 | + <For each={displayedSessions()}> |
| 155 | + {(session) => ( |
| 156 | + <div class="flex items-center justify-between gap-4 px-3 py-1 rounded-md hover:bg-surface-raised-base-hover"> |
| 157 | + <div class="flex items-center gap-x-3 grow min-w-0"> |
| 158 | + <div class="flex items-center gap-2 min-w-0"> |
| 159 | + <span class="text-14-regular text-text-strong truncate">{session.title}</span> |
| 160 | + <span class="text-14-regular text-text-weak truncate">{getSessionLabel(session)}</span> |
| 161 | + </div> |
| 162 | + </div> |
| 163 | + <div class="flex items-center gap-4 shrink-0"> |
| 164 | + <Show when={session.time?.updated}> |
| 165 | + {(updated) => ( |
| 166 | + <span class="text-12-regular text-text-weak whitespace-nowrap"> |
| 167 | + {getRelativeTime(new Date(updated()).toISOString())} |
| 168 | + </span> |
| 169 | + )} |
| 170 | + </Show> |
| 171 | + <Button |
| 172 | + size="normal" |
| 173 | + variant="secondary" |
| 174 | + onClick={() => unarchiveSession(session)} |
| 175 | + > |
| 176 | + {language.t("common.unarchive")} |
| 177 | + </Button> |
| 178 | + </div> |
| 179 | + </div> |
| 180 | + )} |
| 181 | + </For> |
| 182 | + </div> |
| 183 | + </Show> |
| 184 | + </Show> |
| 185 | + </div> |
| 186 | + </div> |
| 187 | + ) |
| 188 | +} |
![opencode-agent[bot]](https://avatars.githubusercontent.com/in/1549082?v=4&size=40){kind=avatar}
0 commit comments