Niklasbuchfink/fink-55-focus-project-selection-on-project-names-instead-of

.changeset/wicked-zebras-decide.md

@@ -0,0 +1,5 @@
+---
+"@inlang/editor": patch
+---
+
+show project names instead of paths

inlang/source-code/editor/src/pages/@host/@owner/@repository/Layout.tsx

@@ -533,27 +533,20 @@ function ProjectMenu() {
 	const { project, activeProject, setActiveProject, projectList, currentBranch, activeBranch } =
 		useEditorState()
 
-	const activeProjectName = () => {
-		return (
-			activeProject()?.toString().split("/").at(-2) +
-			"/" +
-			activeProject()?.toString().split("/").at(-1)
-		)
-	}
-
-	const shortenProjectName = (projectPath: string) => {
+	const shortenProjectPath = (projectPath: string) => {
 		const projectPathArray = projectPath.split("/")
 		if (projectPathArray.length > 3) {
-			return (
-				"/" +
-				projectPathArray.at(-3) +
-				"/" +
-				projectPathArray.at(-2) +
-				"/" +
-				projectPathArray.at(-1)
-			)
+			return ".../" + projectPathArray.at(-3) + "/" + projectPathArray.at(-2)
+		} else if (projectPathArray.length > 2) {
+			return ".../" + projectPathArray.at(-2)
+		} else {
+			return "./"
 		}
-		return projectPath
+	}
+
+	const projectName = (projectPath: string) => {
+		const projectPathArray = projectPath.split("/")
+		return projectPathArray.at(-1)?.replace(".inlang", "")
 	}
 
 	return (
@@ -576,20 +569,23 @@ function ProjectMenu() {
 					<div slot="prefix">
 						<IconDescription class="-ml-1 w-5 h-5" />
 					</div>
-					{activeProject() ? activeProjectName() : "project"}
+					{activeProject() ? projectName(activeProject()!) : "project"}
 				</sl-button>
 
 				<sl-menu class="w-48 min-w-fit">
 					<For each={projectList()}>
 						{(project) => (
-							<div onClick={() => setActiveProject(project.projectPath)}>
-								<sl-menu-item
-									prop:type="checkbox"
-									prop:checked={activeProject() === project.projectPath}
-								>
-									{shortenProjectName(project.projectPath)}
-								</sl-menu-item>
-							</div>
+							<sl-menu-item
+								prop:type="checkbox"
+								prop:checked={activeProject() === project.projectPath}
+								onClick={() => setActiveProject(project.projectPath)}
+								class="flex items-center"
+							>
+								{projectName(project.projectPath)}
+								<span class="text-on-surface-variant/60 ml-2 text-xs">
+									{shortenProjectPath(project.projectPath)}
+								</span>
+							</sl-menu-item>
 						)}
 					</For>
 				</sl-menu>
@@ -720,7 +716,7 @@ function LintFilter(props: { clearFunction: any }) {
 			}}
 			class="filter border-0 focus:ring-background/100 p-0 m-0 text-sm animate-blendIn"
 		>
-			<div class={"flex items-center gap-2 ml-1 mr-0"} slot="prefix">
+			<div class="flex items-center gap-2 ml-1 mr-0" slot="prefix">
 				<p class="flex-grow-0 flex-shrink-0 text-sm font-medium text-left text-on-surface-variant">
 					Lint
 				</p>

inlang/source-code/editor/src/pages/@host/@owner/@repository/State.tsx

@@ -439,7 +439,8 @@ export function EditorStateProvider(props: { children: JSXElement }) {
 			} else if (projectList.length === 1) {
 				setActiveProject(projectList[0]?.projectPath)
 			} else if (
-				previousProject && projectList.some((project) => project.projectPath === previousProject)
+				previousProject &&
+				projectList.some((project) => project.projectPath === previousProject)
 			) {
 				setActiveProject(previousProject)
 			} else if (
@@ -458,22 +459,27 @@ export function EditorStateProvider(props: { children: JSXElement }) {
 		params.get("project") || undefined
 	)
 
-	createEffect(on(activeProject, () => {
-		const projectPath = activeProject()
-		if (projectPath) {
-			setSearchParams({ key: "project", value: projectPath })
-			// update project of recentProject in local storage
-			setLocalStorage({
-				recentProjects: localStorage.recentProjects.map((project) => {
-					if (project.repository === routeParams().repository && project.owner === routeParams().owner) {
-						return { ...project, project: projectPath }
-					} else {
-						return project
-					}
-				}),
-			})
-		}
-	}))
+	createEffect(
+		on(activeProject, () => {
+			const projectPath = activeProject()
+			if (projectPath) {
+				setSearchParams({ key: "project", value: projectPath })
+				// update project of recentProject in local storage
+				setLocalStorage({
+					recentProjects: localStorage.recentProjects.map((project) => {
+						if (
+							project.repository === routeParams().repository &&
+							project.owner === routeParams().owner
+						) {
+							return { ...project, project: projectPath }
+						} else {
+							return project
+						}
+					}),
+				})
+			}
+		})
+	)
 
 	// polyfill requestIdleCallback for Safari browser
 	const requestIdleCallback =

inlang/source-code/editor/src/pages/@host/@owner/@repository/components/SearchInput.tsx

@@ -5,6 +5,7 @@ import IconSearch from "~icons/material-symbols/search"
 interface SearchInputProps {
 	placeholder: string
 	handleChange: (value: string) => void
+	class?: string
 }
 
 export const SearchInput = (props: SearchInputProps) => {
@@ -14,24 +15,23 @@ export const SearchInput = (props: SearchInputProps) => {
 	createEffect(() => props.handleChange(textValue()))
 
 	return (
-		<div>
-			<sl-input
-				style={{
-					padding: "0px",
-					border: "none",
-					"--tw-ring-color": "#06B6D4",
-					"border-radius": "4px",
-				}}
-				prop:placeholder={props.placeholder}
-				prop:size={"small"}
-				prop:value={textValue()}
-				onInput={(e) => setTextValue(e.currentTarget.value)}
-			>
-				<div slot={"suffix"}>
-					<IconSearch class="w-5 h-5 -mr-1 text-outline-variant" />
-				</div>
-			</sl-input>
-		</div>
+		<sl-input
+			style={{
+				padding: "0px",
+				border: "none",
+				"--tw-ring-color": "#06B6D4",
+				"border-radius": "4px",
+			}}
+			prop:placeholder={props.placeholder}
+			prop:size={"small"}
+			prop:value={textValue()}
+			onInput={(e) => setTextValue(e.currentTarget.value)}
+			class={props.class}
+		>
+			<div slot={"suffix"}>
+				<IconSearch class="w-5 h-5 -mr-1 text-outline-variant" />
+			</div>
+		</sl-input>
 	)
 }
 

inlang/source-code/editor/src/renderer/app.css

@@ -214,7 +214,7 @@ sl-select::part(combobox):hover {
 	background-color: theme(colors.surface-1);
 }
 
-sl-select::part(expand-icon) {
+sl-select.filter::part(expand-icon) {
 	display: none;
 }
 
@@ -325,6 +325,10 @@ sl-menu {
 		var(--tw-shadow);
 }
 
+sl-menu-item::part(base) {
+	width: 100%;
+}
+
 .ProseMirror p.is-editor-empty:first-child::before {
 	color: #adb5bd;
 	content: attr(data-placeholder);