refactor: cherry-pick 8798da2

mary-ext · Mar 29, 2024 · 42a284e · 42a284e
1 parent ff3d191
commit 42a284e
Show file tree

Hide file tree

Showing 12 changed files with 212 additions and 197 deletions.
diff --git a/app/desktop/components/panes/Pane.tsx b/app/desktop/components/panes/Pane.tsx
@@ -1,38 +1,73 @@
-import { type JSX, createMemo } from 'solid-js';
+import { type JSX } from 'solid-js';
+
+import { multiagent } from '~/api/globals/agent';
 
 import { clsx } from '~/utils/misc';
 
-import { PaneSize, SpecificPaneSize } from '../../globals/panes';
-import { preferences } from '../../globals/settings';
+import { getPaneSizeWidth } from '../../globals/panes';
+import { resolvePaneSize } from '../../globals/settings';
+
+import { IconButton } from '~/com/primitives/icon-button';
+
+import DragIndicatorIcon from '~/com/icons/baseline-drag-indicator';
 
 import { usePaneContext } from './PaneContext';
 
 export interface PaneProps {
+	title: string;
+	subtitle?: string;
+	actions?: JSX.Element;
 	children?: JSX.Element;
 }
 
 const Pane = (props: PaneProps) => {
-	const { pane } = usePaneContext();
+	const { pane, sortable } = usePaneContext();
 
-	const size = createMemo(() => {
-		const $size = pane.size;
+	const account = () => {
+		const uid = pane.uid;
+		const data = multiagent.accounts.find((acc) => acc.did === uid);
 
-		if ($size === SpecificPaneSize.INHERIT) {
-			return preferences.ui.defaultPaneSize;
+		if (data) {
+			return '@' + data.session.handle;
 		}
 
-		return $size;
-	});
+		return 'N/A';
+	};
 
 	return (
 		<div
-			class={clsx([
-				`flex shrink-0 flex-col bg-background`,
-				size() === PaneSize.SMALL && `w-84`,
-				size() === PaneSize.MEDIUM && `w-96`,
-				size() === PaneSize.LARGE && `w-120`,
-			])}
+			class="flex shrink-0 flex-col bg-background"
+			style={{ width: getPaneSizeWidth(resolvePaneSize(pane.size)) + 'px' }}
 		>
+			<div
+				class={clsx([
+					`flex h-13 shrink-0 items-center gap-2 border-b border-divider px-4`,
+					sortable.isActiveDraggable && `bg-secondary/30`,
+				])}
+			>
+				<button
+					{...sortable.dragActivators}
+					title="Click and drag to reorder this column"
+					class={/* @once */ IconButton({ edge: 'left', color: 'muted', class: 'cursor-grab' })}
+				>
+					<DragIndicatorIcon />
+				</button>
+
+				<div class="flex min-w-0 grow flex-col gap-0.5">
+					<p class="overflow-hidden text-ellipsis whitespace-nowrap text-base font-bold leading-5">
+						{pane.title || props.title}
+					</p>
+					<p class="overflow-hidden text-ellipsis whitespace-nowrap text-xs text-muted-fg">
+						{(() => {
+							const subtitle = props.subtitle;
+							return (subtitle ? subtitle + ' • ' : '') + account();
+						})()}
+					</p>
+				</div>
+
+				<div class="flex min-w-0 shrink-0 gap-1 empty:hidden">{props.actions}</div>
+			</div>
+
 			{props.children}
 		</div>
 	);

diff --git a/app/desktop/components/panes/PaneFallback.tsx b/app/desktop/components/panes/PaneFallback.tsx
@@ -1,14 +1,22 @@
 import CircularProgress from '~/com/components/CircularProgress';
 
-import Pane from './Pane';
+import { getPaneSizeWidth } from '../../globals/panes';
+import { resolvePaneSize } from '../../globals/settings';
+
+import { usePaneContext } from './PaneContext';
 
 const PaneFallback = () => {
+	const { pane } = usePaneContext();
+
 	return (
-		<Pane>
+		<div
+			class="flex shrink-0 flex-col bg-background"
+			style={{ width: getPaneSizeWidth(resolvePaneSize(pane.size)) + 'px' }}
+		>
 			<div class="grid grow place-items-center">
 				<CircularProgress />
 			</div>
-		</Pane>
+		</div>
 	);
 };
 

diff --git a/app/desktop/components/panes/PaneHeader.tsx b/app/desktop/components/panes/PaneHeader.tsx
diff --git a/app/desktop/components/panes/views/CustomFeedPane.tsx b/app/desktop/components/panes/views/CustomFeedPane.tsx
@@ -20,7 +20,6 @@ import { usePaneContext } from '../PaneContext';
 import Pane from '../Pane';
 import PaneAside from '../PaneAside';
 import PaneBody from '../PaneBody';
-import PaneHeader from '../PaneHeader';
 
 const CustomFeedPaneSettings = lazy(() => import('../settings/CustomFeedPaneSettings'));
 const GenericPaneSettings = lazy(() => import('../settings/GenericPaneSettings'));
@@ -33,25 +32,29 @@ const CustomFeedPane = () => {
 	const { pane } = usePaneContext<CustomFeedPaneConfig>();
 
 	return [
-		<Pane>
-			<PaneHeader title={pane.feed.name} subtitle="Feed">
-				<button
-					title={`${pane.infoVisible ? `Hide` : `Show`} feed information`}
-					onClick={() => (pane.infoVisible = !pane.infoVisible)}
-					class={/* @once */ IconButton({ color: 'muted' })}
-				>
-					<InfoOutlinedIcon />
-				</button>
-
-				<button
-					title="Column settings"
-					onClick={() => setIsSettingsOpen(!isSettingsOpen())}
-					class={/* @once */ IconButton({ edge: 'right', color: 'muted' })}
-				>
-					<SettingsOutlinedIcon />
-				</button>
-			</PaneHeader>
-
+		<Pane
+			title={pane.feed.name}
+			subtitle="Feed"
+			actions={
+				<>
+					<button
+						title={`${pane.infoVisible ? `Hide` : `Show`} feed information`}
+						onClick={() => (pane.infoVisible = !pane.infoVisible)}
+						class={/* @once */ IconButton({ color: 'muted' })}
+					>
+						<InfoOutlinedIcon />
+					</button>
+
+					<button
+						title="Column settings"
+						onClick={() => setIsSettingsOpen(!isSettingsOpen())}
+						class={/* @once */ IconButton({ edge: 'right', color: 'muted' })}
+					>
+						<SettingsOutlinedIcon />
+					</button>
+				</>
+			}
+		>
 			<PaneBody>
 				{(() => {
 					if (pane.infoVisible) {

diff --git a/app/desktop/components/panes/views/CustomListPane.tsx b/app/desktop/components/panes/views/CustomListPane.tsx
@@ -19,7 +19,6 @@ import { usePaneContext } from '../PaneContext';
 import Pane from '../Pane';
 import PaneAside from '../PaneAside';
 import PaneBody from '../PaneBody';
-import PaneHeader from '../PaneHeader';
 
 const CustomListPaneSettings = lazy(() => import('../settings/CustomListPaneSettings'));
 const GenericPaneSettings = lazy(() => import('../settings/GenericPaneSettings'));
@@ -32,25 +31,29 @@ const CustomListPane = () => {
 	const { pane } = usePaneContext<CustomListPaneConfig>();
 
 	return [
-		<Pane>
-			<PaneHeader title={pane.list.name} subtitle="User list">
-				<button
-					title={`${pane.infoVisible ? `Hide` : `Show`} list information`}
-					onClick={() => (pane.infoVisible = !pane.infoVisible)}
-					class={/* @once */ IconButton({ color: 'muted' })}
-				>
-					<InfoOutlinedIcon />
-				</button>
-
-				<button
-					title="Column settings"
-					onClick={() => setIsSettingsOpen(!isSettingsOpen())}
-					class={/* @once */ IconButton({ edge: 'right', color: 'muted' })}
-				>
-					<SettingsOutlinedIcon />
-				</button>
-			</PaneHeader>
-
+		<Pane
+			title={pane.list.name}
+			subtitle="User list"
+			actions={
+				<>
+					<button
+						title={`${pane.infoVisible ? `Hide` : `Show`} list information`}
+						onClick={() => (pane.infoVisible = !pane.infoVisible)}
+						class={/* @once */ IconButton({ color: 'muted' })}
+					>
+						<InfoOutlinedIcon />
+					</button>
+
+					<button
+						title="Column settings"
+						onClick={() => setIsSettingsOpen(!isSettingsOpen())}
+						class={/* @once */ IconButton({ edge: 'right', color: 'muted' })}
+					>
+						<SettingsOutlinedIcon />
+					</button>
+				</>
+			}
+		>
 			<PaneBody>
 				{(() => {
 					if (pane.infoVisible) {

diff --git a/app/desktop/components/panes/views/HomePane.tsx b/app/desktop/components/panes/views/HomePane.tsx
@@ -12,7 +12,6 @@ import { usePaneContext } from '../PaneContext';
 import Pane from '../Pane';
 import PaneAside from '../PaneAside';
 import PaneBody from '../PaneBody';
-import PaneHeader from '../PaneHeader';
 
 const GenericPaneSettings = lazy(() => import('../settings/GenericPaneSettings'));
 const HomePaneSettings = lazy(() => import('../settings/HomePaneSettings'));
@@ -23,17 +22,20 @@ const HomePane = () => {
 	const { pane } = usePaneContext<HomePaneConfig>();
 
 	return [
-		<Pane>
-			<PaneHeader title="Home">
-				<button
-					title="Column settings"
-					onClick={() => setIsSettingsOpen(!isSettingsOpen())}
-					class={/* @once */ IconButton({ edge: 'right', color: 'muted' })}
-				>
-					<SettingsOutlinedIcon />
-				</button>
-			</PaneHeader>
-
+		<Pane
+			title="Home"
+			actions={
+				<>
+					<button
+						title="Column settings"
+						onClick={() => setIsSettingsOpen(!isSettingsOpen())}
+						class={/* @once */ IconButton({ edge: 'right', color: 'muted' })}
+					>
+						<SettingsOutlinedIcon />
+					</button>
+				</>
+			}
+		>
 			<PaneBody>
 				<TimelineList
 					uid={pane.uid}