Add function for sidebar shot column switch

frontend/src/components/layout/AppSidebar.vue

@@ -36,7 +36,10 @@
           </SidebarMenuItem>
         </SidebarMenu>
       </SidebarGroup>
-
+        
+      <!-- View Settings Section - Only show on shot/project pages -->
+      <SidebarColumnSwitch v-if="userRole !== 'developer' && isOnShotPage" />
+        
       <!-- Projects Section -->
       <!-- <SidebarGroup v-if="userRole !== 'developer'">
         <SidebarGroupLabel>Projects</SidebarGroupLabel>
@@ -91,6 +94,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
+import { useRoute } from 'vue-router'
 import { 
   Sidebar, 
   SidebarContent, 
@@ -122,14 +126,21 @@ import {
 import { useAuthStore } from '@/stores/auth'
 import ProjectSwitcher from './ProjectSwitcher.vue'
 import UserMenu from './UserMenu.vue'
+import SidebarColumnSwitch from '@/components/ui/sidebar/SidebarColumnSwitch.vue'
 const authStore = useAuthStore()
 const { state } = useSidebar()
+const route = useRoute()
 const user = computed(() => authStore.user)
 const userRole = computed(() => authStore.user?.role || 'artist')
 
 // Check if sidebar is collapsed
 const isCollapsed = computed(() => state.value === 'collapsed')
 
+// Check if on shot page - show column switch only on shot pages
+const isOnShotPage = computed(() => {
+  return route.path.includes('/shots') || route.path.includes('/project/')
+})
+
 const props = withDefaults(defineProps<SidebarProps>(), {
   collapsible: "icon",
 })