From 2ba2d63c6c99b5f2f745092fc09dc3a4b81e167f Mon Sep 17 00:00:00 2001
From: Henry Hale <92443116+henryhale@users.noreply.github.com>
Date: Mon, 23 Dec 2024 13:17:13 +0300
Subject: [PATCH] chore(refactor): update nav bar, add column view option for
 mobile

---
 source/components/AppEditor.vue           | 32 +++++----
 source/components/BaseHeader.vue          | 81 ++++++++++-------------
 source/components/BaseView.vue            | 13 ++--
 source/components/IconButton.vue          | 29 ++++++++
 source/components/ui/tabs/Tabs.vue        | 22 ------
 source/components/ui/tabs/TabsContent.vue | 33 ---------
 source/components/ui/tabs/TabsList.vue    | 32 ---------
 source/components/ui/tabs/TabsTrigger.vue | 37 -----------
 source/components/ui/tabs/index.js        |  4 --
 source/store/index.js                     |  6 +-
 10 files changed, 94 insertions(+), 195 deletions(-)
 create mode 100644 source/components/IconButton.vue
 delete mode 100644 source/components/ui/tabs/Tabs.vue
 delete mode 100644 source/components/ui/tabs/TabsContent.vue
 delete mode 100644 source/components/ui/tabs/TabsList.vue
 delete mode 100644 source/components/ui/tabs/TabsTrigger.vue
 delete mode 100644 source/components/ui/tabs/index.js

diff --git a/source/components/AppEditor.vue b/source/components/AppEditor.vue
index 4b73334..6092ca6 100644
--- a/source/components/AppEditor.vue
+++ b/source/components/AppEditor.vue
@@ -1,11 +1,8 @@
 <script setup>
-import {
-	Tabs,
-	TabsList,
-	TabsTrigger,
-} from "@/components/ui/tabs";
+import { Button } from '@/components/ui/button';
 import CodeMirror from "./CodeMirror.vue";
 import { useAppStore } from "@/store";
+import { ref } from 'vue'
 
 const store = useAppStore();
 
@@ -13,6 +10,8 @@ const update = (file, data) => {
 	store.code[file] = data;
 };
 
+const currentTab = ref('html')
+
 const tabs = [
 	["html", "index.html"],
 	["css", "style.css"],
@@ -21,17 +20,24 @@ const tabs = [
 </script>
 
 <template>
-	<div class="flex flex-col h-full">
-		<Tabs default-value="html" v-model="store.tab">
-			<TabsList class="w-full">
-				<TabsTrigger v-for="tab in tabs" :key="tab[0]" :value="tab[0]">
+	<div class="flex flex-col h-full relative">
+		<div
+			class="flex items-center flex-none pl-5 sm:pl-6 pr-4 lg:pr-6 antialiased border">
+			<div class="flex">
+				<Button 
+					v-for="tab in tabs" :key="tab[0]"
+					variant="ghost"
+					@click="currentTab = tab[0]"
+					:class="tab[0] === currentTab ? 'text-blue-500' : 'text-muted-foreground'"
+					class="relative rounded-none text-sm leading-6 font-semibold">
+					<span class="absolute bottom-0 inset-x-0 bg-blue-500 h-0.5 rounded-full transition-opacity duration-150" :class="{'opacity-0': tab[0] !== currentTab}"></span>
 					<span class="uppercase sm:hidden">{{ tab[0] }}</span>
 					<span class="hidden sm:inline">{{ tab[1] }}</span>
-				</TabsTrigger>
-			</TabsList>
-		</Tabs>
+				</Button>
+			</div>
+		</div>
 		<div class="flex-grow overflow-y-auto">
-			<CodeMirror v-for="tab in tabs" :key="tab[0]" :class="store.tab !== tab[0] ? 'hidden' : ''" :file="tab[1]"
+			<CodeMirror v-for="tab in tabs" :key="tab[0]" :class="currentTab !== tab[0] ? 'hidden' : ''" :file="tab[1]"
 				:content="store.code[tab[0]]" :lang="tab[0]" @change="(d) => update(tab[0], d)" />
 		</div>
 	</div>
diff --git a/source/components/BaseHeader.vue b/source/components/BaseHeader.vue
index f4de686..95d591e 100644
--- a/source/components/BaseHeader.vue
+++ b/source/components/BaseHeader.vue
@@ -11,18 +11,13 @@ import {
 	MenubarSubTrigger,
 	MenubarSubContent,
 } from './ui/menubar'
-import {
-	Tooltip,
-	TooltipContent,
-	TooltipProvider,
-	TooltipTrigger,
-} from './ui/tooltip'
 import BaseLogo from './BaseLogo.vue'
-import { Button } from './ui/button'
+import IconButton from './IconButton.vue'
 import SplitView from './icons/SplitView.vue'
 import SideView from './icons/SideView.vue'
 import { useAppStore } from '@/store'
-import { useFullscreen } from '@/helpers/fullscreen';
+import { useFullscreen } from '@/helpers/fullscreen'
+import { onMounted, onBeforeUnmount } from 'vue'
 
 const fullscreen = useFullscreen()
 const store = useAppStore()
@@ -32,6 +27,20 @@ const newTab = () => window.open(window.location.href)
 const closeTab = () => window.close()
 const reloadTab = () => window.location.reload()
 
+function newTabHandler(ev) {
+	if (ev.key?.toLowerCase() === 'n' && ev.ctrlKey && ev.altKey) {
+		newTab()
+	}
+}
+
+onMounted(() => {
+	document.addEventListener('keydown', newTabHandler, false)
+})
+
+onBeforeUnmount(() => {
+	document.removeEventListener('keydown', newTabHandler)
+})
+
 </script>
 
 <template>
@@ -61,8 +70,8 @@ const reloadTab = () => window.location.reload()
 					<MenubarSubContent>
 						<MenubarItem @click="switchView('left')">Editor - only</MenubarItem>
 						<MenubarItem @click="switchView('right')">Preview - only</MenubarItem>
-						<MenubarItem @click="switchView('split')" class="hidden sm:inline-block">Split View
-						</MenubarItem>
+						<MenubarItem @click="switchView('column')">Column View</MenubarItem>
+						<MenubarItem @click="switchView('row')" class="hidden sm:flex">Row View</MenubarItem>
 					</MenubarSubContent>
 				</MenubarSub>
 				<MenubarSeparator />
@@ -93,41 +102,21 @@ const reloadTab = () => window.location.reload()
 			</MenubarContent>
 		</MenubarMenu>
 		<div class="flex-grow"></div>
-		<TooltipProvider>
-			<Tooltip>
-				<TooltipTrigger>
-					<Button variant="ghost" size="icon" @click="store.layout = 'left'">
-						<SideView />
-					</Button>
-				</TooltipTrigger>
-				<TooltipContent>
-					<p>Editor</p>
-				</TooltipContent>
-			</Tooltip>
-		</TooltipProvider>
-		<TooltipProvider>
-			<Tooltip>
-				<TooltipTrigger>
-					<Button variant="ghost" size="icon" @click="store.layout = 'split'" class="hidden sm:flex">
-						<SplitView />
-					</Button>
-				</TooltipTrigger>
-				<TooltipContent>
-					<p>Split view</p>
-				</TooltipContent>
-			</Tooltip>
-		</TooltipProvider>
-		<TooltipProvider>
-			<Tooltip>
-				<TooltipTrigger>
-					<Button variant="ghost" size="icon" @click="store.layout = 'right'">
-						<SideView class="rotate-180" />
-					</Button>
-				</TooltipTrigger>
-				<TooltipContent>
-					<p>Preview</p>
-				</TooltipContent>
-			</Tooltip>
-		</TooltipProvider>
+		<IconButton text="Editor" :mobile="true" :active="store.layout === 'left'"
+			@trigger="() => store.layout = 'left'">
+			<SideView />
+		</IconButton>
+		<IconButton text="Row view" :mobile="false" :active="store.layout === 'row'"
+			@trigger="() => store.layout = 'row'">
+			<SplitView />
+		</IconButton>
+		<IconButton text="Column view" :mobile="true" :active="store.layout === 'column'"
+			@trigger="() => store.layout = 'column'">
+			<SplitView class="rotate-90" />
+		</IconButton>
+		<IconButton text="Preview" :mobile="true" :active="store.layout === 'right'"
+			@trigger="() => store.layout = 'right'">
+			<SideView class="rotate-180" />
+		</IconButton>
 	</Menubar>
 </template>
\ No newline at end of file
diff --git a/source/components/BaseView.vue b/source/components/BaseView.vue
index c9b16ed..d9b940c 100644
--- a/source/components/BaseView.vue
+++ b/source/components/BaseView.vue
@@ -12,16 +12,20 @@ const store = useAppStore()
 const panelLeft = ref()
 const panelRight = ref()
 
+const verticalAlign = ref(false)
+
 watchEffect(() => {
 	const view = store.layout
 	if (view === 'left') viewLeft()
 	else if (view === 'right') viewRight()
-	else splitView()
+	else if (view === 'column') splitView(true)
+	else splitView(false)
 })
 
-function splitView() {
+function splitView(column = false) {
 	panelLeft.value?.expand()
 	panelRight.value?.expand()
+	verticalAlign.value = !!column
 }
 
 function viewLeft() {
@@ -31,15 +35,16 @@ function viewLeft() {
 function viewRight() {
 	!panelLeft.value?.isCollapsed && panelLeft.value?.collapse()
 }
+
 </script>
 
 <template>
-	<ResizablePanelGroup id="demo-group-1" direction="horizontal" class="bg-yello-300 box">
+	<ResizablePanelGroup id="demo-group-1" :direction="verticalAlign ? 'vertical' : 'horizontal'" class="bg-yello-300 box">
 		<ResizablePanel ref="panelLeft" id="demo-panel-1" :default-size="50" collapsible :collapsed-size="0"
 			:min-size="35" class="overflow-y-auto">
 			<slot name="left"></slot>
 		</ResizablePanel>
-		<ResizableHandle id="demo-handle-1" class="hover:w-1" />
+		<ResizableHandle id="demo-handle-1" :class="{ 'hover:w-1': !verticalAlign }" />
 		<ResizablePanel ref="panelRight" id="demo-panel-2" :default-size="50" collapsible :collapsed-size="0"
 			:min-size="35" class="overflow-y-auto">
 			<slot name="right"></slot>
diff --git a/source/components/IconButton.vue b/source/components/IconButton.vue
new file mode 100644
index 0000000..27a0b36
--- /dev/null
+++ b/source/components/IconButton.vue
@@ -0,0 +1,29 @@
+<script setup>
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from './ui/tooltip'
+import { Button } from './ui/button'
+
+defineProps(['text', 'active', 'mobile'])
+
+const emit = defineEmits(['trigger'])
+</script>
+
+<template>
+	<TooltipProvider :delay-duration="0">
+		<Tooltip>
+			<TooltipTrigger>
+				<Button variant="ghost" size="icon" @click="emit('trigger')"
+					:class="[active ? 'text-blue-500' : 'text-muted-foreground', mobile ? '' : 'hidden sm:inline-flex']">
+					<slot></slot>
+				</Button>
+			</TooltipTrigger>
+			<TooltipContent>
+				<p>{{ text }}</p>
+			</TooltipContent>
+		</Tooltip>
+	</TooltipProvider>
+</template>
\ No newline at end of file
diff --git a/source/components/ui/tabs/Tabs.vue b/source/components/ui/tabs/Tabs.vue
deleted file mode 100644
index 0b76cdf..0000000
--- a/source/components/ui/tabs/Tabs.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<script setup>
-import { TabsRoot, useForwardPropsEmits } from 'radix-vue';
-
-const props = defineProps({
-  defaultValue: { type: null, required: false },
-  orientation: { type: String, required: false },
-  dir: { type: String, required: false },
-  activationMode: { type: String, required: false },
-  modelValue: { type: null, required: false },
-  asChild: { type: Boolean, required: false },
-  as: { type: null, required: false },
-});
-const emits = defineEmits(['update:modelValue']);
-
-const forwarded = useForwardPropsEmits(props, emits);
-</script>
-
-<template>
-  <TabsRoot v-bind="forwarded">
-    <slot />
-  </TabsRoot>
-</template>
diff --git a/source/components/ui/tabs/TabsContent.vue b/source/components/ui/tabs/TabsContent.vue
deleted file mode 100644
index 19bb066..0000000
--- a/source/components/ui/tabs/TabsContent.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<script setup>
-import { cn } from '@/lib/utils';
-import { TabsContent } from 'radix-vue';
-import { computed } from 'vue';
-
-const props = defineProps({
-  value: { type: [String, Number], required: true },
-  forceMount: { type: Boolean, required: false },
-  asChild: { type: Boolean, required: false },
-  as: { type: null, required: false },
-  class: { type: null, required: false },
-});
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
-
-  return delegated;
-});
-</script>
-
-<template>
-  <TabsContent
-    :class="
-      cn(
-        'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
-        props.class,
-      )
-    "
-    v-bind="delegatedProps"
-  >
-    <slot />
-  </TabsContent>
-</template>
diff --git a/source/components/ui/tabs/TabsList.vue b/source/components/ui/tabs/TabsList.vue
deleted file mode 100644
index 00ebff5..0000000
--- a/source/components/ui/tabs/TabsList.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<script setup>
-import { cn } from '@/lib/utils';
-import { TabsList } from 'radix-vue';
-import { computed } from 'vue';
-
-const props = defineProps({
-  loop: { type: Boolean, required: false },
-  asChild: { type: Boolean, required: false },
-  as: { type: null, required: false },
-  class: { type: null, required: false },
-});
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
-
-  return delegated;
-});
-</script>
-
-<template>
-  <TabsList
-    v-bind="delegatedProps"
-    :class="
-      cn(
-        'inline-flex items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',
-        props.class,
-      )
-    "
-  >
-    <slot />
-  </TabsList>
-</template>
diff --git a/source/components/ui/tabs/TabsTrigger.vue b/source/components/ui/tabs/TabsTrigger.vue
deleted file mode 100644
index 43a5309..0000000
--- a/source/components/ui/tabs/TabsTrigger.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<script setup>
-import { cn } from '@/lib/utils';
-import { TabsTrigger, useForwardProps } from 'radix-vue';
-import { computed } from 'vue';
-
-const props = defineProps({
-  value: { type: [String, Number], required: true },
-  disabled: { type: Boolean, required: false },
-  asChild: { type: Boolean, required: false },
-  as: { type: null, required: false },
-  class: { type: null, required: false },
-});
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
-
-  return delegated;
-});
-
-const forwardedProps = useForwardProps(delegatedProps);
-</script>
-
-<template>
-  <TabsTrigger
-    v-bind="forwardedProps"
-    :class="
-      cn(
-        'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',
-        props.class,
-      )
-    "
-  >
-    <span class="truncate">
-      <slot />
-    </span>
-  </TabsTrigger>
-</template>
diff --git a/source/components/ui/tabs/index.js b/source/components/ui/tabs/index.js
deleted file mode 100644
index 8f5f744..0000000
--- a/source/components/ui/tabs/index.js
+++ /dev/null
@@ -1,4 +0,0 @@
-export { default as Tabs } from './Tabs.vue';
-export { default as TabsContent } from './TabsContent.vue';
-export { default as TabsList } from './TabsList.vue';
-export { default as TabsTrigger } from './TabsTrigger.vue';
diff --git a/source/store/index.js b/source/store/index.js
index 73a549f..1d578dd 100644
--- a/source/store/index.js
+++ b/source/store/index.js
@@ -6,9 +6,7 @@ import { useToast } from '@/components/ui/toast/use-toast'
 const prevSession = restore() || template
 
 export const useAppStore = defineStore("app", () => {
-	const layout = ref("split");
-
-	const tab = ref("html");
+	const layout = ref(window.innerWidth < 768 ? 'column' : 'row');
 
 	const code = reactive({
 		html: prevSession['index.html'],
@@ -40,5 +38,5 @@ export const useAppStore = defineStore("app", () => {
 		}
 	});
 
-	return { layout, code, tab, saveSession };
+	return { layout, code, saveSession };
 });