Skip to content

Commit 196a2be

Browse files
author
codewec
committed
feat: pin files
1 parent 7cc5800 commit 196a2be

19 files changed

Lines changed: 676 additions & 111 deletions

‎app/components/editoro/MainHeader.vue‎

Lines changed: 26 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
11
<script setup lang="ts">
2-
import type { SaveStatusColor } from '~/types/editoro'
3-
4-
const { t } = useI18n()
2+
import type { EditorPinnedBadge, SaveStatusColor } from '~/types/editoro'
53
64
const props = defineProps<{
7-
editorTitle: string
85
editorModeLabel: string
96
editorModeIcon: string
107
editorModeTooltip: string
8+
headerBadges: EditorPinnedBadge[]
119
canRenameOrDelete: boolean
1210
isSaving: boolean
1311
saveStatusColor: SaveStatusColor
@@ -17,68 +15,37 @@ const props = defineProps<{
1715
1816
const emit = defineEmits<{
1917
toggleMode: []
18+
selectBadge: [path: string]
19+
togglePin: [path: string]
2020
rename: []
2121
remove: []
2222
}>()
2323
</script>
2424

2525
<template>
2626
<header class="editoro-main-header">
27-
<UTooltip :text="props.editorModeTooltip">
28-
<UButton
29-
size="xs"
30-
color="neutral"
31-
variant="soft"
32-
:icon="props.editorModeIcon"
33-
@click="emit('toggleMode')"
34-
>
35-
{{ props.editorModeLabel }}
36-
</UButton>
37-
</UTooltip>
38-
39-
<div class="editoro-main-heading">
40-
<div class="editoro-main-title">
41-
{{ props.editorTitle }}
42-
</div>
43-
</div>
44-
45-
<div class="editoro-node-actions">
46-
<template v-if="props.canRenameOrDelete">
47-
<UTooltip :text="props.saveStatusHint">
48-
<UBadge
49-
size="md"
50-
:color="props.saveStatusColor"
51-
variant="soft"
52-
square
53-
class="editoro-save-indicator"
54-
:aria-label="t('main.saveStatus')"
55-
>
56-
<UIcon
57-
:name="props.isSaving ? 'i-lucide-loader-circle' : props.saveStatusIcon"
58-
:class="{ 'editoro-save-spinner': props.isSaving }"
59-
/>
60-
</UBadge>
61-
</UTooltip>
62-
63-
<UButton
64-
size="xs"
65-
color="neutral"
66-
variant="soft"
67-
icon="i-lucide-pencil"
68-
:aria-label="t('main.rename')"
69-
@click="emit('rename')"
70-
/>
71-
72-
<UButton
73-
size="xs"
74-
color="error"
75-
variant="soft"
76-
icon="i-lucide-trash-2"
77-
:aria-label="t('main.remove')"
78-
@click="emit('remove')"
79-
/>
80-
</template>
81-
</div>
27+
<EditoroHeaderModeToggle
28+
:label="props.editorModeLabel"
29+
:icon="props.editorModeIcon"
30+
:tooltip="props.editorModeTooltip"
31+
@toggle="emit('toggleMode')"
32+
/>
33+
34+
<EditoroHeaderPinnedBadges
35+
:badges="props.headerBadges"
36+
@select="(path) => emit('selectBadge', path)"
37+
@toggle-pin="(path) => emit('togglePin', path)"
38+
/>
39+
40+
<EditoroHeaderNodeActions
41+
:can-rename-or-delete="props.canRenameOrDelete"
42+
:is-saving="props.isSaving"
43+
:save-status-color="props.saveStatusColor"
44+
:save-status-icon="props.saveStatusIcon"
45+
:save-status-hint="props.saveStatusHint"
46+
@rename="emit('rename')"
47+
@remove="emit('remove')"
48+
/>
8249
</header>
8350
</template>
8451

@@ -91,47 +58,4 @@ const emit = defineEmits<{
9158
padding: 0.75rem 1rem;
9259
border-bottom: 1px solid var(--ui-border-muted);
9360
}
94-
95-
.editoro-main-heading {
96-
display: flex;
97-
align-items: center;
98-
gap: 0.75rem;
99-
flex: 1;
100-
min-width: 0;
101-
justify-content: center;
102-
}
103-
104-
.editoro-main-title {
105-
min-width: 120px;
106-
overflow: hidden;
107-
text-overflow: ellipsis;
108-
white-space: nowrap;
109-
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
110-
font-size: 0.875rem;
111-
}
112-
113-
.editoro-node-actions {
114-
display: flex;
115-
justify-content: flex-end;
116-
gap: 0.375rem;
117-
min-width: 230px;
118-
}
119-
120-
.editoro-save-indicator {
121-
cursor: default;
122-
}
123-
124-
.editoro-save-spinner {
125-
animation: editoro-spin 0.9s linear infinite;
126-
}
127-
128-
@keyframes editoro-spin {
129-
from {
130-
transform: rotate(0deg);
131-
}
132-
133-
to {
134-
transform: rotate(360deg);
135-
}
136-
}
13761
</style>

‎app/components/editoro/Workspace.vue‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,8 @@ const {
6060
<EditoroMainHeader
6161
v-bind="mainHeaderProps"
6262
@toggle-mode="mainHeaderHandlers.toggleMode"
63+
@select-badge="mainHeaderHandlers.selectBadge"
64+
@toggle-pin="mainHeaderHandlers.togglePin"
6365
@rename="mainHeaderHandlers.rename"
6466
@remove="mainHeaderHandlers.remove"
6567
/>

‎app/components/editoro/header/ModeToggle.vue‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<script setup lang="ts">
2+
const props = defineProps<{
3+
label: string
4+
icon: string
5+
tooltip: string
6+
}>()
7+
8+
const emit = defineEmits<{
9+
toggle: []
10+
}>()
11+
</script>
12+
13+
<template>
14+
<UTooltip :text="props.tooltip">
15+
<UButton
16+
size="xs"
17+
color="neutral"
18+
variant="soft"
19+
:icon="props.icon"
20+
@click="emit('toggle')"
21+
>
22+
{{ props.label }}
23+
</UButton>
24+
</UTooltip>
25+
</template>

‎app/components/editoro/header/NodeActions.vue‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
<script setup lang="ts">
2+
import type { SaveStatusColor } from '~/types/editoro'
3+
4+
const { t } = useI18n()
5+
6+
const props = defineProps<{
7+
canRenameOrDelete: boolean
8+
isSaving: boolean
9+
saveStatusColor: SaveStatusColor
10+
saveStatusIcon: string
11+
saveStatusHint: string
12+
}>()
13+
14+
const emit = defineEmits<{
15+
rename: []
16+
remove: []
17+
}>()
18+
</script>
19+
20+
<template>
21+
<div class="editoro-node-actions">
22+
<template v-if="props.canRenameOrDelete">
23+
<UTooltip :text="props.saveStatusHint">
24+
<UBadge
25+
size="md"
26+
:color="props.saveStatusColor"
27+
variant="soft"
28+
square
29+
class="editoro-save-indicator"
30+
:aria-label="t('main.saveStatus')"
31+
>
32+
<UIcon
33+
:name="props.isSaving ? 'i-lucide-loader-circle' : props.saveStatusIcon"
34+
:class="{ 'editoro-save-spinner': props.isSaving }"
35+
/>
36+
</UBadge>
37+
</UTooltip>
38+
39+
<UButton
40+
size="xs"
41+
color="neutral"
42+
variant="soft"
43+
icon="i-lucide-pencil"
44+
:aria-label="t('main.rename')"
45+
@click="emit('rename')"
46+
/>
47+
48+
<UButton
49+
size="xs"
50+
color="error"
51+
variant="soft"
52+
icon="i-lucide-trash-2"
53+
:aria-label="t('main.remove')"
54+
@click="emit('remove')"
55+
/>
56+
</template>
57+
</div>
58+
</template>
59+
60+
<style scoped>
61+
.editoro-node-actions {
62+
display: flex;
63+
justify-content: flex-end;
64+
gap: 0.375rem;
65+
min-width: 170px;
66+
}
67+
68+
.editoro-save-indicator {
69+
cursor: default;
70+
}
71+
72+
.editoro-save-spinner {
73+
animation: editoro-spin 0.9s linear infinite;
74+
}
75+
76+
@keyframes editoro-spin {
77+
from {
78+
transform: rotate(0deg);
79+
}
80+
81+
to {
82+
transform: rotate(360deg);
83+
}
84+
}
85+
</style>

0 commit comments

Comments
 (0)